:root {
    --accent-color: #025182;
    --white: #ffffff;
    --input-color: #99A3BA;
    --input-border: #CDD9ED;
    --input-background: #fff;
    --input-placeholder: #CBD1DC;
    --input-border-focus: #275EFE;
    --group-color: var(--input-color);
    --group-border: var(--input-border);
    --group-background: #EEF4FF;
    --group-color-focus: #fff;
    --group-border-focus: var(--input-border-focus);
    --group-background-focus: #678EFE;
}

.identity-modal {
    margin: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    max-width: 50%;
}

.identity-title {
    color: #333333;
    text-align: left;
}

h2.identity-title {
    color: var(--accent-color);
    text-align: center;
    margin: 0px;
    margin-bottom: 10px;
}

h3.identity-title {
    padding-left: 15px;
    font-size: 14px;
}

.identity-label {
    text-align: center;
    display: block;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-left: 10px;
}

.identity-modal .btn {
    width: 100%;
}

.identity-control {
    width: 100%;
    height: 40px;
    display: block;
    color: #495057;
    font-size: 13px;
    background: #fff;
    border: 1px solid #d5dee6;
    padding: 6px 35px 6px 10px;
    border-radius: 21px;
}

.btn {
    text-align: center;
    padding: 11px 20px;
    color: #fff;
    position: relative;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: 0.2s ease-in-out;
    box-shadow: rgba(100,100,100,0) 0px 0px 0px;
    cursor: pointer;
}

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: rgba(100,100,100,0.9) 0px 2px 4px;
    }

.identity-submit {
    background: var(--accent-color);
}

.identity-paragraph {
    text-align: center;
}

.identity-group {
    margin-bottom: 10px;
}

.identity-form {
    display: grid;
    grid-gap: 10px;
}

.form-field {
    display: block;
    width: 100%;
    padding: 8px 12px;
    line-height: 16px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 6px;
    -webkit-appearance: none;
    color: var(--input-color);
    border: 1px solid var(--input-border);
    background: var(--input-background);
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
}

    .form-field::-webkit-input-placeholder {
        color: var(--input-placeholder);
    }

    .form-field::-moz-placeholder {
        color: var(--input-placeholder);
    }

    .form-field:-ms-input-placeholder {
        color: var(--input-placeholder);
    }

    .form-field::-ms-input-placeholder {
        color: var(--input-placeholder);
    }

    .form-field::placeholder {
        color: var(--input-placeholder);
    }

    .form-field:focus {
        outline: none;
        border-color: var(--input-border-focus);
    }

.identity-group {
    position: relative;
    display: -webkit-box;
    display: block;
    width: 100%;
}

    .identity-group > span,
    .identity-group .form-field {
        white-space: nowrap;
        display: block;
    }

        .identity-group > span:not(:first-child):not(:last-child),
        .identity-group .form-field:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

        .identity-group > span:first-child,
        .identity-group .form-field:first-child {
            border-radius: 6px 0 0 6px;
        }

        .identity-group > span:last-child,
        .identity-group .form-field:last-child {
            border-radius: 0 6px 6px 0;
        }

        .identity-group > span:not(:first-child),
        .identity-group .form-field:not(:first-child) {
            margin-left: -1px;
        }

    .identity-group .form-field {
        position: relative;
        z-index: 1;
        -webkit-box-flex: 1;
        flex: 1 1 auto;
        width: 1%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .identity-group > span {
        text-align: center;
        padding: 8px 12px;
        font-size: 12px;
        line-height: 16px;
        color: var(--group-color);
        background: var(--group-background);
        border: 1px solid var(--group-border);
        -webkit-transition: background .3s ease, border .3s ease, color .3s ease;
        transition: background .3s ease, border .3s ease, color .3s ease;
    }

    .identity-group:focus-within > span {
        color: var(--group-color-focus);
        background: var(--group-background-focus);
        border-color: var(--group-border-focus);
    }

    .identity-group a {
        cursor: pointer;
    }


.identity-card {
    box-shadow: 1px 1px 2px #BBC6CC;
    border-radius: 5px;
    overflow: visible;
    margin-bottom: 20px;
    padding: 20px 20px 30px;
    position: relative;
    background: #fff;
}

.identity-details-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #CCC;
    min-height: 51px;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.identity-details-btn {
    padding: 6px 16px;
    margin: 4px;
    width: auto;
    background: var(--accent-color);
}

.identity-account {
    background: #02518224;
    padding: 30px 20px;
}

.identity-details-edit {
    display: block;
}

.identity-details-collumn {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content;
    justify-items: left;
    grid-gap: 10px;
}

.cancel-order-modal .modal-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    align-content: start;
    grid-template-rows: auto auto 1fr auto;
}

.cancel-order-modal .modal-row {
    grid-column: span 2;
}

    .cancel-order-modal .modal-row.full-width {
        grid-column: 1 / -1;
    }

.cancel-order-modal h3 {
    grid-column: 1 / -1; 
}

.cancel-order-modal p {
    grid-column: 1 / -1;
    margin-top: 5px;
    margin-bottom: 10px;
}

.cancel-order-modal .modal-edit {
    display: block;
    margin-bottom: 5px;
}

.cancel-order-modal #additional-details-section textarea {
    width: 100%;
}

.cancel-order-modal #details-required-msg {
    display: none;
    margin-top: 5px;
}

.cancel-order-modal .confirm-button-row {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: auto;
}

.cancel-order-btn {
    background-color: white;
    color: red;
    border: 2px solid red;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    width: auto;
}

    .cancel-order-btn:disabled {
        opacity: 0.5;
    }

    .cancel-order-btn:hover:enabled {
        background-color: #f8f8f8;
        color: darkred;
        border-color: darkred;
    }


.identity-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    align-content: center;
}

    .identity-details input, .identity-details textarea {
        position: relative;
        z-index: 1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 32px;
        padding: 6px 32px 6px 10px;
        background: #fff;
        border: 1px solid #bbb;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        vertical-align: top;
        font-size: 13px;
        line-height: 18px;
        color: #000;
    }

    .identity-details label {
        display: block;
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 15px;
        color: #999;
        font-weight: 700;
    }

    .identity-details .validation-message {
        color: red;
    }

form {
    padding: 0;
    margin: 0;
}

.identity-radio {
    margin-right: 10px;
}

.identity-orders {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: #195284;
    overflow: hidden;
    grid-gap: 1px;
    border: 1px solid #195284;
}

.identity-myinvoices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    /*background: #195284;*/
    background-color: transparent;
    overflow: hidden;
    grid-gap: 1px;
    /* border: 1px solid #195284; */
}

    .identity-myinvoices .order-column {
        background-color: transparent !important;
    }


    .order-hearder {
        background: #195284;
        color: #fff;
        padding: 10px;
        text-align: center;
    }

.status {
    color: white;
    padding: 3px 6px;
    background-color: #3a55b1;
    display: inline-block;
    border-radius: 4px;
}


.order-column {
    padding: 10px;
    text-align: center;
    background: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 5px;
}

.identity-product-notifications {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: #195284;
    overflow: hidden;
    grid-gap: 1px;
    border: 1px solid #195284;
}

.product-notifications-hearder {
    background: #195284;
    color: #fff;
    padding: 10px;
    text-align: center;
}

.product-notifications-column {
    padding: 10px;
    text-align: center;
    background: #fff;
}

.identity-row {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    grid-gap: 20px;
}

.identity-products {
    display: grid;
    grid-template-columns: minmax(150px,3fr) 1fr 1fr 1fr;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: #195284;
    overflow: hidden;
    grid-gap: 1px;
    border: 1px solid #195284;
}

.identity-invoices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: #195284;
    overflow: hidden;
    grid-gap: 1px;
    border: 1px solid #195284;
}

.identity-awbs {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: #195284;
    overflow: hidden;
    grid-gap: 1px;
    border: 1px solid #195284;
}

.identity-awb-status {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: #195284;
    overflow: hidden;
    grid-gap: 1px;
    border: 1px solid #195284;
}




.identity-primary-details {
    display: grid;
    grid-row-gap: 20px;
    grid-column-gap: 30px;
    grid-template-columns: 1fr;
    border-bottom: 1px solid #CCC;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

    .identity-primary-details .row > * {
        flex-shrink: 1;
    }


    .identity-primary-details .row {
        display: flex;
        flex-wrap: nowrap;
    }

.row label {
    width: 150px;
}

.identity-text {
    flex-grow: 1;
    position: relative;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;
    padding: 6px 32px 6px 10px;
    background: #fff;
    border: 1px solid #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    vertical-align: top;
    font-size: 13px;
    line-height: 18px;
    color: #000;
}

.user-profile-name {
    font-weight: bold;
    font-size: 16px;
    position: sticky;
    top: 15px;
}

.identity-radio {
    display: none;
}

.identity-account-menu {
    display: flex;
}

.identity-left {
    flex-grow: 1;
    margin-right: 10px;
    max-width: 20%;
    width: 20%;
}

.identity-right {
    flex-grow: 4;
    flex-basis: 0;
}

.identity-left ul {
    list-style: none;
    padding: 0px;
    border-top: 1px solid #eee;
    position: sticky;
    top: 50px;
}

.identity-account-details {
    display: flex;
}

.identity-left .user-account-menu li a {
    color: #195284;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    font-weight: 600;
}

.identity-account-card {
    flex: 1;
    margin-right: 10px;
}

.our-client {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px 15px;
    max-width: 35%;
    text-align: center;
}

@media (max-width: 468px) {
    .identity-account-menu, .identity-account-details {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .identity-account-menu, .identity-account-details {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .identity-left {
        flex-grow: 1;
        margin-right: 10px;
        max-width: 50%;
        width: 50%;
    }

    .our-client {
        max-width: 95%;
    }
}

#loader {
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #444444;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}

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

.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.bottom-border {
    border-bottom: 1px solid #CCC;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.sincronizare-produse {
    display: grid;
    grid-template-columns: 1fr 1fr;
}