/*want*/
#page-overlay {
    /*display: none;*/
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 205509;
    opacity: 0.8;
    background-color: #fff;
    top: 0;
}


.loader-2 {
    width: 44.8px;
    height: 44.8px;
    color: #14448B;
    position: relative;
    background: radial-gradient(11.2px, currentColor 94%, #0000);

}

    .loader-2:before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(10.08px at bottom right, #0000 94%, currentColor) top left, radial-gradient(10.08px at bottom left,#0000 94%, currentColor) top right, radial-gradient(10.08px at top right, #0000 94%, currentColor) bottom left, radial-gradient(10.08px at top left,#0000 94%, currentColor) bottom right;
        background-size: 22.4px 22.4px;
        background-repeat: no-repeat;
        animation: loader-2-animation 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
    }

@keyframes loader-2-animation {
    33% {
        inset: -11.2px;
        transform: rotate(0deg);
    }

    66% {
        inset: -11.2px;
        transform: rotate(90deg);
    }

    100% {
        inset: 0;
        transform: rotate(90deg);
    }
}















/*want*/
.loader-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 1rem;
}

/*want*/
.grid-center {
  display: grid;
  align-items: center;
  align-content: center;
  text-align: center;
}

/*want*/
@media (max-width: 768px) {
  #page-overlay img {
    width: 100%;
  }
}
.alert {
  top: 4rem;
  position: fixed;
  z-index: 999999 !important;
  right: 0;
}


.BYOD-loader-one-body {
    background-color: #071B38;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.BYOD-loader-one-h1 {
    position: relative;
    margin: 0 auto;
    top: 25vh;
    width: 100vw;
    text-align: center;
    font-family: 'Amatic SC';
    font-size: 6vh;
    color: #333;
    opacity: 0.75;
    animation: BYOD-loader-one-pulse 2.5s linear infinite;
}

.BYOD-loader-one-cooking {
    position: relative;
    margin: 0 auto;
    top: 0;
    width: 75vh;
    height: 75vh;
    overflow: hidden;
}

.BYOD-loader-one-area {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    background-color: transparent;
    transform-origin: 15% 60%;
    animation: BYOD-loader-one-flip 2.1s ease-in-out infinite;
}

.BYOD-loader-one-sides {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 15% 60%;
    animation: BYOD-loader-one-switchSide 2.1s ease-in-out infinite;
}

.BYOD-loader-one-handle {
    position: absolute;
    bottom: 18%;
    right: 80%;
    width: 35%;
    height: 20%;
    background-color: transparent;
    border-top: 1vh solid #fff;
    border-left: 1vh solid transparent;
    border-radius: 100%;
    transform: rotate(20deg) rotateX(0deg) scale(1.3, 0.9);
}

.BYOD-loader-one-pan {
    position: absolute;
    bottom: 20%;
    right: 30%;
    width: 50%;
    height: 8%;
    background-color: #fff;
    border-radius: 0 0 1.4em 1.4em;
    transform-origin: -15% 0;
}

.BYOD-loader-one-pancake {
    position: absolute;
    top: 24%;
    width: 100%;
    height: 100%;
    transform: rotateX(85deg);
    animation: BYOD-loader-one-jump 2.1s ease-in-out infinite;
}

.BYOD-loader-one-pastry {
    position: absolute;
    bottom: 26%;
    right: 37%;
    width: 40%;
    height: 45%;
    background-color: #333;
    box-shadow: 0 0 3px 0 #333;
    border-radius: 100%;
    transform-origin: -20% 0;
    animation: BYOD-loader-one-fly 2.1s ease-in-out infinite;
}

.BYOD-loader-one-bubble {
    position: absolute;
    border-radius: 100%;
    box-shadow: 0 0 0.25vh #fff;
    opacity: 0;
}

    .BYOD-loader-one-bubble:nth-child(1) {
        margin-top: 2.5vh;
        left: 58%;
        width: 2.5vh;
        height: 2.5vh;
        background-color: #fff;
        animation: BYOD-loader-one-bubble 2s cubic-bezier(0.53, 0.16, 0.39, 0.96) infinite;
    }

    .BYOD-loader-one-bubble:nth-child(2) {
        margin-top: 3vh;
        left: 52%;
        width: 2vh;
        height: 2vh;
        background-color: #fff;
        animation: BYOD-loader-one-bubble 2s ease-in-out 0.35s infinite;
    }

    .BYOD-loader-one-bubble:nth-child(3) {
        margin-top: 1.8vh;
        left: 50%;
        width: 1.5vh;
        height: 1.5vh;
        background-color: #fff;
        animation: BYOD-loader-one-bubble 1.5s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite;
    }

    .BYOD-loader-one-bubble:nth-child(4) {
        margin-top: 2.7vh;
        left: 56%;
        width: 1.2vh;
        height: 1.2vh;
        background-color: #fff;
        animation: BYOD-loader-one-bubble 1.8s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite;
    }

    .BYOD-loader-one-bubble:nth-child(5) {
        margin-top: 2.7vh;
        left: 63%;
        width: 1.1vh;
        height: 1.1vh;
        background-color: #fff;
        animation: BYOD-loader-one-bubble 1.6s ease-in-out 1s infinite;
    }

@keyframes BYOD-loader-one-pulse {
    0% {
        transform: scale(1, 1);
        opacity: 0.25;
    }

    50% {
        transform: scale(1.2, 1);
        opacity: 1;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0.25;
    }
}

@keyframes BYOD-loader-one-flip {
    0% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(-27deg);
    }

    30%, 50% {
        transform: rotate(0deg);
    }

    55% {
        transform: rotate(27deg);
    }

    83.3% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes BYOD-loader-one-switchSide {
    0% {
        transform: rotateY(0deg);
    }

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

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes BYOD-loader-one-jump {
    0% {
        top: 24;
        transform: rotateX(85deg);
    }

    25% {
        top: 10%;
        transform: rotateX(0deg);
    }

    50% {
        top: 30%;
        transform: rotateX(85deg);
    }

    75% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(85deg);
    }
}

@keyframes BYOD-loader-one-fly {
    0% {
        bottom: 26%;
        transform: rotate(0deg);
    }

    10% {
        bottom: 40%;
    }

    50% {
        bottom: 26%;
        transform: rotate(-190deg);
    }

    80% {
        bottom: 40%;
    }

    100% {
        bottom: 26%;
        transform: rotate(0deg);
    }
}

@keyframes BYOD-loader-one-bubble {
    0% {
        transform: scale(0.15, 0.15);
        top: 80%;
        opacity: 0;
    }

    50% {
        transform: scale(1.1, 1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.33, 0.33);
        top: 60%;
        opacity: 0;
    }
}




.BYOD-loader-two {
    width: 350px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #514b82;
    -webkit-mask: radial-gradient(circle closest-side at 50% 40%,#0000 94%, #000);
    transform-origin: 50% 40%;
    animation: l25 1s infinite linear;
}

@keyframes l25 {
    100% {
        transform: rotate(1turn)
    }
}