body{overflow-x: hidden;}
body,.btn,a {font-size: .875rem;}
a{text-decoration:none!important; color:#0095DA;cursor: pointer; }
hr {margin-left: 0;max-width: 40px;}
.jumbotron {position: relative; background: url(../img/bg2.jpg) no-repeat bottom center/cover;}
.header-bg{background-color: #ffffff;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);}
.morecontent span {display: none;}
.morelink {display: block;}
.form-control{padding: .4rem .75rem;}
.jumbotron:before {position: absolute;content: "";top: 0;left: 0;width: 100%;height: 100%;
  background: linear-gradient(135deg,rgba(104,210,242,.75),rgba(75,137,220,.75));}
.jumbotron .container { padding: 75px 0;}
.jumbotron h1,.jumbotron .lead {  color: #fff;}
.lead-logo a{padding: 10px;margin-right: 5px;background: #fff;border-radius: 10px;box-shadow: 0px 0px 10px rgb(0 0 0 / 40%);margin-top: 10px;}
.lead-logo a img{width: 100px;height: 100px;}
.lead-logo a p{margin-bottom: 0px;padding-top: 5px;color: #27276b;font-weight: bold;}
.lead-logo a img:hover{opacity: 0.7;}
.lead-logo{display: grid;grid-template-columns: 150px 150px 150px 150px;justify-content: center;}
.text-bold{font-weight: bold;}
.btn-primary {background: #1096fc;border: 0;}
.btn-primary:hover { background: #0384e5;}
.sec-features .row:nth-of-type(n+2) { margin-top: 60px;}
.sec-features .row:last-of-type { margin-bottom: 60px;}
.sec-features .feature-icon { max-width: 150px;}
.sec-testimonials { padding-top: 25px;padding-bottom: 25px;background: #f6f6f6;}
.carousel-indicators {bottom: -30px;}
.carousel-indicators li {background: rgba(33, 33, 33, 0.1);}
.carousel-indicators li:focus, .carousel-indicators li:hover {background: rgba(33, 33, 33, 0.5);}
.carousel-indicators .active {background: rgba(33, 33, 33, 0.75);}
.carousel-control-next,.carousel-control-prev {color: #212121;}
.carousel-control-next:focus, .carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover { color: #111;}
.footer { padding-top: 24px;padding-bottom: 24px;background: #212121;}
.footer li:nth-of-type(n+2) {margin-left: 8px;}
.footer a {font-size: 18px;color: rgba(255, 255, 255, 0.5);transition: color 0.235s ease-in-out;}
.footer a:focus, .footer a:hover { color: rgba(255, 255, 255, 0.25);}
.center-sec{margin-top: 20px;margin-bottom: 20px;}
.navbar-logo img{width: 100px;}
.btn-cir{background-color: #27276b;border-color: #263d82;}
.btn-cir:hover{background-color: #f2b906;border-color: #f2b906;}
.btn-add{border-radius: 0;}
label span{color:red}
.error{color:red}
.span-error{color:red}
.input-group-sty{padding: .4rem .75rem; border: 1px solid rgba(0,0,0,.15);background-color: #f6f6f6;border-right: 0px;}
.h4size{font-size: 22px;margin-bottom: 15px;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{border: 1px solid #27276b;background-color: #27276b;background:#27276b; color: #fff !important;}
.loader-model{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: fixed; margin: 0; z-index: 2; top: 0;}
.loader-model-2{ margin: 0; z-index: 2; }
  .spin_loader { position: absolute; left: 50%; top: 50%;z-index: 1; border: 7px solid #f3f3f3;border-radius: 50%; border-top: 6px solid #3498db; width: 50px; height: 50px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

/*Login*/
.form-style input{border:0; height:50px; border-radius:0;border-bottom:1px solid #ebebeb;}
.form-style input:focus{border-bottom:1px solid #007bff; box-shadow:none;outline:0;background-color:#ebebeb; }
.sideline { display: flex;width: 100%; justify-content: center;align-items: center;text-align: center;color:#ccc;}
.loginbutton{height:50px;}
.sideline:before,.sideline:after { content: ''; border-top: 1px solid #ebebeb; margin: 0 20px 0 0;flex: 1 0 20px;}
.sideline:after { margin: 0 0 0 20px;}
.sidebar-container {position: fixed;width: 220px;height: 100%;left: 0;overflow-x: hidden;overflow-y: auto;background: #27276b; color: #fff;}
.content-container { padding-top: 20px;}
.sidebar-logo {padding: 7px 14px 9px 17px;font-size: 20px; background-color: #fff; text-align: center;border-right: 2px solid #27276b;}
.sidebar-navigation {padding: 0;margin: 0; list-style-type: none;position: relative;}
.sidebar-navigation li {background-color: transparent;position: relative;display: inline-block;width: 100%;line-height: 20px;}
.sidebar-navigation li a {padding: 10px 15px 10px 30px;display: block; color: #fff;}
.sidebar-navigation li .fa {margin-right: 10px;}
.sidebar-navigation li a:active,.sidebar-navigation li a:hover,.sidebar-navigation li a:focus {text-decoration: none; outline: none;}
.sidebar-navigation li::before {background-color: #f2b906;position: absolute;content: '';height: 100%;left: 0;top: 0;  -webkit-transition: width 0.2s ease-in;transition: width 0.2s ease-in;width: 3px;  z-index: -1;}
.sidebar-navigation li:hover::before {width: 100%;}
.sidebar-navigation .header { font-size: 12px; text-transform: uppercase; background-color: #151515;padding: 10px 15px 10px 30px;}
.sidebar-navigation .header::before { background-color: transparent;}
.content-container {padding-left: 220px;}
.breadcrumb {padding: .3rem 0.7rem;margin-bottom: 0.5rem;list-style: none;background-color: transparent;border-radius: .25rem;}
.action-btn{padding: 4px 8px; border: 1px solid; border-radius: 50%;cursor: pointer;}
.btn-add-admin{padding: .2rem 0.6rem;}
.header-sec h4{font-size: 20px;color: #27276b;}
.header-sec{margin-bottom: 15px;}
.modal .modal-dialog-aside{ width: 350px; max-width:80%; /*height: 100%; margin:0;transform: translate(0); transition: transform .2s;*/}
.modal .modal-dialog-aside .modal-content{  height: inherit; border:0; border-radius: 0;}
.modal .modal-dialog-aside .modal-content .modal-body{ overflow-y: auto }
/*.modal.fixed-left .modal-dialog-aside{ margin-left:auto;  transform: translateX(100%); }
.modal.fixed-right .modal-dialog-aside{ margin-right:auto; transform: translateX(-100%); }*/
.modal.show .modal-dialog-aside{ transform: translateX(0);  }
#map { width: 100%; height: 500px; border: 2px solid #999; padding: 0px;}
.login-img-sty{width: 200px;margin-right: auto;margin-left: auto;display: block;margin-top: 25vh;}
table.table-rainfall thead th, table.dataTable thead td{padding: 10px 10px;}
table.table-rainfall thead th{font-size: 11px;text-align: center;}
.btn-1{color: #27276b; cursor: pointer; font-weight: bold;padding: 2px 5px;font-size: .75rem;}
.btn-1:hover{color: #f2b906; text-decoration: none;}
.badge-siaga1 {
    background-color: #dc3545; /* red */
    color: #fff;
}

.badge-siaga2 {
    background-color: #ffc107; /* yellow */
    color: #000;
}

.badge-siaga3 {
    background-color: #007bff; /* blue */
    color: #fff;
}

.badge-siaga4 {
    background-color: #28a745; /* green */
    color: #fff;
}