@media all and (max-width: 767px) {
    .title {
        font-size: 1rem !important;
    }

    .h-100-md-unset {
        height: 100% !important;
    }
}

@media all and (min-width: 768px) {
    .position-md-absolute {
        position: absolute !important;
    }

    .h-100-md-unset {
        height: unset !important;
    }
}

@media all and (min-width: 992px) {
    body * {
        scrollbar-width: thin !important;
    }

    #login {
        padding-top: 10%;
    }
}

:root {
    --doc-height: 100%;
}

html, body {
    padding: 0;
    margin: 0;
    height: 100vh; /* fallback for Js load */
    height: var(--doc-height);
}

body {
    overflow-wrap: break-word;
}

body * {
    font-size: .8rem;
}

.transition-ease {
    transition: all ease .3s;
}

.horizontal-scroll {
    white-space: nowrap;
    overflow-x: auto;
    transition: all ease .3s;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

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

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

.drag-z-index {
    z-index: 1000;
}

.icon {
    width: 1.5rem;
}

.rotate {
    animation: rotation 2s infinite linear;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.bg-hover-main:hover {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb),var(--bs-text-opacity)) !important;
}

/* COLORS */
    .bg-dark {
        background-color: #434343;
    }
    .bg-dark-contrast {
        background-color: #383b3f;
    }

    /* RED */
        .red .bg-main, .red .bg-hover-main:hover {
            background-color: #da0063;
        }

        /* 25% noir */
        .red .text-main {
            color: #a3004a;
        }

        .red .border-color {
            border-color: #da0063 !important;
        }

        .red .bg-second {
            background-color: #efe2e8;
        }

        .red .bg-second-dark {
            background-color: #e5cfd9;
        }

        /* 50% du clair sur le dark */
        .red .bg-second-contrast {
            background-color: #ead9e1;
        }
    /* RED END */

    /* PURPLE */
        .purple .bg-main, .purple .bg-hover-main:hover {
            background-color: #9510ac;
        }

        .purple .text-main {
            color: #9510ac;
        }

        .purple .border-color {
            border-color: #9510ac !important;
        }

        .purple .bg-second {
            background-color: #ebe3ec;
        }

        .purple .bg-second-dark {
            background-color: #ded1e0;
        }

        .purple .bg-second-contrast {
            background-color: #e7dae4;
        }
    /* PURPLE END */

    /* SPRUCE */
        .spruce .bg-main, .spruce .bg-hover-main:hover {
            background-color: #508022;
        }

        .spruce .text-main {
            color: #3c6019;
        }

        .spruce .border-color {
            border-color: #508022 !important;
        }

        .spruce .bg-second {
            background-color: #e7eae4;
        }

        .spruce .bg-second-dark {
            background-color: #d7dcd2;
        }

        .spruce .bg-second-contrast {
            background-color: #dfe3db;
        }
    /* SPRUCE END */


/* COLORS END */