/* Fonts */

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

body, h1, h2, h3, h4, h5, h6, a, span, p{
   font-family: 'Lato', sans-serif;
}

input{
   font-size: 14px;
}

.ft-flex{
   display: flex;
   flex-wrap: wrap;
}

.ft-flex-center{
   justify-content: center;
}

.ft-flex-middle{
   align-items: center;
}

.ft-flex-bottom{
   align-items: flex-end;
}

.ft-disable-radius{
   border-radius: 0px;
}

.ft-flex-expand{
   flex-grow: 100;
}

.ft-width-expand{
   flex: 1;
}

.ft-flex-right{
   justify-content: flex-end;
}
.ft-flex-space-between{
   justify-content: space-between;
}

.ft-flex-self-right{
   margin-left: auto;
}

.ft-text-center{
   text-align: center;
}

.ft-sidebar-top{
   min-height: 58px;
}

.ft-footer-sidebar {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   width: 100%;
}

.ft-page-content{
   padding: 24px;
}

.ft-circle{
   border-radius: 50%;
}

.ft-card{
   border: 1px solid rgba(0,0,0,.2);
   border-radius: 2px;
   padding: 12px;
   background-color: white;
}

.ft-text-sm{
   font-size: 12px;
}

.ft-text-md{
   font-size: 16px;
}

.ft-text-title{
   font-size: 21px;
}

.ft-success,
.text-success {
   color: rgba(var(--vs-success),1)!important;;
}

.ft-primary,
.text-primary {
   color: rgba(var(--vs-primary),1)!important;;
}

.ft-warning,
.text-warning {
   color: rgba(var(--vs-warning),1)!important;;
}

.ft-danger,
.text-danger {
   color: rgba(var(--vs-danger),1)!important;
}

.ft-bg-primary{
   background-color: rgba(var(--vs-primary),1)!important;
}

.ft-bg-danger{
   background-color: rgba(var(--vs-danger),1)!important;
}

.ft-analogous-1\@400{
   color: #d74a61;
}

.ft-analogous-1\@300{
   color: #e0657b;
}

.ft-complementary\@400{
   color: #287996;
}

.ft-page-background{
   background-color: #F5F6FA;
}

.ft-margin-top\@24{
   margin-top: 24px;
}

.ft-margin-top\@12{
   margin-top: 12px;
}

.ft-margin-top\@8{
   margin-top: 8px;
}

.ft-margin-top\@4{
   margin-top: 4px;
}

.ft-margin-bottom\@24{
   margin-bottom: 24px;
}

.ft-margin-bottom\@12{
   margin-bottom: 12px;
}

.ft-margin-bottom\@8{
   margin-bottom: 8px;
}

.ft-margin-bottom\@4{
   margin-bottom: 4px;
}

.ft-child-margin\@2>*{
   margin: 2px;
}

.ft-full-width{
   width: 100%;
}

.ft-popup-visible{
   overflow: visible;
}

.ft-popup-header-primary > .vs-popup > header{
   background-color: #5C9DED;
}

.ft-popup-header-primary > .vs-popup > header > .vs-popup--title{
   color: white;
}

.ft-popup-60 > .vs-popup{
   min-width: 60%;
}

.ft-dropdown-fit-content{
   width: fit-content;
}

.vs-table--search-input{
   min-width: 32px;
}

.vs-dropdown--group > h3{
   color: grey;
   font-size: 12px;
}

.vs-popup--close{
   color: #E65E69
}

.vs-table--header{
	padding: 10px;
	background: #efefef;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
}

.vs-table--thead th {
	padding: 10px;
}

header.vs-navbar {
   height: 58px;
   max-width: 100%;
}

.mx-datepicker {
   display: block !important;
   width: 100% !important;
   font: 16px 'Lato', sans-serif !important;
}

/* z-index adjustment */
.vs-sidebar{
   z-index: 11000;
}

.vs-popup--background{
   z-index: 41000;
}

.con-vs-popup .vs-popup{
   z-index: 42000;
}

.vs-input--placeholder{
   font-size: 14px;
}

.vs-con-input-label{
   width: 100%;
}

.con-vs-card{
   box-shadow: none;
   border: 1px solid rgba(0,0,0,.07)
}

.vs-textarea{
   font-size: inherit;
   font-family: inherit;
}

.vs-col{
   padding-right: 12px;
   padding-bottom: 12px;
}

.vs-col:last-child{
   padding-right: 0px;
   padding-bottom: 12px;
}

.vs-sidebar.vs-sidebar-parent{
   position: fixed;
}

.vs-sidebar{
   background: #EBEDF7;
   max-width: 300px;
}

.vs-sidebar-primary .vs-sidebar-item-active{
   border-right: 3px solid #964628 !important;
}

.vs-sidebar-primary .vs-sidebar-item-active a{
    color: #964628!important;
    opacity: 1!important;
}

.vs-sidebar--items{
   padding-top: 0px;
}

.vs-divider{
   margin: 0px;
}

@media screen and (min-width: 920px) {
   header{
      /*padding-left: 300px;*/ /* This is so bad, keep to left */
   }
   header.vs-navbar{
      padding-left: 300px;
   }

   .ft-page{
      padding-left: 300px;
   }

   .ft-hide\@m{
      display: none;
   }

   .ft-padding-48\@lg{
      padding: 48px;
   }
}

/* md down*/
@media screen and (max-width: 920px) {
   header{
      left: 0px;
   }

   .ft-page-content{
      padding: 12px;
   }
}

/* xs down*/
@media screen and (max-width: 480px){
   .vs-sidebar{
      max-width: 80%;
   }
}

/* 
 * @author Nur Muhammad
 * @email  blog.nurmuhammad@gmail.com
 *
 * */

label.vs-input--label,
label.vs-select--label {
   padding-left: 0;
   padding-bottom: 3px;
   display: inline-block;
   color: rgba(0,0,0,0.7);
}

.vs-input--placeholder {
   top: 0;
}

.vs-select--input {
   border: 1px solid rgba(0,0,0,.2);
   padding: 6px;
}
.vs-select--input::placeholder {
   font-weight: normal;
   color: rgba(0,0,0,.4);
}

/*.vs-con-textarea {
   transition: padding-left .3s;
}*/
/*.vs-con-textarea.focusx {
   box-shadow: none;
   transform: none;
   padding-left: 3px;
   border: 1px solid rgba(var(--vs-primary),1)!important;
   box-shadow: 0 3px 10px 0 rgba(0,0,0,.15);
   -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,.15);
}*/

.mx-input {
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
}

.label-active {
   color: rgba(var(--vs-primary),1) !important;
   font-weight: bold;
}

/* ---------------------- */
/* Styles by Nur Muhammad */
/* ---------------------- */

/* Error Page */
.error-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #444;
  overflow: hidden;
}

/* Flexbox */
.d-flex {
  display: flex;
}
.d-flex.column {
  flex-direction: column;
}
.d-flex.row {
  flex-direction: row;
}
.d-flex.jc-center {
  justify-content: center;
}
.d-flex.jc-between {
  justify-content: space-between;
}
.d-flex.jc-end {
  justify-content: flex-end;
}
.d-flex.ai-center {
  align-items: center;
}
.d-flex.ai-start {
  align-items: flex-start;
}
.d-flex.ai-end {
  align-items: flex-end;
}
.d-flex .flex-1 {
  flex: 1;
}

/* Helpers */
.mt-0 { margin-top: 0px; }
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }

.mb-0 { margin-bottom: 0px; }
.mb-2 { margin-bottom: 2px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }

.ml-0 { margin-left: 0px; }
.ml-2 { margin-left: 2px; }
.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }

.mr-0 { margin-right: 0px; }
.mr-2 { margin-right: 2px; }
.mr-4 { margin-right: 4px; }
.mr-8 { margin-right: 8px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }

.clear {
  clear: both;
}