@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 16px;
}

body {
    margin-bottom: 60px;
    font-family: 'Roboto';
    font-size: 16px;
}
.hidden { display: none !important; }
.tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 50px 0;
}
.tile {
    width: 200px;
    height: 160px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-shadow: inset -1px -1em 2em 0px rgb(0 200 0 / 30%), 0.3em 0.3em 1em rgb(200 0 0 / 60%);
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    flex-direction: column;
    color: #5945c3;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}
.modal .tile {
    width: 100px;
    height: 100px;
    box-shadow: -1px -1px 17px 0px rgb(0 200 0 / 100%), 0.3em 0.3em 1em rgb(200 0 0 / 60%);
    background-color: white;
}
.tile:hover {
    width: 210px;
    height: 170px;
    transform: rotate(2deg);
}
.modal .tile:hover {
    width: 110px;
    height: 110px;
    /*transform: rotate(2deg);*/
}
.tile img {
    width: 50%;
}
.pagging-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    padding: 10px 0;
}
h1 {
    color: #5f69b9;
}
h1 span {
    transition: all 0.8s ease-in-out;
}

section.loader-holder {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000020;
}
.loader {
    width: 96px;
    box-sizing: content-box;
    height: 48px;
    background: #FFF;
    border-color: #646464;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
    animation: 0.7s yinYang linear infinite;
}
.loader:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #FFF;
    border: 18px solid #646464;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
}
.loader:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #646464;
    border: 18px solid #FFF;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
}
@keyframes yinYang {
    100% {
        transform: rotate(360deg)
    }
}

.btn-primary {
    background-color: #FFB82E;
    border-color: #FFB82E;
}

/*
.loader {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        color: #fff;
      }
        .loader:before,
        .loader:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader:after {
          color: #FF3D00;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }
   
*/

@media (min-width: 700px) {
    .modal-600 {
        max-width: 600px;
    }
}