/* Comment Generated by Combres - Resource '~/assets/css/standard.site.css' (Mode: Static) */

/*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;
}

/*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*/
}


.presentation-interface .k-widget:not(.k-maskedtextbox) {
    font-size: 18px !important;
}

/*
    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 {
        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;
}



/* Comment Generated by Combres - Resource '~/content/site/themes/standard.site.custom.css' (Mode: Static) */


/*
	This is for additional overrides not reflected in the Huro and Kendo overrides
*/