/* ----------------------------------------------------------------

	Custom CSS

	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Root/Body Page Overrides
-----------------------------------------------------------------*/
:root {
    --cnvs-themecolor: #1d394a;
    --cnvs-themecolor-rgb: 23, 44, 86;
    /* Font Families */
    --cnvs-body-font: "Poppins", sans-serif;
    --cnvs-primary-font: "Poppins", sans-serif;
    --cnvs-secondary-font: "Poppins", sans-serif;
    --cnvs-primary-menu-submenu-font-size: 1rem;
    --cnvs-primary-menu-submenu-font-weight: 400;
    --bs-light-rgb: 240, 240, 240;
    --bs-tertiary-bg: #ffac5f;
    --bs-tertiary-bg-rgb: 255, 172, 95;
    --principal: #d85632;
    --appraiser: #125D8C;
    --resources: #1d394a;
    --faq: #525456;
    --trainer: #7D1935;
}

body {
    line-height: 1.7rem;
    font-family: var(--cnvs-body-font);
}

h1, .h1, h2, .h2, h3, .h3 {
    font-family: var(--cnvs-secondary-font);
}

ul, ol {
    list-style-position: inside;
    padding-left: 1.25rem; 
}

td {
    text-align: center;
}

input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
    accent-color: var(--appraiser);
}


/*Page Content Links*/

a.transparent{
    color: white;
}

a.content-link {
    color: var(--cnvs-themecolor);
}

a:not(.btn-link):not(.text-decoration-underline):not(.menu-link):not(.button):not(.btn).primary-red,
a:not(.btn-link):not(.text-decoration-underline):not(.menu-link):not(.button):not(.btn).primary-blue,
a:not(.btn-link):not(.text-decoration-underline):not(.menu-link):not(.button):not(.btn).secondary-blue,
a:not(.btn-link):not(.text-decoration-underline):not(.menu-link):not(.button):not(.btn).orange,
a:not(.btn-link):not(.text-decoration-underline):not(.menu-link):not(.button):not(.btn).transparent,
a:not(.btn-link):not(.text-decoration-underline):not(.menu-link):not(.button):not(.btn).content-link
{
    text-decoration: underline 1.2px !important;
    text-underline-offset: 4.5px;
}

/* <a> elements */
.text-decoration-underline {
    text-decoration: underline 1.75px !important;
    text-underline-offset: 4.5px;
}


a:not(.btn-link):not(.text-decoration-underline):not(.menu-link):not(.button):not(.btn):hover {
    text-decoration: underline 1.75px !important;
    text-underline-offset: 4.5px;
}


.container:not(#header-wrap .container) {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.button-green {
    --cnvs-btn-color: #40834e;
}

.button-green:hover {
    background-color: #35663c;
}

.button-yellow {
    --cnvs-btn-color: #ecaf33;
    color: var(--cnvs-btn-color-dark);
}
.button-yellow:hover {
   background-color: #d4992b;
}

.button-red {
    --cnvs-btn-color: #b72418;
}

.button-red:hover {
 background-color: #991d14;
}


.orange {
    color: var(--principal);
}

.button.orange {
    background-color: var(--principal);
    color: white;
}

section.orange, .card-header.orange {
    background: var(--principal);
    color: white;
}

    section.orange :is(h1, h2, h3, h4, h5, h6) {
        color: white;
    }

    /* Override if the heading has an explicit orange class */
    section.orange :is(h1.orange, h2.orange, h3.orange, h4.orange, h5.orange, h6.orange) {
        color: var(--principal);
    }

.primary-blue {
    color: var(--appraiser);
}

.button.primary-blue {
    background-color: var(--appraiser);
    color: white;
}

section.primary-blue, .card-header.primary-blue {
    background: var(--appraiser);
    color: white;
}

    section.primary-blue :is(h1, h2, h3, h4, h5, h6) {
        color: white;
    }

    section.primary-blue :is(h1.primary-blue, h2.primary-blue, h3.primary-blue, h4.primary-blue, h5.primary-blue, h6.primary-blue) {
        color: var(--appraiser);
    }

.secondary-blue {
    color: var(--resources);
}

section.secondary-blue, .card-header.secondary-blue {
    background: var(--resources);
    color: white;
}

.secondary-blue :is(h1, h2, h3, h4, h5, h6) {
    color: white;
}

.primary-red {
    color: var(--trainer);
}

section.primary-red, .card-header.primary-red {
    background: var(--trainer);
    color: white;
}

.primary-red :is(h1, h2, h3, h4, h5, h6) {
    color: white;
}

blockquote {
    font-size: var(--cnvs-font-size-h5);
    border-left: 10px solid #172C56;
}

.form-switch .form-check-input {
    width: 3em;
    height: 2em;
}

.text-primary {
    color: var(--cnvs-themecolor) !important;
}

/* ----------------------------------------------------------------
	DevExpress Overrides
-----------------------------------------------------------------*/

/* dx warning button similar to dx-button-danger, which is a built in to css light file */
.dx-button-warning {
    background-color: var(--dx-color-warning, #f0ad4e); /* Use the warning color variable */
    color: #fff; /* Set text color to white for contrast */
    border-color: var(--dx-color-warning, #f0ad4e); /* Match the border color */
}

    .dx-button-warning:hover {
        background-color: #ec9a3c; /* Slightly darker shade for hover effect */
        border-color: #ec9a3c;
    }

    .dx-button-warning:active {
        background-color: #e58b2c; /* Even darker shade for active state */
        border-color: #e58b2c;
    }

    .dx-button-warning:disabled {
        background-color: #f7d8b4; /* Lightened color for disabled state */
        color: #ccc; /* Muted text color */
        border-color: #f7d8b4;
    }
/* ----------------------------------------------------------------
	Header & Navbar
-----------------------------------------------------------------*/
#header {
    --cnvs-primary-menu-tt: none !important;
    --cnvs-primary-menu-font-size: 0.9 rem;
}

#navbar-tea {
    background-color: #f0f0f0;
    z-index: 15;
}

    #navbar-tea .nav-link {
        color: #3a3632 !important;
        font-size: smaller;
        padding-top: 0;
        padding-bottom: 0;
    }

.is-expanded-menu .sub-menu-container .menu-item > .menu-link {
    text-transform: none !important;
}

.menu-link > * {
    display: flex;
    align-items: center;
}

.is-expanded-menu .menu-container > .menu-item:not(.mega-menu) .sub-menu-container:not([class*=col-]):not([class=col]) {
    width: auto;
}

.sub-menu-container .menu-link > * {
    color: white !important;
}

.menu-item:hover > .menu-link > *,
.menu-item:has(.sub-menu-container:hover) > .menu-link > * {
    color: white !important;
}

#main-principal:hover {
    background-color: var(--principal);
}

#navPrincipal, #navPrincipal .is-expanded-menu .sub-menu-container {
    background-color: var(--principal);
    color: white;
    border-top: var(--principal);
}

#main-principal-appraiser:hover {
    background-color: var(--appraiser);
}

#navAppraiser, #navAppraiser .is-expanded-menu .sub-menu-container {
    background-color: var(--appraiser);
    color: white;
    border-top: var(--appraiser);
}

#main-resources:hover {
    background-color: var(--resources);
}

#navResources, #navResources .is-expanded-menu .sub-menu-container {
    background-color: var(--resources);
    color: white;
    border-top: var(--resources);
}

#main-faq:hover {
    background-color: var(--faq);
}

#main-trainers:hover {
    background-color: var(--trainer);
}

#navTrainer, #navTrainer .is-expanded-menu .sub-menu-container {
    background-color: var(--trainer);
    color: white;
    border-top: var(--trainer);
}

/* ----------------------------------------------------------------
	Footer
-----------------------------------------------------------------*/
/* footer style overrides start*/
#footer .widget-links li {
    margin-bottom: 14px;
    list-style: none !important;
}

#footer .widget-links a {
    background: none !important;
    color: #fff;
}

.copy-right {
    color: #fff;
}
/* footer style overrides end*/

/* ----------------------------------------------------------------
	Go To Top
-----------------------------------------------------------------*/

/* gotoTop style overrides start*/
#gotoTop {
    left: 30px;
    right: auto;
}
/* gotoTop style overrides end*/

/* ----------------------------------------------------------------
	Content Pages
-----------------------------------------------------------------*/

/* Principals Guide */
.eval-step {
    border-bottom: solid 1px #d5d5d5;
    padding: 2em 0;
}

    .eval-step:last-child {
        border-bottom: none;
    }

/* checkboxes */
#checklist {
    border: solid 2px #F55200;
    padding: 32px 128px;
}

    #checklist.blue {
        border: solid 2px var(--appraiser);
    }

.checkbox-custom,
.radio-custom {
    opacity: 0;
    position: absolute;
}

.checkbox-custom,
.checkbox-custom-label,
.radio-custom,
.radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 5px 23px 0px !important;
    cursor: pointer;
}

.checkbox-custom-label,
.radio-custom-label {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before,
.radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #F55200;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    padding: 0px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom + .checkbox-custom-label.blue:before {
    content: '';
    background: #fff;
    border: 2px solid var(--appraiser);
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    padding: 0px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    background: white;
    color: #F55200;
}

.checkbox-custom.blue:checked + .checkbox-custom-label.blue:before {
    color: var(--appraiser);
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #bbb;
}

.checkbox-custom:focus + .checkbox-custom-label,
.radio-custom:focus + .radio-custom-label {
    outline: 1px solid #F55200;
    /* focus style */
}

    .checkbox-custom:focus + .checkbox-custom-label.blue,
    .radio-custom:focus + .radio-custom-label.blue {
        outline: 0px solid var(--appraiser);
    }

.placeholder {
    width: 100%;
    height: 200px;
    background: var(--principal);
    margin: 1em 0;
}

/*Other CSS From Old Template*/
.orange-border {
    border: solid 2px var(--principal);
    padding-right: 5rem !important;
    padding-left: 5rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/*Other CSS From Old Template*/
.primary-blue-border {
    border: solid 2px var(--appraiser);
    padding-right: 5rem !important;
    padding-left: 5rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}