:root {
    --serif-font: serif;
    --sans-serif-font: sans-serif;
    --font-size-title: 2rem;
    --timer: 11.5s;

    /* Custom Colors */
    --main-color: #162b48;
    --main-color-acc: #244675;
    --secondary-color: #5CE1E6;
    --secondary-color-acc: #4ec3c7;
    --secondary-color-acc2: #429ea1;
    --third-color: #90DDBB;
    --third-color-acc: #76b69a;
    --third-color-acc2: #5e927c;
    --third-color-transparent: #262E2399;
    --sidebar-bg-color: #6EC1E4;
    --sidebar-link-bg: #248E82;
    --footer-bg-color: #757575;
    --nav-bg: #F6F6F6;
    --nav-border: #6D8466;

    --gray-1: #EEEEEE;
    --gray-2: #DDDDDD;
    --gray-3: #CCCCCC;
    --gray-4: #BBBBBB;
    --gray-5: #AAAAAA;
    --gray-6: #999999;
    --gray-7: #888888;
    --gray-8: #888888;
    --gray-9: #777777;
    --gray-10: #666666;
    --gray-11: #555555;
    --gray-12: #444444;
    --gray-13: #333333;
    --gray-14: #222222;
    --gray-15: #111111;

    --filter-main-color: invert(80%) sepia(33%) saturate(4605%) hue-rotate(319deg) brightness(100%) contrast(97%);
    --filter-red: invert(20%) sepia(86%) saturate(6385%) hue-rotate(357deg) brightness(96%) contrast(122%);

    --linear: linear-gradient(to left,
            #5CE1E6AA,
            #90DDBBAA 50%,
            #5CE1E6AA 100%)
}

/***** DOM Elements *****/
html {
    height: -webkit-fill-available;
}

body {
    font-family: "Arvo", Sans-serif;
    min-height: 100vh;
}

footer {}

/***** Ids *****/

#logout {
    width: auto;
    margin-bottom: 1em;
    color: white;
    cursor: pointer;
    position: absolute;
    bottom: 0;

    * {
        cursor: pointer;
    }
}

/***** Classes *****/
.container {
    min-height: 100vh;
}

.text-xxs {
    font-size: 0.3em;
}

.text-xs {
    font-size: 0.5em;
}

.text-s {
    font-size: 0.8em;
}

.text-m {
    font-size: 1em;
}

.text-l {
    font-size: 1.2em;
}

.text-xl {
    font-size: 1.5em;
}

.text-xxl {
    font-size: 2em;
}

.s-font {
    font-family: "Seagram-tfb", Sans-serif !important;
}

.fty-font {
    font-family: "FTY-STRATEGYCIDE-NCV", Sans-serif !important;
}

.arvo-font {
    font-family: "Arvo", Sans-serif !important;
}

.btn {
    background-color: var(--third-color);
    border-color: var(--main-color);

    &:hover,
    &:focus {
        background-color: var(--third-color-acc);
        border-color: var(--main-color-acc);
        color: white;
    }

    &:active {
        background-color: var(--third-color-acc2) !important;
        border-color: var(--main-color-acc) !important;
    }
}

.msg_content {
    color: white;
}

.main {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    max-height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
}

.navbar {
    position: absolute;
    z-index: 99;
    width: 100%;
    background-color: var(--nav-bg);

    .navbar-brand {
        img {
            max-width: 150px;
            max-height: 100px;
        }
    }
}

.main-container {
    flex: 1;
}

/***** Multiple *****/



/***** Imported Components *****/

/** Custom Toasts **/
#toast {
    position: fixed;
    margin: 20px 20px auto 0;
    right: 0;
    top: 0;
    z-index: 999;
}

/** Custom Scroll **/
.custom-scroll {
    position: relative;

    .custom-grid {
        padding: 20px 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(320px, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        color: black;
        column-gap: 30px;
        scrollbar-color: red;
        /*background: var(--nav-bg);*/

        .custom-card {
            text-decoration: none;
            transition: all 0.3s ease;
            text-align: left;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            padding: 1rem;

            .card-img {
                height: 200px;
                overflow: hidden;
                border-radius: 10px;

                img {
                    min-height: 200px;
                    width: auto;
                    max-width: 100%;
                }
            }

            .custom-head {
                text-align: center;
            }

            .card-body {
                margin-top: 0.7em;

                .card-descr {
                    color: black;
                }
            }


            i {
                display: flex;
                justify-content: center;
            }

            i::before {
                font-size: 5rem;
            }

        }
    }

    .tr-top {
        .custom-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
        }
    }

    .tr-zoom {

        overflow: hidden;

        .custom-card:hover {
            transform: scale(1.05);
        }
    }

    .custom-grid::-webkit-scrollbar-track {
        background: transparent;
    }


    /* Flèches */
    .scroll-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: rgba(0, 0, 0, 0.35);
        color: white;
        font-size: 2rem;
        width: 50px;
        height: 50px;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 2;
        border-radius: 100%;

        svg {
            height: 50px;
            width: 50px;
            fill: var(--main-color);
        }
    }

    .scroll-arrow.left {
        left: 5px;
    }

    .scroll-arrow.right {
        right: 5px;
    }

    /* Visible */
    .scroll-arrow.visible {
        opacity: 1;
        pointer-events: auto;
    }

}



/***** Media querys *****/

/** Max-width **/
@media (max-width: 1399px) {}

@media (max-width: 1199px) {}

@media (max-width: 991px) {}

@media (max-width: 767px) {}

@media (max-width: 575px) {}

/** Min-width **/
@media (min-width: 1399px) {}

@media (min-width: 1199px) {}

@media (min-width: 991px) {}

@media (min-width: 767px) {}

@media (min-width: 575px) {}