.skin-green {
}
.modal-open {
  overflow: hidden !important;
}
.modal-body {
  overflow: hidden !important;
  overflow-y: auto !important;
}
.modal-backdrop {
  display: none;
}
body {
  height: 100vh;
}
body,
.wrapper {
  position: relative;
}
label.error_custom {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: block;
  color: #f44336;
  position: relative;
  padding-left: 1.625rem;
  font-weight: 400;
}

.datetimerange {
  margin-left: 0 !important;
}

label.error_custom::before {
  content: "";
  top: 0.4rem;
  font-family: "icomoon";
  font-size: 1rem;
  position: absolute;
  left: 0;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skin-green .wrapper {
  background-color: #f4f6fe;
}
.skin-green .main-footer {
  /*  position: absolute;*/
  /*  bottom: 15px;*/
  /*  left: 0;*/
  /*  width: 230px;*/
  margin-left: 0 !important;
  background-color: #f4f6fe;
  border-top: unset;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #7e7f83;
}
.skin-green .wrapper .content-wrapper {
  height: auto !important;
  /* min-height: 1200px !important; */
}
.skin-green .main-header {
  -webkit-box-shadow: 0px 3px 5px -1px rgb(0, 0, 0, 0.1);
  box-shadow: 0px 3px 5px -1px rgb(0, 0, 0, 0.1);
}
.skin-green .main-header .logo {
  background-color: #fff !important;
}
.skin-green .main-header .navbar-static-top {
  background-color: #fff !important;
}
.skin-green .main-sidebar {
  padding-top: 100px;
}
/* .skin-green .main-header .sidebar-toggle,
.main-header .top-title {
  display: none;
} */
.main-header .top-title {
  display: none;
}
.skin-green .main-header .navbar-nav > li > a {
  padding-top: 25px;
  padding-bottom: 25px;
}
.skin-green .main-header .navbar .nav > li > a {
  color: #5e5e5e;
}
.navbar.navbar-static-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-sidebar {
  overflow: auto;
  height: 100vh;
}
.navbar.navbar-static-top::after,
.navbar.navbar-static-top::before {
  content: unset;
}

.nav.navbar-nav .dropdown.open,
.nav.navbar-nav .dropdown.open a.dropdown-toggle {
  background-color: #fff !important;
  color: #5e5e5e !important;
}

.nav.navbar-nav .dropdown a.dropdown-toggle {
  color: #f43b48 !important;
}

.nav.navbar-nav .dropdown-menu > li > a:hover {
  background-color: #f43b48 !important;
  color: #fff;
}

.skin-green .main-header .navbar .nav > li > a:hover {
  background-color: #fff;
  color: #f43b48;
}
.skin-green .main-header .navbar .nav > li > a:after {
  content: "|";
  margin-left: 30px;
  font-weight: bold;
}
.skin-green .main-header .navbar .nav > li > a.dropdown-toggle:after {
  content: unset;
}
.skin-green .sidebar-menu > li > a {
  color: #181819;
  border-left-color: #f4f6fe !important;
  background: #f4f6fe !important;
}
.skin-green .sidebar-menu > li > a:hover {
  background-color: #fff !important;
  color: #f43b48;
  border-left-color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.skin-green .sidebar-menu > li > a {
  margin-left: 20px;
}
.skin-green .sidebar-menu > li.active > a {
  background-color: #fff !important;
  color: #f43b48 !important;
  border-left-color: #fff !important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.skin-green .sidebar-menu > li > .treeview-menu {
  background: #fff;
  margin-left: 30px;
  margin-top: 5px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.skin-green .treeview-menu > li > a {
  color: #5e5e5e;
}
.skin-green .treeview-menu > li > a:hover {
  color: #f43b48;
}
.skin-green .wrapper .content-wrapper,
.wrapper .right-side {
  background-color: #f4f6fe !important;
}
.skin-green .content-wrapper .content .box-default {
  border-top: unset !important;
  border-bottom: unset !important;
  border-radius: 10px;
}
/*.skin-green .content-wrapper section.content {
  padding-left: 0;
  padding-top: 15px;
}*/
.list-dash-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.list-dash-card.list-dash-card-v2 .card-dash {
  height: 200px;
  max-width: 300px;
}
.card-dash {
  height: 160px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.25rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
  padding: 26px 2px;
  text-align: center;
  max-width: 200px;
  margin-bottom: 15px;
  position: relative;
}
.card-dash .card-url {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.bg {
  background-size: cover;
  background-position: center top;
}
.content-item > h2 {
  /* font-size: 1.375rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 2.2px; */
  text-align: left;
  color: #000;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px #ebebeb solid;
  width: 100%;
}

.content-item {
  margin-bottom: 50px;
}

#calendar-container {
  position: relative;
  z-index: 1;
}

.skin-green .treeview-menu > li.active > a,
.skin-green .treeview-menu > li > a:hover {
  color: #f43b48;
}
.skin-green .wrapper .content-wrapper,
.wrapper .right-side {
  background-color: #f4f6fe !important;
  padding-top: 5px;
  padding-right: 5px;
}

#calendar {
  margin: 20px auto;
}

.stepcontent,
.content {
  margin-bottom: 60px;
}
.sidebar-menu .icone img {
  height: 20px;
  width: 20px;
}

.card-dash-item {
  padding: 0 10px;
}

.card-dash-item .card-dash {
  max-width: 190px;
  max-height: 130px;
}

#DataTables_Table_0_length,
#DataTables_Table_0_filter {
  display: inline-flex;
  align-items: center;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  width: 100%;
}
body.MembershipPlan .formError {
  min-width: 180px;
}
body.MembershipPlan .modal-body {
  overflow: visible !important;
  max-height: none !important;
}
body.MembershipPlan.unlockPlan .col-md-12 .box-body > form > .steps,
body.MembershipPlan.lockerPlan .col-md-12 .box-body > form > .steps {
  margin: -10px -30px 30px;
  width: calc(100% + 60px);
}
.select2-container--default
  .select2-selection--single
  .select2-selection__clear {
  margin-top: -3px;
  margin-right: 15px;
}
.select2-selection--single .select2-selection__clear > span {
  display: none;
}

body table.dataTable tbody > tr.selected,
body table.dataTable tbody > tr > .selected {
  background-color: white;
}
body table.dataTable tbody > tr.selected:nth-of-type(odd),
body table.dataTable tbody > tr > .selected:nth-of-type(odd) {
  background-color: rgba(216, 216, 216, 0.42);
}

.sidebar-menu,
.main-sidebar .user-panel,
.sidebar-menu > li.header {
  white-space: normal;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #ececec;
}
.scroll-x {
  overflow-x: auto;
}
.last-column-sticky tr > *:last-child {
  position: sticky;
  right: -10px;
  background-color: #ffffff;
  vertical-align: middle;
}

.last-column-sticky tr>*:last-child {
  position: sticky;
  right: -10px;
  background-color: #ffffff;
  vertical-align: middle;
}

.last-column-sticky tr>*:last-child::before {
  background-color: #ffffff;
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.last-column-sticky .table-striped tbody>tr:nth-of-type(odd)>*:last-child::before,
.last-column-sticky>tbody>tr:nth-of-type(odd)>*:last-child::before {
  background-color: #ececec;
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.box-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 15px;
}
.box-header > :last-child:not(:first-child) {
  margin: auto 0 auto auto;
  position: static;
}
.box-header .buttons > button {
  margin-top: 7px;
  margin-bottom: 7px;
}
.box-header .buttons :last-child {
  margin-right: 0;
}
.box-header .content-header:first-child:last-child,
.box-body .content-header {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 15px 0 0;
}
.box-header
  .content-header:first-child:last-child
  > :last-child:not(:first-child),
.box-body .content-header > :last-child:not(:first-child) {
  margin-right: 0;
  margin-left: auto;
  float: none;
  position: static;
  background: none;
}
.filter label > .select2-container > .select2-choices {
  background-image: none !important;
}

.filter label > input {
  padding: 5px;
  border: 1px solid #aaa;
}

.filter > .dataTables_filter > .btn-filter {
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.filter > .dataTables_filter > .btn-filter.btn-search,
.filter > .dataTables_filter > .btn-filter.btn-option {
  background-color: #3c8dbc;
  border-color: #367fa9;
  color: #fff;
}

.filter > .filter-options {
  margin-top: 10px;
  display: none;
}

.content-collapse {
  display: flex;
  flex-wrap: wrap;
}

.filter > .filter-options > .content-collapse > label {
  flex: 0 0 33.33%;
}
.sidebar-menu {
  padding-bottom: 100px;
}

/*.form-control[readonly]{
  pointer-events: none;
}*/
.form-control[readonly] + .select2-container {
  pointer-events: none;
  opacity: 0.8;
}

.dataTable_v2 {
  min-height: 500px;
}

.no-select,
.no-select * {
    user-select: none !important;
    -webkit-user-select: none !important;
}
div.dataTables_wrapper{
  position: static;
}
div.dataTables_wrapper > .dt-buttons{
    position: absolute;
    top: 25px;
    right: 15px;
    z-index: 1;
}
.show-table-scroll-bar{
  --scroll-height: 15px;
}
.tablet.show-table-scroll-bar{
  --scroll-height: 30px;
}
.show-table-scroll-bar .main-footer{
  padding-bottom: calc(15px + var(--scroll-height));
}
.scrollbar{
  position: fixed;
  width: 100%;
  height: var(--scroll-height);
  background-color: rgba(0,0,0,0.15);
  bottom: 0;
  z-index: 1000;
}
.scrollbar > div{
  height: calc(var(--scroll-height) - 4px);
  min-width: 100px;
  background-color: rgba(0,0,0,0.4);
  border-radius: 8px;
  width: 100px;
  margin-top: 2px;
  position: absolute;
}
.scrollbar:hover{
  background-color: rgba(0,0,0,0.3);  
}
.scrollbar:hover > div{
  background-color: rgba(0,0,0,0.6);  
}

[loading]{
  overflow: hidden;
}
body [loading]{
  position: relative;
}
body > [loading] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}
[loading]::before{
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1200;
}
body [loading]::before{
  position: absolute;
}
[loading]::after{
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  content: "";
  display: block;
  position: absolute;
  border: 0.2rem solid #ff2424;
  border-top-color: transparent;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
  z-index: 1201;
}
button[loading] {
  position: relative;
  color: transparent;
}
button[loading]::before {
  display: none;
}
[loading] button{
  pointer-events: none;
}
.dropdown-menu > li > a{
  width: 100%;
}
.pdf-content{
  box-shadow: 1px 1px 3px 1px #ddd;
}

.slick-slider {
  width: 100%;
  max-width: 100%;
  margin: auto;
}

.slick-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.bg_header {
  background-image: url('/webroot/img/compact-header-pc.png');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  width: 100%;
  height: 70px;
}
.dropdown_event {
  position: absolute;
  right: 11%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.dropdown_event .dropdown-menu>li>a:hover {
  background-color: #ff495b;
}

.dropdown_event.open .dropdown-toggle {
  background-color: #fff;
  color: #B80012;
}

.dropdown_event .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 18px;
  border-radius: 4px;
  padding: 5px 20px;
}

.filter>.dataTables_filter>.date-options {
  margin-left: auto;
}

.m-switch a{
  position: relative;
  padding: 0 5px;
  color: #4E5E6A;
}

.m-switch a.active{
  color: #f43b48;
}

.filter>.dataTables_filter .btn-filter {
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

@media (max-width: 768px) {
  .main-header {
    display: block !important;
  }
  .dropdown_event {
    right: 5%;
  }
  .bg_header {
    display: none;
  }
  .slick-slide img {
    width: 100%;
    height: auto;
  }
  .navbar-collapse {
      position: absolute !important;
      top: 100px;
      right: 0;
      bottom: 0;
      height: 100vh;
      margin: 0 !important;
      background: white;
      animation-duration: 0.3s;
      animation-fill-mode: forwards;
      display: block;
      visibility: hidden;
      opacity: 0;
  }

  .navbar-collapse.out {
      animation-name: slideOut;
  }

  .navbar-collapse.in {
      animation-name: slideIn;
  }

  header.in {
      position: fixed;
  }

  @keyframes slideIn {
      from {
          left: 100%;
          opacity: 0;
          visibility: hidden;
      }
      to {
          left: 0;
          opacity: 1;
          visibility: visible;
      }
  }

  @keyframes slideOut {
      from {
          left: 0;
          opacity: 1;
          visibility: visible;
      }
      to {
          left: 100%;
          opacity: 0;
          visibility: hidden;
      }
  }
}
@media (min-width: 1200px) {
  .list-dash-card {
    justify-content: flex-start;
  }
  .list-dash-card-v2 .card-dash-item:nth-child(4n) .card-dash {
    margin-right: 0;
  }
  .card-dash-item:first-child .card-dash,
  .card-dash-item:nth-child(6n + 1) .card-dash {
    margin-left: 0;
  }
  .card-dash-item .card-dash {
    margin: 0 auto 15px;
  }
  .card-dash-item:nth-child(6n) .card-dash {
    margin-right: 0;
  }
}

@media (max-width: 1200px) {
  .card-dash-item .card-dash {
    max-width: 100% !important;
  }

  #DataTables_Table_0_length,
  #DataTables_Table_0_filter {
    width: 100%;
    text-align: left;
    margin-bottom: 1rem;
  }

  #DataTables_Table_0_length > label,
  #DataTables_Table_0_filter > label {
    /* width: 25%; */
    margin-left: 0;
    /* margin-right: 2px; */
    display: flex;
    align-items: center;
  }

  #DataTables_Table_0_length > label > input,
  #DataTables_Table_0_filter > label > input {
    max-width: 120px;
  }

  #DataTables_Table_0_length > label > input,
  #DataTables_Table_0_length > label > select,
  #DataTables_Table_0_filter > label > input,
  #DataTables_Table_0_filter > label > select {
    margin: 0 0 0 5px;
  }
}

@media (max-width: 991px) {
  /* .card-dash {
    max-width: 100% !important;
  } */

  .list-dash-card-v2 {
    padding: 0 10px;
  }

  #DataTables_Table_0_length,
  #DataTables_Table_0_filter {
    margin-left: -7px;
    margin-right: -7px;
    float: none;
  }
  #DataTables_Table_0_length > label,
  #DataTables_Table_0_filter > label {
    /*    width: calc(50% - 15px);*/
    margin: 7px;
    display: flex;
    align-items: center;
  }
  .skin-green .main-header .logo{
    padding: 5px 46px !important;
  }
  .navbar-custom-menu .navbar-nav > li > a{
    line-height: 15px;
  }
}

.d-flex {
  display: flex !important;
}
.dataTables_wrapper .dt-buttons {
  margin-left: auto;
}
.dataTables_scrollBody{
  min-height: 500px;
}
.refer-list{
  padding: 10px 12px;
  font-weight: bold;
}
.username-text{
  width: 80px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 768px) and (min-width: 768px) {
  .dataTables_wrapper .dt-buttons {
    position: absolute;
    top: -70px;
    right: 0;
  }
}
@media (max-width: 767px) {
  .modal-dialog {
    max-width: 100% !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  #DataTables_Table_0_length > label,
  #DataTables_Table_0_filter > label {
    width: 100%;
  }
  .dataTable_v2 .dt-buttons {
    position: static !important;
    display: flex;
    justify-content: flex-end;
  }

  .filter > .filter-options > .content-collapse > label {
    flex: 0 0 100% !important;
  }
  .filter > .filter-options > .content-collapse > label > .select2-container {
    width: 100% !important;
  }
  .filter > .filter-options > .content-collapse > label > input {
    width: 100% !important;
  }
  .filter .dataTables_filter {
    margin: 0 !important;
    padding-bottom: 0px;
  }
  .filter .dataTables_filter > label {
    margin: 0 !important;
    padding-bottom: 20px;
    display: block !important;
  }
  .filter .dataTables_filter > label > input {
    width: 100%;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .top-menu {
    position: relative;
    z-index: 1001;
    background-color: #fff;
    padding: 7px 15px;
  }
  .top-menu > div > span {
    padding: 7px;
  }
  .top-menu > div > ul > li > a {
    padding: 7px;
    color: #f43b48 !important;
  }

  .navbar-custom-menu {
    width: auto;
  }
  .skin-green .main-header .navbar .nav > li > a:after {
    margin-left: 20px;
  }
  .main-header {
    max-height: none;
  }
  .nav.navbar-nav .dropdown a.dropdown-toggle {
    color: #737373 !important;
  }
  section.content {
    background-color: #fff;
  }
  section.content > br {
    display: none;
  }
  .skin-green .wrapper .content-wrapper,
  .wrapper .right-side {
    padding: 0;
  }
  .skin-green .content-wrapper .content .box-default {
    float: none;
  }
  .content-item.col-xs-12 > h2 {
    padding: 15px 0 7px;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 15px;
  }
  .content-item:not(.col-xs-12) > h2 {
    padding: 15px 0 7px;
    margin-top: 15px;
  }
  .skin-green .main-sidebar {
    padding-top: 220px !important;
  }
  #calendar .fc-toolbar {
    padding-left: 0;
    padding-right: 0;
    margin-left: -15px;
    margin-right: -15px;
  }
  #calendar .fc-toolbar .fc-left,
  #calendar .fc-toolbar .fc-right {
    width: 50%;
  }
  .fc-widget-content .fc-day-grid-container {
    height: auto !important;
  }
  body > .wrapper,
  .skin-green .main-footer {
    background-color: transparent !important;
  }
  .content-item {
    margin-bottom: 30px;
  }
  .content-item > h2 {
    margin-top: 0;
  }
  .content-item .revenue {
    justify-content: flex-start !important;
  }
  .content-item .chart-1 {
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
  #chart1,
  #chart2 {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin-left: 0;
    margin-right: 0;
  }
  .chart-custom {
    max-width: 100% !important;
    text-align: center;
    height: auto !important;
  }
  #chart1 {
    margin-bottom: 30px;
  }
  #chart2 {
    margin-left: -15px;
    width: calc(100% + 15px) !important;
  }
  /*.skin-green .main-header .logo img{
    height: 100%;
  }*/
  #system_message{
    position: unset !important;
  }

  .message-container{
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }
}
@media (max-width: 400px) {
  .dataTables_wrapper .dt-buttons {
    margin-left: unset;
  }
  .username-text{
    display: none;
  }
}

@media (max-width: 320px) {
  .user-menu > a > span {
    display: none;
  }
  #calendar .fc-toolbar .fc-left,
  #calendar .fc-toolbar .fc-right {
    width: 100%;
  }
  .revenue .col-xs-6 {
    width: 100%;
  }
  .content-item > h2 {
    font-size: 25px;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}