:root {
    --purple: #842780;
    --gray-chateau: #757575;
    --light-gray: #dedede;
    --yellow: #f6c02c;
    --gray: #636364;
    --very-dark-gray: #5F5F5F;
    --divider: rgba(95, 95, 95, 0.5);
    --text-big-font-weight: 600;
}

.note-editing-area {
    background-color: white;
}

.hidden {
    display: none !important;
}

.disabled {
}

.input-container.disabled input {
    pointer-events: none !important;
    opacity: .6;
}


.icon-check-circle-fill {
    color: #1ca541;
}

.icon-x-circle-fill {
    color: #d81f1f;
}

.icon-exclamation-circle-fill {
    color: #f1a42b;
}

.validation-icon-wrapper {
    position: absolute;
    right: 12px;
    top: calc(50% - 10px);
    font-size: 20px;
    transition: all ease .2s;
}

    .validation-icon-wrapper.success, .validation-icon-wrapper.error, .validation-icon-wrapper.warning {
        animation: popUpHide 3s forwards;
    }

    .validation-icon-wrapper > [class*='icon-'] {
        display: none;
    }

    .validation-icon-wrapper.success > .icon-check-circle-fill {
        display: block;
    }

    .validation-icon-wrapper.error > .icon-x-circle-fill {
        display: block;
    }

    .validation-icon-wrapper.warning > .icon-exclamation-circle-fill {
        display: block;
    }

button {
    cursor: pointer;
}

    button.positive,
    a.positive {
        background-color: #4993d3;
        color: white;
        border-radius: 25px;
        border: none;
        padding: 8px 24px;
        outline: none;
        text-decoration: none;
        box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.30);
        transition: all ease-in-out .2s;
    }

        button.positive:hover,
        a.positive:hover {
            background-color: #609fd5;
            box-shadow: 0px 3px 4px rgba(31, 31, 31, 0.30);
            color: white;
        }

    button.positive-secondary,
    a.positive-secondary {
        background-color: #eaf7ff;
        color: #3899ec;
        border-radius: 25px;
        border: none;
        padding: 8px 24px;
        outline: none;
        text-decoration: none;
        box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.30);
        transition: all ease-in-out .2s;
    }

        button.positive-secondary:hover,
        a.positive-secondary:hover {
            background-color: #d1edff;
            box-shadow: 0px 3px 4px rgba(31, 31, 31, 0.30);
        }

    button.orange,
    a.orange {
        background-color: #ff7d00;
        color: white;
        border-radius: 25px;
        border: none;
        padding: 8px 24px;
        outline: none;
        text-decoration: none;
        box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.30);
        transition: all ease-in-out .2s;
    }

        button.orange:hover,
        a.orange:hover {
            background-color: #ff9937;
            box-shadow: 0px 3px 4px rgba(31, 31, 31, 0.30);
        }


    button.white,
    a.white {
        background-color: #ffffff;
        color: #747474;
        border-radius: 25px;
        border: none;
        padding: 8px 24px;
        outline: none;
        text-decoration: none;
        box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.30);
        transition: all ease-in-out .2s;
    }

        button.white:hover,
        a.white:hover {
            background-color: #eef8ff;
            box-shadow: 0px 3px 4px rgba(31, 31, 31, 0.30);
        }

    button.disabled,
    a.disabled {
        pointer-events: none;
        filter: grayscale(1);
        opacity: .7;
        /*background-color: rgb(242, 242, 242);*/
        user-select: none;
    }

.modal > .header > .icon-x {
    color: white;
    background-color: rgba(53, 53, 53, 0.25);
    border-radius: 50%;
    padding: 4px;
    font-size: 22px;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

    .modal > .header > .icon-x:hover {
        background-color: rgba(53, 53, 53, 0.5);
    }

@keyframes popUpHide {
    0% {
        transform: scale(.25);
        opacity: 0;
    }

    5% {
        transform: scale(1);
        opacity: 1;
    }

    90% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(.25);
        opacity: 0;
    }
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

section > h1, section > h2, section > h3, section > h4, section > h5 {
    font-family: 'MavenPro-Black';
    color: var(--very-dark-gray);
}

.horizontal_divider {
    height: 1px;
    background-color: var(--divider);
}

.horizontal_spacer {
    height: 30px;
}

.button {
    font-family: Arial;
    font-weight: bold;
    font-size: 10px;
    padding: 0px 20px;
    height: 40px;
    border: none;
    border-radius: 4px;
}

    .button.solid.purple {
        background-color: var(--purple);
        color: var(--yellow);
    }

    .button.solid.white {
        background-color: white;
        color: var(--purple);
    }

    .button.solid.blue {
        background-color: blue;
        color: var(--purple);
    }

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    /*background: #f1f1f1;*/
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


.miniScrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.miniScrollbar::-webkit-scrollbar-thumb {
    background-color: transparent;
    width: 5px;
    height: 6px;
}

.miniScrollbar:hover::-webkit-scrollbar-thumb {
    background-color: #949494;
}

/*============================================================================================================================*/
.VUoKZ {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1001;
}

.VUoKZ {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1001;
}

.TRHLAc {
    position: absolute;
    top: 0px;
    left: 0;
    width: 25%;
    height: 100%;
    background: #8a0088;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.mIM26c .VUoKZ {
    display: block;
}

.mIM26c .TRHLAc {
    -webkit-animation: boqChromeapiPageProgressAnimation 1s infinite;
    animation: boqChromeapiPageProgressAnimation 1s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.4,0.0,1,1);
    animation-timing-function: cubic-bezier(0.4,0.0,1,1);
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.ghyPEc .VUoKZ {
    position: fixed;
    top: 40px;
    max-width: 1024px;
    margin: 0 auto;
    overflow-x: hidden;
}

@keyframes boqChromeapiPageProgressAnimation {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

    50% {
        -webkit-transform: scaleX(5);
        transform: scaleX(5);
    }

    to {
        -webkit-transform: scaleX(5) translateX(100%);
        transform: scaleX(5) translateX(100%);
    }
}

@-webkit-keyframes boqChromeapiPageProgressAnimation {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

    50% {
        -webkit-transform: scaleX(5);
        transform: scaleX(5);
    }

    to {
        -webkit-transform: scaleX(5) translateX(100%);
        transform: scaleX(5) translateX(100%);
    }
}


/*============================================================================================================================*/

.backdrop {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    backdrop-filter: blur(2px);
    filter: blur(2px);
    -webkit-filter: blur(2px);
    z-index: 11;
    opacity: 0;
    pointer-events: none;
    transition: all .2s ease;
}

    .backdrop.visible {
        opacity: 1;
    }

.loader {
    display: none;
    position: absolute;
    z-index: 12;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

    .loader.visible {
        display: flex;
    }

    .loader > .loader-modal {
        position: relative;
        min-height: 200px;
        min-width: 300px;
        background-color: white;
        box-shadow: 0 1px 5px 0 rgba(41,85,115,.21);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        padding: 20px;
    }

    .loader.visible > .loader-modal {
        animation: modalPopUp .15s;
    }

    .loader > .loader-modal > .title {
        font-family: 'Avenir-Medium';
        font-weight: bold;
        font-size: 18px;
    }

    .loader > .loader-modal > .message {
        font-family: 'Avenir-Medium';
        font-size: 14px;
    }

.ui-sortable-helper {
    box-shadow: 0px 0px 10px rgba(98, 98, 98, 0.20);
}

.ui-sortable-placeholder {
    background-color: #f2f2f2 !important;
    visibility: visible !important;
    box-shadow: inset 0px -1px 3px rgba(82, 82, 82, 0.30);
    position: relative;
    flex-shrink: 0;
}

    .ui-sortable-placeholder::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        /*border: 2px solid #2796ff;*/
        pointer-events: none;
    }


/*=============================================================================================
ICONS
=============================================================================================*/
@font-face {
    font-family: 'bw-icons';
    src: url('fonts/bw-icons.eot?oig8rw');
    src: url('fonts/bw-icons.eot?oig8rw#iefix') format('embedded-opentype'), url('fonts/bw-icons.ttf?oig8rw') format('truetype'), url('fonts/bw-icons.woff?oig8rw') format('woff'), url('fonts/bw-icons.svg?oig8rw#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="bw-icon-"], [class*=" bw-icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'bw-icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bw-icon-file-text:before {
    content: "\e95d";
}

.bw-icon-info:before {
    content: "\e95e";
}

.bw-icon-log-in:before {
    content: "\e95f";
}

.bw-icon-log-out:before {
    content: "\e960";
}

.bw-icon-mail:before {
    content: "\e961";
}

.bw-icon-map:before {
    content: "\e962";
}

.bw-icon-map-pin:before {
    content: "\e963";
}

.bw-icon-message-circle:before {
    content: "\e964";
}

.bw-icon-message-square:before {
    content: "\e965";
}

.bw-icon-phone:before {
    content: "\e966";
}

.bw-icon-arrow-down:before {
    content: "\e959";
}

.bw-icon-arrow-left:before {
    content: "\e95a";
}

.bw-icon-arrow-right:before {
    content: "\e95b";
}

.bw-icon-arrow-up:before {
    content: "\e95c";
}

.bw-icon-cart:before {
    content: "\e91f";
}

.bw-icon-cart-solid .path1:before {
    content: "\e920";
    color: rgb(179, 179, 179);
}

.bw-icon-cart-solid .path2:before {
    content: "\e921";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path3:before {
    content: "\e922";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path4:before {
    content: "\e923";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path5:before {
    content: "\e924";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path6:before {
    content: "\e925";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path7:before {
    content: "\e926";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path8:before {
    content: "\e927";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path9:before {
    content: "\e928";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path10:before {
    content: "\e929";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path11:before {
    content: "\e92a";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path12:before {
    content: "\e92b";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path13:before {
    content: "\e92c";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path14:before {
    content: "\e92d";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path15:before {
    content: "\e92e";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path16:before {
    content: "\e92f";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path17:before {
    content: "\e930";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path18:before {
    content: "\e931";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path19:before {
    content: "\e932";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path20:before {
    content: "\e933";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path21:before {
    content: "\e934";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path22:before {
    content: "\e935";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path23:before {
    content: "\e936";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path24:before {
    content: "\e937";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path25:before {
    content: "\e938";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path26:before {
    content: "\e939";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path27:before {
    content: "\e93a";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path28:before {
    content: "\e93b";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path29:before {
    content: "\e93c";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path30:before {
    content: "\e93d";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path31:before {
    content: "\e93e";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path32:before {
    content: "\e93f";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path33:before {
    content: "\e940";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path34:before {
    content: "\e941";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path35:before {
    content: "\e942";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path36:before {
    content: "\e943";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path37:before {
    content: "\e944";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path38:before {
    content: "\e945";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path39:before {
    content: "\e946";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path40:before {
    content: "\e947";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path41:before {
    content: "\e948";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path42:before {
    content: "\e949";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path43:before {
    content: "\e94a";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path44:before {
    content: "\e94b";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path45:before {
    content: "\e94c";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path46:before {
    content: "\e94d";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path47:before {
    content: "\e94e";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path48:before {
    content: "\e94f";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path49:before {
    content: "\e950";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path50:before {
    content: "\e951";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path51:before {
    content: "\e952";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path52:before {
    content: "\e953";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path53:before {
    content: "\e954";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path54:before {
    content: "\e955";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path55:before {
    content: "\e956";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-cart-solid .path56:before {
    content: "\e957";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-multiple-cart:before {
    content: "\e958";
}

.bw-icon-customer-account:before {
    content: "\e919";
}

.bw-icon-ps-account:before {
    content: "\e91a";
}

.bw-icon-folder:before {
    content: "\e91b";
}

.bw-icon-folder-solid .path1:before {
    content: "\e91c";
    color: rgb(179, 179, 179);
}

.bw-icon-folder-solid .path2:before {
    content: "\e91d";
    margin-left: -1em;
    color: rgb(179, 179, 179);
}

.bw-icon-folder-solid .path3:before {
    content: "\e91e";
    margin-left: -1em;
    color: rgb(204, 204, 204);
}

.bw-icon-heart-narrow:before {
    content: "\e918";
}

.bw-icon-chevron-down:before {
    content: "\e905";
}

.bw-icon-chevron-left:before {
    content: "\e906";
}

.bw-icon-chevron-right:before {
    content: "\e907";
}

.bw-icon-chevron-up:before {
    content: "\e908";
}

.bw-icon-close:before {
    content: "\e909";
}

.bw-icon-account:before {
    content: "\e900";
}

.bw-icon-bag:before {
    content: "\e901";
}

.bw-icon-bw-icon:before {
    content: "\e902";
}

.bw-icon-camera:before {
    content: "\e903";
}

.bw-icon-card:before {
    content: "\e904";
}

.bw-icon-edit:before {
    content: "\e90a";
}

.bw-icon-facebook:before {
    content: "\e90b";
}

.bw-icon-gear:before {
    content: "\e90c";
}

.bw-icon-heart:before {
    content: "\e90d";
}

.bw-icon-instagram:before {
    content: "\e90e";
}

.bw-icon-item-bag:before {
    content: "\e90f";
}

.bw-icon-minus-circle:before {
    content: "\e910";
}

.bw-icon-planner:before {
    content: "\e911";
}

.bw-icon-plus-circle:before {
    content: "\e912";
}

.bw-icon-search:before {
    content: "\e913";
}

.bw-icon-trash:before {
    content: "\e914";
}

.bw-icon-twitter:before {
    content: "\e915";
}

.bw-icon-user:before {
    content: "\e916";
}

.bw-icon-youtube:before {
    content: "\e917";
}


/*.fields {
    display: flex;
    margin: 0 -4px;
    width: 100%;
}

    .fields > * {
        flex-grow: 1;
        margin: 4px;
    }

.field {
    margin: 0 -4px;
    width: 100%;
}*/

/*.field > * {
        margin: 4px;
    }*/

/*.field:not(:last-of-type),
    .fields:not(:last-of-type) {
        margin-bottom: 8px !important; 
    }*/

.input {
    display: flex;
    flex-direction: column;
    font-family: 'Avenir-Roman';
}

    .input input,
    .input textarea {
        border: 1px solid #dbdbdb;
        border-radius: 4px;
        outline-color: #3899ec;
        padding: 8px;
    }

.price input::-webkit-outer-spin-button,
.price input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input input[type=number] {
    -moz-appearance: textfield;
    text-align: right;
}

input[type=number].no-spin-button::-webkit-outer-spin-button,
input[type=number].no-spin-button::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].no-spin-button {
    -moz-appearance: textfield;
}

.toggle {
    width: 110px;
}

    .toggle.no-label {
        width: 37px !important;
    }

    .toggle > input[type=checkbox] {
        display: none;
    }

    .toggle .desc {
        position: relative;
        height: 20px;
        display: flex;
        align-items: center;
    }

    .toggle > input[type=checkbox] ~ .desc::before {
        content: '';
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 40px;
        height: 20px;
        padding: 3px;
        border-radius: 15px;
        background-color: #7d8d9e;
        transition: background-color .2s ease-out 0s;
        margin: 0px;
        cursor: pointer;
    }

    .toggle > input[type=checkbox]:checked ~ .desc::before {
        background-color: #3fb536;
    }

    .toggle > input[type=checkbox] ~ .desc::after {
        content: attr(data-off);
        display: block;
        position: absolute;
        left: 45px;
        padding-left: 4px;
        overflow: hidden;
        opacity: 1;
        width: 140%;
        font-size: 11px;
        line-height: 1em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        text-align: left;
        transition: margin .2s ease-out 0s, opacity .2s ease-out 0s, color .2s ease-out 0s;
        cursor: pointer;
        font-weight: var(--text-big-font-weight, 600);
        top: 5px;
        color: #7d8d9e;
        height: 20px;
        /*width: auto;*/
    }

    .toggle > input[type=checkbox]:checked ~ .desc::after {
        content: attr(data-on);
        color: #3fb536;
    }

    .toggle > input[type=checkbox] ~ .desc > div {
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: #fff;
        transition: margin .2s ease-out 0s;
        z-index: 1;
        margin-left: 23px;
    }

    .toggle > input[type=checkbox]:checked ~ .desc > div {
        margin-left: 4px !important;
    }


@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}


/*SLIDER=============================================================================================*/
.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    width: 100%;
}

    /* Mouse-over effects */
    .slider:hover {
        opacity: 1; /* Fully shown on mouse-over */
    }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        width: 25px; /* Set a specific slider handle width */
        height: 25px; /* Slider handle height */
        background: #04AA6D; /* Green background */
        cursor: pointer; /* Cursor on hover */
    }

    .slider::-moz-range-thumb {
        width: 25px; /* Set a specific slider handle width */
        height: 25px; /* Slider handle height */
        background: #04AA6D; /* Green background */
        cursor: pointer; /* Cursor on hover */
    }

/*CUSTOM FORM=============================================================================================*/


.form .fields,
.form .two-fields,
.form .three-fields,
.form .four-fields,
.form .five-fields {
    display: flex;
    flex-direction: row;
    align-items: start;
}

    .form .fields > .input-field {
        flex-grow: 1;
    }

    .form .two-fields > .input-field {
        width: calc(50% - 12px);
        flex-grow: 1;
    }

    .form .three-fields > .input-field {
        width: calc(33.33% - 12px);
        flex-grow: 1;
    }

    .form .four-fields > .input-field {
        width: calc(25% - 12px);
        flex-grow: 1;
    }

    .form .five-fields > .input-field {
        width: calc(20% - 12px);
        flex-grow: 1;
    }

.input-field {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    margin: 4px 6px 20px 6px;
    outline: 1px solid #e2e2e2 !important;
    border-radius: 4px;
}


form.submitted .input-field:has(input:required:invalid),
form.submitted .input-field:has(textarea:required:invalid) {
    outline: 2px solid red !important;
}

    form.submitted .input-field:has(input:required:invalid) .input-field-label,
    form.submitted .input-field:has(textarea:required:invalid) .input-field-label {
        color: red;
    }

.input-field:focus-within {
    outline: 2px outset #383838 !important;
}

.input-field:not(.ui.dropdown):focus-within .input-field-label,
.input-field input:not(:placeholder-shown) ~ .input-field-label,
.input-field textarea:not(:placeholder-shown) ~ .input-field-label,
.input-field input:-webkit-autofill ~ .input-field-label,
.input-field textarea:-webkit-autofill ~ .input-field-label{
    top: -8px;
    font-size: 12px;
    transform: translate(0, 0);
    background-color: #fff;
    padding: 0 6px;
    right: unset;
    left: 8px;
    max-width: calc(100% - 24px);
    width: unset;
    min-width: 0;
}

.input-field.fixed-label > .input-field-label {
    top: -8px !important;
    font-size: 12px;
    transform: translate(0, 0);
    background-color: #fff;
    padding: 0 6px;
    right: unset;
    left: 8px;
    max-width: calc(100% - 24px);
    width: unset;
    min-width: 0;
}

.input-field.fixed-label:focus-within > input::placeholder {
    color: transparent;
}

.input-field:not(.ui.dropdown):focus-within .input-field-label {
    color: #000;
}

.input-field:focus-within .input-field-placeholder {
    opacity: 0;
    transform: scale(0);
}


/*.input-field:focus-within .input-field-label > .label-example,*/
.input-field input:not(:placeholder-shown) ~ .input-field-label > .label-example {
    opacity: 0;
}

.input-field > .input-field-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translate(0, -50%);
    font-family: 'Google Sans';
    color: rgb(112, 112, 112);
    letter-spacing: 1px;
    font-size: 14px;
    transition: all ease-in-out .2s;
    pointer-events: none;
    padding-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}


.input-field.textarea > .input-field-label {
    top: 36px;
}

.input-field > .input-field-label > .label-example {
    position: absolute;
    left: 0;
    top: 16px;
    width: 100%;
    white-space: nowrap;
    opacity: 1;
    transition: all ease-in-out .2s;
}

.input-field > .input-field-placeholder {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: scale(1);
    transform: translate(0, -50%);
    transition: all ease-in-out .3s;
    display: none;
}

.input-field > input,
.input-field > textarea,
.input-field > .text {
    border-color: transparent !important;
    border-radius: 8px;
    padding: 10px 12px 10px 12px;
    font-size: 16px;
    font-family: 'Google Sans';
    transition: all ease-in-out .2s;
    background-color: transparent;
    outline: none;
}


.input-field > textarea {
    margin-top: 30px;
    padding-top: 0px;
    background-attachment: local;
    background-image: linear-gradient(to right, white 10px, transparent 10px), linear-gradient(to left, white 10px, transparent 10px), repeating-linear-gradient(white, white 30px, #cccccc 30px, #cccccc 31px, white 31px);
    line-height: 31px;
    line-height: 31px;
    padding: 6px 10px;
    resize: vertical;
}

.input-field > .text {
    padding-bottom: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.input-field.ui.dropdown.floating button.visibility {
    position: absolute;
    right: 6px;
    bottom: 16px;
    font-size: 18px;
    transition: all ease-in-out .2s;
    cursor: default;
    padding: 0;
    color: #767676;
}

    .input-field.ui.dropdown.floating button.visibility.hasSelected {
        z-index: 1;
        cursor: pointer;
    }

.input-field.ui.dropdown.floating button.visibility {
    bottom: 50%;
    transform: translateY(50%);
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
}

    .input-field.ui.dropdown.floating button.visibility.isEmpty span {
        font-size: 20px;
    }

    .input-field.ui.dropdown.floating button.visibility.hasSelected:hover span {
        color: black;
    }

.input-field.ui.dropdown.floating button span {
    font-size: 18px;
}

.input-field.ui.dropdown.floating.active button.isEmpty {
    transform: rotate(180deg) translateY(-50%);
}

.input-field.ui.dropdown.floating > input {
    opacity: 0 !important;
    display: block !important;
}

.input-field.obstructed > input,
.input-field.editable > input {
    padding-right: 40px;
}


.input-field.obstructed button.visibility,
.input-field.editable button.visibility {
    position: absolute;
    right: 8px;
    top: 10px;
    font-size: 28px;
    opacity: 0;
    transform: scale(0);
    transition: all ease-in-out .2s;
    cursor: default;
    background-color: transparent;
    border: none;
    padding: 0;
}

.input-field.obstructed:focus-within button.visibility,
.input-field.obstructed:hover button.visibility,
.input-field.editable:focus-within button.visibility,
.input-field.editable:hover button.visibility {
    opacity: 1;
    transform: scale(1);
}

.input-field.obstructed button.visibility > span,
.input-field.editable button.visibility > span {
    font-size: 20px;
    color: #575757;
}

.social-button-group {
    width: 100%;
    display: flex;
}

    .social-button-group > button:not(:last-child) {
        margin-right: 12px;
    }

    .social-button-group > button {
        transition: all ease-in-out .3s;
    }

        .social-button-group > button:hover {
            opacity: .8;
            box-shadow: 0px 2px 3px rgba(105, 105, 105, 0.50);
        }

        .social-button-group > button.btn-facebook-login,
        .social-button-group > button.btn-google-login,
        .social-button-group > button.btn-apple-login {
            background-size: 1.122250486308544rem;
            height: 36px;
            max-width: 38.1565165344905rem;
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            outline: none;
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            color: transparent;
            border-radius: 4px;
            border: 2px solid rgba(0,0,0,0.05);
            background-repeat: no-repeat;
            background-position: center;
        }

        .social-button-group > button.btn-facebook-login {
            background-color: #1877f2;
            background-image: url('../../Content/images/facebook-icon.svg');
        }

        .social-button-group > button.btn-google-login {
            background-color: #fff;
            background-image: url('../../Content/images/google-icon.svg');
        }

        .social-button-group > button.btn-apple-login {
            background-color: #000;
            background-image: url('../../Content/images/apple-icon.svg');
            border: 2px solid rgba(255,255,255,0.05);
        }



.note-label {
    margin: -4px 6px 0 6px;
    font-size: 12px;
    color: #757575;
}


.note-label-divider {
    margin: 20px 6px 20px 6px;
    font-size: 14px;
    color: #757575;
    text-align: center;
    border-top: 1px solid #e2e2e2 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .note-label-divider > .text {
        margin-top: -10px;
        background-color: white;
        padding: 0 12px;
    }

/**SEMANTIC OVERRIDES==============================================================================================*/
.ui.dropdown > input:not(.search):first-child {
    display: unset !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: #575757;
    opacity: 1;
    display: block;
    background: url(images/calendar-icon.svg) no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    border-width: thin;
}


.error-container {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Google Sans';
    height: 100%;
    transform: translateY(-25%);
}

    .error-container > .error-code {
        font-size: 100px;
        font-weight: 500;
    }

    .error-container > .error-title {
        font-size: 32px;
        font-weight: 500;
    }

    .error-container > .error-message {
        margin-top: 12px;
        text-align: center;
    }

    .error-container > .buttons {
    }

        .error-container > .buttons > .button-home {
        }

#home-link {
    font-family: 'Google Sans';
    color: black;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    font-weight: 500;
}


@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    ::-webkit-scrollbar {
        width: 6px !important;
    }

     #home-link {
        font-size: 18px;
    }

    .nav-bar {
        padding: 8px !important;
    }

        .nav-bar .logo {
            height: 24px !important;
        }

    .form .fields,
    .form .two-fields,
    .form .three-fields,
    .form .four-fields,
    .form .five-fields {
        display: flex;
        flex-direction: row;
        align-items: start;
        flex-wrap: wrap;
    }

        .form .fields > .input-field,
        .form .two-fields > .input-field,
        .form .three-fields > .input-field,
        .form .four-fields > .input-field,
        .form .five-fields > .input-field {
            width: 100%;
            flex-grow: 1;
        }

    .floating-panel {
        position: fixed;
        top: 0px !important;
        left: 0px !important;
        bottom: 0px !important;
        right: 0px !important;
        width: unset !important;
        margin: 0px !important;
        padding-top: 50px;
    }

    .nav-bar-account-panel .bw-websites > .bw-websites-wrapper {
        justify-content: space-around;
    }

    .close-popup {
        display: block !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
}