<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
WebFont.load({
  google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
  active: function() {
    sessionStorage.fonts = true;
  }
});
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" media="all">
<!--end::Web font -->
<!--begin::Base Styles -->
<link href="<?php echo $this->config->item('Template_template_file_url'); ?>template/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->config->item('Template_template_file_url'); ?>template/assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Base Styles -->
<!--<link rel="shortcut icon" href="<?php //echo base_url()?>template/assets/app/media/img/logos/logo.png" style="width: 50px;"/>-->

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/b-print-2.0.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.3/sc-2.0.5/datatables.min.css"/>
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.13.1/b-2.3.2/b-colvis-2.3.2/b-html5-2.3.2/b-print-2.3.2/fc-4.2.1/fh-3.3.1/kt-2.8.0/r-2.4.0/rg-1.3.0/sc-2.0.7/datatables.min.css"/> -->

<style>
@media print{
  @page {
    size: auto;
  }
}
.select2-container{
  height: 100%;
}
.dataTables_wrapper .dataTable {
  margin: 0rem 0 !important;
}
.dt-buttons {
  margin-bottom: 15px;
}
.padding-0 {
  padding: 0px !important;
}
.form-control, .form-control[readonly], .select2-selection {
  border-color: #bfc0c3 !important;
}

.m-body .m-content {
  min-height: 800px;
}

/* .dataTables_scrollHeadInner{
width:100% !important;
} */
/* .dataTables_scrollHeadInner table{
width:100% !important;
} */
input[type="text"]:disabled {
  background-color: #f4f5f8 !important;
  border-color: #ebedf2 !important;
  color: #575962 !important;
}

input[type="text"]:read-only {
  background-color: #f4f5f8 !important;
  border-color: #ebedf2 !important;
  color: #575962 !important;
}

.m-quick-sidebar {
  width: 750px !important;
  right: -780px;
  padding: 0px;
}

.m-tabs-line.nav.nav-tabs .nav-link, .m-tabs-line a.m-tabs__link {
  background: transparent;
  color: #7b7e8a !important;
}

.m-tabs-line.nav.nav-tabs .nav-link i, .m-tabs-line a.m-tabs__link i {
  color: #898b96 !important;
}

.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link:hover,
.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link.active,
.m-tabs-line.m-tabs-line--primary a.m-tabs__link:hover, .m-tabs-line.m-tabs-line--primary a.m-tabs__link.active
{
  color: #5867dd !important;
  border-bottom: 4px solid #5867dd !important;
  border-bottom-width: 4px !important;
}

.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link:hover>i,
.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link.active>i,
.m-tabs-line.m-tabs-line--primary a.m-tabs__link:hover>i, .m-tabs-line.m-tabs-line--primary a.m-tabs__link.active>i
{
  color: #6d7ae1 !important;
}
</style>
<style>
#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

/*when a value is selected, this class removes the content */
.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

.custom-file {
  overflow: hidden;
}

.custom-file-control {
  white-space: nowrap;
}
.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2rem;
  overflow: hidden;
  font-size: 1rem;
}
</style>
<style>
.m-form__group {
  padding-right: 5px !important;
  padding-left: 5px !important;
}
.m-section{
  padding: 10px !important;
}

.office_project_nav {
  background: linear-gradient(-45deg, #33006e, #33006e, #790909, #ff0070) !important;
  animation: Gradient 15s ease infinite;
  background-size: 400% 400% !important;
  color: #fff !important;
  transition-property: border, background, color;
  transition-duration: .05s;
  transition-timing-function: ease-in-out;
}
.site_project_nav {
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)
  !important;
  animation: Gradient 15s ease infinite;
  background-size: 400% 400% !important;
  color: #fff !important;
  transition-property: border, background, color;
  transition-duration: .05s;
  transition-timing-function: ease-in-out;
}
i.currency{
  font-style: normal !important;
  font-weight: 900 !important;
}
</style>

<style type="text/css">

@media screen and (max-width: 600px) {

  .input-group.m-input-group--pill>.form-control:last-child, .input-group.m-input-group--pill>div:last-child>span, .input-group.m-input-group--pill>div:last-child>.btn {
    -moz-border-top-right-radius: 1.3rem;
    border-top-right-radius: 1.3rem;
    -moz-border-bottom-right-radius: 1.3rem;
    border-bottom-right-radius: 1.3rem;
    width: 85px;
  }

  .input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
  }
}
caption {
  display: table-caption;
  text-align: center;
  caption-side: top;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item>.m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__link-text {
  color: #d4d4d4 !important;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item>.m-menu__heading .m-menu__link-icon, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__link-icon {
  color: #d6d6d6;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__section .m-menu__section-text {
  color: #23d1ae;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item>.m-menu__heading .m-menu__ver-arrow, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__ver-arrow {
  color: #d4d4d4;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__link .m-menu__link-text {
  color: #d4d4d4 !important;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item>.m-menu__link .m-menu__link-icon {
  color: #d4d4d4;
  }.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item>.m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item>.m-menu__link .m-menu__link-text {
    color: #d4d4d4;
  }
  .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__link .m-menu__link-text {
    color: #23d1ae !important;;
  }
  </style>
  <style>
  .dataTables_scrollHead {
    position: sticky !important;
    top: 70px;
    z-index: 10;
    background-color: white;
    box-shadow: 0px 5px 5px 0px rgba(82, 63, 105, 0.08);
  }
  .vertical{
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .table.table-striped thead th {
    border: 1px solid #f4f5f8 !important;
  }

  .m-radio.m-radio--state-warning>input:disabled ~ span:after {
    border-color: black;
  }
  .m-radio.m-radio--state-danger>input:disabled ~ span:after {
    border-color: white;
  }
  .m-radio.m-radio--state-success>input:disabled ~ span:after {
    border-color: white;
  }
  .m-radio.m-radio--state-info>input:disabled ~ span:after {
    border-color: white;
  }

  .width-100{
    width:100px !important;
  }
  .width-150{
    width:150px !important;
  }
  .width-200{
    width:200px !important;
  }
  .width-300{
    width:300px !important;
  }
  .width-400{
    width:400px !important;
  }
  .width-500{
    width:500px !important;
  }

  @media print {
    .col-md-2 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 16.66667%;
      flex: 0 0 16.66667%;
      max-width: 16.66667%;
    }
    .col-md-8 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 66.66667%;
      flex: 0 0 66.66667%;
      max-width: 66.66667%;
    }
    .col-md-6 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-md-4 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 33.33333%;
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
    }
  }

  .m-portlet .m-portlet__body {
    color: black !important;
}
</style>
