/**
adalah kumpulan css yang sering digunakan
**/

.inputBox{padding: 5px 20px;  border-radius: 15px;}
.inputBox input{width: 100%; border: none; background: transparent; font-size: 17px; outline: none; color: white; font-family: light; padding: 2px 0px;}
.button{padding: 8px 20px 9px 20px; border-radius: 7px; border: none; outline: none; cursor: pointer; transition:all 0.2s ease;}
.button:not(.btn_transparent):hover{background: transparent; box-shadow: inset 0px 0px 0px 2px silver; color: silver;}
.button.btn_transparent{background: transparent;}
.button .btn_icon_right{width: 13px; height: 13px; float: right; margin-left: 10px;}

.closebtn{height: 20px; padding: 5px;}
.closebtn .icon{width: 20px; height: 20px; margin-left: 5px;}

.popup_close{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); position: fixed; top: 0px; left: 0px; z-index: 51;}
.popup_cvs{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 52;}
.popup_cvs .pc_head{padding: 10px 15px 12px 15px; text-align: center; font-family: 'bold'; font-size: 17px; width: 85%; max-width: 300px; margin-top: 50px; margin-bottom: 20px; border-radius: 100px;}
.popup_cvs .pc_head .pch_close{width: 25px; height: 25px; position: relative; top: -2px;}
.popup_cvs .pc_body{padding: 15px 15px 18px 15px; width: 85%; max-width: 300px; border-radius: 15px;}

.description{line-height: 25px; font-size: 15px;}
.description img{margin: 5px auto; max-width: 100%;}
.description p{margin-bottom: 15px;}
.description pre{overflow: auto;}
.description img, .description iframe{margin: 10px auto;}
.description img{max-width: 100%; display: block;}
.description iframe{width: 100%; height: 400px;}
.description li{margin-left: 40px;}
.description h1{line-height: 40px;}
.description blockquote{padding: 10px 10px 11px 10px; border-left: 2px solid #DFDFE4;}

.bg_gradient_black{background: rgba(0, 0, 0, 0.25); background: -webkit-linear-gradient(transparent, black); background: -o-linear-gradient(transparent, black); background: -moz-linear-gradient(transparent, black); background: linear-gradient(transparent, black);}
.bsize{background-size: 100%;}
.alert{height: 0px; width: 100%; position: fixed; left: 0px; top: -200px; z-index: 5; text-align: center;}
.alert .alert_info{padding: 15px 20px 16px 20px; background: #060804; width: 70%; max-width: 400px; border-radius: 200px; box-shadow: 0px 0px 5px #060804;}
.line{height: 1px; background: #eaeaea;}
.left{float: left;}
.right{float: right;}
.list{padding: 5px 0px 6px 0px;}
.contentbody{padding: 10px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mt15{margin-top: 15px;}
.mr10{margin-right: 10px;}
.mt10{margin-top: 10px;}
.plr{padding: 0px 10px;}
.hidden{display: none;}
.slow{-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease;}
.pointer{cursor: pointer;}
.clear{clear: both;}

.fz_mini{font-size: 11px;}
.fz_normal{font-size: 13px;}
.fz_medium{font-size: 17px;}
.fz_big, h1{font-size: 20px;}

.text_white{color: white;}
.text_black{color: #073543;}
.text_pink{color: #e44b9e;}
.text_green{color: #0db991;}
.text_lightgreen{color: #95cb2b;}
.text_orange{color: #f49e15;}
.text_blue{color: #12c0ce;}
.text_purple{color: #6374b3;}

.bg_header_garis{background-image: url('../images/general/bg_garis.png'), linear-gradient(to bottom, #1a5496 , #007788);}
.bg_headersub_garis{background-image: url('../images/general/bg_garis.png'); background-color: #007788;}
.bg_tosca_garis{background-image: url('../images/general/bg_garis.png'), linear-gradient(to bottom, #125497 , #00c2ff);}
.bg_tosca_catur{background-image: url('../images/general/bg_catur.png'), linear-gradient(to bottom, #00c2ff , #4b257f);}
.bg_toscalight_tosca_garis{background-image: url('../images/general/bg_garis.png'), linear-gradient(to bottom, #0cbaba , #01778a);}

.bg_white{background-color: white;}
.bg_whitesmoke{background-color: whitesmoke;}
.bg_black{background-color: #073543;}
.bg_pink{background-color: #e44b9e;}
.bg_green{background-color: #0db991;}
.bg_lightgreen{background-color: #95cb2b;}
.bg_orange{background-color: #f49e15;}
.bg_lightorange{background-color: #fdb02e;}
.bg_purple{background-color: #6374b3;}
.bg_red{background-color: #ef2840;}
.bg_blue{background-color: #12c0ce;}
.bg_tosca{background-color: #00bbff;}
.bg_tosca_dark{background-color: #008aa0;}
.bg_tosca_black{background-color: #02afbe;}
.bg_purple{background-color: #30224e;}
.bg_purple_toscalight{background-image: linear-gradient(to bottom, #4b257f , #0cbaba);}
.bg_darkpurple_tosca{background-image: linear-gradient(to right, #380036 , #0cbaba);}

.gr_blue{background-image: linear-gradient(to right, #388dc8 , #1a5496);}
.gr_tosca{background-image: linear-gradient(to right, #00bfce , #008aa0);}
.gr_purple{background-image: linear-gradient(to right, #6c33bb , #30224e);}
.gr_toscalight{background-image: linear-gradient(to right, #04d8e1 , #02afbe);}

::-webkit-scrollbar {width: 7px; height: 7px;}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #1a5496; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

/**LOADING**/
.spinner{margin-top: 5px; padding-bottom: 10px; width: 70px; text-align: center;}
.spinner > div {width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce1 {-webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.spinner .bounce2 {-webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}