/* CSS styles for the top bar */
.top-bar {
    text-align: center;
    padding: 10px;
    font-weight: bold;
}

/* Define colors for each environment */
.development-bar {
    background-color: #3498db; /* Blue for Development */
    color: white;
}

.qa-bar {
    background-color: #27ae60; /* Green for QA */
    color: white;
}

.preproduction-bar {
    background-color: #e74c3c; /* Red for Pre Production */
    color: white;
}

.local-bar {
    background-color: #808080; /* Gray for Local */
    color: white;
}

.demo-bar {
    background-color: #FFC200; /* Gold for Demo */
    color: black;
}

.create-order-component {
    display: flex;
    height: 20.875rem;
    padding: 1rem 1.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
    border-radius: var(--Small, 0.25rem);
    border: 1px solid var(--light-grey, #ECECEC);
    background: var(--pure-white, #FFF);
    /* Shadow/Medium */
    box-shadow: 0px 15px 30px 0px rgba(62, 19, 77, 0.09);
    max-width: 50rem;
}

.apostille-order-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 24px 24px 0;
    gap: 1.5rem;
    flex: 1 0 0;
}


.apostille-order-content {
    width: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.apostille-order-text {
    display: flex;
    flex-direction: column;
    color: var(--Greys-grayish-black, #444);
    text-align: center;
}

.apostille-order-title {
    color: var(--Greys-grayish-black, #444);
    text-align: center;
}

.apostille-order-description {
    margin-top: 16px;
}

.apostille-order-actions {
    display: flex;
    align-self: center;
    justify-content: space-between;
    width: 425px;
    max-width: 100%;
    margin-top: 24px;
    gap: 20px;
    font-size: 16px;
    font-weight: 600;
}

.apostille-order-cancel-btn {
    display: flex;
    width: 196px;
    height: 46px;
    justify-content: center;
    align-items: center;
    padding: 8px 18px;
    color: var(--midnight-blue, #09101d);
    background-color: var(--Background-pale-greyish-blue, #f4f6f9);
    border: 1px solid rgba(218, 20, 20, 1);
    border-radius: var(--corner-radius-medium, 8px);
    box-shadow: 0px 8px 16px 0px rgba(62, 19, 77, 0.07);
    white-space: nowrap;
}

.apostille-order-create-btn {
    display: flex;
    width: 196px;
    height: 46px;
    justify-content: center;
    align-items: center;
    padding: 8px 18px;
    gap: 8px;
    color: var(--Base-pure-white, #fff);
    background: linear-gradient(180deg, #0074c2 0%, #0086c4 21%, #0074c2 100%);
    border-radius: var(--corner-radius-medium, 8px);
    box-shadow: 0px 8px 16px 0px rgba(62, 19, 77, 0.07);
}

.apostille-order-create-icon {
    width: 20px;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
}

order-form-control-container {
    margin-top: 1.5rem;
}

.order-form-control-prev-btn {
    width: 276px;
    height: 46px;
    padding: 8px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--corner-radius-medium, 8px);
    border: 1px solid var(--Primary-intergrity-blue, #0086C4);
    background: var(--light-greyish-blue, #EBEEF2);
    /* Shadow/Small */
    box-shadow: 0px 8px 16px 0px rgba(62, 19, 77, 0.07);
    margin-right: 40px;
    color: var(--midnight-blue, #09101D);
}

.order-form-control-continue-btn {
    width: 276px;
    height: 46px;
    padding: 8px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--corner-radius-medium, 8px);
    background: linear-gradient(180deg, #0074C2 0%, #0086C4 21%, #0074C2 100%);
    /* shadow-small */
    box-shadow: 0px 8px 16px 0px rgba(62, 19, 77, 0.07);
    color: var(--Base-pure-white, #FFF);
}

.order-details-title {
    color: var(--Greys-grayish-black, #444);
    /* Open Sans Family - Headers/Large H3 */
    font-family: "Open Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.order-details-stepper {
    width: 100%;
    height: 5.1875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.625rem 0rem;
    gap: var(--Main-System-0.5rem, 0.5rem);
    align-self: stretch;
}

.apotille-header-contents {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.apostille-form-contents {
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    gap: 1.5rem;
    align-self: stretch;
    border-radius: var(--Small, 0.25rem);
    border: 1px solid #ECECEC;
    /* Shadow/Medium */
    box-shadow: 0px 15px 30px 0px rgba(62, 19, 77, 0.09);
}

button:disabled {
    border: 1px solid #aaa;
    cursor: not-allowed;
    opacity: 0.5;
}

.file-drop-zone {
    display: flex;
    width: 100%;
    border: 3px dotted #fb275d;
    align-items: center;
    margin-bottom: 2px;
}

.input-text {
    border-radius: 0.5rem !important;
    border: 1px solid var(--Stroke-light-grey, #DADADA) !important;
    background: var(--Base-pure-white, #FFF) !important;
    /* Shadow/XSM */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04) !important;
}

.input-text-label {
    color: var(--Greys-jet-black, #333);
    /* Open Sans Family - Headers/Small H3 */
    font-family: "Open Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.order-details-content {
    color: var(--Greys-dark-grey, #555);
    /* Open Sans family/H6 */
    font-family: "Roboto";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#Add-Additional-Recipient-Button {
    text-decoration: underline;
    border: none;
}

#Cancel-Add-Addl-Delete-Recipient-Button, #Cancel-Add-Addl-Recipient-Button {
    text-decoration: underline;
    border: none;
}

#Save-Add-Addl-Recipient-Button {
    text-decoration: underline;
    border: none;
}

#Cancel-Recipient-Edit-Button {
    text-decoration: underline;
    border: none;
}

#Save-Recipient-Edit-Button {
    text-decoration: underline;
    border: none;
}

#Create-Order-Cancel-Button {
    width: 13.1875rem;
    height: 2.875rem;
}

#Create-Order-New-Button {
    width: 13.1875rem;
    height: 2.875rem;
    margin-top: -2rem ;
}

@media only screen and (max-width: 575.98px) {
    #Create-Order-New-Button {
        width: 100%;
    }
}

#upload-title {
    color: var(--Greys-jet-black, #333);
    /* Roboto Font Family/Body P2 Medium */
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#upload-icon {
    width: 1rem;
    height: 1rem;
    color: var(--Base-midnight-blue, #09101D);
}

#file-upload-description {
    color: var(--Greys-dark-grey, #555);
    /* Open Sans family/H6 */
    font-family: "Roboto";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#Cancel-Recipient-Edit-Button {
    text-decoration: underline;
    border: none;
}

#Save-Recipient-Edit-Button {
    text-decoration: underline;
    border: none;
}

#terms-text {
    color: var(--Greys-dark-grey, #555);
    text-align: center;
}

#Delete-Order-Ap-Button, #Edit-Order-Ap-Button {
    height: 20px;
    width: 20px;
    border: none;
}

#Show-Order-Terms-Button {
    border: none;
}

#Create-Order-Prev-Button {
    width: 17.25rem;
    height: 2.875rem;
    color: var(--Base-midnight-blue, #09101D);
}

#Create-Order-Continue-Button {
    width: 17.25rem;
    height: 2.875rem;
}

#Get-Started-Button {
    width: 17.25rem;
    height: 2.875rem;
}

#Confirm-State-Button {
    width: 17.25rem;
    height: 2.875rem;
}

#Header-Create-Order-Cancel-Button {
    width: 6.875rem;
    height: 2.875rem;
}

#Header-Create-Order-Save-Button {
    width: 6.875rem;
    height: 2.875rem;
}

#delete-modal-header {
    color: var(--Greys-grayish-black, #444);
}

#delete-modal-body {
    color: var(--Greys-dark-grey, #555);
}

#delete-modal-footer {
    align-items: flex-start;
    gap: 5rem;
}

#delete-modal-cancel-button {
    width: 15.8125rem;
    color: var(--Base/midnight-blue, #09101D);
    height: 2.875rem;
    padding: var(--Main-System-0.75rem, 0.75rem) var(--Main-System-1.25rem, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--corner-radius-medium, 0.5rem);
    border: 1px solid var(--Stroke-light-grey, #DADADA);
    background: var(--Base-pure-white, #FFF);
    box-shadow: 0px 8px 16px 0px rgba(62, 19, 77, 0.07);
}

#delete-modal-delete-button {
    width: 15.8125rem;
    color: var(--Base-pure-white, #FFFFFF);
    height: 2.875rem;
    padding: var(--Main-System-0.75rem, 0.75rem) var(--Main-System-1.25rem, 1.25rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--corner-radius-medium, 0.5rem);
    border: 1px solid var(--Stroke-light-grey, #DADADA);
    background: #DA1414;
    box-shadow: 0px 8px 16px 0px rgba(62, 19, 77, 0.07);
}

#checkout-modal-info-header {
    color: var(--dark-grey, #555);
}

#checkout-modal-info-body {
    color: var(--Greys-dark-grey, #555);
}

.custom-modal-width {
    padding: 2.25rem 2.5rem !important;
    align-items: center !important;
    gap: 2.25rem !important;
    width: 50% !important;
    max-width: 48rem !important;
    padding: 2.25rem 2.5rem !important;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#modal-info-close-button {
    width: 21.5625rem !important;
    color: var(--Base-pure-white, #FFF);
    height: 3.375rem !important;
    padding: var(--Main-System-1rem, 1rem) var(--Main-System-1.5rem, 1.5rem) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border-radius: var(--corner-radius-medium, 0.5rem) !important;
    background: var(--Buttons-primary, linear-gradient(180deg, #0D4B57 0%, #136065 45.87%, #0D5257 97%)) !important;
    box-shadow: 0px 15px 30px 0px rgba(62, 19, 77, 0.09) !important;
}

#Duplicate-Prev-Cust-Label {
    color: var(--Greys-slate-grey, #737373);
}

#Add-Additional-Apostille-Button {
    width: 100%;
    text-decoration: underline;
}

.ap-label {
    background: var(--Background-off-white, #FAFBFC) !important;
    color: var(--Greys-jet-black, #333);
    /* Roboto Font Family/Body P2 Medium */
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#ReceiptTable {
    border-radius: var(--Small, 0.25rem);
    border: 1px solid var(--light-grey, #ECECEC);
    background: var(--Base-pure-white, #FFF);
    /* shadow-small */
    box-shadow: 0px 8px 16px 0px rgba(62, 19, 77, 0.07);
}

.signature-log-header {
    border-radius: 4px 4px 0 0;
    background-color: #fff;
    border-bottom: 1px solid #dadada;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px;
}

.button-no-border {
    border: none;
    background: var(--Base-pure-white, #FFF);
}

.button-group-med-border {
    border-radius: var(--corner-radius-medium, 8px);
    border: 1px solid var(--Stroke-light-grey, #DADADA);
    background: var(--Base-pure-white, #FFF);
}

.viewDocumentGroup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.signature-log-title {
    color: var(--Greys-jet-black, #333);
    /* Roboto Font Family/Body P2 Medium */
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.filter-group {
    background-color: #fff;
    border-bottom: 1px solid #dadada;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 12px;
    gap: 40px 100px;
}

.filter-content {
    align-self: stretch;
    display: flex;
    min-width: 240px;
    align-items: flex-start;
    gap: 24px;
    width: 480px;
    margin: auto 0;
    font: 14px Roboto, sans-serif;
}

.button-group {
    display: flex;
    align-items: flex-start;
    gap: 0;
    color: var(--Greys-grayish-black, #444);
    border-radius: var(--Main-System-0.25rem, 0.25rem);
    /* Shadow/Small */
    box-shadow: 0px 8px 16px 0px rgba(62, 19, 77, 0.07);
}



.button-group-item {
    /*  border-radius: 0 8px 8px 0;*/
    background-color: #fff;
    color: #444;
    border-right: none;
    border-radius: var(--Main-System-8px, 8px);
    border: 1px solid var(--Stroke-light-grey, #DADADA);
    padding: 10px 12px;
    align-self: stretch;
}

    .button-group-item.active {
        color: #0d5257;
        background: var(--Background-pale-greyish-blue, #F4F6F9);
        border: 1px solid var(--Stroke-light-grey, #DADADA);
    }

.search-container {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    color: #909090;
    font-weight: 400;
    justify-content: flex-end;
    flex: 1;
    flex-basis: 0%;
}

.search-bar {
    border-radius: var(--corner-radius-medium, 8px);
    border: 1px solid var(--Stroke-light-grey, #DADADA);
    background: var(--Base-pure-white, #FFF);
    /* Shadow/XSM */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
}

.search-icon {
    width: 16px;
    aspect-ratio: 1;
    object-position: center;
}

.search-text {
    flex: 1;
    font-family: roboto-p1-regular;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.icon-group {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin: auto 0;
    border-radius: var(--corner-radius-medium, 8px);
    background: var(--Base-pure-white, #FFF);
}


.atGovLink {
    color: var(--Primary-sea-depths, #0D5257);
    /* Link Buttons/Link Large */
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: underline;
    cursor: pointer;
}

/* enable absolute position for the icon */
.tb-icon-container {
    position: relative;
}

    /* position icon over textbox */
    .tb-icon-container .k-icon {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0.5em;
    }

    /* add space to textbox without floating label */
    .tb-icon-container .k-textbox input,
    /* add space to floating label over the textbox */
    .k-floating-label-container.k-empty:not(.k-focus) .k-label {
        padding-left: 2em;
    }

    /* icon with floating label */
    .tb-icon-container.with-label .k-icon {
        top: 0.125em;
    }

.file-upload-box {
    background-color: #fafbfc;
    border: 1px solid #dadada;
}

.file-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.status-container {
    align-self: center;
    align-items: center;
}




@media (max-width: 991px) {
    .filter-group,
    .filter-content {
        max-width: 100%;
    }

    .button-group-item {
        white-space: normal;
    }

    .search-container,
    .search-input {
        white-space: normal;
    }
}

/* Reset Password Global CSS*/
.reset-password-form {
    display: flex;
    flex-direction: column;
    gap: var(--m-3, 16px);
    align-self: stretch;
}

    .reset-password-form .form-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        align-self: stretch;
    }


.valid-icon {
    color: #287D3C; /* green */
}

.invalid-icon {
    color: #909090; /* gray */
}

.icon-title-wrapper-success svg,
.icon-title-wrapper-failed svg {
    flex: none;
}

.forgot-password-layout main p.error-text {
    color: #DC3545;
}

.forgot-password-layout main input.invalid {
    border-radius: var(--radius-2, 4px);
    border: 1px solid var(--Theme-Colors-Base-Colors-danger, #DC3545);
    background: #FFF;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.20);
}

.forgot-password-layout input.valid.modified:not([type=checkbox]) {
    outline: none;
}

#Send-Verification-Code-Button, 
#Verify-Code-Button,
#Continue-Button {
    display: flex;
    height: 44px;
    padding: 10px var(--spacing-xl, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm, 6px);
    flex: 1 0 0;
    border-radius: var(--radius-4, 6px);
    border: 1px solid var(--Colors-Border-border-disabled_subtle, #E9EAEB);
    box-shadow: 0 15px 10px 0 rgba(211, 192, 214, 0.07);
    font-family: var(--Font-Family-font-base, Roboto);
    font-size: var(--paragraphs-body-p, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}