/* THEME */
:root {
  --dark: #407BFF; /*64, 123, 255*/
  --dark2: #C1D2FA;
  --light: #FEFEFE; /*rgb(255, 204, 41)*/

  --primary: #0275d8;
  --info: #5bc0de;
  --warning: #f0ad4e;
  --danger: #d9534f;
  --success: #5cb85c;

  scroll-behavior: smooth;
}
.navbar, .main-sidebar, #back-to-top {
  background-color: var(--dark);
  color: white !important;
}
.navbar a, .main-sidebar a {
  color: var(--light) !important;
}
a {
  cursor: pointer;
}
.d-hide {
  display: none;
}
i.load::before {
  content:'Loading data....... please wait!';
  color: red;
  font-size: 14px;
  margin: 20px;
}
/* CURSOR */
.hand {
  cursor:pointer;
}
/* FLEX-BOX */
.flex-center {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-start {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}
.flex-end {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
}
.flex-around {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}
.flex-between {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.flex4 {
  flex: 4;
}
.flex5 {
  flex: 5;
}
/* scroll tabulasi,  child -> tabs */
.tab-scroll {
  width: 100%;
  overflow-x: auto;
}
.scroll-tabulasi {
  min-width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
/* show mobile or desktop */
.sm-hide {
  display: fixed;
}
.lg-hide, .lg-fixed {
  display: none;
}
.d_inline {
  display:inline;
}
.d_block {
  display: block;
}
/* BORDER  */
.rad5 {
  border-radius: 5px;
}
.rad8 {
  border-radius: 8px;
}
.rad10 {
  border-radius: 10px;
}
.rad15 {
  border-radius: 15px;
}
.rad20 {
  border-radius: 20px;
}
.rad50 {
  border-radius: 50%;
}
/* BUTTON */
.btn-app> i {
  display: block;
  font-size: 25px;
}
.btn-circle {
  border-radius: 50%;
}
.btn-oval {
  border-radius: 20%;
}
.btn-red {
  color: var(--danger);
  border: 1px solid var(--danger);
}
.btn-green {
  color: var(--success);
  border: 1px solid var(--success);
}
.btn-blue {
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-yellow {
  color: var(--warning);
  border: 1px solid var(--warning);
}
.btn sup {
  transform: translate(-8px, -10px);
  position: relative;
  font-size: 8px;
}
.btn-80 {
  min-width:80px;
}
.btn-100 {
  min-width:100px;
}
.btn-120 {
  min-width:120px;
}
.btn-130 {
  min-width:130px;
}
.btn-150 {
  min-width:150px;
}
/* BACKGROUND */
.bgw {
  background-color: white;
}
.bgtes {
  background-color: #CCC;
}
.bgdark {
  background-color: var(--dark);
  color: var(--light);
}
.bglight {
  background-color: var(--light);
  color: var(--dark);
}
.bgshadow {
  box-shadow: 1px 5px 8px rgba(0,0,0,0.7);
}
/* FONT STYLE */
.f10 {
  font-size: 10px;
}
.f12 {
  font-size: 12px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f18 {
  font-size: 18px;
}
.f20 {
  font-size: 20px;
}
.f22 {
  font-size: 22px;
}
.f25 {
  font-size: 25px;
}
.f30 {
  font-size: 30px;
}
.f45 {
  font-size: 45px;
}
.f72 {
  font-size: 72px;
}
.fb {
  font-weight: bold;
}
.fi {
  font-style: italic;
}
.fdark {
  color: var(--dark);
}
.flight {
  color: var(--light);
}
.fr {
  color: red;
}
.fw {
  color: white;
}
.fblue {
  color: blue;
}
.fgreen {
  color: #006600;
}
.fshadow {
  text-shadow: 1px 5px 8px rgba(0,0,0,0.7);
}
.f12-14 {
    font-size: 14px;
}
.f12-16 {
    font-size: 16px;
}
/* SPACE */
.line-1 {
  line-height: 1.1;
}
.line-2 {
  line-height: 1.2;
}
.line-3 {
  line-height: 1.3;
}
.line-4 {
  line-height: 1.4;
}
.line-5 {
  line-height: 1.5;
}
/* ANIMATION */
.anim {
  transform: translate(0,0) scale(1);
  transition: 1s;
  opacity: 1;
}
.anim.fade-in {
  transform: scale(0.1);
  transition: 1s;
  opacity: 0;
}
.anim.from-top {
  transform: translateY(-500px);
  transition: 1s;
  opacity: 0;
}
.anim.from-bottom {
  transform: translateY(500px);
  transition: 1s;
  opacity: 0;
}
.anim.from-left {
  transform: translateX(-500px);
  transition: 1s;
  opacity: 0;
}
.anim.from-right {
  transform: translateX(500px);
  transition: 1s;
  opacity: 0;
}
.anim.spiral {
  transform: rotate(180deg);
  transition: 1s;
  opacity: 0;
}
.anim.zoom {
  transform: scale(1.15);
  transition: 1s;
  opacity: 1;
}
.anim.splash {
  transition: 1s;
  opacity: 0;
}
.anim.hide {
  display: none;
}
/* TAKE A FOTO */
.img_upload {
  margin-top:-30px;
}
.img_upload > input {
  display: none;
}
/* scroll bar */
::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}
::-webkit-scrollbar-track {
  /* //background: #f1f1f1; */
}
::-webkit-scrollbar-thumb {
  background: var(--dark);
}
/* TOOLTIP */
.tooltip {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: black;
  color: yellow;
  left: 0;
  top:500;
  z-index: 10000;
}
/* background  */
.bg-salmon {
  background-color: salmon;
  color: white;
}
.bg-lavender {
  background-color: lavender;
}
.bg-gold {
  background-color: gold;
}
.bg-orange {
  background-color: orange;
  color: white;
}
.bg-skyblue {
  background-color: deepskyblue;
  color: white;
}
/* Table */
.table thead {
  position: sticky;
  top: 0;
  left: 0;
}
/* Swal alert */
.swal2-container {
  z-index: 20000 !important;
}

.list-counter {
  display: none;
}

.over-flow-auto {
  overflow: auto;
  padding-bottom: 80px;
  padding-right: 10px;
}



@media (max-width:700px){
  .sm-hide {
    display:none;
  }
  .lg-hide {
    display: flex;
  }
  .lg-fixed {
    display: flex;
  }
}