* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.btn-link:hover {
    text-decoration: none !important;
}

.btn-link.focus,
.btn-link:focus {
    text-decoration: none !important;
}

.accordion p b {
    font-weight: bolder;
}

:root {
    /* -------------btn info------------------- */
    --btn-light-blue: #0dceec;
    --btn-light-blue-border: #0dceec;
    --btn-light-blue-color: #fff;
    --btn-light-blue-hover: #138496;
    --btn-light-blue-border-hover: #117a8b;
    --btn-light-blue-hover-color: #fff;
    /* -------------btn primary------------------ */
    --btn-blue: #008cff;
    --btn-blue-border: #008cff;
    --btn-blue-color: #fff;
    --btn-blue-hover: #0069d9;
    --btn-blue-border-hover: #0062cc;
    --btn-blue-hover-color: #fff;
    /* -------------gradient btn------------- */
    --btn-purpink-bg: #7f00ff;
    --btn-purpink-color: #fff;
    --btn-purpink: linear-gradient(45deg, #7f00ff, #e100ff);
    --btn-purpink-webkit: -webkit-linear-gradient(45deg, #7f00ff, #e100ff);
    --btn-purpink-hover: linear-gradient(45deg, #e100ff, #7f00ff);
    --btn-purpink-webkit-hover: -webkit-linear-gradient(45deg, #e100ff, #7f00ff);
    /* -------------.btn-success------------- */
    --btn-success: #15ca20;
    --btn-success-border: #15ca20;
    --btn-success-color: #fff;
    --btn-success-hover: #218838;
    --btn-success-border-hover: #1e7e34;
    --btn-success-hover-color: #fff;
    --btn-save-action-color: #fff;
    /* -------btn add note--------------- */
    --add-note: #223035;
    --add-note-border: #223035;
    --add-note-color: #fff;
    --add-note-hover: #23272b;
    --add-note-border-hover: #1d2124;
    --add-note-hover-color: #fff;
    /* -------btn danger--------------- */
    --btn-danger: #fd3550;
    --btn-danger-border: #fd3550;
    --btn-danger-color: #fff;
    --btn-danger-hover: #c82333;
    --btn-danger-border-hover: #bd2130;
    --btn-danger-hover-color: #fff;
    /* --------------btn-warning------------------ */
    --btn-warning: #ff9700;
    --btn-warning-border: #ff9700;
    --btn-warning-color: #fff;
    --btn-warning-hover: #e0a800;
    --btn-warning-border-hover: #d39e00;
    --btn-warning-hover-color: #fff;
    /* -----------btn white------------- */
    --btn-white: rgba(233, 234, 234, 0.2);
    --btn-white-border: rgb(251, 251, 251);
    --btn-white-color: #a7aaaa;
    --btn-white-hover: rgba(233, 234, 234, 0.2);
    --btn-white-border-hover: rgba(233, 234, 234, 0.2);
    --btn-white-hover-color: #a7aaaa;
    /* -------------action btn------------------ */
    --btn-action: rgba(94, 44, 156, 1);
    --btn-action-border: 0 none;
    --btn-action-color: white;
    --btn-action-hover: 0 0 0 2px white, 0 0 0 3px rgba(94, 44, 156, 1);
    --btn-save-action-hover: 0 0 0 2px white, 0 0 0 3px #3bcf56;
    /* ------------badge danger---------------- */
    --badge-danger: #fd3550;
    --badge-danger-color: #fff;
    /* ------------badge primary---------------- */
    --badge-primary: #008cff;
    --badge-primary-color: #fff;
    /* ------------badge warning---------------- */
    --badge-warning: #ff9700;
    --badge-warning-color: #fff;
    /* ------------badge success---------------- */
    --badge-success: #15ca20;
    --badge-success-color: #fff;
    /* ------------badge info---------------- */
    --badge-info: #0dceec;
    --badge-info-color: #fff;
    --badge-info-hover: #117a8b;
    --badge-info-hover-color: #fff;
    /* -----------span active-------------- */
    --span-sactive: green;
    /* -----------span inactive-------------- */
    --span-inactive: #828282;
    /* -----------span suspended-------------- */
    --span-suspended: #fdba09;
    /* -----------span blocked-------------- */
    --span-blocked: #fd3109;
    /* ----filter tab active------------- */
    --filter-tab-active: linear-gradient(87deg, #ab67ec 0, #7659ff 100%);
    --filter-tab-color: #fff;
    --filter-tab-color-hover: #fff;
    --filter-tab-hover: linear-gradient(87deg, #ab67ec 0, #7659ff 100%);
    /* ------------------nav-tabs------------- */
    --nav-bg: #24214c;
    --export-hover: #434069;
    --export-bg: #24214c;
}

.filter-opt a.active {
    color: var(--filter-tab-color);
    background: var(--filter-tab-active);
}

.filter-opt a:hover {
    color: var(--filter-tab-color-hover);
    background: var(--filter-tab-hover);
}

#msform .action-button {
    background: var(--btn-action);
    color: var(--btn-action-color);
    border: var(--btn-action-border);
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: var(--btn-action-hover);
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    box-shadow: var(--btn-action-hover);
}

#msform .save-action-button {
    color: var( --btn-save-action-color);
}

#msform .save-action-button:hover,
#msform .save-action-button:focus {
    box-shadow: var(--btn-save-action-hover);
}

.badge-info {
    color: var(--badge-info-color);
    background-color: var(--badge-info);
}

.badge-info[href]:focus,
.badge-info[href]:hover {
    color: var(--badge-info-hover-color);
    background-color: var(--badge-info-hover);
}

.badge-success {
    color: var(--badge-success-color);
    background-color: var(--badge-success);
}

.badge-warning {
    color: var(--badge-warning-color);
    background-color: var(--badge-warning);
}

.badge-primary {
    color: var(--badge-primary-color);
    background-color: var(--badge-primary);
}

.badge-danger {
    color: var(--badge-danger-color);
    background-color: var(--badge-danger);
}

.gradient-purpink {
    background: var(--btn-purpink-bg);
    background: var(--btn-purpink-webkit);
    background: linear-gradient(45deg, #1e112b, #540c66);
    color: var(--btn-purpink-color);
}

.gradient-purpink:hover {
    background: var(--btn-purpink-hover);
    background: -webkit-linear-gradient(45deg, #221030, #291037);
    transition: 0.7;
    -webkit-transition: 0.7s;
}

.btn-inverse-light {
    color: var(--btn-white-color);
    background-color: var(--btn-white);
    border-color: var(--btn-white-border);
}

.btn-inverse-light:hover {
    color: var(--btn-white-hover-color);
    background-color: var(--btn-white-hover);
    border-color: var(--btn-white-border-hover);
}

.btn-warning {
    color: var(--btn-warning-color);
    background-color: var(--btn-warning);
    border-color: var(--btn-warning-border);
}

.btn-warning:hover {
    color: var(--btn-warning-hover-color);
    background-color: var(--btn-warning-hover);
    border-color: var(--btn-warning-border-hover);
}

span.sinactive {
    background: var(--span-inactive);
}

span.ssuspended {
    background: var(--span-suspended);
}

span.sactive {
    background-color: var(--span-sactive);
}

span.sblocked {
    background: var(--span-blocked);
}

.btn-danger {
    color: var(--btn-danger-color);
    background-color: var(--btn-danger);
    border-color: var(--btn-danger-border);
}

.btn-danger:hover {
    color: var(--btn-danger-hover-color);
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-border-hover);
}

.btn-info {
    color: var(--btn-light-blue-color);
    background-color: var(--btn-light-blue);
    border-color: var(--btn-light-blue-border);
}

.btn-info:hover {
    color: var(--btn-light-blue-hover-color);
    background-color: var(--btn-light-blue-hover);
    border-color: var(--btn-light-blue-border-hover);
}

.btn-primary {
    color: var(--btn-blue-color);
    background-color: #000;
    border-color: #000;
}

.btn-primary:hover {
    color: var(--btn-blue-hover-color);
    background-color: #000;
    border-color: #000;
}

.btn-success {
    color: var(--btn-success-color);
    background-color: var(--btn-success);
    border-color: var(--btn-success-border);
}

.btn-success:hover {
    color: var(--btn-success-hover-color);
    background-color: var(--btn-success-hover);
    border-color: var(--btn-success-border-hover);
}

.btn-dark {
    color: var( --add-note-color);
    background-color: var(--add-note);
    border-color: var(--add-note-border);
}

.btn-dark:hover {
    color: var(--add-note-hover-color);
    background-color: var(--add-note-hover);
    border-color: var(--add-note-border-hover);
}


/* ------------------registration--------------------- */

.registration-header {
    background-image: url(../images/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.registration-header-bg {
    background-color: rgba(94, 44, 156, 0.7);
    padding-top: 40px;
    padding-bottom: 90px;
    text-align: center;
}

.reg-name-title h3 {
    padding-bottom: 10px;
    color: white;
}

.reg-hed-title h4 {
    font-size: 20px;
    font-weight: normal;
    padding-left: 10%;
    color: white;
    padding-right: 10%;
}

.reg_box {
    position: relative;
    top: -30px;
    background-color: white;
    box-shadow: 0 2px 6px 0 rgba(218, 218, 253, 0.65), 0 2px 6px 0 rgba(206, 206, 238, 0.54);
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

.my-reg-box {
    position: relative;
    top: -40px;
}

#msform {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

#msform fieldset .form-card {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 20px 40px 30px 40px;
    box-sizing: border-box;
    width: 94%;
    margin: 0 3% 20px 3%;
    /*stacking fieldsets above each other*/
    position: relative;
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    /*stacking fieldsets above each other*/
    position: relative;
}


/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
    display: none;
}

#msform fieldset .form-card {
    text-align: left;
    color: #9e9e9e;
}

#msform input,
#msform textarea,
select {
    padding: 0px 8px 4px 8px;
    border: none;
    border-bottom: 1px solid rgb(87, 86, 86);
    border-radius: 0px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    color: #2c3e50;
    font-size: 13px;
    letter-spacing: 1px;
}

.myselect {
    border: none;
    border-bottom: 1px solid rgb(87, 86, 86) !important;
    border-radius: 0;
    color: #2c3e50;
    font-family: "Roboto", sans-serif;
    padding: 0px 4px 4px 4px !important;
    font-size: 13px !important;
}

.file-custom input {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
}

.custom-file-label {
    /* font-family: "Roboto", sans-serif; */
    font-size: 13px;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: none;
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none;
    font-weight: bold;
    border-bottom: 2px solid skyblue;
    outline-width: 0;
}


/*Blue Buttons*/

#msform .action-button {
    width: 100px;
    font-weight: bold;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    float: right;
    margin-right: 100px;
}


/*Previous Buttons*/

#msform .action-button-previous {
    width: 100px;
    background: rgba(94, 44, 156, 1);
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    float: left;
    margin-left: 100px;
}

#msform .delete-btn {
    width: 300px;
    background: rgba(94, 44, 156, 1);
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    float: left;
    margin-left: 100px;
}

#msform .save-action-button {
    width: 150px;
    /* background: #3bcf56; */
    font-weight: bold;
    border: 0 none;
    /* color: white; */
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    float: right;
    margin-right: 20px;
}

#msform .delete-btn:hover,
#msform .delete-btn:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(94, 44, 156, 1);
}

.card {
    z-index: 0;
    border: none;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}


/*FieldSet headings*/

.fs-title {
    font-size: 25px;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left;
}


/*progressbar*/

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: gray;
    padding-left: 10px;
    padding-right: 10px;
}

#progressbar .active {
    color: rgba(94, 44, 156, 0.7);
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    width: 16.6%;
    float: left;
    position: relative;
}


/*Icons in the ProgressBar*/

#progressbar #account:before {
    font-family: FontAwesome;
    content: "\f023";
}

#progressbar #personal:before {
    font-family: FontAwesome;
    content: "\f007";
}

#progressbar #payment:before {
    font-family: FontAwesome;
    content: "\f09d";
}

#progressbar #bansi:before {
    font-family: FontAwesome;
    content: "\f09d";
}

#progressbar #last:before {
    font-family: FontAwesome;
    content: "\f00c";
}


/*ProgressBar before any progress*/

#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 18px;
    color: rgb(53, 51, 51);
    background: rgba(94, 44, 156, 0.3);
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
}


/*ProgressBar connectors*/

#progressbar li:after {
    content: "";
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1;
}


/*Color number of the step and the connector before it*/

#progressbar li.active:before,
#progressbar li.active:after {
    background: rgba(94, 44, 156, 0.7);
    color: white;
}


/*Fit image in bootstrap div*/

.fit-image {
    width: 100%;
    object-fit: cover;
}

.step-title h4 {
    padding-bottom: 20px;
    font-size: 24px;
    color: rgba(94, 44, 156, 1);
}


/* ---------------------------first step------------------------------ */

.licence {
    padding-top: 30px;
}

.form-control:disabled {
    background-color: transparent;
}

.f-control {
    margin-left: 15px;
}

.file-custom {
    padding-top: 30px;
}

.custom-file-label::after {
    background-color: rgba(233, 236, 239, 1);
    padding-left: 20px;
    padding-right: 20px;
    color: #495057;
    border-left: 1px solid #ced4da;
    border-radius: 0 0.25rem 0.25rem 0;
}

textarea {
    resize: none;
}


/* ---------------------profile image-------------------------- */

.sample-box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

.sample-box .pro-img {
    border: 1px solid black;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.profile-step {
    display: flex;
    align-items: center;
}

.tick-img {
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.profile-note p {
    color: black;
}

.profile-note p span {
    color: red;
}

.custom-file-input {
    margin-bottom: 0 !important;
}

.my-photo-box h6 {
    text-align: center;
    font-size: 12px;
    padding-top: 5px;
}

.prlast {
    padding-top: 30px;
}


/* ----------------------professional information ----------------- */

.professional-note p {
    color: black;
}

.professional-note p span {
    color: red;
}

.mobile-certi {
    padding-top: 50px;
    padding-left: 5px;
}

.mobile-certi h5 {
    font-size: 20px;
    padding-bottom: 5px;
}

.mobile-certi p {
    color: black;
    padding-bottom: 20px;
}

.licence-img {
    padding-top: 20px;
}

.discipline p {
    color: black;
}

.can-toggle {
    padding-bottom: 20px;
}

.second-toggle p {
    color: black;
    padding-top: 20px;
}

.discipline {
    padding-bottom: 20px;
}

.second-toggle {
    padding-bottom: 20px;
}

.addother .btn {
    /* background-color: #3bcf56;
  color: white; */
    display: block;
}

.addother {
    padding-top: 20px;
}

.compliat textarea {
    border: 1px solid gray !important;
}

.compliat textarea {
    padding-top: 10px !important;
}

.employee_records_dynamic {
    padding-top: 15px;
}


/* -----------------------history---------------------- */

.history-check label {
    padding-left: 10px;
    color: black;
}

.history-check input {
    width: auto !important;
}

.history-refrence p {
    color: black;
    padding-top: 20px;
    color: rgba(94, 44, 156, 1);
}

.history-employer .btn {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}

.history-employer {
    padding-top: 20px;
    padding-bottom: 20px;
}

.employement-date input {
    margin-bottom: 10px !important;
}

.employement-date p {
    padding-left: 15px;
}

.last-step {
    text-align: center;
    padding-bottom: 50px;
    padding-left: 90px;
    padding-right: 90px;
}

.last-step h3 {
    font-size: 24px;
    font-weight: normal;
    line-height: 40px;
    padding-top: 20px;
}

.customer_records_dynamic {
    padding-top: 40px;
}

.confirm-model span {
    color: rgba(94, 44, 156, 1);
}

.subgrren {
    color: green;
}

.empl-title h5 {
    padding-left: 10px;
}

.dicpline_records_dynamic {
    padding-top: 30px;
}


/* --------------------toogle button------------------- */

.toggle input[type="checkbox"] {
    visibility: hidden !important;
    display: none;
}

.toggle {
    height: 30px;
    font-family: arial;
    background: white;
    width: 100px;
    border: 2px solid black;
    position: relative;
}

.toggle:before {
    content: "yes";
    color: black;
    float: left;
    margin-left: 10px;
    margin-top: 2px;
    font-size: 14px;
}

.toggle input[type="checkbox"]+label:before,
.toggle input[type="checkbox"]:not(.filled-in)+label:after {
    border: none;
}

.toggle:after {
    content: "no";
    color: black;
    float: right;
    margin-right: 10px;
    margin-top: 2px;
    right: 0;
    top: 0 !important;
    position: absolute;
    font-size: 14;
}

.toggle label {
    display: block;
    width: 48px;
    height: 100% !important;
    position: absolute;
    background: #3bcf56;
    top: 0;
    left: 50%;
    z-index: 10;
    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    transition: all 0.75s ease;
}

.toggle input[type="checkbox"]:checked+label {
    transition: transform all 0.75s ease-in-out;
    transform: translateX(-100%);
    background: #de2631;
}

.toggle input[type="checkbox"]:checked+label:after {
    left: 142px;
}


/* --------------------toogle button end-------------------- */


/* --------------------toglebutton------------------- */

.togbtn input[type="checkbox"] {
    visibility: hidden;
}

.togbtn {
    height: 30px;
    font-family: arial;
    background: white;
    width: 100px;
    border: 2px solid black;
    position: relative;
    margin-top: 20px;
}

.togbtn:before {
    content: "Yes";
    color: black;
    float: left;
    margin-left: 10px;
    margin-top: 2px;
    font-size: 14px;
}

.togbtn:after {
    content: "No";
    color: black;
    float: right;
    margin-right: 10px;
    margin-top: 2px;
    right: 0;
    top: 0 !important;
    position: absolute;
    font-size: 14;
}

.togbtn label {
    display: block;
    width: 48px;
    height: 100%;
    position: absolute;
    background: #de2631;
    top: 0;
    left: 0;
    z-index: 10;
    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    transition: all 0.75s ease;
}

.togbtn input[type="checkbox"]:checked+label {
    transition: transform all 0.75s ease-in-out;
    transform: translate(100%, 0px);
    background: #3bcf56;
}

.togbtn input[type="checkbox"]:checked+label:after {
    left: 142px;
}


/* --------------------togbutton end-------------------- */


/* ---------------------- register-user---------------------- */

:root {
    --main-theme-color: rgba(94, 44, 156, 7);
    --btn-gradient: linear-gradient( to right, rgba(94, 44, 156, 06), purple, rgb(165, 131, 165));
}

.user-register .register-left {
    background-color: white;
    padding-top: 10px;
    box-shadow: 2px 2px 10px rgb(230, 228, 228), -2px -2px 10px rgb(230, 228, 228);
    border-radius: 10px;
}

.user-register .user-reg-row {
    padding-top: 15px;
    padding-bottom: 10px;
}

.register-left .form-control {
    border: none;
    border-bottom: 1px solid gray;
    border-radius: 0;
    margin-bottom: 20px;
}

.register-title h4 {
    padding-top: 10px;
    font-size: 20px;
    padding-bottom: 10px;
}

.reg-input-box {
    position: relative;
}

.reg-input-icon i {
    position: absolute;
    right: 10px;
    top: 12px;
    color: gray;
    font-size: 16px;
}

.reg-input-icon .in-lock {
    right: 15px;
    font-size: 18px;
}

.reg-input-box .reg-btn {
    padding-left: 30px;
    padding-right: 30px;
}

.reg-input-box .reg-btn a {
    color: white;
    background-image: var(--btn-gradient);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 25px;
    border: 1px solid transparent;
}

.reg-input-box .reg-btn a:hover {
    background-image: none;
    color: rgba(94, 44, 156, 1);
    border: 1px solid rgba(94, 44, 156, 1);
    transition: 0.7s;
    -webkit-transition: 0.7s;
}

.reg-input-box .reg-btn {
    margin-top: 20px;
}

.user-register-input p {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}

.reg-input-box .reg-robot {
    padding-top: 15px;
    padding-bottom: 5px;
}

.reg-robot label {
    padding-left: 10px;
}

.user-register-input .social-signup i {
    background-color: rgb(50, 50, 147);
    padding: 15px;
    border-radius: 50%;
    color: white;
    border: 1px solid transparent;
}

.user-register .social-signup i:hover {
    background-color: transparent;
    color: rgb(50, 50, 147);
    border: 1px solid rgb(50, 50, 147);
    transition: 0.7s;
    -webkit-transition: 0.7s;
}

.user-register-input .social-signup .socialfb {
    padding: 15px 18px;
}

.user-register-input .social-signup .socialgl {
    background-color: rgb(202, 47, 47);
}

.user-register-input .social-signup .socialgl:hover {
    color: rgb(202, 47, 47);
    border: 1px solid rgb(202, 47, 47);
}

.user-register-input .social-signup .socialapl {
    background-color: rgb(27, 27, 27);
}

.user-register-input .social-signup .socialapl:hover {
    color: rgb(27, 27, 27);
    border: 1px solid rgb(27, 27, 27);
}

.user-register-input .reg-in {
    padding-top: 10px;
}


/* -----------------------register user end------------------ */


/* ----------------------dashboard page start----------------------- */


/* ------------------serice page start----------------------------- */

.avatar-pic {
    width: 50px;
    border-radius: 5px;
}

.service-box {
    padding: 20px;
}

.clock .badge {
    font-size: 20px;
}

.clock {
    padding-right: 15px;
}

.newrow {
    padding-top: 20px;
}

.service-time .tm {
    padding-left: 30px;
}

.service-part {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
}

.service-body {
    padding-left: 30px;
    padding-right: 30px;
}

.ser-title h5 {
    color: #a4a4a4;
    padding-top: 10px;
    padding-left: 20px;
}

.srvice-second {
    padding-top: 20px;
}

.service-img {
    padding-left: 20px;
    padding-top: 20px;
}

.total-bookig {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 20px;
    background-color: #ececec;
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
}

.total-bookig p {
    background-color: white;
    padding: 10px 15px;
    border-radius: 5px;
}

.supload {
    visibility: hidden;
}

.srvice-second .about-service .serabout-box {
    width: 100%;
}

.newrow button {
    width: 185px;
    height: 40px;
}

.service-img .uploaded-doc img {
    width: 100px;
    height: 60px;
}

.service-img .uploaded-doc video {
    margin: 10px 10px 10px 0;
    padding: 0;
    border: 2px solid #000;
    border-radius: 2px;
    width: 100px;
    height: 60px;
}

.related {
    display: flex;
}


/* -------------------service page end------------------------------ */


/* --------------------complaint page start------------------------- */

.com-btn {
    padding: 3px 15px;
    font-size: 14px;
    text-transform: none;
}

.book-title h5 {
    color: #a4a4a4;
}

.service-top p {
    padding-left: 20px;
}

.msg-complaint textarea {
    width: 70%;
}

.msg-complaint {
    padding-top: 20px;
}

.book-box {
    border: 1px solid #a4a4a4;
    width: 100%;
    padding: 10px 20px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.book-box p {
    margin-bottom: 0;
}

.add-note .btn {
    padding: 7px 20px;
}

.timesss .subject-text {
    font-weight: normal;
}

.timesss .sub-ttl {
    font-weight: bold;
}

.book-complaint {
    border-top: 1px solid #e6e9ec;
    padding-top: 20px;
}

.complaint-ttl {
    padding-left: 0;
    padding-right: 0;
}

.viewbtn {
    padding: 5px 15px;
}


/* ------------------complaint page end----------------------------- */


/* --------------------dispatche page--------------------- */

.dis-detail {
    display: flex !important;
    justify-content: space-between;
}

.dispute-btn {
    padding-top: 20px;
}

.dispute-btn p {
    padding-left: 20px;
    padding-right: 20px;
}

.modal-title {
    display: block;
    margin: 0 auto;
}

.modal-title h5 {
    font-size: 18px;
}

.dispute-ttl span {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#addservicelocation {
    overflow-x: hidden;
    overflow-y: auto;
}

#viewbooking {
    overflow-x: hidden;
    overflow-y: auto;
}

#bookingrequest {
    overflow-x: hidden;
    overflow-y: auto;
}

#addplus {
    overflow-x: hidden;
    overflow-y: auto;
}

#file-dispute {
    overflow-x: hidden;
    overflow-y: auto;
}

#disputeinvoice {
    overflow-x: hidden;
    overflow-y: auto;
}

#dispute-proceed {
    overflow-x: hidden;
    overflow-y: auto;
}

#selectfamily {
    overflow-x: hidden;
    overflow-y: auto;
}

#addproductdetail {
    overflow-x: hidden;
    overflow-y: auto;
}

#addservicesreview {
    overflow-x: hidden;
    overflow-y: auto;
}

#fullservice {
    overflow-x: hidden;
    overflow-y: auto;
}

#addselect {
    overflow-x: hidden;
    overflow-y: auto;
}

#hairnailcare {
    overflow-x: hidden;
    overflow-y: auto;
}

#userfeedback {
    overflow-x: hidden;
    overflow-y: auto;
}

#selectdaytime {
    overflow-x: hidden;
    overflow-y: auto;
}

#hairtype {
    overflow-x: hidden;
    overflow-y: auto;
}

#quickfill {
    overflow-x: hidden;
    overflow-y: auto;
}

#chageuser {
    overflow-x: hidden;
    overflow-y: auto;
}

#selectbook {
    overflow-x: hidden;
    overflow-y: auto;
}

#changemail {
    overflow-x: hidden;
    overflow-y: auto;
}

#viewbookings {
    overflow-x: hidden;
    overflow-y: auto;
}

#addthisdaytime {
    overflow-x: hidden;
    overflow-y: auto;
}

#addresnonres {
    overflow-x: hidden;
    overflow-y: auto;
}

#closebookings {
    overflow-x: hidden;
    overflow-y: auto;
}

#editservice {
    overflow-x: hidden;
    overflow-y: auto;
}

#acceptservisebooking {
    overflow-x: hidden;
    overflow-y: auto;
}

#jeniselectservice {
    overflow-x: hidden;
    overflow-y: auto;
}

#fullservice {
    overflow-x: hidden;
    overflow-y: auto;
}

#msgflagged {
    overflow-x: hidden;
    overflow-y: auto;
}

#requestreview {
    overflow-x: hidden;
    overflow-y: auto;
}

#addservices {
    overflow-x: hidden;
    overflow-y: auto;
}

.report-img {
    padding-left: 0;
}

.sld2 {
    width: 60px !important;
}


/* ------------------------------message ----------------------- */

.write-msg a {
    position: absolute;
    top: 60px;
    right: 35px;
    z-index: 10;
}


/* -----------------notification------------------------------ */

.notefooter {
    display: flex;
    justify-content: space-between;
}

.notification-field input {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.notification-field textarea {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.notification-field {
    padding-top: 10px;
    padding-bottom: 10px;
}

.deletenote h5 {
    position: absolute;
    left: 33%;
    color: white;
}


/* -------------------booking history------------------------ */


/* --------------------payment history------------------ */

.model-payent {
    display: flex;
    justify-content: space-between;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.right-payment {
    padding-left: 20px !important;
}

.his-book .unm {
    width: 250px;
}


/* -----------------------professional dashboard--------------------------- */

.card-top {
    padding-top: 20px;
}

.book-dtl {
    display: flex;
    align-items: center;
}

.phone-msg {
    padding-top: 0px;
    padding-bottom: 20px;
    display: inline-block;
}

.share-report {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feeback_smile input {
    border: none;
    border-bottom: 1px solid black;
    width: 50px;
}

.feeback_smile {
    padding-left: 20px;
}

.sml-star {
    display: flex;
    align-items: center;
}

.sml-star .face {
    font-size: 50px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.sml-star .redsm {
    font-size: 50px;
    padding-right: 10px;
    padding-bottom: 10px;
}

#weeklyprof,
#monthlyprof,
#yearlyprof {
    font-size: 16px;
    font-weight: 500;
    background: #a3a3a3;
    padding: 4px 10px;
    color: #fff;
    border-radius: 4px;
    margin-left: 10px;
}

.card-prof {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.card-status select {
    margin-bottom: 0 !important;
}

.hair-style {
    display: flex;
}

.hair-name {
    display: flex;
}

.hair-name p {
    padding-left: 20px;
}

.hair-img {
    padding-left: 20px;
}

.award-detail table {
    width: 100%;
}

.award-certi div#example_wrapper .row:nth-of-type(1) .col-sm-12.col-md-6:nth-of-type(2) div {
    text-align: left;
    display: none;
}

.specialist-list li {
    padding-top: 5px;
    padding-bottom: 5px;
}

.specialist-list ul {
    list-style: none;
}

.album-box .album-dtl {
    width: 100%;
    /* height: 250px; */
    overflow: hidden;
    display: flex;
    align-items: center;
}

.albumrow {
    padding-top: 20px;
}

.album-name {
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}

.album-box .album-desc {
    padding-top: 5px;
}

.cam-btn {
    display: flex;
}

#cam {
    display: none;
}

.img-icon i {
    color: red;
    position: relative;
    top: -30px;
    left: 10px;
}

.img-icon {
    position: relative;
}

.myicon i {
    padding-top: 10px;
}

.albumicon,
.albumiconedit {
    font-size: 25px;
}

.albumiconedit {
    color: blue !important;
}

.myicon {
    display: none;
}

.img-icon:hover .myicon {
    display: block;
    opacity: 1;
    transition: all 0.5s;
    position: absolute;
}

.hairtable td {
    padding-left: 10px;
    padding-right: 10px;
}

.hairtable .hair {
    padding-right: 20px;
}

.hairtable .hair-desc {
    padding-top: 10px;
    padding-bottom: 10px;
}

.myrow {
    padding-top: 20px;
}

.haircheck {
    text-align: right !important;
    display: flex;
    justify-content: right;
}

.faq-section .col-top>a {
    display: block;
    position: relative;
    color: rgb(105, 105, 105);
}

.faq-section .col-top>a:after {
    content: "\002B";
    font-family: "Font Awesome";
    position: absolute;
    right: 0;
    font-weight: 600;
    font-size: 30px;
}

.faq-section .col-top>a[aria-expanded="true"]:after {
    content: "\2212";
    font-family: "Font Awesome";
    font-weight: 600;
}


/* ------------------Service Categories + Special Services + Services Pane */

.about-service .serbox {
    width: 100%;
}

.product-img img {
    height: 60px;
}

.balance {
    display: flex;
    align-items: center;
}

.right .form-control {
    width: 150px !important;
}

.main {
    display: flex;
    justify-content: space-between;
}

.top-btn {
    display: flex;
    justify-content: space-evenly;
}

#target-1 {
    display: none;
    color: black;
    padding-top: 10px;
}

#target-2 {
    display: none;
    color: black;
    padding-top: 10px;
}

.question a {
    color: black;
}

.mtarget {
    padding-left: 40px;
}

.contt .form-control {
    width: 80%;
}

.conscreen label {
    margin-bottom: 20px;
}

.peradd {
    padding-left: 80px;
    padding-right: 40px;
    display: flex;
    justify-content: space-between;
}

.per-phone {
    display: flex;
    justify-content: space-between;
}

.infoprofile img {
    width: 30%;
}

.pro_hed {
    display: flex;
    justify-content: space-between;
}

.pro_hed .btn {
    padding-top: 0 !important;
    padding-bottom: 0d !important;
}

.pro-ser-info .serabout-box {
    width: 100%;
}

.info-licence img {
    width: 25%;
}

.info-licence {
    width: 20%;
}

.editprof {
    position: absolute;
    top: -8px;
    left: 35px;
}

.editprofspan .btn {
    border-radius: 50%;
    padding: 0;
    padding-top: 5px;
    padding: 10px;
}

.editprofspan {
    position: relative;
}

.prof-info-sel .custom-file-label::after {
    background-color: #e9ecef;
    padding-left: 20px;
    padding-right: 20px;
    font-family: "Roboto", sans-serif;
    color: black;
    border-left: 1px solid #ced4da;
    border-radius: 0 0.25rem 0.25rem 0;
}

.pro-serch input {
    width: 60%;
}

.prodivsrch {
    display: block;
}

.pro-serch input {
    margin-left: auto;
    margin-right: auto;
}

.addproinfo {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.info-date .icon-calendar {
    position: absolute;
    right: 10px;
    top: 10px;
}


/* ----------------------switch-------------------- */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked+.slider {
    background-color: #000!important;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196f3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.glrhr {
    margin-top: 20px !important;
}

.holder {
    padding-top: 20px;
}


/* --------------------------user-------------------------- */

.pagination {
    justify-content: right;
}

.top-pro-btn button {
    margin: 0 30px;
}

.professinal-pro-img {
    margin-right: 40px;
}

.prttl {
    width: 100%;
}

.prttl h3 {
    margin-bottom: 0;
}

.green-review {
    color: green;
    font-size: 25px;
}

.red-review {
    color: red;
    font-size: 25px;
}

.proactive {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.prolink {
    color: black !important;
}

.pro-use-top {
    padding-left: 20%;
}

.fam img {
    width: 100px;
}

.fam {
    text-align: center;
}

.addbook {
    padding-left: 95px;
}

#more {
    display: none;
}

#more2 {
    display: none;
}

#more3 {
    display: none;
}

#more4 {
    display: none;
}


/* ---------------------my account user-------------------- */

.per-info-pro img {
    border-radius: 50%;
    width: 20%;
}

.edit-prof-user button {
    position: relative;
    top: -40px;
    right: -60px;
}

.caldatetime {
    width: 50% !important;
    margin-left: auto;
    margin-right: auto;
}

.usfeed {
    font-size: 40px;
    color: green;
}


/* -----------------------star rating start--------------------- */

#stars_rating .stars {
    display: inline-flex;
    flex-flow: row nowrap;
    max-width: 360px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    margin-top: -8px;
}

#stars_rating .stars .star {
    position: relative;
    color: rgb(255, 253, 158);
    font-size: 38px;
    cursor: pointer;
    padding: 0 5px;
}

#stars_rating .stars .star:after {
    content: "★";
    position: absolute;
    transform: translateX(-100%);
    top: 0px;
    font-size: 38px;
}

#stars_rating .stars .star.rated {
    color: rgb(255, 254, 190);
}

#stars_rating .stars .star.rated:before {
    color: rgb(255, 239, 9);
    content: "★";
    position: absolute;
    left: 2.5px;
    top: -5px;
    font-size: 45px;
}

#stars_rating .stars:hover .star {
    color: rgb(255, 254, 190);
}

#stars_rating .stars:hover .star:hover~* {
    color: rgb(255, 254, 190);
}

#stars_rating .stars.rated .star:before {
    color: rgb(237, 215, 53);
    content: "★";
    position: absolute;
    left: 2.5px;
    top: -5px;
    font-size: 45px;
}

#stars_rating .stars.rated .star:after {
    color: rgb(255, 209, 25);
}

#stars_rating .stars.rated .star.rated~*:before {
    display: none;
}

#stars_rating .stars.rated .star.rated~*:after {
    color: rgb(255, 254, 190);
}

#stars_rating .stars.rated:hover .star {
    color: rgb(255, 254, 190);
}

#stars_rating .stars.rated:hover .star:after {
    color: rgb(255, 254, 190);
    ;
}

#stars_rating .stars.rated:hover .star:hover~* {
    color: rgb(255, 254, 190);
}

#stars_rating .stars.rated:hover .star:hover~*:after {
    color: rgb(255, 254, 190);
}

#stars_rating .rates span.avg:before {
    content: "Average: ";
}


/* ---------------------------end star rating--------------------------- */

.reviewbox label {
    padding-left: 30px !important;
}

.productlist ul li {
    padding-top: 5px;
    padding-bottom: 5px;
}

.cntcbr {
    display: none;
}

.preference-box {
    width: 100px !important;
    height: 100px !important;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preference-box label {
    width: 100%;
    text-transform: inherit;
    font-size: 16px;
    position: relative;
    top: 5px !important;
    left: 70% !important;
}

.preference-box {
    display: block;
    text-align: center;
}

.dash-btn {
    display: flex;
    justify-content: space-between;
}

.new-msg {
    text-align: justify;
}

.avtime {
    width: 40%;
    margin-top: 10px;
}

.dinvoice {
    justify-content: space-between !important;
}

.table .accordion-toggle {
    cursor: pointer;
}

.hiddenRow {
    padding: 0 4px !important;
    font-size: 13px;
}

#accordian {
    position: relative;
    margin: 0 auto;
}

.filter-option-heading:before {
    content: "+";
    color: #000;
    font-size: 18px;
    position: absolute;
    transform: rotate(90deg);
    transition: all 0.6s ease;
}

.filter-option-heading.activeFilter:before {
    display: none;
}

#accordian .filter-option-heading.activeFilter:after {
    content: "-";
    color: #000;
    font-size: 18px;
    transform: rotate(180deg);
    position: absolute;
    transition: all 0.6s ease;
}

.filter-option-content {
    display: none;
}

.comboTreeWrapper ul li input[type="checkbox"] {
    position: unset;
    opacity: 1;
    margin-right: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.comboTreeWrapper ul li ul li input[type="checkbox"] {
    position: unset;
    opacity: 1;
    margin-right: 10px;
    margin-left: 50px;
}

span.mdi.mdi-chevron-down.comboTreeArrowBtnImg {
    position: absolute;
    top: 10px;
    right: 30px;
}

.comboTreeDropDownContainer {
    display: none;
}

.comboTreeDropDownContainer {
    position: absolute;
    background: #fff;
    width: 93%;
    opacity: 1;
    z-index: 999;
    border: 1px solid #bcbcbc;
    border-radius: 4px;
    padding: 10px 20px;
    height: 300px;
    overflow: auto;
    margin-top: -10px;
}

span.comboTreeItemTitle {
    cursor: pointer;
}

.comboTreeWrapper .comboTreeDropDownContainer input[type="text"] {
    display: none;
}

.btn-collapse {
    width: 100%;
    text-align: unset;
    padding: 0px 0px;
    box-shadow: none;
}

div#accordion .card-header {
    border: none;
    padding-bottom: 0;
}

button.btn.btn-link.btn-collapse span.timesss {
    padding-right: 60px;
}

button.btn.btn-link.btn-collapse {
    position: relative;
}

button.btn.btn-link.btn-collapse:after {
    content: "\e615";
    font-size: 26px;
    font-weight: 600;
    font-family: 'simple-line-icons';
    top: 3px;
    right: 10px;
    position: absolute;
}

button.btn.btn-link.btn-collapse:after {}

button.btn.btn-link.btn-collapse.collapsed:after {
    content: "\e095";
}

.current-date.text-center {
    margin-top: 20px;
}

div#accordion .card {
    margin-bottom: 10px;
}

div#accordion .card-header {
    padding-top: 0;
}

.bookings .table-responsive {
    padding: 30px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

tr.rowContent .prof-details {
    display: flow-root;
}

.accordion.minus td:nth-of-type(1):after {
    content: "\e615";
    position: relative;
    font-size: 16px;
    font-family: 'simple-line-icons';
    font-weight: 700;
    color: red;
}

.accordion td:nth-of-type(1):after {
    content: "\e095";
    position: relative;
    font-size: 18px;
    font-family: 'simple-line-icons';
    color: green;
    font-weight: 700;
}

.accordion.dates td:nth-of-type(1):after {
    content: "";
}

.img-size {
    max-width: 100px !important;
}

.people-list tr td {
    white-space: normal;
}