/*NOTE: This contains some specific Huro awareness but have to draw some lines when creating entirely new constructs that are based on Huro but do not belong in their sources*/

/*TODO: But do need to relocate anything that is branding color palette-aware*/


/********************* Misc Huro Overrides that dont want to eliminate/override in source (at this time as we may bring back)  *********************/
.webapp-navbar .centered-link.centered-link-search {
    display: none;
}

/*This needs to be adjusted according to logo width (protects logo from being squished when viewport width begins to infringe by center menu links*/
.webapp-navbar .webapp-navbar-inner .left {
    width: 378px;
    min-width: 378px;
}

.webapp-navbar .webapp-navbar-inner .left .separator {
     border-right: none; 
}


/********************* MenuBuilder  *********************/
#MenuBuilder .menu-builder-lines {
    display: inline;
    font-weight: bold;
    white-space: nowrap;
}

    #MenuBuilder .menu-builder-lines > i {
        float: left;
        font-size: 14px;
        padding-right: 5px;
        padding-top: 1px;
        font-weight: 700;
    }

    #MenuBuilder .menu-builder-lines .menu-builder-title {
        width: 400px;
        float: left;
    }

    #MenuBuilder .menu-builder-lines .menu-builder-actions {
        width: 80px;
        float: right;
        white-space: nowrap;
    }

        #MenuBuilder .menu-builder-lines .menu-builder-actions > ul > li {
            float: left;
            padding: 0 5px;
            background: transparent;
        }



/*Line Icon Overrides (esp for light) to Match FA*/
i.lnil {
    font-weight: 800;
}


/********************* Form & Fieldset Additions  *********************/
.form-infos > i,
.form-infos > svg {
    width: 2.5em;
    height: 2.5em;
    float: left;
    margin-right: 12px;
}

.fieldset div.fieldset-heading {
    padding-bottom: 0.7em;
    font-size: 1.1em;
}

body:not(.is-dark) .fieldset div.fieldset-heading {
    font-weight: 600;
}

.fieldset > div,
.fieldset .tab-content > div {
    padding-bottom: 1em;
}

.fieldset {
    padding: 0 1em 1.5em 1em;
}

.h-modal .modal-content .modal-card .modal-card-head h3 {
    font-size: 1.25em;
}

.input-align-center input,
.input-align-center h3,
.input-align-center h4 {
    text-align: center;
}

/********************* Field Labels  *********************/
.detail-form .fieldset div > h4,
.detail-form .fieldset div > h3 {
    font-size: 0.85em;
    font-weight: 600;
}

/*TODO: For these label-inline classes below, assume for now, just read-only calc fields so try to minimize view for better math readout; but this is comprised of serious lazy hacks*/
.detail-form div.label-inline-wrapper {
    display: flex;
    padding-bottom: 0.4em;
}
.detail-form div.label-inline-wrapper > h4.label-inline,
.detail-form div.label-inline-wrapper > h3.label-inline {
    float: left;
    display: inline-block;
    width: 70%;
    font-size: 1.1em;
}
.detail-form div.label-inline-wrapper > div.label-inline {
    float: right;
    display: inline-block;
    width: 30%;
    line-height: 23px;
    height: 23px;
    font-size: 1.1em;
}
/*TODO: This may not match enough but start here, getting text and numeric fields*/
.detail-form div.label-inline-wrapper > div.label-inline input {
    text-align: right;
    padding: 0;
    margin: 0;
    vertical-align: top;
    line-height: 23px;
    height: 23px;
}
.detail-form div.label-inline-wrapper > div > span {
    font-size: 1.1em !important;
}


/********************* Misc Form Related  *********************/

form div > .info-bubble,
.detail-form div > .info-bubble {
    cursor: pointer;
    float: right;
    margin-top: -26px;
}

.info-bubble > svg {
    height: 20px;
    width: 20px;
}

form .process-button,
.detail-form .process-button {
    height: 62.5px;
}

form .process-button > span,
.detail-form .process-button > span {
    padding-left: 15px;
    font-size: 1.2em;
    font-weight: bold;
}

.section-content > .save-and-continue svg {
    height: 20px;
    width: 20px;
}

.save-and-continue:hover {
    opacity: 0.7;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/********************* Notifications (Modals, Alerts & Toasts - many are plugins so cannot mod sources)  *********************/
/*NOTE: Some of this is custom Huro that don't want to keep adding to the overrides of the Huro sources - but relocate this out of the Kendo heading/folders*/
.notyf__toast {
    border-radius: 1em;
}

.notyf__toast--error.notyf__toast,
.notyf__toast--warning.notyf__toast {
    max-width: 600px;
}

.notyf__message .message-field-name {
    padding-right: 1em;
}

/*.notyf__toast--error .notyf__ripple,
.notyf__toast--warning .notyf__ripple {
    width: 700px;
    height: 700px;
}*/

/*TODO: Find where these settings are being set on the element directly; cannot find it anywhere - until then..*/
.ajs-dialog {
    /*height: 250px !important;*/
   /* min-height: 275px !important;*/
    width: unset !important;
    max-width: 600px !important;
}

.ajs-dialog .ajs-header {
    font-size: 1.2em;
}

.alertify.ajs-maximized .ajs-body .ajs-content, 
.alertify.ajs-resizable .ajs-body .ajs-content {
    right: 0; /*MOD: from 24px, but looks weird when have scrollbar*/
}


/*TODO: Move this also to Huro? So unclear if this is so specific to our use or really, this shouldnt need to be overridden in the first place (nested tabs but not same count - 2 vs 3
    Already overrode most could on the elements themselves, but this one is dynamic, set as move naver over selected tab, using CSS
    Should probably locate those here since no way around needing CSS override after all
*/
.right-panel-wrapper .right-panel .tabs-wrapper.is-triple-slider .tabs-wrapper.is-slider .tabs li:nth-child(2).is-active ~ .tab-naver,
.right-panel-wrapper .right-panel .tabs-wrapper.is-triple-slider .tabs-wrapper-alt.is-slider .tabs li:nth-child(2).is-active ~ .tab-naver {
    margin-left: 50% !important;
}


/********************* Misc  *********************/

.detail-form img.user-avatar-prefs {
    height: 64px;
    width: 64px;
    object-fit: fill;
}

.is-rotate:hover {
    animation: rotating 1s linear infinite;
}

/*Stop Chrome's annoying color/bg changes when autofill that looks hideous with Material controls (shocking, Material is Google's UI design*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    /*-webkit-text-fill-color: inherit;*/
}

/*This is being overridden*/
.is-weight-600 h4.label-inline,
.is-weight-600 h4.label-inline > a {
    font-weight: 600;
}
/*Disabled and gray so make more bold*/
.is-weight-600 div.label-inline,
.is-weight-600 div.label-inline > a {
    font-weight: 600;
}


/********************* Right-Side Layout  *********************/

.is-element-group {
    text-align: center;
    width: 100%;
}

.right-side-layout .top-logo {
    position: relative;
    left: 0;
    right: 0;
    margin: 60px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.right-side-layout .is-form,
.right-side-layout .form {
    position: relative;
    max-width: 450px;
    margin: 0 auto;
}
.right-side-layout .tabs-wrapper.is-slider .tabs {
    max-width: 450px;
}

/*.right-side-layout .left-background-container {
    height: calc(100vh);
}*/

.right-side-layout .left-background,
.right-side-layout .left-background-fluid {
    height: calc(100vh);
    object-fit: cover;
    width: calc(100vw);
    max-width: 100%;
}

.right-side-layout .left-background-header,
.right-side-layout .left-background-header-mobile {
    text-align: center;
    width: 100%;
    font-family: "Titillium Web";
}
.right-side-layout .left-background-header {
    position: absolute;
    top: 15vh;
}
.right-side-layout .left-background-header-mobile {
    position: relative;
}

.right-side-layout .left-background-header.has-content-in-image {
    top: 5vh;
}
.right-side-layout .left-background-header.dark-bg > div {
    color: #FFF;
}

.right-side-layout .left-background-header-main {
    font-size: 3.5em;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.right-side-layout .left-background-header-sub {
    font-size: 1.5em;
    font-weight: 400;
    padding-top: 0;
}


.right-side-layout .is-content-column-container {
    height: calc(100vh);
    overflow-y: auto;
    overflow-x: hidden;
}

.right-side-layout .top-logo img {
    max-width: 250px;
}

.app-wrapper .right-side-layout .dark-mode {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
    transform: scale(0.6) rotate( 0deg ); /*Not sure why we need this compared to main layout but much larger on this layout so scale it down*/
}

.right-side-layout .column.is-content-column .inner-content {
    padding: 0 30px;
}

.right-side-layout .is-form .button-wrap .button:first-child:hover,
.right-side-layout .form .button-wrap .button:first-child:hover {
    opacity: 0.7; /*Keep consistent with other hover behaviors*/
}

.button.h-button.is-primary.is-raised:hover {
    opacity: 0.7; /*Keep consistent with other hover behaviors*/
}
/*Why Huro is so inconsistent in their own application, i dont know - copied from general definition of these buttons*/
.right-side-layout .is-form .button-wrap .button:nth-child(2),
.right-side-layout .form .button-wrap .button:nth-child(2) {
    color: #ffffff;
}

body.is-dark .right-side-layout .is-form .button-wrap .button:nth-child(2),
body.is-dark .right-side-layout .form .button-wrap .button:nth-child(2) {
    border-color: #ED1C24; /*Move to Huro sources or use generic color classes based on variables*/
}

body.is-dark input,
body.is-dark .input {
    color: #ffffff; /*Move to Huro sources or use generic color classes based on variables*/
}

.right-side-layout .is-form .form-text p,
.right-side-layout .form .form-text p {
    color: #283252; /*Move to Huro sources or use generic color classes based on variables*/
}

body.is-dark .right-side-layout .is-form .form-text p,
body.is-dark .right-side-layout .form .form-text p {
    color: #a2a5b9; /*Move to Huro sources or use generic color classes based on variables*/
}

.input:hover, .textarea:hover,
.select select:hover,
.is-hovered.input,
.is-hovered.textarea,
.select select.is-hovered {
    border-color: #f69296; /*Move to Huro sources or use generic color classes based on variables*/
}

.right-side-layout .is-form .control:hover,
.right-side-layout .is-form .control:hover .auth-icon i,
.right-side-layout .form .control:hover,
.right-side-layout .form .control:hover .auth-icon i {
    color: #f69296 !important;
    border-color: #f69296 !important; /*Move to Huro sources or use generic color classes based on variables*/
}

body.is-dark .right-side-layout:not(.form) {
    background: #232326;
}

/*Optionally like to make a little bigger since smaller fieldsets and larger CTA for landing pages*/
.right-side-layout .k-widget:not(.k-maskedtextbox) {
    font-size: 19px;
}
.right-side-layout .k-maskedtextbox .k-textbox {
    font-size: 19px;
}
.right-side-layout div.fieldset-heading {
    font-size: 1.7em;
    font-weight: 700;
}

/*This is because the font has increased and for these widgets, the height is fixed/forced so they match the other controls natural height*/
.right-side-layout .k-widget.k-dropdown,
.right-side-layout .k-widget.k-combobox,
.right-side-layout .k-widget.k-datepicker,
.right-side-layout .k-widget.k-timepicker,
.right-side-layout .k-widget.k-switch {
    height: 39.38px;
}

.right-side-layout .card.h-card .card-content {
    font-size: 1.2em;
}
.right-side-layout .media-flex-center .flex-meta span:first-child,
.right-side-layout .media-flex-center .flex-meta > a:first-child {
    font-size: 1.2em;
}
.right-side-layout .card.h-card.is-alt-color {
    background-color: #2C3539;
    border-color: #2C3539;
}
.right-side-layout .card.h-card.is-alt-color p,
.right-side-layout .card.h-card.is-alt-color div,
.right-side-layout .card.h-card.is-alt-color .action-link,
.right-side-layout .card.h-card.is-alt-color .action-link:hover,
.right-side-layout .is-alt-color .media-flex-center .flex-meta span:first-child,
.right-side-layout .is-alt-color .media-flex-center .flex-meta a:first-child,
.right-side-layout .is-alt-color .media-flex .flex-meta span:first-child,
.right-side-layout .is-alt-color .media-flex .flex-meta a:first-child {
    color: #fcfcfc !important; /*TODO: Source this from Huro palette*/
}
.right-side-layout .card.h-card.is-alt-color .action-link:after {
    border-bottom-color: #fcfcfc !important; /*TODO: Source this from Huro palette*/
}

/*
    Override media/mobile to allow leftside to show (images) along with some other overrides to improve mobile experience
    TODO: Possibly better, more organic way to handle this
*/
@media only screen and (max-width: 1024px) {
    html.right-side-layout {
        overflow: auto !important;
    }

    .right-side-layout .column.is-8,
    .right-side-layout .column.is-8-tablet {
        width: 100%;
        display: block;
    }
    .right-side-layout .column.is-4,
    .right-side-layout .column.is-4-tablet {
        width: 100%;
        height: unset; /*65vh;*/
        display: block;
    }

    .right-side-layout .left-background {
        width: 100%;
        height: 35vh;
        min-height: 250px; /*arbitrary - revisit*/
    }
    .right-side-layout .left-background-fluid {
        width: 100%;
        height: 45vh;
        min-height: 350px; /*arbitrary - revisit*/
    }
    .right-side-layout img.left-background {
        width: 100%;
        height: 35vh;
        min-height: 250px; /*arbitrary - revisit*/
    }

    .right-side-layout .is-form {
        padding-top: 0;
    }

    .right-side-layout .left-background-header:not(.h-hidden-desktop) {
        top: 3vh;
    }

    .right-side-layout .left-background-header.has-content-in-image:not(.h-hidden-desktop) {
        top: 5px;
    }

    .right-side-layout .left-background-header-main {
        font-size: 1.5em;
    }
    .right-side-layout .left-background-header-sub {
        font-size: 1.15em;
    }

}

@media only screen and (max-width: 1024px) {
    .view-wrapper.is-webapp .page-content-inner .breadcrumb {
        margin-top: -53px !important;
    }
}

@media only screen and (max-height: 700px) {
    /* Used mostly for lower left action icons that might conflict with upper left nav bar icons if not enough real-estate in height
       OK with mobile devices in portrait, so arbitrary ~700 should prevent only landscape on mobile and leave portrait on most everything else*/
    .h-hidden-mobile-l {
        display: none !important;
    }
}

/* Override Bulma SASS core from here instead of Huro (overriding min-width of 769 to max-width)*/
@media screen and (max-width: 1024px) {
    .columns:not(.is-desktop) {
        display: block;
    }

    /* TODO: Revisit this since would still be nice*/
    .column.is-2, .column.is-2-tablet,
    .column.is-3, .column.is-3-tablet,
    .column.is-4, .column.is-4-tablet,
    .column.is-5, .column.is-5-tablet,
    .column.is-6, .column.is-6-tablet,
    .column.is-7, .column.is-7-tablet,
    .column.is-8, .column.is-8-tablet,
    .column.is-9, .column.is-9-tablet,
    .column.is-10, .column.is-10-tablet {
        width: 100%;
    }
}

.mobile-logo-header {
    width: 100%;
    height: 95px;
    text-align: center;
}

.mobile-logo-header > img {
    height: 85px;
    padding-top: 12px;
}


/*TODO: Need to handle carousel images/format too*/



/********************* Bulma Cards  *********************/
.card.h-card.is-rounded {
    border-radius: 16px;
}
.card.h-card .card-title {
    display: block;
    border-bottom: 1px solid;
    font-size: 1em;
    font-weight: 400;
    padding: 15px;
}
.card.h-card .card-title i {
    font-size: 30px;
}
.card.h-card .inner-content.tabular-two-col p {
    text-align: right;
}
.card.h-card .inner-content.tabular-two-col p > span.data-label {
    float: left;
}


/********************* Action Links (technically belongs with Huro's definition) *********************/
.action-link::after {
    /*Optionally this could just use the text-underline-offset and related and simplify all of this (with no "after), like we are doing with h4.is-link, etc*/
    bottom: -1px; /*MOD: from -4px; not sure why needs to be so offset*/
}
/*Emulating Sandbox link animation but only for rightside layouts*/
.right-side-layout .action-link {
    position: relative;
    transition: all .2s ease-in-out;
}
.right-side-layout .action-link:hover {
    opacity: 1; /*Not sure likeing the opacity on hover of 0.6/0.7 any more, but not when doing this link animation at least*/ 
}
.right-side-layout .action-link::before {
    content: "";
    transform-origin: 100% 50%;
    transform: scale3d(0,1,1);
    transition: transform .5s cubic-bezier(.7,0,.2,1);
    position: absolute;
    width: 100%;
    height: 2px;
    background: currentColor;
    top: 100%;
}
.right-side-layout .action-link:hover::after {
    border-bottom: none;
}
.right-side-layout .action-link:hover::before {
    /*opacity: 0.7;*/ /*Not dimming main text in rightside mode so dont fade the underline*/
    transform-origin: 0 50%;
    transform: scale3d(1,1,1);
    transition-timing-function: cubic-bezier(.4,1,.8,1);
}


/********************* Typewriter plugin - pure CSS (author atelierbram, from https://www.cssscript.com/pure-css-text-typing-animation/)  *********************/
/*A slick alternate with more control (such as pause before erasing) but requires script: https://www.jqueryscript.net/demo/jQuery-Plugin-For-Customizable-Terminal-Text-Effect-TypeIt/*/

.typewriter-container {
    text-align: center;
    min-height: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 400px;
}

.typewriter-wrapper,
.typewriter-item {
    height: 80px;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    display: block;
    font-weight: 700;
}

.typewriter-wrapper {
    overflow: hidden;
}

.typewriter-item {
    position: relative;
    font-size: 1.5em;
    padding-top: .75em;
    animation: animatetotop 18s steps(3) 2s infinite;
}

.typewriter-item-inner {
    display: inline-block;
    box-sizing: inherit;
    position: relative;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-overflow: clip;
    white-space: nowrap;
    font-weight: 600;
}
p span.typewriter-item-inner {
    font-family: "Nanum Gothic";
    /*font-family: "Titillium Web";*/
}

.typewriter-item-inner:after {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    bottom: -2px;
    left: 0;
    animation: animatetoright 3s steps(20) 2s infinite alternate;
    border-left: 4px solid #283252;
    background-color: #f9f9f9;
}

/*TODO: Tie these into the theme colors for body bg color and P font color, in dark/light modes*/
.typewriter-item-inner:after {
    border-left: 4px solid #283252; /*Huro theme for light P color*/
    background-color: #f9f9f9; /*Huro theme for light body bg color*/
}
.is-dark .typewriter-item-inner:after {
    border-left: 4px solid #a2a5b9; /*Huro theme for dark P color*/
    background-color: #232326; /*This is not from Huro theme but above, for right-side dark (body.is-dark .right-side-layout:not(.form)) so safe to hardcode this if done above*/
}

@keyframes animatetoright {
    0% {
        left: 0;
        margin-right: auto;
    }

    100% {
        left: 100%;
        margin-left: .6em;
        margin-right: -.6em;
    }
}

@keyframes animatetotop {
    0% {
        top: 0;
    }

    100% {
        top: -240px;
    }
}


/********************* Swiper Slider/Carousel (TODO: Move this to own custom script so can bundle with main and only add when applicable/opted-in)  *********************/
.swiper {
    width: 100%;
}
.swiper-lightbox {
    padding-top: 50px;
    padding-bottom: 50px;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-lightbox .swiper-slide {
    background-position: center;
    background-size: cover;
    border-radius: 16px;
    width: 800px;
    height: 500px;
}
.swiper-lightbox .swiper-slide img {
    border-radius: 16px 0 0 16px;
    width: 500px;
    height: 500px;
}
.swiper-lightbox .swiper-slide .slide-content {
    border-radius: 0 16px 16px 0;
}
.swiper-lightbox .swiper-slide .slide-content h1 {
    font-size: 1.6em;
    font-weight: 700;
}
.swiper-lightbox .swiper-slide .slide-content h3 {
    font-size: 1.2em;
    font-weight: 600;
}
.swiper-lightbox .swiper-slide .slide-content .collapse-header {
    height: 40px;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev,
.is-dark .swiper .swiper-button-next,
.is-dark .swiper .swiper-button-prev {
    color: red; /*TODO: Tie in theme colors*/
    opacity: 0;
    transition: all 1s ease-in-out;
}
.swiper:hover .swiper-button-next,
.swiper:hover .swiper-button-prev {
    opacity: 1;
    transition: all 1s ease-in-out;
}
.swiper:hover .swiper-button-next.swiper-button-disabled,
.swiper:hover .swiper-button-prev.swiper-button-disabled {
    opacity: 0.35;
}
.swiper:hover .swiper-button-next {
    transform: translateX(-32px);
}
.swiper:hover .swiper-button-prev {
    transform: translateX(32px);
}
.swiper:hover .swiper-button-next:hover,
.swiper:hover .swiper-button-prev:hover {
    opacity: 0.7;
    transition: none;
}
.swiper-lightbox .swiper-pagination-bullet {
    background-color: #FFF; /*TODO: Tie in theme colors*/
}
.swiper-lightbox .swiper-pagination-bullet-active {
    background-color: red; /*TODO: Tie in theme colors*/
}
/*HACK: Really not following what is going on here, so some unfortunate explicit overrides/hacks to not have this lightbox/slider go completely sideways in smaller formats*/
@media only screen and (max-width: 1024px) {
    .swiper-lightbox .swiper-slide {
        overflow: hidden auto;
        width: 100%;
        max-width: 500px;
        height: calc(100vh - 150px);
        display: flex;
        border-radius: 0;
    }
    .swiper-lightbox .columns {
        align-self: center;
    }
    .swiper-lightbox .swiper-slide img {
        border-radius: 0; /*Wierdest stuff happening with this*/
        width: 100%;
        max-width: 500px;
        height: 500px;
    }
    .swiper-lightbox .swiper-slide .slide-content {
        border-radius: 0; /*Wierdest stuff happening with this*/
        width: 100%;
        max-width: 500px;
        height: 100%;
    }
}
@media only screen and (max-width: 1024px) and (max-height: 1000px) {
    .swiper-lightbox .swiper-slide {
        display: block;
    }
}



/********************* Stripe Elements  *********************/
.stripe-payment {
/*background-color: #525f7f;*/
}

.stripe-payment * {
    font-family: Montserrat, Roboto, "Helvetica Neue", sans-serif !important;
    font-size: 16px;
    font-weight: 600;
}

.stripe-payment .fieldset {
    /*margin: 0 15px 30px;*/
    padding: 0;
    border-style: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.stripe-payment .field {
    padding: 10px 20px 11px;
    background-color: #7488aa;
    border-radius: 20px;
    width: 100%;
}

.stripe-payment .field.half-width {
    width: calc(50% - (5px / 2));
}

.stripe-payment .field.third-width {
    width: calc(33% - (5px / 3));
}

.stripe-payment .field + .field {
    margin-top: 6px;
}

.stripe-payment .field.focus,
.stripe-payment .field:focus {
    color: #fff;
    /*color: #424770;*/
    /*background-color: #f6f9fc;*/
}

.stripe-payment .field.invalid {
    background-color: #fa755a;
}

.stripe-payment .field.invalid.focus {
    /*background-color: #f6f9fc;*/
}

.stripe-payment .field.focus::-webkit-input-placeholder,
.stripe-payment .field:focus::-webkit-input-placeholder {
    color: #cfd7df;
}

.stripe-payment .field.focus::-moz-placeholder,
.stripe-payment .field:focus::-moz-placeholder {
    color: #cfd7df;
}

.stripe-payment .field.focus:-ms-input-placeholder,
.stripe-payment .field:focus:-ms-input-placeholder {
    color: #cfd7df;
}

.stripe-payment .field.invalid::-webkit-input-placeholder {
    color: #FFCCA5;
}

.stripe-payment .field.invalid::-moz-placeholder {
    color: #FFCCA5;
}

.stripe-payment .field.invalid:-ms-input-placeholder {
    color: #FFCCA5;
}

.stripe-payment input 
/*.stripe-payment button*/ {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border-style: none;
}

.stripe-payment input {
    color: #fff;
}

.stripe-payment input::-webkit-input-placeholder {
    color: #9bacc8;
}

.stripe-payment input::-moz-placeholder {
    color: #9bacc8;
}

.stripe-payment input:-ms-input-placeholder {
    color: #9bacc8;
}

/*    .stripe-payment button {
    display: block;
    width: calc(100% - 30px);
    height: 40px;
    margin: 0 15px;
    background-color: #fcd669;
    border-radius: 20px;
    color: #525f7f;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

    .stripe-payment button:active {
        background-color: #f5be58;
    }*/

.stripe-payment .error svg .base {
    fill: #fa755a;
}

.stripe-payment .error svg .glyph {
    fill: #fff;
}

.stripe-payment .error .message {
    color: #fff;
}

.stripe-payment .success .icon .border {
    stroke: #fcd669;
}

.stripe-payment .success .icon .checkmark {
    stroke: #fff;
}

.stripe-payment .success .title {
    color: #fff;
}

.stripe-payment .success .message {
    color: #9cabc8;
}

.stripe-payment .success .reset path {
    fill: #fff;
}

/********************* Google reCAPTCHA  *********************/
.grecaptcha-badge {
    visibility: hidden;
}



/********************* Dynamic rendered content (like disclosures)  *********************/
.dynamic-rendering-section {
    padding-top: 10px;
}
.dynamic-rendering-section,
.dynamic-rendering-section > p {
    font-weight: 400 !important;
    /*TODO: Tap into SCSS variables but for now, need <p>s uniform with <li>s*/
    font-family: Montserrat, Roboto, "Helvetica Neue", sans-serif !important;
}
.dynamic-rendering-section ol {
    line-height: 25px;
    padding-left: 25px;
}
.dynamic-rendering-section.text-bold,
.dynamic-rendering-section.text-bold > p {
    font-weight: 700 !important;
}
.dynamic-rendering-section > ol,
.dynamic-rendering-section > ul,
.dynamic-rendering-section > p,
.dynamic-rendering-section > label {
    padding-top: 10px;
}



/********************* jSignature  *********************/
canvas.jSignature {
    border: dashed !important;
    border-color: gray !important;
    border-top-width: 2px !important;
    border-right-width: 2px !important;
    border-bottom-width: 2px !important;
    border-left-width: 2px !important;
}






/************************************************************************/
/********************* Org=Driven Branding/Theming  *********************/
/************************************************************************/

:root {
    --theme-font-size-base: 14px;
    --theme-font-color: #232326;
    --theme-font-family: Arial;

    --theme-primary-color: #696969;
    --theme-secondary-color: #FFFFFF;
    --theme-accent-color: #8B008B;
    --theme-tertiary-color: #a2a5b9;

    --theme-body-color: #f2f2f2;
}


.is-primary {
    color: var(--theme-primary-color) !important;
}
.is-secondary {
    color: var(--theme-secondary-color) !important;
}
.is-accent {
    color: var(--theme-accent-color) !important;
}
.is-tertiary {
    color: var(--theme-tertiary-color) !important;
}


.button.is-primary {
    background-color: var(--theme-primary-color);
    border-color: transparent;
    color: var(--theme-secondary-color) !important;
}
.button.is-secondary {
    background-color: var(--theme-secondary-color);
    border-color: transparent;
    color: var(--theme-tertiary-color) !important;
}
.button.is-accent {
    background-color: var(--theme-accent-color);
    border-color: transparent;
    color: var(--theme-primary-color) !important;
}
.button.is-tertiary {
    background-color: var(--theme-tertiary-color);
    border-color: transparent;
    color: var(--theme-secondary-color) !important;
}


/************************************************************************/
/********************* Overrides for Min / No-Nav Layout *************/
/************************************************************************/

.minimum-no-nav-layout .app-wrapper {
    /*No idea why this is necessary; seems to work on all formats until under 767 and no issue in the platform; something in this special template is conflicting*/
    overflow: initial;
}

.minimum-no-nav-layout .landing-page-wrapper .navbar {
    max-width: 1250px;
}

body.minimum-no-nav-layout,
.minimum-no-nav-layout .minimal-wrapper.light {
    background: var(--theme-body-color) !important;
}

.minimum-no-nav-layout .landing-page-wrapper .navbar {
    height: 180px;
    padding: 0 30px;
}

.minimum-no-nav-layout .hero-body {
    max-width: 1140px;
    margin: 0 auto;
    align-items: normal !important;
    margin-top: 170px;
    width: 100%;
}

.minimum-no-nav-layout .landing-page-wrapper .navbar.is-docked .navbar-brand .brand-icon,
.minimum-no-nav-layout .landing-page-wrapper .navbar .navbar-brand .brand-icon {
    height: 170px;
    width: 100%;
    border-radius: 50%;
}

.minimum-no-nav-layout .landing-page-wrapper .navbar .navbar-brand .brand-icon img {
    max-height: 120px;
    max-width: 100%;
    padding: 0;
    width: auto;
}
.minimum-no-nav-layout .navbar .navbar-burger.burger {
    z-index: 99999;
}
.minimum-no-nav-layout .navbar.is-docked .navbar-burger.burger {
    color: var(--theme-secondary-color);
}
.minimum-no-nav-layout .navbar.is-docked .navbar-burger.burger.is-active {
    color: var(--theme-primary-color);
}
@media (max-width: 1024px) {
    .navbar-brand {
        height: 180px;
    }
}


.minimum-no-nav-layout .landing-page-wrapper .absolute-header {
    height: 500px;
}

.minimum-no-nav-layout a {
    color: var(--theme-primary-color);
}
.minimum-no-nav-layout a:hover {
    color: var(--theme-accent-color);
}

.minimum-no-nav-layout .collapse {
    border-color: var(--theme-accent-color);
    border-radius: 10px;
}
.minimum-no-nav-layout .collapse-header > h2,
.minimum-no-nav-layout .collapse-header > h3 {
    font-size: 28px;
    font-weight: 800;
    font-family: Frutiger, Roboto, Titillium;
}
.minimum-no-nav-layout .collapse-header {
    margin-top: 10px;
    margin-bottom: 10px;
}
.minimum-no-nav-layout .collapse-content .content {
    text-align: left;
    font-size: 1.6rem;
}
.minimum-no-nav-layout .is-content-column {
    background-color: var(--theme-secondary-color);
    border-color: var(--theme-primary-color);
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    font-size: 1.8rem;
    padding: 20px;
}
.minimum-no-nav-layout .is-content-column.is-primary {
    background-color: var(--theme-primary-color);
    color: var(--theme-secondary-color) !important;
}
.minimum-no-nav-layout .is-content-column.is-secondary {
    background-color: var(--theme-secondary-color);
    color: var(--theme-primary-color) !important;
}
.minimum-no-nav-layout .media-flex .flex-meta {
    display: flex;
    align-items: center;
}
.minimum-no-nav-layout .media-flex,
.minimum-no-nav-layout .media-flex.is-accent {
    background-color: var(--theme-accent-color);
    border-color: var(--theme-primary-color);
    color: var(--theme-primary-color);
    border-radius: 10px;
    font-size: 1.5rem;
    padding: 30px;
}
.minimum-no-nav-layout .media-flex.is-primary {
    background-color: var(--theme-primary-color);
    border-color: var(--theme-accent-color);
    color: var(--theme-secondary-color) !important;
}

.media-flex .flex-end {
    align-items: center;
}

.minimum-no-nav-layout .media-flex .flex-meta span:first-child,
.minimum-no-nav-layout .media-flex .flex-meta > a:first-child,
.minimum-no-nav-layout .media-flex .flex-meta span:nth-child(2) {
    color: var(--theme-primary-color);
}
.minimum-no-nav-layout .media-flex.is-primary .flex-meta span:first-child,
.minimum-no-nav-layout .media-flex.is-primary .flex-meta > a:first-child,
.minimum-no-nav-layout .media-flex.is-primary .flex-meta span:nth-child(2) {
    color: var(--theme-secondary-color);
}
.minimum-no-nav-layout .media-flex .flex-meta span:nth-child(2) {
    font-size: 1.4rem;
}
.minimum-no-nav-layout .h-icon.is-primary {
    background: var(--theme-primary-color);
}
.minimum-no-nav-layout .h-icon {
    height: 55px;
    width: 55px;
}
.minimum-no-nav-layout .h-icon i,
.minimum-no-nav-layout .h-icon svg {
    height: 40px;
    width: 40px;
    stroke-width: 1.8px;
}
.minimum-no-nav-layout .h-icon i.lnil,
.minimum-no-nav-layout .h-icon .lnil svg,
.minimum-no-nav-layout .h-icon i.lnir,
.minimum-no-nav-layout .h-icon .lnir svg {
    height: 30px;
    width: 30px;
}
.minimum-no-nav-layout a .h-icon {
    height: 30px;
    width: 30px;
}
.minimum-no-nav-layout .h-icon i.lnil,
.minimum-no-nav-layout .h-icon i.lnir {
    color: var(--theme-primary-color);
    font-size: 3.5rem;
    font-weight: 800;
}
.minimum-no-nav-layout .is-primary .h-icon i.lnil,
.minimum-no-nav-layout .is-primary .h-icon i.lnir {
    color: var(--theme-secondary-color);
    font-size: 3.5rem;
    font-weight: 800;
}
.minimum-no-nav-layout .h-icon .lnil, 
.minimum-no-nav-layout .h-icon .lnir {
    color: var(--theme-primary-color);
}
.minimum-no-nav-layout a .h-icon {
    background: transparent;
}

.minimum-no-nav-layout .s-card.is-primary {
    background-color: var(--theme-primary-color);
}
.minimum-no-nav-layout .s-card.is-accent {
    background-color: var(--theme-accent-color) !important;
    border-color: var(--theme-primary-color) !important;
}
.minimum-no-nav-layout .s-card.is-tertiary {
    border-color: var(--theme-tertiary-color) !important;
}
.minimum-no-nav-layout .s-card.is-secondary-bg {
    background-color: var(--theme-secondary-color) !important;
    border-color: var(--theme-primary-color) !important;
    color: var(--theme-primary-color) !important;
}

.minimum-no-nav-layout .s-card.is-accent .title,
.minimum-no-nav-layout .s-card.is-accent svg {
    color: var(--theme-primary-color) !important;
}

.minimum-no-nav-layout .s-card {
    border-radius: 10px;
}
.minimum-no-nav-layout .s-card i,
.minimum-no-nav-layout .s-card svg {
    height: 100px;
    width: 100px;
}
.minimum-no-nav-layout .s-card .title {
    padding-top: 15px;
    padding-bottom: 10px;
}

.minimum-no-nav-layout .columns .column {
    padding-left: 20px;
    padding-right: 20px;
}

.minimum-no-nav-layout .button:hover,
.minimum-no-nav-layout .button.is-hovered,
.minimum-no-nav-layout a:hover > .s-card,
.minimum-no-nav-layout a > .media-flex:hover {
    opacity: 0.7;
}
.minimum-no-nav-layout .button.h-button {
    padding-bottom: calc(0.5em - 1px);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: calc(0.5em - 1px);
    height: 2.5em;
    border-radius: 10px;
}
.minimum-no-nav-layout .button.h-button.is-rounded {
    border-radius: 20px;
}
/*Copied from main but for some reason, only on is-primary*/
.button.h-button.is-elevated {
    -webkit-box-shadow: 0 14px 26px -12px rgba(109, 110, 113, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(109, 110, 113, 0.2);
    box-shadow: 0 14px 26px -12px rgba(109, 110, 113, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(109, 110, 113, 0.2);
}
.minimum-no-nav-layout .title, 
.minimum-no-nav-layout .subtitle {
    color: var(--theme-text-color) !important;
    font-family: Roboto, Titillium, "Helvetica Neue", Arial;
}
.minimum-no-nav-layout .title.is-light,
.minimum-no-nav-layout .subtitle.is-light {
    color: var(--theme-secondary-color) !important;
    font-family: Roboto, Titillium, "Helvetica Neue", Arial;
}
.minimum-no-nav-layout .title.is-1 {
    font-weight: 600;
    font-size: 60px;
    font-family: Raleway, Roboto, Titillium, "Helvetica Neue", Arial;
}
.minimum-no-nav-layout .subtitle.is-2 {
    font-weight: 600;
    font-size: 30px;
    font-family: Frutiger, Roboto, Titillium, "Helvetica Neue", Arial;
}
.minimum-no-nav-layout .title.is-accent,
.minimum-no-nav-layout .subtitle.is-accent {
    color: var(--theme-accent-color) !important;
}
.minimum-no-nav-layout .title.is-primary,
.minimum-no-nav-layout .subtitle.is-primary {
    color: var(--theme-primary-color) !important;
}

.minimum-no-nav-layout .landing-page-wrapper .absolute-header {
    background: var(--theme-primary-color);
}
.minimum-no-nav-layout .landing-page-wrapper .absolute-header.no-header-color {
    background: #FFFFFF;
}

.minimum-no-nav-layout .button.h-button {
    font-size: 1.5rem;
}

.minimum-no-nav-layout .vid-player > iframe {
    border-radius: 10px;
}

.minimum-no-nav-layout .is-divider[data-content]::after,
.minimum-no-nav-layout .is-divider-vertical[data-content]::after {
    background: var(--theme-body-color) !important;
}

.minimum-no-nav-layout p {
    color: inherit;
}
.minimum-no-nav-layout .column .is-content-colum {
    min-height: 112px;
}
.minimum-no-nav-layout .is-content-column table {
    font-size: 1.5rem;
}
.minimum-no-nav-layout a[disabled]  {
    cursor: default;
}
.minimum-no-nav-layout a[disabled] .media-flex {
    opacity: 0.5;
}
.minimum-no-nav-layout .column .is-content-column.is-accent-background {
    background-color: var(--theme-accent-color);
    color: var(--theme-secondary-color) !important;
    border-color: var(--theme-primary-color);
}
.minimum-no-nav-layout .s-card .tile-image-half-width {
    object-fit: cover;
    height: 300px;
    width: 100%;
    border-radius: 10px;
}
.minimum-no-nav-layout .s-card .tile-image-third-width {
    object-fit: cover;
    height: 175px;
    width: 175px;
    border-radius: 10px;
}
.minimum-no-nav-layout .s-card .tile-video-third-width {
    height: 175px;
    width: 100%;
    border-radius: 10px;
}


/*Wizard buttons/container & Progress Bar (generic too)*/
.minimum-no-nav-layout .wizard-buttons,
.minimum-no-nav-layout .wizard-progress {
    position: inherit;
}

.minimum-no-nav-layout .wizard-v1-wrapper {
    padding-top: 0px;
}
/*for wizard/quiz layouts, do not want to ever show all the content vertically so override this*/
@media screen and (max-width: 1024px) {
    .minimum-no-nav-layout .wizard-v1-wrapper .columns:not(.is-desktop) {
        display: flex;
    }
    .minimum-no-nav-layout .wizard-v1-wrapper .inner-wrapper {
        display: none !important;
    }
    .minimum-no-nav-layout .wizard-v1-wrapper .inner-wrapper.is-active {
        display: block !important;
    }
}
.minimum-no-nav-layout .landing-page-wrapper .container {
    width: 100%;
}

.minimum-no-nav-layout .progress {
    border-radius: 10px;
    height: 2rem;
    background: var(--theme-tertiary-color);
}
/*Revisit why was overriding this; remember some intent/reason but looks ugly so reversing*/
/*.minimum-no-nav-layout .wizard-progress {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}*/
.minimum-no-nav-layout .progress::-webkit-progress-bar {
    background: var(--theme-tertiary-color);
}

.minimum-no-nav-layout .progress::-webkit-progress-value {
    background: var(--theme-accent-color);
    border-radius: 10px;
    border-bottom-left-radius: 0;
    transition: width 0.5s ease;
}

.minimum-no-nav-layout .progress::-moz-progress-bar {
    background: var(--theme-accent-color);
    border-radius: 10px;
    border-bottom-left-radius: 0;
    transition: width 0.5s ease;
}

.minimum-no-nav-layout .progress::-ms-fill {
    background: var(--theme-accent-color);
    border-radius: 10px;
    border-bottom-left-radius: 0;
    transition: width 0.5s ease;
}
.minimum-no-nav-layout .progress-label .tag {
    font-size: 1.5rem;
    max-height: 100% !important;
    font-weight: 700 !important;
}
/*TODO: Confirm not just a firefox thing*/
.minimum-no-nav-layout .progress-label span {
    padding-top: 2px;
}
/*Shouldnt have to keep overriding these basic contrasting combos; find more elegant way*/
.minimum-no-nav-layout .progress-label .tag.is-accent {
    background: var(--theme-accent-color);
    color: var(--theme-primary-color) !important;
    border-color: var(--theme-primary-color);
}
.minimum-no-nav-layout .progress-label .tag.is-primary {
    background: var(--theme-primary-color);
    color: var(--theme-secondary-color) !important;
    border-color: var(--theme-accent-color);
}
.minimum-no-nav-layout .progress-label .tag.is-tertiary {
    background: var(--theme-tertiary-color);
    color: var(--theme-primary-color) !important;
    border-color: var(--theme-primary-color);
}
.minimum-no-nav-layout .progress-container-outer {
    display: flex;
    align-items: center;
}
.minimum-no-nav-layout .progress-container-outer .progress-container {
    width: calc(100% - 205px); 
    display: inline-block; 
    text-align: left;
}
.minimum-no-nav-layout .progress-container-outer .progress-label {
   width: 200px; 
   text-align: right; 
   display: inline-block;
}
.minimum-no-nav-layout a.activity-tracking-access-link-internal[disabled] {
    opacity: 0.7;
}
.minimum-no-nav-layout a[disabled] .button:hover,
.minimum-no-nav-layout a[disabled] .button.is-hovered,
.minimum-no-nav-layout a[disabled]:hover > .s-card {
    opacity: 1;
    cursor: default;
}
/*TODO: Figure out best way how to just not have this button react at all if container disabled (but has is-primary hover in main so try to mnatch same styling); inherit and unset just remove all stlying, not just cancel the hover effects*/
.minimum-no-nav-layout a[disabled] .button.is-primary:hover {
    background-color: var(--theme-primary-color) !important;
    color: var(--theme-secondary-color) !important;
}
.minimum-no-nav-layout .image-tile-status i,
.minimum-no-nav-layout .image-tile-status svg {
    width: 50px;
    color: var(--theme-primary-color) !important;
    font-size: 40px;
    padding: 5px;
}
.minimum-no-nav-layout .image-tile-view .image-tile-status {
    background-color: var(--theme-accent-color);
    height: 50px;
    width: 50px;
    position: absolute;
    top: 15px;
    left: 25px;
    border-radius: 50%;
}

.minimum-no-nav-layout .is-divider {
    border-top-color: var(--theme-primary-color);
}

.minimum-no-nav-layout .is-raised {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
    
/*@media only screen and (min-width: 768px) and (orientation: portrait) {
    .minimum-no-nav-layout.landing-page-wrapper .navbar {
        display: flex;
    }
}*/



/*******Lity Lightbox*********/

.minimum-no-nav-layout .lity-iframe .lity-container {
    height: calc(100% - 50px);
}
.minimum-no-nav-layout .lity-content,
.minimum-no-nav-layout .lity-iframe-container {
    height: 100%;
}
.minimum-no-nav-layout .lity-iframe-container iframe {
    border-radius: 10px;
}



/************************************* Specific No-Nav-Min-Container Layout Overrides (grid. forms, Lendo controls, etc) *************************************/
/*TODO: Shouldnt this be in the Kendo CSS override??*/

/*Grid & Related*/

.minimum-no-nav-layout .k-grid-header,
.minimum-no-nav-layout .k-grid-footer,
.minimum-no-nav-layout .k-pager-wrap {
    background-color: var(--theme-tertiary-color);
}

.minimum-no-nav-layout .k-grid-header th.k-header a:hover,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager .k-pager-nav.k-link:hover,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager .k-pager-refresh:hover,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager .k-state-hover.k-pager-nav.k-link,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager .k-state-hover.k-pager-refresh,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager .k-pager-nav.k-link:hover > span,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager .k-pager-refresh:hover > span,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager .k-state-hover.k-pager-nav.k-link > span,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager .k-state-hover.k-pager-refresh > span {
    color: var(--theme-primary-color);
}

.minimum-no-nav-layout .action-row-menu svg:hover path,
.minimum-no-nav-layout .treeview-action svg:hover path {
    fill: var(--theme-accent-color);
}

.minimum-no-nav-layout .k-toolbar .k-button,
.minimum-no-nav-layout .k-toolbar .k-button-secondary {
    background-color: var(--theme-primary-color);
    color: var(--theme-secondary-color);
}
.minimum-no-nav-layout .k-toolbar .k-button:hover,
.minimum-no-nav-layout .k-toolbar .k-button-secondary:hover {
    color: var(--theme-secondary-color);
    opacity: 0.7;
}

.minimum-no-nav-layout .k-grid a:hover {
    color: var(--theme-primary-color);
}


.minimum-no-nav-layout .k-pager-wrap.k-grid-pager > span,
.minimum-no-nav-layout .k-pager-wrap.k-grid-pager > a > span {
    color: var(--theme-secondary-color);
}

.minimum-no-nav-layout .k-button-primary,
.minimum-no-nav-layout .k-button.k-primary {
    border-color: var(--theme-accent-color);
    color: var(--theme-primary-color);
    background-color: var(--theme-accent-color);
}

.minimum-no-nav-layout .k-grid-content td.k-state-selected,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected td {
    background-color: var(--theme-accent-color);
    color: var(--theme-primary-color);
}

.minimum-no-nav-layout .k-grid-content td.k-state-selected div,
.minimum-no-nav-layout .k-grid-content td.k-state-selected a,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected div,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected a,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected td div,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected td a {
    color: var(--theme-primary-color);
}
.minimum-no-nav-layout .k-grid-content td.k-state-selected svg path,
.minimum-no-nav-layout .k-grid-content td.k-state-selected .disabled svg:hover path,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected svg path,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected .disabled svg:hover path,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected td svg path,
.minimum-no-nav-layout .k-grid-content tr.k-state-selected td .disabled svg:hover path {
    fill: var(--theme-primary-color);
}
.minimum-no-nav-layout tr.k-state-selected .action-row-menu svg:hover path {
    fill: var(--theme-secondary-color);
}
.minimum-no-nav-layout .k-grid a {
    color: var(--theme-secondary-color);
}


/*******Popup Form*********/

.minimum-no-nav-layout .h-modal .modal-content .modal-card .modal-card-head {
    background: var(--theme-tertiary-color);
}
.minimum-no-nav-layout .h-modal .modal-content .modal-card .modal-card-head h3 {
    color: var(--theme-secondary-color);
}
.minimum-no-nav-layout .h-modal .modal-content .modal-card .modal-card-head .h-modal-close svg {
    color: var(--theme-secondary-color);
}




/*******Assessments & Contests & Other Submittable Entry Forms*********/
/*TODO: Should be relocated to Kendo overrides*/

.minimum-no-nav-layout .wizard-progress {
    top: inherit;
    bottom: 0 !important;
}
.minimum-no-nav-layout .wizard-buttons {
    bottom: 50px;
}
.minimum-no-nav-layout .k-radio,
.minimum-no-nav-layout .k-checkbox {
    height: 25px;
    width: 25px;
}
.minimum-no-nav-layout .k-radio-item,
.minimum-no-nav-layout .k-checkbox-item {
    margin-bottom: 25px;
    border: solid 1px;
    border-radius: 10px;
    border-color: var(--theme-accent-color);
}
.minimum-no-nav-layout .k-radio-item:hover,
.minimum-no-nav-layout .k-checkbox-item:hover{
    border-color: var(--theme-primary-color);
}
.minimum-no-nav-layout .k-radio-item label,
.minimum-no-nav-layout .k-checkbox-item label{
    vertical-align: top;
    font-size: 1.5em;
    width: calc(100% - 70px);
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
}
.minimum-no-nav-layout .k-radio:checked,
.minimum-no-nav-layout .k-checkbox:checked {
    border-color: var(--theme-primary-color);
    color: var(--theme-primary-color);
}
.minimum-no-nav-layout .k-checkbox:checked {
    background-color: var(--theme-accent-color);
}
.minimum-no-nav-layout input[type="radio"],
.minimum-no-nav-layout input[type="checkbox"] {
    margin-left: 25px;
    margin-top: 18px;
}
.minimum-no-nav-layout .form .k-textbox,
.minimum-no-nav-layout .form .k-numerictextbox,
.minimum-no-nav-layout .form .k-datepicker,
.minimum-no-nav-layout .form .k-dropdown,
.minimum-no-nav-layout .form .k-combobox {
    padding: 31px;
}
.minimum-no-nav-layout .form .k-numerictextbox {
    /*Not sure what happened here; worked fine before but now borked*/
    /*Clearly got resolved because now borked if applied*/
/*    padding-top: 11px;
    padding-bottom: 11px; 
*/
}
.minimum-no-nav-layout .form .k-textbox,
.minimum-no-nav-layout .form .k-numerictextbox,
.minimum-no-nav-layout .form .k-textarea,
.minimum-no-nav-layout .form .k-datepicker,
.minimum-no-nav-layout .form .k-dropdown,
.minimum-no-nav-layout .form .k-combobox {
    border: solid 1px;
    border-radius: 10px;
    border-color: var(--theme-accent-color);
}
.minimum-no-nav-layout .form .k-textbox .k-input,
.minimum-no-nav-layout .form .k-numerictextbox .k-input,
.minimum-no-nav-layout .form .k-maskedtextbox input,
.minimum-no-nav-layout .form .k-textarea,
.minimum-no-nav-layout .form .k-datepicker,
.minimum-no-nav-layout .form .k-dropdown,
.minimum-no-nav-layout .form .k-combobox {
    font-size: 1.5rem;
}
.minimum-no-nav-layout .k-calendar {
    font-size: 1.05rem;
}
.minimum-no-nav-layout .k-calendar .k-footer {
    color: var(--theme-secondary-color);
}
.minimum-no-nav-layout .form .k-dropdown,
.minimum-no-nav-layout .form .k-combobox,
.minimum-no-nav-layout .form .k-datepicker {
    align-items: center;
}
.minimum-no-nav-layout .form .k-textbox .k-state-focused,
.minimum-no-nav-layout .form .k-numerictextbox .k-numeric-wrap.k-state-focused,
.minimum-no-nav-layout .form .k-textarea.k-state-focused,
.minimum-no-nav-layout .form .k-datepicker .k-state-focused,
.minimum-no-nav-layout .form .k-combobox .k-dropdown-wrap.k-state-focused {
    border-color: var(--theme-primary-color);
}
/*TODO: Some of these disabled overrides are hacks to keep all controls consistent; check out why necessary*/
.minimum-no-nav-layout .form .k-textbox.k-state-disabled,
.minimum-no-nav-layout .form .k-maskedtextbox.k-state-disabled,
.minimum-no-nav-layout .form span.k-widget.k-dropdown[aria-disabled = "true"] {
    background-color: whitesmoke;
}
.minimum-no-nav-layout .form span.k-widget.k-dropdown[aria-disabled = "true"] {
    opacity: 0.6;
}
.minimum-no-nav-layout .form .k-maskedtextbox.k-state-disabled .k-textbox:disabled,
.minimum-no-nav-layout .form .k-maskedtextbox.k-state-disabled .k-textbox[disabled]{
    opacity: 1;
}
.minimum-no-nav-layout .form .k-dropdown-wrap.k-state-disabled {
    border: none;
}

.minimum-no-nav-layout .k-textarea {
   color: inherit;
   padding: 20px;
}
.minimum-no-nav-layout .k-textarea.k-state-focused {
    box-shadow: 0 0 0 1px var(--theme-primary-color);
}
.minimum-no-nav-layout .form .k-textbox,
.minimum-no-nav-layout .form .k-dropdown,
.minimum-no-nav-layout .form span.k-widget.k-dropdown[aria-disabled = "true"]:hover,
.minimum-no-nav-layout .form .k-textarea,
.minimum-no-nav-layout .form .k-datepicker,
.minimum-no-nav-layout .form .k-combobox {
    border-color: var(--theme-accent-color) !important;
    border-top-color: var(--theme-accent-color) !important;
    color: var(--theme-font-color) !important;
    caret-color: var(--theme-font-color) !important;
}
.minimum-no-nav-layout .form .k-textbox input,
.minimum-no-nav-layout .form .k-numerictextbox input,
.minimum-no-nav-layout .form .k-maskedtextbox input,
.minimum-no-nav-layout .form .k-textarea textarea,
.minimum-no-nav-layout .form .k-datepicker input,
.minimum-no-nav-layout .form .k-combobox input {
    color: var(--theme-font-color) !important;
    caret-color: var(--theme-font-color) !important;
}
.minimum-no-nav-layout .form .k-textbox input::selection,
.minimum-no-nav-layout .form .k-maskedtextbox input::selection,
.minimum-no-nav-layout .form .k-datepicker input::selection,
.minimum-no-nav-layout .form .k-dropdown span::selection,
.minimum-no-nav-layout .form .k-combobox input::selection {
    background: var(--theme-primary-color);
}
.minimum-no-nav-layout .form .k-textbox input::-moz-selection,
.minimum-no-nav-layout .form .k-maskedtextbox input::-moz-selection,
.minimum-no-nav-layout .form .k-datepicker input::-moz-selection,
.minimum-no-nav-layout .form .k-dropdown span::-moz-selection 
.minimum-no-nav-layout .form .k-combobox input::-moz-selection {
    background: var(--theme-primary-color);
}
.minimum-no-nav-layout .form .k-textbox:hover,
.minimum-no-nav-layout .form .k-numerictextbox:hover,
.minimum-no-nav-layout .form .k-textarea:hover,
.minimum-no-nav-layout .form .k-datepicker:hover,
.minimum-no-nav-layout .form .k-dropdown:hover,
.minimum-no-nav-layout .form .k-combobox:hover {
    border-color: var(--theme-primary-color) !important;
}
.minimum-no-nav-layout .collapse .collapse-header .collapse-icon svg {
    height: 30px;
    width: 30px;
}
.minimum-no-nav-layout .detail-form .fieldset div:not(.fieldset-heading) {
    margin-bottom: 30px;
}
.minimum-no-nav-layout .detail-form .fieldset div > h4,
.minimum-no-nav-layout .detail-form .fieldset div > h3,
.minimum-no-nav-layout .fieldset .fieldset-heading {
    font-size: 1.3rem;
}
.minimum-no-nav-layout .detail-form .fieldset div > h4,
.minimum-no-nav-layout .detail-form .fieldset div > h3 {
    padding-bottom: 10px;
}
.minimum-no-nav-layout .k-list .k-item.k-state-selected,
.minimum-no-nav-layout .k-list-optionlabel.k-state-selected {
    color: var(--theme-accent-color);
}
.minimum-no-nav-layout .k-dropdown-wrap.k-state-default,
.minimum-no-nav-layout .k-numeric-wrap.k-state-default,
.minimum-no-nav-layout .k-picker-wrap.k-state-default {
    border-bottom: none;
}
.minimum-no-nav-layout .k-dropdown-wrap .k-icon,
.minimum-no-nav-layout .k-numeric-wrap .k-icon,
.minimum-no-nav-layout .k-picker-wrap .k-icon {
    font-size: 24px;
}
.minimum-no-nav-layout .k-switch-container {
    width: 60px;
}
.minimum-no-nav-layout .k-switch-handle {
    width: 30px;
    height: 30px;
}
.minimum-no-nav-layout .k-switch-on .k-switch-handle {
    background-color: var(--theme-accent-color);
}
.minimum-no-nav-layout .k-switch-on:hover .k-switch-handle,
.minimum-no-nav-layout .k-switch-on.k-state-hover .k-switch-handle {
    background-color: var(--theme-accent-color);
}
.minimum-no-nav-layout .k-switch-on .k-switch-container {
    background-color: var(--theme-accent-color);
}

.minimum-no-nav-layout .form-wrapper {
    margin-top: 40px;
    width: 100%;
    text-align: left !important;
    border-radius: 10px;
}
.minimum-no-nav-layout .form-wrapper form {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
}

.minimum-no-nav-layout .column .is-content-column,
.minimum-no-nav-layout .collapse .collapse-content {
    color: var(--theme-text-color);
}
.minimum-no-nav-layout .column .is-content-column ul,
.minimum-no-nav-layout .column .is-content-column ol,
.minimum-no-nav-layout .collapse .collapse-content ul,
.minimum-no-nav-layout .collapse .collapse-content ol,
.minimum-no-nav-layout .is-content-column ol {
    margin-left: 40px;
}
.minimum-no-nav-layout .column .is-content-column ul,
.minimum-no-nav-layout .collapse .collapse-content ul {
    list-style: initial;
}
.minimum-no-nav-layout .collapse .collapse-content p,
.minimum-no-nav-layout .is-content-column p {
    font-weight: 400;
}

.minimum-no-nav-layout .dashboard-container .dashboard-block-title,
.minimum-no-nav-layout .dashboard-container .dashboard-block-title span {
    font-weight: 800;
    font-size: 24px;
    font-family: Frutiger, Roboto, Arial !important;
}

.minimum-no-nav-layout .enrollment-step-container .content-text,
.minimum-no-nav-layout .enrollment-step-container .content-text p {
    font-size: 22px;
    line-height: 1.6;
    font-family: Raleway, Roboto, Titillium, "Helvetica Neue", Arial;
}

.minimum-no-nav-layout .k-widget.k-textbox.disabled.k-state-disabled {
    border-bottom-style: solid;
}




/************************************************************************/
/********************* Custom Text Container Helpers **************/
/************************************************************************/
.minimum-no-nav-layout .html-editor-custom-text,
.minimum-no-nav-layout .html-editor-custom-text td {
    padding: 20px;
    padding-bottom: 0;
    text-align: left;
    font-size: 18px !important;
    font-family: Frutiger, Roboto, Titillium, "Helvetica Neue", Arial !important;
    line-height: 32px;
}
.minimum-no-nav-layout .html-editor-custom-text .content-title { /*TODO: Should use H1 or H2 or one of the other Huro built-ins?*/
    font-weight: 800;
    font-size: 28px;
    font-family: Frutiger, Roboto, Titillium, "Helvetica Neue", Arial !important;
}
.minimum-no-nav-layout .html-editor-custom-text h2 {
    font-weight: 800;
    font-size: 22px;
    font-family: Frutiger, Roboto, Titillium, "Helvetica Neue", Arial !important;
}

.minimum-no-nav-layout .column .html-editor-custom-text .content-title,
.minimum-no-nav-layout .column .html-editor-custom-text p:not(:last-child),
.minimum-no-nav-layout .column .html-editor-custom-text ul:not(:last-child),
.minimum-no-nav-layout .column .html-editor-custom-text table:not(:last-child),
.minimum-no-nav-layout .collapse .collapse-content .html-editor-custom-text .content-title,
.minimum-no-nav-layout .collapse .collapse-content .html-editor-custom-text p:not(:last-child),
.minimum-no-nav-layout .collapse .collapse-content .html-editor-custom-text ul:not(:last-child),
.minimum-no-nav-layout .collapse .collapse-content .html-editor-custom-text table:not(:last-child) {
    margin-bottom: 20px;
}
.minimum-no-nav-layout .html-editor-custom-text table {
    width: 100%;
    border-style: hidden;
}
.minimum-no-nav-layout .html-editor-custom-text td {
    padding: 3px 0;
    border: 1px solid #DCDCDC;
}





.minimum-no-nav-layout .html-editor-custom-text .content-body,
.minimum-no-nav-layout .html-editor-custom-text.content-body {
}




/************************************************************************/
/********************* Mobile Overrides Needed  **************/
/************************************************************************/
/*TODO: Understand why some of these are necessary like immed below; why does a 12-col only behave like one when has tons of room but not below it?? Copying the same media defined for min-width: 769px*/
@media screen and (max-width: 768px), print {
    .column.is-12, .column.is-12-tablet, .column.is-6, .column.is-6-tablet, .column.is-5, .column.is-5-tablet, .column.is-7, .column.is-7-tablet, .column.is-4, .column.is-4-tablet, .column.is-8, .column.is-8-tablet, .column.is-3, .column.is-3-tablet, .column.is-9, .column.is-9-tablet {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        width: 100%;
    }
}



/************************************************************************/
/*MOD: Custom impl; Neutered the is-docked landing logic at client request. So continue to add more overrides to blend the look/feel of the docked/undocked header*/
/************************************************************************/
.minimum-no-nav-layout .landing-page-wrapper .navbar-fixed-wrapper {
    position: fixed;
    background-color: #FFFFFF;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    z-index: 98;
}
.minimum-no-nav-layout .landing-page-wrapper .navbar.is-docked {
    background: #FFFFFF;
    border-radius: 0;
    position: relative;
}
.minimum-no-nav-layout .landing-page-wrapper .navbar.is-docked .navbar-brand .brand-icon {
    background: transparent;
    border: none;
}




.minimum-no-nav-layout {
}




/************************************************************************/
/********************* Google Translate Overrides/Styling  **************/
/************************************************************************/
/* .goog-te-banner-frame {
    display: none;
}

// Don't show Google Topbar
// #goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
}
    */
/*
#google_translate_element {
    position: absolute;
    bottom: calc(80px + 16px);
    right: 16px !important;
    z-index: 99999;
}

.goog-te-gadget {
    font-family: Roboto, 'Open Sans', sans-serif !important;
    text-transform: uppercase;
}

.goog-te-gadget-simple {
    background-color: rgba(255,255,255,0.20) !important;
    border: 1px solid rgba(255,255,255,0.50) !important;
    padding: 8px !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
    line-height: 2rem !important;
    display: inline-block;
    cursor: pointer;
    zoom: 1;
}

.goog-te-menu2 {
    max-width: 100%;
}

.goog-te-menu-value {
    color: #fff !important;
}
    .goog-te-menu-value:before {
        font-family: 'Material Icons';
        content: "\E927";
        margin-right: 16px;
        font-size: 2rem;
        vertical-align: -10px;
    } 

.goog-te-menu-value span:nth-child(5) {
    display: none;
}

.goog-te-menu-value span:nth-child(3) {
    border: none !important;
    font-family: 'Material Icons';
}
    .goog-te-menu-value span:nth-child(3):after {
        font-family: 'Material Icons';
        content: "\E5C5";
        font-size: 1.5rem;
        vertical-align: -6px;
    } 

.goog-te-gadget-icon {
    background-image: url(https://placehold.it/32) !important;
    background-position: 0px 0px;
    height: 32px !important;
    width: 32px !important;
    margin-right: 8px !important;
    /* OR display: none;
}*/
/* ============ HIDE TOP BAR ============*/
.goog-te-banner-frame.skiptranslate {
    /*display: none !important;*/
}


/* ================================== *\
    Mediaqueries
\* ================================== */
/*
@media (max-width: 667px) {
    #google_translate_element {
        bottom: calc(100% - 50% - 53px);
        left: 16px !important;
        width: 100% !important;
        goog-te-gadget

{
    width: 100% !important;
}

.skiptranslate {
    width: 100% !important;
}

.goog-te-gadget-simple {
    width: calc(100% - 32px) !important;
    text-align: center;
}
}}
    */