body {
    /* font-family: 'Kanit', sans-serif; */
    padding: 0px;
    margin: 0px;
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Sarabun', sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html {
    background: url(../img/bg/mobile_bg.png) no-repeat center top fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.preloader {
    background: url(../img/bg/mobile_bg.png) no-repeat center top fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*
    Making the preloader floating over other elements.
    The preloader is visible by default. 
    */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* .rounded-tl-xl {
    border-top-left-radius: 25px;
}

.rounded-tr-xl {
    border-top-right-radius: 25px;
}

.rounded-xl {
    border-radius: 25px;
} */

.bg-frame {
    background-color: #f6f7fb;
}

.bg-blue {
    background: #1757F7;
}

.text-blue {
    color: #1757F7;
}

.checked\:border-transparent:checked {
    border-color: transparent !important;
}

.checked\:bg-blue-600:checked {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(37, 99, 235, var(--tw-bg-opacity)) !important;
}

.form-tick:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat;
}

.sticky-wrapper {
    z-index: 10;
    /* background: #fff; */
}

.ciclepower {
    width: 50vw;
    height: 50vw;
    position: relative;
}

.ciclepower::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(23, 87, 247);
    background: radial-gradient(circle, rgba(23, 87, 247, 1) 0%, rgba(12, 44, 124, 1) 100%);
    border-radius: 50%;
    border: solid 10px rgba(255, 255, 255, 0.1);
}

.ciclepower.detail::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border-radius: 50%;
    border: solid 10px rgba(255, 255, 255, 0.1);
}

.ciclepower span {
    border-radius: 50%;
    background-color: #21c2fb;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    animation: aura 30s infinite linear;
    /* mix-blend-mode: screen;
     */
    filter: blur(2vw);
}

.ciclepower span:nth-child(2) {
    background-color: #09090c;
    animation-delay: -10s;
}

.ciclepower span:nth-child(3) {
    background-color: #3f25fe;
    animation-direction: reverse;
    animation-delay: -20s;
}

@keyframes aura {
    25%,
    75% {
        border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%;
    }
    50% {
        border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%;
    }
    100% {
        transform: rotate(360deg);
    }
}

.footerBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    will-change: transform;
    transform: translateZ(0);
    /* display: flex; */
    /* height: 50px; */
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    /* background-color: #fff; */
}


/* .mobile-bottom-nav__item {
    flex-grow: 1;
    text-align: center;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mobile-bottom-nav__item--active {
    color: red;
}
.mobile-bottom-nav__item-content {
    display: flex;
    flex-direction: column;
} */

.cicle-blue {
    background: rgba(113, 159, 255, 0.5);
}

.bg-cicle-bule {
    background: rgba(113, 159, 255, 1);
}

.text-cicle-bule {
    color: rgba(113, 159, 255, 1);
}

.cicle-green {
    background: rgba(65, 213, 226, 0.3);
}

.bg-cicle-green {
    background: rgba(65, 213, 226, 0.5);
}

.text-cicle-green {
    color: rgba(65, 213, 226, 1);
}

.cicle-yellow {
    background: rgba(255, 196, 5, 0.3);
}

.bg-cicle-yellow {
    background: rgba(255, 196, 5, 0.5);
}

.text-cicle-yellow {
    color: rgba(255, 196, 5, 1);
}

.ui-tabs-active {
    position: relative;
}

.ui-tabs-active::after {
    content: " ";
    width: 20%;
    position: absolute;
    height: 3px;
    background: #1757F7;
    bottom: -2px;
    left: 0px;
    border-radius: 2px;
}

.bulletActive {
    color: #fff;
    background: rgb(23, 87, 247);
}

.statusbarphone {
    width: 100%;
    height: 30px;
}

.bg-cicle {
    background: #fffdff;
}

.arrowsslide,
.arrowsslide:before,
.arrowsslide:after {
    /* border-radius: 50%; */
    border-top: 4px solid transparent;
    border-left: 6px solid #76DF83;
    border-bottom: 4px solid transparent;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.arrows_red,
.arrows_red:before,
.arrows_red:after {
    border-left: 6px solid #ff0000;
}

.arrows_blue,
.arrows_blue:before,
.arrows_blue:after {
    border-left: 6px solid #1d42d8;
}

.arrowsslide {
    width: 5px;
    height: 5px;
    position: absolute;
    text-indent: -9999em;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    /* margin: auto; */
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.arrowsslide::before,
.arrowsslide:after {
    content: '';
    position: absolute;
    top: -4px;
}

.arrowsslide:before {
    left: -17px;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.arrowsslide:after {
    left: 5px;
}

.arrowdown {
    transform: rotate(90deg);
    top: 130%;
    /* top: 145%; */
    z-index: -1;
}

.arrowtop {
    transform: rotate(-90deg);
    top: -30%;
    z-index: -1;
}

.arrowright {
    left: 100%;
    z-index: -1;
}

.arrowleft {
    transform: rotate(-180deg);
    left: 0%;
    z-index: -1;
}

@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

@keyframes load7 {
    0%,
    80%,
    100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

.statusPowertTop {
    top: -10%;
}

.statusPowertBottom {
    top: 90%;
}


/* .text-small {
    font-size: 0.65em;
} */

.slick-dots {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0px;
}

.slick-dots li {
    text-indent: -999px;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: auto 2px;
}

.slick-dots li.slick-active {
    /* color: #1757F7; */
    background: #fff;
}

.btnblur {
    position: relative;
    overflow: hidden;
}

.btnblur div {
    z-index: 2;
}

.btnblur::before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background-color: rgba(0, 0, 0, .7);
    background-repeat: no-repeat;
    background-size: cover;
    /* z-index: -1; */
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
    /* -webkit-filter: blur(50%);
    -moz-filter: blur(50%);
    -ms-filter: blur(50%);
    filter: blur(50%);
    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); */
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.profile {
    top: -10vw;
    left: 50%;
    margin-left: -10vw;
}

.profile .cover {
    width: 20vw;
    height: 20vw;
    position: relative;
    background: #1757F7;
    border-radius: 50%;
}

.menuleft {
    width: inherit;
}

@media (min-width: 1024px) {
    .preloader {
        background: url(../img/bg/desktop_bg.png) no-repeat center top fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /*
        Making the preloader floating over other elements.
        The preloader is visible by default. 
        */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
    }
    html {
        background: url(../img/bg/desktop_bg.png) no-repeat right top fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .ciclepower {
        width: 10vw;
        height: 10vw;
    }
    .ciclepower span {
        border-radius: 10%;
    }
    .profile {
        top: 0px;
        left: 50%;
        margin-left: -5vw;
    }
    .profile .cover {
        width: 10vw;
        height: 10vw;
        position: relative;
        background: #1757F7;
        border-radius: 50%;
    }
}

.blob {
    background: #fff;
    border-radius: 50%;
    /* margin: 10px; */
    /* height: 20px;
	width: 20px; */
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    transform: scale(1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.blob.green {
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
    }
}

.tabtopbar {
    z-index: 1000 !important;
}