:root {
    --color-primary: #4CAF50;
    --color-primary-dark: #357A38;
    --color-primary-light: #72CD76;
    --color-red: #AF4C4C;
    --color-white: #FFF;
    --color-background-dark: #F7F7F7;
    --color-accent: #FFFF33;
    --color-black: #222;
    --color-text-light: #888;
    --color-text-semi-light: #555;
    --color-text-disabled: #a9a9a9;
    --shadow-color: #bbb;
    --border-radius: 10px;
    --border-radius-round: 15px;
    --shadow-normal: 0 0 5px .01rem rgba(0,0,0,.15);
    --shadow-normal-upwards: 0 -5px 5px .02rem rgba(0,0,0,.15);
    --shadow-normal-downwards: 0 5px 5px .02rem rgba(0,0,0,.15);
    --shadow-intense: 0 0 5px .01rem rgba(0,0,0,.3);
}

mark {
    background: #FFFF3399;
    padding: 0;
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-LightItalic.ttf");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-MediumItalic.ttf");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-SemiBoldItalic.ttf");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-Black.ttf");
    font-weight: 900;
}

@font-face {
    font-family: Nunito;
    src: url("/asset/fonts/Nunito/Nunito-BlackItalic.ttf");
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: Rubik;
    src: url("/asset/fonts/Rubik/Rubik-Bold.ttf");
}

.primary {
    color: var(--color-primary) !important;
}
.danger{
    color: var(--color-red) !important;
}

.shadow {
    box-shadow: var(--shadow-normal);
}

body {
    font-family: Nunito;
}

.bg-white {
    background-color: var(--color-white);
}
.bg-grey {
    background-color: var(--color-background-dark);
}

.border-radius {
    border-radius: var(--border-radius);
}
input[name="driver"]:disabled ~ label{
    color: var(--color-text-disabled);
}
.bg-cover {
    z-index: -1;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
}

.bg-cover-companion {
    height: 100vh;
}

    .bg-cover-companion > div {
        height: 100%;
    }

.logo-login {
    width: 100%;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.right {
    float: right;
}

.pill {
    border: 1.5px solid var(--color-text-semi-light);
    padding: 7px;
    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: 50px;
    margin: 5px;
    font-weight: bold;
    transition: .5s all;
}

    .pill > span {
        display: inline-block;
        transition: .5s all;
    }

.pill-selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}

    .pill-selected > span {
        transform: rotate(45deg);
    }

.pagination > li > a {
    padding: 5px;
    margin: 5px;
}

.btn-link {
    color: var(--color-white);
    font-weight: bold;
}
.notification-count {
    background-color: var(--color-red);
    padding: 3px;
    color: var(--color-white);
    font-weight: bold;
    position: absolute;
    border-radius: 50px;
    font-size: 11px;
    right: -3px;
}
.pagination-button {
    display: inline-block;
    width: 50px;
    color: var(--color-primary);
    cursor: pointer;
}

    .pagination-button.active {
        color: var(--color-primary-dark);
        font-weight: bold;
        cursor: default;
    }

.productImage > img {
    max-height: 150px;
    max-width: 150px;
    margin: auto;
}

.text-right {
    text-align: right;
}

.loading-animation {
    display: inline-block;
    animation: spin 1s infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(359deg);
    }
}
blockquote {
    padding: 20px;
    background: var(--color-background-dark);
    border-radius: 15px;
    border-left: 3px solid var(--color-primary);
    font-size: 14px;
}
.accordion-button,
.accordion-button:not(.collapsed) {
    background: var(--color-white);
}
.accordion-button:focus,
.accordion-button:active {
    box-shadow: none;
    background: var(--color-white);
}
#toast {
    position: fixed;
    z-index: 99999;
    min-width: 100px;
    min-height: 50px;
    background: var(--color-background-dark);
    box-shadow: var(--shadow-intense);
    border: 1px solid var(--color-primary);
    border-radius: 50px;
    text-align: center;
    bottom: -100px;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 40%;
    transition: 1s all ease-in-out;
}
.category-toggle,
.subcategory-toggle {
    display: none;
    font-style: normal;
    padding: 10px;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

a {
    color: #357A38;
}

.bg-primary-dark {
    background: #357A38 !important;
}

nav li a, .dropdown-toggle, .nav-link, .dropdown-item, .dropdown-item a {
    color: #357A38;
}

.thead-dark,
.thead-dark th {
    background: #4CAF50 !important;
    color: #222 !important;
    border: none !important;
}

    .thead-dark a {
        color: white;
    }

.btn-primary {
    background-color: #4CAF50 !important;
    color: white !important;
    border: none !important;
}

.dropdown-item.active, .dropdown-item:active{
    background-color:var(--color-primary-dark)
}
.dropdown-item.active a, .dropdown-item:active a {
    color: var(--color-white);
    font-weight: bold;
}
.radio-input-container {
    background: #eee;
    border-radius: 50px;
    display: inline-block;
    margin:10px;
}
    .radio-input-container label{
        padding:10px;
        padding-left:0px;
    } 
    .radio-input-container input{
        margin-left:10px;
    }

input.input-validation-error {
    border-color: var(--color-red);
}
    input.input-validation-error:focus {
        border-color: var(--color-red);
        box-shadow: 0 0 0 .25rem rgba(175,76,76,.25);
    }
@keyframes ldio-l5g9ppq22f-o {
    0% {
        opacity: 1;
        transform: translate(0 0)
    }

    49.99% {
        opacity: 1;
        transform: translate(80px,0)
    }

    50% {
        opacity: 0;
        transform: translate(80px,0)
    }

    100% {
        opacity: 0;
        transform: translate(0,0)
    }
}

@keyframes ldio-l5g9ppq22f {
    0% {
        transform: translate(0,0)
    }

    50% {
        transform: translate(80px,0)
    }

    100% {
        transform: translate(0,0)
    }
}
.form-group{
    margin:1rem .5rem;
}
.ldio-l5g9ppq22f div {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 60px;
    left: 20px;
}

    .ldio-l5g9ppq22f div:nth-child(1) {
        background: #AF4C4C;
        animation: ldio-l5g9ppq22f 1s linear infinite;
        animation-delay: -0.5s;
    }

    .ldio-l5g9ppq22f div:nth-child(2) {
        background: #4CAF50;
        animation: ldio-l5g9ppq22f 1s linear infinite;
        animation-delay: 0s;
    }

    .ldio-l5g9ppq22f div:nth-child(3) {
        background: #AF4C4C;
        animation: ldio-l5g9ppq22f-o 1s linear infinite;
        animation-delay: -0.5s;
    }

.loadingio-spinner-dual-ball-dccm8u3eshc {
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
    background: rgba(31, 34, 35,.5);
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
}

.ldio-l5g9ppq22f {
    top: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
    right: 0;
    left: 0;
    width: 200px;
    height: 200px;
}

    .ldio-l5g9ppq22f div {
        box-sizing: content-box;
    }
.search-result-item:hover{
    background:var(--color-background-dark);
}