.mt-10{margin-top: 10px;}
.mt-15{margin-top: 15px;}
.mt-20{margin-top: 20px;}
.mb-15{margin-bottom: 15px;}
.ml-0{margin-left: 0px;}
.padding-zero{padding:0px !important;}
.padding-left-zero{padding-left: 0px !important;}
.padding-right-zero{padding-right:0px !important;}

.book-form label{font-weight: normal;}

.form-date {padding-right: 0;}
.form-email {padding-right: 0; margin-top: 15px;}
.form-nbr{margin-top: 15px;}
.book-form input {box-shadow: none; height: 40px;}
.book-form textarea{box-shadow: none;}
input#insert {background: #bd1010; border: 1px solid #bd1010; margin: 0 auto; display: block; text-align: center;}
form#insert_form {margin-bottom: 0;}

button.book-btn {/*background:#bd1010;border:0px;border-radius:50%;font-size:30px;padding:30px;width:100px;*/width:67px;background: #bd1010;border: 0px;border-radius: 50%;font-size: 30px;padding: 20px;right: 10px;bottom: 10px;height: 70px;line-height: 1;    z-index: 999;
}
button.book-btn-fixed{/*background:#bd1010;border:0px;border-radius:50%;font-size:20px;padding:20px;position:fixed;bottom:0;right:0;width:65px; margin: 10px 10px;*/background:#bd1010;border:0px;border-radius:50%;font-size:30px;padding:20px;position:fixed;right: 10px;bottom: 10px;    height:70px;line-height: 1;z-index: 999;}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: 0px auto -webkit-focus-ring-color; outline-offset: 0px;}
.form-reason select#readonList {height: 40px;padding-left: 10px;}
.form-reason {padding-right: 0;}


/*
.book-form input.chkVal {width: 40%; margin: 0px 10px; float: left;}
input.chkVal {width: 40%; margin: 0px 10px; float: left;}*/

.wrapper.head-wrap {padding: 15px 0;}
a.editAppointment {margin: 0px 3px 0px 0px; padding: 5px 6px; width: 32px; background: transparent; color: #337ab7; border: 0px;}
a.editAppointment:hover {border-radius: 50%;}
a.delete {margin: 0px 3px 0px 0px; padding: 5px 6px; width: 32px; background: transparent; color: #d9534f;  border: 0px;}
a.delete:hover {border-radius: 50%;} 

.days-select-sidebar {float: left; width: 100%; margin:0px;}
.days-select-sidebar .btn{width:auto;margin:0px 2px 2px 0px !important;border-radius:2px !important;float:left;border:1px solid #cce9ec;background:#fff; color:#333;padding: 5px 10px;transition: all 0.8s;min-width: 54px;}
.days-select-sidebar .btn:hover{
    border:1px solid #00BCD4;background: #fff !important;
}
.days-select-sidebar .btn.active{width:auto; margin:0px 2px 2px 0px !important;float:left;color:#ffffff;background:#00BCD4; border:1px solid #00BCD4;box-shadow:none;}
.days-select-sidebar .btn.active:hover{
    background:#00BCD4 !important;
}
select.emp-select {width:80px;height:34px;margin:2px 0px 0px 0px;background:#fff;outline:none;border:1px solid #cce9ec;padding:5px;}
select.emp-time-select {width:80px;height:34px;margin:0px 0px 0 2px;background:#fff;outline:none;border:1px solid #cce9ec;padding:5px;}

ul.nav-right-listing {padding:0;list-style:none;display:flex;align-items:flex-end;width:auto;float:right;}
ul.nav-right-listing  li {float:left;margin:0px 4px;}
.xdsoft_datetimepicker.xdsoft_.xdsoft_noselect {z-index: 99999999 !important;}
.sv-set{background:#72c576;border:1px solid #72c576; display:block;box-shadow:none;height:40px; font-size:14px;font-weight:400;line-height:1.42857143;color:#fff;padding:5px 15px;border-radius:4px; float:right;outline:none;
}
.emp-slot{/*padding:20px 10px;*/ padding:0px;border-radius:5px;float:left;width:100%;}
.emp-slot input {border-radius:0;box-shadow:none;border:1px solid #cce9ec;padding:5px 5px;}
.time-st-to {height: 34px;display: flex;align-items: center;justify-content:center;}
ul.nav-right-listing li a {border-radius: 2px;}
ul.nav-right-listing li a.main-prim{background: #00BCD4;border-color: #00BCD4;}
ul.nav-right-listing li a.main-prim:active{background: #00BCD4;border-color: #00BCD4;box-shadow: none;}
.days-select-sidebar .btn:active:focus, .days-select-sidebar .btn:active{background: #00BCD4;border: 1px solid #00BCD4;box-shadow: none;}
.days-select-sidebar .btn:first-child {margin-left: 0 !important;}


.dataTables_length {
    margin-bottom: 10px;
}
.dataTables_length label {
    margin-bottom: 0;
}
.dataTables_filter {
    margin-bottom: 10px;
}
.dataTables_filter label {
    margin-bottom: 0;
}
.dataTables_filter input {
    border: 1px solid #ddd;
    height: 30px;
    outline: none;
    padding: 5px;
}
.dataTables_length select {
    width: auto;
    height: 30px;
    margin: 0px 5px;
    background: #fff;
    outline: none;
    border: 1px solid #ddd;
    padding: 5px;
}

table.dataTable tbody tr.odd td {display:table-cell; color: #000;}

.table.table-striped > thead > tr > th {
    border-bottom-width: 0px;
    font-size: 12px;
    font-weight: 600;    
    text-align: center;
    vertical-align: middle;
    height: 35px;
}
table.dataTable thead th {
    border-right-width: 0;
    border-style: solid;
    border-color: #ddd !important;
}
table.dataTable thead th:first-child {
    border-left-width: 0px !important;
    background: none;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
    border: none !important;
}
table.dataTable thead th input[type="checkbox"] {
    opacity: 0;
}

table.dataTable tbody tr:hover {
    background-color: #f6f6f6;
}
th.sorting {
    text-align: center;
}
table.table td {
    text-align: center;
}
table.table-striped tr td:first-child {
    border-left: 0px solid !important;
}
table.dataTable tbody td {
    vertical-align: middle;
    border-width: 1px 0px 0px 1px !important;
    border-style: solid !important;
    border-color: #dedede !important;
    font-weight: 300;
    font-size: 12px;
}
table.dataTable tbody td [type="checkbox"] {
    opacity: 0;
}
table.dataTable.no-footer{
    border-bottom: 1px solid #ddd;
}
table.dataTable tbody td:last-child {
    /*display: flex;*/
    display: table-cell;
    align-items: center;
    justify-content: center;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {padding:5px 5px !important;}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #00BCD4 !important;
    border-color: #00BCD4 !important;
    color: #fff !important;
    padding: 2px 5px;
    text-align: center;
    font-size: 14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:focus{
    outline: none;box-shadow:none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #00BCD4 !important;
    border-color: #00BCD4 !important;
    color: #fff !important;
    padding: 2px 5px;
    text-align: center;
    font-size: 14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
    padding: 2px 8px;
    text-align: center;
    font-size: 14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
    background: #00BCD4 !important;
    border-color: #00BCD4 !important;
    color: #fff !important;
    padding: 2px 8px;
    text-align: center;
    font-size: 14px;
}

#insert_form .row {
    margin-left: 0;
    margin-right: 0;
}

.heading-section {float: left; width: 100%; padding-bottom: 9px; margin: 0px 0 20px; position: relative; height: 50px; margin-bottom: -40px; z-index: 99; width: 50%;}
.heading-section .page-header {margin: 0px; border-top: 0px solid #eee; padding: 10px 0px; border-bottom: 0; float: left; width: 100%;}

.dataTables_wrapper .dataTables_length {float: right !important; margin: 0px 10px;}

.heading-section .page-header h2{
    margin: 0px;
    /*margin: 0px 0 -80px 0;
    line-height: 75px;*/
}

button.warning-icon {
    width: auto;
    padding: 3px 9px;
    border: 0px;
}

button.success-icon {
    width: auto;
    padding: 3px 5px;
    text-align: center;
    border: 0px;
}
button.btn-warning {background: transparent; color: #f0ad4e;}
button.btn-success {background: transparent; color: #1c9a09;}
button.btn-danger {background: transparent; color: #d9534f;}


button.warning-icon:hover {background: #f0ad4e; color: #fff; border-radius: 50%; padding: 2px 9px;}
button.success-icon:hover {background: #449d44; color: #fff; border-radius: 50%; padding: 2px 5px;}
button.cancel-icon:hover {background: #d9534f; color: #fff; border-radius: 50%; padding: 2px 7px;}

button.cancel-icon {
    width: auto;
    padding: 3px 7px;
    border: 0px;
}

.emailsetting {width: 100%; float: left; padding:20px 0px; margin: 20px 0px; background: #ececec;}
.form-picking {
    margin-top: 15px;
    padding: 0px 15px 0px 0px;
}
.form-reason select#readonList {
    height: 40px;
    padding-left: 10px;
}
.form-reason {
    /*padding-right: 0;*/
    padding: 0px 15px 0px 0px;
}
.form-notes {
    padding-right: 15px;
    padding-left:5px;
}
.form-name {
    padding-left: 5px;
}
.form-email {
    padding-left:5px;
}
.form-date {
    padding-left:5px;
}



.table-container {
       position: relative;
    padding-left: 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
        margin-bottom: 0;
        /*float: left;*/
        left: -3px;
        top: -2px;
}
table.dataTable thead th:first-child label.table-container {
    top: 0;
}
.table-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
}
.table-container input:checked ~ .table-checkmark {
    background-color: #2196F3;
}

.table-container .table-checkmark:after {
    left: 5px;
    top: 3px;
    width: 5px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.table-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.table-container input.checkbox {
    margin: 0px;
    float: left;
}

.table-container input:checked ~ .table-checkmark:after {display: block;}
table.dataTable thead th:first-child span.table-checkmark {top:0px;}
table.table-striped tr td {vertical-align: middle !important; font-family: sans-serif;}
.emp-slot-row label {margin-bottom: 0;}
.addRow-action .addRow {float: left;height: 40px;padding: 6px 15px;font-size: 22px;line-height: 22px;margin-right: 10px;}
.addRow-action .sv-set {float: left;}

.st-flex {
    /*height: 34px;
    height:auto;*/
    display: flex;
    align-items: center;
    justify-content: left;
    text-transform: uppercase;
    font-weight: normal;
}
.timeslot-view-select .timeslot-view {
    line-height: 25px;
    width: auto;
    margin: 0px 10px 0px 0px;
}
.btn-group.days {
    /*margin-left: 0px;*/margin-left: 0px;
}
.po-slot{margin-bottom: 10px;}
.appendWrap {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px 10px;
    margin: 0px 0px 20px 0%;
    background:#ececec;
}
.appendWrap-append {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px 20px;
    margin: 0px 0px 2px 0%;
    background:#f4f4f4;
}
.appendWrap-append:nth-child(odd) {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px 20px;
    margin: 0px 0px 2px 0%;
    background:#ffffff;
}
.emp-slot-row {
    float: left;
    width: 100%;
}

.ck-blurred.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline {
    min-height: 200px;
}
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused {
    min-height: 200px;
}

.appendWrap.time-appended-view {background: #f4f4f4;}


@media only screen and (min-width: 1601px) {
    table.table-striped tr td:first-child {
        /*border-left: 1px solid #dedede !important;*/
    }
    table.dataTable tbody td:last-child{
        /*border-right: 1px solid #dedede !important;*/
    }
    table.table-striped tr:last-child td{
        /*border-bottom: 1px solid #dedede !important;*/
    }


}

@media only screen and (min-width: 1291px) and (max-width: 1400px) {
    .timeslot-view-select .col-xs-12 {/*width: 100%;*/padding-left: 0;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: auto;;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    /*.emply-st-view select.emp-select {width: 100%;}*/
    .timeslot-view-select {/*width: 25%;*/}
    .timeslot-view-select .timeslot-view-select {width: 35%;}
    div.timeslot-select-view {padding-left: 0px !important;}
    .days-select-sidebar .col-xs-12.col-sm-12 {padding-left: 0;}
    .days-select-sidebar .btn{width: auto;}
    /*.set-time {width: 22%;}*/
    label.disabled-month {width: 160px;}
    .po-slot.appendWrap {margin-bottom: 20px;}

    .set-time-view {width: 40%;}
    .time-st-to {width: 20%;}
    .set-time-setting {width: 40%;}

}

@media only screen and (min-width: 1181px) and (max-width: 1290px) {
    .timeslot-view-select .col-xs-12 {/*width: 100%;*/padding-left: 0;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: auto;;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    /*.emply-st-view select.emp-select {width: 100%;}*/
    .timeslot-view-select {/*width: 25%;*/}
    .timeslot-view-select .timeslot-view-select {width: 35%;}
    div.timeslot-select-view {padding-left: 0px !important;}
    .days-select-sidebar .col-xs-12.col-sm-12 {padding-left: 0;}
    .days-select-sidebar .btn{width: auto;}
    /*.set-time {width: 22%;}*/
    label.disabled-month {width: 160px;}
    .po-slot.appendWrap {margin-bottom: 20px;}

    .time-to-set {width: 25%;}
    .set-to-days {width: 55%;}
    .em-dt-vi {width: 20%;}

}

@media only screen and (min-width: 1041px) and (max-width: 1180px) {
    
    .timeslot-view-select .col-xs-12 {/*width: 100%;*/padding-left: 0;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: auto;;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .emply-st-view select.emp-select {/*width: 100%;*/margin: 2px 0px 0px 0px;padding: 0px;}
    .timeslot-view-select {/*width: 33%;*/}
    .timeslot-view-select .timeslot-view-select {width: 35%;}
    .days-select-sidebar .col-xs-12.col-sm-12 {padding-left: 0;}
    .days-select-sidebar .btn{width: auto;}
    .set-time {width: 100%;}
    label.disabled-month {width: 175px;}
    .po-slot.appendWrap {margin-bottom: 20px;}
    /*****************Appointment List****************/
    div.heading-section {margin: 0;width: 40%;}
    .heading-section .changest-wrap {float: left !important;position: relative;top: 14px;}

    div.emply-view.emply-st-view {width: 100%;}
    div.empy-dlt.emply-st-view {margin-left: 1px;}
    div.empy-dlt.emply-st-view a.btn.btn-danger {/*padding: 8px 8px !important;*/}

    .time-to-set {width: 25%;}
    .set-to-days {width: 55%;}
    .em-dt-vi {width: 20%;}

    .set-time-view {width: 40%;}
    .time-st-to {width: 20%;}
    .set-time-setting {width: 40%;}

}

@media only screen and (min-width: 1024px) and (max-width: 1040px) {
    /*.set-time {width: 24%;}*/
    .timeslot-view-select .col-xs-12 {/*width: 100%;*/padding-left: 0;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: auto;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .emply-st-view select.emp-select {/*width: 100%;*/margin: 2px 0px 0px 0px;padding: 0px;}
    .timeslot-view-select {/*width: 33%;*/}
    .timeslot-view-select .timeslot-view-select {width: 35%;}
    .days-select-sidebar .col-xs-12.col-sm-12 {padding-left: 0;}
    .days-select-sidebar .btn{width: auto;}

    .set-time {width: 100%;}
    label.disabled-month {width: 190px;}
    .po-slot.appendWrap {margin-bottom: 20px;}
    /*****************Appointment List****************/
    div.heading-section {margin: 0;width: 40%;}
    .heading-section .changest-wrap {float: left !important;position: relative;top: 14px;}

    div.emply-view.emply-st-view {width: 100%;}
    div.empy-dlt.emply-st-view {margin-left: 7px;width: auto;}
    div.empy-dlt.emply-st-view a.btn.btn-danger {/*padding: 8px 8px !important;*/}
    .emply-st-view label {font-size: 13px;}


    .time-to-set {width: 25%;}
    .set-to-days {width: 55%;}
    .em-dt-vi {width: 20%;}

    .set-time-view {width: 40%;}
    .time-st-to {width: 20%;}
    .set-time-setting {width: 40%;}

}

@media only screen and (min-width: 991px) and (max-width: 1023px) {
    /*.set-time {width: 24%;}*/
    .timeslot-view-select .col-xs-12 {/*width: 100%;*/padding-left: 0;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: auto;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .emply-st-view select.emp-select {/*width: 100%;*/margin: 2px 0px 0px 0px;padding: 0px;}
    .timeslot-view-select {/*width: 33%;*/}
    .timeslot-view-select .timeslot-view-select {width: 35%;}
    .days-select-sidebar .col-xs-12.col-sm-12 {padding-left: 0;}
    .days-select-sidebar .btn{width: auto;}

    .set-time {width: 100%;}
    label.disabled-month {width: 190px;}
    .po-slot.appendWrap {margin-bottom: 20px;}
    /*****************Appointment List****************/
    div.heading-section {margin: 0;width: 40%;}
    .heading-section .changest-wrap {float: left !important;position: relative;top: 14px;}

    div.emply-view.emply-st-view {width: 100%;}
    div.empy-dlt.emply-st-view {margin-left: 7px;width: auto;}
    div.empy-dlt.emply-st-view a.btn.btn-danger {/*padding: 8px 8px !important;*/}
    .emply-st-view label {font-size: 13px;}
    div.timeslot-select-view {/*padding-left: 10px !important;*/}



    .time-to-set {width: 25%;}
    .set-to-days {width: 55%;}
    .em-dt-vi {width: 20%;}

    .set-time-view {width: 40%;}
    .time-st-to {width: 20%;}
    .set-time-setting {width: 40%;}


}

@media only screen and (min-width: 971px) and (max-width: 990px) {
    /*.set-time {width: 24%;}*/
    .timeslot-view-select .col-xs-12 {/*width: 100%;*/padding-left: 0;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: auto;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .emply-st-view select.emp-select {/*width: 100%;*/margin: 2px 0px 0px 0px;padding: 0px;}
    .timeslot-view-select {width: 100%;}
    .timeslot-view-select .timeslot-view-select {width: auto;}
    .days-select-sidebar .col-xs-12.col-sm-12 {padding-left: 0;}
    .days-select-sidebar .btn{width: auto;}
    .timeslot-view-select .time-slot-lf {width:22%;}
    .timeslot-view-select .time-slot-rt {width: 75%;}
    .time-to-set {width:40%;}
    .set-time {width: 100%;}
    .time-to-set .set-time-view {/*width: 22%;*/}
    .time-to-set .time-st-to {/*width: 9%;*/}
    .set-to-days label {width: 30%;}
    .time-to-set .set-time-setting {/*width: 22%;*/}
    .set-to-days {width: 40%;}
    .em-dt-vi {width: 20%;}
    label.disabled-month {width: 200px;}
    .po-slot.appendWrap {margin-bottom: 40px;}
    .set-to-days .days-select-sidebar label {width: auto;}
    .set-to-days .days-select-sidebar .btn-group.days{width: 100%;margin-bottom: 10px;}
    div.appendWrap {margin-bottom: 20px;}
    /*****************Appointment List****************/
    div.heading-section {margin: 0;width: 40%;}
    .heading-section .changest-wrap {float: left !important;position: relative;top: 14px;}

    div.emply-view.emply-st-view {width: 100%;}
    div.empy-dlt.emply-st-view {margin-left: 10px;width: auto;}
    div.empy-dlt.emply-st-view a.btn.btn-danger {/*padding: 8px 8px !important;*/}
    .emply-st-view label {font-size: 13px;}
    .timeslot-view-select .time-slot-lf div.timeslot-select-view { padding-left: 10px !important;width:35%;}
    .timeslot-view-select .time-slot-lf div.timeslot-select-view select.emp-time-select {width: 100%;}


    .time-slot-rt {padding-left: 0;margin-top: 10px;}
    .timeslot-view-select {margin-top: 6px;}

     .time-to-set {width: 25%;}
    .set-to-days {width: 55%;}
    .em-dt-vi {width: 20%;}

    .set-time-view {width: 40%;}
    .time-st-to {width: 20%;}
    .set-time-setting {width: 40%;}

}

@media only screen and (min-width: 841px) and (max-width: 970px) {
    /*.set-time {width: 24%;}*/
    .timeslot-view-select .col-xs-12 {/*width: 100%;*/padding-left: 0;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: auto;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .emply-st-view select.emp-select {/*width: 100%;*/margin: 2px 0px 0px 0px;padding: 0px;}
    .timeslot-view-select {width: 100%;}
    .timeslot-view-select .timeslot-view-select {width: auto;}
    .days-select-sidebar .col-xs-12.col-sm-12 {padding-left: 0;}
    .days-select-sidebar .btn{width: auto;}
    .timeslot-view-select .time-slot-lf {width:22%;}
    .timeslot-view-select .time-slot-rt {width: 75%;}
    .time-to-set {width:40%;}
    .set-time {width: 100%;}
    .time-to-set .set-time-view {/*width: 25%;*/}
    .time-to-set .time-st-to {/*width: 9%;*/}
    .set-to-days label {/*width: 30%;*/}
    .time-to-set .set-time-setting {/*width: 25%;*/}
    .set-to-days {width: 40%;}
    .em-dt-vi {width: 20%;}
    label.disabled-month {width: 240px;}
    .po-slot.appendWrap {margin-bottom: 40px;}
    .set-to-days .days-select-sidebar label {width: 30%;}
    .set-to-days .days-select-sidebar .btn-group.days{width: 70%;margin-bottom: 10px;}
    div.appendWrap {margin-bottom: 20px;}
   /*****************Appointment List****************/
    div.heading-section {margin: 0;width: 40%;}
    .heading-section .changest-wrap {float: left !important;position: relative;top: 14px;}

    div.emply-view.emply-st-view {width: 100%;}
    div.empy-dlt.emply-st-view {margin-left: 10px;width: auto;}
    div.empy-dlt.emply-st-view a.btn.btn-danger {/*padding: 8px 8px !important;*/}
    .emply-st-view label {font-size: 13px;}
    .timeslot-view-select .time-slot-lf div.timeslot-select-view { padding-left: 10px !important;width:35%;}
    .timeslot-view-select .time-slot-lf div.timeslot-select-view select.emp-time-select {width: 100%;}


    .time-slot-rt {padding-left: 0;margin-top: 10px;}
    .timeslot-view-select {margin-top: 6px;}

     .time-to-set {width: 25%;}
    .set-to-days {width: 55%;}
    .em-dt-vi {width: 20%;}

    .set-time-view {width: 40%;}
    .time-st-to {width: 20%;}
    .set-time-setting {width: 40%;}

    div.emply-view.emply-st-view .col-xs-12 {padding: 0;}
    div.emply-view.emply-st-view .col-xs-12.col-sm-8 { width: auto;}

}




@media only screen and (max-width: 991px){
    div.form-date{padding-right:15px;}
    div.form-email{padding-right:15px;}
    div.form-time {margin-top: 15px;}
    div.form-reason {padding-right:15px;}

}


@media only screen and (min-width: 768px) and (max-width: 840px) {
    .time-to-set {/*width:45%;*/ width:100%; padding-right: 0;order: 1;}
    /*.set-time {width: 23%;}*/
    .timeslot-select-view {width: 20%;}
    .set-time-view{width: 30%;}
    .time-st-to{width: 12%;}
    .set-time-setting{width: 30%;}
    .timeslot-view-select .col-xs-12 {width: 100%;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: 12%;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .timeslot-select-view { width: 20%;}
    .set-to-days {width: 100%;padding-left: 15px !important;    margin-top: 15px;}
    .emply-st-view {width: auto;order: 2;}
    .days-select-sidebar label {width: 11%;}
    .appendWrap {float: left;width: 100%;display: flex;flex-wrap: wrap-reverse;}

    /*****************Appointment List****************/
    div.heading-section {margin: 0;width: 40%;}
    .heading-section .changest-wrap {float: left !important;position: relative;top: 24px;}
    .heading-section .page-header {padding-top: 0;}

}

@media only screen and (min-width:641px) and (max-width: 767px) {
    .time-to-set {/*width:45%;*/ width:100%; padding-right: 0;order: 1;}
    /*.set-time {width: 27%;}*/
    .timeslot-select-view {width: 20%;}
    .set-time-view{width: 30%;}
    .time-st-to{width: 12%;}
    .set-time-setting{width: 30%;}
    .timeslot-view-select .col-xs-12 {width: 100%;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: 15%;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .timeslot-select-view { width: 20%;}
    .set-to-days {width: 100%;padding-left: 15px !important;    margin-top: 15px;}
    .emply-st-view {width: auto;order: 2;}
    .days-select-sidebar label {width: 13%;}
    .appendWrap {float: left;width: 100%;display: flex;flex-wrap: wrap-reverse;}

}

@media only screen and (min-width:581px) and (max-width: 640px) {
    .time-to-set {width:50%;padding-right: 0;order: 1;}
   /* .set-time {width: 27%;}*/
    .timeslot-select-view {width: 20%;}
    .set-time-view{width: 30%;}
    .time-st-to{width: 12%;}
    .set-time-setting{width: 30%;}
    .timeslot-view-select .col-xs-12 {width: 100%;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: 16%;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .timeslot-select-view { width: 20%;}
    .set-to-days {width: 100%;padding-left: 15px !important;    margin-top: 15px;}
    .emply-st-view {width: auto;order: 2;}
    .days-select-sidebar label {width: 14%;}
    .appendWrap {float: left;width: 100%;display: flex;flex-wrap: wrap-reverse;}

}
@media only screen and (max-width: 580px) {
    .time-to-set {width:60%;padding-right: 0;order: 1;}
    /*.set-time {width: 27%;}*/
    .timeslot-select-view {width: 20%;}
    .set-time-view{width: 30%;}
    .time-st-to{width: 12%;}
    .set-time-setting{width: 30%;}
    .timeslot-view-select .col-xs-12 {width: 100%;}
    .timeslot-view-select .col-xs-12 .timeslot-view {width: 19%;}
    .days-select-sidebar {padding-left: 0;padding-right: 0;}
    .timeslot-select-view { width: 30%;}
    .set-to-days {width: 100%;padding-left: 15px !important;    margin-top: 15px;}
    .emply-st-view {width: auto;order: 2;}
    .days-select-sidebar label {width: 18%;}
    .appendWrap {float: left;width: 100%;display: flex;flex-wrap: wrap-reverse;}
    .btn-group.days {margin-left: 4px;}

}


.book-form input[readonly] {background: #f0dddd;}
table.dataTable thead th:nth-child(2) {min-width: 35px;}
.days-select-sidebar .btn.disabled {cursor: pointer;}

table.table-striped tr td:first-child{/*display:flex !important;*/align-items:center;justify-content:center;min-height:32px;min-width: 30px;}

table.table-striped tr td .table-container{top: 1px;}

button.btn {outline: none !important;}

.st-btn{background: transparent;border: none !important;}
.st-btn:active{box-shadow:none !important;}
.heading-section .appoint-head {width: auto;}
.appoint-head h2.pull-left {margin-right: 25px;font-size: 23px;}

.text-danger {
    color: #da4947 !important;
}
.text-warning {
    color: #f1b143 !important;
}
.text-success {
    color: #449a45 !important;
}
.heading-section .appoint-head button.btn {
    background: #00BCD4;
    color: #fff;
    border: 1px solid #00BCD4;
    border-radius: 2px;
}
.heading-section .appoint-head button.btn:active{box-shadow:none !important;}

table.table-striped tr td a.editAppointment {
    width: 30px;
    height: 30px;
    line-height: 20px;
    text-align: center;
}
table.table-striped tr td a.delete{
    width: 30px;
    height: 30px;
    line-height: 20px;
    text-align: center;
    margin-right: 0;
}
div.dropdown-menu .dropdown-anchor{
    border: 7px solid #afafaf;
}
.dropdown-menu ul li>a:not(.grey):hover, .dropdown-menu ul li>a:hover, .dropdown-menu ul li label:not(.grey):hover, .dropdown-menu ul li label:hover {
    background: #00BCD4 !important;
}

.po-slot.appendWrap {
    border: none;
}
table.dataTable tbody tr td.notes-txt {
   min-width: 177px;
    max-width: 180px;
}
table.dataTable thead th.status-btns{
    width: 95px;
    min-width: 95px;
    max-width: 95px;
}
table.dataTable tbody tr td.status-btns{
    width: 95px;
    min-width: 95px;
    max-width: 95px;
}
.fc-time-grid .fc-slats td {
    height: 108px !important;
    min-height: 108px;
}
.fc-event-container a.fc-time-grid-event.fc-event {
    width: 100%;
    float: left;
    bottom: 0 !important;
    position: relative;
    left: 0 !important;
    margin: 3px auto !important;
}
.fc-event-container a.fc-time-grid-event.fc-event .fc-content {
    float: left;
    width: 100%;
}
.fc-event-container a.fc-time-grid-event.fc-event .fc-content .fc-time {
    float: left;
    margin-right: 5px;margin-top: 2px;
}
.fc-event-container a.fc-time-grid-event.fc-event .fc-content .fc-title {
    /*float: left;*/white-space: nowrap;
    overflow: hidden;
}
.changest-wrap ul li a {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.changest-wrap ul li a i {
   width: 23px;
    text-align: center;
    border: 1px solid;
    border-radius: 50px;
    height: 23px;
    line-height: 22px;
}
.status-btns ul li a {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.status-btns ul li a i {
    width: 23px;
    text-align: center;
    border: 1px solid;
    border-radius: 50px;
    height: 23px;
    line-height: 22px;
}
.status-btns .btn {
    position: relative;
    padding-left: 0;
    min-width: 81px;
}
.status-btns .btn:before {
    content: "\f0dd";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right: 0;
}
.status-btns .btn.dropdown-open:before {
    content: "\f0de";
    top: 12px;
}
.slct-emply select.emp-select{width: 100%;}
button.main-prim {
    background: #00BCD4;
    border-color: #00BCD4;
    margin-left: 6px;
    border-radius: 2px;
}
button.main-prim {
    margin-bottom: 5px;
}
button.main-prim:active {
    background: #00BCD4;
    border-color: #00BCD4;
    box-shadow: none;
}
button.main-prim:focus {
    background: #00BCD4;
    border-color: #00BCD4;
    box-shadow: none;
}
button.main-prim:hover {
    background: #00BCD4;
    border-color: #00BCD4;
    margin-left: 6px;
    border-radius: 2px;
}
button.main-prim:active:hover{
    background: #00BCD4;
    border-color: #00BCD4;
    box-shadow: none;
}
.main-prim.calender-appointment {
    position: absolute;
    left: 9px;
    top: -40px;
}
/***********************************/
.emply-view.emply-st-view {
    width: 100%;
    float: left;
}
.empy-dlt.emply-st-view {
    width: 20%;
    float: left;
    justify-content: center;
    margin-top: 0px;
}
.time-to-set label {
    margin-bottom: 0;
}
.set-to-days label {
    margin-bottom: 0;
}
.emply-st-view label {
    margin-bottom: 0;
}
.timeslot-view-select label {
    margin-bottom: 0;
}
.days-select-sidebar.disabled-months .btn{
    border:1px solid rgba(253, 203, 203, 0.7098039215686275);
}
.days-select-sidebar.disabled-months .btn:hover{
    border: 1px solid rgba(255, 65, 65, 0.7098039215686275);
}
.days-select-sidebar.disabled-months .btn.active {
    background: rgba(255, 65, 65, 0.7098039215686275);
    border: 1px solid rgba(255, 65, 65, 0.7098039215686275);
}
.days-select-sidebar.disabled-months .btn.active:hover {
    background: rgba(255, 65, 65, 0.7098039215686275) !important;
    border: 1px solid rgba(255, 65, 65, 0.7098039215686275);
}
.timeslot-select-view {
   /* padding-left: 5px !important;*/
}
div.empy-dlt.emply-st-view a.btn.btn-danger {
    padding: 5px 11px;
}
.addRow-action {
    padding: 10px 6px 13px;
}
.main-prim.calender-appointment {
    position: absolute;
    left: 9px;
    top: -40px;
}
button.main-prim {
    background: #00BCD4;
    border-color: #00BCD4;
    margin-left: 6px;
    border-radius: 2px;
}
button.main-prim:hover {
    background: #00BCD4;
    border-color: #00BCD4;
    margin-left: 6px;
    border-radius: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px 5px !important;
}
td.status-btns span {
    cursor: pointer;
}
.logDataWrapper {
    padding: 0px 1px 0px;
    font-size: 12px;
    font-weight: 300;
    text-transform: capitalize;
    color: #2d2d2d;
    width: 200px;
    float: left;
   /* max-height: 300px;
    overflow-y: scroll;
    height: 300px;*/
}

.logDataInner {
    float: left;
    width: 100%;
    margin: 0px 0px 5px;
    border-bottom: 1px solid #ccc;
    padding: 0px 10px 5px;
}
.logDataInner:last-child {
    border-bottom: 0px;
    margin-bottom: 0px;
    padding-bottom: 0;
}

td.status-btns span:hover {
    color: red;
}
td.status-btns .logDataInner span:hover {
    color: #2d2d2d;
}