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

.sb-sidenav-footer {
    background-color: var(--second-theme-color) !important;
    color: #000;
}

@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-page-fino-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-page-fino {
    width: 60px;
    aspect-ratio: 1;
    display: flex;
    animation: l10-0 2s infinite steps(1);
}

.loader-page-fino::before,
.loader-page-fino::after {
  content: "";
  flex: 1;
  animation: 
    l10-1 1s infinite linear alternate,
    l10-2 2s infinite steps(1) -.5s;
}

.loader-page-fino::after {
  --s:-1,-1;
}

@keyframes l10-0 {
  0%  {transform: scaleX(1)  rotate(0deg)}
  50% {transform: scaleX(-1) rotate(-90deg)}
}

@keyframes l10-1 {
  0%,
  5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes l10-2 {
  0%  {background:#E67A29; border-radius: 0}
  50% {background:#ECCF1F; border-radius: 100px 0 0 100px}
}

.loader-page-fino-container.small {
    position: absolute;
    border-radius: 6px;
}

.loader-page-fino-container.below {
    z-index: 200;
}

.loader-page-fino-container.on-top {
    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%;
} */

/*# sourceMappingURL=application.css.map */
/* @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);
    }
} */