/*Current Brand Colors: 
   -------------
    - Arcadia: #3A74BA (blue), #2FB24C (green), #2FB24C (orange), #682d63 (purple)
    - EPD4K: #3A74BA (blue), #EE312F (orange-red), #2FB24C (green), #E90E8C (pink), #F2E406 (yellow)
    - Kansas: #3D75B9 (blue), #30B14C (green), #E88047 (orange), #682d63 (purple)
    - Mississippi: #041793 (dark blue), #17A9FA (medium blue), #BFE1FF (light blue), #FED513 (yellow)
    - Springield: #36BDB3 (message green), #D9EFEC (blue green rules), #FDBF68 (california peach), #7cc244 (radiant yellow) 
*/

/***************************** STYLE VARIABLES *****************************/
:root {
    /* Page Element Styles*/
    --portal-button-color: #7cc244;
    --insurance-info-received-text-color: #7cc244;
    --secondary-button-color: #6c757d;
    --section-header-background-color: #3d3088;
    --section-header-font-color: #ffffff;
    /* Icon Styles */
    --additional-consent-icon-color: #fe5000;
    --cancel-icon-color: #EE312F;
    --cs-appointment-icon-color: #673ab7;
    --edit-icon-color: #2FB24C;
    --emergency-appointment-icon-color: #dba500;
    --ga-appointment-icon-color: #3A74BA;
    --head-of-household-icon-color: #094074;
    --insurance-info-received-icon-color: #dba500;
    --loading-indicator-icon-color: #7cc244;
    --message-center-appointment-icon-color: #094074;
    --message-center-cob-icon-color: #fe5000;
    --message-center-confirm-icon-color: #7cc244;
    --message-center-document-icon-color: #dba500;
    --message-center-insurance-icon-color: #682d63;
    --message-center-warning-icon-color: #fe5000;
    --message-center-success-icon-color: #7cc244;
    --mobile-appointment-icon-color: #9dd227;
    --new-patient-icon-color: #dba500;
    --ops-appointment-icon-color: #fe5000;
    --other-appointment-icon-color: #E90E8C;
    --patient-account-icon-color: #682d63;
    --photo-release-icon-color: #8d8a6c;
    --reschedule-icon-color: #7A9A01;
    --routine-appointment-icon-color: #682d63;
}

/* Page Element Styles */
.active-schedule-button {
    background-color: #dbdcdc !important;
    font-weight: bold !important;
}

    .active-schedule-button:hover {
        background-color: #e4e4e4 !important;
    }

.active-schedule-button-oralsurgery {
    background-color: #dbdcdc !important;
    font-weight: bold !important;
    color: red !important;
}

    .active-schedule-button-oralsurgery:hover {
        background-color: #e4e4e4 !important;
    }

.active-schedule-button-preventive {
    background-color: #dbdcdc !important;
    font-weight: bold !important;
    color: green !important;
}

    .active-schedule-button-preventive:hover {
        background-color: #e4e4e4 !important;
    }

.active-schedule-button-restoration {
    background-color: #dbdcdc !important;
    font-weight: bold !important;
    color: purple !important;
}

    .active-schedule-button-restoration:hover {
        background-color: #e4e4e4 !important;
    }

.additional-consent-text {
    color: #2FB24C;
}

    .additional-consent-text a {
        color: #2FB24C;
        text-decoration-color: #2FB24C !important;
    }

.bg-referred-out {
    background-color: rgba(0,0,0,.1) !important;
}

    .bg-referred-out li {
        background-color: rgba(0,0,0,.0) !important;
    }

.cavity-free-badge {
    font-size: 0.6em !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.grouping-border {
    border-left: 1px solid #939799;
    border-bottom-left-radius: 25px;
}

.inactive-schedule-button:hover {
    background-color: #e4e4e4 !important;
}

.insurance-info-received-text {
    color: var(--insurance-info-received-text-color) !important;
    font-style: italic;
    font-weight: bold;
}

.medium-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #fff;
    margin: 1.75rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    box-shadow: 0 2px 2px rgba(0,0,0,.25);
    width: 65%;
    height: 65%;
}

.portal-info-text {
    color: #41424C;
    font-size: .8rem;
    font-style: italic;
}

    .portal-info-text .btn {
        font-size: .8rem !important;
    }

.no-padding {
    padding: 0px !important;
}

.portal-btn-fixed-width {
    width: 175px !important;
}

.portal-btn-fixed-width-wider {
    width: 215px !important;
}

.portal-btn-primary {
    background-color: var(--portal-button-color) !important;
    border-color: var(--portal-button-color) !important;
    border-radius: 1rem !important;
    color: #ffffff !important;
}

.portal-btn-secondary {
    background-color: var(--secondary-button-color) !important;
    border-color: var(--secondary-button-color) !important;
    border-radius: 1rem !important;
    color: #ffffff !important;
}

/*.portal-card {
    border-radius: .375rem !important;
}*/

.portal-card {
    border-radius: 1.5rem !important;
}

    .portal-card .card-header:first-child {
        border-radius: 1.5rem 1.5rem 0 0 !important;
    }

.portal-contact-info-name {
    font-size: 1.2rem !important;
    text-transform: uppercase;
}

.portal-contact-info-birthdate {
    font-size: 1.1rem !important;
}

.portal-section-header {
    background-color: var(--section-header-background-color) !important;
    color: var(--section-header-font-color) !important;
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem !important;
}

.initials {
    font-family: 'Licorice', cursive;
    font-size: 1.2rem;
}

.signature {
    font-family: 'Licorice', cursive;
    font-size: 2rem;
}

.small-italic {
    font-size: .8rem;
    font-style: italic;
}

.small-muted {
    color: #6c757d;
    font-size: .8rem;
}

.small-muted-italic {
    color: #6c757d;
    font-size: .8rem;
    font-style: italic;
}

.smaller-font {
    font-size: .85rem !important;
}

.top-25 {
    top: 25% !important;
}

.validation-message {
    color: red;
}



/* Icon Styles */
.portal-additional-consent-icon {
    color: var(--additional-consent-icon-color) !important;
    font-size: 1.2rem !important;
    padding-left: .25rem !important;
}

.portal-cancel-icon {
    color: var(--cancel-icon-color) !important;
    font-size: 1.3rem !important;
}

.portal-cs-appointment-icon {
    color: var(--cs-appointment-icon-color) !important;
    font-size: 1.2rem !important;
    width: 25px !important;
}

.portal-edit-icon {
    color: var(--edit-icon-color) !important;
    /*font-size: 1.2rem !important;*/
    line-height: 1 !important;
    padding: .25rem !important;
}

.portal-emergency-appointment-icon {
    color: var(--emergency-appointment-icon-color) !important;
    font-size: 1.2rem !important;
    width: 25px !important;
}

.portal-ga-appointment-icon {
    color: var(--ga-appointment-icon-color) !important;
    font-size: 1.2rem !important;
    width: 25px !important;
}

.portal-head-of-household-icon {
    color: var(--head-of-household-icon-color) !important;
    font-size: 1.2rem !important;
    padding-left: .25rem !important;
}

.portal-insurance-info-received-icon {
    color: var(--insurance-info-received-icon-color) !important;
    font-size: 1.2rem !important;
    padding-right: .25rem !important;
}

.portal-loading-indicator-icon {
    color: var(--loading-indicator-icon-color) !important;
}

.portal-message-center-appointment-icon {
    color: var(--message-center-appointment-icon-color) !important;
    font-size: 1.3rem;
    padding-right: 1rem;
}

.portal-message-center-cob-icon {
    color: var(--message-center-cob-icon-color) !important;
    font-size: 1.3rem;
    padding-right: 1rem;
}

.portal-message-center-confirm-icon {
    color: var(--message-center-confirm-icon-color) !important;
    font-size: 1.3rem;
    padding-right: 1rem;
}

.portal-message-center-document-icon {
    color: var(--message-center-document-icon-color) !important;
    font-size: 1.3rem;
    padding-right: 1rem;
}

.portal-message-center-insurance-icon {
    color: var(--message-center-insurance-icon-color) !important;
    font-size: 1.3rem;
    padding-right: 1rem;
}

.portal-message-center-warning-icon {
    color: var(--message-center-warning-icon-color) !important;
    font-size: 1.3rem;
    padding-right: 1rem;
}

.portal-message-center-success-icon {
    color: var(--message-center-success-icon-color) !important;
    font-size: 1.3rem;
    padding-right: 1rem;
}

.portal-mobile-appointment-icon {
    color: var(--mobile-appointment-icon-color) !important;
    font-size: 1.3rem !important;
}

.portal-new-patient-icon {
    color: var(--new-patient-icon-color) !important;
    font-size: 1.2rem !important;
    padding-left: .25rem !important;
}

.portal-ops-appointment-icon {
    color: var(--ops-appointment-icon-color) !important;
    font-size: 1.2rem !important;
    width: 25px !important;
}

.portal-other-appointment-icon {
    color: var(--other-appointment-icon-color) !important;
    font-size: 1.2rem !important;
}

.portal-patient-account-icon {
    color: var(--patient-account-icon-color) !important;
    font-size: 1.2rem !important;
    padding-left: .25rem !important;
}

.portal-photo-release-icon {
    color: var(--photo-release-icon-color) !important;
    font-size: 1.2rem !important;
    padding-left: .25rem !important;
}

.portal-reschedule-icon {
    color: var(--reschedule-icon-color) !important;
    font-size: 1.3rem !important;
}

.portal-routine-appointment-icon {
    color: var(--routine-appointment-icon-color) !important;
    font-size: 1.2rem !important;
    width: 25px !important;
}

.portal-signature {
    font-family: 'Licorice', cursive;
    font-size: 2rem !important;
}





/* Blazored Toast Overrides */
.blazored-toast-container {
    z-index: 1025 !important;
}


/* Radzen Overrides */
.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    background-color: white;
}

.rz-tabview-top > .rz-tabview-nav li {
    background-color: #dbdcdc;
    color: #5F5E60;
}



/* Bootstrap Overrides */
.list-group:last-child {
    padding-bottom: 18px !important;
}



/* Reward Ribbon Styles */
.award-ribbon {
    --f: 10px; /* control the folded part*/
    --r: 15px; /* control the ribbon shape */
    --t: 45px; /* the top offset */

    position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path: polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%, calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)), var(--r) calc(50% - var(--f)/2));
    background: #40B580;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

.icon-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
}

.icon-button-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: red;
    color: white;
}