@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('backend2.css');

div.mosaic-inner-box {
  height: 100%;
  border-bottom: none;
  overflow: hidden;
}

body {
  background-color: #f5f8fb;
}

body .page-content {
  margin-left: 300px;
  -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

body.sidebar-collapse .main-header nav.navbar {
  margin-left: 0;
}

body .main-header nav.navbar {
  margin-left: 300px;
}

body.fixed.sidebar-collapse .main-sidebar,
body.sidebar-collapse .left-side {
  -webkit-transform: translate(-300px, 0);
  -ms-transform: translate(-300px, 0);
  -o-transform: translate(-300px, 0);
  transform: translate(-300px, 0);
}

body.fixed .main-sidebar,
body .left-side {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.admin a.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #4a4a4a !important;
  border-right: 0 !important;
  width: 300px;
}

body.login-page {
  background-image: url('../images/clinic.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0.04);
}

.login-box-body .remember-forget-password {
  display: flex;
  align-items: center;
}

.login-box-body .remember-forget-password .right {
  text-align: right;
}

.login-box-body .remember-forget-password .left .checkbox,
.login-box-box .remember-forget-password .left .checkbox .radio {
  color: black;
}

.login-box-body .remember-forget-password .right a {
  color: black;
  text-decoration: underline;
}

.admin .login-box-body,
.admin .register-box-body {
  padding-bottom: 30px;
}

.admin .login-box,
.admin .register-box {
  width: 400px;
  -webkit-box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  border: 1px solid #4a4a4a;
  background-color: #4a4a4a;
}

.admin .login-box .login-logo {
  padding: 15px 30px;
  margin: 0;
  text-align: center;
  /* background-color: black; */
}

.admin .login-box img {
  width: 80% !important;
  display: inline-block;
}

.admin .login-box-body button[type='submit'] {
  background-color: #000000;
  text-transform: uppercase;
  font-size: 18px;
  border-radius: 0;
  outline: none;
  border: 1px solid #000000;
  height: 40px;
  margin-top: 20px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}
.admin .login-box-body button[type='submit']:hover {
  background-color: #f1b0a3;
  color: black;
}
.admin a.logo img {
  max-width: 160px;
  padding: 0;
}

.admin .fa-caret {
  margin-left: 3px;
}

.admin .fa:before {
  font-size: 20px;
}

.admin .main-sidebar {
  width: 300px;
}

.admin .main-sidebar,
.admin .left-side {
  padding-top: 0;
  background-color: #4a4a4a;
}

.admin section.sidebar a {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: white;
}

.admin section.sidebar i {
  margin-right: 10px;
  margin-top: -5px;
  /* display: none; */
}

.sidebar {
  background: #505050;
}
.sidebar-menu .treeview-menu > li.active {
  background-color: #dd4b39;
  padding-left: 0.5rem;
  font-weight: 700;
}
li.treeview.active .treeview-menu li.active a {
  background-color: white;
}
.sidebar-menu .treeview-menu > li.active:hover a {
  background-color: #7b7e80;
  padding-left: 0.5rem !important;
  font-weight: 700;
}
.admin .page-content nav.navbar {
  margin-top: 70px;
  background-color: #e6ecee;
}

.box.box-primary {
  border-top: 0;
  border-radius: 0;
}

/* Tables */
table {
  border: 0;
}

table thead {
  background-color: #e6ecee;
}
.navbar-default {
}
table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #4a4a4a !important;
  font-size: 16px;
  font-weight: 600;
  color: #3b3b3b;
}

table thead th a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

table tbody tr {
  background-color: #ffffff !important;
}

#calendar-holder table tbody tr {
  background-color: #ebebeb !important;
}

table th,
table td {
  text-align: left !important;
  vertical-align: middle !important;
  border: 1px solid #e6ecee !important;
}

table .btn-group a.btn {
  background-color: transparent;
  border-width: 0 1px 0 0;
  padding: 0 15px;
}

table .btn-group a.btn:last-child {
  border-width: 0;
}

/* tr.sonata-ba-list-field-header {
  display: none;
} */
.mosaic-box:hover ul.options {
  opacity: 1;
  z-index: 9;
  transition-duration: 1s;
}

.mosaic-box ul.options {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 0 15px;
  max-height: 40px;
  display: flex;
  list-style-type: none;
  opacity: 0;
  z-index: -1;
  transition-duration: 1s;
}

.mosaic-box ul.options li {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  margin: 0 15px 0 0;
}

.mosaic-box ul.options li:last-child {
  margin: 0;
}

.mosaic-box ul.options a.mosaic-inner-link {
  display: none;
}

.mosaic-box ul li a {
  display: inline-block;
  background-color: #000000;
  padding: 7px 10px;
  color: #ffffff;
  width: 100%;
  text-align: center;
}

.admin-professional-list thead {
  display: none;
}

.admin-professional-list div.mosaic-box-outter {
  border: 0;
  -webkit-box-shadow: 0px 0px 4px rgba(31, 30, 47, 0.3);
  box-shadow: 0px 0px 2px rgba(31, 30, 47, 0.3);
}

.navbar-collapse span.badge.sonata-filter-count {
  margin-left: 20px;
  position: relative;
  top: -3px;
}

.navbar-collapse .sonata-action-element i.fa.fa-plus-circle {
  position: relative;
  margin: 0 5px 0 0;
}

.admin-professional-list .mosaic-inner-text {
  border-radius: 0;
  position: absolute;
  bottom: 0;
  width: calc(100% - 30px);
  line-height: 30px;
  background-color: rgba(255, 255, 255, 0.8);
}

.admin-professional-list input[type='checkbox'] {
  opacity: 0 !important;
}

.admin-professional-list .icheckbox_square-blue {
  top: -2px;
  margin: 0 5px 0 0;
}

.admin-professional-list .icheckbox_square-blue.checked {
  background-color: #000000;
  background-image: none;
}

.admin-professional-list .icheckbox_square-blue.checked:after {
  font: normal normal normal 14px/1 FontAwesome;
  content: '\f00c';
  color: #ffffff;
  position: absolute;
  top: 4px;
  left: 4px;
}

.admin-professional-list .mosaic-inner-box-hover {
  border-radius: 0;
}

.admin-professional-list .page-content .box.box-primary {
  background-color: transparent;
}

.admin-professional-list .table-bordered th,
.admin-professional-list .table-bordered td,
.admin-professional-list .table-bordered tr {
  border: 0 !important;
  padding: 0;
  background-color: transparent !important;
}

.admin-professional-list .table-bordered {
  border: 0;
}

.admin-professional-list .mosaic-inner-box img {
  border-radius: 0;
}

.admin-professional-list ins.iCheck-helper {
  background: transparent !important;
  border: 2px solid #000000 !important;
  opacity: 1 !important;
  z-index: 9;
}

.admin-professional-list .mosaic-box {
  margin: 0 0 30px 0;
  padding: 0 15px;
}

.dashboard-page .ui-dialog.ui-resizable,
.admin-professional .ui-dialog.ui-resizable {
  max-width: 600px;
  left: 0 !important;
  right: 0 !important;
  margin: auto;
  top: 100px !important;
  background-color: transparent;
  padding: 0;
  border: 0;
}

.dashboard-page .ui-dialog-titlebar,
.admin-professional .ui-dialog-titlebar {
  background: transparent !important;
  border: 0;
  background-color: #ffffff;
}

.dashboard-page button.ui-dialog-titlebar-close,
.admin-professional button.ui-dialog-titlebar-close {
  background: #000;
  border: 0;
  width: 30px !important;
  height: 30px !important;
  outline: 0;
  z-index: 99;
}

.dashboard-page button.ui-dialog-titlebar-close:after,
.admin-professional button.ui-dialog-titlebar-close:after {
  font: normal normal normal 26px/1 FontAwesome;
  content: '\f00d';
  color: #fff;
}

.dashboard-page .ui-dialog.ui-resizable table th,
.admin-professional .ui-dialog.ui-resizable table th {
  white-space: nowrap;
}

.dashboard-page .ui-dialog .ui-dialog-content,
.admin-professional .ui-dialog .ui-dialog-content {
  height: auto !important;
  position: relative;
  top: -40px;
  text-align: center;
  background-color: #ffffff;
}

.dashboard-page .ui-dialog .ui-dialog-content form .box-primary,
.admin-professional .ui-dialog .ui-dialog-content form .box-primary {
  background-color: transparent;
  box-shadow: none;
}

.admin-professional button#pappointment {
  background-color: #000;
  color: #fff;
  border-radius: 0;
  padding: 10px 30px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

#calendar-holder table a.fc-day-grid-event:hover,
#calendar-holder table a.fc-time-grid-event:hover {
  color: #3b3b3b;
}

.admin-professional .sonata-ba-collapsed-fields .input-group {
  width: 100%;
}

.admin-professional .sonata-ba-collapsed-fields > div {
  margin: 0;
}

.admin-professional
  .sonata-ba-collapsed-fields
  .input-group
  .input-group-addon {
  width: 30px;
}

.admin-professional .sonata-ba-form-actions {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
  padding: 0;
}

.admin-professional-list .box-footer input[type='submit'] {
  margin-bottom: 0;
}

.admin-professional-edit .sonata-ba-form-actions {
  display: flex;
  align-items: center;
}

.admin-professional button {
  background-color: #000;
  padding: 10px 30px;
  border: 0;
  text-transform: uppercase;
}

.admin-professional .ui-dialog.ui-resizable .box.box-primary {
  border: 0;
  box-shadow: none;
}

.box-footer .checkbox {
  margin: 0 30px 0 0;
}

.box-footer input[type='submit'],
.form-actions button[type='submit'] {
  border-radius: 0;
  background-color: #000000;
  border-color: #000000;
  height: 30px;
  line-height: 17px;
  margin: 0 0 0 0;
}
.sidebar .sidebar-menu {
  padding-top: 7rem;
}

.logo img + span {
  color: white;
  display: none;
}

.box-footer .select2-container .select2-choice {
  height: 30px;
}

.box-footer .select2-container .select2-choice > .select2-chosen {
  margin-right: 15px;
}

.dashboard-page .content,
.admin-professional .content {
  padding-top: 70px;
}

.week-times h4 a img {
  width: 18px;
  margin-left: 15px;
}

.admin-customer-edit .checkbox label,
.admin-customer-edit .radio label {
  margin-left: 0;
}

#calendar-holder {
  -webkit-box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  margin-bottom: 24px;
  background-color: #fff;
  border: 1px solid #eceff5;
  padding: 30px;
  margin: 20px 0 0 0;
  float: left;
  width: 100%;
}

#calendar-holder .fc-header-toolbar {
  padding: 0;
}

#calendar-holder .fc-header-toolbar {
  padding: 0;
}

#calendar-holder .fc-header-toolbar h2 {
  text-transform: uppercase;
  color: #3b3b3b;
}

a.fc-time-grid-event .fc-title:hover {
  color: #3b3b3b;
}

#calendar-holder .fc-button-group button.fc-button-active {
  background-color: #bcab99;
  color: #ffffff;
}

#calendar-holder .fc-button-group button,
#calendar-holder .fc-header-toolbar .fc-today-button {
  background: transparent;
  border: 2px solid #e1dad0;
  color: #bcab99;
  font-family: inherit;
  text-transform: capitalize;
  height: auto;
  padding: 6px 16px;
  opacity: 1;
}

/* #calendar-holder table a.fc-day-grid-event.personalFree, #calendar-holder table a.fc-time-grid-event.personalFree  {
    background-color: #bd8cbf75;
    border-left: 5px solid #bd8cbf;
} */
#calendar-holder table a.fc-day-grid-event.personalFree span,
#calendar-holder table a.fc-time-grid-event.personalFree span {
  color: #3b3b3b;
}

#calendar-holder table a.fc-day-grid-event.personal,
#calendar-holder table a.fc-time-grid-event.personal {
  /* background-image: linear-gradient(45deg, #f0f0f0 25%, #d9d9d9 25%, #d9d9d9 50%, #f0f0f0 50%, #f0f0f0 75%, #d9d9d9 75%, #d9d9d9 100%);
background-size: 10px 10px;
border-left: 0; */
}

ul.events-color-guide li.working-hours i {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: #ffffff;
  border-width: 1px 1px 1px 10px;
  border-style: solid;
  border-color: #a4d45e;
}

ul.events-color-guide li.not-available i {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: #ebebeb;
}

.dashboard-page .filter-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 20px;
}

.dashboard-page .select2-results .select2-highlighted {
  color: #fff;
  background-color: #3b3b3b;
}

.dashboard-page .select2-results .select2-highlighted {
  background: #3b3b3b;
  color: #fff;
}

.dashboard-page .select2-drop-auto-width,
.select2-drop.select2-drop-above.select2-drop-active {
  border-top-color: #3b3b3b;
}

.dashboard-page .select2-drop-active {
  border-color: #3b3b3b;
}

.dashboard-page .select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices {
  border-color: #3b3b3b;
  box-shadow: none;
}

li.treeview.active .treeview-menu a {
  background-color: #e7ecee;
  color: #3b3b3b;
  /* transition: 1s; */
  padding: 12px;
  border-bottom: 1px #e7ecee solid;
}
li.treeview.active .treeview-menu a:hover {
  background-color: #cce5ef;
  padding-left: 3rem;
  font-weight: 700;
}
li.treeview.active > a {
  background-color: #8fc4b3 !important;
  transition: 1s;
}

li.treeview.active .treeview-menu {
  padding: 0 !important;
  margin: 0 0;
}

.dashboard-page .filter-toolbar ul.events-color-guide {
  top: 0;
  margin-left: auto;
  margin-top: 30px;
}

#calendar-holder table a.fc-day-grid-event.personalFree span {
  color: #bd8cbf;
}

ul.events-color-guide {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  position: relative;
}

ul.events-color-guide li span {
  margin: 0 0 0 10px;
  font-size: 13px;
}

ul.events-color-guide li:last-child {
  margin: 0;
}

ul.events-color-guide li {
  list-style-type: none;
  margin: 0 50px 0 0;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
}

ul.events-color-guide li.appointments i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #bcab99;
}

ul.events-color-guide li.personal i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #bd8cbf;
}

ul.events-color-guide li.day-off i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #e9622a;
}

.sonata-ba-collapsed-fields {
  text-align: left;
}

.sonata-ba-form-actions.well.well-small.form-actions {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.profId ~ div > label {
  margin: 15px 0 !important;
}

body.skin-black .sonata-ba-field-standard-natural .checkbox label {
  margin-left: 0;
}

.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
  display: block !important;
  white-space: pre;
  text-transform: lowercase;
}

a.fc-time-grid-event.personalFree {
  border-color: 0 !important;
}

a.fc-time-grid-event.personal {
  border: 0 !important;
}

a.fc-day-grid-event.personalFree {
  border: 0 !important;
}

a.fc-day-grid-event.personal {
  border: 0 !important;
}

#calendar-holder table a.fc-day-grid-event.availableTime,
#calendar-holder table a.fc-time-grid-event.availableTime {
  border-style: solid;
  border-width: 0 0 0 5px;
  border-color: #a3d35d;
}

a.fc-time-grid-event.availableTime ~ a {
  margin-left: 11px !important;
  right: 1px !important;
}

.bootstrap-datetimepicker-widget .timepicker-hours td {
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center !important;
}

#calendar-holder table a.fc-day-grid-event,
#calendar-holder table a.fc-time-grid-event {
  border: 0;
  background-color: #fff;
  font-size: 13px;
  margin: 5px;
  padding: 0 5px;
  text-align: center;
  border-radius: 0;
  margin-right: 0 !important;
  min-height: 30px;
}

.filter-toolbar button:hover {
  color: #ffffff;
  opacity: 0.7;
  transition: 1s;
}

#calendar-holder table a.fc-day-grid-event span,
#calendar-holder table a.fc-time-grid-event span {
  color: #908070;
  text-align: left;
}

#calendar-holder table th.fc-widget-header span {
  width: auto;
  display: block;
}

#calendar-holder .fc-button-group button:hover,
#calendar-holder .fc-header-toolbar .fc-today-button:hover {
  background-color: #e1dad0;
  color: #ffffff;
}

#calendar-holder .fc-button-group button:hover span,
#calendar-holder .fc-header-toolbar .fc-today-button:hover {
  color: #ffffff;
}

#calendar-holder .fc-header-toolbar .fc-today-button,
#calendar-holder .fc-header-toolbar .fc-button-group {
  font-size: 24px;
}

#calendar-holder .fc-button-group button span {
  /* font-size: 36px; */
}

#calendar-holder table th.fc-widget-header {
  background: transparent;
}

#calendar-holder table th span {
  text-align: center;
  display: inline-block;
  width: 100%;
  padding: 10px;
  text-transform: uppercase;
}

#calendar-holder table td span {
  text-align: center;
  display: inline-block;
  width: 100%;
}

#calendar-holder table td span.fc-time,
#calendar-holder table td span.fc-time {
  display: block;
  text-align: left;
}

#calendar-holder td.fc-axis.fc-widget-content,
#calendar-holder th.fc-axis.fc-widget-header {
  width: 140px !important;
}

.card {
  -webkit-box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  margin-bottom: 24px;
  background-color: #fff;
  border: 1px solid #eceff5;
  height: 100%;
}

.card-header {
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border-bottom: 1px solid #eceff5;
}

.card-body {
  padding: 20px;
}

.card-body table a,
table a {
  color: #3b3b3b;
}

.card-body i {
  position: relative;
  top: 2px;
}

th.picker-switch,
span.timepicker-hour,
span.timepicker-minute,
span.timepicker-second,
td.separator {
  text-align: center !important;
}

.welcome {
  background-color: #ffffff;
  display: flex;
  -webkit-box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  background-color: #fff;
  border: 1px solid #eceff5;
}

.welcome aside {
  width: 25%;
  padding: 0;
  margin: 0 15px 0 0;
  max-height: 250px;
  overflow: hidden;
}

.welcome article {
  width: 75%;
  display: flex;
  flex-direction: column;
  padding: 15px 15px 15px 0;
}

.welcome article h3 {
  color: #908070;
  font-weight: 500;
  margin: 0 0 10px 0;
}

.welcome article p.first {
  margin-bottom: 40px;
}

.welcome article a {
  background-color: #908070;
  padding: 7px 30px;
  color: #fff;
  text-transform: uppercase;
  margin-top: auto;
  margin-left: auto;
  text-align: center;
}

.welcome aside img {
  width: 100%;
}

.sonata-ba-content .row {
  display: flex;
  flex-wrap: wrap;
}

.sonata-ba-content .row .new-appointment {
  height: 100%;
  background-color: #fff;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  -webkit-box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
  background-color: #fff;
  border: 1px solid #eceff5;
}

.new-appointment i {
  position: absolute;
  right: 60px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  color: #fff;
  background: #908070 url('../images/calendar-white.png') no-repeat center
    center;
  background-size: 40px;
}

.new-appointment i:before {
  font-size: 36px !important;
}

.new-appointment span.number {
  display: block;
  font-size: 64px;
  font-weight: 600;
}

.new-appointment p {
  flex-grow: 1;
}

.new-appointment a {
  background-color: #3b3b3b;
  padding: 7px 30px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  display: none;
}

.week-times table {
  width: 100%;
}

.week-times table td {
  text-align: left !important;
  padding: 10px;
}

/* .week-times table td:first-child {
    width: 150px;
    background-color: #f7f1e9;
} */
.dashboard-page .bootstrap-datetimepicker-widget td span {
  width: auto;
  height: auto;
}

.dashboard-page .bootstrap-datetimepicker-widget {
  width: 200px;
}

.dashboard-page .bootstrap-datetimepicker-widget.usetwentyfour {
  width: 600px;
}

.dashboard-page .bootstrap-datetimepicker-widget a.btn {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard-page .bootstrap-datetimepicker-widget span.timepicker-hour,
.dashboard-page .bootstrap-datetimepicker-widget span.timepicker-minute {
  display: block !important;
}

.page-main-title {
  text-align: center;
  margin: 0 0 50px 0;
}

h4.card-title img {
  width: 30px;
  margin: 0 15px 0 0;
}

.filter-professionals h4 img {
  width: 30px;
  margin: 0 15px 0 0;
  position: relative;
  top: -3px;
}

.week-times h4,
h4.card-title {
  display: flex;
  align-items: center;
}

.week-times h4 img {
  width: 30px;
  margin: 0 15px 0 0;
}

.week-times th {
  padding: 8px;
  text-align: left !important;
  background-color: #f7f1e9;
}

a.fc-time-grid-event {
  background-color: #bcab99;
  border-color: #bcab99;
  color: #3b3b3b;
  text-align: center;
}

a.fc-time-grid-event .fc-time:before,
a.fc-time-grid-event .fc-time:after {
  display: none;
}

/* a.fc-time-grid-event .fc-title {
  margin-left: 5px;
} */
.dashboard-page .ui-dialog.ui-resizable .box-body,
.admin-professional .ui-dialog.ui-resizable .box-body {
  margin: 20px 0 0 0;
  padding: 0;
}

#calendar-holder table a.fc-day-grid-event span.fc-title:before {
  content: '-';
  margin: 0 3px;
  display: none;
}

#calendar-holder table a.fc-day-grid-event span.fc-title,
#calendar-holder table .fc-time-grid-event span.fc-title {
  text-align: left;
  text-transform: capitalize;
  color: #3b3b3b;
}

.fc-time-grid-event .fc-title {
  text-align: left;
}

.admin-professional button:hover {
  background-color: rgba(000, 000, 000, 0.78);
  transition: 1s;
}

.admin-categories td.sonata-ba-list-field.sonata-ba-list-field-text:last-child,
.admin-sub_categories
  td.sonata-ba-list-field.sonata-ba-list-field-text:last-child {
  width: 250px;
}

.card-body table td.icon a,
.btn-default.view_link,
.btn-default.edit_link,
.btn-default.delete_link {
  font-size: 0;
  /* width: 100%; */
  height: 20px;
  /* display: block; */
  text-align: center;
}

.card-body table td.icon {
  width: 30px;
}

.fc-unthemed td.fc-today {
  background: #3b3b3b;
}

.admin-professional .sonata-ba-collapsed-fields {
  text-align: left;
}

span.fc-day-number {
  background-color: #ebebeb;
  padding: 0 !important;
}

.fc-unthemed td.fc-today {
  background: #3b3b3b !important;
}

.admin-professional .sonata-ba-collapsed-fields label.control-label {
  margin-top: 10px;
  text-align: left;
}

.admin-professional .checkbox label,
.admin-professional .radio label {
  margin-left: 20px;
}

.admin-professional .checkbox,
.admin-professional .radio {
  margin: 0;
}

.admin-appointments-show th {
  white-space: pre;
}

a.sonata-action-element {
  display: flex !important;
  align-items: center;
}

a.sonata-action-element i {
  margin: 0 10px 0 0;
}

.admin-appointments-list a.btn.btn-sm.btn-default.view_link,
.admin-appointments-list a.btn.btn-sm.btn-default.view_link {
  font-size: 0;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.admin-appointments-list
  td.sonata-ba-list-field.sonata-ba-list-field-text:last-child,
.admin-appointments-list
  td.sonata-ba-list-field.sonata-ba-list-field-text:last-child {
  width: 30px;
}

.admin-customer-list
  td.sonata-ba-list-field.sonata-ba-list-field-text:last-child {
  width: 120px;
}

.admin-customer-list a.edit_link,
.admin-customer-list a.delete_link,
.admin-notify_me-list a.edit_link,
.admin-notify_me-list a.delete_link,
.admin-notify_me-list a.view_link {
  font-size: 0;
  width: auto;
}

.admin-notify_me-list .sonata-ba-list-field-text:last-child {
  width: 180px;
}

.admin-professional-list .box-footer form {
  font-size: 0;
}

.admin-professional-list .box-footer form button,
.admin-professional-list .box-footer form a {
  margin-right: 20px;
  height: 40px;
}

.admin-professional-list .box-footer a.btn.btn-success {
  background-color: #908070;
  border-color: #908070;
}

.admin-appointments-create .sonata-ba-form-actions.form-actions button {
  background-color: #000;
  border-color: #000;
}

.sonata-filter-form a {
  color: #3b3b3b !important;
}

.sonata-filter-form button.btn.btn-primary {
  background-color: #3b3b3b;
  border-color: #3b3b3b;
}

th.sonata-ba-list-field-header-datetime a {
  color: inherit;
}

.sonata-ba-content .row {
  margin-bottom: 30px;
}

.filter-professionals {
  display: flex;
  align-items: flex-end;
}

.filter-professionals .select2-container {
  width: 50% !important;
  margin-left: 20px;
}

.filter-professionals h4 {
  margin: 0;
}

span.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  overflow: hidden;
  display: inline-block;
  background-position: top center;
  margin-top: 15px;
}

span.profile-img img {
  opacity: 0;
}

.admin-customer-edit button.btn.btn-success {
  background-color: #bcab98;
  border-color: #bcab98;
  height: 40px;
}

.admin-customer-edit a.btn.btn-danger {
  height: 40px;
  background-color: #3b3b3b;
  border-color: #3b3b3b;
}

.admin-professional .ui-dialog .ui-dialog-buttonpane,
.dashboard-page .ui-dialog .ui-dialog-buttonpane {
  margin-top: -40px;
  border: 0;
}

.admin-professional .ui-dialog .ui-dialog-buttonpane button,
.dashboard-page .ui-dialog .ui-dialog-buttonpane button {
  background-color: #3b3b3b;
  border-color: #3b3b3b;
}

.admin-professional .box.box-danger {
  border-top-color: transparent;
  box-shadow: none;
}

.admin-professional .box.box-danger .box-footer {
  border: 0 !important;
  margin-top: 30px;
}

.sonata-ba-field.sonata-ba-field-standard-natural input {
  margin-left: 0;
}

.filter-toolbar button {
  height: 40px;
  background-color: #171717;
  border-radius: 0;
  margin: 0 15px 0 0;
  color: #fff;
  text-transform: uppercase;
  padding: 0 30px;
  transition: 1s;
}

.filter-toolbar button#workinghour {
  background-color: #bcab98;
}

td.fc-axis.fc-time.fc-widget-content {
  background-color: #fff;
}

td.fc-axis.fc-widget-content {
  background-color: #fff;
}

#calendar-holder table a.fc-day-grid-event.personalFree:before,
.fc-time-grid-event.personalFree:before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: #bd8cbf;
  border-radius: 100%;
  display: block;
  float: left;
  margin-right: 10px;
  margin-top: 5px;
}

#calendar-holder table a.fc-day-grid-event.personal:before,
.fc-time-grid-event.personal:before {
  content: '';
  width: 15px;
  height: 15px;
  background: #e9622a;
  border-radius: 100%;
  display: block;
  float: left;
  margin-right: 10px;
  margin-top: 5px;
}

a.fc-time-grid-event.personal .fc-title {
  color: #e9622a;
}

#calendar-holder table a.fc-day-grid-event.appointment:before,
.fc-time-grid-event.appointment:before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: #bcab99;
  border-radius: 100%;
  display: block;
  float: left;
  margin-right: 10px;
  margin-top: 5px;
}

.fc-slats tr:hover {
  background-color: #ffcccc !important;
}

.fc-slats tr:hover td {
  background-color: #ffcccc !important;
}

.admin-working_hours .box-footer input[type='submit'] {
  margin: 0;
}

.admin-professional-edit .form-actions a,
.admin-professional-edit .form-actions button[type='submit'] {
  height: 45px;
  margin: 0;
  border-radius: 0;
}

.admin-professional-edit .form-actions button[type='submit'] {
  background-color: #bcab99;
  color: #3b3b3b;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-professional-edit .form-actions i {
  margin-right: 10px;
}

.admin-professional-edit .form-actions a {
  background-color: #3b3b3b;
  color: #ffffff;
  margin-left: 10px;
  border-color: #3b3b3b;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .admin .login-box,
  .admin .register-box {
    width: 90%;
  }
}
@media (max-width: 600px) {
  .dashboard-page .bootstrap-datetimepicker-widget.usetwentyfour {
    width: 100%;
    left: 0 !important;
  }
}
.bootstrap-datetimepicker-widget .col-sm-6.timepicker {
  margin-top: 40px;
}
.timepicker-sbs.picker-open > .row {
  margin-right: 0;
  margin-left: 0;
}

.admin-contact_us-list
  .page-content
  .content
  .table-bordered
  thead
  .sonata-ba-list-field-header-text:last-child {
  width: 160px;
}

section.sidebar .sidebar-menu > li > a,
.login-box-msg,
.admin .login-box-body button[type='submit'] {
  font-family: 'Bebas Neue', cursive;
  font-size: 2.2rem;
}
.page-content .navbar-header .navbar-brand {
  font-size: 2.2rem;
  font-family: 'Bebas Neue', cursive;
}
.admin section.sidebar i.fa-angle-double-right::before {
  content: '➜';
  font-size: 1rem;
  padding-left: 10px;
}
/* .login-page {
  background-color: black;
}
.login-page > .admin {
  background-image: url("../img/clinic.jpg");
  background-size: cover;
} */

.mr-3 {
  margin-right: 15px;
}
.vctor {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
.breadcrumb li a i.fa-home {
  color: white;
}
.navbar-custom-menu ul.navbar-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  background: #505050;
  height: 60px;
}
.navbar-custom-menu ul.navbar-nav > li > a {
  color: #fff;
  color: #fff;
  height: 100%;
  line-height: 60px;
  padding: 0 15px;
}
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
  color: #666 !important;
}
.navbar-custom-menu ul.navbar-nav li a:hover,
.navbar-custom-menu ul.navbar-nav li a:active,
.navbar-custom-menu ul.navbar-nav li a:focus {
  color: #666 !important;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
  width: 410px !important;
}

.dropdown-header {
  font-family: 'Bebas Neue', cursive;
  font-size: 2.2rem;
}
.dropdown-header i {
  margin-right: 1rem;
}

body.skin-black .card.last-appointments .table-bordered > tbody > tr > td.icon {
  text-align: center !important;
}

.admin section.sidebar i {
  width: 30px;
}
.fa {
  font: normal normal normal 14px/1 FontAwesome;
}
.box-body.table-responsive.no-padding .btn-group,
.btn-group-vertical {
  display: flex;
  vertical-align: middle;
}
.navbar-custom-menu .dropdown-menu.multi-column .dropdown-menu {
  min-width: 50%;
}
.box-footer input[type='submit'],
.form-actions button[type='submit'] {
  height: auto;
  line-height: 17px;
  margin: 0 10px 0 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
form .form-actions .btn-danger {
  margin: 0 0px 0 10px;
}
.sonata-ba-field.sonata-ba-field-standard-natural input[type='color'] {
  width: 50px;
  padding: 2px;
}
.admin-quiz-list .sonata-ba-list-field {
}
.admin-quiz-list a.btn.btn-sm.btn-default.view_link:first-child .fa-eye:before {
  content: '\f128';
}

.admin-clinic-list table .btn-group a.btn:last-child {
  background: #cbd6d9;
  border-radius: 5px;
  margin-left: 10px;
}

div#clinic_pay_slip {
  background: white;
  padding: 15px;
}

div#clinic_pay_slip label {
  width: 100px;
}
div#clinic_pay_slip input {
  width: calc(100% - 100px);
}

div#clinic_pay_slip > div {
  margin-bottom: 15px;
}

.Progress-block .name {
  float: none;
  padding-left: 15px;
  color: #8d8d8d;
}

.Progress-block .pct:after {
  content: '%';
}

.month-option ul {
  padding: 0;
  list-style-type: none;
  margin-top: 30px;
  font-size: 16px;
}

.month-option li:before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 100%; /* margin-right: 10px; */
  position: relative;
  z-index: 9;
}

.users-active,
.download {
  background-color: #fff;
  padding: 15px 30px;
  border-radius: 20px;
  color: #fff;
}

.users-active {
  background-color: #8bcab6;
}

.download {
  background-color: #f2c777;
}

.users-active span,
.download span {
  display: block;
  text-align: right;
  font-size: 36px;
}

.third-block.month h4 span {
  display: block;
}

.third-block.month h4 {
  position: relative;
  padding-right: 35%;
}

.third-block.month .select-wrapper {
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 16px;
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
}

.third-block.month .select-wrapper:after {
  font: normal normal normal 14px/1 FontAwesome;
  content: '\f078';
  position: absolute;
  right: 10px;
  top: 5px;
  color: #afbfc5;
}

select#months {
  border: 0;
  appearance: none;
  /* display: inline-block; */
  width: 100%;
  outline: 0;
}

.month-option li {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 0 5px 0;
}

.month-option li i {
  margin-left: auto;
  font-style: normal;
  background-color: #fff;
  position: relative;
  z-index: 9;
  padding-left: 10px;
}

.month-option li:after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #d7d7d7;
  display: inline-block;
  position: absolute;
  left: 0; /* right: 0; */
}

.month-option li span {
  position: relative;
  z-index: 9;
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
  color: #303131;
}

.month-option li.green:before {
  background-color: #8acab6;
}

.month-option li.green i {
  color: #8acab6;
}

.month-option li.blue:before {
  background-color: #0089b0;
}

.month-option li.blue i {
  color: #0089b0;
}

.month-option li.orange:before {
  background-color: #f0a492;
}

.month-option li.orange i {
  color: #f0a492;
}

.month-option li.yellow:before {
  background-color: #f2c777;
}

.month-option li.yellow i {
  color: #f2c777;
}

.month-option li.bazaar:before {
  background-color: #a07483;
}

.month-option li.yellow i {
  color: #a07483;
}

.month-option {
  display: none;
}

.Progress-block,
.month {
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  height: 100%;
}

.third-block .category-option {
  display: none;
}

.Progress-block h4 span {
  display: block;
}

*
  box-sizing: border-box
.sort-menu
  >ul 
    li 
      display: inline-block
      width: 25px
      height: 25px
      border: 1px solid silver
      font-size: 16px
      text-align: center
      line-height: 25px
      cursor: pointer
.sort-wrap
  width: 100%
  height: auto
  overflow: hidden
.sort-box
  width: 20%
  padding-left: 10px
  padding-right: 10px
  padding-bottom: 20%
  float: left
  position: relative
  .inner-wrap
    position: absolute
    top: 10px
    left: 10px
    right: 10px
    bottom: 10px
.c1
  .inner-wrap
    background-color: blue
.c2
  .inner-wrap
    background-color: red
.c3
  .inner-wrap
    background-color: orange
.c4
  .inner-wrap
    background-color: lightBlue
.c5
  .inner-wrap
    background-color: yellow

 


.Progress-block h4 {
  margin: 0 0 30px 0;
}

.Progress-block ul {
  padding: 0;
}

.Progress-block ul li {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.Progress {
  width: 100%;
  background-color: #dddddd;
  height: 20px;
  margin-bottom: 5px;
  border-radius: 20px;
}

.Bar {
  width: 45%;
  height: 20px;
  background-color: #8bcab7;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 20px;
  color: white;
  display: block;
  border-radius: 20px;
}
.name {
  float: left;
}
.pct {
  float: right;
}