@font-face {
  font-family: "Insantama";
  src: url("../fonts/insantama.ttf") format("truetype"),
    url("../fonts/insantama.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/insantama.woff2") format("woff2");
}
body > .navbar {
  z-index: 1050;
}
.app-title {
  font-size: 24px;
  /* font-family: Insantama; */
  vertical-align: middle;
  line-height: 30px;
}
.navbar-brand {
  min-width: 15rem !important;
}
.navbar-brand .logo > img {
  display: inline;
  position: absolute;
}
.navbar-brand .logo > .app-title {
  padding-left: 40px;
}
.m-top-10 {
  margin-top: 10px !important;
}
.m-top-20 {
  margin-top: 20px !important;
}
.m-top-30 {
  margin-top: 30px !important;
}
.m-top-40 {
  margin-top: 40px !important;
}
.m-top-50 {
  margin-top: 50px !important;
}
.m-bottom-10 {
  margin-bottom: 10px !important;
}
.m-bottom-20 {
  margin-bottom: 20px !important;
}
.m-bottom-30 {
  margin-bottom: 30px !important;
}
.m-bottom-40 {
  margin-bottom: 40px !important;
}
.m-bottom-50 {
  margin-bottom: 50px !important;
}
.width-500 {
  width: 500px !important;
}
.no-border {
  border: 0 !important;
}
.with-border {
  border-bottom: 1px solid #ddd !important;
}
.with-border-light {
  border-bottom: 1px solid #eee !important;
}
.no-padding {
  padding: 0 !important;
}
.no-padding {
  padding: 0 !important;
}
.no-margin {
  margin: 0 !important;
}
.no-shadow {
  box-shadow: none !important;
}
.with-padding-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding: 10px !important;
}
.with-padding-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding: 20px !important;
}

.navbar-brand {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}

.navbar-brand img {
  height: 30px !important;
}
.page-title {
  padding: 10px 0 !important;
}

.sidebar-user-material .sidebar-user-material-body {
  background: url(../images/user_bg1.jpg) center center no-repeat;
  background-size: cover;
}

.sidebar-light .nav-sidebar > .nav-item-open > .nav-link:not(.disabled),
.sidebar-light .nav-sidebar .nav-item-open > .nav-link:not(.disabled),
.sidebar-light
  .nav-sidebar
  > .nav-item-expanded:not(.nav-item-open)
  > .nav-link {
  background-color: #fff;
}
#navbar-footer {
  font-size: 10px;
}
#navbar-footer .navbar-text {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* a.btn {
    color: black;
}
 */
.breadcrumb-line,
.card,
.card-group {
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 12%);
}
.card,
.card-group {
  border-radius: 5px;
}
.card-header:not([class*="bg-"]):not([class*="alpha-"]) {
  padding: 0.5rem 0.75rem;
}
.card-header:not([class*="bg-"]):not([class*="alpha-"])
  + *
  > .card-body:first-child,
.card-header:not([class*="bg-"]):not([class*="alpha-"]) + .card-body {
  padding-top: 20px !important;
}
.card-body {
  padding: 1.25rem;
}

.page-header-dark,
.page-header-light {
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 10%) !important;
}
/* .table {
    width: 100% !important;
} */
.table td,
.table th {
  padding: 0.5rem 1rem;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.form-control-plaintext.with-border {
  border-bottom: 1px dotted #ddd !important;
}

.scroll-top {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: none;
  z-index: 9999;
  border-radius: 5px;
  opacity: 0.3;
}
.scroll-top i {
  /* display: inline-block; */
  color: #ffffff;
}
form.form-vertical-condensed .col-form-label {
  padding-bottom: 0px !important;
}
form.form-vertical-condensed .form-control-plaintext {
  min-height: 30px !important;
}
form.form-vertical-condensed .form-control,
form.form-vertical-condensed .form-control-plaintext {
  padding-top: 2px !important;
  padding-bottom: 5px !important;
}
.bg-whitesmoke {
  background-color: whitesmoke;
}

.bg-simtama {
  background-color: #184c47;
}
.text-simtama {
  color: #184c47 !important;
}

.btn-outline-simtama {
  color: rgb(114, 31, 45) !important;
  background-color: transparent;
  background-image: none;
  border-color: rgb(114, 31, 45);
}
.btn-outline-simtama:hover {
  color: #fff !important;
  background-color: rgb(114, 31, 45);
  border-color: rgb(114, 31, 45);
}
.btn-outline-simtama.disabled,
.btn-outline-simtama:disabled {
  color: #184c47;
  background-color: transparent;
}
.btn-outline-simtama:not([disabled]):not(.disabled):active,
.btn-outline-simtama:not([disabled]):not(.disabled).active,
.show > .btn-outline-simtama.dropdown-toggle {
  color: #fff;
  background-color: #184c47;
  border-color: #184c47;
}

.border-simtama {
  border-color: #184c47 !important;
}
.modal-header {
  padding: 7px 10px !important;
  border-bottom: 1px solid #eee !important;
}
/* .confirm-exit .modal-header{
    background-color: #c23f44 !important;
} */
.modal-footer {
  padding: 7px 10px !important;
  border-top: 1px solid #eee !important;
}

.modal-title h4 {
  padding: 10px !important;
  margin-inline-start: 0px;
  margin-block-start: 0px;
}
.modal-backdrop.show {
  opacity: 0.2;
}
.btn-xs {
  padding: 3px 8px 3px 8px;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 0.125rem;
}

.text-center {
  vertical-align: middle !important;
  text-align: center !important;
}
.text-align-center {
  text-align: center !important;
}

.form-group.has-error {
  color: red;
}

.form-group.has-error input {
  border-bottom-color: red;
}
span.help-block-error {
  opacity: 0.7;
  font-size: 10px;
  margin-top: 5px;
}

.nav-tabs.nav-tabs-header {
  margin-bottom: 0px !important;
  border-bottom: none;
}

.nav-tabs.nav-tabs-header .nav-link.active {
  border-left: none !important;
  border-right: none !important;
  background-color: white;
}
.nav-tabs.nav-tabs-header .nav-link {
  background-color: #e5e3e3;
  padding: 0.6rem 0.8rem;
  font-size: 11px;
}
li .dropdown-menu .nav-link.active:before {
  background-color: transparent !important;
}
li .dropdown-menu .nav-link.active {
  background: #e3e1e1 !important;
}
.text-jam {
  font-size: 30pt;
  font-weight: bolder;
}
.w-p-50 {
  width: 50px !important;
}
.w-p-80 {
  width: 88px !important;
}
.w-p-100 {
  width: 100px !important;
}
.w-p-150 {
  width: 150px !important;
}

table.table-cursor > tbody > tr > td {
  cursor: pointer;
}

.inbox .navbar-toggler {
  position: relative;
  display: inline-block;
}
.inbox .navbar-toggler .badge-pill {
  position: absolute;
  top: 10px;
  left: 8px;
  /* padding: .2375rem; */
  font-size: 50%;
  /* width: 14px;
    height: 14px; */
}
.badge-mark {
  background: #ec407a;
}

.navbar-nav-link .badge {
  margin-top: 5px;
}
.sidebar:not(.bg-transparent) .card {
  border-width: 0;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

ul.media-list {
  display: flex;
  flex-direction: column;
}
ul.media-list > li:first-child {
  margin-top: auto;
}

.media-chat-scrollable {
  max-height: 350px;
  min-height: 350px;
  /* background: #fafafa; */
  padding: 15px;
  border-radius: 10px;
  border: 1px solid gainsboro;
}
textarea.chat_message {
  border: 1px solid gainsboro !important;
  padding: 10px;
}
textarea.chat_message:focus {
  outline: none !important;
  border: 1px solid #c0c0c0 !important;
  box-shadow: 0 0 0px #719ece;
}
.media-chat-item {
  padding: 10px;
}

.media img.chat-user {
  opacity: 0.2;
  width: 36px;
  height: 36px;
}
.media-chat-item-reverse .media-chat-item:not([class*="bg-"]) {
  background-color: #ffe7e6;
  border-color: #ffe7e6;
}
.media-chat-item-reverse .media-chat-item {
  text-align: left;
  color: #000;
}

.media-list.inbox li.media {
  cursor: pointer;
}

.datatable-header {
  padding: 0.25rem 1.25rem 0 1.25rem;
}
.datatable-footer {
  display: flex;
  flex-wrap: wrap;
  padding: 0.25rem 0.25rem 0 0.25rem;
}

.dataTables_info,
.dataTables_length {
  margin-bottom: 0.25rem;
  display: inline-block;
  font-size: 11px;
  margin: 0 0 0 10px;
  vertical-align: middle;
}

.dataTables_length select {
  height: 1.5rem;
  font-size: 11px;
  padding: 0.2rem 0;
  margin-top: 5px;
}

.dataTables_paginate {
  margin: 0.25rem 0.5rem;
}

.dataTables_info,
.dataTables_length,
.dataTables_paginate {
  float: none !important;
}

.dataTables_paginate .paginate_button {
  padding: 0.1rem;
  font-size: 12px;
}

.dataTables_paginate .paginate_input {
  width: 25px;
  border: 1px solid #ddd;
  outline: 0;
  text-align: center;
}

table.dataTable.no-footer {
  border-bottom: 1px solid gainsboro;
}
.nav-sidebar {
  margin-top: 1rem;
}

.nav-sidebar .nav-item-header {
  padding: 0.5rem 1.25rem;
  margin-top: 0rem;
}
.nav-sidebar .nav-link {
  padding: 0.5rem 1.25rem;
}
.nav-sidebar .nav-link i {
  margin-right: 1rem;
}
.nav-sidebar .nav-item:not(.nav-item-header):first-child {
  padding-top: 0.2rem;
}

.nav-group-sub .nav-link {
  padding: 0.5rem 1.25rem 0.5rem 3.4rem;
}
.nav-item-submenu > .nav-link:after {
  top: 0.5rem;
}

.font-weight-400 {
  font-weight: 400;
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-600 {
  font-weight: 600;
}
.font-weight-700 {
  font-weight: 700;
}
.font-weight-800 {
  font-weight: 800;
}
.modal-center {
  margin: 100px 20px 0;
}

.icon-4x {
  font-size: 64px;
}
.icon-5x {
  font-size: 72px;
}

.dropdown-user .navbar-nav-link > img {
  max-height: 1.7rem;
  margin-top: 4px;
}
.dropdown-apps > a {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 4px;
}
.dropdown-apps > a > img,
.navbar-btn a.btn-apps img {
  max-height: 1.7rem;
}
.card-sidebar-mobile .nav-siswa-info {
  padding: 0.5rem 1.25rem;
  border-bottom-width: 1px;
  border-bottom-color: gainsboro;
  border-bottom-style: dashed;
}
.navbar-nav-link {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.navbar-toggler + .navbar-toggler {
  margin-left: 0.8rem;
}

.picker__box {
  padding: 0.7rem;
}
.picker__header {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.picker__select--month,
.picker__select--year {
  height: auto;
  border-color: gainsboro;
  background-color: white;
}
.picker__footer button {
  padding: 0.25rem 1rem;
  background-color: white;
  border-color: gainsboro;
}
.card-mapel .nama-mapel {
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 5px;
  border: 2px dashed silver;
}
.card-mapel img.card-img {
  width: 80px;
  margin: 10px auto;
  opacity: 0.5;
}

.upload-box {
  position: relative;
  border: 2px dashed rgba(0, 0, 0, 0.125);
  min-height: 18rem;
  background-color: #fff;
  /* padding: .3125rem; */
  border-radius: 0.1875rem;
}
.upload-box .upload-tips {
  height: 18rem;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  opacity: 1;
  border-radius: 0.1875rem;
  transition: opacity ease-in-out 0.15s;
}
.upload-box .upload-info,
.upload-box .upload-progress {
  width: 100%;
  position: absolute;
  bottom: 10px;
  left: 0;
  text-align: center;
  opacity: 1;
  padding: 0 10px 0;
}
.upload-box .upload-progress {
  height: 5px;
  padding: 0;
  bottom: 0px;
  margin-bottom: 3px;
}
.upload-box .upload-progress > .bar {
  height: 100%;
  margin: 0 5px;
  background: gainsboro;
}
.upload-box .upload-progress > .bar > .progress-bar {
  height: 100%;
  background: green;
}

.upload-box .upload-info .file-size {
  font-size: 10px;
}
.upload-box.has-preview .upload-tips {
  display: none;
}
.upload-box:not(.has-preview) .upload-preview,
.upload-box:not(.has-preview) .upload-info {
  display: none;
}
.upload-box:not(.uploading) .upload-progress {
  display: none;
}
.upload-box .upload-tips:before {
  content: "\ea0e";
  font-family: icomoon;
  font-size: 4rem;
  display: inline-block;
  position: absolute;
  top: 5rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  line-height: 1;
  z-index: 2;
  color: #ccc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.upload-box .upload-tips > span {
  font-size: 1.0625rem;
  color: #777;
  display: block;
  margin-top: 10.25rem;
}
.upload-box .upload-preview {
  background-color: #fff;
  position: relative;
  /* display: inline-block;
    margin: .5rem; */
  display: flex;
  margin: auto;
  width: 100% !important;
  height: 280px;
  /* padding: .5rem; */
  padding: 0.1rem 0.5rem 0.5rem;
  /* border: 1px solid rgba(0,0,0,.125); */
  /* padding: .5rem; */
  /* box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); */
  /* border-radius: .1875rem; */
}

.upload-box .upload-preview img {
  /* max-height: 250px; */
  /* margin: 0 auto; */
  display: block;
  max-height: 90%;
  max-width: 100%;
  margin: auto;
  /* width: auto !important; */
  /* vertical-align: middle; */
  padding: 5px 20px 20px;
  border-style: none;
}

.upload-box .upload-preview i {
  margin: auto;
  font-size: 100px;
  opacity: 0.3;
}

.card-sidebar-mobile .nav-siswa-info > i {
  display: none;
}
.sidebar-xs .card-sidebar-mobile .nav-siswa-info > div {
  display: none;
}
.sidebar-xs .card-sidebar-mobile .nav-siswa-info > i {
  display: block;
  padding-top: 10px;
}

.bootstrap-datetimepicker-widget {
  width: auto !important;
}

.bootstrap-datetimepicker-widget .datepicker-days table tbody tr:hover {
  background-color: #eee;
}
.bootstrap-datetimepicker-widget table td.cw {
  color: #000;
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
  color: gray;
}

.input-group > .select2-container {
  width: auto !important;
  flex: 1 1 auto;
}

.input-group > .select2-container .select2-selection--single {
  height: 100%;
  line-height: inherit;
  /* padding: 0.5rem 1rem; */
}
.select2-selection--single .select2-selection__rendered {
  padding-right: 0.3rem;
}

ul.nav-sidebar li.nav-item > a.nav-link.disable-menu {
  opacity: 0.5;
  cursor: not-allowed;
}
ul.nav-sidebar li.nav-item.nav-item-submenu > a.nav-link.disable-menu {
  opacity: 0.5;
  cursor: pointer;
}

.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.table-condensed > tbody > tr > td:first-child,
.table-condensed > tbody > tr > th:first-child,
.table-condensed > tfoot > tr > td:first-child,
.table-condensed > tfoot > tr > th:first-child,
.table-condensed > thead > tr > td:first-child,
.table-condensed > thead > tr > th:first-child {
  padding-left: 1rem;
}
.table-condensed > tbody > tr > td:last-child,
.table-condensed > tbody > tr > th:last-child,
.table-condensed > tfoot > tr > td:last-child,
.table-condensed > tfoot > tr > th:last-child,
.table-condensed > thead > tr > td:last-child,
.table-condensed > thead > tr > th:last-child {
  padding-right: 1rem;
}

table.table tbody > tr.shown > td > .row-detail {
  margin: auto;
  width: 13px;
  background: url(../images/group-open.png) no-repeat;
}

table.table tbody > tr > td > .row-detail {
  margin: auto;
  width: 13px;
  background: url(../images/group-close.png) no-repeat;
}

.dataTables_wrapper {
  border-top: 0 !important;
}

.table thead th {
  border-bottom: 1px solid #ddd;
}

.datatable-footer {
  border-top: 0;
}

.form-text .col-form-label {
  font-weight: bold;
}

.content-wrapper {
  overflow: hidden;
  background-color: #f2f2f2;
}

.bootstrap-switch-small.bootstrap-switch .bootstrap-switch-label,
.bootstrap-switch-small.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch-small.bootstrap-switch .bootstrap-switch-handle-off {
  padding: 0.2rem 0.7rem;
}

.wizard-form .uniform-checker span.checked {
  color: #fff;
  border-color: #009fb4;
}
.wizard-form .uniform-checker span.checked:after {
  background: #009fb4;
}
.uniform-choice span.checked:after {
  border-color: blue;
}

.cursor-hover:hover {
  background: #eee;
}

.table-container {
  border-top: 1px solid #ddd;
}

.btn-pilihan.selected {
  background: rgb(201, 218, 250);
}

.btn-pilihan:hover {
  cursor: pointer;
  border-color: cornflowerblue !important;
}

.btn-pilihan:active {
  background: rgb(201, 218, 250);
}

.btn-pilihan.selected:hover {
  border-color: cornflowerblue !important;
}

.btn-pilihan .item-pilihan {
  font-size: 0.9rem;
}

.btn-pilihan:focus {
  border-color: cornflowerblue !important;
}

.btn-group-pilihan.selected {
  background: cornflowerblue !important;
  color: #fff;
}

.btn-group-pilihan:hover {
  cursor: pointer;
  background: rgb(201, 218, 250);
}

.btn-group-pilihan.selected:hover {
  background: cornflowerblue !important;
}

.btn-group-pilihan .item-pilihan {
  font-size: 0.9rem;
}

.line-text {
  position: relative;
  z-index: 1;
}

.line-text:before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}

.line-text span {
  /* to hide the lines from behind the text, you have to set the background color the same as the container */
  background: #fff;
  padding: 0 15px;
}

input.form-input-search {
  border: 1px solid #ddd;
  border-radius: 4px;
}
input.form-input-search:focus {
  outline: none !important;
  border: 1px solid #aaa;
}

.card-group-control .card-title > a.collapsed:before {
  content: "\e9c9";
}
.card-group-control .card-title > a:before {
  content: "\e9ca";
}

@media (min-width: 576px) {
  .login-form {
    width: 22rem;
  }
}

@media (min-width: 768px) {
  .nav-card-sidebar > li {
    width: 10rem !important;
  }
  .sidebar-expand-md.sidebar-component {
    width: 15rem;
  }
  .sidebar-expand-md.sidebar-component.sidebar-small {
    width: 13rem;
  }
  .sidebar-expand-md.sidebar-component.sidebar-smaller {
    width: 11rem;
  }
}
@media (max-width: 767.98px) {
  .chart-container {
    overflow-x: auto !important;
  }
  body {
    padding-right: 0 !important;
  }
  .navbar {
    padding-right: 1.25rem !important;
  }
  .navbar .navbar-toggler {
    margin-right: 0 !important;
  }
  .sidebar {
    z-index: 1051;
  }
}

@media (max-width: 991.98px) {
  .wizard > .steps > ul {
    display: flex !important;
  }
  .wizard > .content > .body {
    padding: 0rem;
  }
}