.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo svg {
  width: 38px;
  height: 20px;
}

.app-brand-text.demo {
  font-size: 1.25rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 300px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}
/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1.25rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1.25rem;
} 

.beranda{ margin:10px 10px 5px 10px; padding:0; }
.beranda h2{ margin:0; padding:0; font-size: 20px; color: #345459; font-weight: bold; }
.beranda p{ margin:2px 0; padding:0; font-size: 18px; color: #485d60; }
.beranda label{ margin:2px 0; padding:0; font-size: 14px; color: #485d60; }
.beranda i{ margin:0; top:-1px; position: relative; padding:0; font-size: 17px; }

.dashboard { display: flex; width:100%;   padding:0; border:0px solid #eee; background-color: #fff; margin-bottom:10px;  }
.dashboard .detail { position: relative; flex: 60px;  width:250px;padding: 5px; margin:8px 8px 8px 8px; border-radius: 3px;}
.dashboard .detail h2 { font-size:1.2vw;font-weight:normal;font-family: "tahoma", sans-serif;padding:6px 0 0px 15px;margin:0;}
.dashboard .detail label { float:right;font-size:0.70em;padding:5px 15px 0 0;color:#434343;font-family: "arial", sans-serif;} 
.dashboard .detail span { float:left;width:100%;font-size:2.5em;text-align:left;clear:both;font-family: "arial", sans-serif;padding:0px 10px;margin:25px 0 5px 0;}
.dashboard .detail p{ margin:0 0 15px 15px;color:#fbfbfb; }
.dashboard .detail h2{ color:#fbfbfb; }
.dashboard .detail.grafik h2{ color:#fbfbfb; }
.dashboard .detail span{ color:#fbfbfb; }
.dashboard .detail label i{ color:#fbfbfb; }
.dashboard .detail h2 label{ color:#fbfbfb; }
.dashboard .detail .icon{ bottom:20px;right: 30px;  font-size: 80px; color: rgba(252,252,252,0.40); position: absolute; }

.dashboard .detail{
box-shadow: 0px 5px 25px -12px rgba(0,0,0,0.63);
-webkit-box-shadow: 0px 5px 25px -12px rgba(0,0,0,0.63);
-moz-box-shadow: 0px 5px 25px -12px rgba(0,0,0,0.63);
}

.dashboard .detail.kategori{
background: rgb(8,113,154);
background: linear-gradient(328deg, rgba(8,113,154,1) 0%, rgba(15,145,196,1) 33%, rgba(61,206,193,1) 100%);
border:1px solid #28b8c8;
}

.dashboard .detail.produk{
background: rgb(231,84,133);
background: linear-gradient(328deg, rgba(231,84,133,1) 0%, rgba(245,114,158,1) 33%, rgba(255,135,96,1) 100%);
border:1px solid #fe7f70;
}

.dashboard .detail.periode{
background: rgb(210,49,49);
background: linear-gradient(328deg, rgba(210,49,49,1) 0%, rgba(228,71,71,1) 33%, rgba(243,117,117,1) 100%);
border:1px solid #d23131;
}
.dashboard .detail.dosen{
background: rgb(227,186,22);
background: linear-gradient(328deg, rgba(241,198,26,1) 0%, rgba(231,198,67,1) 33%, rgba(243,211,84,1) 100%);
border:1px solid #e0c765;
}

.dashboard .item { position: relative; flex: 60px;  width:250px;padding: 5px; margin:8px 8px 8px 8px; border-radius: 3px;}
.dashboard .item h2 { font-size:1.2vw;font-weight:normal;color:#302f2d;font-family: "tahoma", sans-serif;padding:6px 0 0px 15px;margin:0;}
.dashboard .item label { float:right;font-size:0.70em;padding:5px 15px 0 0;color:#434343;font-family: "arial", sans-serif;} 
.dashboard .item span { float:left;width:100%;font-size:2.5em;text-align:left;clear:both;font-family: "arial", sans-serif;padding:0px 10px;margin:25px 0 5px 0;}
.dashboard .item p{ margin:0 0 15px 15px;color:#fbfbfb; }
.dashboard .item h2{ color:#6d6d6d; }
.dashboard .item span{ color:#6d6d6d; }
.dashboard .item label i{ color:#6d6d6d; }
.dashboard .item h2 label{ color:#6d6d6d; }
.dashboard .item .icon{ bottom:20px;right: 30px;  font-size: 80px; color: rgba(252,252,252,0.40); position: absolute; }
.dashboard .item{
box-shadow: 0px 1px 8px -3px rgba(0,0,0,0.23);
-webkit-box-shadow: 0px 1px 8px -3px rgba(0,0,0,0.23);
-moz-box-shadow: 0px 1px 8px -3px rgba(0,0,0,0.23);
}

.user_account{ margin:0; padding:0;}
.user_account label{  margin:0; padding:0;  font-size: 14px; font-weight:600; line-height: 18px; color:#5d6163;font-family: "arial", sans-serif;}
.user_account small{  margin:0; padding:0; font-size: 12px; line-height: 13px; color:#546a73; font-family: "arial", sans-serif;}
.user_account i{ position: relative; top:2px; margin:0;padding:0; font-weight:normal; font-size: 12px; color:#5d6163;}

.sales_account{ margin:0; padding:0;position: absolute;right:20px;top:5px;}
.sales_account span{ margin:0; padding:0; font-weight:500; font-size: 15px;color:#5f6162;}
.sales_account p{ margin:0; padding:0; font-weight:normal; font-size: 11px; color:#5f6162;line-height: 7px; }
.sales_account i{ float:left; margin:0 0 8px 0; padding:0; font-weight:normal; color:#737373;font-size: 10px; line-height: 7px; }


.sub-container{ margin:6% 0; background-color: white; padding:10px; border:1px solid #F1F1F1;background-color: #fff; box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.07); }
.sub-container h2{ font-size: 1.5em; }

.form-body {  }

.form-body fieldset {
  margin: 0;
  padding: 0rem 1.05rem 0rem 1.05rem;
  border:1px solid #d9e0dc;
}

.form-body fieldset legend {
  padding: 0 10px;font-size: 1.2rem; font-weight: 600;color:#4d4d4d; font-family: "arial", sans-serif;
}

.form-body input[type="text"],input[type="number"],select,textarea{ 
  margin:0;   
  vertical-align: middle;
  border:1px solid rgba(192, 192, 192, 0.50);
  background-color: rgba(246, 246, 244, 0.05);
  box-shadow: 0 0 0 0.02rem rgba(246, 246, 244, 0.50);
  display: inline-block;
    font-weight: 400;
    padding: 0.280rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
    font-family: "Myriad Pro", sans-serif;
}

::-webkit-input-placeholder {color: #bbbbba; font-size: 14px; font-weight: normal;font-family: "arial", sans-serif;}
:-moz-placeholder {color: #bbbbba;font-size: 14px;font-weight: normal;font-family: "arial", sans-serif;}
::-moz-placeholder {color: #bbbbba;font-size: 14px;font-weight: normal;font-family: "arial", sans-serif;}
:-ms-input-placeholder {color: #bbbbba;font-size: 14px;font-weight: normal;font-family: "arial", sans-serif;}

.form-body .form-control {
  height: 40px !important;
}

.form-body .form-control:focus {
  background-color: #f9f9f9;
  border:1px solid rgba(192, 192, 192, 0.50);
  outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(207, 206, 197, 0.50) !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-body .form-control:disabled,
.form-body .form-control[readonly] {
  background-color: #fafaea;
  border:1px solid #efefe1;
  color:#40250e !important;
  opacity: 1;
}

.form-body table{ border-collapse: collapse; border:0; }
.form-body table td{ border-collapse: collapse; padding:5px 0; border-bottom:1px solid #edece8; color:#464645; font-size: 1.02rem; font-family: "arial", sans-serif; }
.form-body table td input[type="text"]{ margin:0px; outline: none; }
.form-body table td input[type="text"]:focus {
  background-color: #fcfbf6;
  border:1px solid rgba(219, 178, 14, 0.50);
  outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(219, 178, 14, 0.10) !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-body table td button{ margin:0 3px 0 0; border-radius: 3px; padding:5px 10px; text-transform: capitalize; }
.form-body table td i{ margin:0 5px; }



/*.pagging {color:#111;margin:10px 0 0 0;}
.pagging a{display: inline-block;*display: inline;text-decoration: none;padding: 2px 6px 2px 6px;margin-bottom: 0;font-weight:normal;*margin-left: .3em;margin-top:-4px;font-size: 14px;line-height: 15px;color: #333333;text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);vertical-align: middle;cursor: pointer;background-color: #f5f5f5;*background-color: #e6e6e6;background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);background-repeat: repeat-x;border: 1px solid #cccccc;*border: 0;border-color: #e6e6e6 #e6e6e6 #bfbfbf;border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-bottom-color: #b3b3b3;-webkit-border-radius: 4px; -moz-border-radius: 4px;border-radius: 4px;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);*zoom: 1;-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);}
.pagging a:hover,.pagging a:focus,.pagging a:active,.pagging a.active,.pagging a.disabled,.pagging a[disabled] {color: #333333;background-color: #e6e6e6;*background-color: #d9d9d9;}
.pagging a:active,.pagging a.active {background-color: red;}
.pagging a:first-child {*margin-left: 0;}
.pagging a:hover,.pagging a:focus {color: #333333;text-decoration: none;background-position: 0 -15px;-webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear;transition: background-position 0.1s linear;}
.pagging a:focus {outline: thin dotted #fff;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
.pagging a.active,.pagging a:active {background-image: none;outline: 0;-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}
.pagging .current{background-color: red;outline: 0;-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}
*/
.form-search{ clear:both;margin:5px 0 10px 0; }
.form-search button{ height: 35px; margin:0; border-radius: 2px; padding:0 10px; font-size: 15px; text-transform: capitalize;  font-family: "arial", sans-serif;}
.form-search input,select{position: relative;height: 35px; margin:0;
  vertical-align: middle;
  border:1px solid rgba(192, 192, 192, 0.50);
  background-color: rgba(246, 246, 244, 0.05);
  box-shadow: 0 0 0 0.02rem rgba(246, 246, 244, 0.50);
  display: inline-block;
  font-weight: 400;
  padding: 0.280rem 0.75rem;
  font-size: 1rem;
  font-family: "arial", sans-serif;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-search input:focus {
  background-color: #f9f9f9;
  border:1px solid rgba(192, 192, 192, 0.50);
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgba(207, 206, 197, 0.50) !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-search button i{ top:1px; position: relative; padding:0 5px;}

.btn-table .btn{
width: 30px;
padding:6px 5px; 
border-radius: 3px;
}

.pagging ul li.inactive,
.pagging ul li.inactive:hover{
background-color:#d8edf5;
color:#72868f;
border:1px solid #d8edf5;
cursor: default;
}

.pagging{
/*width: 350px;*/
margin:0 0 0 10px;
padding:0;
text-align: center;
/*border:1px solid red;*/
}

.pagging ul{ margin:0; padding:0; text-align: center; width: 100%;  }
.pagging ul li{
list-style: none;
float: left;
border: 1px solid #d8edf5;
padding: 3px 10px 2px 10px;
margin: 0 5px 0 1px;
border-radius: 5px;
font-family: arial;
font-size: 14px;
color: #4a6976;
font-weight: bold;
background-image:#d8edf5;
}
.pagging ul li:hover{color: #ffffff;background-color: #378db1;cursor: pointer;}
.pagging .active{color: #4a6976;background-color: #e5eff4;}
.pagging .current{color: #ffffff;background-color: #228abe;}
.total{float:right;font-family:arial;color:#fff;padding-top:5px;}
.goto{margin-top:0;margin-left:20px;text-align:center;padding:4px;font-size:15px;} 

.card-container{ min-height: 72.5vh;}

/* The Modal (background) */
.modal { display: none; position: fixed; z-index: 9999;  left: 0; top: 0; width: 100%;   height: 100%;  overflow: auto;  background-color: rgb(0,0,0);   background-color: rgba(65,65,65,0.60); }
/*.modal-booking { display: none; padding-top: 3%;  position: fixed; z-index: 9999;  left: 0; top: 0; width: 100%;   height: 100%;  overflow: auto;  background-color: rgb(0,0,0);   background-color: rgba(65,65,65,0.60); }*/
.modal-batal-booking { display: none; padding-top: 3%;  position: fixed; z-index: 9999;  left: 0; top: 0; width: 100%;   height: 100%;  overflow: auto;  background-color: rgb(0,0,0);   background-color: rgba(65,65,65,0.60); }
/* Modal Content */
.modal-content { position: relative; background-color: #f8f8f8; border-radius:5px; margin: auto; padding: 0; border: 1px solid #191C24; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);  -webkit-animation-name: animatetop;  -webkit-animation-duration: 0.4s;  animation-name: animatetop;  animation-duration: 0.4s}
/* Add Animation */
@-webkit-keyframes animatetop {  from {top:-300px; opacity:0}   to {top:0; opacity:1}}
@keyframes animatetop { from {top:-300px; opacity:0}  to {top:0; opacity:1}}
/* The Close Button */
.close,.close-notif {  color: #828282;  float: right;  font-size: 1.3rem;}
.close:hover,.close-notif:hover,.close:focus,.close-notif:focus {  color: #828282;  text-decoration: none;  cursor: pointer;}
.modal-header { padding: 13px 16px;  background-color: #f8f8f8;  border-radius:5px 5px 0px 0px;  color: #DDA22A; text-align: left;}
.modal-header h2{padding:0;margin:0;  font-size: 1.2rem;font-weight: bold;color: #564646;}
.modal-body {padding: 2px 5px;min-height: 20vh;}
.modal-footer { margin-top:10px; padding: 8px 16px;   background-color: #f8f8f8;  border-radius: 0px 0px 5px 5px;  text-align: left;}
.modal-footer button { padding: 4px 10px;}

.wrapper-home{ padding:0 10px; }

.select {
  /* styling */
  
  border-radius: 2px;
  display: inline-block;
  font: inherit;
  /*line-height: 1.5em;*/
  /*padding: 0.5em 3.5em 0.5em 1em;*/

  /* reset */
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */


.select.select-control {
  background-image:
    linear-gradient(45deg, transparent 50%, #98907c 50%),
    linear-gradient(135deg, #98907c 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 16px) calc(1em - 1px),
    calc(100% - 12px) calc(1em - 1px),
    calc(100% - 2.1em) 0.5em;
  background-size:
    5px 6px,
    5px 6px,
    1px 1.2em;
  border: 1px solid #dde0e5;
  box-shadow: 0 1px 3px -1px #bfc9d6;
  padding:2px 10px;
  /*height: 50px;*/
  background-repeat: no-repeat;
}

 /*option{padding:40px;}*/
 .select.select-control option{font-size:1.05rem;padding:0px 0;cursor:pointer;outline: none;box-shadow: none;}
 /*option:nth-child(odd) { font-size:10px;}*/

.select.select-control:focus {
  background-image:
    linear-gradient(45deg, #98907c 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #98907c 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 12px) calc(1em - 2px),
    calc(100% - 16px) calc(1em - 2px),    
    calc(100% - 2.1em) 0.5em;
  background-size:
    5px 6px,
    5px 6px,
    1px 1.2em;
  background-repeat: no-repeat;
  border-color: #dde0e5;
  outline: 0;
}

.select.select-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.min-height{ min-height: 73vh; padding:0 0 15px 0;}
.card-title .mdi{position: relative;top:-2px;}
.table .fa{position: relative;top:0px;font-size:13px;padding:0;margin:0;}
.table .mdi{position: relative;top:1px;font-size:13px;padding:0;margin:0;}

  .checkbox-wrapper .control {
    display: inline-block;
    position: relative;
    /*padding-left: 30px;*/
    cursor: pointer;
    font-size: 15px; 
    /*margin-top:11px;  */
    /*margin-bottom:5px;  */
    /*margin-right:10px;  */
    font-family: "arial", sans-serif;
    color:#968771;
  }
  .checkbox-wrapper .control input {
    /*position: absolute;*/
    z-index: -1;
    opacity: 0;
  }
  .checkbox-wrapper .control__indicator {
    position: absolute;
    top: 2px;
    left: -2px;
    height: 20px;
    width: 20px;
    /*background: #fff;*/
    border:2px solid #8b9eab;
  }
  .checkbox-wrapper .control:hover input ~ .control__indicator,
  .checkbox-wrapper .control input:focus ~ .control__indicator {
    background: #fdf5db;
    border:2px solid #eab820;
  }
  .checkbox-wrapper .control input:checked ~ .control__indicator {
    background: #0782d8;
    border:2px solid #0782d8;
  }
  .checkbox-wrapper .control:hover input:not([disabled]):checked ~ .control__indicator,
  .checkbox-wrapper .control input:checked:focus ~ .control__indicator {
    background: #0782d8;
  }
  .checkbox-wrapper .control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
  }
  .checkbox-wrapper .control__indicator:after {
    content: '';
    position: absolute;
    display: none;
  }
  .checkbox-wrapper .control input:checked ~ .control__indicator:after {
    display: block;

  }
  .checkbox-wrapper .control--checkbox .control__indicator:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .checkbox-wrapper .control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
  }
  .checkbox-wrapper .control--checkbox input:checked ~ .checkbox-wrapper .control__indicator:after {
    border-color: #7b7b7b;
  }

  /* loading spinner bar */
.spinner {height: 70px;width:70px;margin:0 auto;position: absolute;left:25%;right:25%;top:60%;-webkit-animation: rotation .6s infinite linear;-moz-animation: rotation .6s infinite linear;-o-animation: rotation .6s infinite linear;animation: rotation .6s infinite linear;border-left: 8px solid rgba(21,88,179, 0.15);border-right: 8px solid rgba(21,88,179, 0.15);border-bottom: 8px solid rgba(21,88,179, 0.15);border-top: 8px solid rgba(21,88,179, 0.8);border-radius: 100%;*display:none;z-index:1005;}
@-webkit-keyframes rotation {from { -webkit-transform: rotate(0deg); }to { -webkit-transform: rotate(359deg);}}
@-moz-keyframes rotation { from {-moz-transform: rotate(0deg);}to {-moz-transform: rotate(359deg); }}
@-o-keyframes rotation { from { -o-transform: rotate(0deg);}to {-o-transform: rotate(359deg);}}
@keyframes rotation {from {transform: rotate(0deg);}to {transform: rotate(359deg);}}
.loading.bar div:nth-child(1){ -webkit-transform: rotate(0deg) translate(0, -30px); -moz-transform: rotate(0deg) translate(0, -30px); transform: rotate(0deg) translate(0, -30px); -webkit-animation-delay:0.39s; -moz-animation-delay:0.39s; animation-delay:0.39s;} 
.loading.bar div:nth-child(2){ -webkit-transform: rotate(45deg) translate(0, -30px); -moz-transform: rotate(45deg) translate(0, -30px); transform: rotate(45deg) translate(0, -30px); -webkit-animation-delay:0.52s; -moz-animation-delay:0.52s; animation-delay:0.52s;} 
.loading.bar div:nth-child(3){ -webkit-transform: rotate(90deg) translate(0, -30px); -moz-transform: rotate(90deg) translate(0, -30px); transform: rotate(90deg) translate(0, -30px); -webkit-animation-delay:0.65s; -moz-animation-delay:0.65s; animation-delay:0.65s;} 
.loading.bar div:nth-child(4){ -webkit-transform: rotate(135deg) translate(0, -30px); -moz-transform: rotate(135deg) translate(0, -30px); transform: rotate(135deg) translate(0, -30px); -webkit-animation-delay:0.78s; -moz-animation-delay:0.78s; animation-delay:0.78s;} 
.loading.bar div:nth-child(5){ -webkit-transform: rotate(180deg) translate(0, -30px); -moz-transform: rotate(180deg) translate(0, -30px); transform: rotate(180deg) translate(0, -30px); -webkit-animation-delay:0.91s; -moz-animation-delay:0.91s; animation-delay:0.91s;} 
.loading.bar div:nth-child(6){ -webkit-transform: rotate(225deg) translate(0, -30px); -moz-transform: rotate(225deg) translate(0, -30px); transform: rotate(225deg) translate(0, -30px);-webkit-animation-delay:1.04s; -moz-animation-delay:1.04s; animation-delay:1.04s;} 
.loading.bar div:nth-child(7){ -webkit-transform: rotate(270deg) translate(0, -30px); -moz-transform: rotate(270deg) translate(0, -30px); transform: rotate(270deg) translate(0, -30px); -webkit-animation-delay:1.17s; -moz-animation-delay:1.17s; animation-delay:1.17s;} 
.loading.bar div:nth-child(8){ -webkit-transform: rotate(315deg) translate(0, -30px); -moz-transform: rotate(315deg) translate(0, -30px); transform: rotate(315deg) translate(0, -30px);-webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; animation-delay:1.3s;}
@-webkit-keyframes fadeit{ 0%{opacity:1; } 100%{opacity:0; }}
@-moz-keyframes fadeit{ 0%{ opacity:1;} 100%{opacity:0; }}
@keyframes fadeit{ 0%{ opacity:1; } 100%{ opacity:0;}}

/* skeleton style */
.skeleton{ margin-top:0px;}
.card-skeleton{  margin:20px;  background-color: rgba(181,210,217,0.30); border: 1px solid rgba(181,210,217,0.30);; padding: 30px;  margin-bottom:20px;  border-radius: 2px;}
.card-skeleton .header{  display: flex;  align-items: center;}
.card-skeleton .header .img{  height: 75px;  width: 75px;  background-color: rgba(181,210,217,0.30);  border-radius: 4%;  position: relative;  overflow: hidden;}
.card-skeleton .header .details{  margin-left: 20px;}
.card-skeleton .details span{  display: block;  background-color: rgba(181,210,217,0.30);  border-radius: 3px;  overflow: hidden;  position: relative;}
.card-skeleton .details .name{  height: 15px;  width: 100px;}
.card-skeleton .details .about{  height: 13px;  width: 150px;  margin-top: 10px;}
.card-skeleton .description{  margin: 25px 0;}
.card-skeleton .description .line{  background-color: rgba(181,210,217,0.30);  border-radius: 3px;  height: 13px;  margin: 10px 0;  overflow: hidden;  position: relative;}
.card-skeleton .description .line-1{  width: calc(100% - 15%);}
.card-skeleton .description .line-3{  width: calc(100% - 40%);}
.card-skeleton .card-item{  display: flex;}
.card-skeleton .clear{clear: both;height:20px;}
.card-skeleton .card-item .btn-item{  height: 45px;  width: 100%;  background-color: rgba(181,210,217,0.30);  border-radius: 10px;  position: relative;  overflow: hidden;}
.card-skeleton .card-item .btn-1{  margin-right: 8px;}
.card-skeleton .card-item .btn-2{ margin-left: 8px;}
.card-skeleton .header .img::before,
.card-skeleton .details span::before,
.card-skeleton .description .line::before,
.card-skeleton .card-item .btn-item::before{  position: absolute;  content: "";  height: 100%;  width: 100%;  background-image: linear-gradient(to right, rgba(181,210,217,0.30) 0%, rgba(181,210,217,0.50) 20%, rgba(181,210,217,0.30) 40%, rgba(181,210,217,0.30) 100%);background-repeat: no-repeat;  background-size: 450px 400px;  animation: shimmer 1s linear infinite;}
.card-skeleton .header .img::before{  background-size: 650px 600px;}
.card-skeleton .details span::before{  animation-delay: 0.2s;}
.card-skeleton .card-item .btn-2::before{ animation-delay: 0.2s;}
@keyframes shimmer { 0%{ background-position: -450px 0; } 100% {  background-position: 450px 0;  }}

.alerts{border:0;position:relative;z-index:99999;padding:.95rem 1.25rem;border-radius:1px;color:inherit;background-color:#fff;-webkit-box-shadow:1px 1px 14px 0 rgba(18,38,63,.26);-moz-box-shadow:1px 1px 14px 0 rgba(18,38,63,.26);box-shadow:1px 1px 14px 0 rgba(18,38,63,.26)}
.alerts.hide{display:none;}
.alerts [data-notify=icon]{display:block}
.alerts [data-notify=icon]::before{line-height:35px;font-size:22px;display:block;left:15px;position:absolute;top:50%;transform:translateY(-50%);width:35px;height:35px;border-radius:30px;text-align:center;color:#fff}
.alerts [data-notify=title]{display:block;color:#2b2b2b;font-weight:500;font-size:15px}
.alerts [data-notify=message]{font-size:13px;color:#908e8e;padding-right:25px}
.alert-notify{display:inline-block;margin:0px auto;padding-left:65px;position:fixed;transition:all 0.5s ease-in-out 0s;z-index: 9999;top:20px;right:30px;margin-left:30px;min-width:300px;max-width:400px}/* .alert .close{background:rgba(255,255,255,.8);width:25px;height:25px;line-height:25px;top:12px!important;border-radius:50%} */.alert-default{border-left:4px solid #1a2035}
.alert-default [data-notify=icon]:before{background:#1a2035}
.alert-primary{border-left:4px solid #1572e8;}
.alert-primary [data-notify=icon]:before{background:#1572e8;}
.alert-secondary{border-left:4px solid #2db431;}
.alert-secondary [data-notify=icon]:before{background:#2db431;}
.alert-info{border-left:4px solid #48abf7;}
.alert-info [data-notify=icon]:before{background:#48abf7;}
.alerts-success{border-left:4px solid #31ce36;}
.alerts-success [data-notify=icon]:before{background:#31ce36;}
.alert-warning{border-left:4px solid #ffad46;}
.alert-warning [data-notify=icon]:before{background:#ffad46;}
.alert-danger{border-left:4px solid #f25961;}
.alert-danger [data-notify=icon]:before{background:#f25961;}
.alerts .close{ position: relative; cursor: pointer; background:rgba(255,255,255,.8);width:25px;height:25px;line-height:25px;border-radius:50%;border:0;} 
.alerts .close{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Lato,sans-serif;}
.alert-dismissible .close {position: absolute;top: 0;right: 10px; padding: .75rem 1.25rem;color: inherit;}
.alerts .close {float: right;font-size: 1.5rem;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;    opacity: .5;}