html, body{margin:0;padding:0;width:100%;height:100%;box-sizing:border-box;background:#fff;font-family:verdana;font-size:12px;}

header{margin:0;padding:15px;position:fixed;top:0;left:0;background:#fff;width:100%;height:80px;box-sizing:border-box;z-index:10;}
header .h-logo{float:left;}
header .h-logo img{margin:0;padding:0;height:50px;}
header ul{margin:-5px 0;padding:0;list-style:none;float:left;}
header li{margin:0;padding:20px 8px;display:inline-block;font-size:125%;color:#848484;font-family:"arial";cursor:pointer;}
header li:hover{color:#333;}
header button{margin:5px 0;padding:10px 20px;float:right;border:solid 1px #1686de;border-radius:4px;background:#2196F3;color:#fff;letter-spacing:1px;cursor:pointer;outline:none;}
header button:hover{background:#1a83d6;border-color:#1776c1;}

main{margin:80px 0 0 0;width:100%;}
main #content{margin:0 auto;padding:0;}
main #content img.banner{margin:0;padding:0;width:100%;}
main #content #slider img{margin:0;padding:0;width:100%;}
main #content .nofull{margin:0 auto;padding:0;width:90%;}
main #content .nofull:after{content:"";display:block;clear:both;}
main #content .nofull h2{margin:0 0 10px 0;padding:0;font-size:200%;color:#1f1f1f;font-weight:normal;}
main #content .nofull p{margin:0 0 10px 0;padding:0;font-size:130%;color:#737373;text-align:justify;line-height:30px;}
main #content .half{margin:0;padding:20px;width:calc(100% / 2);float:left;box-sizing:border-box;}
main #content .half.left{width:70%;}
main #content .half.right{width:30%;}
main #content .half.right iframe{width:100%;height:auto;}
main #content video{outline:none;width:100%;max-width:400px;height:auto;}

main .wrap-main{margin:0 auto;padding:0;width:80%;}
main .wrap-main .wrap-search .input-text{background:#ffffff;}
main .wrap-main .wrap-search .input-text:focus-within{border-color:#E91E63;}
main .wrap-main .wrap-artikel{font-size:130%;line-height:25px;color:#4c4c4c;}
main .wrap-artikel > ul{margin:0;padding:0;}
main .wrap-artikel .title{margin:0;padding:0;font-weight:bold;}
main .wrap-artikel .time{margin:8px 0;padding:0;font-size:80%;width:100%;}
main .wrap-artikel .time ul{margin:0 0 0 20px;padding:0;width:auto;display:inline-block}
main .wrap-artikel .time li{margin-right:10px;display:inline-block;cursor:pointer;}
main .wrap-artikel .time li:before{content:none;}
main .wrap-artikel .content{margin:0 0 50px 0;padding:0;}
main .wrap-artikel .content span.more{margin:0;padding:0;display:block;text-align:right;color:#4886b7;cursor:pointer;}

main .wrap-main .content-main-nav{margin:0 0 10px 0;padding:0;text-align:right;}
main .wrap-main .content-main-nav:after{content:"";display:block;clear:both;}
main .wrap-main .content-main-nav li{margin:0 2px;padding:3px 8px;display:inline-block;background:#e6e6e6;cursor:pointer;}
main .wrap-main .content-main-nav li.active{background:#a1d9f3;}
main .wrap-main .content-main-nav li:hover{background:#d4d4d4;}
main .wrap-main .content-main-nav li:last-child{margin-right:0;}
main .wrap-main .content-main-nav li:before{content:none;}

main .wrap-main .wrap-table{margin:0;padding:0;overflow:auto;border:solid 1px #d4d4d4;}
main .wrap-main .wrap-table table{margin:0;padding:0;width:100%;font-size:100%;border-spacing:1px;}
main .wrap-main .wrap-table th,
main .wrap-main .wrap-table td{margin:0;padding:5px 10px;box-sizing:border-box;text-align:left;}
main .wrap-main .wrap-table th{padding:10px;text-transform:uppercase;background:#e2e2e2;}
main .wrap-main .wrap-table td{vertical-align:top;background:#ececec;line-height:18px;}
main .wrap-main .wrap-table tr:nth-child(even) td{background:#e2e2e2;}
main .wrap-main .wrap-table tr:hover td{background:#b4dbe8;}
main .wrap-main .wrap-table td a{margin:0;padding:0;text-decoration:none;color:#F44336;font-weight:bold;}
main .wrap-main .wrap-table td.error{margin:0;background:#ffcfcf !important;border:solid 1px #ff8787;}
main .wrap-main .wrap-table td.error:hover{background:#ffa2a2 !important;}
main .wrap-main .wrap-table td.error span.error{margin:5px 0 0 0;display:block;font-size:90%;color:#900000;}
main .wrap-main .wrap-table .cl-chk{width:35px;min-width:35px;cursor:pointer;}
main .wrap-main .wrap-table .cl-chk i{margin:0;padding:0;text-align:left;font-size:130%;}
main .wrap-main .wrap-table .cl-no{width:40px;min-width:40px;text-align:center;}
main .wrap-main .wrap-table .cl-waktu{width:140px;min-width:140px;}
main .wrap-main .wrap-table .cl-nama{width:160px;min-width:160px;}
main .wrap-main .wrap-table .cl-nama-hotel{width:250px;min-width:200px;}
main .wrap-main .wrap-table .cl-nickname{width:120px;min-width:120px;}
main .wrap-main .wrap-table .cl-kelamin{width:150px;min-width:150px;}
main .wrap-main .wrap-table .cl-kelahiran{width:200px;min-width:200px;}
main .wrap-main .wrap-table .cl-level{width:120px;min-width:120px;}
main .wrap-main .wrap-table .cl-alamat{min-width:200px;}
main .wrap-main .wrap-table .cl-alamat span{font-size:90%;color:#007d72;}
main .wrap-main .wrap-table .cl-alamat ul{margin:0;padding:0;}
main .wrap-main .wrap-table .cl-aksi{width:50px;min-width:50px;}
main .wrap-main .wrap-table td.cl-aksi{padding:0;}
main .wrap-main .wrap-table .cl-aksi ul{margin:0;padding:0;text-align:center;}
main .wrap-main .wrap-table .cl-aksi li{padding:5px;display:inline-block;cursor:pointer;width:60px;text-align:left;}
main .wrap-main .wrap-table .cl-aksi li.edit i{color:#e28700;}
main .wrap-main .wrap-table .cl-aksi li.delete i{color:#e91e1e;}
main .wrap-main .wrap-table .cl-aksi li:before{content:none;}
main .wrap-main .wrap-table .cl-aksi li i{margin:0 5px 0 0;padding:0;}
main .wrap-main .wrap-table td.icon{padding-left:30px;width:200px;min-width:200px;}
main .wrap-main .wrap-table td.icon i{width:20px;margin:0 0 0 -20px;}



footer{margin:0;padding:0;background:#fbfbfd;width:100%;clear:both;}
footer .nofull{margin:0 auto;padding:0;width:90%;}
footer .half{margin:0;padding:20px;width:calc(100% / 2);float:left;box-sizing:border-box;}
footer .half img{width:100% !important;}
footer .half.left{width:70%;}
footer .half .address{margin:0;padding:0;width:60%;float:left;color:#737373;font-size:120%;}
footer .half.left .address h2{margin:0 0 10px 0;padding:0;color:#4b5062;font-weight:normal;width:100%;float:none;}
footer .half.left h2{margin:0 0 20px 0;padding:0 0 0 20px;color:#263b5e;font-weight:normal;float:left;box-sizing:border-box;width:30%;}
footer .half .address p{margin:0;padding:0;line-height:20px;}
footer .half .address p.m-bottom{margin-bottom:20px;}
footer .half .foot-menu{margin:0;padding:0 0 0 10px;box-sizing:border-box;width:30%;float:left;font-size:125%;list-style:none;color:#6a76af;}
footer .half .foot-menu li{margin:0;padding:10px;cursor:pointer;}
footer .half .foot-menu li a{text-decoration:none;color:#6a76af;}
footer .half .foot-menu li:hover a{color:#1a3de2;}
footer .half .address img{width:400px;}
footer .half.right{width:30%;box-sizing:border-box;}
footer .half.right h2{margin:0;padding:20px 0;color:#263b5e;}
footer .half.right ul{margin:0;padding:0;list-style:none;}
footer .half.right li{margin:0 10px 0 0;padding:10px;display:inline-block;border:solid 1px #c7c7c7;text-align:center;border-radius:50%;cursor:pointer;}
footer .half.right li i{margin:0;padding:0;font-size:180%;color:#858da8;}
footer .half.right li:hover{transition:all ease 0.2s;background:#394898;border-color:#797979;}
footer .half.right li:hover i{color:#fff;}
footer .nofull:after{content:"";display:block;clear:both;}
footer .footer-animation{margin:0;padding:0;width:100%;clear:both;position:relative;overflow:hidden;}
footer .footer-animation p{margin:20px auto 50px auto;padding:0;color:#858da8;width:80%;}
footer .footer-animation p span{float:right;}
footer .footer-animation img{width:100%;}
footer .footer-animation img.animation{width:auto;height:100px;position:absolute;bottom:85px;left:0;}
footer .footer-animation img.volks{height:210px;bottom:35px;animation:volks 23s infinite linear;left:-7%;}
footer .footer-animation img.cyclist{animation:cyclist 25s infinite linear;}

#login-form{margin:0 auto;padding:20px;background:#fff;width:300px;box-sizing:border-box;box-shadow:5px 5px 25px #000;border-radius:4px;transition:all ease 0.2s;text-align:left;}
#login-form p.link{margin:10px 0 0 0;padding:0;color:#04487b;animation:blink-animation 1.5s linear infinite;}

.input-group{margin:0 0 20px 0;padding:0;width:100%;}
.input-group.half{width:calc(100% / 2 - 10px);float:left;}
.input-group.half.right{margin-left:10px;float:right;}
.input-group.captcha img{float:left;cursor:pointer;}
.input-group.captcha .input-text{width:calc(100% - 110px);float:right;}
.input-group.captcha:after{content:"";display:block;clear:both;}
.input-group:last-child{margin:0;}
.input-group .input-title{margin:0 0 10px 0;font-weight:bold;}
.input-group.error .input-title:before{content:"\f05c";display:block;margin:0 5px 0 0;padding:2px;text-align:center;box-sizing:border-box;width:15px;float:left;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:100%;color:#ca0000;animation:blink-animation normal 1s infinite ease-in-out;}
.input-group.error > span{display:inline-block;margin-top:5px;font-size:90%;color:#ca0000;animation:blink-animation normal 1s infinite ease-in-out;}
.input-group .input-text{margin:0;padding:0;border:solid 1px #bdbdbd;background:#fff9e6;}
.input-group .input-text:focus-within{border-color:#28a745;background:#e8e8e8;}
.input-group .input-text:after{content:"";display:block;clear:both;}
.input-group .input-text > i{margin:0;padding:10px;width:20px;box-sizing:border-box;float:left;color:#313131;}
.input-group .input-text input,
.input-group .input-text textarea,
.input-group .input-text select{margin:0;padding:9px;border:none;width:calc(100% - 25px);float:right;outline:none;background:transparent;font-family:arial;font-size:100%;}
.input-group .input-text textarea{resize:none;height:100px;line-height:18px;}
.input-group li:before{content:none !important;}
.input-group ul{margin-left:-5px !important;}
.input-group li{margin-right:10px !important;padding:10px !important;display:inline-block;cursor:pointer;}
.input-group li i{margin:0;padding:0;font-size:130%;width:20px;text-align:left;float:left;}
.input-group > button{margin:0 10px 0 0;padding:8px 15px;border:none;color:#fff;font-weight:bold;border-radius:4px;outline:none;cursor:pointer;}
.input-group > button.red{margin:0;}
.input-group > button[disabled="disabled"]{opacity:0.6;}
.input-group.browse:after{content:"";display:block;clear:both;}
.input-group.browse .input-text{width:calc(100% - 120px);float:left;}
.input-group.browse button{float:right;width:100px;margin-top:2px;padding:8px;box-sizing:border-box;}


#popup,
#loading,
#alert{margin:0;padding:0;position:fixed;top:0;left:0;background:#000000ab;width:100%;height:100%;z-index:500 !important;text-align:center;backdrop-filter:blur(4px);}
#loading i{margin:0;padding:0;font-size:300%;color:#fff;}

#popup .register-form{margin:0 auto;padding:20px;background:#fff;width:80%;max-width:800px;max-height:500px;overflow:auto;box-sizing:border-box;box-shadow:5px 5px 10px #000000;}
#popup .register-form h2{margin:0 0 20px 0;padding:0;font-size:110%;text-transform:uppercase;}
#popup .register-form .input-text{background:#fffbed;}
#popup .register-form .wrap-image-form{margin:0 auto 20px auto;padding:0;width:150px;border:solid 4px #212121;position:relative;}
#popup .register-form .wrap-image-form .img-preview{margin:0;padding:0;width:100%;}
#popup .register-form .wrap-image-form .img-preview img{width:100%;}
#popup .register-form .wrap-image-form button{margin:0 auto;padding:5px 10px;border:none;color:#fff;width:100%;cursor:pointer;outline:none;}
#popup .register-form .wrap-image-form .mini-button{margin:0;padding:5px;width:auto;position:absolute;top:-2px;right:-2px;background:#212121;}
#popup .register-form .wrap-image-form .mini-button i{margin:0;padding:0;color:#ff4d4d;}
#popup .register-form .input-group.group-kelamin ul{margin:0;padding:0;}


#alert{z-index:99;}
#alert .alert-box{margin:0;padding:20px;background:#fff;}
#alert .alert-content{margin:0 auto 20px auto;padding:0;width:300px;line-height:20px;}
#alert ul{margin:0 auto;padding:0;width:200px;text-align:left;}
#alert button{margin:0 10px 0 0;padding:8px 15px;border:none;color:#fff;font-weight:bold;border-radius:4px;outline:none;cursor:pointer;}

.ui-autocomplete{position:absolute;cursor:default;max-height:100px;overflow:auto;background:#FFF;border:solid 1px #cccccc;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.ui-menu{list-style:none;padding:3px;margin:0;display:block;float:left;}
.ui-menu .ui-menu{margin-top:-3px;}
.ui-menu .ui-menu-item{margin:0;padding:0;zoom:1;float:left;clear:left;width:100%;}
.ui-menu .ui-menu-item a{text-decoration:none;display:block;padding:5px 10px;line-height:1.5;zoom:1;font-size:90%;font-family:verdana;border-radius:5px;}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active{font-weight: normal;margin:0;background:#ececec;}

#ui-datepicker-div{margin:0;padding:5px;background:#fff;border:solid 1px #bdbdbd;border-radius:5px;box-shadow:5px 10px 15px #1b1b1b;display:none;}
#ui-datepicker-div .ui-datepicker-header{margin:0;padding:5px 10px;background:#d8d8d8;border-radius:3px;}
#ui-datepicker-div .ui-datepicker-header .ui-corner-all{margin:-4px;padding:5px;float:left;font-size:90%;cursor:pointer;}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-next{float:right;}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title{margin:0;padding:0;text-align:center;font-weight:bold;}
#ui-datepicker-div .ui-datepicker-calendar{font-size:100%;border-spacing:2px;}
#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td{margin:0;padding:0;text-align:right;}
#ui-datepicker-div .ui-datepicker-calendar th span,
#ui-datepicker-div .ui-datepicker-calendar td a{margin:0;padding:5px;display:block;text-decoration:none;color:#000;}
#ui-datepicker-div .ui-datepicker-calendar td a{background:#ececec;border-radius:2px;}
#ui-datepicker-div .ui-datepicker-calendar td:first-child a{background:#fbd2d2;}
#ui-datepicker-div .ui-datepicker-calendar td:nth-child(6) a{background:#c2ead1;}
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight{background:#313131;color:#fff;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a{background:#c7c7c7;color:#000;}
#ui-datepicker-div .ui-datepicker-calendar td a:hover{background:#c7c7c7;color:#000;}

.red{background:#dc3545;}
.red:hover,
.red:focus{background:#b92f3c;}
.blue{background:#007bff;}
.blue:hover,
.blue:focus{background:#0064d0;}
.green{background:#28a745;}
.green:hover,
.green:focus{background:#1f8a38;}
.purple{background:#6f42c1;}
.purple:hover,
.purple:focus{background:#6038a9;}

.vcenter-helper{display:table;width:100%;height:100%;}
.vcenter-content{display:table-cell;vertical-align:middle;position:relative;}
.clear{clear:both;}
.txt-red{color:#b00;}
.txt-bold{font-weight:bold;}
.hide{display:none;}
.force-hide{display:none !important;}
.link{cursor:pointer;}

@keyframes volks{0%{left:-23%;}100%{left:100%;}}
@keyframes cyclist{0%{left:-7%;}100%{left:100%;}}
@keyframes blink-animation {
  50% {
    opacity: 0;
  }
}

@media screen and (max-width:1100px){
    /*header ul#main-menu-auto{display:none;}*/
    header ul#main-menu-top{display:block;}
    header ul#main-menu-auto{margin:0;position:absolute;left:130px;top:50px;display:none;}
    header ul#main-menu-auto li{display:block;padding:10px;background:#3a3a3a;color:#fff;}
    header ul#main-menu-auto li:hover{background:#5a5a5a;}
}

@media screen and (max-width:1000px){
    main #content .nofull,
    footer .nofull{width:100%;}
    main #content.wrap-main{width:95%;}
    footer .half.left{width:60%;}
    footer .half.right{width:40%;}
    footer .half .foot-menu{width:40%;}   
}

@media screen and (max-width:900px){
    main #content .half,
    main #content .half.left,
    main #content .half.right,
    footer .half,
    footer .half.left,
    footer .half.right{float:unset;width:100%;clear:both;}
    footer .half.right{margin:0 auto;width:400px;text-align:center;}
    footer .footer-animation p{width:95%;}
}

@media screen and (max-width:800px){
    footer .footer-animation p{text-align:center;}
    footer .footer-animation p span{float:unset;display:block;margin-top:5px;}
    footer .footer-animation img.animation{bottom:65px;height:150px;}
    footer .footer-animation img.cyclist{bottom:105px;height:70px;}
}

@media screen and (max-width:660px){
    #popup .register-form .input-group.group-nama,
    #popup .register-form .input-group.group-kelamin{width:100%;}
}

@media screen and (max-width:500px){
    header{height:110px;}
    header ul{width:100%;text-align:center;}
    main{margin-top:110px;}
    header ul#main-menu-auto{top:110px;left:0;}
}

@media screen and (max-width:350px){
    #login-form{width:90%;}
}