@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
:root {
    --bs-black              : #010101;

    --bs-primary-dark       : #0474b0;
    --bs-primary            : #0081C9;
    --bs-primary-light      : #EEF5FF;

    --bs-secondary          : #002134;
    --bs-secondary-light    : #444e54;
    
    --bs-success            : #1fbd83;
    --bs-info               : #50a5f1;
    --bs-warning            : #FDA403;
    --bs-yellow             : #FDA403;
    --bs-danger             : #f46a6a;
    --bs-red                : #D71313;
    --bs-light              : #eff2f7e9;
    --bs-dark               : #343a40;
    --bs-font-sans-serif    : "Roboto", sans-serif;
    --bs-font-monospace     : SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient           : linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); 
  }
  .tingkat{
    font-weight: 600;
    font-size: 11.5pt;
    padding-right: 3px;
    font-family: var(--bs-font-monospace) !important;
  }
  .pointer{
    cursor: pointer !important;
  }
  .bg-primary{
    background-color: var(--bs-primary) !important;
  }
  .btn-primary{
    border-color: var(--bs-primary-dark) !important;
    background-color: var(--bs-primary) !important;
  }
  .border-primary{
    border-color: var(--bs-primary) !important;
  }
  
  .bg-primary-dark{
    background-color: var(--bs-primary-dark) !important;
  }
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.bg-primary.bg-soft{
    background-color: #e8fdfc !important;
}

.text-red{
    color: var(--bs-red);
}

.fw-light{
    font-weight: 300 !important;
}
.fw-medium{
    font-weight: 500 !important;
}
.shadow-lg{
    box-shadow: 0px 0px 35px #dfdfdf !important;
}
.border-grey{
    border-color: #DDD !important;
}
h1, h2, h3, h4, h5,.card-title, .h1, .h2, .h3, .h4, .h5{
    font-weight: 500;
    color: #121212 !important;
}
.text-tingkat{
    font-family: 'Times New Roman', Times, serif !important;
    font-weight: 600;
    font-size: 110% !important;
}
body, body p {
    
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12pt !important;
    font-weight: 400;
    color: #121212 !important;
    margin-bottom: 7px !important;;
}

li.disabled .page-link{
    border-color: #DDD !important;
    background-color: #eee !important;
  }
.page-link{
    color: white;
    border-color: var(--bs-primary-dark) !important;
    background-color: var(--bs-primary) !important;
    outline: none !important;
}
li.active .page-link{
    border-color: var(--bs-primary-dark) !important;
    background-color: var(--bs-primary-dark) !important;
}

.page-link:hover{
border-color: var(--bs-primary-dark) !important;
background-color: var(--bs-primary-dark) !important;
color: white;
}
.v-scroll-sm{
    position: relative;
    overflow-y: hidden;
    max-height: 250px !important;
    overflow-x: hidden;
    margin-right: 0px;
    padding-right: 4px;
    padding-bottom: 5px;
    border-bottom:1px solid #dfdfdf;
}
.v-scroll-sm:hover{
    overflow-y:auto;
    margin-right: -10px;
    padding-right: 2px;
}

.v-scroll-sm::-webkit-scrollbar {transition: all 1s ease-out;
    width: 12px;
  }
   
.v-scroll-sm::-webkit-scrollbar-track {
    background-color: transparent;
  }
   
.v-scroll-sm::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border:1px solid #dfdfdf;
    height: auto;
    border-radius: 20px;
  }


.btn-rounde{
    border-radius: 50%;
}
.vertical-menu li span{
    /* font-weight: 400; */
}
label{
    font-weight: 400;
}
.form-floating > label, .form-label {
    font-size: 11pt !important;
    font-weight: 400;
}
.span-label{
    background-color: white;
    margin-left: 8px;
    margin-bottom: -6px;
    padding-left: 7px;
    padding-right: 7px;
    line-height: 12px;
    font-size: 11pt;
    text-transform: capitalize;
    display: table;
    position: relative;
    z-index: 1;
}
input.form-control, textarea.form-control{
    font-size: 12pt;
}
select.mapel{
    color: var(--bs-black) !important;
    font-weight: 400;
    padding: 5px !important;
}

input, select, textarea{
    color: var(--bs-black) !important;
    font-weight: 400;
}
.listguru option {
    font-size: 15px;
    padding: 5px;
}
.form-label{
    margin-bottom: 5px !important;
}
.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.75rem 1rem;
    font-size: 15pt !important;
    border-radius: 0.4rem; 
}
.form-control-lg::file-selector-button {
      padding: 0.5rem 1rem;
      margin: -0.5rem -1rem;
      -webkit-margin-end: 1rem;
      margin-inline-end: 1rem; 
}
.form-control-lg::-webkit-file-upload-button {
      padding: 0.5rem 1rem;
      margin: -0.5rem -1rem;
      margin-inline-end: 1rem; 
      -webkit-margin-end: 1rem;
}
.fs-large{
    font-size: 30pt;
    line-height: 30px;
}
p.lh-sm{
    line-height: 18px !important;
}
.img-preview{
    max-width: 100%;
    background-color: #EAEAEA;
    padding: 5px;
}
.modal-footer{
    text-align:left !important;
}

.kotak, .card{
    border-radius: 4px !important;
    box-shadow: 0 0 35px #E4E4E4 !important;
    margin-bottom: 25px !important;
    border: 1px #e9e9e9 solid !important;
}
.kotak .main{
    padding: 15px 20px;
    margin: 0;
}

.kotak .judul{
    padding: 15px;
    border-bottom: 1px #EAEAEA solid;
    font-weight: 500;
    font-size: 13pt;
    margin: 0;
    color: var(--bs-secondary);
}
.kotak .judul .btn-more{
    width: 30px;
    height: 30px;
    line-height: 28px;
    padding: 0;
}
.bawah{
    padding: 10px 15px;
    border-top: 1px #EAEAEA solid;
    font-weight: 500;
    font-size: 13pt;
    color: var(--bs-secondary);
    margin: 0;
}

ol.nonumber{
    padding-left: 15px;
    list-style-type:none;
}
ol.lisprofil{
    padding-left: 15px;
    list-style-type:decimal;
    margin-bottom: 0;
}
ol.lisprofil li, 
ol.nonumber li{
    margin-bottom: 10px;
}

ol.lisprofil li, 
ol.nonumber li{
    width: auto;
}
ol.nonumber span:first-child{
    display: inline-block;
    width: 140px;
}

ol.lisprofil span:first-child{
    display: inline-block;
    padding-left: 10px;
    width: 150px;
}
ol.lisprofil span:last-child,
ol.nonumber span:last-child{
    display: inline-block;
    width: auto;
    padding-left: 15px;
    width: auto;
}
.akreditasi{
    float: right;
    font-size: 50px;
    width: 100px;
    font-weight: 700;
    line-height: 70px;
    border: 5px #555 solid;
    text-align: center;
}

.akreditasi small{
    line-height: 5px;
    margin-top: 15px;
    font-size: 13pt;
    display: block;
    font-weight: 400;
}
.dashed{
    border-bottom: 1px #333 dashed;
}
.caretlist{
    display: block;
}
.caretlist i{
    color:var(--bs-black);
}
.caretlist:hover i{
    color:var(--bs-success);
}
.dot-atas{
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--bs-primary);
    height: 100%;
    width: 10px;
}
img {
image-rendering: crisp-edges !important;
}
.headtable td{
    border-bottom: 5px #DDD solid !important;
}
/* A4 */
/* !A4 */


/* Custom Style */
body, p{
  font-size: 14px !important;
}
.mh-md{
  min-height: 550px;
}
/* Background & Color */
.bg-primary-light {
  background-color:  var(--bs-primary-light) !important;
}
.text-primary{
  color: var(--bs-primary) !important;
}
.text-yellow{
  color: var(--bs-yellow) !important;
}
.text-black{
  color: #000 !important;
}

.border-secondary-light{
  border-color: var(--bs-secondary-light) !important;
}
/* Tombol */
.btn-outline-primary {
  color:var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
  color:#FFF !important;
  background-color:var(--bs-primary) !important;
}

.btn-primary {
  background-color:  var(--bs-primary) !important;
  border-color: var(--bs-primary-dark) !important;
}

.btn-primary:hover {
  background-color: var(--bs-primary-dark) !important;
}

a{
  color: var(--bs-primary) ;
}
a:hover{
  color: #000;
}
.card-list{ 
  transition: all 0.25s ease;
  border: 1px #EAEAEA solid !important;
}
.card-list:hover{ 
  background-color: var(--bs-light) !important;
  transition: all 0.25s ease;
}
.shadow{
  box-shadow: 0px 0px 35px #DDD !important;
}

.radius{
  border-radius: 14px !important;
}
.radius .radius{
  border-radius: 11px !important;
}

.lh-sm{
  line-height: 15px !important;
}
.dot{
  display: inline-flex;
  margin-top: 4px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}