:root {
    --color-orange:#ff4500;
    --color-orange-subtle: #fff8f5;
    --color-orange-rgb:255,69,0;
    --color-dark-orange:#CC3600;
    --color-darkgrey:#30404a;
    --color-mediumgrey:#8C9296;
    --color-lightgrey:#a3abb0;
    --color-smokegrey:#F5F5F5;
    --color-bluegrey:#0171A2;
    --color-bluegrey-subtle: #e2ebef;
    --color-sand: #aa946c;
    --color-sand-subtle: #f3eee4;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

/* -------------- ui --------------------------- */
.bg-opacity-25 {
    --bs-bg-opacity: 0.25 !important;
}

/* -------------- transitions ------------------ */
.anime-opacity {-webkit-transition: opacity 0.2s ease-in-out;-moz-transition: opacity 0.2s ease-in-out;-o-transition: opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out}
.anime-height {-webkit-transition: height 0.2s ease-in-out;-moz-transition: height 0.2s ease-in-out;-o-transition: height 0.2s ease-in-out;transition:height 0.2s ease-in-out}
.anime-background {-webkit-transition: background 0.2s ease-in-out;-moz-transition: background 0.2s ease-in-out;-o-transition: background 0.2s ease-in-out;transition:background 0.2s ease-in-out}
.anime-transform {-webkit-transition: transform 0.2s ease-in-out;-moz-transition: transform 0.2s ease-in-out;-o-transition: transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out}
.anime-color {-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition:color 0.2s ease-in-out}

.anime-border {
    -webkit-transition: border-color 0.2s ease-in-out;
    -moz-transition: border-color 0.2s ease-in-out;
    -o-transition: border-color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out
}

.anime-all {
    -webkit-transition: all 0.2s ease-in-out !important;
    -moz-transition: all 0.2s ease-in-out !important;
    -o-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important
}
.fadein { -webkit-animation: fadein 500ms;-moz-animation: fadein 500ms;-ms-animation: fadein 500ms;-o-animation: fadein 500ms;animation: fadein 500ms}

.scroll-smooth {
    scroll-behavior: smooth;
}

/*** padding ***/
.py-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.py-7 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
}


/*** width ***/
.max-content {
    width: max-content!important;
}

.w-66 {
    width: 66% !important;
}

.w-60 {
    width: 60% !important;
}

.w-3vw {
    width: 3vw;
}

.w-4vw {
    width: 4vw;
}

.w-20vw {
    width: 20vw;
}

.w-25vw {
    width: 25vw;
}

.w-34vw {
    width: 34vw;
}

/*** top ***/
.top-2rem {
    top: 2rem !important;
}
.top-3rem {
    top: 3rem !important;
}

.top-4rem {
    top: 4rem !important;
}
.top-5rem {
    top: 5rem !important;
}


/*** modal scroller ***/
.modal-dialog.modal-xxl {
    max-width: 90%;
}

.minw-3rem {
    min-width: 3rem;
}

.maxh-85vh {
    max-height: 85vh;
}

.maxh-60vh {
    max-height: 60vh;
}

.maxh-40vh {
    max-height: 40vh;
}

.maxh-30vh {
    max-height: 30vh;
}


.h-85vh {
    height: 85vh;
}

.h-40vh {
    height: 40vh;
}

.z-1015 {
    z-index: 1015 !important;
}

.z-1025 {
    z-index: 1025 !important;
}
.z-1030 {
    z-index: 1030 !important;
}
.z-1035 {
    z-index: 1035 !important;
}

.z-1040 {
    z-index: 1040 !important;
}
.z-1045 {
    z-index: 1045 !important;
}

.z-1050 {
    z-index: 1050 !important;
}

.z-2000 {
    z-index: 2000 !important;
}

.fw-semi {font-weight: 600}
.xsmall {font-size: 0.75em}

.pastille-3rem {
    width: 3rem;
    height: 3rem;
}

.pastille {
    width: 2rem;
    height: 2rem;
}

.pastille-4 {
    width: 1.5rem;
    height: 1.5rem;
}

.text-white a {
    color: #FFFFFF !important;
}

.sticky-bottom {
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    z-index: 1020;
}

.triangle-orange-te::after {
    background: url(/themes/baticloud/assets/flags/triangle-orange.svg);
    content: " ";
    width: 15%;
    height: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

.indic {
    width: 1rem;
    height: 1rem;
    transform: translate(-50%,-50%) rotate(45deg) !important;
    opacity: 0;
    top: 60%;
}

.indic.show {
    opacity: 1;
    top: 100%;
}

.bg-light-orange {
    background: var(--color-orange-subtle) !important;
}

.bg-smokegrey {
    background: var(--color-smokegrey) !important;
}

.bg-darkgrey {
    background: var(--color-darkgrey) !important;
}

.bg-baticloud {
    --bs-bg-opacity:1;
    background-color: rgba(var(--color-orange-rgb),var(--bs-bg-opacity));
}

.border-baticloud {
    border-color: var(--color-orange) !important;
}

.border-smokegrey {
    border-color: var(--color-smokegrey) !important;
}

.border-lightgrey {
    border-color: var(--color-lightgrey) !important;
}

.border-bottom.border-dotted {
    border-bottom-style: dotted !important;
}

.text-dark-orange {
    color:var(--color-dark-orange)
}

.text-baticloud,.link-baticloud {
    color: var(--color-orange);
}

.link-baticloud:hover {
    color: var(--color-orange);
}

.btn-outline-baticloud {
    color: var(--color-orange);
    border-color: var(--color-orange);
}
.btn-outline-baticloud:hover,.btn-outline-baticloud.active {
    background: var(--color-orange);
    color: #FFFFFF;
}

.btn-baticloud {
    color: #FFFFFF;
    background-color: var(--color-orange);
}
.btn-baticloud:hover,.btn-outline-baticloud.active {
    background: var(--color-dark-orange);
    color: #FFFFFF;
}

.btn-light-baticloud {
    --bs-btn-color: RGBA(var(--bs-secondary-rgb),1);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: rgba(var(--color-orange-rgb),1);
    --bs-link-color-rgb:rgba(var(--color-orange-rgb),1);
    --bs-link-hover-color-rgb:var(--color-orange-rgb);
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: rgba(var(--color-orange-rgb),1);
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: none;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: rgba(var(--bs-secondary-rgb),0.5);
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: none;
}

.form-check-baticloud:checked {
    background-color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
}

.form-check-success:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.form-check-warning:checked {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.form-check-danger:checked {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.scale-hover:hover {
    scale: 1.03;
    box-shadow: var(--bs-box-shadow-sm) !important;
}


.shadow-secondary {
    box-shadow: 0 0 5px 1px var(--bs-gray-500);
}

.underline {
    width: 4rem;
    max-width: 60px;
    border-bottom: 3px solid var(--color-orange);
    display: block;

}

.underline.underline-sm {
    width: 2.5rem;
}

.hover:hover,.hover:hover a {
    background:var(--color-smokegrey);
    /*color: #FFFFFF !important;*/
}

/*** slick slider ***/
.dgdManager .slick-list {
    overflow: clip!important;
}


#documentsManager .slick-slider .slick-list,.slick-slider.slick-h100 .slick-list {
    height: 100% !important;
}

#documentsManager .slick-slider .slick-list .slick-track,.slick-slider.slick-h100 .slick-list .slick-track {
   height: 100% !important;
}



/*** bs list-group ***/
.list-group-item.active {
    background: var(--color-orange);
    border-color: var(--color-orange);
}


/*** nav-tabs ***/
li.nav-item {margin-top: -1px}
.nav-tabs .nav-link {
    border: none;
}
.nav-tabs .nav-link:hover {
    border: none;
    border-bottom: 2px solid var(--bs-secondary);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--color-orange) !important;
    background-color: transparent!important;
    border: none;
    border-bottom: 2px solid var(--color-orange) !important;
}

.nav-tabs .nav-link.disabled {
    opacity: 0.3!important;
}


/*** pac container (google maps autocomplete) ***/
.pac-container {
    z-index: 2000;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*** filtres ***/
.filtered .dropdown-toggle {
    color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
}
.filtre.active {
    background: var(--color-orange);
}
.filtre.active .text-baticloud {
    color: #FFFFFF !important;
}

/*** configuration ***/
.btn-setup {
    color: var(--color-mediumgrey);
    text-decoration: none;
}

.btn-setup:hover,.btn-setup.active {
    color: var(--color-orange);
    text-decoration: none;
}


.fs-big {
    font-size: 2rem;
}

@media (min-width: 992px) {

    .fs-big {
        font-size: 4rem;
    }


    .me-lg-6 {
       margin-right: rem !important;
    }
    .ms-lg-6 {
       margin-left: 5rem !important;
    }
    .mb-lg-6 {
       margin-bottom: 5rem !important;
    }
    .mt-lg-6 {
       margin-top: 5rem !important;
    }
    .my-lg-6 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .pe-lg-6 {
        padding-right: rem !important;
    }
    .ps-lg-6 {
        padding-left: 5rem !important;
    }
    .pb-lg-6 {
        padding-bottom: 5rem !important;
    }
    .pt-lg-6 {
        padding-top: 5rem !important;
    }
    .py-lg-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .pe-lg-10 {
        padding-right: 10rem !important;
    }
    .ps-lg-10 {
        padding-left: 10rem !important;
    }
    .pb-lg-10 {
        padding-bottom: 10rem !important;
    }
    .pt-lg-10 {
        padding-top: 10rem !important;
    }
    .py-lg-10 {
        padding-top: 10rem !important;
        padding-bottom: 10rem !important;
    }

    .pe-lg-7 {
        padding-right: 7rem !important;
    }
    .ps-lg-7 {
        padding-left: 7rem !important;
    }
    .pb-lg-7 {
        padding-bottom: 7rem !important;
    }
    .pt-lg-7 {
        padding-top: 7rem !important;
    }
    .py-lg-7 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}