/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select {
    text-align: center;
}

input.align-left, select.align-left{
    text-align: left;
}

.align-left{
    text-align: left;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
    font-weight: 600;
}


.success {
    color: #099809;
}

/*#CompanyLogo {
    height: 70px;
    width: auto;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 50px;
}*/


#CompanyLogo {
    /*height: 70px;*/
    width: 15%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 20px;
    min-width: 200px;
    /*margin-bottom: 50px;*/
}

 

#ClientHeader {
    position: relative;
    display: table;
    width: 100%;
}

    #ClientHeader .title {
        margin: 35px 0;
    }

#BackBtn {
    font-weight: bolder !important;
    display: block;
    cursor: pointer;
}

#BookingTimer {
    z-index: 100;
    width: 100%;
    position: fixed;
    background-color: #ffffff;
    color: #000;
    bottom: 0;
    left: 0;
    padding: 20px;
    border-top: 1px solid #e2e2e2;
    box-shadow: 0px 6px 6px 3px rgba(0,0,0,0.39);
}

#TimeContainer {
    font-weight: bolder;
    font-size: 20px;
}

#SPFormContainer {
    display: table;
    width: 100%;
}

.text-link {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.down-arrow {
    max-height: 20px;
}

.photo-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.photo-thumb-sm {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.photo-thumb.round {
    border-radius: 35px;
    border: 1px solid #dadada;
}




.nav-tabs .nav-item {
    background-color: transparent;
    border: none;
    text-transform: uppercase;
}

.nav-tabs .nav-item, .nav-tabs .nav-link {
    color: #303030;
    background-color: transparent;
    border: none;
}
  
    .nav-tabs .nav-item {
        display: table-cell;
    }

    .nav-tabs .nav-link {
        width: 100% !important;
        display: table;
        text-align: center;
        padding-top: 15px;
    }


.nav-tabs .nav-item {
    background-color: transparent;
    border: none;
    text-transform: uppercase;
}

.nav-tabs .nav-item, .nav-tabs .nav-link {
    color: #303030;
    background-color: transparent;
    border: none;
}
  
    .nav-tabs .nav-item {
        display: table-cell;
    }

    .nav-tabs .nav-link {
        width: 100% !important;
        display: table;
        text-align: center;
        padding-top: 15px;
    }


.non-clickable {
    pointer-events: none;
}

.btn {
    height: 40px;
    padding: 8px;
}


.btn-black {
    color: #FFFFFF;
    background-color: #000000;
    border-color: #FFFFFF;
   
}

.btn-black:hover, .btn-black:active {
    color: #FFFFFF;
    background-color: #3e3e42;
    border: none;
}
.btn-secondary.disabled, .btn-secondary:disabled {
    color: #eee;
    background-color: #ffffff;
    border-color: #eee;
    cursor: default;
    pointer-events: none;
}

.btn-sm {
    width: fit-content;
    height: 30px !important;
    padding: 0.25rem 0.5rem !important;
}


.disable-for-guest .btn.btn-time, .disable-for-requirement .btn.btn-time {
    color: #b3b3b3;
    background-color: #ffffff;
    border-color: #d4d4d4;
    cursor: default;
    pointer-events: none;
} 

.btn-redeemPackage.redeemed {
    background-color: transparent;
    border: 2px solid #099809;
    display: inline-table;
    vertical-align: top;
    cursor: pointer;
}

.form-control {
    width: 100% !important;
    background-color: #f7f6f6;
    border: 1px solid #e4e4e4;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
} 


.form-group.flexed {
    display: flex;
}

    .form-group.flexed label {
        min-width: 120px;
    }

    .form-group.flexed > div {
        width: 100% !important;
    }


.summary-message-container {
    display: none;
    margin: 10px 0;
    color: black;
    border-left: 10px solid rgba(0,0,0,0.39);
    padding: 10px;
    background-color: #eeeeee;
}

    .summary-message-container.success {
        border-left: 10px solid #009b28;
        background-color: #6dba3d;
        color: white;
    }

    .summary-message-container.error {
        border-left: 10px solid #ce2c2c;
        background-color: #e68181;
        color: white;
    }

.action-link {
    cursor: pointer;
    font-weight: 600;
}




.list-group .list-group-item.no-hover:hover {
    background-color: transparent;
    cursor: default;
}


.list-group .list-group-header {
    font-size: 16px;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
}


.read-only {
    pointer-events: none;
}

.bootstrap-datetimepicker-widget table tr td.new {
    display: none;
}

.bootstrap-datetimepicker-widget table tr td.old {
    visibility: hidden;
}

.bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
    color: #c3c3c3;
    cursor: auto;
}

.bootstrap-datetimepicker-widget table th {
    height: 55px !important;
}

.bootstrap-datetimepicker-widget table td {
    height: 55px !important;
}

.no-hover {
}

.shadow-box {
    padding: 20px;
    box-shadow: 0px 12px 15px -13px rgba(0,0,0,0.39);
    border: 1px solid #eee;
    position: relative;
}



.container-loader {
    position: relative;
    max-width: 50%;
    margin: auto;
    padding: 10px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #b5ada7;
    padding: 20px;
    box-shadow: 0px 12px 15px -13px rgba(0,0,0,0.39);
    border: 1px solid #eee;
}

#PageLoaderSubContainer {
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    display: table;
    min-width: 200px;
    margin: auto;
    padding: 10px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #b5ada7;
    padding: 20px;
    box-shadow: 0px 12px 15px -13px rgba(0,0,0,0.39);
    border: 1px solid #eee;
}

    #PageLoaderSubContainer .message {
        font-weight: 600;
        margin: 10px 0;
    }

#PanelLoaderSubContainer {
    position: relative;
    display: block;
    min-width: 200px;
    margin: 0px 20%;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 12px 15px -13px rgb(0 0 0 / 39%);
    border: 1px solid #eee;
}

    #PanelLoaderSubContainer .message {
        font-weight: 600;
        margin: 10px 0;
    }


.calendar-previous-icon {
    display: block;
    height: 37px;
    width: 30px;
    float: left;
    background-image: url('Images/left_arrow.png');
}

.calendar-next-icon {
    display: block;
    height: 37px;
    width: 30px;
    padding: 0;
    float: right;
    margin: 0;
    background-image: url(Images/right_arrow.png);
}
.removeServiceBtn {
    width: 30px;
    position: absolute;
    border-radius: 30px;
    background: white;
    padding: 4px;
    cursor: pointer;
    z-index: 1;
    right: 11px;
    top: 7px;
}
 

    .removeServiceBtn img {
        width: 100%;
        height: 100%;
    }

.serviceDetailitem {
    position: relative;
}


.specialRequestSummaryItem {
    min-height: 70px;
    position: relative;
}

    .specialRequestSummaryItem .sp-photo-container {
        float: left;
        position: relative;
    }

    .specialRequestSummaryItem .sp-photo {
        height: 70px;
        width: 70px;
        object-fit: cover;
        position: absolute;
        background-color: white;
        padding: 3px;
        box-shadow: 0px 5px 6px 3px rgba(195, 195, 195, 0.39);
    }

.loading-item {
    opacity: 0.3;
    pointer-events: none;
}

#MainContent.loading-item {
    opacity: 1;
    pointer-events: none;
}

#ClassAvailabilityMessage {
    background: #5f5f5f;
    padding: 10px 20px;
    font-weight: 600;
    color: white;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
}

    #ClassAvailabilityMessage.success {
        background-color: #099809;
    }

    #ClassAvailabilityMessage.warning {
        background-color: #f68c2a;
    }


.divider-detail > span {
    min-width: 150px;
}

#PackageAvailabilityMessage {
    background: #5f5f5f;
    padding: 10px 20px;
    font-weight: 600;
    color: white;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
}

.disabled {
    pointer-events: none;
}

.icon img {
    height: 20px;
    margin-right: 15px;
}

#PaypalAppointmentBtn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

#PaypalPackageBtn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.paypal-button-text {
    opacity: 0;
}

.disable-for-guest, .disable-for-requirement {
    pointer-events: none;
}

    .disable-for-guest .btn.btn-secondary, .disable-for-requirement .btn.btn-secondary {
        color: #eee;
        background-color: #ffffff;
        border-color: #eee;
        cursor: default;
        pointer-events: none;
    }



.btn-primary.disable-for-guest, .btn-primary.disable-for-requirement {
    color: #fff;
    background-color: #eeeeee;
    border-color: none;
    cursor: default;
    pointer-events: none;
}

.guestRequiredLoginInfo {
    width: 100%;
    max-width: 1100px;
    position: fixed;
    background-color: #ffffff;
    color: #000;
    top: 20px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 4px 13px 0px rgba(183, 183, 183, 0.39);
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    z-index: 200;
    animation: 1s ease-out 0s 1 slideInFromTop;
}

.guestRequiredLoginInfo-sub {
/*    margin: 10px 0;
    color: black;
    border-left: 10px solid #62C462;
    padding: 10px;
    background-color: #dff0d8;*/
}

.read-more-target {
    display: none;
}

.warning-container {
    padding: 10px;
    background: #fffbd9;
    border: 1px solid #ffe3a5;
    font-size: 13px;
    text-align: center;
    margin: 10px 0px;
    font-weight: 600;
}

.no-border {
    border: 0 !important;
    padding: 0;
    margin: 0;
}

.floating-container {
    width: 100%;
    position: fixed;
    top: 20px;
    left: 0;
    z-index: 300;
    text-align: center;
}

.floating-error {
    position: relative;
    display: none;
    width: 80%;
    background-color: #ffffff;
    color: #000;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #e2e2e2;
    border-left: 11px solid red;
    border-radius: 5px;
    box-shadow: 0px 4px 13px 0px rgba(183, 183, 183, 0.39);
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    animation: 1s ease-out 0s 1 slideInFromTop;
}
 
.floating-error .message {
    margin: 0px 35px;
    text-align: left;
}


.floating-error .error-icon {
    display: inline-block;
    float: left;
}

.floating-error .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #d2d2d2;
}

.add-on-btn {
    height: initial;
    font-size: 10px !important;
    min-width: 80px;
}

    .add-on-btn.remove-btn {
        background-color: transparent;
        border: 1px solid #bdbdbd;
        color: #a3a3a3;
    }

    .add-on-btn.add-btn {
        background-color: #63d04c;
        border: 1px solid #64be51;
        color: #ffffff;
    }

#AddOnsSelectionSummary ul {
    list-style-type: none;
    padding-left: 0px;
}

    #AddOnsSelectionSummary ul > li {
        padding: 10px 0px;
        padding-left: 0px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

#AddOnsListPopup .card {
    border: none;
    text-align: left;
}

.clickable {
    cursor: pointer;
}


#ClientHeaderAccountDetail .clickable{
    color: gray;
    font-weight: 400;
}

#ClientHeaderAccountDetail .clickable:hover  {
    font-weight: bolder;
}
 
.back-btn {
    display: flex;
    align-items: center;
    color: #c3c3c3;
    cursor: pointer;
}

    .back-btn > .material-icons {
        font-size: 13px;
        margin-right: 10px;
    }



.ui-multiselect {
    width: 100% !important;
    background-color: white;
    border: 1px solid #e4e4e4;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    padding: 0.375rem 0.75rem;
    text-align: left;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ui-multiselect-menu {
    background-color: white;
    border: 1px solid #eeeeee;
}

.ui-multiselect-checkboxes {
    position: relative /* fixes bug in IE6/7 */;
    overflow-y: scroll;
    list-style: none;
    padding: 0px 10px;
}

.ui-multiselect-checkboxes li > label > input {
    margin-right: 10px;
}

select.form-control:not([size]):not([multiple]) {
    height: inherit !important;
}

.underlined{
    text-decoration:underline;
}

a{
    cursor:pointer;
}

.paypal-btn.disabled{
    background-color:transparent;
    opacity: 0.5 !important;
}
 
.card-cancellation-btn {
    margin-bottom: 5px;
    margin-bottom: 5px;
    background: #fdfdfd;
    border: 1px solid #d4d4d4;
}

#CalendarMessage .title {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 800px) {
    #BookingTimer .container-item {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    } 

    #CompanyLogo {
        width: 30%;
    }
      
    #CalendarMessage .title {
        display: block; 
    }

    .container-loader {
        max-width: 80%;
    }

}



@media (max-width: 600px) {
    #BookingTimer {
        padding-top:20px;
        padding-bottom:20px;
        padding-left:5px;
        padding-right:5px;
    }
        #BookingTimer .btn {
            font-size: 12px !important;
            height: auto !important;
        }

    .list-group-item .addon-options {
        display: inline-flex;
        flex-flow: column-reverse;
        text-align: right;
        gap: 15px;
    }

    .list-group-item .addon-options > span {
        margin:0px !important;
    }
    #CompanyLogo {
        width: 40%;
    }
     
    #CalendarMessage > div {
        right: 0px;
    }



    .container-loader {
        max-width: 100%;
    }
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #000000;
}

a.nav-link {
    color: black;
}


/*Simplicity status history */
.timeline {
    position: relative;
    border-color: rgba(160, 175, 185, .15);
    padding: 0;
    margin: 0
}

.tl-item {
    border-radius: 3px;
    position: relative;
    display: -ms-flexbox;
    display: flex
}

.tl-item > * {
    padding: 10px
}

.tl-item .avatar {
    z-index: 2
}

.tl-item:last-child .tl-dot:after {
    display: none
}

.tl-item:last-child .tl-dot:after {
    display: none
}


.tl-dot {
    position: relative;
    border-color: rgba(160, 175, 185, .15);
}

    .tl-dot:after,
    .tl-dot:before {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 4px;
        border-style: solid;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        top: 10px;
        left: 50%;
        transform: translateX(-50%)
    }

    .tl-dot:after {
        width: 0;
        height: auto;
        top: 25px;
        bottom: -15px;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        border-radius: 0;
        background-color: rgb(255, 168, 52);
    }

    .tl-dot:after,
    .tl-dot:before {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 4px;
        border-style: solid;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgb(255, 168, 52);
    }


    .tl-dot:after {
        width: 0;
        height: auto;
        top: 25px;
        bottom: -15px;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        border-radius: 0
    }

Secondary CSS

.tl-item:last-child .tl-dot-secondary:after {
    display: none
}

.tl-item:last-child .tl-dot-secondary:after {
    display: none
}

.tl-dot-secondary {
    position: relative;
    border-color: rgba(160, 175, 185, .15);
}

    .tl-dot-secondary:after,
    .tl-dot-secondary:before {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 4px;
        border-style: solid;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #c7c7cc;
    }

    .tl-dot-secondary:after,
    .tl-dot-secondary:before {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 4px;
        border-style: solid;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #c7c7cc;
    }


.tl-dot-secondary:after {
        width: 0;
        height: auto;
        top: 25px;
        bottom: -15px;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        border-radius: 0 }

.tl-content p:last-child {
    margin-bottom: 0
}

.tl-date {
    font-size: .85em;
    margin-top: 2px;
    min-width: 100px;
    max-width: 184px
}

.b-warning {
    border-color: #ffa834 !important
}

.b-secondary {
    border-color: #c7c7cc !important;
}

@media (max-width: 400px) {
    #BookingTimer .container-item {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }

        #BookingTimer .container-item .btn {
            font-size: 12px;
            height: 35px;
        }

    #TimeContainer {
        font-weight: bolder;
        font-size: 16px;
    }

    #CompanyLogo {
        width: 50%;
    }
}


img.icon {
    height: 20px;
    width: 20px;
}


    img.icon.icon-md {
        height: 30px;
        width: 30px;
    }


    img.icon.icon-lg {
        height: 40px;
        width: 40px;
    }



/**************************************** FORMS ***************************************/

.form-list-item .status {
    font-size: 10px;
    padding: 5px 15px;
    margin: 0px 7px;
    border-radius: 20px;
}

    .form-list-item .status.incomplete {
        color: #ffb253;
        background: #fff1d7;
    }

    .form-list-item .status.complete {
        color: #72bb53;
        background: #dfedd6;
    }

    .form-list-item .status.expired {
        color: #d81a1a;
        background: #ffd7d7;
    }

.form-list-item .btn {
    height: initial;
    font-size: 10px;
}

#ClientDetailTabs .nav-item.active, #ClientDetailTabs .nav-link {
    font-size: initial !important;
    background-color: #ffffff !important;
    font-size: 12px !important;
}

    #ClientDetailTabs .nav-item.active, #ClientDetailTabs .nav-link.active {
        color: #000000;
        border: none;
        font-weight: bold;
    }

#ClientDetailTabs {
    display: block;
    border-bottom: 3px ​solid #eeeeee !important;
}


.NoOutLine {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-width: 1.5px;
}

    .NoOutLine:focus {
        outline: none;
        border-bottom-color: rebeccapurple;
    }

input[type="password"]::placeholder {
    text-align: left;
}

::placeholder{
    text-align:center !important;
}

.changePassword-popup-content {
    overflow-y: auto;
    position: relative;
    top: 50%;
    width: 40%;
    text-align: center;
    background: #fff;
    box-shadow: 1px 1px 1px #b5ada7;
    transform: translateY(-50%);
    margin: auto;
    border-radius: 10px;
    padding: 16px;
}

.togglePassword_icon {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 20px;
}

.password_rules{
    color:grey;
    margin-bottom:12px;
    margin-top:10px;
}

.loading-overlay::after {
    content: url('/Content/Images/ajax-loader-sm.gif');
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
}
.loading-overlay-blur {
    filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
    -o-filter: blur(2px);
    pointer-events: none;
}}.RepeatedEmailOrPhone {
    border-color: red;
    border-width:1.5px;
}

input[type="password"].LogInPassword::placeholder {
    text-align: center;
}

.arrow {
    border: solid #636363;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 3px;
    position: relative;
    top: 3px;
}



    .arrow.up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

    .arrow.down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        top: -3px;
    }




.read-less, .read-more {
    border: 0px solid rgb(204, 204, 204);
    padding: 10px;
    margin: 0px auto 0px 50%;
    display: inline-block;
    left: -58px;
    position: relative;
    color: black;
}

.show-read-more .more-text {
    display: none;
}

.show-read-more {
    white-space: pre-line;
}


    @media (max-width: 767px) {
        .btn-span {
            flex-direction: column;
            align-items: center;
        }

        .btn {
            width: 100%;
            margin: 5px 0;
        }

        .guestRequiredLoginInfo {
            width: 90%;

        } 
    } 

@media only screen and (max-width: 600px) {
    .align-guest {
        width: 100%;
        display: inline-block;
    }

        .align-guest .btn-outline-secondary {
            display: inline-block;
            width: 90% !important;
            margin: 0px !important;
            margin-top: 10px !important;
            float: right;
        }

        .align-guest span:first-child {
            display: inline-block;
            width: 8% !important;
            margin: 0px !important;
            margin-top: 10px !important;
            text-align: left;
        }

        .align-guest.btn-black {
            width: 100% !important;
            margin: 0px !important;
        }
}