html { height: 100vh; }
body { margin: 0px; padding: 0px; font: 12px "Roboto", "Lato", "Lucida Grande", Helvetica, Arial, sans-serif; overflow-x: hidden;}
#form-register fieldset:not(:first-of-type) {
  display: none;
}
.homepage {
  height: calc(100% - 150px);
  background-color: #3e79c7;
}
#form-register .panel-body, fieldset, .form-card { min-height: 90vh; }
.next {width: 49% !important; border-radius: 0px;}
.leftbtn { width: 49% !important; border-radius: 0px; margin-right: 1px; position: relative; bottom: 10px !important; }
.rightbtn {width: 49% !important; border-radius: 0px; float: right; position: relative; bottom: 10px !important; }

.page-break {
  page-break-before: always;
}

#markerAddress {
  display: block;
  max-height: 50px;
  width: 200px;
  border: solid 2px #3e79c7;
  border-radius: 5px;
  position: absolute;
  top: 39%;
  left: 42%;
  background-color: #fff;
  padding: 4px 10px;
  font-size: 11px;
}
#marker {
  width: 30px;
  display: block;
  position: absolute;
  top: 45.5%;
  left: 49.03%;
}
#confirmBtn {
  display: block;
  height: 30px;
  width: 160px;
  border: solid 2px #3e79c7;
  border-radius: 5px;
  position: absolute;
  bottom: 20px;
  left: 45%;
  background-color: #3e79c7;
  color: #fff;
  padding: 4px 10px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
#searchSchools {
  position: relative;
  height: 30px;
  width: 30%;
  border: solid 0px #3e79c7;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  left: 35%;
  background-color:transparent;
}
#searchQ {
  padding: 3px 10px;
  font-size: 12px;
  float: left;
  width: 40%;
}
.loading-div {
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw;
  min-height: 100vh;
  display: none;
  z-index: 999;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.7);
  padding: 25% 0px !important;
}
.loader{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}
/* LOADER 6 */
#loader-6{
  top: 40px;
  left: -2.5px;
}
#loader-6 span{
  display: inline-block;
  width: 5px;
  height: 20px;
  background-color: #fff;
}
#loader-6 span:nth-child(1){ animation: grow 1s ease-in-out infinite; }
#loader-6 span:nth-child(2){ animation: grow 1s ease-in-out 0.15s infinite; }
#loader-6 span:nth-child(3){ animation: grow 1s ease-in-out 0.30s infinite; }
#loader-6 span:nth-child(4){ animation: grow 1s ease-in-out 0.45s infinite; }
@keyframes grow{
  0%, 100%{
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
  }
  50%{
    -webkit-transform: scaleY(1.8);
    -ms-transform: scaleY(1.8);
    -o-transform: scaleY(1.8);
    transform: scaleY(1.8);
  }
}
/* Loader 6 */

a { color: #888; text-decoration: none; }
a.blue { color: dodgerblue; font-weight: bold; text-decoration: underline; }
.no-padding { padding: 0px !important; }
.full-height { min-height: 100vh; }
.font-white { color: #fff !important; }
.page-container { padding: 20px 40px; min-height: 75vh; }
#map { width: 100vw; height: 75vh; }
#mapLocation { width: 90vw; height: 90vh; }
.title-container {
  padding-top: 30px;
}
h1.title {
  line-height: 2px;
  font-weight: 300;
  font-size: 40px;
}
.header { background-color: #f0f0f0; height: 150px; padding: 20px; margin: 0px !important; }
.header-login { background-color: #f0f0f0; height: 150px; padding: 20px; margin: 0px !important; border-bottom: solid 4px #ec4a35; }
.footer { background-color: #3e79c7; min-height: 60px; height: 100%; padding: 0px; margin: 0px !important; color: #fff; }
.logo-header { margin: 0px 0px 0px 20px; width: 70px; }
.logo-header-login { margin: 10px 0px 0px 20px; width: 80px; }
.ul-horizontal { margin: 0px; padding: 0px; }
.ul-horizontal li { list-style-type: none; float: left; margin-left: 20px;}
.ul-horizontal li:first-child { margin-left: 0px; }

.link-footer li { height: 30px; padding: 20px 0px !important;}
.link-header li a { line-height: 26px; color: #666; font-size: 14px; font-weight: 400 !important;}
.link-footer li a { color: #fff; font-size: 12px; font-weight: 400 !important;}
.link-header-user li a { line-height: 16px; color: #fff; font-size: 14px; font-weight: 400 !important; letter-spacing: 0.05em; }

.ul-list-none { list-style-type: none; margin: 0px; padding: 10px 0px; }
.ul-list-none li { margin-left: 0px; }

.border-top { border-top: solid 4px #ec4a35 !important; }

.user-menu { height: 80% !important; font-size: 12px; }
.red-button { background-color: #ec4a35; color: #fff; font-size: 12px; padding: 4px 15px; }
.rounded-button { border-radius: 50rem; border: solid 0px #fff; }

ul.list-horizontal li {
  float: left;
  margin-right: 20px;
}
ul.list-unstyled {
  padding: 0px;
  margin: 0px;
}
ul.list-unstyled li {
  padding: 5px 0px;
}
ul li input[type='radio'] {
  margin-right: 5px;
}
.dropdown-menu {
  font-size: 12px;
  padding: 15px 20px;
}
.divider {
  height: 1px;
  border-bottom: dashed 1px #ddd;
  padding: 4px 0px;
  margin-bottom: 8px;
}

.pr-60 { padding-right: 60px !important; }
.pt-5 { padding-top: 5px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-60 { padding-top: 60px !important; }
.pt-80 { padding-top: 80px !important; }

.align-items-center { text-align: center !important; }
.btn-rounded { height: 45px; padding: 5px 20px; width: 100%; border-radius: 22px; font-weight: 600; font-size: 1.1em; letter-spacing: 0.1rem; }
.btn-block { height: 45px; border-radius: 0px; font-weight: 600; font-size: 1.1em; letter-spacing: 0.1rem; }
.register-image { width: 15%; margin: 20% 5%; font-size: 60px; padding: 0px 0px; background-color: #76c14d; color: #fff;}
.login-image { width: 100px; height: 100px; margin: 70px 0px 30px 0px; font-size: 60px; padding: 15px 25px; background-color: #76c14d; color: #fff;}
.login-input { border: solid 1px #90c73e; color: #999;padding: 6px 15px; margin: 4px 0px; line-height: 30px; display: block; width: 100%;}
.login-btn { font-size: 13px; background-color: #3e551c; color: #fff; border: 0px; padding: 6px 5px; margin: 4px 0px; line-height: 30px; }
.login-btn-header { width: 100%; padding: 8px 30px !important; }

.search-input { border: solid 1px #90c73e; color: #999;padding: 4px 15px; margin: 4px 0px; line-height: 20px; min-width: 400px;}
.title { font-family: "Roboto" !important; text-transform: uppercase; font-weight: 200; color: #666 !important; margin-bottom: 40px; }
.title-white { font-family: "Roboto" !important; text-transform: uppercase; font-weight: 400; color: #fff !important; margin-bottom: 40px; }
.title-red { font-family: "Roboto" !important; text-transform: uppercase; font-weight: 400; color: #be1e2d !important; margin-bottom: 40px; }
.bar-title { background-color: #ec4a35; height: 3px; width: 80px; }

.title-sidebar { position: relative; top: 25%; left: 20%; }

.about-container {
  background: url('../images/about.png') no-repeat left top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100vw;
  min-height: 75vh;
  font-family: "Roboto" !important;
  line-height: 24px;
}
ol { font-family: "Roboto" !important; padding-left: 20px; }
ol li { margin-bottom: 0px; border-top: solid 0px #666; padding: 4px 0px; }
ol.faq li p { display: none; }
ol.faq { cursor: pointer; }

.scroll-y { max-height: 88vh !important; overflow-y: scroll !important; min-height: 88vh !important; }
.fixed-position { position: fixed !important; }

.form-signin { width: 100%; max-width: 420px; padding: 15px; margin: auto; }
#form-register { margin: 60px 10px; }
.form-label-group { position: relative; margin-bottom: 1rem; }
.form-label-group > input, .form-label-group > label { height: 3.125rem; padding: .75rem; }

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  pointer-events: none;
  cursor: text; /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder { color: transparent; }
.form-label-group input:-ms-input-placeholder { color: transparent; }
.form-label-group input::-ms-input-placeholder { color: transparent; }
.form-label-group input::-moz-placeholder { color: transparent; }
.form-label-group input::placeholder { color: transparent; }
.form-label-group input:not(:placeholder-shown) { padding-top: 1.25rem; padding-bottom: .25rem; }

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group > label { display: none; }
  .form-label-group input::-ms-input-placeholder { color: #777; }
}

/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label { display: none; }
  .form-label-group input:-ms-input-placeholder { color: #777; }
}

/* Map */
.ol-zoom { top: 1.5em !important; left: 1.5em !important; }
.ol-zoom button { font-size: 1.5em !important; background-color: rgba(0,60,136,.7) !important; }
.ol-zoom button:hover { background-color: rgba(255, 255, 255, 0.7) !important; color: rgba(0,60,136,.8) !important; }
/* Map */
/* Popup Map */
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: -50px;
  right: -50px;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 4px;
  width: 18px;
  height: 18px;
  color: red;
}
.ol-popup-closer .fas {
  background-color: #fff;
  border-radius: 50%;
  padding: 1px;
  font-size: 16px;
}
#popup-content {
  overflow-y: scroll;
  max-height: 200px;
}
/* Popup Map */

/* Chart */
#piechart { height: 500px; }
#countrychart { height: 900px; }
/* Chart */

/* Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #6d6e70 !important; }

.select2-container .select2-selection--single {
  border: 1px solid #ced4da !important;
  height: 38px !important;
  padding: 4px 8px;
  font-size: 1.15em;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  padding: 6px 15px !important;
  margin-top: 5px;
}
/* Select2 */

/* infographics */
.infographics {
  border: solid 0px #8bc53f;
  border-radius: 0px;
  background-color: #f7f7f7;
}
.infographics-header {
  background-color: #8bc53f;
  border: solid 1px #8bc53f;
  padding: 10px 10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  text-align: center;
  color: #f1f1f2;
}
.infographics-footer {
  background-color: #8bc53f;
  border: solid 1px #8bc53f;
  padding: 0px 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.infographics-body {
  padding: 10px 10px;
  text-align: center;
  color: #6d6e70;
  width: 100%;
  margin: 0px auto;
}
.infographics-body h6 {
  font-size: 13px;
  text-align: left;
  line-height: 11px;
}
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }
.bold { font-weight: bold !important; }
.red { color: #be1e2d !important; }
.white { color: #fff !important; }
.infographics-circle {
  padding: 28px 10px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #8bc53f;
  border: solid 1px #f1f1f2;
  box-shadow: 1px 1px 10px rgba(100, 100, 100, .4);
  color: #ffffff;
  margin-top: -10px;
}
.infographics-large-circle {
  padding: 30px 30px;
  border-radius: 50%;
  background-color: #8bc53f;
  border: solid 1px #f1f1f2;
  box-shadow: 1px 1px 10px rgba(100, 100, 100, .4);
  color: #ffffff;
}
.rendah {
  font-size: 30px;
  font-weight: bold;
  background-color: #be1e2d;
  border: solid 1px #f1f1f2;
  color: #ffffff;
  white-space: pre;
  line-height: 14px;
}
.sedang {
  font-size: 30px;
  font-weight: bold;
  background-color: #faaf40;
  border: solid 1px #f1f1f2;
  color: #ffffff;
  white-space: pre;
  line-height: 14px;
}
.tinggi {
  font-size: 30px;
  font-weight: bold;
  background-color: #009345;
  border: solid 1px #f1f1f2;
  color: #ffffff;
  white-space: pre;
  line-height: 14px;
}
.infographics-border-bottom { border-bottom: solid 4px #d0d2d3; }
.mb-30 { margin-bottom: 30px; }
small { font-size: 12px; }
.color-green-lime { color: #76c14d; }
.color-green-lime2 { color: #3e79c7; }
.bg-grey { background-color: #d0d2d3; border: solid 0px #fff; color: #999; }
.bg-red { background-color: #be1e2d; border: solid 0px #fff; color: #fff; }
.bg-orange { background-color: #faaf40; border: solid 0px #fff; color: #fff; }
.bg-green { background-color: #009345; border: solid 0px #fff; color: #fff; }
.bg-green-lime { background-color: #76c14d; border: solid 0px #fff; color: #fff; }
.bg-green-lime2 { background-color: #3e79c7; border: solid 0px #fff; color: #fff; }
table td { padding: .5rem !important; }
.chart_in_table { height: 24px; background-color: #6d6e70; border: solid 0px #fff; border-radius: 12px;}
.progress_chart_in_table { height: 24px; padding: 0px 0px; border-top-left-radius: 12px; border-bottom-left-radius: 12px;}
.progress_text_in_chart { font-size: 0.85em; color: #fff; position: relative; top: -20px; left: 9px;}
/* infographics */

/* school detail */
.card-kotak, .card-kotak-header { border-radius: 0px !important; border: 0px !important; }
.school-info { height: 260px; }
#radarchart { padding: 0px 0px; min-height: 220px; }
#radarschool { min-height: 220px; }
#radarteacher { min-height: 220px; }
#radarstudent { min-height: 220px; }
#speedochart { min-height: 220px; }
/* .card-kotak {  */
  /* margin-bottom: 10px;  */
  /* border-bottom: solid 1px #f1f1f2 !important; */
  /* -webkit-box-shadow: inset 0px -20px 20px -20px rgba(200,200,200,1); */
  /* -moz-box-shadow: inset 0px -20px 20px -20px rgba(200,200,200,1); */
  /* box-shadow: inset 0px -20px 20px -20px rgba(200,200,200,1); */
/* } */
.card-kotak-header {
  background-color: #3e79c7;
  border: solid 0px #3e79c7 !important;
  color: #fff;
}
.card-kotak-header h5 {
  font-size: 0.9rem !important;
  padding-top: 8px;
  text-transform: uppercase;
  font-weight: 400;
}
.textspeedo {
  font-size: 1rem;
  margin-top: -1.7em;
  margin-bottom: 0.5em;
  color: #777;
  font-weight: 400;
}
dt, dd { color: #777; border-bottom: solid 1px #d0d2d3; letter-spacing: 0.01em; }
dd { margin-bottom: 2.5rem;}
dd.medium { font-size: 0.95em; letter-spacing: 0.01em; margin: 0px 0px 5px !important; padding: 4px 0px !important;}

dl.form-input dt { 
  font-size: 13px; 
  padding: 8px 10px;
  text-align: right;
  text-transform: uppercase;
}
dl.form-input input, dl.form-input textarea { font-size: 13px; }
dl.form-input dt, 
dl.form-input dd {
  border: 0px !important;
}

dl.form-survey dt { 
  font-size: 13px; 
  padding: 0px 0px;
  text-transform: uppercase;
}
dl.form-survey input, dl.form-survey textarea { font-size: 12px; }
dl.form-survey dt, 
dl.form-survey dd {
  border: 0px !important;
}
/* school detail */

/* user page */
.user-page-header {
  min-height: 100px;
  height: 12vh;
  width: 100vw;
  padding: 10px 10px;
}
/* user page */

/* modal school detail */
.modal-dialog {
  max-width: 90vw;
  margin: 1.75rem auto;
  height: 90vh;
}
.modal-content {
  height: 90vh;
}
.modal-body {
  height: 90vh;
  overflow-y: scroll;
  padding: 0.1rem;
}
.close-modal {
  height: 30px;
}
.close-modal span {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 20px;
  color: red;
}
/* modal school detail */

/* loading animation */
.spinner {
  margin: 30% auto 0;
  width: 100px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  background-color: #6d6e70;

  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.48s;
  animation-delay: -0.48s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce3 {
  -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);
  }
}
/* loading animation */

/* language */
#lang-select + .select2-container .select2-selection--single {
  height: 32px !important;
  padding: 1px 8px !important;
  border-radius: 19px !important;
}
#lang-select + .select2-container--default .select2-selection--single .select2-selection__arrow {
  margin-top: 2px !important;
}
/* language */

/* legal */
abbr {
  padding: 10px 20px;
  border-left: solid 2px #d0d2d3;
  margin-bottom: 20px;
}
abbr address {
  margin-bottom: 0px;
}
/* legal */

/* search result */
#search-map-home {
  position: absolute;
  top: 180px;
  left: 80px;
  width: 250px;
}
#search-school-location {
  font-size: 12px;
}
.reset-map {
  background-color: red;
  padding: 2px 10px !important;
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
  color: #fff;
  display: none;
  cursor: pointer;
}
#search-result {
  display: none;
  width: 100%;
  max-height: 300px;
  border: solid 1px #cccccc;
  z-index: 999999;
  position: absolute;
  top: 32px;
  background-color:white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: scroll;
}
ul.search-result {
  list-style-type: none;
  margin-left: 0px;
  padding: 0px 0px;
}
li.search-result {
  list-style-type: none;
  float: none;
  clear: both;
  margin: 0px 0px;
  font-size: 13px;
  cursor: pointer;
  padding: 10px 10px;
  color: #6d6e70;
}
li.search-result:hover {
  color: #be1e2d;
  background-color: #f0f0f0;
}
#search-result-map-register {
  display: none;
  width: 100%;
  max-height: 300px;
  border: solid 1px #cccccc;
  z-index: 999999;
  position: absolute;
  top: 32px;
  background-color:white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: scroll;
}
ul.search-result-map-register {
  list-style-type: none;
  margin-left: 0px;
  padding: 0px 0px;
}
li.search-result-map-register {
  list-style-type: none;
  float: none;
  clear: both;
  margin: 0px 0px;
  font-size: 13px;
  cursor: pointer;
  padding: 10px 10px;
  color: #6d6e70;
}
li.search-result-map-register:hover {
  color: #be1e2d;
  background-color: #f0f0f0;
}
/* search result */