/*===================
GLOBAL CSS
====================*/
.content-wrapper,.navbar{
  /*background-color: #f5f9ff;*/
}
.contentloader{
  transition: height .2s linear;
}

.shadow-sm-red{
  box-shadow: 0 .125rem .25rem rgba(255,0,0,.075)!important;
}
.shadow-sm-green{
  box-shadow: 0 .125rem .25rem rgba(0,255,0,.075)!important;
}
.shadow-sm-blue{
  box-shadow: 0 .125rem .25rem rgba(0,0,255,.075)!important;
}

.shadow-red {
  box-shadow: 0 .5rem 1rem rgba(255,0,0,.15)!important;
}
.shadow-green {
  box-shadow: 0 .5rem 1rem rgba(0,255,0,.15)!important;
}
.shadow-blue {
  box-shadow: 0 .5rem 1rem rgba(0,0,255,.15)!important;
}

.shadow-lg-red {
  box-shadow: 0 1rem 3rem rgba(255,0,0,.175)!important;
}
.shadow-lg-green {
  box-shadow: 0 1rem 3rem rgba(0,255,0,.175)!important;
}
.shadow-lg-blue {
  box-shadow: 0 1rem 3rem rgba(0,0,255,.175)!important;
}

.shadow-active {
    box-shadow: 0 0.1rem 0.6rem rgba(255,0,0,0.3)!important;
}

.btn-anim-gradient {
  background: linear-gradient(105deg,#4285f4,#367cec,#2563c7,#1048a3,#7b2cd2,#6011a9,#7b2cd2,#1048a3,#2563c7,#367cec,#4285f4);
  background-size: 1000% 1000%;
  animation: btnbganim 4s linear infinite;
  -webkit-animation: btnbganim 4s linear infinite;
  -z-animation: btnbganim 4s linear infinite;
  -o-animation: btnbganim 4s linear infinite;
}
.btn-anim-gradient-warning {
  background: linear-gradient(
    130deg
    ,#ffc10794,#ffc107,#ffc107,#ffc107,#ffc107,#ffc10794,#ffc107,#ffc107,#ffc107,#ffc107);
  background-size: 200% 200%;
  animation: btnbganim 2s linear infinite;
  -webkit-animation: btnbganim 2s linear infinite;
  -z-animation: btnbganim 2s linear infinite;
  -o-animation: btnbganim 2s linear infinite;
}
.btn-anim-gradient-danger {
  background: linear-gradient(
    130deg
    ,#ff070794,#DD2D55,#DD2D55,#DD2D55,#DD2D55,#ff070794,#DD2D55,#DD2D55,#DD2D55,#DD2D55);
  background-size: 200% 200%;
  animation: btnbganim 2s linear infinite;
  -webkit-animation: btnbganim 2s linear infinite;
  -z-animation: btnbganim 2s linear infinite;
  -o-animation: btnbganim 2s linear infinite;
}
.float-btn{
  position: fixed;
  bottom: 15px;
  width: calc(100% - 250px);
  margin: auto;
}

.font-6 {
  font-size: 6px !important;
}
.font-7 {
  font-size: 7px !important;
}
.font-8 {
  font-size: 8px !important;
}
.font-9 {
  font-size: 9px !important;
}
.font-10 {
  font-size: 10px !important;
}
.font-11 {
  font-size: 11px !important;
}
.font-12 {
  font-size: 12px !important;
}
.font-13 {
  font-size: 13px !important;
}
.font-14 {
  font-size: 14px !important;
}
.font-15 {
  font-size: 15px !important;
}
.font-16 {
  font-size: 16px !important;
}
.font-17 {
  font-size: 17px !important;
}
.font-18 {
  font-size: 18px !important;
}
.font-19 {
  font-size: 19px !important;
}
.font-20 {
  font-size: 20px !important;
}
.font-21 {
  font-size: 21px !important;
}
.font-22 {
  font-size: 22px !important;
}
.font-23 {
  font-size: 23px !important;
}
.font-24 {
  font-size: 24px !important;
}
.font-25 {
  font-size: 25px !important;
}
.font-26 {
  font-size: 26px !important;
}
.font-27 {
  font-size: 27px !important;
}
.font-28 {
  font-size: 28px !important;
}
.font-29 {
  font-size: 29px !important;
}
.font-30 {
  font-size: 30px !important;
}
.font-31 {
  font-size: 31px !important;
}
.font-32 {
  font-size: 32px !important;
}
.font-33 {
  font-size: 33px !important;
}
.font-34 {
  font-size: 34px !important;
}
.font-35 {
  font-size: 35px !important;
}
.font-36 {
  font-size: 36px !important;
}
.font-37 {
  font-size: 37px !important;
}
.font-38 {
  font-size: 38px !important;
}
.font-39 {
  font-size: 39px !important;
}
.font-40 {
  font-size: 40px !important;
}
.font-41 {
  font-size: 41px !important;
}
.font-42 {
  font-size: 42px !important;
}
.font-43 {
  font-size: 43px !important;
}
.font-44 {
  font-size: 44px !important;
}
.font-45 {
  font-size: 45px !important;
}
.font-46 {
  font-size: 46px !important;
}
.font-47 {
  font-size: 47px !important;
}
.font-48 {
  font-size: 48px !important;
}
.font-49 {
  font-size: 49px !important;
}
.font-50 {
  font-size: 50px !important;
}

.bg-red {
  background-color: #F44336 !important;
  color: #fff;
}
.bg-pink {
  background-color: #E91E63 !important;
  color: #fff;
}
.bg-purple {
  background-color: #9C27B0 !important;
  color: #fff;
}
.bg-deep-purple {
  background-color: #673AB7 !important;
  color: #fff;
}
.bg-indigo {
  background-color: #3F51B5 !important;
  color: #fff;
}
.bg-blue {
  background-color: #2196F3 !important;
  color: #fff;
}
.bg-light-blue {
  background-color: #03A9F4 !important;
  color: #fff;
}
.bg-cyan {
  background-color: #00BCD4 !important;
  color: #fff;
}
.bg-teal {
  background-color: #009688 !important;
  color: #fff;
}
.bg-green {
  background-color: #4CAF50 !important;
  color: #fff;
}
.bg-light-green {
  background-color: #8BC34A !important;
  color: #fff;
}
.bg-lime {
  background-color: #CDDC39 !important;
  color: #fff;
}
.bg-yellow {
  background-color: #ffe821 !important;
  color: #fff;
}
.bg-amber {
  background-color: #FFC107 !important;
  color: #fff;
}
.bg-orange {
  background-color: #FF9800 !important;
  color: #fff;
}
.bg-deep-orange {
  background-color: #FF5722 !important;
  color: #fff;
}
.bg-brown {
  background-color: #795548 !important;
  color: #fff;
}
.bg-grey {
  background-color: #9E9E9E !important;
  color: #fff;
}
.bg-blue-grey {
  background-color: #607D8B !important;
  color: #fff;
}
.bg-black {
  background-color: #000000 !important;
  color: #fff;
}
.bg-white {
  background-color: #ffffff !important;
}

.col-red {
  color: #F44336 !important;
}
.col-pink {
  color: #E91E63 !important;
}
.col-purple {
  color: #9C27B0 !important;
}
.col-deep-purple {
  color: #673AB7 !important;
}
.col-indigo {
  color: #3F51B5 !important;
}
.col-blue {
  color: #2196F3 !important;
}
.col-light-blue {
  color: #03A9F4 !important;
}
.col-cyan {
  color: #00BCD4 !important;
}
.col-teal {
  color: #009688 !important;
}
.col-green {
  color: #4CAF50 !important;
}
.col-light-green {
  color: #8BC34A !important;
}
.col-lime {
  color: #CDDC39 !important;
}
.col-yellow {
  color: #ffe821 !important;
}
.col-amber {
  color: #FFC107 !important;
}
.col-orange {
  color: #FF9800 !important;
}
.col-deep-orange {
  color: #FF5722 !important;
}
.col-brown {
  color: #795548 !important;
}
.col-grey {
  color: #9E9E9E !important;
}
.col-blue-grey {
  color: #607D8B !important;
}
.col-black {
  color: #000000 !important;
}
.col-white {
  color: #ffffff !important;
}

/*===================
Nav Bar CSS
====================*/
[class*=sidebar-light-] .sidebar a i {
  color: #DD2D55 !important;
}
[class*=sidebar-light-] .sidebar a.active i {
  color: #ffffff !important;
}
[class*=sidebar-light-] .sidebar .nav-treeview a.active i {
  color: #DD2D55 !important;
}
.text-gold,.nav-link i {
  color: #DD2D55 !important;
}
.text-gold {
  color: #DD2D55 !important;
}

.user-header .header-main, .user-header .header-secondary{
  min-height: 60px;
}
.osahan-home-page{
  margin-top: 60px;
}
/*===================
SideBar CSS
====================*/
.main-sidebar .brand-link{
	background: linear-gradient(90deg,#fd0000,#f93b8a);
}
.brand-link {
  line-height: 1;
}
.brand-link .brand-image {
  max-height: 43px;
}

/*===================
Body CSS
====================*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #DD2D55; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B91C40; 
}

/*Remove input type NUMBER Arrows/Spinners*/
.type-d-none,.cat-d-none{
  display: none !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/*Remove text area resize icon*/
textarea {
  resize: none;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.form-control:focus,
.uneditable-input:focus {  
  border: 0px; 
  border-color: rgba(226, 39, 104, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(226, 39, 104, 0.4);
  outline: 0 none;
}
.btn:focus,.btn:active {
  border: 0px;
 border-color: rgba(226, 39, 104, 0.2);
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(226, 39, 104, 0.4);
 outline: 0 none !important;
 border-style: outset;
}
.btn:not(:disabled):not(.disabled):active:focus, .show>.btn.dropdown-toggle:focus {
    box-shadow: 0 0 12px 0.2rem rgb(180 72 99 / 50%) !important;
    transform: scale(1.01);
    -ms-transform: scale(1.01);
    transition: box-shadow .1s;
}
.btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn.dropdown-toggle:focus {
    box-shadow: 0 0 12px 0.2rem rgb(0 180 0 / 50%) !important;
}
.btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn.dropdown-toggle:focus {
    box-shadow: 0 0 12px 0.2rem rgb(226 0 0 / 50%) !important;
}


.user_avatar{
  height: 70px;
  width: 70px;
  object-fit: cover;
}
.item .info-box-icon{
  box-shadow: 0 1px 3px rgba(0,0,0,0.07)!important;
}
.index-icon{
  font-size: 22px;
  border: 2px solid;
  text-align: center;
  padding: 7px 0px;
  border-radius: 50px;
  height: 40px;
  width: 40px;
}
.info-box {
  box-shadow: 0 0 1px rgb(9 17 253 / 21%), 0 1px 3px rgb(39 226 45 / 25%);
  border-radius: .25rem;
  background-color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
  min-height: 55px;
  padding: .5rem;
  position: relative;
  width: 100%;
}
.info-box .info-box-text, .info-box .progress-description {
  line-height: 1.5;
}

/*Product Item*/

/*Service*/
#step_1 label,#step_2 label{
  font-size: 18px;
  font-weight: 500;
  color: #757272;
}
#booking_next_btn{
  z-index: 999;
  transition: 0.3s;
  bottom: -80px;
}
.selected_service .descs{
  display: none;
}

/*===================
/*Footer CSS
====================*/
footer{
  box-shadow: 0 -1rem 1rem rgba(0,0,0,.15)!important;
}
footer a{
	cursor: pointer;
	color: #646464 ;
}
footer a:hover,footer a:active{
  background-color: #FD6285;
  color: #fff;
}
footer i{
	font-size: 20px;
}
.btn-add,footer i.fa-plus{
	font-size: 24px;
  border: 1px solid;
  text-align: center;
  padding: 7px 0px;
  border-radius: 50px;
  height: 40px;
  width: 40px;
}
footer a.active{
  background-color: #eeecec;
  color: #CA0E39;
}
footer a.active:hover{
  background-color: #CA0E39;
  color: #fff;
}
.footer-sell{
  text-align: center;
  width: 100%;
  bottom: -70px;
  position: fixed;
  transition: 400ms;
}
.footer-sell>button{
  border: 2px solid #fff;
}
.footer-sell.active{
  width: 100%;
  bottom: 70px;
  position: fixed;
  transition: 400ms;
}

/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

}

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  footer{
    font-size: 90%;
  }
  .product-title{
    font-size: 16px !important;
    line-height: 19px!important;
    max-height: 57px!important;
    overflow: hidden;
  }
  .product-price{
    font-size: 18px;
  }
}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  .product-title{
    font-size: 18px;
    line-height: 21px;
    max-height: 63px;
    overflow: hidden;
  }
  .float-btn{
    width: 100%;
  }
}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {

}

/*X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {

}

/*keyframes....*/

@-webkit-keyframes btnbganim {
  0% {
    background-position: 100% 100%
  }
  to {
    background-position: 0 0
  }
}

@keyframes btnbganim {
  0% {
    background-position: 100% 100%
  }
  to {
    background-position: 0 0
  }
}
.cts-list{
  overflow: auto;
}
.cts-list>div{
  min-width: 440px;
}
.selected_service .text-truncate{
  display: none;
}

/*Inedex Slider*/
.slick-dots li {
    width: 6px !important;
}

/*Preloder*/
.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #ffffff54;
    z-index: 9999;
    backdrop-filter: blur(50px);
    transition: 0.3s;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.overlay__img {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    border-radius: 50%;
}

.spinner2 {
    width: 55px;
    height: 55px;
    display: inline-block;
    border-width: 2px;
    border-color: #FF8CA6;
    border-top-color: #DD2D55;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
/*Preloder: END*/

/*ONLINE SWICH*/
.switchToggle input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}

.switchToggle label {
    cursor: pointer;
    text-indent: -9999px;
    width: 100px;
    max-width: 100px;
    height: 32px;
    background: #d1d1d1;
    display: block;
    border-radius: 100px;
    position: relative;
    margin-bottom: 0px;
}

.switchToggle label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

.switchToggle input:checked+label,
.switchToggle input:checked+input+label {
    background: #DD2D55;
}

.switchToggle input+label:before,
.switchToggle input+input+label:before {
    content: 'Offline';
    position: absolute;
    top: 3px;
    left: 35px;
    width: 30px;
    height: 30px;
    border-radius: 90px;
    transition: 0.3s;
    text-indent: 0;
    color: #fff;
}

.switchToggle input:checked+label:before,
.switchToggle input:checked+input+label:before {
    content: 'Online';
    position: absolute;
    top: 3px;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 90px;
    transition: 0.3s;
    text-indent: 0;
    color: #fff;
}

.switchToggle input:checked+label:after,
.switchToggle input:checked+input+label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

.switchToggle label:active:after {
    width: 60px;
}

.toggle-switchArea {
    margin: 10px 0 10px 0;
}
/*ONLINE SWICH: END */

img.leafleticoncolor {
 filter: hue-rotate(120deg);
 cursor: move;
}

#payment_qr_code{
  text-align: center;
}
#payment_qr_code[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}
#payment_qr_code img{
  width: 100% !important;
  max-width: 100% !important;

}
.bottom-credit span{
  font-size: 11px !important;
  padding: 0.25rem !important;
  text-align: right;
}
.swal-overlay{
      z-index: 1000000000 !important;
}

/*PENDING BOOKING BELL SCC*/
.notification-bell {
  animation: bell 1s 1s both infinite;
}
.notification-bell * {
  display: block;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0px 0px 15px #fff;
}
.bell-top {
  width: 6px;
  height: 6px;
  border-radius: 3px 3px 0 0;
}
.bell-middle {
  width: 25px;
  height: 25px;
  margin-top: -1px;
  border-radius: 12.5px 12.5px 0 0;
}
.bell-bottom {
  position: relative;
  z-index: 0;
  width: 32px;
  height: 2px;
}
.bell-bottom::before,
.bell-bottom::after {
  content: '';
  position: absolute;
  top: -4px;
}
.bell-bottom::before {
  left: 1px;
  border-bottom: 4px solid #fff;
  border-right: 0 solid transparent;
  border-left: 4px solid transparent;
}
.bell-bottom::after {
  right: 1px;
  border-bottom: 4px solid #fff;
  border-right: 4px solid transparent;
  border-left: 0 solid transparent;
}
.bell-rad {
  width: 8px;
  height: 4px;
  margin-top: 2px;
  border-radius: 0 0 4px 4px;
  animation: rad 1s 2s both infinite;
}
.notification-count {
  position: absolute;
  z-index: 1;
  top: -6px;
  right: -6px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  border-radius: 50%;
  background-color: #ff4927;
  color: #fff;
  animation: zoom 3s 3s both infinite;
}
@keyframes bell {
  0% { transform: rotate(0); }
  10% { transform: rotate(30deg); }
  20% { transform: rotate(0); }
  80% { transform: rotate(0); }
  90% { transform: rotate(-30deg); }
  100% { transform: rotate(0); }
}
@keyframes rad {
  0% { transform: translateX(0); }
  10% { transform: translateX(6px); }
  20% { transform: translateX(0); }
  80% { transform: translateX(0); }
  90% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}
@keyframes zoom {
  0% { opacity: 0; transform: scale(0); }
  10% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; }
  51% { opacity: 0; }
  100% { opacity: 0; }
}