.spa_reservation_form .alert{
	display: none;
}
.spa_reservation_form .alert p{
	color: #25ac91;
	font-size: 14px;
    
    line-height: 20px;
    
    text-align: left;
    margin-bottom: 0px;
}
.spa_reservation_form .form-control{
	margin-bottom: 10px;
}
.spa_reservation_form h3{
	text-transform: uppercase;
	margin-top: 0px;
	margin-bottom: 40px;
}
.badge-flat {
    font-size: 12px;
}
.custome_padding.table td,.custome_padding.table th {
    padding: 7px 5px;
}
.addclass-row td{
	animation-duration: 4s;
	animation-name: slidein;
}
@keyframes slidein {
  from {
    background: rgba(255, 87, 34, 0.25);
    
  }
  to {
    background: #fff;
    
  }
}
.nav-sidebar>.nav-item>.nav-link {
    font-weight: 500;
    padding: 15px 20px;
    font-size: 14px;
}
.nav-sidebar .nav-item {
     margin-bottom: 0px; 
    border-bottom: 1px solid #464444;
}
form label{
  margin-bottom: 0px;
}
.datatable-scroll-wrap {
    
    overflow-x: visible;
}
.point {
  background: #ffb9b9 !important;
  color: #000;
}
.joe td {
  color: #fff;
}
.joe {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
  background-size: 500% 500% !important;
  animation: gradientBG 3s ease infinite !important;
}


@keyframes gradientBG {
0% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 50%;
}
}

.joe1 {
  background: linear-gradient(-45deg, #b9ffbe, #464444) !important;
  background-size: 500% 500% !important;
  animation: gradientJoe 3s ease infinite !important;
  color: #fff;
}
@keyframes gradientJoe {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.hidden{
  display: none;
}
.pagination{
  margin-top: 10px;
  float: right;
  text-align: right;
  margin-bottom: 10px;
}
.pagination li{
    padding: 0px 7px;
    border: 1px solid #003366;
    border-radius: 2px;
    margin-left: 1px;
}
.pagination li a{
  color: #003366;
}
.pagination li.active{
  background: #003366
}
.pagination li.active a{
  color:  #fff
}
.bookings.active .card-body{
  background: #4caf5052;
}
.bookings .card .card-body {
    padding: 8px 20px;
    height: 150px;
    overflow-y: scroll;
    padding-left: 23px;
}
.badge-primary {
    color: #fff;
    background-color: #2196f3;
}
.badge {
    display: inline-block;
    padding: .3125rem .375rem;
    font-size: 75%;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .125rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
form label{
  font-weight: 500;
}
form .form-control{
  margin-bottom: 15px;
}
form .site-button, form .site-buttons {
    width: 100px;
    background: #003366;
    color: #fff;
    height: 40px;
    box-shadow: none;
    border: none;
    margin-top: 0px; 
    float: left;
    line-height: 20px;
    text-align: center;
}
tr.online_tool{
  background: rgba(76, 175, 80, 0.4) !important;
}
#modal_detail_upload .info_row p{
  color: #000;  
}
#modal_detail_upload .info_row p span{
  padding: 4px 7px;
  border-radius: 5px;
  background: #eee;
  margin-right: 5px;
  width: 10px;
}
#modal_detail_upload .info_row p.success span{
  background: #4caf50;
  color: #fff;
  display: inline-table;
    margin-bottom: 3px;
}
#modal_detail_upload .info_row p.fail span{
  background: #f44336;
    color: #fff;
    cursor: pointer;
    display: inline-table;
    margin-bottom: 3px;
}
td.error_tool{
  background: rgba(255, 26, 9, 0.41);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
.m-account__sales-info>div {
    width: 25%;
    float: left;
    text-align: center;
}
.m-account__sales-info .h.h--5{
  font-weight: 600;
}
.m-account__sales-info p{
  margin: 0px;
}
.c-badge--1 {
    background: #29c747;
}
.c-badge--l1 {
    font-size: 20px;
    padding: 15px 20px;
}
.c-badge {
    min-width: 100px;
    border-radius: 3px;
    padding: 10px;
    display: inline-block;
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
}
.c-badges {
    background: #9e9e9e;
    border-radius: 3px;
    padding: 10px;
    display: inline-block;
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
}
.input_opacity_0{
  opacity: 0;
    position: absolute;
    top: 0;
}
.text-error{
  font-size: 16px;
    color: red;
    font-weight: bold;
}
.login-form label.error{
  color: red;
  margin: 0px;
}
.login-form input.error{
  border: 1px solid red;
  margin-bottom: 0px;
}
.checkcontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 10px;
}
.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkcontainer input:checked ~ .checkmark {
    background-color: #2196F3;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}
.checkcontainer .checkmark:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.cases_option{
  width: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
   
    padding-left: 10px;
    padding-right: 10px;
}
.auto_upload {
  padding-left: 0px;
}
.auto_upload .checkmark {

    background-color: #9a9494;
}
.table_account  td, .table_account th {
    padding: 5px;
}
.advance_setting .title{
    width: 100%;
    float: left;
}
.advance_setting .checkcontainer{
 
  float: left;
  margin: 0px;
  padding-left: 25px;
  font-size: 12px;
  
  
}
.advance_setting .checkcontainer span{
 
      display: inline;
    width: 15px;
    height: 15px;
    margin-top: 0px;
    font-weight: bold;
}
.advance_setting .checkcontainer .checkmark:after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
}
.advance_setting .checkcontainer input:checked ~ .checkmark {
    background-color: #76c484;
}
.slidecontainer {
  width: 100%; /* Width of the outside container */
}
.advance_setting {
    margin-bottom: 20px;
}
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 8px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 12px; /* Set a specific slider handle width */
  height: 12px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 12px; /* Set a specific slider handle width */
  height: 12px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}