/**
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; color: white; outline: none; cursor: pointer;}

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

.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;}
.mb10{margin-bottom: 10px;}
.mr10{margin-right: 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;}

.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_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_blue{background-color: #12c0ce;}
.bg_purple{background-color: #6374b3;}

/**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) }
}

/*popup css*/

.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;}



.bg_white{background-color: white;}