:root{--body-bg-color:#9cefef;--body-bg-color-default:#d8f4f5;--modal-bg-color:#d8f4f5;--font-color:#09b2b4;--font-color-white:#fff;--font-color-default:#008688;--button-bg:#09b2b4;--card-bg:#f6ffff;--card-bg-white:white;--card-bg-default:#f2fbfb;--card-bg-hex:#f2fbfb;--card-blur-bg:rgba(255, 255, 255, 0.19)}
*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh;background-color:var(--body-bg-color);color:var(--font-color)!important;user-select:none;-moz-user-select:none;-webkit-user-select:none}
body.bg-default{background-image:url(../img/siap-background4.svg);background-repeat:no-repeat!important;background-position:center!important;background-attachment:fixed!important;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
body.card-blur{background-image:url(../img/siap-background3.webp);background-repeat:no-repeat!important;background-position:center!important;background-attachment:fixed!important;-webkit-background-size:cover!important;-moz-background-size:cover!important;-o-background-size:cover!important;background-size:cover!important;color:var(--font-color-white)!important}
body.bg-costume{-webkit-background-size:cover!important;-moz-background-size:cover!important;-o-background-size:cover!important;background-size:cover!important;background-image:var(--costume-bg,none)!important;background-repeat:no-repeat!important;background-position:center!important;background-attachment:fixed!important}
body.errorPage{background-color:var(--body-bg-color-default)!important;color:var(--font-color-default)!important;background-image:url(../img/siap-background4.svg);background-repeat:no-repeat!important;background-position:center!important;background-attachment:fixed!important;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
@media (max-width:800px){
body{background-image:unset!important}
}
.d-none{display:none!important}
.pd-none{padding:0!important}
.pd-t{padding-top:0!important}
.pd-r{padding-right:0!important}
.pd-b{padding-bottom:0!important}
.pd-1{padding:.25rem!important}
.pd-2{padding:.5rem!important}
.pd-3{padding:1rem!important}
.pd-4{padding:1.5rem!important}
.pd-5{padding:3rem!important}
.pd-l{padding-left:0!important}
.pd-t-1{padding-top:.25rem!important}
.pd-r-1{padding-right:.25rem!important}
.pd-b-1{padding-bottom:.25rem!important}
.pd-l-1{padding-left:.25rem!important}
.pd-t-2{padding-top:.5rem!important}
.pd-r-2{padding-right:.5rem!important}
.pd-b-2{padding-bottom:.5rem!important}
.pd-l-2{padding-left:.5rem!important}
.pd-t-3{padding-top:1rem!important}
.pd-r-3{padding-right:1rem!important}
.pd-b-3{padding-bottom:1rem!important}
.pd-l-3{padding-left:1rem!important}
.pd-t-4{padding-top:1.5rem!important}
.pd-r-4{padding-right:1.5rem!important}
.pd-b-4{padding-bottom:1.5rem!important}
.pd-l-4{padding-left:1.5rem!important}
.pd-t-5{padding-top:3rem!important}
.pd-r-5{padding-right:3rem!important}
.pd-b-5{padding-bottom:3rem!important}
.pd-l-5{padding-left:3rem!important}
.mrg-auto{margin:auto!important}
.mrg-none{margin:0!important}
.mrg-t{margin-top:0!important}
.mrg-r{margin-right:0!important}
.mrg-b{margin-bottom:0!important}
.mrg-l{margin-left:0!important}
.mrg-1{margin:.25rem!important}
.mrg-t-1{margin-top:.25rem!important}
.mrg-r-1{margin-right:.25rem!important}
.mrg-b-1{margin-bottom:.25rem!important}
.mrg-l-1{margin-left:.25rem!important}
.mrg-2{margin:.5rem!important}
.mrg-t-2{margin-top:.5rem!important}
.mrg-r-2{margin-right:.5rem!important}
.mrg-b-2{margin-bottom:.5rem!important}
.mrg-l-2{margin-left:.5rem!important}
.mrg-3{margin:1rem!important}
.mrg-t-3{margin-top:1rem!important}
.mrg-r-3{margin-right:1rem!important}
.mrg-b-3{margin-bottom:1rem!important}
.mrg-l-3{margin-left:1rem!important}
.mrg-4{margin:1.5rem!important}
.mrg-t-4{margin-top:1.5rem!important}
.mrg-r-4{margin-right:1.5rem!important}
.mrg-b-4{margin-bottom:1.5rem!important}
.mrg-l-4{margin-left:1.5rem!important}
.mrg-5{margin:3rem!important}
.mrg-t-5{margin-top:3rem!important}
.mrg-r-5{margin-right:3rem!important}
.mrg-b-5{margin-bottom:3rem!important}
.mrg-l-5{margin-left:3rem!important}
a{color:var(--font-color)!important;text-decoration:none}
.card-blur a{color:var(--font-color-white)!important;text-decoration:none}
.bg-in{display:flex;justify-content:center;align-items:center;width:100%;height:100vh}
.container{display:flex;padding:20px;border-radius:30px;z-index:5}
.illustration{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:15px}
.illustration img,.illustration.icon404{width:270px;margin-right:20px}
.login-box{padding:20px;text-align:center;width:360px}
h2{color:var(--font-color)}
.card-blur h2{color:var(--font-color-white)}
.login-box h2{color:var(--font-color);font-size:.985rem;font-weight:unset}
.card-blur .login-box h2{color:var(--font-color-white)}
.sub-title{font-weight:700!important;font-size:1.15rem!important}
form{display:flex;flex-direction:column}
form label{text-align:left;font-weight:700;margin-top:10px}
input{padding:10px;border:3px solid #fff;border-radius:10px;font-size:16px;outline:2px;color:#6a6a6a}
input:focus-visible{outline:0;outline-offset:0px}
input:focus{border:3px solid color-mix(in srgb,var(--button-bg),#000 20%)!important;transition:.8s}
input[type=checkbox]{display:none}
.custom-checkbox{width:20px;height:20px;background:#fff;border:2px solid #ccc;border-radius:5px;display:inline-block;position:relative;cursor:pointer;margin-right:4px}
input[type=checkbox]:checked+.custom-checkbox{background:var(--button-bg);border:2px solid var(--button-bg)}
input[type=checkbox]:checked+.custom-checkbox::after{content:'✔';color:#fff;position:absolute;top:-3px;left:2.4px;font-size:14px}
.remeber-me{margin:0;font-weight:unset;display:flex;align-items:center;cursor:pointer}
.remember-forgot{display:flex;justify-content:space-between;margin-top:10px;font-size:14px}
.buttonBack,button{background:var(--button-bg);color:#fff;padding:12px;border:none;border-radius:22px;font-size:16px;cursor:pointer;margin-top:15px;transition:.3s;font-weight:700}
.buttonBack:hover,button:hover{background:color-mix(in srgb,var(--button-bg),#414141 15%)}
small{font-size:80%;line-height:1.5}
.card-default .card{background-color:var(--card-bg)}
body.errorPage .card{background-color:var(--card-bg-white)!important}
.card-blur .card{backdrop-filter:blur(10px);background:var(--card-blur-bg)}
.home-date-time{position:fixed;top:30px;right:30px;text-align:center;z-index:2}
.home-date-time .card{margin-bottom:12px;padding:20px;border-radius:30px}
.home-date-time .home-time{font-size:3rem;font-weight:700}
.home-date-time .home-time .minutes{color:var(--font-color);opacity:.75}
.home-date-time .config{width:100%;float:right}
.home-date-time .home-time .digicolon{animation-timeline:auto;animation-range-start:normal;animation-range-end:normal;animation:1s ease 0s infinite normal none running blink;animation:blink 1s infinite;line-height:1.5}
@keyframes blink{
50%{opacity:0}
}
.logoApp{position:fixed;top:30px;left:25px;padding:5px 15px;border-radius:30px;text-align:center;z-index:1}
.Copyright{position:fixed;bottom:30px;left:25px;padding:5px 15px;border-radius:30px;text-align:center;z-index:1}
.tooltip{display:none;position:absolute;right:45px;width:fit-content;color:#fff;font-size:.8rem;background-color:var(--button-bg);padding:8px 12px;border-radius:30px;border:4px solid #fff;font-weight:500;transition:all .5s;white-space:nowrap}
.tooltip.right-toolltip{left:115px!important;transition:all .5s!important;right:unset}
@-webkit-keyframes animateleft{
from{transform:scale(0);transition:opacity .25s,transform .25s}
to{opacity:1;transform:scale(1)}
}
@keyframes animateleft{
from{right:20px;opacity:0}
to{right:45px;opacity:1}
}
@-webkit-keyframes animateright{
from{transform:scale(0);transition:opacity .25s,transform .25s}
to{opacity:1;transform:scale(1)}
}
@keyframes animateright{
from{left:50px;opacity:0}
to{left:150px;opacity:1}
}
.username{position:relative}
@media (hover:hover){
.download:hover .tooltip,.feedback:hover .tooltip,.menuButton:hover .tooltip{display:block;-webkit-animation-name:animateleft;-webkit-animation-duration:.4s;animation-name:animateleft;animation-duration:.4s}
.brandLabel:hover .tooltip.right-toolltip{display:block;-webkit-animation-name:animateright!important;-webkit-animation-duration:.4s!important;animation-name:animateright!important;animation-duration:.4s!important}
}
.menuButton{float:right;display:flex;justify-content:center;align-items:center;width:50px;height:50px;color:#f2fbfb;background-color:#fff;border-radius:50%;border:6px solid #fff;box-shadow:inset 0 0 0 4px var(--button-bg),inset 0 0 0 9.7px #fff,inset 0 0 0 40px var(--button-bg);cursor:pointer}
.brandLabel{position:fixed;float:right;display:flex;justify-content:center;align-items:center;top:30px;left:25px;color:#f2fbfb!important;background-color:#fff;border-radius:25px;border:3px solid var(--button-bg);cursor:pointer;z-index:1;padding:5px 10px}
.brandLabel .brand{display:flex;justify-content:space-between;align-items:end;width:75px}
.brandLabel .brand img{margin-right:10px}
.brandLabel .brand h1{font-size:1.2rem}
.feedback{position:fixed;float:right;display:flex;justify-content:center;align-items:center;bottom:85px;right:30px;width:50px;height:50px;color:#f2fbfb!important;background-color:var(--button-bg);border-radius:50%;border:6px solid #fff;cursor:pointer;z-index:1}
.download{position:fixed;float:right;display:flex;justify-content:center;align-items:center;bottom:30px;right:30px;height:35px;z-index:1}
.download span{font-size:.8rem;font-weight:700}
.modal-config{position:fixed;top:0;right:0;left:0;bottom:0;background-color:rgba(131,131,131,.31);backdrop-filter:blur(10px);color:var(--button-bg);transition:all .5s;z-index:50}
.modal-config .content{position:fixed;top:0;right:0;height:95vh;max-height:750px;width:300px;display:block;background-color:var(--modal-bg-color);border-bottom-left-radius:30px;transition:.5s;z-index:50}
.modal-config .content .modal-content{position:absolute;background-color:rgba(255,255,255,.77);top:0;bottom:0;left:0;right:0;border-bottom-left-radius:30px;overflow:hidden}
.modal-config .content .topRounder{position:absolute;height:30px;width:30px;margin-left:-30px;display:block;color:#fff;z-index:50}
.modal-config .content .topRounder svg path{color:var(--modal-bg-color)!important}
.modal-content .header{background-color:var(--button-bg);color:color-mix(in srgb,var(--button-bg),#fff 90%);padding:10px 20px;font-weight:700;font-size:17px;text-align:center}
.modal-content .body{padding:20px 20px;padding-bottom:5px;position:absolute;top:45px;bottom:82px;left:0;right:0;border-bottom-left-radius:30px;overflow:auto}
.modal-content .body .list{display:flex;align-items:center;justify-content:space-between;font-size:1rem;margin-bottom:15px}
.modal-content .body .list.disabled{color:silver}
.modal-content .body .change-wallpaper{display:flex;align-items:center;justify-content:center;margin:30px 0}
.modal-content .body .reset-buttom{width:100%;display:flex;justify-content:center;margin-top:40px}
.modal-content .body .reset-buttom .resetbtn{width:75%;padding:5px 12px!important;margin:0}
.modal-content .footer{position:absolute;bottom:0;padding:20px;width:100%}
.modal-content .footer #menuCloseButton{width:42px;height:42px;background-color:#fff;padding:6px;border-radius:50%;cursor:pointer}
.modal-content .footer #menuCloseButton #closeBtnX{fill:var(--button-bg)}
.switch{position:relative;display:inline-block;width:50px;height:25px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ddd;transition:.4s;border-radius:25px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:3.5px;background-color:#fff;transition:.4s;border-radius:50%}
input:checked+.slider{background-color:var(--button-bg)}
input:checked+.slider:before{transform:translateX(24px)}
.input-file{position:relative;overflow:hidden;cursor:pointer;background-color:#fff;color:var(--button-bg);padding:5px 10px;border-radius:30px;display:flex;align-items:center;justify-content:space-between}
.list .input-file{padding:5px!important}
.input-file:focus,.input-file:hover{background-color:var(--button-bg);color:#fff;transition:.5s}
.input-file.csv{position:relative;overflow:hidden;cursor:pointer}
.input-file input#import-csv,.input-file input.hide-input-file,.input-file input.uploadBtn{position:absolute;top:0;right:0;margin:0;padding:0;opacity:0;cursor:pointer;-moz-filter:alpha(opacity=0)}
input[type=range]{-webkit-appearance:none;appearance:none;background:0 0;cursor:pointer;padding:0;margin-top:0;border:unset;font-size:unset;outline:0}
input[type=range]:focus{border:0!important;transition:.8s}
input[type=range]:focus{outline:0}
input[type=range]:disabled{cursor:unset}
input[type=range]::-webkit-slider-runnable-track{background-color:silver;border-radius:.5rem;height:.5rem}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-4px;background-color:var(--button-bg);border-radius:.75rem;height:1rem;width:1rem}
input[type=range]:disabled::-webkit-slider-thumb{background-color:silver!important;cursor:unset}
input[type=range]:focus::-webkit-slider-thumb{outline:3px solid var(--button-bg);outline-offset:0.125rem}
input[type=range]::-moz-range-track{background-color:silver;border-radius:.5rem;height:.5rem}
input[type=range]::-moz-range-thumb{background-color:var(--button-bg);border:none;border-radius:.75rem;height:1rem;width:1rem}
input[type=range]:disabled::-moz-range-thumb{background-color:silver!important;cursor:unset}
input[type=range]:focus::-moz-range-thumb{outline:3px solid var(--button-bg);outline-offset:0.125rem}
@media (max-width:800px){
body{justify-content:start}
.container,.sp-admin{margin-top:80px}
.home-date-time .card{padding:10px}
.home-date-time{position:relative;margin-top:30px;top:unset;right:unset}
.home-date-time .config{position:fixed;top:30px;right:10px}
.container{padding:0;z-index:0}
.illustration{display:none}
.Copyright{margin-top:10px;margin-bottom:5px;bottom:10px;left:unset;padding:5px 15px;border-radius:30px;text-align:center;z-index:-1}
}
@media (max-width:800px){
.brandLabel{display:none!important}
.button-action{display:flex}
.download,.feedback{position:relative;top:unset!important;left:unset!important;right:unset!important;bottom:unset!important;margin:40px}
}
@media (min-width:761px) and (max-width:1290px){
.illustration{display:unset}
.download,.feedback{right:10px}
}
.error-msg{color:#da0707;font-family:Raleway,sans-serif;text-align:center}
form input.inp-error,form input.inp-error:focus{border:none;box-shadow:none;border:3px solid rgb(245 13 13)!important;transition:.3s}
.form-floating .inp-error~small.msg{position:relative!important;left:unset;top:unset}
.inp-error~small.msg{position:absolute!important;width:fit-content!important;right:0;white-space:nowrap;top:0;transition:all .5s;padding:5px 8px;border-radius:5px;z-index:1;font-size:12px;transition:.3s}
.msg.pop-up-message{position:fixed;background-color:#bf0f0f;height:86px;top:60px;right:20px;width:fit-content;min-width:250px;max-width:300px;z-index:9999999;box-shadow:0 0 4px #222;border-radius:7px;color:#fff;overflow:hidden;transition:1s ease-out}
.msg.pop-up-message.hidden{transform:translate3d(120%,0,0);-webkit-transform:translate3d(120%,0,0);-o-transform:translate3d(120%,0,0);-ms-transform:translate3d(120%,0,0);-moz-transform:translate3d(120%,0,0)}
.msg.pop-up-message .container-message{padding:10px}
.msg.pop-up-message .container-message .body-message{display:flex;align-items:center}
.msg.pop-up-message .container-message .body-message .icon-message{display:flex;align-items:center!important;height:60px}
.msg.pop-up-message .container-message .body-message .text-message{padding-left:8px;font-size:.85rem}
.msg.pop-up-message .container-progress{position:absolute;height:4px;bottom:0;right:0;left:0;background-color:rgba(0,0,0,0)}
.msg.pop-up-message .container-progress .progress-bar{background-color:#00000073;height:100%;width:0}
.password{position:relative}
.show-password{position:absolute;right:7px;top:34px;text-align:center;width:30px;padding:5px}
.show-password i{cursor:pointer;color:#8b8b8b}
.show-password.hold i{color:color-mix(in srgb,var(--button-bg),#000 20%)!important}
body.mr_loading .load-wrapper.bg-default{background-color:rgba(0,0,0,.562)!important}
.dis-none{display:none}
.maintenance-box,.page404-box{padding:20px 5px;text-align:center;width:100%;width:360px;display:flex;flex-direction:column;align-items:center}
.page404-box h1{font-size:2rem}
.maintenance-box h1{font-size:1.5rem}
.page404-box h2{font-size:1.2rem;color:unset!important}
.buttonBack{width:fit-content!important;padding:10px 25px}
.illustration svg.errorIcon{width:180px;margin-bottom:1rem}
.mr_loading .load-container .spinner.big-spinner{border-top-color:var(--button-bg)!important;border-left-color:var(--button-bg)!important}
#nprogress .bar{background:var(--button-bg)!important}
#nprogress .peg{-moz-box-shadow:unset!important;box-shadow:unset!important}
#nprogress .spinner-icon{border-top-color:var(--button-bg)!important;border-left-color:var(--button-bg)!important}
.bi.bi-android2{font-size:1.3rem;margin-right:5px}
.card-blur #form-login small.msg{color:#fff!important}
#form-login small.msg{color:red!important}
#form-login-admin small.msg{display:none!important}
.form-floating{margin-bottom:10px}
#form-registrasi-admin{width:325px;margin:20px}