.input-focused {
    background-color: #F0F0F0;
    background-image: none;
    background-size: 0 2px, 100% 1px;
    background-position: center calc(100%);
}


    .input-focused:focus {
        background-image: linear-gradient(#FFB600, #FFB600), linear-gradient(#D2D2D2, #D2D2D2);
        background-size: 100% 2px, 100% 1px;
        background-color: #F0F0F0;
        background-position: center calc(100%);
        background-repeat: no-repeat;
        transition: background ease-in-out 0.5s;
    }

.validation-summary-errors span{
        font-weight:bold;
        padding-bottom:1.5rem;
    }

.filter-equality-not-equals {

    background-image: url("http://localhost:5118/images/logos/trustquay.png");
}

.filter-equality-not-equals:before {
        content: "\25AE";
        font-family: FontAwesome;
        left: -5px;
        position: absolute;
        top: 0;
    }

:root {
    --font-sailec: "Sailec-Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    --font-opensans: "OpenSans-Regular", "Sailec-Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    --brand-500: #E74E0F;
}

@font-face {
    font-family: 'OpenSans-Regular';
    src: url("/fonts/OpenSans/Regular/OpenSans-Regular.eot");
    src: url("/fonts/OpenSans/Regular/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/OpenSans/Regular/OpenSans-Regular.woff") format("woff"), url("/fonts/OpenSans/Regular/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url("/fonts/OpenSans/Semibold/OpenSans-Semibold.eot");
    src: url("/fonts/OpenSans/Semibold/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"), url("/fonts/OpenSans/Semibold/OpenSans-Semibold.woff") format("woff"), url("/fonts/OpenSans/Semibold/OpenSans-Semibold.ttf") format("truetype");
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url("/fonts/OpenSans/Bold/OpenSans-Bold.eot");
    src: url("/fonts/OpenSans/Bold/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/OpenSans/Bold/OpenSans-Bold.woff") format("woff"), url("/fonts/OpenSans/Bold/OpenSans-Bold.ttf") format("truetype");
}

@font-face {
    font-family: 'Sailec-Light';
    src: url("/fonts/330DC7_6_0.eot");
    src: url("/fonts/330DC7_6_0.eot?#iefix") format("embedded-opentype"), url("/fonts/330DC7_6_0.woff") format("woff"), url("/fonts/330DC7_6_0.ttf") format("truetype");
}

@font-face {
    font-family: 'Sailec-LightItalic';
    src: url("/fonts/330DC7_7_0.eot");
    src: url("/fonts/330DC7_7_0.eot?#iefix") format("embedded-opentype"), url("/fonts/330DC7_7_0.woff2") format("woff2"), url("/fonts/330DC7_7_0.woff") format("woff"), url("/fonts/330DC7_7_0.ttf") format("truetype");
}

@font-face {
    font-family: 'Sailec-Medium';
    src: url("/fonts/330DC7_8_0.eot");
    src: url("/fonts/330DC7_8_0.eot?#iefix") format("embedded-opentype"), url("/fonts/330DC7_8_0.woff2") format("woff2"), url("/fonts/330DC7_8_0.woff") format("woff"), url("/fonts/330DC7_8_0.ttf") format("truetype");
}

@font-face {
    font-family: 'Sailec-MediumItalic';
    src: url("/fonts/330DC7_9_0.eot");
    src: url("/fonts/330DC7_9_0.eot?#iefix") format("embedded-opentype"), url("/fonts/330DC7_9_0.woff2") format("woff2"), url("/fonts/330DC7_9_0.woff") format("woff"), url("/fonts/330DC7_9_0.ttf") format("truetype");
}

h1 {
    font-family: 'Proxima Nova Bold',var(--font-sailec);
}

h2 {
    font-family: 'Proxima Nova Regular',var(--font-sailec);
}

h3 {
   font-family: 'Proxima Nova Regular',var(--font-sailec);
}

h4 {
    font-family: 'Proxima Nova Regular',var(--font-sailec);
 }

body {
    font-family: 'Proxima Nova Medium',var(--font-opensans);
}

h1::before,
h2::before,
h3::before,
h4::before {
    content: '/';
    display: inline-block;
    margin-right: 4px; 
    color: var(--brand-500); 
}

.underline-50:before {
    position: absolute;
    left: 0;
    top: 1.2em;
    height: 0;
    width: 50px;
    content: '';
    border-top: 1px solid #FDB42B;
}

p {
    margin-bottom: 0.5rem;
}

p a {
        color: #337AB7;
        text-decoration: underline;
    }

p a:hover {
            color: #1B405F;
        }

@keyframes fade {
    from {
        opacity:1;
    }

    to {
        opacity: 0;
    }
}

.animate-fade-10 {
    opacity: 0;
    animation-name: fade;
    animation-duration: 10s;
}

.view-slide {
    view-transition-name: slide-it;
}

::view-transition-old(slide-it) {
    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
    //animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(slide-it) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
    //animation: 300ms ease-out both full-slide-from-right;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes slide-from-right {
    from {
        transform: translateX(90px);
    }
}

@keyframes slide-to-left {
    to {
        transform: translateX(-90px);
    }
}

.plaform-menu {
    left: -12rem;
    top: 0px;
    bottom: 0px;
    width: 15rem;
    transition: left 0.5s ease-in-out;
}

.plaform-menu.platform-menu-open {
        left: 0px;
    }

.plaform-menu .platform-menu-options {
        width: 12rem;
    }

.plaform-menu .platform-menu-bar {
        width: 3rem;
    }

.mask {
    -webkit-clip-path: polygon(40% 0, 90% 0, 60% 100%, 10% 100%);
            clip-path: polygon(40% 0, 90% 0, 60% 100%, 10% 100%);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

@media screen and (min-width: 320px) and (max-width: 768px) {

html {
        font-size: 14px
}
    }

.action {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: 20px 0px;
    position: relative;
    min-height: 100px;
}

.action.action-complete {
        opacity: 60%;
    }

.action .action-notice {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0,0,0,0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

.action .action-loading {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0,0,0,0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-animation: pulsate 2.5s ease-out;
        -webkit-animation-iteration-count: infinite;
        opacity: 0.3;
    }

.loader {
    display: none;
}

.htmx-request .loader {
    display: flex;
}

.htmx-request .loader-hide {
    display: none;
}

.htmx-request.loader {
    display: flex;
}

#menuToggler:checked ~ #mobile-menu {
    width: 380px; /* Default width for larger screens */
}

@media screen and (max-width: 380px) {
    #menuToggler:checked ~ #mobile-menu {
        width: 330px; /* Adjust the width for screens up to 375px (small screens) */
    }
    @media screen and (max-width: 320px) {
        #menuToggler:checked ~ #mobile-menu {
            width: 315px; /* Adjust the width for screens up to 375px (small screens) */
        }
    }
}

.pulse {
    -webkit-animation: pulsate 2.5s ease-out;
    -webkit-animation-iteration-count: infinite;
}

.header-color-band {
    border-bottom: 5px solid;
    -o-border-image: linear-gradient( to right, #A13B16, #A13B16 25%, #E74E0F 25%, #E74E0F 50%, #D9863D 50%, #D9863D 75%, #726F70 75% );
       border-image: linear-gradient( to right, #A13B16, #A13B16 25%, #E74E0F 25%, #E74E0F 50%, #D9863D 50%, #D9863D 75%, #726F70 75% );
    border-image-slice: 1;
}