/* VIVO-126: no @import here — it held the whole page until a CDN answered. Web fonts load from
   portal/base.html; Font Awesome is the local THEME copy, whose family is "Font Awesome". */

/*BASE*/

body {
    /*padding-top: 0 !important;*/
}

a.styled-link {
    color: #848484;
    text-decoration: underline;
}

a.styled-link:hover {
    color: #cc80b6;
}

.fade {
    opacity: 0;
    transition: opacity .5s linear;
}

.modal-dialog {
    max-width: 768px
}

.bootbox .modal-dialog{
    max-width: 400px;
}

.modal-body {
    padding: 30px
}

#simpleModal .nav-tabs {
    border-bottom: 0;
}

#simpleModal .nav-tabs .nav-link {
    font-weight: 400;
    border-bottom: 0;
    text-decoration: underline;
    color: #434d53;
}

#simpleModal .nav-tabs .nav-link:hover {
    background-color: transparent;
    color: #00bcd4;
}

#simpleModal .nav-item:first-child .nav-link {
    padding-left: 0;
}

#simpleModal .nav-tabs .nav-link.active {
    background-color: transparent;
    color: #00bcd4;
    text-decoration: none;
}

ul.color-selecotr {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

ul.color-selecotr > li > a {
    min-width: 30px;
    height: 30px;
    width: 30px;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}

ul.color-selecotr > li > a:after {
    content: '\f00c';
    font-family: "Font Awesome";
    opacity: 0;
}

ul.color-selecotr > li.selected > a:after {
    opacity: 1;
}

ul.color-selecotr + input {
    display: none
}

.validate-controls {
    position: relative;
}

.validate-controls:before {
    content: '';
}

.validate-controls.error:before,
.form-signin .error .validate-controls:before {
    content: '!';
    color: #fff;
    background-color: #ca81b9;
    display: inline-block;
    position: absolute;
    left: auto;
    top: 11px;
    right: 10px;
    width: 18px;
    height: 18px;
    font-style: normal;
    font-weight: 600;
    z-index: 10;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
}

.form-signin .error .validate-controls:before {
    top: 13px;
}

.validate-controls.error .form-control:not(:focus),
.validate-controls.error button:not(:focus) {
    border-color: #ca81b9 !important;
    background-color: #faf4f9 !important;
}

.form-signin .error .validate-controls input:not(:focus) {
    border-color: #fff !important;
    background-color: #eddeeb !important;
    color: #e009ae;
}

.validate-controls.error .form-control.tt-hint:not(:focus) {
    background-color: transparent !important;
}

.btn {
    box-shadow: none;
}

@media (max-width: 479px) {
    .btn:not(.btn-floating) {
        width: 100%;
    }
}


/*INPUS*/

.input-group {
    flex-wrap: nowrap;
}

.input-group .input-group-prepend .bootstrap-select > .dropdown-toggle{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #37474f;
    padding-left: 22px;
    padding-right: 30px;
}

.input-group .input-group-prepend + input{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

label.styled_checkbox {
    display: inline-flex;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: #fff;
}

label.styled_checkbox i {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
    opacity: 0;
    font-style: normal;
}

label.styled_checkbox i:after {
    content: '\f00c';
    font-family: "Font Awesome";
    font-style: normal;
}

label.styled_checkbox input {
    position: absolute;
    left: -100vw;
    top: -40px;
}

label.styled_checkbox input:checked + i {
    opacity: 1;
}

label.styled_radio {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 100%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: #fff;
}

label.styled_radio i {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
    opacity: 0;
}

label.styled_radio i:after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #000;
}

label.styled_radio input {
    position: absolute;
    left: -100vw;
    top: -20px;
}

label.styled_radio input:checked + i {
    opacity: 1;
}

label.for-checkbox {
    display: inline-flex;
    margin: 0;
    align-items: center;
    cursor: pointer;
    color: #a7b0b8;
}

label.for-checkbox label,
label.for-checkbox span.switchery {
    margin: 0 14px 0 0;
}

label.styled_checkbox.blue_style {
    background: #2cbfdd;
    background: #fff;
    border: 1px solid #2cbfdd;
    color: #fff;
}

label.styled_checkbox.blue_style input:checked + i {
    background: #2cbfdd;
}

[for="id_disabled"] .styled_checkbox {
    min-width: 24px;
    height: 24px;
    background: #f96868;
    color: #fff;
    border-radius: 3px;
}

.radio-custom, .checkbox-custom {
}

.label-controls.checkbox-custom {
    padding-top: 0;
}

.checkbox-custom label {
    line-height: 24px;
}

.checkbox-custom label::before {
    /*border-radius: 50%;*/
    width: 24px;
    height: 24px;
}

.checkbox-custom label::after {
    font-size: 18px;
    height: 24px;
    width: 24px;
    line-height: 22px;
}

.checkbox-primary input[type="checkbox"]:checked + label::before, 
.checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label::before, .checkbox-primary input[type="radio"]:checked + label::before, 
.checkbox-primary input[type="radio"]:checked + input[type="hidden"] + label::before {
    background-color: #2cbfdd;
    border-color: #2cbfdd;
}

.login-page .checkbox-custom label::before {
    border-radius: 50%;
}

.login-page .checkbox-primary input[type="checkbox"]:checked + label::before, 
.login-page .checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label::before, .checkbox-primary input[type="radio"]:checked + label::before, 
.login-page .checkbox-primary input[type="radio"]:checked + input[type="hidden"] + label::before {
    background-color: #fff;
    border-color: #fff;
}

.login-page .checkbox-primary input[type="checkbox"]:checked + label::after, 
.login-page .checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label::after, .checkbox-primary input[type="radio"]:checked + label::after, 
.login-page .checkbox-primary input[type="radio"]:checked + input[type="hidden"] + label::after {
    color: #2cbfdd;
}

.radio-custom label:before {
    width: 24px;
    height: 24px;
}

.radio-custom label:after {
    width: 14px;
    height: 14px;
    border: 0;
    background-color: #2cbfdd;
    left: 5px;
    top: 5px;
}

.radio-primary input[type="radio"]:checked + label::before, 
.radio-primary input[type="radio"]:checked + input[type="hidden"] + label::before {
    border-color: #fff;
}

div.file-upload-custom-field {
    display: flex;
}

div.file-upload-custom-field .controls {

}

div.file-upload-title {
    flex: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    text-align: right;
    margin-left: 15px;
}

img.employe-photo {
    display: block;
    width: 150px;
    height: auto;
    border-radius: 100%;
}

.fc-head .fc-today {
    background: #fff !important;
}

@media (max-width: 767px) {
    .fc-head .fc-today {
        padding-right: 44px;
    }
}

.agenda {
    background: #fff;
    position: relative;
}

.agenda #calendar .fc-toolbar {
    display: flex;
    justify-content: center;
    height: 39px;
}

@media (max-width: 1199px) {
    .agenda #calendar .fc-toolbar {
        margin-bottom: 60px;
    }
    .calendar-admin.agenda #calendar .fc-toolbar {
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {
    .agenda #calendar .fc-toolbar {
        margin-bottom: 0px;
    }
}

#calendar .fc-time-grid {
    min-height: auto;
}

.agenda #calendar .fc-toolbar > .fc-left {
    order: 1;
}

.agenda #calendar .fc-toolbar > .fc-right {
    order: 3;
    position: static;
}

@media (max-width: 767px) {
    .agenda:not(.calendar-admin) #calendar .fc-toolbar > .fc-right {
        display: none;
    }
}

.agenda #calendar .fc-toolbar > .fc-center {
    order: 2;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .agenda:not(.calendar-admin) #calendar .fc-center {
        margin-top: 80px;
    }
}

.agenda #calendar .fc-toolbar > .fc-center input {
    position: absolute;
    left: 38px;
    top: 0;
    width: calc(100% - 38px - 38px);
    height: 100%;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
}

.agenda.fc table > thead > tr > th {
    line-height: 1.2;
}

.agenda.fc table > thead > tr > th img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin: 0 auto 12px;
}

.calendar-admin #calendar .fc-today {
    background-color: transparent;
}

div.agenda-calendar-aside {
    background: #eaeff0;
    border-left: 1px solid rgba(0, 0, 0, .1);
    padding: 30px 22px;
}

@media (max-width: 991px) {
    div.agenda-calendar-aside {
        display: none;
    }

    .page-aside-right .agenda-calendar-aside + .page-main {
        margin-right: 0;
    }
}

div.agenda-peoples-list > div {
    display: flex;
    padding: 15px 0;
    align-items: center;
}

div.agenda-peoples-list .photo {
    margin-right: 12px;
}

div.agenda-peoples-list .photo img {
    display: block;
    border-radius: 100%;
    width: 30px;
    height: 30px;
}

div.agenda-peoples-list .name {
    line-height: 1.2;
}

div.agenda-peoples-list label.styled_checkbox.thumbler_style {
    margin: 0 18px 0 0;
}

.agenda-calendar-aside .scrollable-container {
    width: 100% !important;
}

.agenda-calendar-aside .scrollable-content {
    width: 100% !important;
}

div.calendar-slotDuration-changer {
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 5;
    display: flex;
    border: 1px solid #e4eaec;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
}

div.calendar-slotDuration-changer a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    color: #a3afb7;
    font-weight: 700;
    cursor: pointer;
    font-size: 20px;
}

div.calendar-slotDuration-changer a.more {
    background: #f4f7f8;
}

div.calendar-slotDuration-changer a:hover {
    color: #000 !important;
}

.calendar-back-link {
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: -7px;
    color: #2cbfdd;
    font-weight: normal;
    display: block;
}

.calendar-back-link:hover {
    color: #269ec0;
    text-decoration: none;
}

.calendar-back-link i {
    font-size: 31px;
    vertical-align: sub;
    margin-right: 4px;
    line-height: 10px;
    width: 30px;
    text-align: center;
}

.fc-resource-cell a {
    color: #757575;
}

.fc-resource-cell a:hover {
    color: #5fbcdd;
    text-decoration: none;
}

.calendar-slotDuration-changer.hide {
    display: none;
}

#calendar .fc-event.has-comment:after {
    content: '\f27a';
    display: block;
    position: absolute;
    top: 5px;
    right: 10px;
    width: 10px;
    height: 10px;
    font-family: "Font Awesome";
    font-size: 14px;
}

#new-booking-mobile {
    position: fixed;
    bottom: 20px;
    right: 32px;
    display: none;
}

#new-booking-btn {
    display: flex; 
    align-items: center; 
    height: 40px
}

.staff-select-wrap {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.staff-select-wrap .filter-option-inner .avatar {
    min-width: 26px;
    width: 26px;
    height: 26px;
    vertical-align: middle;
}

.staff-select-wrap .filter-option-inner .text-value {
    vertical-align: middle;
}

.staff-select-wrap .dropdown-toggle  .filter-option {
    padding-top: 6px;
}

.staff-select-wrap.work-time-select {
    margin-top: 20px;
    margin-bottom: 40px;
}

@media (max-width: 479px) {
    #new-booking-mobile {
        right: 12px;
    }
}

@media (max-width: 767px) {
    .page-content .calendar-container {
        padding-top: 15px; 
    }

    .calendar-container .fc-head-container.fc-widget-header {
        padding-top: 0; 
    }

    .calendar-container .fc-day-header {
        padding-right: 36px; 
    }

    .calendar-actions {
        display: none;
    }

    #new-booking-mobile {
        display: block;
    }

    div.calendar-slotDuration-changer {
        position: static;
        width: 82px;
        margin: 0 auto 10px;
    }

    .calendar-slotDuration-changer.hide-mobile,
    .staff-select-wrap.hide-mobile {
        display: none;
    }

    .calendar-title {
        display: none;
    }
}

@media (max-width: 1199px) {
    .calendar-admin div.calendar-slotDuration-changer {
        position: static;
        width: 82px;
        margin: 0 auto 20px;
    }
}

.calendar-admin .fc-view > table {
    min-width: 100%;
}

@media (max-width: 991px) {
    .calendar-admin .fc-view {
        overflow-x: scroll;
        position: relative;
    }
}

@media (min-width: 991px) {
    .staff-select-wrap {
        display: none;
    }
}

.fc-view:not(.fc-month-view) .fc-scroller {
    max-height: 700px;
}

.calendar-legend {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

.calendar-legend-item {
    margin-right: 15px;
}

.calendar-legend-color {
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    margin-top: -3px;
}


label.styled_checkbox.thumbler_style {
    width: 42px;
    min-width: 42px;
    height: 22px;
    border-radius: 20px;
    margin: 0;
    border: 0;
    overflow: hidden;
    position: relative;
    background: #f4f7f8;
    transform: rotate(180deg);
}

label.styled_checkbox.thumbler_style i {
    background: #f4f7f8;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}

label.styled_checkbox.thumbler_style i:after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    height: 18px;
    width: 18px;
    border-radius: 100%;
    background: #fff;
    transition: all ease .3s;
    opacity: 1;
}

label.styled_checkbox.thumbler_style input:checked + i {
    background: #2cbfdd;
}

label.styled_checkbox.thumbler_style input:checked + i:after {
    right: calc(100% - 2px - 18px);
}

.chat-widget-switch.is-unavailable > label {
    opacity: .5;
    cursor: not-allowed;
}

.page-title {
    font-weight: 300;
    padding: 10px 0;
}

@media (max-width: 479px) {
    .page-title {
        /*text-align: center;*/
    }
}

.fc td.fc-widget-content.has-event {
    cursor: pointer;
}

.fc-day-grid .fc-content-skeleton .fc-event-container {
    display: none
}

.fc td.fc-widget-content.fc-today {
    position: relative;
}

.fc .fc-month-view td.fc-widget-content.fc-today:after {
    content: 'Today';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-button-group {
    position: absolute;
    right: 0;
    top: 0
}

.select2 {
    width: 100% !important
}

.select2-container:not(.select2) {
    z-index: 9999
}

.ui-widget.ui-autocomplete {
    z-index: 8888;
    width: 708px;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    overflow: scroll;
    max-height: 300px;
}

.ui-widget.ui-autocomplete li {
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.ui-widget.ui-autocomplete li:hover,
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
    background: #e4e4e4;
}

.ui-widget.ui-autocomplete li > div {
    padding: 10px;
}

.controls.autocomplete input {
    position: relative;
}

div.comments-labels {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

div.comments-labels label{
    margin: 0;
}

#orders-view {
    margin-left: 15px;
}

.comments-history-btn {
    color: #0a0a0a;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 15px;
    text-decoration: none !important;
}

.comment-tabs .comment-count {
    background: #cc80b6;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    color: #fff;
    font-size: .7em;
    margin-left: 3px;
    display: inline-block;
    text-align: center;
    line-height: 19px;
    text-decoration: none;
    vertical-align: text-bottom;
}

.comments-history-btn span:not(.count){
    text-decoration: underline;
}

.comments-history-btn:hover span:not(.count){
    text-decoration: none;
}

#orders-popup .modal-dialog {
    max-width: 500px
}

ul.order-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
    max-height: 162px;
}

ul.order-history-list > li {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
}

#fullCalModal div.modal-header {
    height: 77px;
    display: flex;
    align-items: center;
}

#fullCalModal div.modal-header h4 {
    font-size: 22px;
    color: #434d53;
    font-weight: 300;
    line-height: 1.2;
}

#fullCalModal .booking-tabs {
    border-radius: 50px;
    overflow: hidden;
    position: absolute;
    right: 50px;
    top: -58px;
    border: 1px solid #e4eaec;
    color: #58646c;
    font-size: 14px;
    font-weight: 300;
}

@media (max-width: 767px) {
    #fullCalModal .booking-tabs {
        position: static;
        margin: 0 auto 40px;
    }

    #fullCalModal div.modal-header {
        padding-right: 20px;
        text-align: center;
    }

    #fullCalModal .modal-title{
        width: 100%;
        text-align: center;
    }
}

#fullCalModal .booking-tabs .nav-item {
    flex-basis: 1%;
    flex-grow: 1;
}

#fullCalModal .booking-tabs .nav-link {
    border-radius: 0;
    padding: .715rem 22px;
    display: flex;
    height: 38px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

#fullCalModal .booking-tabs .nav-item.open .nav-link,
#fullCalModal .booking-tabs .nav-item.open .nav-link:focus,
#fullCalModal .booking-tabs .nav-item.open .nav-link:hover,
#fullCalModal .fooking-tabs .nav-item.show .nav-link,
#fullCalModal .booking-tabs .nav-item.show .nav-link:focus,
#fullCalModal .booking-tabs .nav-item.show .nav-link:hover,
#fullCalModal .booking-tabs .nav-link.active,
#fullCalModal .booking-tabs .nav-link.active:focus,
#fullCalModal .booking-tabs .nav-link.active:hover {
    background-color: #f4f7f8;
    color: #58646c;
}

#fullCalModal .modal-footer {
    justify-content: space-between;
    padding: 0 30px 30px;
}

@media (max-width: 500px) {
    #fullCalModal .modal-footer {
        flex-direction: column;
    }

    #fullCalModal .modal-footer button {
        margin-bottom: 10px;
    }

    #fullCalModal .datepicker-dropdown {
        left: auto !important;
    }

    #fullCalModal .datepicker-dropdown:before,
    #fullCalModal .datepicker-dropdown:after {
        left: 49% !important;
    }
}


.client-phone-link {
    position: relative;
    z-index: 1;
    width: 100%;
    border: 1px solid #e3e6ea;
    border-radius: 50px;
    height: 40px;
    background-color: #eeeeee;
    line-height: 40px;
    padding-left: 15px;
    color: #cb80b6;
    font-weight: 500;
}

.client-phone-link a {
    color: #848484;
    text-decoration: underline;
}

.client-phone-link a:hover {
    color: #cc80b6;
}


#fullCalModal .tt-menu {
    border-radius: 20px;
    padding: 15px 0;
}

#fullCalModal .tt-menu .empty-message {
    padding: 0 20px;
    color: #cc80b6;
}

.comment-tabs {
    border-bottom: 0;
}

.comment-tabs-wrap {
    margin-top: 20px;
}

.comment-tabs .nav-link {
    color: #848484;
    text-decoration: underline;
}

.comment-tabs .nav-link:focus, 
.comment-tabs .nav-link:hover {
    background-color: transparent;
    color: #cc80b6;
}

.comment-tabs .nav-item:first-child .nav-link {
    padding-left: 0;
}

.comment-tabs .nav-item.open .nav-link, 
.comment-tabs .nav-item.open .nav-link:focus, 
.comment-tabs .nav-item.open .nav-link:hover, 
.comment-tabs .nav-item.show .nav-link, 
.comment-tabs .nav-item.show .nav-link:focus, 
.comment-tabs .nav-item.show .nav-link:hover, 
.comment-tabs .nav-link.active, 
.comment-tabs .nav-link.active:focus, 
.comment-tabs .nav-link.active:hover {
    color: #848484;
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: transparent;
    text-decoration: none;
}

.comment-text-area {
    min-height: 160px;
    margin-top: 2px;
}

div.inputs-container {
    margin-top: -16px;
}

div.inputs-container > .row.label-row {
    margin-top: 16px;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .inputs-container .row > div[class^='col'] {
        margin-bottom: 10px;
    }

    div.inputs-container > .row.label-row {
        margin-bottom: 0;
    }
}

div.inputs-container > .row.label-row label {
    margin: 0;
    color: #434d53;
    font-weight: 400;
}

label.control-label {
    color: #434d53;
    font-weight: 400;
}

div.inputs-container input[type="text"],
div.inputs-container input[type="email"],
div.inputs-container input[type="number"] {
    width: 100%;
    border: 1px solid #e3e6ea;
    border-radius: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    color: #a7b0b8;
    font-size: 14px;
    padding: 0 15px;
}

div.inputs-container input[type="text"]:focus,
div.inputs-container input[type="email"]:focus,
div.inputs-container input[type="number"]:focus {
    outline: none;
    border-color: #2cbfdd;
}

div.inputs-container textarea {
    width: 100%;
    border: 1px solid #e3e6ea;
    border-radius: 24px;
    height: 140px;
    color: #a7b0b8;
    font-size: 14px;
    padding: 15px 22px;
    resize: vertical;
}

div.inputs-container .btn-select.dropdown-toggle {
    font-size: 14px;
    color: #a7b0b8;
    border: 1px solid #e3e6ea;
    padding: 0 22px;
    border-radius: 50px;
    height: 40px;
    display: flex;
    align-items: center;
}

div.controls.has-icon {
    position: relative;
    padding-right: 0 !important;
}

div.controls.has-icon .fa {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #f8fafc;
    border: 1px solid #e3e6ea;
    width: 38px;
    border-radius: 50px 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.controls.has-icon input {
    padding-right: 40px !important;
}

div.controls.has-icon input + .fa {
    right: 0;
    left: auto;
    border-radius: 0 50px 50px 0;
}

div.line-inputs-container {
    display: flex;
}

div.line-inputs-container .control-group {
    display: flex;
    font-size: 14px;
    color: #58646c;
    margin-right: -9px;
    flex: auto;
}

div.line-inputs-container .control-group > * {
    margin-right: 9px;
    white-space: nowrap;
    flex: auto;
}

div.line-inputs-container .control-group > label {
    flex-grow: 0;
}

div.line-inputs-container label {
    margin: 0;
    align-self: center;
    line-height: 1.1;
}

#event_price {
    /* padding: 0 9px; */
    /* text-align: center; */
}

#event_order_duration {
    padding: 0 9px;
    text-align: center;
}

#event_price {
    /* width: 100px; */
}

div.event_order_duration_wrap {
    position: relative;
}

.ui-timepicker-wrapper {
    z-index: 8878 !important;
}

/*LOGIN page*/

div.login-page {
    background: url("../img/sign-in-bg.bcb4479df007.jpg") top center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    padding: 0;
    min-height: 100%;
}

div.login-page a {
    color: rgba(255, 255, 255, .5);
}

div.login-page a:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}

div.login-page .login-page-container {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
}

div.login-page .login-page-footer {
    flex-basis: 106px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

div.login-page .cont {
    min-width: 342px;
    flex-basis: 342px;
    display: flex;
    flex-direction: column;
}

div.login-page .logo > img {
    object-fit: contain;
}

div.login-page .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.form-signin .form-group {
    margin-bottom: 20px;
}

.form-signin .form-group input {
    display: flex;
    height: 46px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #fff;
    transition: all ease 0.3s;
    padding: 0 22px;
    font-size: 14px;
    color: #37474f;
    font-weight: 400;
    flex: auto;
    width: 100%;
}

.form-group.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-group.remember-forgot label{
    margin-bottom: 0;
}

.form-signin button[type="submit"]{
    font-size: 16px;
}

.change-login-view, .login-link {
    color: #fff !important;
    text-decoration: underline;
}

label.label-controls {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

label.label-controls .styled_checkbox {
    margin-right: .5em;
    color: #000;
}

.form-signin label.label-controls .styled_checkbox {
    border-radius: 100%;
}

div.goto-register-block {
    margin: 25px 0 0;
    text-align: center;
    letter-spacing: .1em;
    line-height: 2;
}

.form-signin .bootstrap-select > .dropdown-toggle {
    /* display: flex; */
    height: 46px;
    /* border-radius: 20px; */
    border: 0;
}

.form-signin .input-group-prepend .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
    width: 100px;
}

.form-signin .input-group-prepend .bootstrap-select .dropdown-toggle {
    padding-right: 20px;
}

.form-signin .bootstrap-select .dropdown-item {
    color: #757575;
}

.form-signin .bootstrap-select .filter-option-inner {
    height: 35px;
    line-height: 35px;
}

.form-signin .alert {
    display: block;
    background-color: #ca81b9;
    border: 0;
    color: #fff;
}

.form-signin .form-group.error .checkbox-custom.validate label:before {
    background-color: #f2d9ee;
}

.fsm-title {
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    margin: 0 0 1em;
    text-align: center;
}

.fsm-title-2 {
    font-size: 14px;
    color: rgba(255, 255, 255, .5);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1em;
}

div.results-list > div + div {
    margin-top: 70px;
}

div.results-list > div h3 {
    display: inline-flex;
    height: 30px;
    align-items: center;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    background: #37bbdd;
    color: #fff;
    padding: 0 38px 0 30px;
    margin-left: -30px;
    border-radius: 0 30px 30px 0;
    margin-bottom: 30px;
}

div.results-list-detail {
    border-bottom: 1px solid #e4eaec;
}

.nav-tabs-container {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.nav-tabs-style-mod .nav-tabs.nav-tabs {
    border-radius: 50px;
    overflow: hidden;
    justify-content: flex-end;
    border: 1px solid #e4eaec;
    color: #58646c;
    font-size: 14px;
    font-weight: 300;
}

.nav-tabs-style-mod .nav-tabs.nav-tabs .nav-link {
    min-width: 115px;
    display: flex;
    justify-content: center;
    text-align: center;
    border-radius: 0;
}

.nav-tabs-style-mod .nav-tabs.nav-tabs .nav-link.active {
    background: #b4bbc3;
}

div.photo-represent-block {
    width: 160px;
    height: 327px;
    position: relative;
    cursor: pointer;
}

@media (max-width: 479px) {
    div.photo-represent-block {
        margin: 0 auto;
    }
}

div.photo-represent-block:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url("../img/photo-represent-block.66a984768d52.png") 0 0 no-repeat;
    background-size: 100% 100%;
}

div.photo-represent-block > div{
    overflow: hidden;
    position: absolute;
    left: 27px;
    top: 117px;
    right: 27px;
    bottom: 141px;
    background: #000;
    border-radius: 0 0 4px 4px;
}

div.photo-represent-block a {
    display: block;
}

div.photo-represent-block img {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

div.photo-represent-block .name{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .8);
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 10px;
}

.form-control,
.form-control.datepicker {
    border-radius: 20px;
}

.form-control.datepicker {
    padding-left: 20px;
}

.form-control[type="text"]:focus,
.form-control[type="email"]:focus,
textarea.form-control:focus {
    outline: none;
    border-color: #2cbfdd;
}

div.box-bordered {
    border: 1px solid #e5e5e7;
    overflow: hidden;
    border-radius: 20px;
}

.input-group-text-simple {
    display: flex;
    align-items: center;
    margin-right: 20px;
    line-height: 1.1;
}

.input-group-prepend.simple + input {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    padding: 0 15px;
    text-align: center;
}

/* VIVO-68: the duration field sits in a quarter of a 768px modal, wedged
   between its label and the clock button. Bootstrap 4.1 gives
   `.input-group > .form-control` `flex: 1 1 auto; width: 1%` with no minimum,
   and `.input-group { flex-wrap: nowrap }` above removes the wrap escape
   valve, so the input collapsed to no visible text area at all. Give it a
   floor and hand back some of the padding the label and button were taking.
   The selector has to out-specify `.input-group-prepend.simple + input`. */
.duration-group .input-group-prepend.simple + input {
    min-width: 3.5rem;
    padding: 0 8px;
}

.duration-group .input-group-text-simple {
    margin-right: 8px;
}

/* The clock is a real dropdown trigger now, not a decorative glyph. */
.duration-group .duration-toggle {
    padding: .429rem .786rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.duration-group .duration-toggle:focus {
    outline: none;
}

.duration-menu {
    min-width: 0;
}

div.panel-body .cm-header {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

div.panel-body .cm-header .form-group {
    margin: 0;
}

label[for="id_enable"],
.thumbler-block {
    display: flex;
    align-items: center;
}

label[for="id_enable"] label,
.thumbler-block label {
    margin-right: 20px !important;
    font-size: 16px;
    color: #73797e;
    cursor: pointer;
}

.sms_reminder_hours_custom {
    display: flex;
}

.sms_reminder_hours_custom .btn-group.bootstrap-select {
    width: 150px !important;
}

.sms_reminder_hours_custom > label {
    margin: 0 22px 0 0;
}

.sms_reminder_hours_custom > label span {
    display: block;
    font-size: 12px;
    color: #a5a3a3;
}

.qtip-default.custom-qtip-style-1 {
    max-width: 400px !important;
    background: #fff;
    border-color: rgba(0, 0, 0, .2);
}

@media (max-width: 900px) {
    .qtip-default.custom-qtip-style-1 {
        display: none !important;
    }
}

.custom-qtip-style-1 .qtip-content {
    padding: 0;
}

.custom-qtip-style-1 .qtip-content img {
    max-width: 100%;
    display: block;
}

div.upload-photo-imitation + .controls {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

div.upload-photo-imitation .photo-name-txt {
    flex: auto;
    margin-top: 10px;
}

.upload-photo-imitation .photo-name-txt.error {
    color: #d282b5;
}

div.img-preview-qtip{
    width: 301px;
    height: 240px;
    padding: 93px 47px 17px 50px;
}

div.img-preview-qtip:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url("../img/photo-represent-block.66a984768d52.png") 0 -127px no-repeat;
}

div.img-preview-qtip img{
    display: block;
    width: 100%;
    object-fit: cover;
    height: 129px !important;
}

img.client-edit-avatar{
    display: block;
    width: 120px;
    height: auto;
    border-radius: 100%;
    padding: 1px;
    border: 1px solid #b4bcc2;
}

.profile-photo-upload .croppie-container {
    margin: 0 auto;
}

@media (max-width: 767px) {
    .profile-photo-upload #id_photo_img {
        margin: 0 auto;
        display: block;
    }
}



/*====== Search page ========*/

.page-desc {
    margin-top: 7px;
}

.search-results {

}

.search-results-header {
    height: 30px;
    line-height: 30px;
    text-transform: uppercase;
    font-size: 14px;
    background: #37bbdd;
    color: #fff;
    border-radius: 0 30px 30px 0;
    margin-top: 40px;
    margin-bottom: 0;
    margin-left: -30px;
    display: inline-block;
    padding: 0 30px;
}

.search-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 17px;
    padding-top: 17px;
}

.search-item:last-child {
    border-bottom: 0;
}

.search-item-header {
    font-size: 20px;
    font-family: "Open Sans";
    text-shadow: none;
    font-weight: 300;
    margin-bottom: 0;
    display: flex;
}

@media (max-width: 767px) {
    .search-item-header {
        display: flex;
        flex-direction: column;
    }
}

.search-item-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 5px;
}

.search-item-service .search-item-avatar {
    margin-top: -5px;
}

.search-item-avatar img {
    width: 100%;
}

.search-item-datetime {
    float: left;
    border-right: 1px solid;
    padding-right: 7px;
    margin-right: 17px;
    min-width: 250px;
}

@media (max-width: 767px) {
    .search-item-datetime {
        border-right: 0;
        margin-right: 0;
    }
}

.search-item-datetime img {
    line-height: 34px;
    vertical-align: top;
}

.search-item-datetime i {
    margin-right: 5px;
}

.search-item-datetime > span,
.search-item-title > div {
    margin-right: 10px;
}
.search-highlight {
    border-bottom: 2px solid #df7dd2;
}

.search-staff-name {
}

.search-staff-name > .search-field {
    display: inline-block;
    margin-top: 4px;
}

.search-item-phone {
    margin-top: 10px;
}

.search-item-phone a {
    font-weight: 500;
}

.search-item-desc {
    min-width: 100%;
    font-size: 14px;
    margin-top: 10px;
}

.search-item-title {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .search-item-title {
        margin-top: 10px;
    }
}

.search-item-service {
    display: flex;
}

.search-item-info {
    min-width: 100%;
    font-size: 14px;
    font-weight: 600;
    margin-top: 5px;
}

.search-item-info span:after {
    content: '-';
}

.search-item-info span:last-child:after {
    content: '';
}

.fc .datepicker th,
.fc .datepicker td {
    vertical-align: middle;
}

.datepicker.datepicker-dropdown{
    padding: 18px;
    background: rgba(255, 255, 255, .95);
    border-radius: 15px;
    box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .1);
    width: 326px !important;
    z-index: 9999 !important;
}

.datepicker.datepicker-dropdown.datepicker-orient-left:before{
    left: 16px !important;
}

.datepicker.datepicker-dropdown.datepicker-orient-left:after{
    left: 17px !important;
}

.fc-toolbar .datepicker-dropdown.datepicker-orient-left:before,
.fc-toolbar .datepicker-dropdown.datepicker-orient-left:after {
    left: 49% !important;
}

.fc-toolbar .datepicker-dropdown {
    left: auto !important;
    margin-top: 10px;
}

.datepicker.datepicker-dropdown table{
    width: 100%;
    table-layout: fixed;
}

.datepicker table tr td,
.datepicker table tr th{
    text-transform: uppercase;
    border-radius: 20px !important;
    height: 40px !important;
}

.datepicker table tr td{
    font-size: 14px;
    color: #76838f;
}

.datepicker table tr td.active:not(:disabled):not(.disabled):active,
.datepicker table tr td.active:not(:disabled):not(.disabled).active,
.show > .datepicker table tr td.active.dropdown-toggle,
.datepicker table tr td.active.highlighted:not(:disabled):not(.disabled):active,
.datepicker table tr td.active.highlighted:not(:disabled):not(.disabled).active,
.show > .datepicker table tr td.active.highlighted.dropdown-toggle,
.datepicker .datepicker-days table tr td:hover{
    background: #2cbedb !important;
    color: #fff !important;
}

.notification-inputus{
    width: 100% !important;
}


.avatar.avatar-square {
    border-radius: 0;
}

.avatar.avatar-fit {
    height: 30px;
}

.avatar.avatar-margin-right {
    margin-right: .8em;
} 

.avatar.avatar-fit img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto !important;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 0;
}

.icons-select.bootstrap-select .dropdown-menu li a span.text {
    white-space: normal;
}

.icons-select .filter-option .avatar {
    height: 20px;
    width: 20px;
    min-width: 20px;
    vertical-align: top;
    line-height: 20px;
    margin-right: 20px;
}

.icons-select .filter-option .avatar.avatar-fit {
    height: 20px;
}

.icons-select .text {
    padding-left: 40px; 
}

.icons-select .text .avatar {
    float: left;
    margin-left: -40px;
}

.client_name_wrap .avatar-wrap {
    position: absolute;
    z-index: 3;
    top: 5px;
    left: 20px;
}

.client_name_wrap .tt-hint,
.client_name_wrap .tt-input {
    padding-left: 60px !important;
}

.popover.clockpicker-popover {
    z-index: 99999;
}

.toolbar .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn).toolbar-select {
    width: 100%;
}

.toolbar .toolbar-button {
    width: 100%;
}

.toolbar .toolbar-search-input {
    width: 100%;
}

.toolbar .toolbar-date-col {
    flex: 0 0 100%;
    max-width: 100%;
}

.toolbar .toolbar-date-picker {
    /* width: 100%; */
    /* min-width: 130px; */
}

@media (min-width: 600px) {
    .toolbar .toolbar-date-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .toolbar .toolbar-date-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


@media (min-width: 860px) {
    .toolbar .toolbar-date-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 1360px) {
    .toolbar .toolbar-date-col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}


@media (min-width: 1200px) {
    .toolbar .bootstrap-select:not([class*=col-]):not(.input-group-btn).toolbar-select,
    .toolbar .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn).toolbar-select {
        width: 180px;
    }

    .toolbar .toolbar-button {
        width: auto;
    }

    .toolbar .toolbar-search-input {
        width: 330px;
    }
}

.form-signin {
    position: relative;
}

.form-signin .tooltip {
    -webkit-font-smoothing: subpixel-antialiased;
}

.form-signin .tooltip.show {
    opacity: 1;
}

.form-signin .tooltip-inner {
    background-color: #ca81b9;
    max-width: 100%;
    font-size: 14px;
    -webkit-font-smoothing: subpixel-antialiased;
    line-height: 1.25;
}

.form-signin .bs-tooltip-auto[x-placement^=top], .bs-tooltip-top {
  padding: 8px 0
}

.form-signin .bs-tooltip-auto[x-placement^=top] .arrow, .bs-tooltip-top .arrow {
  bottom: 0
}

.form-signin .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
  top: -4px;
  border-width: 8px 4px 0;
  border-top-color: #ca81b9;
}

.form-signin .bs-tooltip-auto[x-placement^=right], .bs-tooltip-right {
  padding: 0 20px
}

.form-signin .bs-tooltip-auto[x-placement^=right] .arrow, .bs-tooltip-right .arrow {
  left: 12px;
  width: 8px;
  height: 8px
}

.form-signin .tooltip.bs-tooltip-right .arrow {
    left: 12px;
}

.form-signin .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
  border-width: 4px 8px 4px 0;
  border-right-color: #ca81b9;
}

.form-signin .bs-tooltip-right .tooltip-inner {
    text-align: left;
}

.wizard.panel .panel-body {
    padding-top: 40px;
}

.wizard .panel-heading .row {
    margin: 0;
}

.wizard-title {
    font-size: 22px;
    text-align: center;
}

.wizard-title .wizard-title-desc {
    font-size: 14px;
}

.wizard-minimized {
    display: none;
    cursor: pointer;
}

.wizard-minimized .panel-body {
    padding: 20px 30px;
}

.wizard-minimized .warning-sing {
    color: #fff;
    background-color: #ca81b9;
    display: inline-block;
    position: absolute;
    left: auto;
    top: 42%;
    right: 25px;
    width: 20px;
    height: 20px;
    font-style: normal;
    font-weight: 600;
    z-index: 10;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
}

.wizard-minimized .wizard-title {
    padding: 0;
    flex-wrap: wrap;
}

.wizard-title-steps {
    margin: 0;
    padding: 25px 20px;
    justify-content: center;
    flex-wrap: nowrap;
}

.wizard-actions {
    justify-content: space-between;
    display: flex;
    margin-top: 20px;
}

.wizard-actions-info {
    font-size: 12px;
    display: flex;
    align-items: center;
}

.wizard-actions-buttons {
    display: flex;
    justify-content: flex-end;
}

.wizard-actions-info a {
    text-decoration: underline;
    color: inherit;
}

.wizard-content.inputs-container {
    margin-top: 0;
}

.wizard-title-steps .nav-item {
    padding: 0 20px;
}

.wizard-title-steps .nav-link {
    overflow: visible;
    text-align: center;
    color: #78909c;
    background-color: #f4f7f8;
    width: 56px;
    height: 35px;
    border-radius: 20px;
    padding: 0;
    line-height: 35px;
    font-size: 16px;
    font-weight: 800;
    border: 1px solid #a3afb7;
    pointer-events: none;
}

.wizard-title-steps .nav-link.active {
    color: #5fbcdd;
    background-color: #f4f7f8;
}


.wizard-title-steps .nav-link.visited {
    background-color: #a3afb7;
    color: #fff;
}

.wizard-title-steps .nav-link:before {
    content: '';
    display: block;
    width: 22px;
    height: 5px;
    background-color: #f4f7f8;
    position: absolute;
    left: -22px;
    top: 15px;
}

.wizard-title-steps .nav-item:first-child .nav-link:before {
    display: none;
}


.wizard-title-steps .nav-link:after {
    content: '';
    display: block;
    width: 22px;
    height: 5px;
    background-color: #f4f7f8;
    position: absolute;
    right: -22px;
    top: 15px;
}

.wizard-title-steps .nav-item:last-child .nav-link:after {
    display: none;
}

.wizard-title-steps .nav-link:before,
.wizard-title-steps .nav-link:after {
    border-top: 1px solid #a3afb7;
    border-bottom: 1px solid #a3afb7;
}

.wizard-title-steps .nav-link.visited:before,
.wizard-title-steps .nav-link.visited:after {
    background-color: #a3afb7;
}

@media (max-width: 1199.9px) {
    .wizard.panel-bordered > .panel-heading {
        border-bottom: 0;
    }

    .wizard-title-steps {
        padding: 15px 20px;
    }
}

@media (max-width: 479.9px) {
    .wizard-actions-info {
        margin-bottom: 20px;
    }
    .wizard-actions-buttons {
        flex-direction: column;
    }

    .wizard-title-steps .nav-link {
        width: 35px;
    }
}

@media (min-width: 1200px) {
    .wizard-title {
        padding: 0 30px 0 15px;
        text-align: left;
        display: flex;
        align-items: center;
        height: 100%;
    }
}

@media (min-width: 1400px) {
    .wizard-content {
        padding: 0 100px;
    }
}

.inputs-container.company-detail-container {
    margin-top: 25px;
    padding-top: 35px;
    border-top: 1px solid #eee;
}