.navbar, .sb-sidenav-menu {
    background-color: var(--main-theme-color) !important;
}

.sb-sidenav-footer {
    background-color: var(--second-theme-color) !important;
    color: rgba(0, 0, 0, 0.8)
}

@media screen and (min-width: 992px) {
    body {
        background-color: var(--main-theme-color);
    }

    main {
        background-color: white;
        border-radius: 80px 0 0 0;
        min-height: 100%;
        transition: border-radius .5s;
        
    }
    .borderless {
        border-radius: 0;
    }
}

/*
==================================================
=============== LOADER STYLES ====================
==================================================
*/

/* HTML: <div class="loader"></div> */

.loader__good--container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;

    background-color: rgba(var(--main-theme-color-rgb), .99);

    display: flex;
    align-items: center;
    justify-content: center;
}

.loader__good {
    width: 40px;
    aspect-ratio: 1;
    color: var(--second-theme-color);
    background: repeating-conic-gradient(from -47deg,#0000 0deg, currentColor 1deg 91deg,#0000 94deg 180deg);
    display: flex;
    animation: l12-0 2s infinite linear;
}

.loader__good::before,
.loader__good::after {
  content: "";
  flex: 1;
  background: currentColor;
  clip-path: polygon(0 0,100% 50%, 0 100%);
  animation: l12 1s infinite alternate;
  transform-origin: bottom left;
}
.loader__good::after {
  clip-path: polygon(100% 0,100% 100%,0 50%);
  transform-origin: top right;
}
@keyframes l12-0 {
    0%,49.9% {transform:scaleX( 1)}
    50%,100% {transform:scaleX(-1)}
}
@keyframes l12 {
    0%, 20%  {transform:rotate(0deg)}
    80%,100% {transform:rotate(-270deg)}
}

.preloader.small .loader__good--container {
    position: absolute;
    border-radius: 6px;
}

.preloader.below .loader__good--container {
    z-index: 200;
}

.preloader.on-top .loader__good--container {
    top: 0;
}

/* .preloader {
    width: 100%;
    height: 100%;
    background: rgba(179, 93, 17, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.preloader.small {
    position: absolute;
    border-radius: 6px;
}

.preloader.below {
    z-index: 200;
}

.scene .cube__face--left i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--left i:nth-child(2) {
    grid-area: 2 / 1 / 2 / 1;
}

.scene .cube__face--left i:nth-child(3) {
    grid-area: 3 / 1 / 3 / 1;
}

.scene .cube__face--left i:nth-child(4) {
    grid-area: 1 / 3 / 1 / 3;
}

.scene .cube__face--left i:nth-child(5) {
    grid-area: 2 / 3 / 2 / 3;
}

.scene .cube__face--left i:nth-child(6) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--right i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--right i:nth-child(2) {
    grid-area: 3 / 1 / 3 / 1;
}

.scene .cube__face--right i:nth-child(3) {
    grid-area: 2 / 2 / 2 / 2;
}

.scene .cube__face--right i:nth-child(4) {
    grid-area: 1 / 3 / 1 / 3;
}

.scene .cube__face--right i:nth-child(5) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--bottom i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--bottom i:nth-child(2) {
    grid-area: 3 / 1 / 3 / 1;
}

.scene .cube__face--bottom i:nth-child(3) {
    grid-area: 1 / 3 / 1 / 3;
}

.scene .cube__face--bottom i:nth-child(4) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--top i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--top i:nth-child(2) {
    grid-area: 2 / 2 / 2 / 2;
}

.scene .cube__face--top i:nth-child(3) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--back i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--back i:nth-child(2) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--front i:nth-child(1) {
    grid-area: 2 / 2 / 2 / 2;
}

.scene:after,
.scene .cube__face i:after {
    display: block;
    content: "";
    position: absolute;
}

.roll {
    margin-bottom: 100px;
    min-height: 30px;
}

.roll:hover .roll__three-d-box,
.roll:focus .roll__three-d-box {
    transform: translateZ(-25px) rotateX(90deg);
}

.roll__three-d-box {
    transition: all 0.3s ease-out;
    transform: translateZ(-25px);
    transform-style: preserve-3d;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.roll__three-d-box--front {
    transform: rotatex(0deg) translatez(14px);
}

.roll__three-d-box--back {
    transform: rotatex(-90deg) translatez(14px);
    background-color: #c0392b !important;
}

.roll:hover~div {
    transform: scale(0.7);
}

.roll:hover~div>div {
    animation-duration: 0.5s;
}

.scene {
    width: 200px;
    height: 200px;
    perspective: 600px;
    transition: 1.5s;
}

.scene input {
    display: none;
}

.scene input:checked+div {
    animation-play-state: paused;
    animation-duration: 0.5s;
}

.scene .cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    will-change: transform;
    animation: roll 8s linear infinite alternate;
}

.scene .cube__face {
    display: grid;
    grid-template: repeat(3, 45px)/repeat(3, 45px);
    border: 1px solid #3e1115;
    background: #8C2730;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 32.5px;
}

.scene .cube__face--front i::after {
    background: #e74c3c;
}

.scene .cube__face--back i::after {
    background: #1abc9c;
}

.scene .cube__face--top i::after {
    background: #2980b9;
}

.scene .cube__face--bottom i::after {
    background: #f1c40f;
}

.scene .cube__face--right i::after {
    background: #27ae60;
}

.scene .cube__face--left i::after {
    background: #9b59b6;
}

.scene .cube__face--front {
    transform: rotateY(0deg) translateZ(100px);
}

.scene .cube__face--back {
    transform: rotateY(90deg) translateZ(100px);
}

.scene .cube__face--left {
    transform: rotateY(180deg) translateZ(100px);
}

.scene .cube__face--right {
    transform: rotateY(-90deg) translateZ(100px);
}

.scene .cube__face--top {
    transform: rotateX(90deg) translateZ(100px);
}

.scene .cube__face--bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

.scene .cube__face i {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.scene .cube__face i:after {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}


@keyframes redlight {
    from {
        color: red;
    }

    to {
        color: black;
    }
}

@keyframes roll {

    from,
    to {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16% {
        transform: rotateY(-90deg);
    }

    33% {
        transform: rotateY(-90deg) rotateZ(90deg);
    }

    50% {
        transform: rotateY(-180deg) rotateZ(90deg);
    }

    66% {
        transform: rotateY(-270deg) rotateX(90deg);
    }

    83% {
        transform: rotateX(90deg);
    }
}
 */