.aich-container {
    max-width: 1000px;
    margin: 20px 0;
}

.aich-card {
    background-image: url('../../assets/background.png');
    background-size: cover;
    background-position: center;
    border: 2px outset #9ff2fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    color: white !important;
    box-shadow: 3px 3px 6px #696767;

    .card-table {
        border: 1px outset #9ff2fa;
        background-color: #84b4efe6;
        /*background-color: #aecaec94;*/
        border-radius: 8px;
        padding: 4px 12px;
        box-shadow: 0px 0px 4px;
    }

    .form-table { 
        label {
            color: white;
        }
        .description {
            color: #9ff2fa;
            a {
                font-weight: 700;
                color: #045296;
            }
        }
    }

    .steps {
        background-color: #84b4efe6;
        padding: 2px 8px;
        border: 1px outset #9ff2fa;
        border-radius: 2px;
        box-shadow: 0px 0px 4px;
        a {
            font-weight: 700;
            color: #9ff2fa;
        }
    }
}

.aich-card h2,
.aich-card h3 {
    margin-top: 0;
    border: 2px outset #9ff2fa;
    color: white !important;
    background-color: #84b4efe6;
    padding: 8px 8px 8px 10px !important;
    border-radius: 7px;
    box-shadow: 0px 0px 6px;
}

.aich-result-container {
    margin-top: 20px;
}

.aich-result-box {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
    max-height: 500px;
    overflow-y: auto;
}

.aich-result-box pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.aich-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2271b1;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#aich-loading, #aich-image-loading {
    text-align: center;
    padding: 20px;
    display: none;
    font-size: x-small;
    font-weight: bold;
}

#aich-image-preview {
    margin: 20px 0;
    text-align: center;
}

#aich-image-preview img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    max-width: 100%;
}

.notice {
    margin: 15px 0;
}

.button {
    margin-right: 10px;
}

textarea.large-text {
    width: 100%;
}

.form-table th {
    width: 200px;
}

select {
    min-width: 250px;
}

.provider_icon {
    top: 2px;
    position: relative;
    height: 16px;
}

.banner {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    background-image: url('../../assets/background.png');
    background-size: cover;
    background-position: center;
    padding: 8px;
    font-size: xx-large;
    color: white;    
}

.aich_logo {
    height: 90px;
    padding: 2px;
    background-color: white;
    border-radius: 50%;
    margin-left: 12px;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    thead {
        th {            
            padding: 10px;
            border: 2px solid white;
            color: white;
            font-size: medium;
            text-transform: uppercase;
        }
        th:first-child {
            text-align: left !important;
            background-color: rgb(1 16 39) !important;
            color: white !important;
            font-size: large !important;
        }
        th.free-plan {
            background-color: #2271b1 !important;
        }
        th.pro-plan {
            background-color: #4f94d4 !important;
        }
        th.pro-plus-plan {
            background-color: rgb(7 38 60) !important;
        }
        .plan-icon {
            background-color: white;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5px;
            font-size: x-large;
            border-radius: 50%;
            width: 0px;
            height: 24px;
            padding: 11px 38px 9px 6px;
            text-align: center;
        }
    }
    tbody {
        tr td {
            font-size: smaller;
            font-weight: 600;
            padding: 8px;
            border-bottom: 1px solid white;
            font-style: italic;
        }
        tr td:first-child {
            padding: 4px 0px;
        }
        .section {
            background-color: #deebf7;
            padding: 16px !important;
            font-size: medium;
            border: 2px solid white;
            font-weight: bold;
            color: black;
        }
        .no {
            background-color: #5a5d60 !important;
            color: #c9c8c8 !important;
            text-align: center !important;
            font-size: medium !important;
        }
        .yes {
            background-color: #0277b7 !important;
            color: #ffffff !important;
            text-align: center !important;
            font-size: medium !important;
            border: 1px solid white;
        }
    }
    .provider_icon {        
        background-color: white;
        padding: 4px;
        height: 20px !important;
        border-radius: 50%;
    }
}

.aich-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .aich-tab {
        width: 100%;        
        button {
            width: 100%;
        }
    }

    .tab-content {   
        border: 1px outset #9ff2fa;
        background-color: #84b4efe6;
        border-radius:2px;
        padding: 4px 12px;
        box-shadow: 0px 0px 4px;
        margin: 5px;                
        input {
            width: 100%;
        }
        label {
            font-weight: 700;
        }
        .description {
            color: #9ff2fa;
            a {
                font-weight: 700;
                color: #045296;
            }
            strong {
                color: white;
            }
        }
    }

}

.hidden {
    display: none;
}

div.aich-tab-button {
    border: 1px solid black;
    margin: 2px;
    padding: 4px;
    background-color: #ebf1f1;
    cursor: pointer;
    color: #015681;
    font-weight: 700;
    border-radius: 4px;
    > div {        
        display: flex;
        img {
            top: 0px;
            position: relative;
            vertical-align: middle;
            margin-right: 4px;
        }
        div {
            align-content: center;
        }
        > div:nth-child(1), > div:nth-child(3) {
            width: min-content;
        }
        > div:nth-child(2) {
            flex: auto;
        }
    }
    
}

div.aich-tab-button:hover {
    background-color: #d8e5e5;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.message.alert {
    color: red;
    font-size: small;
}

.coming-soon {
    font-size: x-small;
    font-style: italic;
    font-weight: bolder;
    color: yellow !important;
    text-align: center;
    text-transform: uppercase;
}

.submit {
    button {
        background-color: #3c97d6 !important;
        font-size: 16px !important;
        border: 1px outset #9ff2fa !important;
        border-radius: 8px !important;
        padding: 4px 16px !important;
        box-shadow: 2px 2px 4px gray !important;
    }
    button:hover {
        background-color: #22699c !important;
        box-shadow: none !important;
    }
}

.aich-card .submit {
    .button {
        background-color: #3c97d6 !important;
        font-size: 12px !important;
        border: 1px outset #9ff2fa !important;
        border-radius: 4px !important;
        padding: 2px 8px !important;
        box-shadow: 1px 1px 2px gray !important;
        color: white !important;
    }
    .button:hover {
        background-color: #22699c !important;
        box-shadow: none !important;
    }
}

.aich-result-container {
    h3.title {
        background-color: #3e7afc;
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
    }
    .aich-result-box {
        border: 2px solid #207de1;
    }
}