:root {
    --primary-bg: #f5f7ff;
    --card-bg: #ffffff;
    --primary-text: #333333;
    --secondary-text: #666666;
    --accent-blue: #3a7bd5;
    --accent-purple: #00d2ff;
    --accent-pink: #ff2e6a;
    --accent-green: #00c48c;
    --border-color: #e0e0e0;
    --radius: 16px;
    --transition: all 0.3s cubic-bezier(0.25, 0.2, 0.25, 0.1);
}

.dx-texteditor-container {
    background-color: var(--cyan);
    border-radius: 5px;
}

.dx-texteditor-input-container input {
    color: white;
}

.header {
    text-align: center;
    margin-bottom: 40px;
}

    .header h2 {
        color: var(--blue);
        font-weight: 600;
        font-size: 25px;
    }

.container {
    padding: 8% 5% 10% 5%;
}


.subtitle {
    font-size: 1rem;
    color: var(--secondary-text);
    max-width: 600px;
    margin: 0 auto;
}

.section-title {
    font-size: 1.5rem;
    margin: 20px 0 20px;
    text-align: center;
    color: var(--blue);
    letter-spacing: 0px;
}

.cards-container {
    gap: 80px;
    margin-top: 30px;
    margin-bottom: 100px;
    flex-wrap: wrap;
    display: flex;
    margin: 0;
    justify-content: center;
}

.card-box {
    background: var(--cyan);
    border-radius: var(--radius);
    padding: 25px;
    position: relative;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 250px;
    box-shadow: 1px 1px 5px -2px;
    border-left: 4px solid var(--light);
}

    .card-box:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    }

.card-top {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.currency-icon-wrapper {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.5rem;
    color: white;
}

.eur .currency-icon-wrapper {
    background: linear-gradient(135deg, var(--light), var(--light));
}

.usd .currency-icon-wrapper {
    background: linear-gradient(135deg, var(--light), var(--light));
}

.currency-radio-input {
    display: none;
}

.currency-name {
    font-size: 1.2rem;
    font-weight: 600;
}

.currency-amount {
    font-size: 2.2rem;
    color: var(--blue);
    margin: 15px 0;
    font-family: 'BPG Arial Caps';
}

.currency-label {
    font-size: 1rem;
    color: var(--secondary-text);
    margin-bottom: 20px;
}

.card-bottom {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.exchange-rate {
    font-size: 1rem;
    color: var(--blue);
    font-family: 'DejaVu Sans';
}



.eur .default-btn {
    color: var(--light);
}

.usd .default-btn {
    color: var(--light);
}


.checkbox-group {
    position: relative;
    top: -10px;
    padding-top: 15px;
}

.dx-checkbox-text {
    font-family: 'bpg nino-mtavruli';
    font-size: 1.2rem;
    font-weight: bold;
}

.step2-section {
    width: 650px;
}

    .step2-section .dx-field-value,
    .step3-section .dx-field-value {
        width: 100% !important;
    }

.dx-field-label {
    font-family: 'bpg nino-mtavruli';
    font-size: 1.2rem;
    color: var(--blue);
    font-weight: bold;
}

.step2-section .dx-field-label {
    width: 130px;
    min-width: 130px;
}

.step3-section .dx-field-label {
    width: 170px;
    min-width: 170px;
}

.checkbox-input {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border: 1px solid var(--light);
    border-radius: 4px;
    cursor: pointer;
}

.checkbox-group label {
    margin: 0;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 80px;
    width: 100%;
}

    .form-actions
    button {
        background: rgba(0, 0, 0, 0.05);
    }

    .form-actions .dx-button-content .dx-button-text {
        font-size: 1.2rem !important;
    }

    .form-actions .dx-button {
        height: 46px;
    }

    .form-actions button span {
        position: relative;
        top: 2px;
    }

.insurer-info-row {
    display: flex;
    justify-content: space-between;
    gap: 40px
}

    .insurer-info-row .dx-field-label {
        font-size: 0.9rem;
    }

    .insurer-info-row > div {
        flex: 1;
    }

.step3-section .dx-texteditor .dx-placeholder {
    font-size: 0.9rem;
    font-family: 'DejaVu Sans';
    color: white;
}

.step3-section .dx-texteditor {
    width: 235px;
}

.dx-invalid-message > .dx-overlay-content {
    padding: 0;
}

.dx-invalid.dx-texteditor.dx-show-invalid-badge .dx-texteditor-input-container::after {
    display: none;
}

.insurer-empty-box {
    background: #f7f7f7;
    padding: 30px;
    display: flex;
    font-size: 1rem;
    justify-content: center;
    margin-top: 50px;
    border-radius: 5px;
}

.complated-info {
    background: #f7f7f7;
    padding: 10px;
    border-radius: 5px;
}

.complated-info-row {
    font-size: 0.9rem;
    font-family: 'BPG Arial Caps';
}

    .complated-info-row label {
        width: 90px;
        margin: 0
    }

    .complated-info-row span {
        color: var(--dark)
    }

#policy-list-container .card-bottom {
    padding-top: 12px;
}

#policy-list-container .card-box {
    padding-bottom: 12px;
    margin-top: 25px;
    margin-bottom: 15px
}

.policy-item .dx-button-text {
    font-size: 14px !important;
}

.policy-item .dx-icon {
    font-size: 13px !important;
    margin-right: 6px !important;
}

.card-box-right {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    font-family: 'DejaVu Sans';
    font-size: 0.9rem;
}

.card-box-right-row {
    padding-right: 20px;
    flex-direction: column;
    display: flex;
    gap: 7px;
    justify-content: center;
    white-space: nowrap;
}

#policy-list-container .card-box .left-text {
    font-size: 1.2rem;
    font-family: 'BPG Arial Caps';
}

input[name="CurrencyId"]:checked + label::after {
    content: "\f058";
    position: absolute;
    right: 2px;
    font-family: "Font Awesome 5 Free";
    height: 9px;
    top: -5px;
    font-size: 35px;
    color: var(--blue);
}

.terms-checkbox .dx-checkbox-text {
    font-family: 'DejaVu Sans';
    color: var(--dark);
    letter-spacing: 0;
}

.tr-compl-header-column {
    font-size: 0.9rem;
}

.tr-compl-header-row {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--blue);
    font-weight: 700;
    flex: 1;
}

.tr-compl-header {
    display: flex;
    justify-content: space-between;
    background: var(--cyan);
    padding: 15px 30px;
}

    .tr-compl-header label {
        font-family: 'bpg nino-mtavruli';
        margin: 0
    }

.tr-compl-header-row span {
    font-weight: 600;
}

.tr-compl-middle-item {
    display: flex;
    justify-content: space-between;
    padding: 30px 30px 10px;
}

.tr-compl-middle-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 15px;
}

.tr-compl-middle-row-item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex: 1;
    min-width: 200px;
}

    .tr-compl-middle-row-item i {
        color: var(--dark);
        font-size: 14px;
        display: flex;
        justify-content: center;
        width: 15px;
    }

.tr-compl-middle {
    background: white;
    display: flex;
    padding: 30px;
    align-items: center;
}

.tr-compl-middle-row {
    display: flex;
    margin-bottom: 5px;
    flex-direction: column;
    gap: 15px;
}

.tr-compl-middle-column h5 {
    color: var(--dark);
    font-weight: 600;
    margin: 0;
}

.tr-compl-middle-column span {
    color: var(--blue);
    font-size: 0.9rem;
    FONT-FAMILY: 'BPG Arial Caps';
    font-weight: 700;
}

.tr-compl-middle-item-bottom {
    font-family: 'DejaVu Sans';
    font-size: 1rem;
    display: flex;
    justify-content: end;
    gap: 30px;
    background: #f2f2f2;
    padding: 10px;
    padding-right: 30px;
    align-items: center;
}

.total-amount {
    display: flex;
    gap: 10px;
    justify-content: end;
    padding: 30px;
    font-weight: 700;
    align-items: baseline;
}

.tr-compl-box {
    box-shadow: 2px 2px 13px -4px #ccc, 0px 0px 0px #ccc;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    margin-bottom: 30px;
}


.step4-section .currency {
    font-family: 'BPG Arial Caps 2010';
}

.success-page {
    text-align: center;
    margin: 10% 2%;
    color: var(--blue);
    font-weight: 600;
    font-size: 1.1rem;
}

#field-custom-error {
    position: absolute;
    top: -20px;
    font-family: 'BPG Arial Caps';
    font-size: 12px;
    left: 0;
    color: #f44336;
    white-space: nowrap;
}

.sessions-panel {
    padding: 10px;
    padding: 20px 30px;
    margin: 0 35px 45px 35px;
    text-align: center;
    align-items: center;
}


.session-item-actions {
    display: flex;
    gap: 10px;
}

    .session-item-actions .dx-button {
        height: 25px !important
    }

        .session-item-actions .dx-button .dx-button-text {
            font-size: 0.9rem !important;
        }

.session-item {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    padding: 20px 10px;
    border: 2px solid #efefef;
    border-radius: 4px;
    background: #efefef;
}

.session-item-names {
    padding: 0px 10px;
    font-size: 1rem;
    position: relative;
    top: 2px;
}

.dx-popup-bottom.dx-toolbar .dx-toolbar-items-container {
    height: 80px;
}

.dx-toolbar-button .dx-checkbox-text {
    font-size: 1rem;
}

.sumAmount {
    text-align: right;
    font-size: 1.2rem;
    color: var(--blue);
    font-weight: 600;
    margin-right: 10px;
}

.passport-desc {
    font-family: 'DejaVu Sans';
    color: grey;
    max-width: 400px;
}

.for-tablet {
    display: none;
}

.terms-popup-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 20px;
}

#addInsurerBtnId .dx-button-content {
    padding: 6px 5px;
}

#addInsurerBtnId .dx-icon {
    font-size: 14px;
}

#addInsurerBtnId .dx-icon {
    font-size: 14px;
    margin-right: 5px;
}

#addInsurerBtnId .dx-button-text {
    font-size: 0.9rem !important;
    letter-spacing: -0.5px;
}

#addContactIndoBtnId {
    background: var(--cyan) !important;
}

    #addContactIndoBtnId .dx-button-text {
        font-size: 0.9rem !important;
    }



.added-insurer-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    background: rgb(220 220 220 / 74%) !important;
}

.added-insurer-info-item {
    display: flex;
    flex-direction: column;
    font-size: 1.1rem;
    font-family: 'BPG Arial Caps';
    color: var(--blue);
    padding: 10px;
    font-weight: 600;
    text-align: center;
}

.policy-item {
    margin-bottom: 50px;
}

#policy-list-container {
    margin-bottom: 100px;
    margin-top: 50px;
}

.added-insurer-info-header {
    display: flex;
    justify-content: space-between;
    background: var(--cyan);
    padding: 15px;
    border-radius: 10px 10px 0 0;
    color: var(--blue);
    font-weight: 700;
    font-size: 0.9rem;
    gap: 15px;
}


@media (max-width: 768px) {
    .session-item {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .added-insurer-info-header > div {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    .added-insurer-info-item {
        font-size: 0.9rem;
        text-align: center;
    }
        .added-insurer-info-item > div {
            min-height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

    .session-item-names {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sessions-panel {
        padding: 0;
    }

    .tr-compl-middle {
        flex-direction: column;
        gap: 20px;
    }

    .tr-compl-middle-column {
        gap: 5px;
    }



    .tr-compl-header {
        padding: 15px;
    }



    .form-actions .dx-button-content .dx-button-text {
        font-size: 1rem !important;
    }

    .form-actions {
        justify-content: center;
        gap:20px;
    }
    .cards-container{
        gap:30px;
    }

    #addContactIndoBtnId .dx-button-text {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 1000px) {
    .header {
        margin-bottom: 25px;
    }

        .header h2 {
            font-size: 1.4rem;
        }

    .card-box {
        padding: 15px 25px;
    }

    .card-top {
        margin: 0;
    }

    .tr-compl-header-row {
        justify-content: space-between !important;
        font-size: 0.8rem;
    }

    .tr-compl-middle-column span {
        font-size: 0.8rem;
    }

    .insurer-info-row {
        flex-direction: column;
        gap: 0;
    }

    .policy-item .insurer-info-row {
        text-align: center;
    }

    .policy-item .card-bottom {
        justify-content: center;
    }

    .for-desktop {
        display: none;
    }

    .for-tablet {
        display: block;
    }

    .policy-item h6 {
        margin-bottom: 15px;
    }

    .dx-popup-bottom:not(.dx-dialog-buttons) {
        height: 130px;
    }

    .terms-popup-bottom {
        margin: 12px 0;
    }

    .dx-popup-bottom:not(.dx-dialog-buttons) .dx-toolbar-center {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tr-compl-header {
        gap: 10px;
        flex-direction: column;
    }

    .tr-compl-middle-item {
        flex-direction: column;
        gap: 15px;
    }

    .dx-toolbar-button .dx-checkbox-text {
        font-size: 0.9rem;
    }

    .dx-popup-bottom.dx-toolbar {
        padding: 0px 8px 10px 15px !important;
        line-height: 1rem;
    }
}