body {    
    font-family: 'Montserrat';    
    margin: 0px;           
    background-size: contain; 
}
#supportlink:hover {
    background-color: #006187;
}
#supportlink {
    position: fixed;
    bottom: 20px; right: 20px;
    height: 40px; width: 100px;
    line-height: 40px;
    background-color: #2d3131;
    color: white;
    cursor: pointer;
    z-index: 100;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;    
}
.sendapppin {
    width: 150px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #2d3131;
    color: white;
    font-size: 10px;
}
#gstdiscount { 
    display: none;
    background-color: #2d3131; 
    color: white;
    font-size: 12px; 
    width: 120px; text-align: center;
    cursor: pointer;
    height: 30px; line-height: 30px;
    margin-left: 20px;
}
.fsubtab-requestreport { 
    margin-top: 20px;
}
.reporttitle{ 
    margin-top: 30px; 
    margin-left: 50px;
}
.fsubtab-openrequests {
    height: 350px; 
    background-color: white;
    overflow-y: scroll;
    width: 800px; 
    margin: 20px 20px;;
}
.reportline { 
    display: flex;
    border-bottom: 1px solid lightgray;
    height: 30px; 
}
.reportline-salon{ 
    width: 400px; 
    padding-left: 10px;
}
#reportsalonlist{ 
    height: 30px; 
    background-color: lightblue;
    width: 200px;
    border: none;
}
.reportdesc{ 
    font-size: 13px; 
    margin-inline: 50px;
}
.reportsrefresh{ 
    height: 30px; 
    cursor: pointer;
    margin-inline: 20px;
}
.reportsubmit{ 
    cursor: pointer;
    height: 30px; line-height: 30px; 
    text-align: center;
    width: 250px; 
    margin: 20px 50px;
    background-color: #2d3131;
    color: white; 
    border-radius: 5px;
}
.reportlabel { 
    width: 200px; 
    text-align: right;
    margin-right: 10px;
    font-size: 14px;
}
.reportstart, .reportend { 
    height: 30px; width: 200px;
    text-align: center;
}
.reportline-start, .reportline-end, .reportline-date {
    width: 250px; 
    text-align: center;
}
.reportline-status { 
    width: 150px; 
    text-align: center
}
.reportline-head { 
    font-weight: 600; 
    background-color: #006187;
    color: white;

}
.reportline, .reportline-head{ 
    display: flex;  
    align-items: center;
    border-bottom: 1px solid lightgray;
    height: 30px; 
    font-size: 14px; 
}

.jobcardrefresh:hover {    
    text-decoration: underline;
}
.jobcardrefresh { 
    font-size: 12px;
    margin-left: auto;
    margin-right: 15px;
    cursor: pointer;    
    color: #006187;
}
#atChanges {
    padding-top: 20px;    
}
#disclist{ 
    background-color: white;
    margin-left: 20px; 
    margin-top: 10px;
    height: 700px; 
    overflow-y: scroll;
    width: 1360px;
}
#admindiscounts{ 
    margin-top: 20px;
    height: 30px;
    width: 250px;
}
.discitem-head {
    font-weight: 600;
}
.discitem-head .discitem-value, .discitem-head .discitem-perc, .discitem-head .discitem-value, .discitem-head .discitem-date {
    color: #006187;
}
.disctext{     
    margin-top: 10px;        
    height: 30px; 
    line-height: 30px;     
    margin-left: 20px; 
    font-size: 14px; 
}
.discitem-date{ 
    cursor: pointer;
    width: 150px;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
}
.msecsms{ 
    padding-left: 20px; 
    width: 1000px;
    padding-top: 1px;
    padding-bottom: 10px;    
    border-top: 2px solid #2d3131;
}
.msms-helptext{ 
    font-size: 14px;
    margin-left: 5px; 
    margin-right: 5px;
}
.msms-itemline{ 
    display: flex; 
    height: 50px;     
    align-items: center;
}
#msms-clientfrom{ 
    background-color: #e5e5e5;
    height: 30px; line-height: 30px; 
}
.msms-clients-number{ 
    background-color: #e5e5e5;
    height: 30px; line-height: 30px; 
    padding-left: 20px;
    margin-top: 20px; 
    font-size: 13px;
    max-width: 500px;    
}
.msms-or { 
    font-size: 14px; 
    margin-top: 10px; 
    margin-bottom: 10px;
}
#msms-uploadfile {
    background-color: #2d3131; color: white;
    height: 30px; line-height: 30px; 
    font-size: 13px; 
    text-align: center;
    width: 150px;
    cursor: pointer;
}
#msms-uploadinput { 
    opacity: 0;
    cursor:pointer;
    position: absolute;
    top: 10px; 
    width: 150px;
    height: 30px;
    left: 0px;
}
.msms-senderid, .msms-txtlen{ 
    height: 30px; line-height: 30px;
    font-size: 14px;
}
.msms-emailcc { 
    background-color: #e5e5e5;
    height: 30px;
    width: 200px;
    margin-left: 10px;
    padding-left: 10px;
}
.msms-sendnow, .msms-sendlater { 
    height: 30px; line-height: 30px; 
    font-size: 14px; 
    text-align: center;
    width: 100px; 
    cursor: pointer;
    text-align: center;
    background-color: #2d3131; color: white;
}
.msms-sendnow {
    margin-inline: 20px; 
    margin-top: 20px;
}
.msms-sendlater { }
.msms-sample { 
    font-weight: bold;
    cursor: pointer;
    color: #006187;
}
.msms-simpletext { 
    font-size: 13px;
    margin-left: 20px;
}
.msms-templateID, .msms-templateName{ 
    height: 30px; line-height: 30px;
    font-size: 14px; 
    color: #006187;
    display: none;
}
.msms-var{ 
    background-color: white;
    width: 100px;
    text-align: center;
    height: 25px; border-radius: 5px; 
    margin-top: 5px;
    margin-inline: 5px;
}
.msms-sendlater-date, .msms-sendlater-time {
    background-color: #e5e5e5;
    height: 30px !important;
    margin-right: 20px;
    text-align: center;
}
.msms-sendlater-date { 
    width: 100px;
}
.msms-sendlater-time {
    width: 50px;    
}
.msms-templateTxt, .msms-templateTxt-final {     
    width: 700px; 
    padding: 20px;        
}
.msms-testnumber { 
    width: 100px;
}
.msms-help { 
    font-size: 14px; 
    margin-top: 20px;
}
.msms-managetemplates{ 
    margin-left: 30px; 
    font-size: 13px;    
    cursor: pointer;
    color: white;
    background-color: #006187;
    height: 30px; line-height: 30px;
    width: 160px;
    text-align: center;

}
.msms-templateTxt { 
    background-color: #e5e5e5;
}
.msecsms-3{ 
    padding-bottom: 100px;
}
.msms-templateTxt-final {    
    background-color: darkgray;
}

#msms-templates{ 
    margin-top: 10px;
    margin-bottom: 10px;
    height: 40px; 
    max-width: 500px;
}
.msms-reset {
    height: 40px; line-height: 40px; 
    font-size: 13px;
    cursor: pointer;
    margin-left: 50px;
}
.msms-reset:hover { 
    text-decoration: underline;
}
#msms-getclients{ 
    margin-left: 20px;
    background-color: #2d3131;
    color: white; 
    width: 150px; text-align: center;
    height: 30px; line-height: 30px; 
    font-size: 14px; 
    cursor: pointer;
}
#msms-done {
    margin-top: 10px;
    background-color: #2d3131;
    color: white; 
    width: 100px; text-align: center;
    height: 30px; line-height: 30px; 
    font-size: 14px; 
    cursor: pointer;
}
.msms-sendtest { 
    text-align: center;
    margin-left: 10px;
    background-color: gray;
    color: white; 
    width: 100px; 
    height: 30px; line-height: 30px; 
    font-size: 14px; 
    cursor: pointer;
}
.msms-testnumber { 
    width: 200px; 
    height: 30px; 
    text-align: center;
    background-color: #e5e5e5;
}
.msms-test-status, .msms-real-status {
    margin-left: 20px;
    height:30px; line-height: 30px;
    color: #006187;
     font-weight: 600;
     font-size: 14px;
} 

#msms-salon{     
    height: 30px; width: 150px;
    margin-right: 10px;
}
.msms-title { 
    margin-bottom:20px;
    color: #006187;
    font-size: 14px; 
    font-weight: 600;

}
.discitem-billno, .discitem-biller {
    width: 110px;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
}
.discitem-value, .discitem-perc{ 
    width: 80px;    
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
}
.discitem-item{ 
    width: 240px;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
}
.discitem:hover { 
    background-color: #e5e5e5;
}
.discitem, .discitem-head{ 
    transition-duration: 0.25s;
    display: flex; align-items: center;
    font-size: 14px;
    height: 30px; 
    line-height: 30px; 
    border-bottom: 1px solid lightgray;
}
.billchangerefresh{ 
    height: 30px; cursor: pointer;
    margin-left: 20px;
    margin-bottom: 10px;
}

.billchangeitem-head {
    font-weight: 600;
}
.billchangebill{ 
    height: 22px; 
    margin-left: 20px;
    cursor: pointer;
}
.billchangeitem, .billchangeitem-head { 
    display: flex;
    height: 30px; 
    font-size: 13px;
    align-items: center;
}
.billchangeitem-val{ 
    width: 150px;
    text-align: center;
}
#billchanges { 
    height: 600px;
    overflow-y: scroll;
    background-color: white;
    margin-left: 20px;    
    width: 1200px;
}
.glitz-disc { 
    padding-left: 10px;
    color: #006187;
}
.supportbox-line {
    display: flex;
    height: 30px;
    align-items: center;
}
.supportbox-maintitle {
    font-size: 14px;
    color: white;
    margin-bottom: 20px;
}
.supportbox-title {
    font-size: 14px;
    width: 100px;
}
.supportbox-yourname, .supportbox-yournumber, .supportbox-youremail, .supportbox-salonlist {
    width: 150px;
    height: 25px !important;
}
#referrals {
    z-index: 101;
    left: 200px;
    top: 100px;
    width: 700px;
    padding: 20px;
    position: fixed;
    text-align: left;
    border-radius: 10px;
    background-color: #e5e5e5;
    border: 1px solid lightgray;
    opacity: 1;
    display: none;
}
.ref-banner { 
    height: 200px;
    margin-left: 200px;
}
#refsubmit {
    text-align: center;
    border-radius: 5px;
    width: 150px;
    height: 25px;
    line-height: 25px;
    background-color: #006187;
    color: white;
    cursor: pointer;
    margin: 20px auto;
}
#refclose {
    position: absolute;
    top: 5px;
    right: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    height: 30px;
    width: 30px;
    background-color: #2d3131;
    color: white;
    cursor: pointer;
    border-radius: 50%;
}
.ref-text {
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    color: #006187;
    font-weight: 600;
}
.refitem { 
    height: 30px; 
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.ref-name {
    width: 200px; 
    font-size: 15px;
}

.ref-value {
    height: 25px; 
    font-size: 14px;
    width: 250px;
    margin-left: 20px;
    background-color: white;
}
.supportbox {
    right: 40px;
    bottom: 80px;
    width: 300px;
    padding: 10px;
    position: fixed;
    text-align: left;
    border-radius: 10px;
    background-color: #006187;
    opacity: 0.9;
    display: none;
    z-index: 100;
}
.profile-dnd{ 
    height: 40px; 
    width: 40px;
}
.supportbox-send {
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #2d3131;
    color: white;
    width: 130px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}
.supportbox-close { 
    position: absolute;
    font-size: 10px; 
    text-align: center;
    height: 15px; width: 15px; 
    line-height: 15px;
    background-color: white;
    color: black; right: 5px; cursor: pointer;  
    top: 5px;
    border-radius: 50%;
}
.supportbox-result { 
    font-size: 13px; 
    color: white;
    height: 20px; line-height: 20px; 
    text-align: center; 
}
.supportbox-title {
    height: 30px; line-height:30px;
    font-size: 12px;
    color: white;
    text-align: center;
}
.supportbox-message { 
    height: 120px;
    width: 230px;
    outline: none;
    padding: 5px; 
    resize: none;
    font-family: Montserrat;
    font-size: 12px;
    border-radius: 10px;
    margin: 10px 0 0 10px;
}
.ndFinancetab .ndFinancetab-title {
    padding-top: 20px;
}
.ndFinance-chart{ 
    height: 200px; 
    width: 500px;
    margin-top: 20px; 
    margin-left: 20px;
    border: 1px solid lightgray;
    border-radius: 10px;
}
#ndFinance{    
    padding: 0 0 50px 0;
}
.ndFinancetab-title { 
    font-size: 16px; color: #006187;
    border-bottom: 1px solid #006187;
}
.ndFinancetab{ 
    height: 700px; 
    width: 1100px;
    background-color: white;
}
#ndFinanceMenu{ 
    width: 150px; border-right: 1px solid lightgray;
}
.ndFinance-menu{ 
    height: 100px; width: 150px;
    border-bottom: 1px solid lightgray;
    display: flex; justify-content: center;
    align-items: center;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.nfb-title{ 
    font-size: 15px; 
    text-align: center; height: 30px; line-height: 30px;
}
.nfb-item { 
    display:flex; align-items: center;
    height: 30px; border-bottom: 1px solid lightgray;
}
.nfb-name, .nfb-value { 
    width: 150px;
}

.ndFinance-menu:hover { 
    background-color: #e5e5e5;
}
.ndFinancetab{ 
    padding-left: 20px;
}
#logocover {
    position: absolute;
    padding-top: 250px;
    text-align: center;
    font-size: 25px; 
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background-color: white; opacity: 0.8;
    display: none;
    z-index: 2;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.6;
  }
}
.salonlist {
    font-size: 14px;
    height:auto;
}
#mainloader {
    position: absolute;
    top: 30%;
    left: 40%;
    z-index: 120;
    display: none;
}

#support {
    height: 90vh;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {  
  
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: lightblue;  
}

#timeoutlabel {
    color: #f75656;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
}
/*new windows spinner*/
.windows8 {
    position: relative;
    width: 78px;
    height: 78px;
    margin: auto;
}

    .windows8 .wBall {
        position: absolute;
        width: 74px;
        height: 74px;
        opacity: 0;
        -o-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        transform: rotate(225deg);
        -o-animation: orbit 3.0225s infinite;
        -ms-animation: orbit 3.0225s infinite;
        -webkit-animation: orbit 3.0225s infinite;
        -moz-animation: orbit 3.0225s infinite;
        animation: orbit 3.0225s infinite;
    }

        .windows8 .wBall .wInnerBall {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #006187;
            border-radius: 10px;
        }

    .windows8 .wBall_1 {
        -o-animation-delay: 0.656s;
        /*-ms-animation-delay: 0.656s;*/
        -webkit-animation-delay: 0.656s;
        -moz-animation-delay: 0.656s;
        animation-delay: 0.656s;
    }

    .windows8 .wBall_2 {
        -o-animation-delay: 0.133s;
        -webkit-animation-delay: 0.133s;
        -moz-animation-delay: 0.133s;
        /*-ms-animation-delay: 0.133s;*/
        animation-delay: 0.133s;
    }

    .windows8 .wBall_3 {
        -o-animation-delay: 0.2665s;
        /*-ms-animation-delay: 0.2665s;*/
        -webkit-animation-delay: 0.2665s;
        -moz-animation-delay: 0.2665s;
        animation-delay: 0.2665s;
    }

    .windows8 .wBall_4 {
        -o-animation-delay: 0.3995s;
        /*-ms-animation-delay: 0.3995s;*/
        -webkit-animation-delay: 0.3995s;
        -moz-animation-delay: 0.3995s;
        animation-delay: 0.3995s;
    }

    .windows8 .wBall_5 {
        -o-animation-delay: 0.533s;
        /*-ms-animation-delay: 0.533s;*/
        -webkit-animation-delay: 0.533s;
        -moz-animation-delay: 0.533s;
        animation-delay: 0.533s;
    }



@keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin: 0%;
    }

    30% {
        opacity: 1;
        transform: rotate(410deg);
        animation-timing-function: ease-in-out;
        origin: 7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin: 30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin: 39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin: 70%;
    }

    76% {
        opacity: 0;
        transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }
}

@-o-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -o-transform: rotate(300deg);
        -o-animation-timing-function: linear;
        -o-origin: 0%;
    }

    30% {
        opacity: 1;
        -o-transform: rotate(410deg);
        -o-animation-timing-function: ease-in-out;
        -o-origin: 7%;
    }

    39% {
        opacity: 1;
        -o-transform: rotate(645deg);
        -o-animation-timing-function: linear;
        -o-origin: 30%;
    }

    70% {
        opacity: 1;
        -o-transform: rotate(770deg);
        -o-animation-timing-function: ease-out;
        -o-origin: 39%;
    }

    75% {
        opacity: 1;
        -o-transform: rotate(900deg);
        -o-animation-timing-function: ease-out;
        -o-origin: 70%;
    }

    76% {
        opacity: 0;
        -o-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -o-transform: rotate(900deg);
    }
}

@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;
        -ms-origin: 0%;
    }

    30% {
        opacity: 1;
        -ms-transform: rotate(410deg);
        -ms-animation-timing-function: ease-in-out;
        -ms-origin: 7%;
    }

    39% {
        opacity: 1;
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;
        -ms-origin: 30%;
    }

    70% {
        opacity: 1;
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin: 39%;
    }

    75% {
        opacity: 1;
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin: 70%;
    }

    76% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }
}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin: 0%;
    }

    30% {
        opacity: 1;
        -webkit-transform: rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin: 7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin: 30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin: 39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin: 70%;
    }

    76% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }
}

@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;
        -moz-origin: 0%;
    }

    30% {
        opacity: 1;
        -moz-transform: rotate(410deg);
        -moz-animation-timing-function: ease-in-out;
        -moz-origin: 7%;
    }

    39% {
        opacity: 1;
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;
        -moz-origin: 30%;
    }

    70% {
        opacity: 1;
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin: 39%;
    }

    75% {
        opacity: 1;
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin: 70%;
    }

    76% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }
}

#logo {
    margin-left: 10px;
    height: 50px;
}

.loginlogo {
    height: 150px;
}
#overlay, #canceloverlay {
    z-index: 101;
    opacity: 0.8;
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    display: none;
}
#canceloverlay {
    opacity: 1;
}
#addsalonterms {
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
}
#cancelwarning-ok { 
    height: 30px; line-height: 30px; 
    background-color: #006187;
    color: white;
    font-size: 14px; 
    width: 50px; text-align: center;
    cursor: pointer;
    margin: 20px auto;
}
#cancelwarning { 
    position: absolute;
    left: 0; right: 0;
    margin: 200px auto;
    padding: 70px 20px 20px 20px;
    width: 500px;
    color: white;
    background-color: red;
    z-index: 999;
    border-radius: 15px;
}
.lockedoutfullname {
    color: #2d3131;
}

.repinlogout {
    cursor: pointer;
    color: #006187;
}

    .repinlogout:hover {
        text-decoration: underline;
    }

.relogin {
    width: 500px;
    border: 1px solid lightgray;
    margin-left: auto;
    margin-right: auto;
    margin-top: 300px;
    text-align: center;
    padding: 10px;
}

.repin {
    font-size: 18px;
    text-align: center;
    background-color: #a5a5a5;
    height: 50px;
    width: 200px;
    border: none;
    outline: none;
}

.repinerror {
    margin-top: 10px;
    margin-bottom: 10px;
}
/*new windows spinner end*/
.ui-datepicker-year {
    font-size: 14px;
}

.ui-datepicker-month {
    text-align: center;
    font-size: 15px;
}
/*autocomplete css*/
.itemlabelcss {
    font-size: 15px;
    padding-left: 10px;
    overflow-x: hidden;
    text-wrap: none;
}

.ui-menu-focus {
    background-color: #2d3131;
}

.ui-autocomplete {
    border: 1px solid gray;
    background-color: white;
    padding-left: 0px;
    position: absolute;
    cursor: default;
    z-index: 300 !important;
}

.ui-widget {
    font-family: 'Montserrat';
    font-size: 16px;
}

.ui-menu {
    font-family: 'Montserrat';
    max-height: 500px;
    max-width: 600px;
    border: 1px solid grey;
    overflow-y: scroll;
    overflow-x: hidden;
}

.ui-autocomplete-category {
    padding-left: 5px;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    background-color: #006187 !important;
    color: white !important;
}

.ui-menu .ui-menu-item {
    font-family: 'Montserrat';
    padding-left: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 200;
    max-height: 25px;
    min-height: 25px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    width: 100%;
    overflow-y: hidden;
}

.ui-menu-item {
    overflow-x: hidden;
    white-space: nowrap;
}
/*end autocomplete css*/
header {
    background-color: #006187;
    /*background-color: #f9b2f9;*/    
    z-index: 3;
    position: fixed;
    height: 70px;
    width: 100%;
    display: none;
    align-items: center;
}
.cancelwarning-img{ 
    height: 50px;
    position: absolute;
    top: 20px;
}
.expirywarning {
    display: none; 
    text-align: center;
    position: fixed; top: 0px; 
    left: 0px; right: 0px; 
    margin: 0 auto;
    width: 1200px;
    height:60px;
    padding-top: 10px;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
    background-color: red;
    color: white;
    z-index: 100;
}
#newupdate{
    display: none;
    cursor: pointer;
    margin-top: 5px;
    font-size: 13px;
    color: red;
}
#newupdate:hover {
    text-decoration: underline;
    color: lightgray;
}
#topsettings {
    display: flex;
    justify-content: flex-end;
    align-items: center;    
    margin-left: auto;
    height: 100%;
    width: 1000px;
}
.topiconcalc, .chpasslink, .paylink {
    margin-right: 20px;
    cursor: pointer;
    height: 30px;
}
.paylink {
    height: 45px;
}
#rzpclose {
    position: absolute;
    top: 8px; right: 100px; 
    height: 25px; line-height: 25px; 
    text-align: center;
    font-size: 13px;
    background-color: white;
    width: 25px;
    border-radius: 50%;
    cursor: pointer;
}
.rzpsalon {
    display: flex; align-items: center;
    justify-content: center;
    height: 40px;
    border-bottom: 1px solid lightgray;
}
#rzpsalonselect-title {
    font-size: 14px; 
    margin-right: 20px;
}
#rzp {
    position: absolute;
    width: 900px;
    height: 800px;
    border: 1px solid #2d3131;
    margin: 50px auto;
    display: none;
    left: 0;
    right: 0;
    overflow-y: scroll;
    background-color: white;
    z-index: 101;
}
#rzptitle{ 
    height: 40px; line-height: 40px; 
    text-align: center;
    font-size: 15px; 
    background-color: #2d3131; color: white;
}
.rzp-line{ 
    width: 100%;
    margin: 30px auto 0 auto;
    height: 1px; 
    background-color: lightgray;
}
.rzp-subtable {
    width: 825px;
    margin: 0px auto;
}
.rzp-subtable-line:first-of-type {
    border-top: 1px solid lightgray;
}
.rzp-subtable-line-head{ 
    font-weight: 600;
    height: 50px !important;
}
.rzp-subtable-line {
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.rzp-sub-select-error{ 
    height: 25px; line-height: 25px; 
    font-size: 15px; 
    color: red;
    text-align: center;
}
.rzp-tab-rzp-wait {
    margin-top: 150px;
    font-size: 40px;
    text-align: center;
    color: #006187;
}
.rzp-tab-rzp{ 
    text-align: center;
}
.rzp-link {
    margin: 20px auto;
    width: 890px;
    height: 600px;
}
.rzp-subtable-value{
    width: 200px;
    text-align: center;
    padding-left: 15px;
}
.rzp-subtable-value-small {
    width: 150px;
    font-size: 14px;
    text-align: center;
    padding-left: 15px;
}
.rzp-subtable-cover { 
    background-color: white;
    opacity: 0.8;
    height: 230px; 
    width: 830px;
    position: absolute;
    top: 100px; 
    left: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #006187;
}
.rzp-tab {
    display: none;
    position: relative;
}

.rzp-tab-rzp-opt-1 { 
    border-top: 1px solid lightgray;
}
.rzp-tab-rzp-opt {
    border-bottom: 1px solid lightgray;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: center;
}
.rzp-tab-rzp-opt-paynow { 
    cursor: pointer;
    height: 30px; line-height: 30px;
    background-color: #006c5b; color: white;
    width: 200px;
    margin: 0 auto;
}
.rzp-tab-rzp-opt-link{ 
    color: #006187;
    font-size: 20px;
    margin-bottom: 10px;
    height: 30px; line-height: 30px;
}
.rzp-tab-rzp-opt-phone{ 
    text-align: center;
    background-color: #e5e5e5;
    height: 30px; width: 200px;
}
.rzp-tab-rzp-opt-sendlink{ 
    margin-left: 20px;
    cursor: pointer;
    height: 30px; line-height: 30px;
    background-color: #006187; color: white;
    width: 100px;
}
.szp-sub-select {
    height: 25px;
    width: 25px;
}
.rzp-buttons{ 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; 
    height: 50px; 
}
.rzp-button {
    border-radius: 10px;
    height: 40px; line-height: 40px; 
    font-size: 15px; 
    text-align: center;
    width: 150px; 
    cursor: pointer;
}
.rzp-buttons-back {
    background-color: #006187; color: white;
}
.rzp-buttons-next {
    margin-left: 20px;
    background-color: #006c5b; color: white;
}
.rzp-expiry-text {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 25px;

}
#nobilling{ 
    position: fixed;
    padding-top: 200px;
    color: #006187;
    font-weight: 600;
    height: 1000px;
    width: 100%;
    background-color: white;
    opacity: 0.8;
    z-index: 101;
    display: flex;
    justify-content: center;        
    font-size: 30px;
    top: 110px;
    left: 101px;

}
.rzp-sms-due{ 
    height: 50px; line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #006187;
}
.rzp-expiry-subtext {
    background-color: #006187;
    color: white;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
}
.rzp-tab-print{ 
    position: absolute;
    height: 25px; 
    cursor: pointer;
    right: 30px;
}
.rzp-paymanual { 
    display: flex;
    align-items: center;
    justify-content: center;
}

#rzp-expiry {
    color: #006187;
    font-weight: 600;
}
.rzp-manual-select{ 
    height: 30px; 
    font-family: Montserrat;
    width: 120px;
    text-align: center;
}
.rtot-item-head{ 
    font-weight: 600;
}
.rtot-item-head div {
    cursor: pointer;
}

.rtot-item-head div:hover { 
    text-decoration: underline;
}

#rzp-tab-overview-desc{ 
    margin-top: 20px;
    font-size: 14px; 
    text-align: center;
}
#rzp-tab-overview-table {
    width: 700px;
    margin: 20px auto;
    height: 400px; 
    overflow-y: scroll;
    background-color: #e5e5e5;
}
.rtot-item:nth-of-type(2n+1) {
    background-color: lightgray;
}
.rtot-item, .rtot-item-head {
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 30px;
    border-bottom: 1px solid lightgray;
}
.rtot-name {
    padding-left: 10px;
    width: 300px;
}
.smalltext {
    font-size: 13px;
}
.rtot-expiry, .rtot-sms {
    width: 300px;
    text-align: center;white-space: nowrap;
    overflow-x: hidden;
}
.rzp-maual-input {
    margin-left: 20px;
    text-align: center;
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    width: 150px;
}
.rzp-maual-amount {
    margin-left: 20px;
    text-align: center;
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    width: 80px;
}
.rzp-maual-date {
    margin-left: 20px;
    text-align: center;
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    width: 150px;
}
.rzp-maual-email {
    margin-left: 20px;
    text-align: center;
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    width: 150px;
}
.rzp-maual-submit {
    width: 70px;
    background-color: #006c5b;
    color: white;
    font-size: 14px;
    text-align: center;
    height: 30px;
    cursor: pointer;
    line-height: 30px;
    margin-left: 20px;
}
.rzp-tab-summary {
    position: relative;
    padding-top: 30px;
}
.rzp-summary-line {
    width: 700px;
    margin: 0 auto;
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.rzp-expiry-smalltext-2 {
    text-align: center;
    font-size: 15px;
    width: 500px;
    margin: 0px auto 10px auto;

}
.rzp-expiry-smalltext {
    text-align: center;
    font-size: 15px;
    width: 700px;
    margin: 10px auto 0 auto;
    color: #006187;
}
.rzp-expiry-invtext{     
    font-size: 14px;
    width: 700px; 
    margin: 0 auto;    
}
.rzp-expiry-tinytext{     
    text-align: left;
    font-size: 13px;
    width: 700px; 
    margin: 0 auto 10px 10px;
    color: #006187;
}
.rzp-summary-line-name {
    width: 300px;
    text-align: left;
    padding-right: 10px;
}
.rzp-summary-line-value {
    width: 300px;
    text-align: right;
    padding-left: 20px;
}
.rzp-summary-top{ 
    display: flex;
}
.rzp-inv-logo{ 
    height: 60px;
    margin-bottom:10px;
}
.rzp-whitespace{ 
    height: 20px; 
    width: 100%;
}
.rzp-button-permission{ 
    text-align: center;
    color: red;
}
.rzp-proforma {
    color: #006c5b;
    margin-left: auto;
    margin-right: 20px;
    font-weight: 600;
}
.rzp-tnc-image{ 
    height: 500px;
}
.rzp-tnc-box {
    border: 1px solid lightgray;
    position: absolute;
    z-index: 101;
}
.rzp-tnc {
    font-size: 13px; font-weight: 600;
    color:red;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
}
.rzp-summary-salon {
    position: absolute;
    padding: 10px;
    right: 20px;
    top: 50px;
    font-size: 13px;
    min-height: 100px;
    width: 300px;
    border: 1px solid lightgray;
}
#rzp-proforma-holder{ 
    padding: 20px;
    height: 580px;
    width: 700px;
    position: relative; 
    margin: -20px auto 0 auto;
    border: 2px solid gray;
}
#oldpaymentnotdone {
    background-color: white;
    position: absolute;
    height: 100%;
    width: 100%;
    color: red;
    text-align: center;
    padding-top: 50px;
    font-size: 15px;
}
.rzp-manual-block {
    position: absolute;
    height: 140px;
    background-color: white;
    opacity: 0.9;
    width: 100%;
    display: flex;
    color: #006187;
    text-align: center;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
.paytext {
    animation: blinker 1s linear infinite;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    margin-right: 30px;
    color: #e67575 !important;
    font-weight: 600;
}
.rzpsupport{ 
    font-size: 15px; 
    height: 30px; line-height: 30px; 
    text-align: center;
    background-color: lightblue;
}
.paytext:hover {
    text-decoration: underline;
}
.rzp-sms-list {
    height: 170px;
    overflow-y: scroll;
    border: 1px solid lightgray;
}
.rzp-sms-list-item {
    font-size: 13px;
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.rzp-sms-list-item-name{ 
    padding-left: 5px;
    width: 400px;
}
.rzp-sms-list-item-value { 
    width: 100px;
}

.topiconhelp {
    margin-right: 20px;
    cursor: pointer;
    height: 35px;
}
.topicon {
    margin: 10px;
    margin-right: 10px;
    cursor: pointer;
    height: 30px;
}

#login {
    margin: 20px auto;
    padding: 10px;
    width: 700px;
    display: flex;  
}
#geetanjalistuff {
    display: none;
}
#loginpin {
    text-align: center !important;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    color: white;
}
#hrcontent {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.everything {
    margin-top: 0px !important;
    padding-top: 70px;
    display: none;
}

#hideinactivestaff {
    height: 20px; width: 20px;
    cursor: pointer;
}
#hideinactivestafftext {
    margin-left: 10px; font-size: 13px;
}
#appcover {
    display: none;
    z-index: 100;
    position: absolute;
    height: 100vh;
    width: 90%;
    top: 70px;
    left: 100px;
    background-color: white;
    padding-left: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#noentry {
    height: 500px;
}

#noentrytext {
    margin: 400px 0 0 20px;
    font-size: 25px;
    color: #006187;
}

.everythingelse {
    padding-left: 100px;
}

#billsalontitle {
    font-size: 15px;
    margin-right: 10px;
}

#billsalon {
    width: 300px;    
    height: 30px;
    outline: none;
}
#staffservcelogsalonlist {
    width: 200px;    
    height: 30px;
    outline: none;
}
#billjobcards {
    display: none;
    min-height: 200px;
    width: 400px;
    z-index: 3;
    background-color: white;
    border: 1px solid lightgray;
}

#billjobcardstitle {
    margin-left: 50px;
    font-size: 14px;
    cursor: pointer;
}

    #billjobcardstitle:hover {
        text-decoration: underline;
    }

#billjobcards {
    overflow-y: scroll;
    z-index: 2;
    position: absolute;
}

.makeitemerror, #membershiperror {
    margin-top: 10px;
    text-align: center;
    color: #e67575;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
}

#addclienterror {
    color: red;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    padding-left: 30px;
}

.billjobcard {    
    color: #2d3131;
    text-align: left;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
}

#cmcover {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: white;
    opacity: 0.7;
    z-index: 2;
}

.cmdata, .fcdata {
    display: none;
}

.cmsavepic {    
    height: 20px;
    cursor: pointer;
}

.cmpic {
    top: 5px;
    right: 50px;
    cursor: pointer;
    height: 30px;
    position: absolute;
}

#cmadvance, #cmcards, #cmmembership,  #fcmembership, #cmservices, #cmadminadvance, #fcadvance, #cmadmincards, #fccards, #cmadminmembership, #cmadminservices, #fcservices {
    margin-top: 20px;
    border-top: 1px solid lightgray;
    padding: 10px 0 0 0;
    font-size: 15px;
    font-weight: 600;
}

.cmadvanceitem, .cmcarditem, .cmmembershipitem, .cmserviceitem, fcadvanceitem, .fccarditem, .fcmembershipitem, .fcserviceitem {
    margin-top: 10px;
    font-weight: 300;
    font-size: 13px;
}
.clientMetaInput {
    margin-top: 10px;
    min-width: 250px;
    max-width: 250px;
    border: none;
    outline: none;
    background-color: #e5e5e5;
    height: 25px;
    line-height: 25px;
    font-family: 'Montserrat';
    text-align: center;
}

.clientMeta {
    text-align: left;
    margin: 5px 0 5px 0;
}

#cmname, #cmadminname, #fcname {
    font-size: 20px;
    color: #006187;
    font-weight: 600;
}

#oldclientmembershiptitle {
    margin-top: 10px;
}

.clmembership {
    font-size: 13px;
    padding: 10px 0 10px 20px;
    line-height: 30px;
}

.billjcname {
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    padding-left: 10px;
}

.billjcservice {
    height: 15px;
    line-height: 15px;
    font-size: 13px;
    padding-left: 15px;
}

.billjobcard:hover {
    background-color: #e5e5e5;
}

#billtitle {
    align-items: center;
    padding-left: 20px;
    display: flex;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100%;
    background-color: #2d3131;
    color: white;
}

#newclientbutton {
    color: #006187;
    border-right: 1px solid gray;
    right: 30px;
    bottom: 0px;
    padding-bottom: 10px;
    font-size: 35px;
    font-weight: 100;
    font-family: 'Segoe UI';
}

#dummyclientbutton {
    color: #006187;
    right: 0px;
    bottom: 0px;
    padding-bottom: 5px;
    font-size: 25px;
    font-weight: 100;
    font-family: 'Segoe UI';
}

#newclientbutton, #dummyclientbutton {
    cursor: pointer;
    position: absolute;
    height: 25px;
    line-height: 25px;
    width: 30px;
    text-align: center;
}

#savenewclient {
    color: #006187;
    height: 30px;
    line-height: 30px;
    width: 150px;
    font-size: 17px;
    text-align: center;
    cursor: pointer;
    margin-left: auto;
}

    #savenewclient:hover {
        background-color: #e5e5e5;
    }

#newclientphone {
    border: none;
    outline: none;
    background-color: #e5e5e5;
    text-align: center;
    font-family: 'Montserrat';
    height: 30px;
    line-height: 30px;
    width: 250px;
    margin-bottom: 15px;
    margin-left: 30px;
}

#newclientfirst {
    margin-left: 30px;
    margin-right: 6px;
}

#newclientfirst, #newclientlast {
    border: none;
    outline: none;
    background-color: #e5e5e5;
    text-align: center;
    font-family: 'Montserrat';
    height: 30px;
    line-height: 30px;
    width: 120px;
}

#newclientemail {
    margin: 15px 0 15px 30px;
    border: none;
    outline: none;
    background-color: #e5e5e5;
    text-align: center;
    font-family: 'Montserrat';
    height: 30px;
    line-height: 30px;
    width: 250px;
}

#newclientbday, #newclientgst, #newclientnotes {
    margin: 0 0 15px 30px;
    border: none;
    outline: none;
    background-color: #e5e5e5;
    text-align: center;
    font-family: 'Montserrat';
    height: 30px;
    line-height: 30px;
    width: 250px;
}

#existingclient {
    padding-top: 10px;
    position: relative;
}

#existingclientcover {
    position: absolute;
    height: 280px;
    width: 100%;
    background-color: white;
    opacity: 0.8;
    display: none;
    z-index: 2;
}

#newclient, #existingclient, #dummyclient {
    display: none;
}

#dummyclient {
    height: 200px;
}

#dummyclienttext {
    font-size: 16px;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#newclient {
    padding-top: 15px;
}

#newclientsex {
    margin-left: 20px;
    margin-bottom: 15px;
}

#oldclientsex, #newclientsex {
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
    align-items: center;
    height: 25px;
    line-height: 25px;
    color: black;
}

#oldclientsex {
    margin-top: 10px;
}

#oldclientmale, #oldclientfemale, #newclientmale, #newclientfemale {
    background-color: #e5e5e5;
    width: 60px;
    text-align: center;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
}

.saveclientdetail {
    cursor: pointer;
    margin-left: 5px;
    height: 20px;
    width: 20px;
}

#oldclientfirst, #oldclientphone {
    padding-left: 20px;
    height: 35px;
    line-height: 30px;
    font-weight: 200;
}
#oldclientpin {
    font-weight: 600;
    font-size: 15px;
    position: absolute;
    color: #006187;
    right: 20px;
    top: 50px;
}
#oldclientemail, #oldclientbday, #oldclientgst, #oldclientnotes {
    background-color: #e5e5e5;
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 250px;
    margin-left: 10px;
    font-family: 'Montserrat';
}

#oldclientemail {
    margin-bottom: 5px;
}

#oldclientfirst {
    font-size: 22px;
    color: #006187;
    font-family: 'Montserrat';
}

#oldclientphone {
    font-size: 16px;
    color: #2d3131;
}

#oldclientemail, #oldclientbday {
    font-size: 14px;
}

#billsearch {
    position: relative;
    height: 60px;
}

#rubbish {
    background-color: #e5e5e5;
    outline: none;
    border: none;
    height: 60px;
    width: 280px;
    font-family: 'Montserrat';
    font-size: 16px;
    text-align: left;
    padding-left: 20px;
}

#clientdetail {
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

.clientsectiontitle {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    text-align: center;
    background-color: #006187;
    color: white;
    border-bottom: 1px solid lightgray;
}

.clienthistoryitem:hover {
    background-color: #e5e5e5;
}

    .clienthistoryitem:hover > div {
        background-color: #e5e5e5;
    }

.clienthistoryitem, .clienthistoryitemhead {
    cursor: pointer;
    padding-left: 10px;
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid lightgray;
    display: flex;
}
.clienthistoryitemhead > div { font-weight: 600; }
.clientupsellitem {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid lightgray;
    font-size: 12px;
    padding-left: 10px;
}

#closebilloptions {    
    border-top: 1px solid lightgray;
    padding-top: 10px;
    text-align: center;
}

.closebilloption {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}

.closebillemail {
    text-align: center;
    font-family: 'Montserrat';
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
    width: 100%;
    background-color: #e5e5e5;
}

.closebilloptiontext {
    font-size: 14px;
    margin-right: 20px;
}

.closebilloptioncheckbox {
    height: 15px;
    width: 15px;
    cursor: pointer;
}

    .closebilloptioncheckbox:nth-of-type(1) {
        margin-left: 20px;
    }

.clienthistoryitemname {
    font-size: 12px;
    min-width: 130px;
    max-width: 130px;
    white-space: nowrap;
    overflow-x: hidden;
}
.clienthistoryitembill{ 
    width: 20px;
}
.clienthistoryitemdate {    
    font-size: 12px;
    padding-left: 5px;
    font-family: 'Montserrat';
    min-width: 50px;
    max-width: 50px;
}

.clienthistoryitemprice {    
    font-size: 12px;
    text-align: center;    
    padding-right: 10px;
    font-family: 'Montserrat';
    width: 60px;
}

#oldclientworking {
    height: 15px;
    margin: 10px;
    line-height: 15px;
    font-size: 12px;
    color: #64c466;
    display: none;
}

.homestatuslogo {
    width: 200px;    
    margin-bottom: 30px;
}
#homestatus {
    text-align: center;
    top: 20%;
    left: 35%;
    z-index: 102;
    position: absolute;
    width: 400px;    
    background-color: #2d3131;
    color: white;
    padding: 20px;
    opacity: 0.8;
}

.homestatustick {
    height: 20px;
    text-align: right;
    margin-left: auto;
}

.homestatusitem {
    height: 25px;
    margin-bottom: 15px;
    line-height: 25px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.homestatusitemname {
    width: 200px;
    font-size: 15px;
    text-align: left;
}

#clientupselling {
    display: none;
}

.payhistoryclientcards {
    margin-left: 5px;
    font-size: 13px;
}

.payhistoryclientcard {
    font-size: 12.5px;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid lightgray;
    font-family: 'Montserrat';
    cursor: pointer;
}

.payhistorytitle {
    font-family: 'Montserrat';
    font-size: 15px;
    background-color: #2d3131;
    color: white;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.payhistoryclientcard:hover {
    text-decoration: underline;
    color: #006187;
}

.seepayhistory {
    color: #006187;
    cursor: pointer;
    margin-left: 10px;
    font-size: 13px;
   
    height: 25px; line-height: 25px;
}

    .seepayhistory:hover {
        text-decoration: underline;
    }

#oldclientpaybalance {    
}

#oldclientpaybalancevalue, #oldclientpaybalanceadvance, #oldclientcreditlimit {
    min-height: 30px;
    max-height: 30px;
    padding-left: 15px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid lightgray;
}

#oldclientservicebalance {
    cursor: pointer;
    height: 20px;
    line-height: 20px;
    padding-left: 15px;
    font-size: 13px;
    color: #006187;
    margin-top: 5px;
    margin-bottom: 10px;
}

#clienthistory {
    height: 300px;
    border-bottom: 1px solid lightgray;
    overflow-y: scroll;
}

#billlanding {
    position: relative;
    height: 894px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.billmain4tabstaff, .billmain4tabinvoices {
    width: 450px;
}
#staffActivity {
    color: black;
    border-bottom: 1px solid lightgray;
    height: 60px;
    line-height: 60px;
    cursor: pointer;    
    text-align: center;
}
#billActivity {
    display: flex;  
    justify-content: center;
    align-items: center;
    height: 60px;
}
.billshowapps {
    height: 20px; width: 20px; cursor: pointer;
    margin-left: 80px;
}
.billshowapps-title { 
    font-size: 12px; 
}
.newapp-link {
    font-size: 13px; font-weight: 600;
    margin-left: 20px;
    cursor: pointer;
    color: #006187;
    padding: 7px;
    border-radius: 10px;
}

.billshowapps-title {
    font-size: 13px;
}
#staffActivity {
    cursor: default;
    height: 40px;
    line-height: 40px;
}
.triangle-right {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-left: 28px solid #006187;
    border-bottom: 14px solid transparent;
}

.triangle-right1 {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-left: 28px solid #006187;
    border-bottom: 14px solid transparent;
}

#newbill {
    user-select: none;
    color: #006187;
    height: 60px;
    line-height: 60px;
    width: 100%;
    font-size: 22px; font-weight: 600;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    top: 0;
    left: 0;
    text-align: center;
}

.billmaintitle {
    position: relative;
    text-align: left;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 29px;
    height: 29px;
    width: 100%;
    display: flex;
}

#billmain1, #billmain3 {
    height: 100%;
}

#billmain1 {
    min-width: 380px;
    max-width: 380px;
}

#billmain3 {
    min-width: 400px;
    max-width: 400px;
    text-align: center;
    border-right: 1px solid lightgray;
}

#billmain4 {
    min-width: 500px;
    max-width: 500px;
    text-align: center;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
}
#billmain2 {
    min-width: 450px;
    max-width: 450px;
    text-align: center;
    border-right: 1px solid lightgray;
}

#jobcardsrefresh {
    color: #006187;
    position: absolute;
    right: 100px;
    top: 2px;
    font-size: 14px;
}

#jobcards {
}

.jobcard:nth-of-type(2n+1) {
    background-color: #e5e5e5;
}

.jobcard {
    min-height: 70px;
    cursor: pointer;
    padding: 5px 0 25px 10px;
    position: relative;
    overflow-y: hidden;
    border-bottom: 1px solid lightgray;
}

.jcname {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}

.jcnumber {
    position: absolute;
    bottom: 5px;
    left: 10px;
    color: #006187;
    font-family: 'Montserrat';
    text-align: left;
    font-size: 14px;
}
.rzp-sendlink { 
    display: flex; justify-content: center; align-items: center;    
}
.jcservice {
    text-align: left;
    font-size: 12px;
}
.rzp-terms { 
    display: flex; 
    align-items: center;
    justify-content: center;
}
.jctime {
    font-size: 14px;
    font-weight: 600;
    color: #09aa25;
    position: absolute;
    right: 10px;
    bottom: 2px;
    font-family: 'Montserrat';
}

.jcjobcard{ 
    position: absolute;
    right: 12px;
    top: 50px;
    height: 20px;
    cursor: pointer;
}
.jcdelete {
    position: absolute;
    right: 10px;
    top: 15px;
    height: 25px;
    cursor: pointer;
}

#newapp {
    text-align: center;
    z-index: 2;
    position: absolute;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    top: 0px;
    left: 0px;
    display: none;
    background-color: #e5e5e5;
    border-bottom: 1px solid lightgray;
}

.timepicker {
    height: 20px;
    line-height: 20px;
    outline: none;
    border: none;
    margin-left: 5px;
    width: 100px;
    text-align: center;
    z-index: 100;
}
.timepicker option { 
    height: 20px;
}
#newappclient {
    text-align: center;
    width: 250px;
    outline: none;
    border: none;
    height: 30px;
    line-height: 30px;
    background-color: white;
    font-family: 'Montserrat';
    font-size: 14px;
    margin-top: 10px;
}

#billmainclientsearch {
    text-align: center;
    width: 250px;
    outline: none;
    border: none;
    height: 30px;
    line-height: 30px;
    background-color: #e5e5e5;
    font-family: 'Montserrat';
    font-size: 14px;
    margin: 0px auto 0 auto;
}
#billmainnamesonly {
    position: absolute;
    top: 0px; right: 10px;
    display: flex; justify-content: center; align-items: center;
}
#billmainnamesonlycheckbox {        
    height: 20px; width: 20px; 
    cursor: pointer;    
}
#billmainnamesonlytitle {    
    font-size: 12px;
}
#adminclientsearch { 
    text-align: center;
    width: 250px;
    outline: none;
    border: none;
    height: 30px;
    line-height: 30px;
    background-color: white;
    font-family: 'Montserrat';
    font-size: 14px;
    margin: 20px 0 0 30px;
}
#newappservice, #newappstaff {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

#newappservicesearch, #newappstaffsearch {
    margin-right: 10px;
    text-align: center;
    width: 200px;
    height: 30px;
    line-height: 30px;
    background-color: white;    
    font-size: 14px;
}

#newappbuttons {
    margin-top: 20px;
    display: flex; justify-content: center;
    height: 30px;
    width: 100%;
}

.newappbutton:nth-of-type(1) {
    background-color: darkgrey;
    color: white;
    width: 80px;
}

.newappbutton:nth-of-type(2) {
    background-color: #006c5b;
    color: white;
    margin-left: 20px;
    width: 160px;
}

#newappnotes {
    font-family: 'Montserrat';
    font-size: 14px;
    margin-top: 10px;
    padding: 5px;
    height: 100px;
    width: 250px;
    border: none;
    outline: none;
    resize: none;
}

.newappbutton {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    width: 50%;
    text-align: center;
    font-size: 14px;
}

#newappdate {
    text-align: center;
    width: 150px;
    outline: none;
    border: none;
    height: 30px;
    line-height: 30px;
    background-color: white;
    font-family: 'Montserrat';
    font-size: 14px;
    margin-top: 10px;
    margin-right: 5px;
}

#newapptime {
    text-align: center;
    width: 90px;
    outline: none;
    border: none;
    height: 30px;
    line-height: 30px;
    background-color: white;
    font-family: 'Montserrat';
    font-size: 14px;
    margin-top: 10px;
}

#newapptitle {
    text-align: center;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}

.apConfirm {
    margin-top: 5px;
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid lightgray;
    background-color: #e5e5e5;
}

.apccaption {
    margin-left: 10px;
    font-size: 13px;
    text-align: left;
}

.apcstatus {
    display: none;
    margin-left: 10px;
    font-size: 12px;
    color: #006187;
    width: 70px;
}

.apccheckbox {
    height: 20px;
    width: 20px;
    margin-left: 10px;
    cursor: pointer;
}

#billmainclientcheck {
    max-height: 600px;
    margin-top: 20px;
    text-align: left;
    padding: 0 0 0 10px;
    position: relative;
    overflow-y: auto;
}

#billbody {
    height: 894px;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}

#billeditshow {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    background-color: #d79f2b;
    color: white;
}

#billclient {
    min-width: 300px;
    max-width: 300px;
    height: 100%;
}

#billclientcover {
    position: absolute;
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    z-index: 2;
    background-color: white;
    display: none;
    opacity: 0.8;
}

#billitems {
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    min-width: 700px;
    max-width: 700px;
    height: 100%;
    position: relative;
}

#billitemscover {
    opacity: 0.7;
    display: none;
    top: 0;
    left: 300px;
    height: 100%;
    min-width: 700px;
    max-width: 700px;
    position: absolute;
    background-color: white;
    height: 90px;
    z-index: 2;
}

#billsummarycover {
    position: absolute;
    display: none;
    min-width: 602px;
    max-width: 602px;
    height: 894px;
    background-color: white;
    opacity: 0.3;
    z-index: 2;
    top: 0px;
    left: 0px;
}

#billlist {
    min-width: 600px;
    max-width: 600px;
}

#billsummary {
    position: relative;
    border-right: 1px solid lightgray;
    min-width: 600px;
    max-width: 600px;
    height: 894px;
    border-bottom: 1px solid lightgray;
}

#billsummarytitle {
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background-color: #006187;
    color: white;
}

#billitemstop {
    position: relative;
    display: flex;
    height: 90px;
    border-bottom: 1px solid lightgray;
}

#billitemstopcover {
    opacity: 0.7;
    display: none;
    height: 90px;
    width: 700px;
    position: absolute;
    background-color: white;
    height: 90px;
}

#billitemstopcoverleft {
    opacity: 0.7;
    display: none;
    height: 90px;
    width: 470px;
    position: absolute;
    background-color: white;
    height: 90px;
    z-index: 2;
}

#membershipselect:hover {
    background-color: #006187;
    color: white;
}

.billotheritems {
    user-select: none;
    cursor: pointer;
    font-size: 13.5px;
    font-family: 'Montserrat';
    height: 45px;    
    width: 99px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1px;
}

    .billotheritems:nth-of-type(1) {
        /*background-color: #d79f2b;*/
        /*color: white;*/
    }

    .billotheritems:nth-of-type(2) {
        border-left: 1px solid lightgray;
        /*background-color: #2d3131;*/
        /*color: #d79f2b;*/
    }

    .billotheritems:nth-of-type(3) {
        border-top: 1px solid lightgray;
        /*background-color:#006c5b;*/
        /*color: white;*/
    }

    .billotheritems:nth-of-type(4) {
        border-top: 1px solid lightgray;
        border-left: 1px solid lightgray;
        /*background-color: darkgrey;*/
        /*color: black;*/
    }

.resetprice, .resetproductprice {
    position: absolute;
    right: 70px;
    font-size: 13px;
    margin-left: 10px;
    color: #006187;
    cursor: pointer;
}

    .resetprice:hover, .resetproductprice:hover {
        text-decoration: underline;
    }

.billotheritems:hover {
    background-color: #2d3131;
    color: white;
}

.billsearchitem:nth-of-type(3) {
    display: flex;
    flex-wrap: wrap;
}

.last4billitems {
    position: absolute;
    right: 0px;
    height: 90px;
    width: 230px;
    opacity: 0.7;
    background-color: white;
    z-index: 2;
}

.billsearchitem {
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
}
.barcodereader {
    padding: 10px;
    position: absolute;
    z-index: 2;
    width: 250px;
    min-height: 50px;
    background-color: #e5e5e5;    
    border: 1px solid lightgray;
}
.barcodeerror {    
    margin-top: 10px;
    
    color: #e67575; font-size: 12px;
}
.barcodereaderinput {
    text-align: center;
    height: 30px;line-height: 30px; font-family: 'Montserrat';
}
.billsearchitemicon, .billitempackageselect {
    cursor: pointer;
    margin-left: 10px;
    height: 30px;
}
.billsearchitemicon1{
    cursor: pointer;
    margin-left: 5px;
    height: 30px;
}
.newappserviceselect {
    cursor: pointer;
    margin-left: 15px;
    height: 30px;
}

.billsearchitembox {
    font-family: 'Montserrat';
    height: 35px;
    width: 170px;
    text-align: center;
    background-color: #e5e5e5;
    border: none;
    outline: none;
}
#billservicecheck, #billproductcheck {
    width: 150px !important;
}
#billitemsbottom {
    height: 803px;
    border-bottom: 1px solid lightgray;
}
#forgotpass {
    margin-top: 20px;
    display: none;
    font-size: 14px;
    cursor: pointer;
}
#fpholder {
    padding: 20px;
    display: none;
    text-align: center;
    background-color: #006187;
    width: 400px; 
    margin: 20px auto;
}
.useremail { 
    color: lightblue;
}
.fpsendcode {
    margin: 20px auto 0 auto; font-size: 13px;
    width: 100px;  cursor: pointer; height: 30px; line-height: 30px;
    background-color: #e5e5e5; color: black;
}
.fpentercode {
    margin-top: 20px;
    display: none;
    background-color: #e5e5e5;
    height: 30px; line-height: 30px;
    width: 75px; text-align: center;
}
.resetpass1, .resetpass2 {
    height: 30px; line-height: 30px; 
    background-color: #e5e5e5;
    text-align: center;
    margin-left: 10px;
    margin-top: 20px;
    width: 150px;
}
.logincodecheckresult, .resetpasswordresult {
    margin-top: 20px;
}
.fpentercodeinfo, .logincodecheckresult, .resetpasswordresult {
    display: none;
    font-size: 12px;
}
.fpmessage{
    font-size: 13px;
}
#forgotpass:hover {
    text-decoration: underline;
}
#password {
    text-align: center;
    margin-top: 30px;
    outline: none;
    border: none;
    height: 40px;
    line-height: 40px;
    font-family: 'Montserrat';
    background-color: #e5e5e5;
    width: 250px;    
    display: none;
}
.machauth{
    position: absolute;
    background-color: #2d3131;
    color: white;
    width: 400px;padding: 20px;
    border: 1px solid lightgray;
    text-align: center;
    top: 200px; 
    z-index: 102;
    left: 0; right: 0; 
    margin: 200px auto;
    border-radius: 15px;
}
.machauthtext {
    text-align: left;
    font-size: 15px;    
}
.machauthsendcode {
    margin: 20px 0 20px 0;
    display: flex; justify-content: center; align-items: center;
    height: 30px;
    cursor: pointer;
}
.machauthsubmit {
    background-color: #64c466; 
    height: 30px; line-height: 30px; 
    text-align: center; width: 150px;
    margin: 20px auto;
    font-size: 14px;
    cursor: pointer;
    display: none;
}
.machautherror {
    display: none;
    margin: 20px;
    font-size: 13px; 
    color: red;
}

.machauthsend{
    background-color: #006187; color: white;
    width: 120px; font-size: 15px; text-align: center;
    height: 40px; line-height: 40px;
    cursor: pointer;
}
.machauthsent{
    display: none;
    color: green;
    font-size: 14px; 
    margin-left: 10px;
}
.machauthpin{ margin-top: 20px;}
.machauthcode{ display: none; }

.machauthcode, .machauthpin {    
    background-color: #e5e5e5;
    height: 30px; width: 200px; text-align: center;    
}
#nocookie {
    display: none;
    font-size: 13px; 
    color: #006187;
    margin-top: 30px;
    text-align: center;
}
#pin {
    text-align: center;
    margin-top: 20px;
    outline: none;
    background-color: #e5e5e5;
    border: none;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-family: 'Montserrat';
    width: 250px;
}

.logintitle {
    font-size: 15px;
    margin-bottom: 10px;
}

#pinerror, #loginerror {
    margin-top: 10px;
    color: #98f7dd;
    font-size: 14px;
}

#home {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#start {        
    padding-top: 50px;
    padding-left: 0px !important;
    height: 100vh;
    background-size: cover;
}

#startContent {    
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
}
.geetu_logo, .geetu_studio_logo {
    display: none;
    height: 100px;
}
#sumit {   
    margin-left: 150px;
    background-image: url('../images/sumit.jpg');
    background-size: auto;
    background-repeat: no-repeat;
}

.topflex {
    position: relative;
    width: 1220px;
    margin-top: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 300px;
}
#guagetable {
    width: 100%;
    height: 120px;
}
.gtline {
    display: flex;
    justify-content: flex-start; align-items: center;
    height: 60px;    
}
.gtvalue { 
    width: 140px;
    height: 60px;
    position: relative;
}
.gtline:nth-of-type(1) {
    border-bottom: 1px solid lightgray;
}
.gtvalue2, .gtvalue4 {
    border-left: 1px solid lightgray;
}
.gtvaluedesc {    
    padding-left: 10px;
    height: 20px; line-height: 20px;
    font-size: 10px;
}
.gtvaluers{
    height: 30px; line-height: 30px; text-align: center;
    font-weight: 600;
}
.gtvalue1 .gtvaluers { color: #006187; }

#mainchart1 {
    width: 300px;
    height: 160px;
}

#targetshistory, #mainchart2 {
    border: 1px solid lightgray;
    width: 580px;
    height: 100%;
    margin-left: 20px;border-radius: 10px;
}
.ndheader{
    width: 180px; font-size: 15px;
    height: 30px;line-height: 30px;
    text-align: center; cursor: pointer;    
}

.ndSummaryTitle {
    border-bottom: 2px solid #108590;
    margin-bottom: 10px;
    width: 1120px;
    font-size: 14px;
}

#ndhsec1, #ndhsec2, #ndhsec3 {
    padding-top: 20px; 
    padding-bottom: 20px;
    display: flex; justify-content: flex-start; align-items: flex-start;
    border-bottom: 1px solid lightgray;
}
.ndhpart {
    /*background-color: #e5e5e5;*/
    border: 1px solid lightgray;
    margin-left: 30px; 
    padding: 10px; 
    height: 150px;
}
.ndhpart:nth-of-type(2) {
    width: 250px;
}
.ndfitem, .ndfitem1 {
    display: flex; height: 40px; align-items: center;
    margin-bottom: 10px;
}
.ndhretc, .ndhconc, .ndhallc, .ndhrets, .ndhcons, .ndhalls {
    color: #006187 !important;    
    font-size: 16px;
}
.ndhname {
    font-size: 14px;
    width: 150px;
    text-align: right;
    padding-right: 10px;
}
.ndhname1 {
    font-size: 14px;
    width: 120px !important;
    text-align: center;
    padding-right: 10px;
}
.ndhvalue1 { 
    width: 120px; 
    text-align: center;
    padding-right: 10px;
    color: black;
    font-size: 14px;
}
.ndhvalue {
    font-size: 20px;
    width: 150px; 
    text-align: center;
    padding-right: 10px;
    color: #006187;
}
.ndhbox {
    width: 250px; text-align: center;
    margin: 0 auto;    
    background-color: white;
    padding: 5px;
    margin-top: 10px;
    display: flex; align-items: center;
}
.ndhboxname {
    width: 110px;
    font-size: 14px;
}
.ndhboxvalue{
    width: 100px;    
    font-size: 20px; color: #006187;
}
.ndSummaryTitle1 {
    border-bottom: 2px solid #108590;
    margin-bottom: 10px;
    width: 400px;
    font-size: 14px;
}
#ndSummary1 {
    height: 800px;
    width: 400px;    
}

#ndSummary2 {
    padding-left: 20px;
    height: 800px;
    width: 250px;    
}
.ndsp-go { 
    width: 50px; 
    font-size: 14px; 
    cursor: pointer;
    background-color: #006187;
    color: white;
    height: 30px; line-height: 30px;
    margin-left: 10px; text-align: center;
}
#ndsp-dates { 
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
    margin-bottom: 20px;
}
.ndsp-table { 

    height: 300px; 
    overflow-y: auto;
}
.ndsp-date{
    text-align: center;
    margin-left: 20px;
    background-color: #e5e5e5;
    height: 30px; font-size: 14px;
}
#ndsp-content{ 
    display: flex;
    justify-content: flex-start;
}
.ndspart { 
    height: 500px;
    text-align: center;
    padding-left: 20px; 
    padding-right: 20px;
}
.ndsp-title{ 
    width: 100%;
    border-bottom: 2px solid #006187;
    font-size: 15px; 
    text-align: left;
}
.ndsp-name {
    width: 300px;
    text-align: left; padding-left: 5px;
}
.ndsp-value { width: 100px;}
.ndsp-item, .ndsp-item-head { 
    display: flex;
    height: 25px; align-items: center;
    font-size: 14px;
}
.ndsp-item { border-bottom: 1px solid lightgray;}
.ndsp-item-head {
    margin-top: 20px;
    font-weight: 600;
}
.ndspart:nth-of-type(1) {
    border-right: 1px solid lightgray;
}
#ndsp-chart-serv {
    margin-top: 10px;
    border-radius: 15px;
    border: 1px solid lightgray;
    height: 300px; width: 700px;
}
#ndsp-chart-prod { 
    margin-top: 10px;
    border-radius: 15px;
    border: 1px solid lightgray;
    height: 300px; width: 500px;
}
#ndStaff {
    display: flex;
}
.ndstafftoplistitem {
    display: flex;
    cursor: pointer;
    align-items: center;
    font-size: 14px;
    height: 30px; 
    border-bottom: 1px solid lightgray;
}
.ndstafftoplistitemname {
    width: 200px;
}
.ndstafftoplistitemvalue {
    width: 100px;
}
#ndstafftoplist{    
    height: 200px; overflow-y: scroll;
    width: 250px;
}
.ndst-thismonth-item-value{ 
    width: 100px;
}
.ndst-thismonth-item-value1{ 
    width: 200px;
}
#ndStaff1 {
    width: 600px;
    padding-right: 20px;
    border-right: 1px solid lightgray;       
}
#ndStaff2 {
    width: 600px;
    padding-left: 20px;
}
#ndst-thismonth, #ndst-sixmonth {
    height: 450px;
    overflow-y: scroll;
}
.ndst-thismonth-item-head { font-weight: 600;}
.ndst-thismonth-item, .ndst-thismonth-item-head{ 
    height: 25px; display: flex; align-items: center;
    border-bottom: 1px solid lightgray; 
    font-size: 14px;
}
#ndst-thismonth-chart, #ndst-sixmonth-chart{
    border: 1px solid lightgray;
    border-radius: 15px;
    height: 300px; 
    margin-bottom: 20px;
}
.ndst-thismonth-title{ 
    border-bottom: 2px solid #006187;
    margin-bottom: 10px;
    height: 40px; line-height: 40px; 
    font-size: 18px; color: #006187;
}
.ndtoplistitem {
    display: flex;
    align-items: center;
    height: 25px; 
    border-bottom: 1px solid lightgray;
    font-size: 12px;
}
.ndtoplistitemname {
    min-width: 250px;
    max-width: 250px;
    white-space: nowrap;
    overflow-x: hidden;
}
.ndtoplistitemvalue {
    padding-left: 5px;
    min-width: 80px;
    max-width: 80px;    
}
.ndSummaryTitle2 {
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
    width: 250px;
    font-size: 14px;
    color: #006187;
}
.ndSummaryTitle3 {
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
    width: 150px;
    font-size: 14px;
    color: #006187;
}

.ndSummaryTitle4 {
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
    width: 400px;
    font-size: 14px;
    color: #006187;
}
.ndtoplistsrv, .ndtoplistprd {
    margin-bottom: 20px;
    height: 200px;
    overflow-y: scroll; 
    overflow-x: hidden;
}
.ndhsec3part {
    margin-left: 30px;
}
.promdesc { 
    height: 20px; line-height: 20px;
    width: 20px; 
    border-radius: 50%;
    background-color: #006187;
    color: white; 
    text-align: center;
    margin: 10px; 
}
.ndcli {
    height: 50px;
    width: 130px;
    text-align: center;
}
.ndclt {
    font-size: 14px;
    height: 20px; line-height: 20px;
}
.ndclv{
    font-size: 16px; font-weight: 600;
    height: 30px; line-height: 30px; color: #006187;
}
#ndRevenue {
    padding-top: 20px;
    padding-left: 20px;
}
.ndrevchtop {
    margin-bottom: 10px;
    width: 1200px;
}
.ndrevch {
    margin-bottom: 10px;
    width: 1200px;
    display: flex;
}

.salesereportexcel {
    cursor: pointer;
    color: #006187; font-size: 14px;
    height: 30px; line-height: 30px; margin-left: 20px;
}.salesereportexcel:hover { text-decoration: underline;}
#fsubtab-sales {
    padding: 20px;
}
.fsalesmonthsshow {
    height: 25px; line-height: 25px; 
    width: 150px; text-align: center;
    background-color: #006187; color: white;
    font-size: 14px; cursor: pointer;
    
}
.fsalesmonths{
    position: absolute;
    width: 80px;
    background-color: white; border: 1px solid lightgray;
}
.fsalesmonthsitem{
    height: 30px; display: flex; align-items: center;
    border-bottom: 1px solid lightgray;
}
.fsalesmonthsname {
    font-size: 14px; margin-left: 10px;
}
.fsalesmonthscb {
    height: 25px; width: 20px; cursor: pointer;
}
.fsalesitem, .fsalesitemhead {
    display: flex;
    height: 30px; line-height: 30px;
}
#runfsales {
    width: 100px; text-align: center;
    background-color: #006187; color: white;
    height: 25px; line-height: 25px; 
    cursor: pointer; margin-left: 20px;
}
.fsalesitem {
    border-bottom: 1px solid lightgray;
}
.fpcsubitem{
    font-size: 13px;
    display: flex; align-items: center;
    border-bottom: 1px solid lightgray;
    height: 25px;
    background-color: lightgray;
}
.fpcsubitemname { 
    padding-left: 30px;
    width: 280px;
}
.fpcsubitemvalue {
    width: 100px;
}
.fsalesitemname {
    white-space: nowrap;
    overflow-x: hidden;
    height: 30px;
    background-color: #e5e5e5;
    font-size: 14px;
    min-width: 100px;
    max-width: 100px;
}
.fsalesitemvalue, .fsalesitemvaluet{
    font-size: 13px;
    min-width: 150px;
    max-width: 150px;
    display: flex; align-items: center; justify-content: center;
}
.fsalesitemvaluepart, .fsalesitemvaluepartt {
    width: 50%; text-align: center;
}
#ndrevch1, #ndrevch2, #ndrevch3 {    
    height: 220px;
}
.ndSummaryTitle7 {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 10px;
    width: 400px;
    font-size: 14px;
}
.ndSummaryTitle6 {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 10px;
    width: 1200px;
    font-size: 14px;
}
.ndSummaryTitle5 {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 10px;
    width: 1200px;
    font-size: 14px;
}
#ssdbsalon, #rzpsalonselect {
    font-family: 'Montserrat';
    height: 30px;
    outline: none;
    width: 300px;
}
#ndheaders {
    display: flex;
    height: 30px;     
}

#todaysCollectiontitle {
    font-size: 18px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: gray;
    margin-top: 20px;
}
.hc-label { background-color: red;}
#todaysCollectionvalue {
    color: #09aa25;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 28px;
    text-align: center;
}


#attribution {
    height: 100%;
    width: 50%;
}

.green {
    color: #006c5b;
}

.blue {
    color: #8bfffb;
}

.white {
    color: white;
}

.gold {
    color: #d79f2b;
}

.bold {
    font-weight: 600 !important;
}

.corporateblue {
    color: #006187;
}
.red {
    color: #e67575;
}
.lightblue { 
    color: lightblue;
}
.link {
    cursor: pointer;
}

    .link:hover {
        text-decoration: underline;
    }

.red {
    color: #e67575;
}

#whoami {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    color: #ffb650;
    font-size: 18px;
}
#version {
    font-size: 11px;
    text-align: center;
    color: white;
}
.versionnumber {
    color: lightblue;
}

#weathericon {
    height: 60px;
    width: 60px;
}

.todaysdate {
    background-color: white;
    font-size: 14px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    width: 100%;
}

.weatherwidget-io {
    /*width: 234px;*/
    height: 75px;
}
#revenue1 {
    width: 280px; height: 100%; border: 1px solid lightgray;
    border-radius: 10px;
}
#revenue1:hover  {
    background-color: #e5e5e5;
}

#revenue {
    cursor: pointer;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 280px;    
}
#mainchart2:hover {
    background-color: #e5e5e5;
}

#photofilters {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid lightgray;
}

.photoboxphoto {
    cursor: pointer;
    margin: 10px;
    /*flex: 1 auto;*/
    border-radius: 10px;
}

.photobox {
    position: fixed;
    top: 20%;
    left: 20%;
}

.photoboxbigphoto {
    max-width: 60%;
    height: auto;
}

.photofilter {
    padding-left: 15px;
    padding-right: 15px;
    height: 50px;
    line-height: 50px;
    margin-left: 2px;
    min-width: 100px;
    font-size: 16px;
    font-family: 'Montserrat';
    text-align: center;
    cursor: pointer;
    background-color: #e5e5e5;
}

    .photofilter:hover {
        background-color: lightgray !important;
    }

#photoflex {
    width: 1500px;
    display: flex;
    flex-wrap: wrap;
    /*align-items: flex-start;*/
}

.bottomflex {
    width: 1220px;
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.weatherwidgetholder {
    width: 280px;
    background-color: white;
    margin-right: 20px;
    border-radius: 10px;
    z-index: -1;
    position: relative;
}
#help {
    display: none;
    position: relative;    
    position: fixed;
    right: 0px;
    height: 100%;
    background-color: #2d3131;
    width: 1000px;
    z-index: 99;
    padding-top: 100px;
    padding-left: 50px;
}
.hitem{
    width: 900px;
    margin-top: 20px;
    background-color: white;
    padding: 20px;
    cursor: pointer;
}
.h_icon {
    height: 60px;
    margin-left: 10px;
    margin-top: 10px;
}
.h_text {
    margin-top: 20px;
    font-size: 13px;
    color: gray;
    padding-left: 10px;
    padding-right: 10px;
}
#closehelp {
    font-size: 40px; 
    background-color: white;
    color: black;
    border-radius: 50%;
    height: 50px; width: 50px;
    position: absolute;
    text-align: center;
    left: 10px; top: 10px;
    cursor: pointer;
}
.fronttile {
    overflow: hidden;
    margin-bottom: 20px;
    margin-right: 20px;
    max-width: 280px; 
    min-width: 280px; 
    border: 1px solid lightgray;
    cursor: pointer;    
    transition-duration: 0.1s;
    background-color: white;
    border-radius: 10px;
}
.tipbig {
    padding-left: 5px; padding-right: 5px;
    padding-top: 30px; text-align: center; color: #006187; font-size: 18px;
}
.tipsmall {
    padding-left: 5px; padding-right: 5px;
    padding-top: 10px; text-align: center; color: #09aa25; font-size: 15px;
}
.fronttile:hover, .fronttile2:hover, .fronttile3tips:hover { 
    background-color: #e5e5e5;
}

.fronttile, .weatherwidgetholder {
    height: 160px;    
}
.fronttile3 {
    overflow: hidden;
    margin-bottom: 20px;
    margin-right: 20px;
    max-width: 580px; 
    min-width: 580px; 
    border: 1px solid lightgray;
    cursor: pointer;    
    transition-duration: 0.2s;
    height: 160px;
    background-color: white;
    position: relative; 
}
.fronttile3img {
    transition-duration: 1s;
    background-image: url('../images/trezlor.png');
    background-size: cover;
}
.fronttile3:hover {
    opacity: 0.7;
}

.fttitle { 
    height: 70px; font-size: 23px;
    display: flex; align-items: center;    
    color: #006187;
}

.fronttile2 {
    cursor: pointer;
    border: 1px solid lightgray;    
    height: 280px !important;
    width: 280px !important;
}

#lefty {
    padding-top: 70px;
    position: fixed;
    height: 100%;
    background-color: #2d3131;
    width: 100px;
    z-index: 2;
    display: none;
}

.loption1 {
    height: 40px;
    background-color: #006187;
}

.loption {
    height: 60px;
    background-color: #2d3131;
    transition: 0.8s;
}
.loption:hover { 
    opacity: 0.6;
}
.loption, .loption1 {
    cursor: pointer;
    font-size: 13px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid white;
    width: 100%;
}

.cover {
    height: 120%;
    width: 100%;
    z-index: 109;
    opacity: 0.9;
    position: absolute;
    left: 0;
    top: 0;
    background-color: white;
}

.logoutConfirm {
    padding: 20px;
    position: absolute;
    z-index: 110;
    border: 1px solid lightgray;
    background-color: #e5e5e5;
    color: #2d3131;
    top: 30%;
    left: 30%;
    max-width: 400px;
    text-align: center;
}

.logoutConfirmTitle {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 20px;
}

.logoutButtons {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.logoutButton {
    height: 30px;
    line-height: 30px;
    background-color: #006187;
    color: white;
    width: 70px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}

    .logoutButton:first-of-type {
        margin-right: 10px;
    }

    .logoutButton:hover {
        background-color: #2d3131;
        color: white;
    }

#staffleft {
    width: 300px;
    height: 700px;
    border-right: 1px solid lightgray;
}

#staffLeftStats {
    text-align: center;
    background-color: gray;
    color: white;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    width: 100%;
    border-top: 1px solid lightgray;
}

#stafftop {
    border-bottom: 1px solid lightgray;
    width: 100%;
}

#staffsearch {
    font-family: 'Montserrat';
    text-align: center;
    height: 30px;
    width: 99%;
    border: none;
    outline: none;
    background-color: #e5e5e5;
}

#staffLeftOptions {
    height: 50px;
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 10px;
}

#selectStaffSalon {
    outline: none;
    height: 30px;
    width: 200px;    
    font-family: 'Montserrat';
}

#selectStaffShowInactive {
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-left: 10px;
}

#staffSalon {
    z-index: 1;
    display: none;
    font-family: 'Montserrat';
    width: 250px;
    margin-left: 10px;
    height: 25px;
}

#marketingpromos {
    margin-top: 15px;
    border-top: 1px solid lightgray;
}

#marketingcardssalons, #marketingpackagesalons {
    font-family: 'Montserrat';
    width: 250px;
    margin: 10px 0 20px 25px;
    height: 25px;
}

#marketingaddcardssalons, #marketingaddpackagesalons {
    font-family: 'Montserrat';
    font-size: 14px;
    width: 200px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    margin: 20px auto 10px auto;
    background-color: #006187;
    color: white;
}

#marketingaddpromossalons {
    font-family: 'Montserrat';
    font-size: 14px;
    width: 200px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    text-align: center;
    margin: 20px auto 0 auto;
    background-color: #006187;
    color: white;
}

    #marketingaddcardssalons:hover, #marketingaddpackagesalons:hover, #marketingaddpromossalons:hover {
        background-color: gray;
    }

.madbox {
    position: absolute;
    height: 400px;
    width: 250px;
    border: 1px solid lightgray;
    background-color: white;
}

.madboxlist {
    height: 350px;
    overflow-y: scroll;
    width: 100%;
    overflow-x: hidden;
}

.madboxtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    font-size: 15px;
    border-bottom: 1px solid lightgray;
}

.madboxtitlesmall {
    font-size: 14px;
}

.madboxdone {
    text-align: center;
    font-size: 15px;
    background-color: #006187;
    color: white;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
}

    .madboxdone:hover {
        background-color: gray;
    }

.madboxitem {
    display: flex;
    height: 25px;
    align-items: center;
    border-bottom: 1px solid lightgray;
}

.madboxcheckbox {
    cursor: pointer;
    width: 17px;
    height: 17px;
    margin-right: 10px;
}

.madboxcheckboxall {
    cursor: pointer;
    width: 17px;
    height: 17px;
    margin-left: 20px;
}

.madboxname {
    height: 25px;
    line-height: 25px;
    font-size: 13px;
}

#selectStaffShowInactiveTitle {
    font-size: 12px;
    margin-left: 10px;
}

#stafflist {
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}

.staffItem {
    cursor: pointer;
    position: relative;
    align-items: center;
    border-bottom: 1px solid lightgray;
}

.staffItemInactive {
    background-color: #de8888 !important;
}

.staffItem:hover {
    background-color: #e5e5e5;
}

.staffItemName {
    padding-left: 5px;
    font-size: 15px;
    width: 80%;
    height: 30px;
    line-height: 30px;
}

.staffItemSex {
    position: absolute;
    right: 5px;
    top: 9px;
    text-align: right;
    width: 20%;
    color: #006187;
    font-size: 11px;
}

.staffItemAdd {
    padding-left: 5px;
    font-size: 11px;
    height: 10px;
    line-height: 10px;
    color: #006ed8
}

#addstaff {
    border-bottom: 1px solid lightgray;
}

#addstaff, #addstafflog {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
}

#staffImage {
    width: 200px;
}

#addstaff:hover, #addstafflog:hover {
    background-color: lightgray;
}

#staffDetails {
    height: 700px;
}

.idprooflink {
    text-decoration: underline;
    color: #006187;
    cursor: pointer;
}

#staffDetailsTop {
    position: relative;
    padding: 20px;
    display: flex;
    height: 400px;
}

#staffDetailsBottom {
    display: flex;
}

#staffImage {
    height: 200px;
}

#staffMeta {
    padding: 10px;
}
#makeStaffInactive:hover {
    text-decoration: underline;
}
#makeStaffInactive {
    cursor: pointer;
    font-size: 17px; 
    text-align: center;
    height: 50px; line-height: 50px;
    color: #006187;
}
#staffMetaCover {
    z-index: 100;
    position: absolute;
    top: 30px; left: 0px; 
    height: 400px; width: 700px;
    line-height: 50px;
    background-color: white; 
    opacity: 0.95;
    text-align: center;
    font-size: 16px;
}
.staffMetaItem, .staffMetaItem1 {
    margin-bottom: 5px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.staffMetaName, .staffMetaName1 {
    height: 40px;
    line-height: 40px;
    width: 200px;
    text-align: right;
    padding-right: 10px;
    font-size: 14px;
}
.staffPhone, .staffPassword { 
    background-color: #e5e5e5;
    height: 25px; line-height: 25px;
    padding-left: 5px;
    width: 150px;
}
#staffPhoneError { 
    height: 25px; line-height: 25px; 
    text-align: center;
    font-size: 13px; color: #006187;
}
.staffPhoneChange {
    cursor: pointer;
    font-size: 13px; background-color: #006187; color: white;
    height: 25px; line-height: 25px; text-align: center;
    width: 80px; margin-left: 20px;
}
.staffMetaValue {
    user-select: none;
    height: 40px;
    line-height: 40px;
    position: relative;
    color: #006187;
    padding-left: 10px;
    width: 250px;
    white-space: nowrap;
    font-size: 14px;
}
.staffMetaValue1 {
    margin-left: 0px!important;
    background-color: #e5e5e5;
    height: 25px;
    padding-left: 5px;    
    width: 150px !important;
}
#staffMetaValueDate {
    font-family: 'Montserrat';
    font-size: 15px;
    color: #006187;
}

option {
    -webkit-appearance: menulist-button;
}

.staffMetaValueUpdate {
    width: 250px;
    font-family: 'Montserrat';
    top: 7px;
    left: 10px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #e5e5e5;
    border: none;
    outline: none;
    position: absolute;
}

#skillsupdated {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #64c466;
}

#staffSkills {
    padding-top: 20px;
    padding-left: 10px; 
    padding-right: 10px;
    width: 200px;
    height: 440px;   
    overflow-y: scroll;
}

.staffSkill {
    display: flex;
    height: 30px;
    align-items: center;
}

.staffSkillCheckbox {
    height: 20px;
    width: 20px;
}

.staffSkillName {
    font-size: 14px;
    margin-left: 10px;
}

#staffMetaHelp {
    padding-left: 60px;
    color: red;
    font-size: 17px;
    margin-bottom: 10px;
}

#skillHelp {
    color: #006187;
    margin-bottom: 20px;
}

#staffActivities {
    width: 800px;
    height: 500px;    
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
}
#staffActivitiesList {
    width: 800px;
    height: 345px;
    overflow-y: scroll;
    border-bottom: 1px solid lightgray;
}
.staffActivity, .staffActivityHead {
    display: flex;
    height: 30px;
    border-bottom: 1px solid lightgray;
    align-items: center;
}
.staffActivityHead > .staffActivityAmount {    
    font-weight: 600;
    cursor: pointer;
}
.staffActivityHead > .staffActivityAmount:hover {
    text-decoration: underline;
}
.staffActivityHead > .staffActivityTime {    
    font-weight: 600;
    cursor: pointer;
}
.staffActivityHead > .staffActivityTime:hover {
    text-decoration: underline;
}
.staffActivityHead > .staffActivityType {    
    font-weight: 600;
    cursor: pointer;
}
.staffActivityHead > .staffActivityType:hover {
    text-decoration: underline;
}

.staffActivityType {
    min-width: 250px;
    max-width: 250px;
    white-space: nowrap;
    font-size: 12px;
    padding-left: 10px;
}
#staffListTitle {
    text-align: center;
    background-color: #006187; color: white;
    height: 30px; line-height: 30px;
    display: flex; justify-content: flex-start;    
}
#staffListTitleText{
    margin-left: 200px;
}
.stafflistdate {
    color: lightgray; font-size: 13px;
    width: 150px;cursor: pointer;
    text-align: center;
}
.stafflistdate:hover {
    text-decoration: underline;
}

#staffLandingContent1 {
    width: 1000px;
    margin-left: 20px;
}
#staffrevenues{    
    font-size: 13px;  
    height: 52px;
}
#staffListTitle , #staffrevenuelist, #staffrevenues {
    width: 1312px;
}
#staffrevenuelist{
    height: 400px;
    overflow-y: scroll; overflow-x: hidden;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}
.staffActivityTotal1, .staffActivityTotal1Title {
    text-align: center;
    min-width: 200px; 
    max-width: 200px;    
    height: 25px; line-height: 25px;
}
.staffActivityTotal2Title{
    text-align: center;
    min-width: 329px; 
    max-width: 329px;  
    border-right: 1px solid lightgray;
}
.staffActivityTotal2{
    text-align: center;
    min-width: 329px; 
    max-width: 329px;    
    height: 25px; line-height: 25px;
}
.stafflistnamehead {
    min-width: 150px;
    max-width: 150px;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    height: 51px; line-height: 51px;
    font-weight: 600;
    text-align: right;
    padding-right: 10px;
}
.staffdbrevitemtotal {    
    display: flex; align-content: center;    
}
.staffdbrevitemcount{
    border-right: 1px solid lightgray;
    width: 69px;
    text-align: center;
}
.staffdbrevitemamount, .staffdbrevitemamountred {
    border-right: 1px solid lightgray;
    width: 129px;
    text-align: center;
}
.staffdbrevitem {
    font-size: 13px;
    height: 25px; 
    display: flex; align-items: center;
    border-bottom: 1px solid lightgray;
}

.staffdbrevitem:hover {background-color: #e5e5e5;}
.staffdbrevitemname{
    min-width: 150px;
    max-width: 150px;
    text-align: right;
    padding-right: 10px;
    border-right: 1px solid lightgray;    
    cursor: pointer;
}
.staffdbrevitemname:hover {
    color:#006187;
    text-decoration: underline;
}
.stafflistname {
    font-weight: normal;
}
.staffActivityTotal1:first-of-type {
    border-left: 1px solid lightgray;
}
.staffActivityTotal1Values:first-of-type {
    background-color: red;
}
.staffActivityTotal1Title {    
    border-right: 1px solid lightgray;
}
.staffActivityTotal2Values {
    min-width: 329px; 
    max-width: 329px; 
    display: flex; align-items: center;
    height: 25px; 
    border-right: 1px solid lightgray;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}
.staffActivityTotal1Values {
    min-width: 200px; 
    max-width: 200px; 
    display: flex; align-items: center;
    height: 25px; 
    border-right: 1px solid lightgray;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

.staffActivityTotal1Count {
    width: 70px;    
    border-right: 1px solid lightgray;
}
.staffActivityTotal2 > .staffActivityTotal1Amount {
    border-left: 1px solid lightgray;
}
.staffActivityTotal1Amount, .staffActivityTotal1Amountreds {
    width: 130px;       
}
.staffActivityTotal1Count, .staffActivityTotal1Amount {    
    text-align: center;
}
.staffActivityTime, .staffActivityAmount {
    padding-left: 5px;    
    font-size: 12px;
    background-color: white;
}
.staffActivityTotal:nth-of-type(1) {
    border-left: 1px solid lightgray;
}
#staffActivityTotals {
    display: flex;font-size: 13px;justify-content: center;
}
.staffActivityTotal {
    width: 129px;
    border-right: 1px solid lightgray;
}
.staffActivityTotalTitle{
    height: 25px; line-height: 25px;
    width: 100%; text-align: center;    
    border-bottom: 1px solid lightgray;
}
.staffActivityTotalValues{
    display: flex; align-items: center;
    height: 25px; 
    border-bottom: 1px solid lightgray;
}
.staffActivityTotalCount{        
    width: 30%;
    text-align: center;
}
.staffActivityTotalAmount{
    width: 70%;
    text-align: center;
}
.staffActivityAmount {
    min-width: 80px;
    max-width: 80px;
    white-space: nowrap;
}
.staffActivityAmount1 {
    text-align: center;
}
.staffActivityTime {
    min-width: 100px;max-width: 100px;
}

#staffRevenueCollected {
    position: relative;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    font-family: 'Montserrat';
    background-color: lightgray;
}

#staffActivityDates {
    position: absolute;
    top: 0px;
    left: 10px; font-size: 13px; 
    font-weight: 600;
}

.staffSectionTitle {
    height: 30px;
    line-height: 30px;
    color: white;
    background-color: #006187;
    font-size: 15px;
    text-align: center;
    position: relative;
}
#staffToday {
    position: absolute;
    top: 0px;
    left: 10px;
    color: lightgray;
    cursor: pointer;
    font-size: 13px;
}
#staffMonth {
    font-size: 13px;
    position: absolute;
    top: 0px;
    left: 100px;
    color: lightgray;
    cursor: pointer;
}
#staffCustomDate{
    position: absolute;
    top: 0px;
    left: 100px;
    color: lightgray;
    cursor: pointer;
    font-size: 13px;
}
.staffCustomDateInput{
    height: 30px; line-height: 30px;
    font-family: 'Montserrat';
    width: 200px; margin-left: 20px;
    text-align: center;
}
.staffCustomDateGO{
    margin-left: 20px;
    cursor: pointer;
    background-color: #2d3131; color: white;
    height: 30px;line-height: 30px;
    width: 50px; text-align: center;
}
.staffCustomDateBox{
    display: flex;
    justify-content: center; align-items: center;
    z-index: 2;
    position: absolute;
    height: 50px;
    width: 550px;
    border: 1px solid lightgray;
    background-color: #e5e5e5;
}
.staffCustomDateBoxClose{
    width: 20px; 
    text-align: center;
    cursor: pointer;
}
.staffJobCardPrint{
    position: absolute;
    top: 0px; right: 10px;
    color: white; cursor: pointer;
}
.staffJobCardPrint:hover, #staffToday:hover, #staffCustomDate:hover {
    text-decoration: underline;
}
#staffGenderChoice {
    display: none;
    font-family: 'Montserrat';
    width: 100px;
    margin-left: 10px;
}

#staffservicelogholder {
    height: 250px;
    width: 300px;    

}
#billmain4heads{
    display: flex;    
    align-items: center;
    min-width: 500px;
    max-width: 500px;
}
.billmain4head{
    border-bottom: 1px solid lightgray;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
#billingstafflog {
    height: 700px;
    min-width: 450px;
    max-width: 450px;
    overflow-y: auto;    
}
#billingstafflog > .staffTopItem{
    font-size: 12px !important;
}
.todaysappitem { 
    cursor: pointer;
    display: flex;  
    align-items: center;
    height: 25px; 
    background-color: lightblue;
    font-size: 11px;    
    width: 100%;
    border-bottom: 1px solid gray;
}
.todaysbillitem { 
    background-color: white;
}
.todaysbillitem, .todaysbillitemhead {
    display: flex; align-items: center;
    height: 25px; font-size: 12px;
    border-bottom: 1px solid gray;
}
.todaysbillitemcancelled{
    background-color: #e67575 !important;
}
.todaysbillitemhead {
    font-weight: 600;
}

.todaysbillrefresh {
    height: 20px; 
    cursor: pointer;
    margin-left: 15px;
}
.todaysbillitemapp { 
    padding-left: 40px;
    text-align: left;
    width: 300px;    
}
.todaysbillitemtime {
    padding-left: 10px;
    min-width: 50px;
    max-width: 50px;
}
.todaysbillitemtime1 {
    padding-left: 10px;
    min-width: 100px;
    max-width: 100px;
}
.todaysbillitemname {
    text-align: left;
    padding-left: 5px;
    min-width: 120px;
    max-width: 120px;
    white-space: nowrap;
    overflow-x: hidden;
}
.todaysbillitemname1 {
    text-align: left;
    padding-left: 5px;
    min-width: 130px;
    max-width: 130px;
    white-space: nowrap;
    overflow-x: hidden;
}
.todaysbillitemvalue {
    text-align: center;
    padding-left: 5px;
    min-width: 70px;
    max-width: 70px;
    background-color: white;
}
.todaysbillitemprint {
    height: 20px; line-height: 20px;
    cursor: pointer;
    margin-left: 10px;
}
#todaysbills{
    height: 700px;
    width: 500px; 
    overflow-y: auto;
}
#cardpayamounterror {
    color: #e67575;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 14px;
}
#myguage{    
    margin-left: auto;
    margin-right: auto;
    width: 240px;
    height: 80px;
    background-color: lightgray;
    position: relative;
}
#mgtitle {
    margin-top: 10px;
    font-size: 13px; 
    width: 300px; 
    text-align: center;
    height: 20px; line-height: 20px;
}
#myguagelimits {
    margin: 0 auto 30px;
    position: relative;
    width: 270px;
    height: 20px;    
}
#mgl1 {
    position: absolute; left: 0;
    font-size: 12px;
}
#mgl2 {
    position: absolute; right: 0;
    font-size: 12px;
}
#mglact {
    position: absolute;
    left: 0;
    top: -20px;
    color: black;
    font-size: 11px;
}
#mgfiller {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background-color: #296;
}
.homeicon {
    height: 30px;
}

.staffin {
    background-color: #64c466;
}

.staffout {
    background-color: #e67575;
}

#giftcardvalue {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 14px;
}

#newclientsexerror {
    font-size: 12px;
    margin-left: 10px;
    color: #e67575;
}

#newstaff {
    display: none;
    background-color: white;
    z-index: 2;
    top: 0px;
    left: 300px;
    position: absolute;
    padding: 10px;
    height: 350px;
    width: 250px;
    border: 1px solid lightgray;
}

#servicelogsave, #servicelogsavecancel {
    background-color: #006187;
    color: white;
    width: 100px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

#servicelogsavecancel {
    margin-right: 10px;
}

#servicelogbuttons {
    display: flex;
    justify-content: center;
    margin: 20px auto 0 auto;
}

#servicelogstaffsearch, #servicelogservicesearch {
    outline: none;
    border: none;
    height: 30px;
    line-height: 30px;
    font-family: 'Montserrat';
    text-align: center;
    background-color: #e5e5e5;
    margin-top: 10px;
    width: 200px;
}

#newstaffservicelog {
    display: none;
    background-color: white;
    z-index: 2;
    top: 0px;
    left: 300px;
    text-align: center;
    position: absolute;
    padding: 10px;
    height: 200px;
    width: 250px;
    border: 1px solid lightgray;
}

#ssdbsalon {
    font-family: 'Montserrat';
    font-size: 14px;  
    margin-left: 10px;
}
#newstaffsalon {
    font-family: 'Montserrat';
    font-size: 14px;
    margin-top: 10px;
    height: 30px;
}
.newstaffsalonTitle {
    font-size: 13px;        
}
.ssdashboardtop {
    margin-left: 20px;
    font-size: 13px;        
}
#ssdashboard{
    background-color: lightgray;
    display: none;
}
#newstaffname, #newstaffaddress, #newstaffstartdate {
    margin-top: 20px;
    height: 25px;
    padding-left: 10px;
    border: none;
    outline: none;
    background-color: #e5e5e5;
    font-family: 'Montserrat';
    width: 220px;
}

#newstaffaddress {
    padding: 5px;
    resize: none;
    height: 70px;
    width: 220px;
}

#addnewstafbuttons {
    margin-top: 20px;
    display: flex;
}

#newstaffsex {
    font-family: 'Montserrat';
    width: 100px;
    margin-top: 20px;
    height: 30px;
}
.ndtab{
    padding-left: 20px; padding-top: 20px;
    background-color: white;
    max-width: 1600px;
    min-width: 1600px;

}
.ndclientshelp {
    margin-top: -10px;
    margin-bottom: 10px;
    font-size: 12px; 
    color: red;
    font-weight: 600;
}
#ndclients1, #ndclients2, #ndclients3 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    border-bottom: 1px solid lightgray;
}
#ndclients1 { height: 270px; }
#ndclients2 { height: 350px; }
#ndclients3 { height: 350px; justify-content: center !important; }

#ndclientschart1  {
    margin-left: 30px;
    height: 250px;
}
#ndclientschart2, #ndclientschart3, #ndclientschart4 { 
    width: 400px; margin-right: 20px;
    height: 300px;
    padding-top: 20px;
}
#clientDailyFootfall {
    width: 1000px;
    height: 300px;
}
#ndclientstableholder {
    margin-left: 50px;
}
#ndclientstabletitle { 
    font-size: 18px; color: #006187; text-align: center; margin-bottom: 10px;
}
.ndctitem { 
    display: flex; align-items: center;
    height: 40px;
    font-size: 15px;    
    border-bottom: 1px solid lightgray;
}
.ndcitemname { 
    text-align: right; padding-right: 10px;
    width: 150px;
}
.ndcitemvalue, .ndcitemvalue1 {
    width: 100px; text-align: center;
}
.newapp-clientinputs {
    background-color: white;
    position: absolute;
    width: 250px;
    margin: 10px auto 10px auto;    
    display: none;
    text-align: center;
    border: 1px solid lightgray;
    top: 100px;
}
.newapp-close{ 
    background-color: #006187; color: white;
    height: 25px; width: 25px; line-height: 25px;
    text-align: center; 
    cursor: pointer;
    border-radius: 50%;
    position: absolute;
    top: 5px; right: 5px;
}
.newapp-addnewclienttext { 
    font-size: 12px; 
    cursor: pointer;
    color: black;
    margin: 5px 0px 10px 20px;    
}

.newapp-addnewclienttext:hover { 
    text-decoration: underline;
}
.newapp-clientinput{
    margin-top: 10px;
    padding-left: 10px;    
    background-color: #e5e5e5;
    height: 25px; width: 150px;
}
#newappclientsex {
    background-color: #e5e5e5;
    margin-top: 10px;
    height: 25px; outline: none; border: none;    
}
#newappclientphoneexists {
    font-size: 12px; 
    color: #e67575;
    display: none;
}
.newapp-newclient {
    user-select: none;
    font-size: 12px;
    margin-top: 10px;
    cursor: pointer;
    text-align: left;
    margin-left: 50px;
    color: #006187;
}
.newapp-newclient:hover {
    text-decoration: underline;
}
#newapp-addclient {
    height: 25px; line-height: 25px; background-color: #006187;
    color: white; text-align: center;
    width: 70px; cursor: pointer;
    margin: 10px auto;
}
.addnewstaffbutton {
    height: 25px;
    line-height: 25px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #006187;
    color: white;
    font-size: 12px;
    cursor: pointer;
}
.addnewstaffbutton:nth-of-type(2) {     margin-left: 10px; }
    .addnewstaffbutton:hover {
        background-color: gray;
    }

.serviceSelect, .productSelect {
    z-index: 101;
    position: absolute;
    background-color: white;
    border: 1px solid lightgray;
}

.serviceSelectTabHeads {
    background-color: white;
}

.serviceSelectTabHead {
    user-select: none;
    height: 150px;
    line-height: 150px;
    width: 50px;
    text-align: center;
    border-right: 1px solid lightgray;
    cursor: pointer;
    font-size: 12px;
    background-color: gray;
}

    .serviceSelectTabHead:hover {
        background-color: #e5e5e5;
    }

.serviceSelectTab {
    max-height: 600px;
    width: 1200px;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.serviceSelectContent {
    background-color: #e5e5e5;
    max-width: 1200px;
    display: flex;
}

.serviceSelectCategory {
    min-height: 50px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-track-color: black;
    width: 300px;
    border: 1px solid lightgray;
}

.serviceSelectCategoryTitle {
    height: 30px;
    background-color: #004b71;
    line-height: 30px;
    font-size: 15px;
    text-align: center;
    color: white;
}

.selectItem {
    padding-left: 5px;
    height: 25px;
    border-bottom: 1px solid lightgray;
    display: flex;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.selectItemName {
    min-width: 220px; 
    max-width: 220px;
    white-space: nowrap; overflow-x: hidden;  
}
.selectItemValue {
    padding-left: 5px;
    min-width: 60px;    
    max-width: 60px;  
    text-align:center;
}
    .selectItem:last-of-type {
        border-bottom: none !important;
    }

    .selectItem:hover {
        background-color: #e5e5e5;
    }

.closeMe:hover {
    background-color: #2d3131;
    color: white;
}

.mytooltip {
    padding: 3px;
    opacity: 0.9;
    z-index: 999;
    position: absolute;
    min-width: 50px;
    max-width: 300px;
    max-height: 600px;
    font-size: 12px;
    font-weight: 400;
    background-color: white;
    border-radius: 10px;
    border: 1px solid lightgray;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
}

.paymentmethoderror {
    color: #e67575;
    font-size: 14px;
    width: 100%;
    background-color: white;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

#addchangetoadvance {      
    border-top: 1px solid lightgray;
    height: 40px;
    display: flex; align-items: center;
}

.addchangetoadvancetitle {
    font-size: 13px;
    margin-left: 5px;
}

.addchangetoadvancecheck {
    height: 25px;
    width: 25px;
}

.billitemdetail {
    padding-top: 20px;
    position:relative;
}
#productsaledisabled { 
    position: absolute;
    top: 0px;
    left: 0; right: 0;
    width: 100%; 
    text-align: center;
    margin: 0 auto;
    background-color: white; 
    padding-top: 100px;
    height: 500px;
    z-index: 100;
    opacity: 0.8;
    font-size: 20px; 
    font-weight: 600;
}
#billitemtakepayment {
    padding-top: 0px !important;    
    height: 300px;
}
#financeview {
    display: flex;
    position: relative
}

.fdititle{
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.financedayitem{    
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px; 
}
.financedayitemname{
    min-width: 200px;
    max-width: 200px;
    text-align: right;
    padding-right: 10px;
    font-size: 14px;
}
.fdiexp{
    color: red !important;
}
.financedayiteminput{
    width: 120px;
    text-align: center;
    padding-left: 10px;
    background-color: #e5e5e5;
    height: 30px; line-height: 30px;     
}
#fclosingcomments {
    font-family: 'Montserrat';
    height: 100px;
    width: 400px;
    resize: none;   
    border: 1px solid lightgray;
    background-color: white;
}
#fclosingsubmit {
    background-color: #006187;
    text-align: center;
    color: white;
    height: 25px; line-height: 25px; 
    width: 150px;
    margin: 10px auto;
    cursor: pointer;
    font-size: 14px;
}
.financedayitemvalue{
    text-align:center;
    min-width: 150px;
    max-width: 150px;
    color: #006187;
    font-size: 14px;
}
.fdicomponenttitle{    
    position: absolute;
    top: 5px; 
    left: 5px;
    font-size: 13px;
}
.fdicomponent{
    position: relative;    
    background-color: white;
    padding-top: 30px;
    padding-bottom: 10px;
    width: 630px;
    margin: 20px auto;    
}
.fclitemexp{
    color: red !important;
}
.fdiothers{
    display: flex;
}
.fdiotheritem1 {
    text-align: center;
    width: 100px;
    font-size: 12px;
    border-right: 1px solid lightgray;
}
.fdiotheritemhead{
    border-right: 1px solid lightgray;
    text-align: right;
    width: 70px;
    padding-right: 5px;
    font-size: 11px;
}
.fdiotheritem{ 
    text-align: center;
    width: 70px;
    border-right: 1px solid lightgray;
    font-size: 11px;
}
.fdiotheritemname{ 
    border-bottom: 1px solid lightgray;
}
.fdiotheritemname, .fdiotheritemvalue, .fdiotheritemvalue1 {
    height: 30px; line-height: 30px;
}
#financedayview {
    margin-top: 30px;
    margin-left: 30px; 
    background-color: #e5e5e5;
    width: 800px;    
    text-align: center;
}
#finalisepayment {
    min-height: 300px;
    display: flex;
    border-bottom: 1px solid lightgray
}
#checkpayment{
    height: 300px;
    width: 30%;
}
#paymentremaining {    
    font-family: 'Montserrat';
    font-size: 15px;
    height: 100px;        
    text-align: center;
    display: flex; justify-content: center; align-items: center;
}
#billtakepaymentoffers {
    height: 130px;
    width: 100%;
    border-bottom: 1px solid lightgray;
    text-align: center;
}

#billtakepaymentpaymentmethods {    
    width: 70%;    
    border-right: 1px solid lightgray
}

#giftcardvalidate {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paymentmethod {
    position: relative;
    display: flex;
    height: 40px;
    padding-left: 30px;
    justify-content: flex-start;
    align-items: center;
}

#pmother {
    font-family: 'Montserrat';
    width: 100px;
    height: 25px;
    outline: none;
    position: absolute;
    left: 150px;
}

#validategiftcardcode {
    font-size: 13px;
    text-align: center;
    font-family: 'Montserrat';
    border: none;
    outline: none;
    background-color: #e5e5e5;
    height: 25px;
    line-height: 25px;
}

#validategiftcard {
    background-color: #006187;
    margin-left: 10px;
    color: white;
    width: 100px;
    cursor: pointer;
    height: 25px;
    user-select: none;
    line-height: 25px;
    text-align: center;
    font-size: 13px;
}

.paymentmethodcheckbox {
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.paymentmethodname {
    margin-left: 10px;
    font-size: 16px;
    width: 200px;
}

.paymentmethodinput {
    border: none;
    outline: none;
    background-color: #e5e5e5;
    text-align: center;
    font-family: 'Montserrat';
    height: 25px;
    line-height: 25px;
    width: 150px;
}

#paymentfinalclick {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-top: 10px;
    width: 100%;
}

.paymentfinalbutton {
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: white;
    cursor: pointer;
    font-size: 15px;
}

    .paymentfinalbutton:nth-of-type(1) {
        background-color: #e67575;
        width: 100px;
    }

    .paymentfinalbutton:nth-of-type(2) {
        background-color: #d79f2b;
        width: 150px;
        margin-left: 10px;
    }

    .paymentfinalbutton:nth-of-type(3) {
        background-color: #006c5b;
        margin-left: 10px;
        width: 150px;
    }

.paymentfinalbutton-checkpin {
    position: absolute;
    min-width: 230px;
    height: 50px;
    background-color: lightblue;border: 1px solid lightgray;
    display: flex;
    left: 330px;
    border-radius: 10px;
    align-items: center;
}
.paymentfinalbutton-status { 
    font-size: 12px;
    margin-left: 5px;
}
.reflink {
    font-size: 13px;
    margin-right: 20px;
    color: lightgreen;
    width: 150px;
    text-align: center;
    cursor: pointer;
}
.reflink:hover { 
    text-decoration: underline;
}
.marketpin-label {
    font-size: 13px;
    margin-right: 20px;
    color: lightblue;
    text-align: center;
}
.masterpin { 
    color: white;
    font-size: 25px;
    letter-spacing: 5px;
}
.paymentfinalbutton-enterpin {
    width: 70px;
    text-align: center;
    background-color: #e5e5e5;
    height: 35px;
    margin-left: 10px;
}
.paymentfinalbutton-submitpin { 
    background-color: #006187;
    cursor: pointer;
    color: white;
    margin-left: 10px;
    height: 35px; line-height: 35px;
    text-align: center;
    border-radius: 10px;
    width: 100px;
}
.paymentfinalbutton-help {
    height: 30px;
    margin-left: 10px;
}
#billtotalamount {
    font-family: 'Montserrat';
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    text-align: center;
    font-size: 18px;
}



.cardpayamountholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 100%;
}

.cardpayname {
    white-space: nowrap;
    font-size: 12px;
    width: 150px;
}

.cardpayexpiry {
    background-color: white;
    width: 80px;
    font-size: 12px;
}

.cardpayvalue {
    text-align: center;
    width: 80px;
    font-size: 12px;
}

.cardpayamount {
    font-family: 'Montserrat';
    max-height: 25px;
    min-height: 25px;
    width: 100px;
    background-color: #e5e5e5;
    border: none;
    outline: none;
    text-align: center;
}

#cardpayamountbutton {
    user-select: none;
    width: 80px;
    margin: 10px auto 10px auto;
    min-height: 25px;
    max-height: 25px;
    line-height: 25px;
    background-color: #006187;
    color: white;
    cursor: pointer;
    text-align: center;
}

#cardpaycomments {
    font-size: 12px;
    padding: 10px 20px 10px 20px;
    text-align: center;
    height: 25px;
    font-family: 'Montserrat';
}

#paymentmethodpaybalanceadvance {
    font-family: 'Montserrat';
    margin-left: 50px;
    font-size: 12px;
    margin-bottom: 10px;
}

#campaigns {
    outline: none;
    margin-top: 20px;
    margin-right: auto;
    width: 300px;
    height: 40px;
    border: 1px solid lightgray;
    line-height: 40px;
    font-family: 'Montserrat';
}

#campaigntext {
    height: 40px;
    width: 500px;
    margin: 15px auto 0 auto;
    font-size: 13px;
    padding: 5px;
}

#campaignstitle {
    font-size: 15px;
    padding-right: 10px;
}

#billitemservicename, #billitemproductname {
    font-size: 23px;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

#billitempackagelist {
    margin-bottom: 20px;
}

.packageitem {
    border-bottom: 1px solid lightgray;
    display: flex;
    align-items: center;
    height: 25px;
    line-height: 25px;
}

.packageitemname {
    font-size: 13px;
    white-space: nowrap;
    width: 250px;
}

.packageitemquantity {
    background-color: #e5e5e5;
    text-align: center;
    width: 30px;
    height: 20px;
    outline: none;
    border: none;
    font-family: 'Montserrat' !important;
}

.packageitemprice {
    background-color: white;
    padding-left: 10px;
    font-size: 14px;
    width: 90px;
    font-family: 'Montserrat';
}

.packageitemdelete {
    height: 20px;
    cursor: pointer;
}

#billitemservicebylist, #billitempackagelist {
    border: 1px solid lightgray;
    width: 400px;
    height: 180px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}

#billitembuttons {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

#cancelMakePackageButton {
    background-color: gray;
    color: white;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 100px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
}

.additemtobill {
    background-color: #006c5b;
    color: white;
    text-align: center;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    margin-top: 20px;
}
#wierd_aromathai_items{ 
    margin: 20px;
}

.wierd_aromathai_cards_check{ 
    height: 40px; 
    line-height: 40px; 
    font-size: 14px;
}
.wierd_aromathai_cards_none { 
    text-align: center;
    color: #e67575;
}
.wierd_aromathai_button_redeem{ 
    background-color: #006c5b !important;
}
.wierd_aromathai_button{ 
    width: 100px;
    height: 25px; line-height: 25px;
    text-align: center;
    background-color: #006187; color: white;
    cursor: pointer;
    font-size: 14px;
    margin-left: 50px;
}
#wierd_aromathai_buttons, .wierd_aromathai_cards_select {     
    display: flex; 
    align-items: center;
    width: 500px;
    margin: 10px auto;
}
.wierd_aromathai_item_head{ 
    font-weight: 600;

}
.wierd_aromathai_title{ 
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    font-size: 15px;
    width: 400px; 
    padding-right: 10px;
    text-align: right;
}
#wierd_aromathai_cards{ 
    width: 300px;
    height: 25px; 
    font-family: Montserrat;    
}
.wierd_aromathai_item, .wierd_aromathai_item_head{ 
    display: flex;
    height: 30px; 
    font-size: 14px;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.wierd_aromathai_name{ 
    width: 300px;
}
.wierd_aromathai_quantity{ 
    width: 100px;
}
.wierd_aromathai_price{ 
    width: 100px;
}
#wierd_aromathai_widget_holder { 
    position: absolute;
    height: 400px;
    width: 1000px;
    border: 1px solid gray;
    background-color: white;
    display: none;
    z-index: 103;
    top: 100px;
    left: 0; 
    right: 0;
    margin: 20px auto;
}
.wierd_aromathai_widget_holder_close{ 
    position: absolute;
    top: 10px; 
    right: 10px; 
    background-color: #006187; color: white;
    width: 25px; height: 25px; line-height: 25px; 
    text-align: center;
    font-size: 14px; 
    cursor: pointer;
}
#billpaybutton {
    background-color: #006c5b;
    color: white;
    text-align: center;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    margin-left: 20px;
    width: 200px;
    margin-top: 20px;
}

#wierd_aromathai_widget {
    background-color: #006187;
    color: white;
    text-align: center;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    margin-left: 20px;
    width: 150px;
    margin-top: 20px;
}

#billpaybutton {
    width: 130px;
}

#billpaybuttondiscard {
    background-color: #e67575;
}

#billpaybuttonsave {
    background-color: #d79f2b;
}

#billpaybuttonsave, #billpaybuttondiscard {
    color: white;
    text-align: center;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    margin-left: 20px;
    width: 100px;
    margin-top: 20px;
}

.serviceByItemName, .serviceByItemNameHead {
    width: 200px;
    font-size: 14px;
    padding-left: 10px;
}

.serviceByItemDesc {
    width: 100px;
    font-size: 13px;
    text-align: right;
    padding-right: 10px;
}
.serviceByItemHead div {
    font-weight: 600; background-color: white !important; font-size: 13px; height: 20px; line-height: 20px;
}
.serviceByItemPercHead {
    font-family: 'Montserrat';
    border: none;
    outline: none;
    height: 80%;
    text-align: left;
    width: 100px;
    background-color: #e5e5e5;
}
.serviceByItem, .serviceByItemHead {
    background-color: white;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
    height: 35px;
}

.serviceByItemPerc {
    font-family: 'Montserrat';
    border: none;
    outline: none;
    height: 80%;
    text-align: center;
    width: 100px;
    background-color: #e5e5e5;
}

.serviceByItemDelete {    
    width: 20px;
    margin-left: 20px;
    cursor: pointer;
}

#equaliseServiceBy {
    user-select: none;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    margin-top: 10px;
    text-decoration: underline;
}

#billitemcardgetbalance {
    font-family: 'Montserrat';
}

#billitemcardexpiry {
    width: 200px;
    margin-left: 20px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
}

#billitemcardselect, #billitemmembershipselect, #billitempackageoption {
    font-family: 'Montserrat';
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    width: 180px;
    text-align: center;
    outline: none;
}

#billitemmembershipselect {
    width: 250px !important;
}

#billitempackagesearch {
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    font-family: 'Montserrat';
    font-size: 14px;
    width: 170px;
    margin-left: 20px;
    border: none;
    outline: none;
    text-align: center;
}

.billitemmanagerdiscount, .servicememdiscount {
    min-width: 350px;
    max-width: 350px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
}

#billitemservicediscountrs, #billitemproductdiscountrs {
    width: 100px;
}

#billitemservicediscountperc, #billitemproductdiscountperc {
    width: 60px;
}

#billitemservicediscountperc, #billitemservicediscountrs, #billitemproductdiscountperc, #billitemproductdiscountrs {
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    font-family: 'Montserrat';
    font-size: 16px;
    margin-left: 10px;
    border: none;
    outline: none;
    text-align: center;
}

.membershipdiscl {
    font-size: 13px;
    text-align: left;
    margin-left: 10px;
    width: 100px;
    color: #006187;
}

#billitemserviceprice, #billitemservicestaff, #billitemproductstaff, #billitemproductprice,#billitemproductpricegross,  #billitemproductdiscount, #billitemcardspayablevalue, #billitemgpayvalue, #billitemcardstaff, #billitemcardgetbalance, #billitemgiftcardvalue, #billitemgiftcardcode, #billitemgiftcardstaff, #billitemmembershipstaff, #billitemmembershipprice, #billitempackagestaff, #billitempackagevalue, #billitempackageexp, #billitemmembershipexpiry, #billitemmembershipexpirydays, #productsalelotno, .billitemproductdiscountperc {
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    font-family: 'Montserrat';
    font-size: 14px;
    min-width: 200px;
    max-width: 200px;
    margin-left: 20px;
    border: none;
    outline: none;
    text-align: center;
}

.makewhitespace {
    width: 100%;
    height: 20px;
    border-bottom: 1px solid lightgray;
}

.makewhitespace1 {
    width: 100%;
    height: 20px;
    border-top: 1px solid lightgray;
}

#nointernet {
    display: none;
    margin-left: 20px;
    color: #e67575;
}

.iteminputlabel {
    text-align: right;
    padding-right: 10px;
    min-width: 200px;
    max-width: 200px;
    font-size: 15px;
}

.iteminputlabel3 {
    text-align: right;
    width: 20px;
    margin-left: 10px;
}

.iteminputlabel2 {
    text-align: right;
    width: 220px;
    font-size: 14px;
}

.iteminputlabel1 {
    font-family: 'Montserrat';
    font-family: 'Montserrat';
    width: 350px;
}

.billitemline {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.billitemline1 {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#usermembdiscount {
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-left: 10px;
}

#usermembdiscounttitle {
    margin-left: 5px;
    font-size: 14px;
}

#clservicememdisc {
    text-align: left;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    color: #006187;
}

#serviceFinalPrice, #productFinalPrice {
    font-family: 'Montserrat';
    color: #006187;
    text-align: left;
    font-size: 17px;
    width: 200px;
    margin-left: 20px;
}

#billitemsalonname {
    text-align: center;
    font-size: 15px;
    color: white;
    display: none;
}

#billitemsalonshortname {
    color: #e5e5e5;
    font-size: 13px;
    text-align: center;
    margin-bottom: 10px;
}

#billtop {
    width: 100%;
    background-color: #2d3131;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid darkgrey;
    border-left: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
}

.billitem, .billitemhead {
    background-color: ghostwhite;
    display: flex;
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    min-width: 600px;
    max-width: 600px;
}
.billitemhead > div { 
    font-weight: 600;
}
.billitemname {
    min-width: 235px;
    max-width: 235px;
}

.billitemname1 {
    padding-left: 5px;
    font-size: 13px;
}

.billitemname2, .billitemname4 {
    padding-left: 10px;
    margin: 5px;
    font-size: 10px;
    font-family: 'Montserrat';
}

.billitemname3 {
    padding-left: 10px;
    margin: 5px;
    font-size: 10px;
    font-family: 'Montserrat';
}

.billitemquantity {
    border: none;
    outline: none;
    font-size: 14px;
    height: 25px;
}

.billitemquantity, .billitemquantityhead {
    text-align: center;
    font-family: 'Montserrat';
    text-align: center;
    min-width: 30px;
    max-width: 30px;
    margin-left: 7px;
}

.billitemprice {
    outline: none;
    border: none;
    height: 25px;
    font-size: 13px;
    background-color: transparent;
}

.billitemprice, .billitempricehead {
    text-align: center;
    padding-right: 5px;
    font-family: 'Montserrat';
    min-width: 100px;
    max-width: 100px;
}

.billitemdisc {
    background-color: transparent;
    outline: none;
    border: none;
    height: 25px;
    font-size: 13px;
}

.billitemdisc, .billitemdischead {
    text-align: center;
    padding-right: 5px;
    font-family: 'Montserrat';
    min-width: 80px;
    margin-left: 7px;
    max-width: 80px;
}

.billitemfinal {
    height: 25px;
    line-height: 25px;
    font-size: 13px;
}

.billitemfinal, .billitemfinalhead {
    text-align: center;
    padding-right: 5px;
    font-family: 'Montserrat';
    min-width: 80px;
    margin-left: 5px;
    max-width: 80px;
}

.billitembackhead {
    height: 10px;
    width: 15px;
}

.billitemback {
    cursor: pointer;
    margin-top: 3px;
    height: 10px;
    margin-left: 3px;
}

.billitemdelete {
    cursor: pointer;
    height: 18px;
    margin-top: 2px;
}

.billitemdeletehead {
    cursor: pointer;
    width: 10px;
}

#billlogo {
    height: 50px;
}

#billitemsalonaddress {
    display: none;
    /*text-align: left;
    padding-left: 10px;*/
    width: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    color: #9b9a9a;
}

#billitemsalonphone {
    /*text-align: left;
    padding-left: 10px;*/
    display: none;
    color: #9b9a9a;
    font-size: 14px;
    font-family: 'Montserrat';
    margin-bottom: 10px;
}

#billitemsalongst, #billitemsalonpan {
    display: none;
    /*text-align: right;
    padding-right: 10px;*/
    color: lightgray;
    font-size: 12px;
    font-family: 'Montserrat';
}

.myservices, .advancehistory {
    position: absolute;
    border: 1px solid lightgray;
    background-color: #e5e5e5;
    min-height: 20px;
    max-height: 250px;
    overflow-y: scroll;
    z-index: 2;
}

.payhistory {
    position: absolute;
    border: 1px solid lightgray;
    background-color: #e5e5e5;
    height: 250px;
    width: 800px;
    z-index: 2;
    display: flex;
}

.payhistorycards {
    width: 40%;
    height: 100%;
    border-right: 1px solid lightgray;
}

.payhistorytrans {
    width: 70%;    
    height: 100%;
    overflow-y: scroll;
}

.claddmem {
    position: absolute;
    border: 1px solid lightgray;
    background-color: white;
    z-index: 2;
    display: flex;
    height: 200px;
}

.claddmemleft {
    width: 200px;
}

.claddmemright {
    border-left: 1px solid lightgray;
    width: 250px;
}

.claddmemhead {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: gray;
    color: white;
    text-align: center;
    font-size: 14px;
}

.claddmemadd:hover {
    background-color: gray;
}

.claddmemother {
    position: relative;
    text-align: left;
    padding-left: 10px;
    height: 25px;
    background-color: white;
    border-bottom: 1px solid lightgray;
    line-height: 25px;
    font-size: 14px;
    font-family: 'Montserrat';
}

.payhistoryitemhead {
    font-weight: 600;
}

.claddmemaddarea {
    padding: 10px;
    display: flex;
}

.claddmemaddleft, .claddmemaddright {
    text-align: center;
    width: 100%;
}

.claddmemaddsubmit, .claddmemaddclient {
    width: 150px;
    font-size: 13px;
    text-align: center;
    background-color: #006187;
    cursor: pointer;
    color: white;
    height: 25px;
    line-height: 25px;
    margin: 10px auto 10px auto;
}

.claddmemdelete {
    cursor: pointer;
    height: 18px;
    position: absolute;
    right: 5px;
    top: 5px;
}

.claddmemaddphone, .claddmemaddname, .claddmemaddgender {
    width: 150px;
    height: 20px;
    line-height: 20px;
}
.claddmemaddgender {
    margin-top: 10px;
}
.claddmemclientname, .claddmemclientphone {
    font-family: 'Montserrat';
    font-size: 15px;
}

.claddmemerror {
    color: red;
    font-size: 13px;
    text-align: center;
}

.claddmemsearch {
    width: 100%;
    height: 30px;
    line-height: 30px;
}

.claddmemaddphone, .claddmemaddname, .claddmemsearch {
    text-align: center;
    background-color: #e5e5e5;
    border: none;
    outline: none;
    font-family: 'Montserrat';
}

.claddmemaddname {
    margin-top: 5px;
}

.serviceAddPlus {
    cursor: pointer;
    height: 18px;
    width: 18px;
    opacity: 0.6;
    margin-left: 10px;
    margin-right: 10px;
}

.myservicesitemhead, .myservicesitemhead > div {
    background-color: #006187 !important;
    color: white !important;
    cursor: none !important;
}

.myservicesitem, .payhistoryitem, .payhistoryitemhead {
    display: flex;
    height: 25px;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid lightgray;
}

.payhistoryitemdate {
    text-align: center;
    font-size: 12px;
    font-family: 'Montserrat';
    width: 150px;
}

.payhistoryitemname {
    text-align: left;
    font-size: 12px;
    font-family: 'Montserrat';
    width: 100px;
}
.payhistoryitemname1 {
    text-align: left;
    font-size: 12px;
    font-family: 'Montserrat';
    width: 250px;
    padding-left: 5px;
    white-space: nowrap;
}

.payhistoryitemvalue, .payhistoryitemvalue1 {
    font-size: 12px;
    font-family: 'Montserrat';
    width: 100px;
    text-align: center;
    background-color: #e5e5e5;
}

.payhistoryitemvalue1 {
    text-align: left;
}

.myservicesitemname {
    font-size: 13px;
    white-space: nowrap;
    min-width: 250px;
    max-width: 250px;
}

.myservicesitemexpiry {
    font-size: 13px;
    text-align: center;
    background-color: #e5e5e5;
    white-space: nowrap;
    min-width: 100px;
    max-width: 100px;
}

.myservicesitemcount {
    background-color: #e5e5e5;
    font-size: 14px;
    font-family: 'Montserrat';
    width: 50px;
    text-align: center;
    padding-left: 10px;
}

#serviceservicebalance {
    margin-top: 10px;
}

    #serviceservicebalance > .iteminputlabel {
        width: 500px !important;
        text-align: center;
    }

#userservicebalance {
    height: 20px;
    width: 20px;
    margin-left: 20px;
    cursor: pointer;
}

.userservicebalancelabel {
    font-size: 14px;
}

#billfor {
    color: #9b9a9a;
    margin-top: 10px;
    font-size: 12px;
    text-align: left;
    padding-left: 10px;
}

#billtotal {
    padding-left: 5px;
    font-size: 14px;
    margin-bottom: 10px;
}

#billtotals {
    width: 420px;
    margin-bottom: 10px;
}

#billdiscount {
    margin-top: 10px;
    padding-left: 5px;
    font-size: 12px;
}

#billcardpay {
    margin-top: 10px;
    padding-left: 5px;
    font-size: 12px;
    color: #e67575;
    margin-bottom: 10px;
}

#billtotalcgst {
    color: #006187;
    padding-left: 15px;
    font-size: 10px;
}

#billtotalsgst {
    color: #006187;
    padding-left: 15px;
    font-size: 10px;
}

#billtotalgst {
    color: #006187;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}
#billrounding, #billbeforerounding{
    padding-left: 5px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}
#billgrandtotal {
    padding-left: 5px;
    font-size: 15px;
    font-weight: 600;
}

#comms {
    position: relative !important;
}

#commholder {
    display: flex;
}

#commslist {
    overflow-y: scroll;
    width: 350px;
    border-right: 1px solid lightgray;
    height: 800px;
}

#commtop {
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid lightgray;
}

#commview {
    width: 800px;
    height: 800px;
    border-right: 1px solid lightgray;
}

#commcal:hover {
    opacity: 0.75;
}

    #commcal:hover #commcallink {
        display: flex;
        justify-content: center;
        align-items: center;
    }

#commcal {
    cursor: pointer;
    position: relative;
    height: 280px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

#commcallink {
    display: none;
    position: absolute;
    height: 280px;
    width: 500px;
    z-index: 600;
    font-size: 20px;
    color: black;
}

#commcalendar {
    position: relative;
    width: 500px;
    border-right: 1px solid lightgray;
}

#commcalendartitle {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #006187;
    text-align: center;
}

.commcalitem {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid lightgray;
}

#commcalendarlist {
    height: 500px;
    overflow-y: scroll;
}

.commcalitemname {
    width: 250px;
}

.commcalitemdate {
    width: 150px;
}

#commviewtop {
    position: relative;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid lightgray;
}

#commviewdelete {
    height: 30px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
}

#commviewsubject {
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    top: 10px;
    left: 50px;
}

#commviewfrom {
    position: absolute;
    bottom: 10px;
    left: 50px;
}

#commviewdate {
    font-family: 'Montserrat';
    position: absolute;
    color: #006187;
    bottom: 10px;
    right: 50px;
}

#commbody {
    overflow-y: auto;
    height: 700px;
    padding: 30px;
}

.comm {
    position: relative;
    padding: 8px 0 10px 25px;
    margin: 0px;
    cursor: pointer;
    border-bottom: 1px solid lightgray;
}

.commsubject {
    width: 100%;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #2d3131;
}

.commdate {
    position: absolute;
    font-size: 13px;
    font-family: 'Montserrat';
    color: #006187;
    right: 10px;
    bottom: 10px;
    width: 100px;
    text-align: center;
    background-color: white;
}

.comm:hover {
    background-color: #e5e5e5;
}

.commname {
    margin-top: 20px;
    font-size: 13px;
}

#newcomm {
    background-color: white;
    position: absolute;
    top: 150px;
    left: 200px;
    width: 700px;
    height: 500px;
    display: none;
}

#editor {
    height: 400px;
    width: 700px;
    background-color: white;
    font-family: 'Montserrat'
}

#newcommbuttons {
    height: 50px;
    background-color: #e5e5e5;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-top: 1px solid lightgray;
    width: 698px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

#newcommsubject {
    width: 678px;
}

#newcommsubject, #newcalsubject {
    padding-left: 20px;
    font-family: 'Montserrat';
    border: none;
    outline: none;
    height: 30px;
    background-color: #e5e5e5;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-top: 1px solid lightgray;
}
.commrefresh {
    margin-left: 10px;
    cursor: pointer;
    height: 23px;
}

#shownewcal:hover {
    background-color: #e5e5e5;
}

#shownewcomm:hover {
    background-color: #e5e5e5;
}

#shownewcomm, #shownewcal {
    user-select: none;
    height: 30px;
    line-height: 30px;
    width: 200px;
    font-size: 20px;
    margin-left: 25px;
    text-align: center;
    cursor: pointer;
}

.newcommbutton {
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    line-height: 30px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

#newcommaudience {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    background-color: #d79f2b;
    height: 30px;
    cursor: pointer;
    line-height: 30px;
    margin-right: 380px;
}

.newcommbutton:nth-of-type(2) {
    margin-right: 20px;
    background-color: #2d3131;
}

.newcommbutton:nth-of-type(3) {
    margin-right: 20px;
    background-color: #006c5b;
}

#atheads {
    margin-top: 20px;
    margin-left: 30px;
    height: 35px;
    display: flex;
    justify-content: flex-start;
}

.athead {
    font-size: 14px;
    padding-left: 50px; padding-right: 50px;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background-color: #e5e5e5;
    cursor: pointer;
}

#stockexcel {
    height: 30px; width: 30px; 
    cursor: pointer; margin-left: 20px;
}
.admintab {
    margin-left: 30px;
    background-color: lightgray;
    height: 900px;
    width: 1400px;
    border-left: 1px solid lightgray;
}
.billchangeexcel{ 
    height: 30px; cursor: pointer;
    margin-left: 20px;
    margin-bottom: 10px;
}
.discountexcel{ 
    margin-top: 15px;
    height: 25px; cursor: pointer;
    margin-left: 20px;    
}
#atSalons { 
    padding: 10px;
}
.atsalonitem{
    height: 30px; display: flex; align-items: center;
    font-size: 14px; border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.atsalonitem:hover {
   background-color: #e5e5e5;
}
.atsalonitemname { 
    text-align: left; padding-left: 10px; 
    width: 200px;
    white-space: nowrap;
    overflow-x: hidden;
}
.atsalonitemname1 {
    text-align: left; padding-left: 10px; 
    width: 250px;
    white-space: nowrap;
    overflow-x: hidden;
}
#newtargetinput {
    width: 180px;
    height: 30px;
    line-height: 30px;
    background-color: #e5e5e5;
    text-align: center;
}
#creditlimitinput {
    width: 120px;
    margin-right: 20px;
    height: 30px;
    line-height: 30px;
    background-color: #e5e5e5;
    text-align: center;
}
#atnewservicebutton {
    color: #006187; cursor: pointer; font-size: 14px; margin-bottom: 20px;
}
#atServices, #atSMS {
    padding: 15px;
}
#atSMS { 
    display: flex;
}
.atSMS1{ 
    width: 300px; 
    height: 700px; 
}
.atSMS2 {
    padding-top: 80px;
    padding-left: 30px;
    height: 700px;
}
.atsmslist{ 
    background-color: white;
    width: 1000px;
    height: 600px; overflow-x: hidden; overflow-y: scroll;
    margin: 0 auto;
}
.atsmsitem, .atsmsitemhead { 
    display: flex;
    height: 25px;
    align-items: center;
}
.atsmsitemhead{ font-size: 12px; font-weight: 600;}
.atsmsitem{ 
    font-size: 12px;
    border-bottom: 1px solid lightgray;
}
.atsmsitemtime{ 
    padding-left: 5px;
    width: 100px;
}
.atsmsitemdest {
    width: 80px;
}
.atsmsitemdcount {
    width: 50px;
    text-align: center;    
}
.atsmsitem .atsmsitemtext {
    font-size: 11px;
}
.atsmsitem .atsmsitemid {
    font-size: 11px;
}
.atsmsitemtext {    
    width: 600px;
    white-space: nowrap; overflow: hidden;
}
.atsmsitemid {
    padding-left: 10px;
    width: 200px;
}
#atnewservicesubmit {
    background-color: #006187; color: white;
    height: 30px; line-height: 30px; text-align: center;
    font-size: 14px; cursor:pointer;
    margin-left: 20px; width: 150px;
}
.atnewserviceinput, .atnewserviceinput1 {
    width: 250px; background-color: #e5e5e5;
    height: 30px; line-height: 30px; font-size: 14px; 
    margin-left: 10px;text-align: center;
    margin-bottom: 10px;
}
.atnewserviceinput { width: 350px; }
.atnewserviceinput1 { width: 250px; }
#atnewservice {
    background-color: white; 
    padding: 10px 0 10px;
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
select { font-family: 'Montserrat';}
.atsitemsalon {
    height: 25px; background-color: #e5e5e5;
    width: 150px; border: none; outline: none;
}
.atsitemsalonprice {
    height: 25px; line-height: 25px;
    width: 150px;
    text-align: center;
    position: relative; 
    background-color: lightblue;
}
.atsitemsalonpricenew {
    position: absolute;
    left: 25px;
    text-align: center;
    width: 100px;
    background-color: lightgray;
    height: 23px; line-height: 23px;
}
#atservicemaster{    
    background-color: white;    
    width: 1300px;    
}
#atsinfo{
    color: #006187; font-size: 13px;
}
#atsinfo1{
    height: 25px; line-height: 25px; color: red; font-size: 13px;
}
#atservicelist {
    overflow-y: scroll;
    height: 550px; 
}
.atsitemhead, .atsitem {
    display: flex; align-items: center;        
}
.atsitemhead {
    height: 30px;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.atsitemhead > div:hover { 
    text-decoration: underline
}
.atsitem {
    height: 25px;
    border-bottom: 1px solid lightgray;
    font-size: 11px;
}
.atsitem:hover { background-color: #e5e5e5;}

.atsitem-all{ 
    height: 15px; 
    cursor: pointer;
}
.activate-all-services { 
    position: absolute;
    padding: 20px;
    width: 200px; 
    background-color: #e5e5e5;
    border-radius: 10px;
    border: 1px solid lightgray;
}
.activate-all-services-name {
    font-size: 13px; 
    font-weight: bold;
    height: 25px;
    line-height: 25px;
}
.activate-all-services-price {
    font-size: 13px;
    height: 25px;
    line-height: 25px;
}
.activate-all-services-submit-cancel {
    margin-top: 10px;
    background-color: #e67575 !important;
}
.activate-all-services-submit, .activate-all-services-submit-cancel {
    background-color: #006187;
    color: white;
    font-size: 13px;
    text-align: center;
    height: 25px;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 5px;
    line-height: 25px;
}
.activate-all-services-close {
    cursor: pointer;
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    top: 3px;
    right: 6px;
}
.ca_box { 
    position: absolute; 
    padding: 20px;
    z-index: 10;
    background-color: #e5e5e5; 
    border: 1px solid lightgray;
    border-radius: 10px;
}
.ca_close { 
    height: 30px; line-height: 30px; 
    width: 30px; 
    text-align: center;
    position: absolute; 
    top: 5px; 
    right: 5px; 
    border-radius: 50%;
    cursor: pointer;
    background-color: #2d3131; 
    color: white;
}
.ca_title{ 
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.ca_item_head { 
    font-weight: 600;
}
.ca_item { 
    font-size: 13px;
    display: flex; 
    height: 30px; 
    border-bottom: 1px solid lightgray;
    align-items: center;
}
.ca_date { 
    width: 150px; 
    text-align: center;
}
.ca_salon, .ca_notes, .ca_service { 
    width: 200px; 
    text-align: center;
}
#clientAppointments { 
    top: 10px; 
    right: 10px;
    cursor: pointer;
    height: 35px; 
    position: absolute;
}
.atsitemname1 {
    padding-left: 5px;
    min-width: 300px;
    max-width: 300px;
    white-space: nowrap;
    position: relative;
    overflow-x: hidden;
}
.atsitemname0{
    min-width: 200px;
    max-width: 200px;
    overflow-x: hidden;
    white-space: nowrap;
}

.atsitemname2 {     
    min-width: 150px;    
    max-width: 150px;    
}
.atsitemname3 { 
    max-width: 180px; min-width: 180px; 
}
.atsitemname4 { 
    min-width: 100px; max-width: 80px;text-align: center;
}
.attargethelp, .attsalondetailshelp, .atclosingsmshelp {
    color: #64c466; font-size: 14px; margin-top: 10px; font-weight: 600;
    text-align: center;
}
.blank{
    height: 20px; width: 100px;
}
.atsubmit{
    cursor: pointer;
    background-color: #006187; color: white; 
    text-align: center; height: 30px; line-height: 30px;
    width: 120px; margin: 20px auto; font-size: 14px;
}
.atsalondetail, .atsalondetailshort, .atsalondetailshort1{
    height: 25px; line-height: 25px; 
    background-color: #e5e5e5;
    width: 250px;
    padding-left: 10px;
}
.atsalondetailshort {
    width: 200px; margin-right: 10px;
}
.atsalondetailshort1 {
    width: 100px; margin-right: 10px;
}
.atsalondetaillong{
    width: 550px;
}
.atsalonspart {
    position: relative;
    background-color: white;
    padding: 10px;
    margin-top: 20px;
    margin-left: 20px;
    height: 800px; width: 500px;
    text-align: center;
}
#addnewsalon {
    position: absolute;
    right: 10px; 
    top: 5px; 
    color: #006187;
    font-size: 14px;
    cursor: pointer;
}
.atsalonselected {
    margin-top: 10px;
}
.atsalonselected, .newsalontitle {
    font-size: 20px;
    text-align: center;
}
#atsalonlist {
    overflow-y: scroll;
    height: 700px;
    width: 500px;
}
.atsalonsdetail, .atsalonnew {
    display: none;
    padding-left: 40px; 
    width: 600px;
}
.atsalonsdetail {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 800px;
    width: 800px;
    overflow-y: scroll;
}
    .atsalonsubparts {
        width: 700px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
.atsalonsubpart{
    margin-top: 20px;
    background-color: white;
    padding: 10px;
}
.atsalonsubpart1 {
    width: 280px;
    text-align: center;
}
.atsalonsubpart2 {
    margin-left: 30px;
    width: 350px;
    height: 260px;
}
.atsalonsubpart3 {
    width: 700px;
}
#ataddsmsclosingphone {
    height: 30px; line-height: 30px; 
    background-color: #e5e5e5;
    margin: 10px 0 10px 0;
    text-align: center;
    width: 180px;
}
#atsalonsmslist {
    height: 130px;
    width: 300px;
    overflow-y: scroll;
    margin: 20px auto;
    border: 1px solid lightgray;
}
.atsalonsmslistitem {
    display: flex; height: 25px; align-items: center;
    border-bottom: 1px solid lightgray; position: relative;
    font-size: 14px;
}
.atsalonsmslistitemname { 
    padding-left: 20px;
}
#fcgetall { 
    margin-left: 20px; 
    font-size: 14px;
    cursor: pointer;
}
#fcgetall:hover { 
    text-decoration: underline;
}
.atsalonsmslistitemdelete {
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 5px;
}
.atspitem{
    display: flex; height: 35px; align-items: center;
}
.atspitemname {
    font-size: 14px;
    width: 120px;
    margin-right: 10px;
    text-align: right;
}
.athelptext {
    font-size: 14px;
    margin: 20px 0 20px 0;
}
.athelp {
    font-size: 14px; 
    color: #006187;
    height: 30px; line-height: 30px;
}
.atsalonspart-startdate { 
    height: 30px; line-height: 30px;
    margin-left: 20px;
}
.atsalonsparttitle {
    margin-bottom: 10px;
    font-size: 15px;
    color: #006187;
    text-align: center;
}
#fpettycashexcel {
    height: 25px; cursor: pointer; margin-left: 20px;    
}
#fpettycashitemssalon {
    margin-right: 50px;
    width: 250px;
    font-family: 'Montserrat';
    height: 25px;
    background-color: white;
    margin-left: 10px;
    outline: none;
    border: none;
}
#mgrvendorsalon, #mgrreceiptsalon {
    margin-right: 50px;
    width: 250px;
    font-family: 'Montserrat';
    height: 30px;
    background-color: #e5e5e5;
    margin-left: 20px;
    outline: none;
    border: none;
}
#adminbillssalonselect, #adminbillsroomselect{ 
    margin-top: 10px !important;
}
#adminbillssalonselect, #adminbillsroomselect, #mgrvendorsalon, #atsmssalon {
    width: 250px;
    font-family: 'Montserrat';
    height: 30px;
    margin-left: 20px;
    outline: none;
    border: none;
}
#atsmssalon { 
    width: 150px !important;
}
#atsmsorgtext {
    font-size: 13px;
    margin-left: 10px;
}
#atsmsorg { 
    height: 30px; width: 30px; 
    cursor: pointer; margin-left: 5px;
}
.smsuseitem{ 
    margin-top: 30px;
    font-size: 25px; color: #006187;
    text-align: center;
}
.isms-total { 
    margin-top: 60px !important;
}
.smsuseitem1 { 
    margin-top: 30px;
    font-size: 20px; color: #2d3131;
    text-align: center;
}
.smsuseitemtext{ 
    font-size: 13px; 
    margin-top: 10px;
    text-align: center;
}
.ftitletext{
    font-size: 13px;
}
#closingsalon, #staffsalarysalon, #fclosingsalon, #stocksalonlist, #auditsalon {
    width: 150px;
    font-family: 'Montserrat';
    height: 30px;
    margin-left: 20px;
    outline: none;
    border: none;
    background-color: #e5e5e5;
}
.stockrefresh {
    height: 20px; margin-left: 20px; cursor: pointer;
}
.stocklistsalon {margin-left: 10px; color: #006187; }
.stocktabtitle {
    height: 40px; 
    font-size: 17px; 
    text-align: center;
    display: flex; align-items: center; justify-content: center;
}
#stocklist {
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
    width: 1200px;
    background-color: #e5e5e5;
}
#stockchekinkiosk {
    margin-left: 20px;
    width: 1200px;
}

.checkincheckout {
    width: 150px; text-align: center;
    height: 30px; line-height: 30px; 
    color: white; cursor: pointer;
    margin: 0 auto;
}
#checkin { 
    margin-top: 20px;
    background-color: #006c5b;
}
#auditone, #auditmany {
    margin-left: 20px;
    background-color: #e5e5e5;
    padding: 20px;
    width: 1100px;
}
.vendorproductrefresh {
    height: 20px; margin-left: 20px; cursor: pointer;
}
#auditone {
    margin-top: 10px;
    height: 80px;
    display: flex; align-items: center;
}
.auditonepart {
    display: none;
    padding-left: 30px; padding-right: 30px;
}
#auditonenotes{
    font-family: 'Montserrat';
    height: 60px; 
    width: 200px; resize: none;
    outline: none; border: none;
    background-color: white;
}
#auditlotselect {
    height: 30px; width: 100px; 
}
.auditoneparttitle{ height: 30px; line-height: 30px; font-size: 14px; margin-bottom: 10px;}
#auditonecount { 
    height: 30px; line-height: 30px; width: 100px; text-align: center;  
}
#auditonesubmit { 
    background-color: #006187; color: white; 
    font-size: 14px; 
    cursor: pointer;
    text-align: center;
    height: 50px; line-height: 50px; width: 150px;
}
#auditmany {
    height: 700px;
}
#audittable {
    margin-top: 10px;
    background-color: white;
    overflow-y: scroll;
    width: 1080px;height: 650px;
}
.audititem, .audititemhead {
    height: 25px; display: flex; align-items: center; border-bottom: 1px solid lightgray;
}
.audititem { font-size: 13px; margin-bottom: 5px;}
.audititemhead { font-size: 14px; }
.audititemhead > div { cursor: pointer;}
.audititemhead > div:hover { text-decoration: underline;}
.audititem1 {
    padding: 5px;
    min-width: 300px;
    max-width: 300px;
}
.audititeminput {
    height: 25px; 
    width: 100px; 
    margin-left: 25px;
    margin-right: 25px;
    text-align: center;
    background-color: #e5e5e5;
}
.audititem2 {
    min-width: 150px;
    max-width: 150px; overflow-x: hidden;
}
.audititem3 {
    text-align: center;
    min-width: 150px;
    max-width: 150px;
}
.audititemhead > div {
    font-weight: 600;
}
.audittitle {
    font-size: 18px; height: 40px; line-height: 40px;
    color: #006187;
}
.auditor {
    text-align: center;
    width: 500px;
    margin-top: 10px; margin-bottom: 10px;
    font-size: 15px; color: #006187;
}
#checkout {
    margin-top: 20px;
    background-color: #e67575;
}
#stocklistproductsearch {
    margin-top: 20px;
    margin-left: 20px; 
    border-right: 1px solid gray;
    padding-left: 20px;
    width: 500px;
}
#auditproductsearch {     height: 30px; line-height: 30px; width: 300px; padding-left: 10px;}
.checkincheckoutcount {
    height: 30px; line-height: 30px; 
    width: 100px; text-align: center;   
    margin-left: 15px; font-size: 13px;
    background-color: #e5e5e5;
}

.stocktotals { 
    margin-left: 30px;
}
.stockbarcode {
    cursor: pointer;
    height: 40px; margin-left: 20px;
}
.stockbarcode1 { 
    position: absolute;
    cursor: pointer;
    height: 40px;
    left: 250px;
    bottom: -2px;
}
#stockcheckproductsearch {
    height: 25px; line-height: 25px; 
    width: 350px; 
    padding: 10px;
    background-color: #e5e5e5;
}
#stockcheckbuttons {
    display: none;
    text-align: center;
    min-width: 250px;
    position: relative;
    margin-left: 40px;
}
#stockcheckbuttons_ghost{ 
    display: none; 
    position: absolute;
    top: 0; 
    font-weight: 600;
    left: 0;
    background-color: white; 
    opacity: 0.7;
    padding-top: 50px;
    width: 250px;
    height: 130px;
}
#checkouthistory { 
    position: relative;
    margin-left: 20px; 
    height: 180px; 
    width: 500px; 
    border: 1px solid lightgray;
}
#checkouthistorylist {
    overflow-y: scroll;
    height: 160px;
}
#checkouthistorytitle {
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid lightgray;
    background-color: #006187; color: white;
}

.cohistoryitem {
    font-size: 13px;
    height: 25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.cohistoryitem-product {
    width: 300px;
    padding-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
}
.cohistoryitem-user { 
    width: 75px;
    white-space: nowrap;
    overflow-x: hidden;
}
.cohistoryitem-time {
    width: 125px;
    white-space: nowrap;
    overflow-x: hidden;
}
.stocklistitem, .stocklistitemhead {
    display: flex;
    height: 30px;
    line-height: 30px;
    align-items: center;
}
.stocklistitem {
    font-size: 13px;
    border-bottom: 1px solid lightgray;
}
.stocklistitemhead {
    font-size: 15px;
    font-weight: 600;
}
.stocklistitemvalue {
    min-width: 250px; max-width: 250px; white-space: nowrap; overflow-x: hidden;
    padding-left: 5px;
}
.stocklistitemhist {
    width: 100px;
}
.stocklistitem > .stocklistitemhist {
    cursor: pointer;
}
.prodHist {
    position:absolute;
    height: 430px; 
    width: 700px; 
    border: 1px solid lightgray;
    background-color: white;
}
.prodHistTitle {
    height: 30px; line-height: 30px; 
    font-size: 15px; text-align: center;
    color: #006187; border-bottom: 1px solid lightgray;
}
.prodHistBoxList {
    height: 400px; overflow-y: scroll;
}
.prodHistItem {
    height: 25px; display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
}
.prodHistItemDate {
    width: 200px; padding-left: 10px;
}
.prodHistItemUser {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}
.prodHistItemSource {
    width: 200px;
    padding-left: 10px;
    white-space: nowrap; overflow: hidden;
}
.prodHistItemValue {padding-left: 10px;
    width: 100px; text-align: center; white-space: nowrap; overflow: hidden;
}
.stocklistitem > .stocklistitemhist:hover {
    text-decoration: underline; color: #006187;
}

#stocklistitems {
    height: 700px; overflow-y: scroll;
}
.stocklistitemvalue1 {
    min-width: 100px;
    max-width: 100px;
}
#stockchecklotselect {
    height: 30px; line-height: 30px; 
    width: 150px; margin-left: 10px; margin-right: 10px;
    margin-bottom: 20px; text-align: center; font-family: 'Montserrat';
}
#scname {
    margin-top: 20px;
}
#scname, #sccat, #scsubcat, #scprice, #scmaxlotno, #sccount {
    height: 20px; line-height: 20px;
    font-size: 14px;

}
.fclosingdate {
    background-color: #e5e5e5; height: 30px; margin-left: 10px; text-align: center;
}
#fclosingsalon {
    margin-right: 20px;
}
#fclosingsalonlist {
    background-color: white;
    height: 600px;
    width: 720px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid lightgray;
}
#staffSalaries{
    height: 600px;
    overflow-y: scroll;
    background-color: #e5e5e5;
    margin-top: 20px; width: 700px;
}
 .fclitem, .fclitemhead, .fclitemheadhead {    
    display: flex; font-size: 13px;     
    border-bottom: 1px solid lightgray;
}
.fclitemheadtop,.fclitemheadheadtop {    
    display: flex; font-size: 13px;     
}
.fclitem:hover {
    background-color: #e5e5e5;
    cursor: pointer;
}

.hider {
    display: none;
}
.fclitem {
      height: 35px;
      align-items: center;
  }
.fclitemhead, .fclitemheadtop { 
    height: 30px;
}
.fclitemhead > div, .fclitemheadtop > div { 
    height: 30px;
    font-size: 12px;     
    line-height: 30px !important;
}

#valuecarddesc {
    height: 70px; 
    width: 400px; 
    margin: 0 auto;
    font-size: 13px;
    text-align: center;
    color: #006187;
}
.fclitemdiff1 {
    border-right: 1px solid lightgray;
}
#registerdate, #registerenddate {
    border: none; outline: none;
    height: 30px; line-height: 30px;
    font-family: 'Montserrat';
    margin-left: 20px;
    width: 200px;
    text-align: center;
}
.rspmtotalitem {
    color: #006187;
    margin-top: 90px;
}
.rspmtotalreditem{
    color: #006187;
    margin-top: 25px;
}
.rsaftertaxitem{
    color: #006187;
}
#rsredemptions, #rspayredemptions {
    height: 200px;
}
#rspayrefunds {
    height: 150px;
}
#rspayredemptions {
    margin-top: 30px;
}
#rstypes {
    width: 400px;
}
#rspaymentmodes {
    width: 500px;
}
#rstypes, #rspaymentmodes, #rsredemptions, #rspayredemptions, #rspayrefunds {
    margin-left: 20px;
    position: relative;
    margin-top: 20px;
    padding-top: 10px;
    padding-left: 10px;
    background-color: white;
}
.rstitle {
    height: 30px; line-height: 30px;
    font-size: 20px; text-align: center;
    margin-bottom: 20px;
    color: #006187;
}
.rsreditem {
    color: #e67575;
}
.rsitem, .rspmitem, .rsitem0{
    border-bottom: 1px solid lightgray;
    display: flex; 
    height: 35px; align-items: center;
    font-size: 15px;
}
.rsitemtop {
    margin-top: 10px;
}
.rsitem1 {
    display: flex; 
    height: 40px; align-items: center;
    font-size: 15px; font-weight: 600;
}
.rsitemnamehead{ 
    font-weight: 600;
}
.rsitemname, .rsitemnamehead{
    min-width: 180px;
    max-width: 180px;
    font-size: 14px;
    text-align: right; padding-right: 10px;
}
#rspmtitle {
    display: flex;
    align-items: center;
    position: absolute;
    height: 20px;
    top: 45px;
}
.rsitemvaluehead{ 
    font-weight: 600;
}
.rsitemvalue, .rsitemvalue1, .rsitemvaluehead  {
    margin-left: 20px;
    width: 90px;
    text-align: center;
    font-size: 13px;
}
.rsitemvalue1 { font-weight: 600;}
.fclitem0, .fclitem-1{
    padding-left: 5px;
    min-width: 90px;
    max-width: 90px;
    height: 25px; line-height: 25px;
}
.fclitemclosed{
    min-width: 50px;
    min-width: 50px;
    text-align: center;
    height: 25px; line-height: 25px;
}
.fclitemclosedcheckbox{
    height: 20px; width: 20px; cursor: pointer;
}
.fclitem1, .fclitem2{
    text-align: center;
    min-width: 70px;
    max-width: 70px;
    height: 25px; line-height: 25px;
}
.fclitemhead1 {
    border-right: 1px solid lightgray;
    background-color: gray; color: white;
    text-align: center;
    min-width: 555px;
    max-width: 555px;
    height: 25px; line-height: 25px;
}
.fclitem9, .fclitem-9 {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    height: 25px; line-height: 25px;
}

.fclitemhead2 {
    border-right: 1px solid lightgray;
    background-color: gray; color: white;
    text-align: center;
    min-width: 210px;
    max-width: 210px;
    height: 25px; line-height: 25px;
}
.fclitemdiff {

    border-right: 1px solid lightgray;
}
.fstsitem {
    display: flex;  
    height: 30px; align-items: center;
    font-size: 14px;
    border-bottom: 1px solid lightgray;
}
.fstsitem0{
    width: 200px; text-align: center;
}
.fstsitem1 {
    width: 100px; text-align: center;
    background-color: #006187;
    color: white; 
    height: 25px; line-height: 25px;
    font-size: 13px; cursor: pointer;
}
#abtop, #abtopsearch {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#abtop {
    margin-top: 10px;
    border-top: 1px solid white;
}
#abtopsearch {
    margin-bottom: 10px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}
#abbottom {
    display: flex;
    justify-content: flex-start;
}#giftcardcheckresult {
     color: #006187;
     font-size: 13px;
     margin-left: 200px;
     text-align: center;
 }

#abbottomleft {
    position: relative;
    background-color: #e5e5e5;
    width: 1250px;
    height: 620px;
    margin-left: 20px;
    overflow-y: scroll;
}
#mpoinvoiceno{ 
    background-color: #e5e5e5;
    height: 25px;
}
#fclist {
    background-color: white;
    height: 600px;
    overflow: scroll;
}
.fcitem, .fcitemhead {
    display: flex;
    height: 25px; align-items: center;
    font-size: 13px;
}
#fcholder {
    display: flex;  
}
#fcclienthelp {
    color: #006187;font-size: 13px;
}
#fcclient {
    background-color: white;
    margin-left: 20px;
    height: 600px;
    padding-left: 10px;
    overflow-y: scroll;
    width: 350px; font-size: 14px;
}
.fcitem {
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    width: 1300px;
}
.fcitem:hover {
    background-color: lightgray;
}
.fcitemhead > div {
    user-select: none;
    font-size: 13px !important;
    font-weight: 600;
    cursor: pointer;
}
.fcitemhead > div:hover {
    text-decoration: underline;
}
.fcitemname {
    padding-left: 5px;
    min-width: 120px;
    max-width: 120px;
}
#invreceive {
    display: none;
}
.fcitemname1 {
    text-align: center;
    min-width: 70px;
    max-width: 70px;
}
.fcitemname2 {
    text-align: center;
    min-width: 100px;
    max-width: 100px;
}
.fcitemname3 {
    text-align: center;
    min-width: 140px;
    max-width: 140px;
}
.fpcsitem{
    cursor: pointer;
    display: flex; align-items: center;
    height: 40px;
    border-bottom: 1px solid lightgray;
    font-size: 15px;
}
.fpcsitem:hover {
    background-color: #e5e5e5;
}
.fpcsitemname {
    padding-left: 5px;
    width: 300px;
}
.fpcsitemvalue {
    width: 100px;
}
.fpcitem, .fpcitemhead{
    display: flex; align-items: center;
    height: 25px;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
}
.fpcitemhead > div {
    font-weight: 600;
}
.fpcitemvalue1 {
    padding-left: 5px;white-space: nowrap;
    min-width: 120px;max-width: 120px;
}
.fpcitemcomments {
    height: 20px; width: 20px; background-color: #006187;
    color: white; border-radius: 50%; cursor: pointer;
    line-height: 20px; text-align: center;
}
.fpcitemvalue2{
    background-color: white;    
    padding-left:5px;
    min-width: 250px;
    max-width: 250px;
}
.fpcitemvalue29{
    background-color: white;    
    padding-left:5px;
    min-width: 150px;
    max-width: 150px;
}
.fpcitemvalue{
    padding-left: 10px;
    min-width: 100px;
    max-width: 100px;    
}
#fsubtab-monthly { 
    position: relative; 
}
#fMonthly-title {
    margin-top: 20px;
    font-size: 14px;
    color: #006187;
    font-weight: 600;
}
#fmulti-items { 
    border: 1px solid lightgray;
    padding: 10px;
    position: relative; 
}
.fmulti-item{ 
    display: flex;  align-items: center;
    height: 50px;
}
#fmulti-run, #fmulti-run-range {
    height: 30px; line-height: 30px;
    text-align: center;
    background-color: #006187; color: white;
    font-size: 14px;
    width: 300px;
    margin: 20px;
    cursor: pointer;
}
.fmulti-last {
    font-size: 14px; 
    margin-left: 10px;
    margin-right: 10px;
}
#fmulti-lastmonth { 
    height: 30px;
}
#fmulit-desc{ 
    position: absolute; right: 50px; top: 20px;
    text-align: left;
    font-size: 14px;
    color: red;
}
#adminbillsearch, #fbillsearch, #fpettysearch, #frefundsearch, #fcbillsearch, #fbbillsearch, #fsbillsearch, #fstbillsearch, #adminbillfind, #fpcrun {
    background-color: #006c5b;
    color: white;
    text-align: center;
    width: 120px;
    cursor: pointer;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    margin-left: 30px;
}
#fpettycashlist {
    height: 500px;
    background-color: white;
}


#fpettycashsummary {
    background-color: white;
    height: 600px;
}
#fpettycashsummary {
    margin-left: 10px;
    width: 500px;
}
#fpettycashlist {
    overflow-y: scroll;
    overflow-x: hidden;
    margin-left: 30px;
    width: 800px;
}
#staffSummary, #fpctable {
    width: 1300px;
    height: 600px;
    overflow-y: scroll;
    background-color: white;
}
.fpc-item-head {
    font-weight: 600;
}
.fpc-item, .fpc-item-head {
    display: flex;
    height: 30px;
    font-size: 14px;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.fpc-vendor { 
    width: 300px;
    padding-left: 10px;
}
.appitemsmall-jobcard{ 
    background-color: lightblue !important;
}
#generategiftcardnumber {
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 200px;
    font-size: 14px;
}
.fpc-count {
    width: 150px;
    text-align: center;
}
.fpc-number {
    width: 200px;
    text-align: center;
}
.fstitem, .fstitemhead {
    display: flex;
    height: 25px;
    align-items: center;
    font-size: 13px;
    border-bottom: 1px solid lightgray;
    width: 1600px;
}
.fstitemhead > div {    
    cursor: pointer;
}
.fstitemhead > div:hover {    
    text-decoration: underline;
}
.fstitem0 { min-width: 100px; max-width: 100px; padding-left: 5px; white-space: nowrap; overflow-x: hidden;}
.fstitem1 { min-width: 120px; max-width: 120px; text-align: center;}
.fstitem2 { min-width: 150px; max-width: 150px;text-align: center; }
.fstitem3 { width: 150px;}

.addroomname{ 
    height: 30px; 
    width: 200px;
}
.addroomsubmit {
    background-color: #006187; color: white;
    font-size: 13px; text-align: center;
    height: 30px; line-height: 30px;
    width: 150px; margin-left: 20px;
    cursor: pointer;
}
#addroom {
    padding: 10px;
    background-color: #e5e5e5;
    width: 350px;
    margin: 20px;
    margin-top: 20px;
    height: 40px;
    display: flex;
    align-items: center;
}
#serviceroom { 
    width: 500px;
    display: flex;
    height: 40px; align-items: center;
    margin: 10px auto;
}
#serviceroomtitle{ 
    font-size: 13px; 
}
#serviceroomselect {
    margin-left: 10px;
    width: 300px;
    height: 30px;
    background-color: #e5e5e5;
    border: none;
}
#roomlist {
    margin-top: 20px;
    margin-left: 20px;
    height: 400px;
    width: 600px;
    overflow-y: scroll;
    background-color: white;
}
.roomitem{ 
    height: 25px; line-height: 25px;
    border-bottom: 1px solid lightgray;
    padding-left: 10px;
}

#fsholder {
    margin-top: 20px;
    display: flex;
    max-width: 500px;
}
#orgstaffreport { 
    height: 30px; line-height: 30px;
    background-color: lightblue;
    text-align: center;
    cursor: pointer;
}
#fservices, #fproducts {
    width: 700px;
    background-color: white;
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.fstitleservices, .fstitleproducts{
    text-align:center;
    display: flex;
    height:30px;
    align-items: center;
    justify-content: center;
    color: #006187;
}
.fsitemservice, .fpitemservice{
    cursor: pointer;
    background-color: white;
}
.fsitemhead > div {
    font-weight: 600;
}
.fpitemsub {

}
.fsitem, .fsitemhead, .fpitem {
    display: flex;
    height: 25px;
    align-items: center;
    font-size: 13px;
    border-bottom: 1px solid lightgray;
}
.fsitem0 { padding-left: 5px; min-width: 250px; max-width: 250px; white-space: nowrap; overflow: hidden; }
.fsitem1 { min-width: 100px; max-width: 100px; background-color: white; white-space: nowrap; overflow-x: hidden;}
.fsitem2 { min-width: 100px; max-width: 100px; text-align: center;}
.fsitem3 { min-width: 100px; max-width: 100px; text-align: center;}
.fsitem4 { min-width: 100px; max-width: 100px; white-space: nowrap }
#fproducts {
    margin-left: 50px;
}
.adminbillhead {
    font-weight: 600;
}
.adminbillcancelled {
    background-color: #e67575 !important;
}
.adminbillcancelled:hover {
    background-color: #e67575 !important;
}
.adminbillcancelled:hover > div {
            background-color: #e67575 !important;
        }
.adminbillrefund { 
    position: absolute;
    right: 2px;
    font-size: 10px;
    color: #006187;
    cursor: pointer;
}
.adminbill, .adminbillhead {
    height: 25px;
    position: relative;
    background-color: white;
    border-bottom: 1px solid lightgray;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-family: 'Montserrat';
}

    .adminbill:hover {
        background-color: #e5e5e5;
    }

        .adminbill:hover > div {
            background-color: #e5e5e5;
        }

.adminbilldate {
    padding-left: 5px;
    width: 120px;
    text-align: center
}

.adminbillcount {
    padding-left: 5px;
    width: 65px;
    text-align: center
}

.adminbillbillno {
    text-align: center;
    padding-left: 10px;
    min-width: 130px;
    max-width: 130px;
    font-size: 12px;
}

.adminbillname, .adminbillclient {
    width: 100px;
    padding-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
}

.adminbilltotal, .adminbillgst {
    text-align: center;
    width: 80px;
}

#atBills {
    font-family: 'Montserrat';
}

#atClients {
    position: relative;
}
.adminclientstuff{
    display: none;
}
#atClientsLeft {    
    width: 400px;
    padding: 10px;
    background-color: white;
    overflow-y: scroll;
    height: 600px;
    margin: 30px;
}

.atclientstitle {
    font-size: 15px; 
    text-align: center;
    color:#006187;
    margin-bottom: 10px;
}
#atClientBills, #atClientBalances {
    width: 780px;
    margin-top: 30px;
    background-color: white; 
    padding: 10px;
}
#atClientBills {
    height: 250px;
}
#atClientBalances {    
    height: 300px;
}
#atclientactivity {
    height: 200px;
    width: 100%;
    overflow-y:scroll;
    overflow-x: hidden;
}
.atcaitemhead > div { 
    font-weight: 600;
}
.ataddmem{ 
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
}
.atcaitem, .atcaitemhead{
    border-bottom: 1px solid lightgray;
    height: 25px; display: flex;
    align-items: center;
    font-size: 12px;    
}
.atcatime {
    width: 120px;
    padding-left: 10px;
    white-space: nowrap;
    overflow-x: hidden;
}
.atcaitemtype {
    width: 100px;
    white-space: nowrap;
    overflow-x: hidden;
    text-align:center;
}

#atcbalanceheads{    
    display: flex; height: 30px; 
    justify-content: flex-start; align-items: center;
}
#atctabmem {
    display: flex; justify-content: center; align-items: center;
}
.atcmemname{
    font-size: 14px; color: #006187;
}
.atcbalitem {
    height: 40px; display: flex; align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 12.5px;
}
#atctabsb, #atctabadv, #atctabcrd {
    overflow-y: scroll;
}
.atcitemchange {
    background-color: #006187; color: white;
    height: 25px; line-height: 25px; width: 80px; 
    font-size: 13px; text-align: center;
    cursor: pointer; margin-left: 10px;
}
.atcbalitemsalon{
    width: 200px;
    padding-left: 10px;
    white-space: nowrap;
    overflow-x: hidden;
}
.atcbalitemname {
    width: 300px;
    padding-left: 10px;
    white-space: nowrap;
    overflow-x: hidden;
}
.atcbalitemname1 {
    width: 120px;
    padding-left: 10px;
    white-space: nowrap;
    overflow-x: hidden;
}
.atcbalitemcount{
    width: 20px;    
    white-space: nowrap;
    overflow-x: hidden;
}
.atcbalitembalance {
    width: 100px;
    text-align: center;
}
.atcbalitemexp{
    width: 120px;
    height: 25px; line-height: 25px;
    text-align: center;
}
#atcmembershiplist{ 
    height: 30px; 
    width: 250px;
}
.atcmemexp, #atcnewmemdate {
    width: 200px;
    height: 30px; line-height: 30px;
    text-align: center;
    margin: 0 20px 0 20px;
}
#atcaddAdvButton { 
    margin: 0 auto;
}
.atcmemchange, #atcaddMembership, #atcaddCardButton, #atcaddAdvButton {
    background-color: #006187;
    width: 150px; color: white;
    text-align: center; height: 30px; line-height: 30px; 
    cursor: pointer;
    font-size: 14px;
}
.fmonthly-line, .fmonthly-headline{ 
    display: flex; align-items: center;
    height: 30px; 
    border-bottom: 1px solid lightgray;
}
.fmonthly-headline {
    height: 40px;
}
.transferbox { 
    position: absolute;
    text-align: center;
    top: 150px; 
    padding: 20px;
    left: 200px;
    background-color: white;
    width: 600px;
    height: 250px;
    border: 1px solid lightgray;
    border-radius: 10px;
}
.transferboxclose{ 
    position: absolute;
    top: 10px; right: 10px;
    cursor: pointer;
    border-radius: 50%;
    height: 30px; line-height: 30px;
    width: 30px; text-align: center;
    background-color: #2d3131;
    color: white;
}
.transferboxtitle{ 
    height: 30px; line-height: 30px;
    font-size: 18px; text-align: center;
    color: #006187;
}
.transferboxtext {
    height: 30px; line-height: 30px;
    text-align: center;
    font-size: 13px;
}
.transferboxselect{     
    width: 400px;
    height: 30px;
    margin: 10px auto; 
    font-family: Montserrat;
    background-color: lightblue;
}
.transferboxtext {
    height: 30px; line-height: 30px;
    text-align: center;
    font-size: 13px;
}
.transferamount{ 
    margin: 10px auto; 
    font-family: Montserrat;
    height: 30px; 
    text-align: center;
    border: none; outline: none; 
    background-color: #e5e5e5;
}
.transferboxbutton { 
    background-color: #006187; color: white;
    width: 150px; text-align: center;
    height: 30px; line-height: 30px;
    margin: 10px auto;
    cursor: pointer;
}
.fmonthly-name { 
    width: 100px;
    font-size: 12px;
    font-weight: 600;
}
.fmonthly-name-blue { 
    color: #006187; font-weight: 600;
}
.fmonthly-value {
    width: 100px;
    font-size: 13px;
}
.fmonthly-month{ 
    width: 100px;
    font-size: 13px;
    font-weight: 600;
}
#ataddcrdshow {
    cursor: pointer;
    font-size: 14px;
    background-color: #006187; color: white;
    width: 150px; text-align: center;
    height: 30px; line-height: 30px;
    margin: 30px auto;
}
.ataddcrd, .ataddadv { 
    padding: 10px;
    background-color: lightblue;
    display: none;
    width: 500px;
    margin: 20px auto;
    text-align: center;
}
.ataddadv{ 
    display: block;
}
#atcaddCardButton{ 
    margin-left: auto;
    margin: auto;
}
.atcaddcrdselect, #atccrdsalon, #atcadvsalon {
    width: 200px;
    height: 30px;
    margin-bottom: 10px;
}
#atcnewcrddate, #atcnewcrdamount, #atcnewadvamount { 
    width: 150px; height: 30px;
    text-align: center;
    margin-bottom: 10px;
}
.atbalancehead {
    cursor: pointer;
    background-color: white;
    height: 30px; line-height: 30px;
    padding: 0 20px 0 20px; 
    font-size: 14px;
}
.atctab{
    background-color: #e5e5e5;
    height: 200px;
}
.atcaitemsalon{
    width: 80px;
    white-space: nowrap;
    overflow-x: hidden;
}
.atcaitembillno{
    width: 100px;
    text-align:center;
    white-space: nowrap;
    overflow-x: hidden;
}
.atcaitemname{
    white-space: nowrap;
    overflow-x: hidden;
    min-width: 180px;
    max-width: 180px;
}
.atcaitemstaff1{
    width: 80px;
    white-space: nowrap;
    overflow-x: hidden;
}
.atcaitemstaff2{
    width: 70px;
    text-align: center;
    white-space: nowrap;
    overflow-x: hidden;
}

#atUsers {
    display: flex;
    font-family: 'Montserrat';
    position: relative;
}

#addnewuser {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: #006187;
    font-size: 18px;
}

#atusernewroletitle {
    font-size: 13px;
    margin-right: 10px;
}

#atusernewrole {
    height: 30px;
    line-height: 30px;
    border: none;
    outline: none;
    font-family: 'Montserrat';
    font-size: 14px;
    width: 210px;
}
.atuserfilters-line{ 
    display: flex;
    height: 30px; 
    margin-bottom: 10px;
}
.atusernewinput {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
    width: 300px;
    font-family: 'Montserrat';
    font-size: 14px;
    padding-left: 10px;
}
#atuserfilter, #atrolefilter { display:none;}
.atuserfiltertitle {    
    font-size: 12px; 
    height: 30px; line-height: 30px;
    margin-right: 10px;
    margin-left: 5px;
}
#atuserfiltercheck, #atuserfiltercheck_inactive, #atrolefiltercheck {
    height: 25px; width: 25px;
}
#atuserfilters {    
    margin: 20px; margin-top: 20px;
}
#atuserlist {
    margin-left: 20px;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 550px;
    width: 700px;
}

.atuseritem, .atuseritemhead {
    display: flex;
    height: 25px;
    align-items: center;
    font-size: 13px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.inactiveuser {
    background-color: #e67575;
}    
#atinactiveuser, #atactivateuser {
    margin-top: 10px;
    height: 30px; line-height: 30px; 
    width: 150px; font-size: 14px; font-weight: 600;
    text-align: center;
    background-color: #e67575;
    cursor: pointer;
    display: none;
}
#atinactiveuser { background-color: #e67575; }
#atactivateuser { background-color: #64c466; }

.atuseritemhead {
    cursor: none;
    margin: 20px 0 0 20px;
    font-weight: 600;
    border-bottom: none;
}

    .atuseritemhead > div {
        background-color: transparent !important;
    }

.atuseritemvalue, .atuseritemvalue1 {
    padding-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
}

.atuseritemvalue {
    min-width: 150px;
    max-width: 150px;
}

.atuseritemvalue1 {
    min-width: 200px;
    max-width: 200px;
}
#notchrome {
    position: absolute;
    left: 50px;    
    top: -10px;
    opacity: 0.7;
    width: 400px;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #006187;
    background-color: white;
}
#aturename {
    height: 40px;
    line-height: 40px;
    color: #006187;
    font-size: 20px;
}

#aturerole {
    height: 40px;
    line-height: 40px;
    font: 17px;
}

#atureemail, #aturephone {
    border: none;
    outline: none;
    height: 30px;
    font-family: 'Montserrat';
    width: 220px;
    text-align: center;
    font-size: 13px;
    margin-right: 20px;
    margin-top: 10px;
}

#atuserrightedit, #atuserrightnew {
    margin-top: 50px;
    display: none;
}

#atuserrightnewtitle {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #006187;
}

#aturesalonlisttitle {
    color: #006187;
    margin: 20px 0 20px 0;
}

#atuserrightnewsubmit {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    background-color: #006187;
    color: white;
    text-align: center;
}

#validatephonehelp, #validateemailhelp {
    font-size: 11px;
    margin-left: 10px;
    color: #006187;
}

#aturesalonlist {
    height: 300px;
    width: 300px;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;
}

.aasl {
    position: absolute;
    height: 350px;
    width: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: white;
    border: 1px solid lightgray;
}

.aaslitem {
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    border-bottom: 1px solid lightgray;
    padding-left: 10px;
    cursor: pointer;
}

    .aaslitem:hover {
        background-color: #e5e5e5;
    }

.aturesalonlistitem {
    display: flex;
    height: 35px;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 15px;
}

.aturesalonlistadd {
    height: 50px;
    line-height: 50px;
    align-items: center;
    text-align: center;
    font-size: 17px;
    color: #006187;
    cursor: pointer;
}

.aturesalonlistitemdelete {
    margin-right: 10px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.aturesalonlistitemname {
    padding-left: 10px;
    width: 270px;
}

.dateinput, #fdateend {
    border: none;
    outline: none;
    font-family: 'Montserrat';
    font-size: 12px;
    text-align: center;
    margin-left: 10px;
    height: 25px;
    width: 150px;
    line-height: 25px;
}
.atbsearchinvoice-pre { 
    margin-left: 10px;
    font-size: 14px;
    color: #006187;
    font-weight: 600;
    text-align: right;
}
#atbsearchinvoice{
    font-size: 12px;
    text-align: center;
    margin-left: 2px;
    height: 25px;
    width: 150px;
    line-height: 25px;
}
.adminbilldatetitle {
    margin-left: 20px;
    font-size: 13px;
}

#adminbillsnoresults, #adminbillsloading {
    margin-top: 30px;
    margin-left: 30px;
    height: 300px;
    width: 400px;
    position: absolute;
    font-size: 18px;
    display: none;
}

#adminbillsloading {
    color: #006187;
}

#abbottomleftcover {
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: white;
    opacity: 0.6;
    z-index: 2;
}

.billdetail {
    background-color: white;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid lightgray;
}

.billdetailtop, .billdetailtophead {
    height: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#academy {
    position: relative;
}

#iscaltrainingholder {
    width: 100%;
    border-bottom: 1px solid lightgray;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iscaltrainingtitle {
    margin-left: 20px;
    font-size: 15px;
}

#iscaltraining {
    margin-left: 10px;
    height: 15px;
    width: 15px;
    cursor: pointer;
}

.booktrain {
    min-height: 300px;
    width: 500px;
    background-color: #e5e5e5;
    z-index: 999;
    top: 15%;
    left: 30%;
    padding-bottom: 25px;
    position: absolute;
    border: 1px solid lightgray;
}

.booktrainclose {
    position: absolute;
    bottom: 0px;
    max-height: 25px;
    line-height: 25px;
    width: 100%;
    cursor: pointer;
    text-align: center;
    background-color: #006187;
    color: white;
}

    .booktrainclose:hover {
        background-color: gray;
    }

.booktraintitle {
    width: 100%;
    border-bottom: 1px solid lightgray;
    text-align: center;
    font-size: 20px;
    height: 40px;
    line-height: 40px;
}

.booktraintimes {
    width: 100%;
    border-bottom: 1px solid lightgray;
    text-align: center;
    font-size: 14px;
    color: #006187;
    height: 30px;
    line-height: 30px;
}

.booktraincount {
    height: 40px;
    line-height: 40px;
    width: 100%;
    text-align: center;
}

.booktrainheads {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.bi1tab1head {
    border-bottom: 1px solid lightgray;
    display: flex;
    height: 30px;
    line-height: 30px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.bi1tab1headtitle {
    margin-left: 20px;
    font-size: 14px;
}

.bi1tab1headselect {
    font-family: 'Montserrat';
    font-size: 14px;
    margin-left: 10px;
    outline: none;
}

.booktrainstaff {
    overflow-y: scroll;
    max-height: 435px;
    width: 100%;
}

.booktrainstaffcover {
    z-index: 999;
    top: 40px;
    background-color: white;
    position: absolute;
    opacity: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 435px;
    width: 100%;
}

.booktrainuseritem {
    display: flex;
    height: 30px;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 14px;
}

.booktrainuseritemname {
    width: 250px;
    text-align: center;
}

.booktrainuseritemsalon {
    width: 250px;
    text-align: center;
}

.b1tab1headerror {
    font-size: 13px;
    margin-left: 10px;
}

.booktrainstaffitem {
    display: flex;
    height: 30px;
    align-items: center;
    border-bottom: 1px solid lightgray;
}

.booktrainstaffitemname {
    width: 300px;
    padding-right: 20px;
    text-align: right;
    font-size: 14px;
}

.booktrainstaffitemcheckbox {
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.booktraintab {
    position: relative;
    overflow-y: auto;
    background-color: white;
}

.booktrainhead {
    height: 30px;
    line-height: 30px;
    width: 50%;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
}

.booktraindesc {
    width: 100%;
    min-height: 50px;
    max-height: 100px;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid lightgray;
}

.booktraindelete {
    height: 22px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.booktrainpdf {
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 40px;
}

#trainingMaxUsers {
    background-color: #e5e5e5;
    border: none;
    outline: none;
    height: 20px;
    font-size: 14px;
    font-family: 'Montserrat';
    width: 100px;
    margin-left: 10px;
    text-align: center;
}

#newcal {
    z-index: 2;
    display: none;
    position: absolute;
    top: 100px;
    left: 200px;
    width: 400px;
    border: 1px solid lightgray;
    background-color: white;
}

#editor1 {
    height: 200px;
    width: 400px;
    background-color: white;
    font-family: 'Montserrat';
}

#newcalsubject {
    width: 379px;
    font-family: 'Montserrat';
}

#newcalbuttons {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}

#newcalaudience {
    width: 130px;
    height: 30px;
    line-height: 30px;
    background-color: #d79f2b;
    font-family: 'Montserrat';
    font-size: 14px;
    margin-left: 10px;
    text-align: center;
    cursor: pointer;
}

#newcalcancel, #newcalsave {
    width: 70px;
    height: 30px;
    line-height: 30px;
    color: white;
    font-family: 'Montserrat';
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

#newcalcancel {
    background-color: #2d3131;
    margin-left: 100px;
}

#newcalsave {
    background-color: #006c5b;
    margin-left: 10px;
}

#newcaldates {
    border-top: 1px solid lightgray;
    display: flex;
    height: 50px;
    justify-content: flex-start;
    align-items: center;
}

.newcaldate {
    width: 120px;
}

.newcaltime {
    width: 50px;
    font-size: 14px;
    font-family: 'Montserrat';
}

select.ui-timepicker-select {
    background-image: none !important;
    background-color: blue;
}

    select.ui-timepicker-select option {
        color: red;
        background-color: yellow;
    }

.newcaldate, .newcaltime {
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-family: 'Montserrat';
    font-size: 10px;
    margin-left: 10px;
    background-color: #e5e5e5;
    border: none;
    outline: none;
}

#academytop {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid lightgray;
    width: 100%;
}

.commacweek, .commacweektitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.commacweektitle {
    margin-bottom: 10px;
}

.commcalevent {
    border-radius: 50%;
    background-color: #e5e5e5;
    color: black !important;
}

.commacweekday {
    height: 50px;
    line-height: 50px;
    width: 50px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    color: black;
    font-size: 14px;
    margin-top: 5px;
}

.commacweekdaytitle {
    font-size: 15px;
    font-weight: 600;
    color: #2d3131;
    width: 60px;
    margin-top: 20px;
    text-align: center;
}

.commacweekdaytoday {
    background-color: #006187 !important;
    color: white !important;
}

.commacweekdaygone {
    color: lightgray !important;
}

.acweekdaypast {
    opacity: 0.6
}

.acweek {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 180px;
}

.acweekday {
    text-align: center;
    font-family: 'Montserrat';
    width: 225px;
    height: 180px;
    overflow-y: auto;
}

.acweekday {
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

.acweekdaytop {
    position: relative;
    height: 30px;
    line-height: 30px;
    width: 100%;
    color: #006187;
}

.acweekdaytop1 {
    position: absolute;
    left: 5px;
    font-size: 15px;
}

.acweekdaytop2 {
    position: absolute;
    right: 5px;
    font-size: 25px;
}

.acweekdaytoday {
    background-color: #e5e5e5 !important;
}

.acweekdaymonthname {
    position: absolute;
    left: 100px;
    font-size: 20px;
    color: black;
}

.calItem {
    width: 150px;
    min-height: 20px;
    line-height: 20px;
    font-size: 12px;
    padding-left: 5px;
    margin-top: 5px;
    background-color: #0c87ad;
    color: white;
    text-align: left;
    cursor: pointer;
    margin-left: 5px;
}

.calItemTraining, .commcalltraining {
    background-color: #32455a !important;
    color: white;
}

.calItem:hover {
    background-color: gray;
}

.slaud {
    z-index: 3;
    background-color: white;
    width: 500px;
    position: absolute;
    border: 1px solid lightgray;
}

.slaudtop {
    height: 30px;
    border-bottom: 1px solid lightgray;
}

.slaudbottom {
    height: 360px;
    display: flex;
}

.slaudleft {
    height: 100%;
    width: 300px;
    overflow-y: scroll;
}

.slaudright {
    border-right: 1px solid lightgray;
    height: 100%;
    width: 200px;
}

#newcommaudtext, #newcalaudtext {
    padding: 5px 0px 5px 5px;
    width: 100%;
    font-size: 14px;
}

.slaudsubmit {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #006187;
    color: white;
    cursor: pointer;
}

    .slaudsubmit:hover {
        background-color: gray;
    }

.slaudsalon, .slauduser {
    height: 30px;
    border-bottom: 1px solid lightgray;
    display: flex;
    align-items: center;
    width: 100%;
}

.slaudtitle {
    padding: 5px;
    font-size: 13px;
    color: #006187;
}

.slaudname {
    font-size: 14px;
}

.slaudsalonall {
    display: flex;
    align-items: center;
    height: 30px;
    background-color: #e5e5e5;
    border-bottom: 1px solid lightgray;
}

.slaudcbox, .slauducbox, .slaudcboxall {
    height: 20px;
    width: 20px;
    cursor: pointer;
}


.fsalonselecttitle {
    margin-bottom: 10px;
    font-size: 15px;
    background-color: #006187;
    color: white;
    width: 150px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
}
#fsalonchooser {
    margin-bottom: 10px;
    font-size: 15px;        
    width: 150px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
}

#balancelist {
    background-color: white;
    width: 1200px;
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.fbtop {
    display: flex;
    height: 40px; line-height: 40px;
}
.fbtopcb {
    height: 20px; width: 20px; cursor: pointer;
    margin-left: 20px;
}
.fbtoptext {
    font-size: 13px;
    margin-left: 10px;
    color: #006187;
}
.bitemhead > div {
    font-weight: 600;
}
.bitem, .bitemhead, .bitemservice, .bitemtotal {
    display: flex;
    height: 30px;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
}
.bitemservice {
    cursor: pointer;
    background-color: lightgray;
}
.bitemservice:hover {
    background-color: gray;
}
.bitemtotal{
    font-size: 15px !important;
    background-color: #006187;
    color: white;
}
.bitemname {
    padding-left: 10px;
    min-width:200px;
    max-width: 200px;
    white-space: nowrap; overflow-x: hidden;
}
.bitemnamecc{
    color: #006187; font-weight: 600;
}
.bitemname1 {
    padding-left: 10px;
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap; overflow-x: hidden;
}
.bitemname2 {
    padding-left: 10px;
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap; overflow-x: hidden;
}
.bitemprice {
    text-align: center;
    min-width: 100px;
    max-width: 100px;
}
.bitemvalue {
    text-align: center;
    min-width: 80px;
    max-width: 80px;
}

#dbSalonFilterTitle {
    font-size: 15px;
    height: 100%;
    text-align: center;
    cursor: pointer;
}

    #dbSalonFilterTitle:hover {
        background-color: gray;
    }

.dbdatefilter {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    background-color: #e5e5e5;
    color: black;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
}

    .dbdatefilter:hover {
        background-color: gray;
    }

#noofsalons {
    color: #e1ee39;
}

.dbclientsalonlistitem {
    display: flex;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid lightgray;
}

.dbclientsalonlistitemname {
    text-align: left;
    white-space: nowrap;
    min-width: 200px;
    max-width: 200px;
    padding-left: 10px;
}

.dbclientsalonlistitemvalue {
    width: 100px;
    text-align: center;
    word-wrap: normal;
}

#dbtabclientsleft {
    text-align: center;
    height: 800px;
    width: 600px;
    border-right: 1px solid lightgray;
}

#dbtabclientsright {
}

#dbclientchart1 {
    border-bottom: 1px solid lightgray;
    height: 250px;
    width: 800px;
}

#dbclientbillinghours {
    border-top: 1px solid lightgray;
    height: 250px;
    width: 800px;
}

#dbclientavgspend {
    background-color: #e5e5e5;
    height: 200px;
    width: 400px;
}

#dbclientavgtime {
    border-left: 1px solid lightgray;
    height: 200px;
    width: 400px;
}

#dbservicechart {
    height: 300px;
    width: 400px;
}
#ndhclchart {
    margin-left: 20px;
    padding-left: 20px;
    height: 300px;
    width: 500px;
    border-left: 1px solid lightgray;
} 
#ndbalances{
    border-left: 1px solid lightgray;
    padding-left: 30px;
    margin-left: 30px;
    width: 280px;
    height: 300px;       
}
#ndbalancestitle {
    text-align: center;
    margin-bottom: 20px;    
}
.ndhbalanceitem {
    margin-bottom: 20px;
    border-bottom: 1px solid lightgray;    
    display: flex; height: 40px; align-items: center;
}
.ndhbalanceitem:last-of-type { border-bottom: none !important;}

.ndhbalancename {
    width: 220px;
    font-size: 15px;
}
.ndhbalancevalues{
    width: 100px;
    font-size: 15px;
    color: #006187;
    text-align: center;
}

#fsalonlist {
    display: none;
    position: absolute;
    max-height: 500px;
    overflow-y: scroll;
    border: 1px solid lightgray;
    width: 300px;
    background-color: white;
    z-index: 4;
    margin-left: 20px;
    top: 40px;
    left: 10px;
}

#fsalonlist {
    top: 160px !important;
    left: 100px !important;
}

.salonlisthead {
    background-color: #2d3131;
    color: white;
    border-bottom: 1px solid lightgray;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
}

.salonitem {
    padding-left: 5px;
    height: 30px;
    line-height: 30px;
    display: flex;
    border-left: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    color: black;
}

.salonitemname {
    font-size: 15px;
    margin-left: 5px;
}

#allsaloncheck, #fallsaloncheck {
    margin: 7px;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

.salonitemcb, .fsalonitemcb {
    margin-left: 10px;
    margin-top: 8px;
    height: 15px;
    width: 15px;
    cursor: pointer;
}

.bigger {
    font-size: 20px;
    font-family: 'Montserrat';
}

.dbrevstat2 {
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}


#staffLandingSalonlisttitle {
    font-family: 'Montserrat';
    font-size: 15px;
    margin-left: 20px;
}

#staffLandingSalonlist {
    font-family: 'Montserrat';
    font-size: 15px;
    width: 150px;
    outline: none;
    margin-left: 20px;
}

#staffLanding {
    font-family: 'Montserrat';
    padding-top: 20px;
}

#chStaffSkills {
    width: 400px;
    height: 300px;
}

#staffservicelogtitle {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
}

#staffservicelog {
    height: 200px;
    width: 350px;
    background-color: #e5e5e5;
    overflow-y: scroll;
}

.sslitem {
    height: 30px;
    align-items: center;
    display: flex;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
}

.sslitemdate {
    width: 120px;
    padding-left: 5px;
}

.sslitemname {
    width: 250px;
    padding-left: 5px;    
}

#staffSkillListTitle {
    background-color: #006187;
    width: 100%;
    color: white;
    font-size: 15px;
    text-align: center;
    height: 25px;
    line-height: 25px;
}

#staffSkillList {
    border: 1px solid lightgray;
    overflow-y: scroll;
    width: 300px;
    height: 300px;
}

#staffLandingContent {
    position: relative;
    margin-top: 20px;
    width: 1200px;
}
#staffLandingContent2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

#stafffullservicelog {
    margin-left: 30px;
}

#stafffullservicelogtitle {
    width: 100%;
    font-size: 16px;
    color: #006187;
    text-align: center;
    margin-bottom: 10px;
}

#stafffullserviceloglist {
    width: 600px;
    border: 1px solid lightgray;
    height: 280px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.stafffullservicelogitem, .stafffullservicelogitemhead {
    height: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 12px;
}

.stafffullservicelogitemhead {
    border-bottom: none !important;
}

.stafffullservicelogitemdate {
    padding-left: 5px;
    min-width: 100px;
    max-width: 100px;
}

.stafffullservicelogitemname {
    background-color: white;
    min-width: 130px;
    max-width: 130px;
    white-space: nowrap;
}

.stafffullservicelogitemservicename {
    background-color: white;
    min-width: 250px;
    max-width: 250px;
    white-space: nowrap;
}

.staffTopItem, .staffTopItemhead {
    display: flex;
    align-items: center;
    height: 30px;
    cursor: pointer;
    line-height: 30px;
    font-size: 13px;
    border-bottom: 1px solid lightgray;
}
.staffTopItemhead {
    font-weight: 600;
}
.staffTopItem1 {
    display: flex;
    align-items: center;
    height: 30px;
    cursor: pointer;
    line-height: 30px;
    font-size: 13px;
    border-bottom: 1px solid lightgray;
}

    .staffTopItem:hover {
        background-color: #006187;
        color: white !important;
    }
    .staffTopItem1:nth-of-type(2n+1) {
        background-color: #e5e5e5;
    }

    .staffTopItem1:hover {
        background-color: #006187;
        color: white !important;
    }
.staffTopItemName {
    padding-right: 5px;
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap;
    text-align: right;
    font-size: 12px;
}
.staffTopItemName1 {
    padding-left: 10px;
    width: 200px;
    text-align: left;
}
.staffTopItemNumber {
    text-align: center;
    padding-left: 5px;
    width: 60px;
}
.staffTopItemEarning {
    width: 200px;
    padding-left: 5px;
    text-align: left;
}
.staffTopItemEarning1{
    width: 100px;
    padding-left: 5px;
    text-align: center;
}
.staffTopItemCat {
    width: 70px;
}
#stafftopytd, #stafftopmtd {
    margin-left: 20px;
}

.dbskillstaff:hover {
    background-color: #e5e5e5;
}

.dbskillstaff {
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    padding-left: 10px;
    border-bottom: 1px solid lightgray;
}

#dbtabrevenues {
    position: relative;
    display: flex;
}

#staffrevenuerefresh {
    height: 25px;
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 50px;
}

#stafflistfresh {
    height: 25px;
    cursor: pointer;
    margin-left: 20px;
}

.dbrevlisthelp {
    color: #006187;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: left;
}

.dbrevitemhead > div {
    cursor: pointer;
    background-color: #006187;
    color: white;
    height: 25px;
    line-height: 25px;
}

    .dbrevitemhead > div:hover {
        text-decoration: underline;
    }

.dbrevitemhead {
    font-size: 13px;
    display: flex;
    align-items: flex-end;
}

.dbrevitem {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid lightgray;
    display: flex;
}

    .dbrevitem:hover {
        background-color: #e5e5e5;
    }

.dbrevitemname {
    min-width: 250px;
    max-width: 250px;
    padding-left: 10px;
    font-size: 14px;
}

.dbrevitemrev {
    min-width: 113px;
    max-width: 113px;
    font-size: 14px;
}


.lineloading {
    position: absolute;
    top: 50%;
    left: 50%;
}

.loading-bar {
    display: inline-block;
    width: 4px;
    height: 18px;
    border-radius: 4px;
    animation: loading 1s ease-in-out infinite;
}

    .loading-bar:nth-child(1) {
        background-color: #006187;
        animation-delay: 0;
    }

    .loading-bar:nth-child(2) {
        background-color: #205e84;
        animation-delay: 0.09s;
    }

    .loading-bar:nth-child(3) {
        background-color: #6f99e1;
        animation-delay: .18s;
    }

    .loading-bar:nth-child(4) {
        background-color: #6aafc4;
        animation-delay: .27s;
    }

@keyframes loading {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1, 2.2);
    }

    40% {
        transform: scale(1);
    }
}
#fcdatestart, #fcdateend {
    background-color: #e5e5e5;
}
.clmembership-expired {
    font-size: 13px;
    color: red;
    height: 30px; 
    text-align: center;
    line-height: 30px;

}
#dbrevenueloader {
    height: 100%;
    width: 900px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: #006187;
    background-color: white;
    z-index: 2;
}
.screenshot {
    cursor: pointer;
    height: 30px;
    margin-left: 20px;
}
#mtabheads, #ftabheads {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}

.fsubtabtop {
    display: flex;
    height: 50px;
    align-items: center;
}

#frevenuelist {
    background-color: white;
    height: 600px;
    width: 1380px;
    overflow-y: scroll;
}
#subdays {
    padding-left: 10px; padding-right: 10px;
    color: white !important; 
    margin-right: 20px;
    border-right: 1px solid white;
    border-left: 1px solid white;
    height: 60%;
    display: flex; align-items: center; justify-content: center;
}
#subdaystext {
    text-align: center;
    font-size: 13px;
}
#subdaysvalue { 
    color: #e67575;
}
#staffwiserevenuereport, #detailedstaffreport, #allprocurementreport {
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
    height: 20px;
    line-height: 20px;
}
#fsubtab-bytype {
    padding-top: 20px;
}
#staffwiserevenuereport:hover, #detailedstaffreport:hover, #allprocurementreport:hover {
    text-decoration: underline; color: #006187
}
#detailedrevenuereport {
    margin-left: 20px;
}
.detailedrevenuereport-link {
    margin-top: 25px;
    margin-left: 25px;
    cursor: pointer;
    background-color: #006187;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    height: 35px;
    line-height: 35px;
    width: 200px;
    text-align: center;
}
#billwiserevenuereport, #detailedrevenuereport {
    cursor: pointer;
    background-color: #006187;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
}
#billwiserevenuereport:hover, #detailedrevenuereport:hover {
    background-color: gray;
}
.excelicon {
    height: 25px;
    width: 25px;
    cursor: pointer;
    margin-left: 30px;
}
.fbicolumnsbutton{
    cursor: pointer;
    height: 30px;line-height: 30px;
    width: 150px;
    margin-left: 20px;
    font-size: 14px; text-align: center;
    background-color: #006187; color: white;
}
.fbicolumns {
    position: absolute;
    background-color: white;
    border: 1px solid lightgray;
    min-height: 500px;
    width: 200px;
}
.fbicolumnsitem{
    cursor: pointer;
    padding-left: 20px;
    height: 25px; line-height: 25px;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
}
.fbicolumnsitem:hover {
    background-color: #e5e5e5;
}
.fbicolumnsitem:last-of-type {
    border-bottom: none;
}
.fbillitem {    
    display: flex;
    height: 25px;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 12px;
}
.fbillitemhead, .fbillitem {
    width: 2400px; 
}
.fbillitemhead {    
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
    font-weight: 600;
}

    .fbillitemhead > div {
        cursor: pointer;
        word-wrap: normal;
    }

        .fbillitemhead > div:hover {
            text-decoration: underline;
        }

.fbillitemname1 {
    padding-left: 3px;
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap;
    background-color: white;
}
.fbillitemname1, .fbillitemname2, .fbillitemname3 {
    border-right: 1px solid lightgray;
}
.fbillheadname {
    border-right: 1px solid lightgray;
    word-break: break-word;
}
.fbillitemname2 {
    min-width: 120px;
    max-width: 120px;
    background-color: white;
    text-align: center;
}

.fbillitemname3 {
    min-width: 75px;
    max-width: 75px;
    background-color: white;
    text-align: center;    
}

#fsubtabheads {
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
}

#fsothers {
    margin-top: 10px;
    height: 155px; 
    width: 500px;
    background-color: white;
}
.fsoitem{
    font-size: 14px;
    display: flex; align-items: center;
    height: 30px; 
    border-bottom: 1px solid lightgray;
}
.fsoitemname{
    padding-left: 10px;
    width: 200px;
}
.fsoitemcount, .fsoitemcount1 {
    width: 100px;
    text-align: center;
}
.fsoitemvalue, .fsoitemvalue1 {
    width: 200px;
    text-align: center;
}

.fsubtab {
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 10px;
    background-color: #e5e5e5;
    min-height: 700px;    
    width: 1500px;
}

.fsubtabhead {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    height: 100%;
    text-align: center;
    font-size: 15px;
}

#mtab-Usage { 
    display: flex;
}
#mtab-promos {
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 800px;
    min-width: 900px;
    border-right: 1px solid lightgray;
}
.mem-action { 
    height: 20px;
    cursor: pointer;
}
#mtab-SMS { 
    position: relative;
}
.mt-close { 
    right: 10px; 
    background-color: #2d3131;
    color: white;
    border-radius: 50%;
    position: absolute;
    height: 25px; width: 25px; 
    line-height: 25px; 
    text-align: center;
    cursor: pointer;
}
#managetemplates { 
    display: flex;
    position: absolute;
    top: 70px; 
    left: 100px;
    background-color: white;
    height: 400px;
    z-index: 101;
    width: 1000px;
    border: 2px solid lightgray;
    border-radius: 10px;
}
.mt-line { 
    display: flex;
    min-height: 40px; 
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}
.mt-line-first { 
    margin-top: 30px;
}
#mt-newselect { 
    background-color: lightblue;
    height: 30px;
    width: 180px;
    margin-left: 20px;
}
.mt-name {     
    max-width: 200px;
}
.mt-input{ 
    margin-left: 20px;
    width: 200px;
    background-color: #e5e5e5;
    height: 30px; line-height: 30px;
}

.mt-templateText{ 
    margin-left: 20px;
    height: 70px;
    width: 200px;
    font-size: 13px;
    background-color: #e5e5e5;
    resize: none;
}

.mt-status{ 
    font-size: 12px; height: 20px; line-height: 20px; 
    color: #006187;
}

#mt-list { 
    width: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.mt-item{ 
    height: 25px; 
    display: flex; 
    align-items: center;
}
.mt-id{ 
    font-size: 14px;
    padding-left: 10px;
    height: 25px; line-height: 25px;
    background-color: #2d3131; color: white;
}
.mt-text{ 
    border-bottom: 1px solid lightgray;
    font-size: 13px;
    padding-top: 5px; padding-bottom: 5px;
}
.mt-name { 
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
    font-size: 13px;
}
.mt-itemname{ 
    font-size: 13px;
    width: 150px; 
    text-align: right;
}
.mt-title { 
    color: #006187;
    text-align: center;
}
.mt-select { 
    width: 180px;
}
.mt-add { 
    cursor: pointer;
    background-color: #006187;
    color: white;
    font-size: 14px; 
    text-align: center;
    width: 150px; 
    height: 30px; line-height: 30px; 
    border-radius: 10px;
    margin: 0px auto;
}
.mt-delete{ 
    margin-left: 10px; 
    height: 25px; 
    cursor: pointer;
}
.mt-text { 
    background-color: #e5e5e5;
    width: 600px;
    padding-top: 5px; 
    margin-bottom: 10px;
}
#mt-new { 
    border-left: 1px solid lightgray;
    height: 400px;
    width: 400px;
}
.mtab-promo, .mtab-promo-head {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid lightgray;
}
.mtab-promo:hover { 
    background-color: #e5e5e5;
}

.mtab-promo-head > div { 
    font-size: 13px !important;
    font-weight: 600;
    color: black;
}

.mtab-promo-name {
    white-space: nowrap;
    overflow-x: hidden;
    min-width: 300px;
    max-width: 300px;
    padding-left: 5px;
    font-size: 13px;
}
.mtab-promo-start {
    min-width: 80px;
    max-width: 80px;
    font-size: 12px;
    left: 10px;
    top: 35px;
}
.mtab-promo-value {
    min-width: 100px;
    max-width: 100px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
}
.mtab-promo-head .mtab-promo-value {
    cursor: pointer;
}
.mtab-promo-head .mtab-promo-value:hover {
    text-decoration: underline;
}
.mtab-promo-end {
    min-width: 80px;
    max-width: 80px;
    font-size: 12px;
    left: 10px;
    top: 50px;
}
#mtab-promos-top { 
    display: flex;
    font-size: 14px;
    align-items: center; justify-content: center;
    height: 40px;
    border-bottom: 1px solid lightgray;
    background-color: #e5e5e5;
}
#mtab-promo-view { 
    width: 800px;
    border-right: 1px solid lightgray;
}
.mtpv-title {
    font-size: 17px;
    background-color: lightgray;
    text-align: left;
    padding-left: 10px;
    height: 40px; line-height: 40px; 
    border-bottom: 1px solid lightgray;
}
.mtab-promos-run{ 
    width: 60px; text-align: center;
    height: 25px; line-height: 25px;
    margin-left: 10px; cursor: pointer;
    background-color: #006187; color: white;
}
.mtab-promos-active-choice {
    height: 20px;
    width: 20px;
    margin-left: 10px;
    margin-right: 50px;
    cursor: pointer;
}
.mtab-promos-startdate, .mtab-promos-enddate { 
    margin-left: 10px;
    margin-right: 10px;
}
.mtab-promo-active, .mtab-promo-inactive {
    font-size: 12px;
    font-weight: 600;
    min-width: 50px;
    max-width: 50px;
}

#mtpv-table  {
    height: 800px;
    overflow-y: scroll;
}
#iframe-trezknow {
    height: 1100px;
    width: 100%;
}
.mtpv-item, .mtpv-item-head {
    display: flex;
    height: 30px;
    font-size: 13px;
    border-bottom: 1px solid lightgray;
    align-items: center;
}
.mtpv-item-salon { 
    width: 250px;
    padding-left: 5px; 
    white-space: nowrap;
    overflow-x: hidden;
}
.mtpv-item-count { 
    width: 100px;
}
.mtpv-item-revenue {
    width: 150px;
}
.mtpv-item-head div {
    font-weight: 600;
}

.mtab-promo-inactive {
    color: red;
}
.mtab-promo-active {color: green;}
.mtab-promo-salon {
    min-width: 150px;
    max-width: 150px;
    font-size: 11px;
    color: #006187;
    white-space: nowrap; overflow-x: hidden;
    text-align: center;
}
.mtabhead, .ftabhead {
    cursor: pointer;
    width: 200px;
    text-align: center;
    font-size: 17px;
}

.ftabhead {
    padding-left: 20px;
    padding-right: 20px;
}

.mtabhead:hover {
    background-color: #e5e5e5 !important;
}

#mtab-Campaigns {
    display: flex;
}

.ftitle {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 17px; font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center;
}

.ftab {
    width: 1400px;
    height: 800px;
    padding-top: 20px;
    padding-left: 20px;
}

#dailyclosing {
    height: 700px;
}

.closingitem {
    display: flex;
    height: 30px;
    align-items: center;
}
.closingbox {
    width: 400px;
    margin: 20px auto;
    padding: 10px;
    background-color: white;
}

.closingitemname{
    width: 200px;
    text-align: right;
    font-size: 14px;
}
.closingtitle{
    width: 100%;text-align:left;
    font-weight: 600; font-size: 14px;
}
.closingitemvalue, .closingitemvalue1 {
    height: 25px;
    text-align: center;
    background-color: #e5e5e5;
    width: 150px;
    margin-left: 20px;
}
.closingitemvalue1 {
    background-color: white;
}
.mcexp {
    color: red;
}
#noclosing {
    height: 30px;
    line-height: 30px;
    color: #006187;
    font-size: 16px;
}

input {
    border: none;
    outline: none;
    font-family: 'Montserrat';
}

#closinglist {
    height: 700px;
    width: 600px;
    margin-right: 20px;
    background-color: #e5e5e5;
    text-align: center;
    padding-top: 20px;
    position: relative;
}
#closingsubmit {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #006187;
    color: white;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    margin-top: 20px;
}

#closingDate {
    text-align: center;
    width: 200px;
    margin-left: auto;
    height: 30px;
}
#invtabheads {
    display: flex;
}
#invplotslist {
    height: 200px; 
    overflow-y: scroll;
    width: 350px;
    background-color: white;
}
.invlotsitem, .invlotsitemhead {
    display: flex;
    height: 30px; line-height: 30px; 
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.invlotsitemhead > div { 
    font-weight: 600;
}
.invlotsitemname {
    width: 150px;
    text-align: center;
}
.invlotsitemvalue {
    width: 200px;
    text-align: center;
}
.checkinerror {
    display: none;
    color: #e67575;
    font-size: 13px;
}
.invhelp {
    margin-top: 10px;
    padding-left: 30px;
    color: #006187;
    font-size: 13px;
}
#invproductdetails, #vendormapping {
    display: none;
}
#vendormapping {
    padding: 20px; 
    background-color: #e5e5e5;
    height: 750px;
    width: 600px;
    margin-left: 30px;
    margin-top: 50px;
}
#vendormappingcover {
    display: none;
    position: absolute;
    height: 10000px;
    width: 100%;
    top: 0; left: 0;
    background-color: white;
    opacity: 0.7;
}
.vendortitle {
    height: 30px; line-height: 30px; 
    font-size: 15px;
}
.vendorname {
    height: 30px; line-height: 30px; 
    color: #006187;
    font-size: 17px;
}
#vendormappings {
    position: relative;
    border-top: 1px solid lightgray; 
    width: 600px; margin: 10px auto;
    height: 680px; overflow-y: scroll;
    background-color: white;
}
.invtab {
    padding-top: 20px;
}
.vmitem, .vmitemhead {
    display: flex; border-bottom: 1px solid lightgray;
    height: 30px; align-items: center; font-size: 14px;
}
.vmitemhead {
    font-weight: 600; padding-left: 10px;
}
.vmitemhead > div {
    cursor: pointer;
}
.vmitemcat {
    width: 200px;
}

.vmitemcb {
    height: 20px; width: 20px; cursor: pointer;
}
.vmitemname {
    margin: 10px; font-size: 15px; width: 350px;
}
#invtabmaster, #invtabvendor {
    display: flex;
}
.invtabhead {
    cursor: pointer;
    font-size: 15px;
    width: 180px; text-align: center;
    height: 40px; line-height: 40px;
}
#stockhistorysalon { 
    margin-left: 20px;
}
#stockhistorytable{ 
    margin: 20px; 
    border: 1px solid lightgray;
    width: 500px;
    height: 600px; 
    overflow-y: scroll;
}

.stockhistitem {
    display: flex;
    height: 30px; align-items: center;
    border-bottom: 1px solid lightgray;
}
.stockhist-date{ 
    padding-left: 10px;
    width: 200px;
}
.stockhistexcel {
    height: 25px;
    cursor: pointer;
}
#pettycashlog {
    height: 570px;
    overflow-y: scroll;
    width: 710px;
    margin: 0 30px;
    background-color: #e5e5e5;
}

.pettycashi{
    height: 20px; min-width: 20px;
    line-height: 20px; text-align: center;
    background-color: #006187;
    color: white; cursor: pointer;
    border-radius: 50%;
    font-size: 15px;
}
.pcedit { 
    padding: 20px;
    position: absolute;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 10px;
}
.pcedittext{ 
    font-size: 12px; 
    margin-top: 10px;
    height: 30px; line-height: 30px;
}
.pceditnewdate {
    background-color: #e5e5e5;
    height: 25px; 
    line-height: 25px;
}
.pceditbutton{  
    height: 25px; 
    line-height: 25px;
    width: 100px; text-align: center;
    margin-top: 10px;
    background-color: #006187; color: white;
    font-size: 13px; cursor: pointer;
}
.pettycashitemedit { 
    width: 50px; text-align: center; cursor: pointer;
}
.pettycashitemedit:hover {
    text-decoration: underline;
}
.pettycashitemhead > .pettycashi, .pettycashitemhead > .pettycashitemedit {
    opacity: 0;
}
.pettycashitem, .pettycashitemhead {
    display: flex;
    align-items: center;
    height: 25px;
    font-size: 12px;
    border-bottom: 1px solid lightgray;
}

    .pettycashitemhead > div {
        color: #006187;
    }

.pettycashitemhead {
    background-color: white;
}

    .pettycashitemhead > .pettycashitemdesc {
        background-color: transparent !important;
    }
    .pettycashitemhead > .pettycashitemdesc1 {
        background-color: transparent !important;
    }

.pettycashitemdate {
    min-width: 120px;
    max-width: 120px;
    text-align: center;
    color: #006187;
}

.pettycashitemname {
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

.pettycashitemdesc {
    min-width: 200px;
    max-width: 200px;
    white-space: nowrap;
    padding-left: 10px;    
}
.pettycashitemdesc1 {
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap;
    padding-left: 10px;    
}
.pettycashitemvalue {
    width: 100px;
    color: #006187;
}

.pettycashitemvalue1 {
    width: 100px;
}

.pettycashitemvaluered {
    color: #e67575 !important;
}

#pettycashcomments{
    height: 70px; width: 300px;
    resize: none;
    font-family: 'Montserrat';
    font-size: 14px;
    padding: 5px;
    border: none;
    background-color: #e5e5e5;
}
#addpettycash {
    display: flex;
    height: 150px;
    align-items: flex-start;
    justify-content: center;
}

.addpettycashadd {
    font-size: 14px;
    cursor: pointer;
    width: 150px; text-align: center;
    height: 30px; line-height: 30px;
    margin: 10px auto;
    background-color: #006187; color: white; cursor: pointer;
}
.apcpart {
    width: 300px;
    text-align: center;
}
.addpettycashinput {
    margin-bottom: 15px;
    text-align: center;
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    outline: none;
    border: none;
    width: 200px;
    font-size: 12px;
    font-family: 'Montserrat';
}

#pettycash {
    width: 1100px;
    height: 700px;
}

#closingcontent {
}

#mtablefttabs {
    width: 150px;
    height: 100%;
    background-color: #e5e5e5;
}

.mtablefttab {
    cursor: pointer;
    width: 99%;
    height: 75px;
    border-bottom: 1px solid lightgray;
    border-right: 1px solid lightgray;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mleftab {
    height: 750px;
    width: 1000px;
    background-color: #e5e5e5;
}

.mleftab {
    padding: 20px;
}

#mlefttab-Cards {
    display: flex;
    align-items: flex-start;
    position: relative;
}

#marketingaddnewcardcover {
    position: absolute;
    top: 40px;
    height: 530px;
    width: 480px;
    background-color: white;
    opacity: 0.7;
    font-size: 20px;
    color: #006187;
    display: flex;
    justify-content: center;
    align-items: center;
}

#mlefttab-Memberships {
    position: relative;
}

#marketingmembershipcover {
    position: absolute;
    bottom: 10px;
    height: 370px;
    width: 1000px;
    background-color: white;
    opacity: 0.7;
    font-size: 20px;
    color: #006187;blu
    display: flex;
    justify-content: center;
    align-items: center;
}

#mlefttab-Promotions {
    width: 1000px;
    position: relative;
}

#marketingnewpromocover {
    position: absolute;
    height: 680px;
    width: 1000px;
    background-color: white;
    opacity: 0.7;
    font-size: 20px;
    color: #006187;
    display: flex;
    justify-content: center;
    align-items: center;
}

#marketingnewpromo {
    display: flex;
}

#promotionstop {
    margin-top: 10px;
    display: flex;
    height: 30px;
    align-items: center;
}

.promotionstitle {
    font-size: 15px;
    color: #006187;
}

.promoshowcheckbox {
    height: 20px;
    width: 20px;
    margin-left: 20px;
}

.promoshowcheckboxtitle {
    margin-left: 10px;
    font-size: 14px;
}

#promotionslist {
    width: 100%;
    height: 280px;
    margin-top: 20px;
    background-color: white;
    overflow-y: scroll;
}

.refreshPromotions {
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-left: 20px;
    margin-right: 20px;
}

.newpromotype {
    margin-top: 40px;
    width: 500px;
    height: 300px;
    background-color: white;
}

.promotypetitle {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid lightgray;
    font-size: 14px;
    color: #006187;
    text-align: center;
    margin-bottom: 10px;
}

#p1_discountPerc {
    border: none;
    outline: none;
    background-color: #e5e5e5;
    width: 200px;
    height: 30px;
    font-family: 'Montserrat';
    text-align: center;
    margin-right: 20px;
}

.p1_optiondiv {
    width: 400px;
    margin: 20px auto;
}

#p1_serviceID {
    width: 400px;
}

#newpromomem {
    height: 20px;
    width: 20px;
    cursor: pointer;
}

#newpromomemtitle {
    height: 20px;
    line-height: 20px;
    margin-left: 20px;
    font-size: 13px;
    color: #006187;
}

#newpromo2, #newpromo4 {
    text-align: center;
}

#p1_billmin {
    width: 200px;
}

#p4_validdays, #p4_validdate {
    width: 180px;
}

#p4_daytitle {
    margin-top: 20px;
    height: 30px;
    line-height: 30px;
    width: 50px;
    text-align: center;
    font-size: 14px;
}

#p2_serviceID, #p2_flatprice, #p4_billmin, #p4_discountPerc {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#p3_triggerServiceID, #p3_benefitServiceID, #p3_discountPerc {
    width: 200px;
    border: none;
    outline: none;
    background-color: #e5e5e5;
    height: 30px;
    margin-right: 20px;
    font-family: 'Montserrat';
    text-align: center;
}

#p1_serviceID, #p1_billmin, #p2_serviceID, #p2_flatprice, #p4_billmin, #p4_discountPerc, #p4_validdays, #p4_validdate {
    border: none;
    outline: none;
    background-color: #e5e5e5;
    height: 30px;
    margin-top: 20px;
    font-family: 'Montserrat';
    text-align: center;
}

.p1_option {
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    margin-left: 20px;
}

.newpromoline {
    margin-top: 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newpromohelp {
    font-size: 12px;
    color: #006187;
}

#newpromosubmit {
    background-color: #006187;
    color: white;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    width: 200px;
    margin-top: 10px;
}

#newpromotypes {
    font-family: 'Montserrat';
    width: 250px;
    height: 30px;
    border: none;
    outline: none;
    font-size: 13px;
    margin: 10px 0 10px 0;
}

#newpromoname {
    border: none;
    outline: none;
    height: 30px;
    width: 200px;
    margin-top: 20px;
    line-height: 35px;
    font-family: 'Montserrat';
    text-align: center;
}

.newpromodate {
    text-align: center;
    margin-top: 20px;
    border: none;
    outline: none;
    height: 30px;
    width: 200px;
    line-height: 35px;
    font-family: 'Montserrat';
}
#billitemgpay {
    text-align: center;
}
#advancedescription{
    background-color: #e5e5e5;
    font-family: 'Montserrat';
    resize: none;
    border: none;
    outline: none;
    margin-top: 20px;
    height: 70px;
    width: 300px;
    padding: 5px;
}
#newpromodesc {
    font-family: 'Montserrat';
    resize: none;
    border: none;
    outline: none;
    margin: 20px 20px 0 10px;
    height: 100px;
    width: 220px;
    padding: 5px;
}

.newpromooptions {
    display: flex;
    margin: 10px 0 10px 0;
}

.promItem {
    cursor: pointer;
}

.promItemInactive {
    background-color: #e67575 !important;
    color: white;
}
.promItemEnded {
    background-color: pink;
}
.promItem, .promItemHead {
    display: flex;
    align-items: center;
    height: 25px;
    font-size: 13px;
    border-bottom: 1px solid lightgray;
}

.promItemNumber {
    text-align: center;
    width: 100px;
}

.promItemHead {
    font-weight: 600;
}

.promItemType {
    width: 50px;
    text-align: center;
}

.promItemDate {
    text-align: center;
    width: 100px;
}

.promItemName {
    width: 250px;
}
.promEdit  {
    position: absolute;
    width: 300px;
    border-radius: 10px;
    padding: 15px; 
    border: 1px solid lightgray;
    background-color: #e5e5e5;
}
.promEditRemove{ 
    position: absolute;
    top: 3px; right: 6px;
    font-size: 15px;
    cursor: pointer;
}
.promItemDelete {
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin: 10px;
}

.promItemRefresh {
    height: 15px;
    width: 20px;
    margin: 10px;
}

.promEditName, .promEditStart, .promEditDesc, .promEditEnd {
    height: 25px;
    width: 270px;
    margin-bottom: 10px;
    padding-left: 5px;
}

.promEditChange{ 
    height: 25px; line-height: 25px;
    width: 100px; text-align: center;
    background-color: #006187; color: white;
    font-size: 14px;
    cursor: pointer;
}
.levelcards {
    margin-top: 20px;
    background-color: white;
    min-height: 200px;
    width: 500px;
    padding: 20px;
}

.levelcardstitle {
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 15px;
    color: #006187;
}

#orglevelcardstlist, #salonlevelcardstlist, #orglevelpackagelist, #salonlevelpackagelist {
    border: 1px solid lightgray;
    height: 220px;
    width: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 0 auto 0 auto;
    position: relative;
}

#orglevelpackagelistcover, #salonlevelpackagelistcover {
    height: 100%;
    display: none;
    width: 100%;
    position: absolute;
    z-index: 5;
    background-color: white;
    opacity: 0.7;
}

.marketingcarditem, .marketingcarditemhead {
    display: flex;
    height: 30px;
    width: 500px;
    margin: 0 auto 0 auto;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
}

.marketingcarditemremove{ 
    height: 20px; 
    width: 20px;
    margin-left: -10px;
}

.marketingcarditemhead {
    font-weight: 600;
    border-bottom: none !important;
}

.marketingcarditemname {
    width: 180px;
    padding-left: 5px;
}

.marketingcarditemvalue {
    width: 80px;
    text-align: center;
}
.marketingcarditemvalue1 {
    width: 50px;
    text-align: center;
}
.mardlinecomments {
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #006187;
    font-size: 14px;
}

.madraddcarddesc {
    height: 100px;
    text-wrap: normal;
    text-align: left;
    font-family: 'Montserrat';
    border: 1px solid lightgray;
    width: 250px;
    padding: 10px;
    border: none;
    outline: none;
    resize: none;
    background-color: #e5e5e5;
    margin: 20px auto 0 auto;
}

#marketingaddnewcard, #marketingaddpackage {
    background-color: white;
    width: 450px;
    min-height: 300px;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-right: 30px;
    text-align: center;
}

#marketingaddnewcardsubmit, #marketingaddnewpackagesubmit {
    width: 120px;
    height: 30px;
    line-height: 30px;
    background-color: #006187;
    color: white;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    margin: 20px auto 0 auto;
}

    #marketingaddnewcardsubmit:hover, #marketingaddnewpackagesubmit:hover {
        background-color: gray;
    }

.marketingaddcardradio, .marketingaddpackageradio, .marketingaddpromoradio {
    height: 25px;
    width: 25px;
}

#marketingaddnewcardtitle, #marketingaddnewpackagetitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 17px;
    text-align: center;
    color: #006187;
}

#madr, #mapr, #macr {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.mapritem {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
}

    .mapritem:hover {
        background-color: lightblue;
    }

        .mapritem:hover .mapritemvalue {
            background-color: lightblue;
        }

        .mapritem:hover .mapritemvalue1 {
            background-color: lightblue;
        }

.mapritemname {
    padding-left: 5px;
    white-space: nowrap;
    width: 200px;
}

.mapritemservice {
    font-size: 13px;
    padding-left: 20px;
    height: 20px;
    line-height: 20px;
}

.mapritemvalue {
    background-color: white;
    width: 100px;
}

.mapritemvalue1 {
    background-color: white;
    width: 50px;
}

#madrorg, #maprorg, #macrorg {
    background-color: white;
    margin-right: 30px;
}

.madrtext {
    font-size: 14px;
    height: 25px;
    line-height: 25px;
}

.madrline {
    height: 50px;
    display: flex;
    align-items: center;
    margin-left: 50px;
    font-size: 14px;
}

    .madrline:nth-of-type(3) {
        margin-top: 20px;
    }

.madrlinename {
    min-width: 100px;
    max-width: 100px;
    text-align: right;
}
.madrlinename1 {
    min-width: 100px;
    max-width: 100px;
    text-align: right;
}
.madrlinevalue {
    border: none;
    background-color: #e5e5e5;
    outline: none;
    text-align: center;
    width: 200px;
    font-family: 'Montserrat';
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    margin-left: 15px;
}
.madrlinevalue1 {
    border: none;
    background-color: #e5e5e5;
    outline: none;
    text-align: center;
    width: 150px;
    font-family: 'Montserrat';
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    margin-left: 15px;
}
#marketingaddpackagevalue {
    text-align: center;
    width: 200px;
    font-family: 'Montserrat';
    height: 30px;
    line-height: 30px;
    margin-left: 15px;
}

#markmemberships {
    background-color: white;
    height: 250px;
    width: 750px;
    margin: 0 auto 0 auto;
    border: 1px solid lightgray;
    overflow-y: scroll;
    overflow-x: hidden;
}

.markmembershipstitle {
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #006187;
}

#existingmembershiptext {
    height: 30px;
    color: #006187;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
}

#vipmembership {
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.markmembershipsitem, .markmembershipsitemhead {
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 14px;
}

.markmembershipsitemhead {
    font-weight: 600;
    width: 750px;
    margin: 0 auto 0 auto;
    border-bottom: none;
}

.markmembershipsitemname {
    min-width: 280px;
    max-width: 280px;
    padding-left: 10px;
}

.markmembershipsitemvalue {
    min-width: 100px;
    max-width: 100px;
}

.markmembershipsinput, .markmembershipsinput1 {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    font-family: 'Montserrat';
    margin-top: 5px;
}

.markmembershipsinput {
    width: 300px;
}

.markmembershipsinput1 {
    margin-left: 10px;
    width: 150px;
}

.markmembershipsdesc {
    border: none;
    outline: none;
    padding: 10px;
    font-size: 13px;
    font-family: 'Montserrat';
    margin-top: 20px;
    width: 330px;
    height: 100px;
    resize: none;
}

#membershipadd {
    width: 200px;
    margin: 20px auto 0 auto;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    background-color: #006187;
    color: white;
    cursor: pointer;
}

#mlefttab-Packages {
    display: flex;
    align-items: flex-start;
    position: relative;
}

#marketingpackagecover {
    position: absolute;
    top: 40px;
    height: 690px;
    width: 480px;
    background-color: white;
    opacity: 0.7;
    font-size: 20px;
    color: #006187;
    display: flex;
    justify-content: center;
    align-items: center;
}

#marketingaddpackagelist {
    height: 150px;
    background-color: #e5e5e5;
    width: 400px;
    margin: 0 auto 0 auto;
}

#marketingaddpackagedesc {
    height: 70px;
    border: none;
    outline: none;
    resize: none;
    font-family: 'Montserrat';
    padding: 10px;
    background-color: #e5e5e5;
    width: 270px;
}

#marketingaddpackageservices {
    border: none;
    outline: none;
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    font-family: 'Montserrat';
    font-size: 13px;
    text-align: center;
    width: 200px;
    margin-left: 15px;
}

.mapradditem, .mapradditemhead {
    display: flex;
    height: 25px;
    align-items: center;
    position: relative;
    border-bottom: 1px solid lightgray;
}

.mapradditemhead {
    width: 400px;
    margin: 0 auto 0 auto;
    font-weight: 600;
    border-bottom: none;
}

    .mapradditemhead > div {
        background-color: white;
    }

.mapradditemname {
    padding-left: 10px;
    min-width: 200px;
    max-width: 200px;
    font-size: 11px;
    white-space: nowrap;
}

.mapradditemcount {
    width: 35px;
    outline: none;
    border: none;
    height: 15px;
    line-height: 15px;
    font-family: 'Montserrat';
    font-size: 11px;
    text-align: center;
}

.mapradditemdelete, .mapritemdelete {
    height: 20px;
    width: 20px;
    cursor: pointer;
    position: absolute;
    right: 5px;
}

.mapradditemprice {
    background-color: #e5e5e5;
    text-align: center;
    min-width: 150px;
    max-width: 150px;
    font-size: 11px;
}

#usedpromoshead {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
    padding-top: 20px;
}

#usedpromossince {
    border: none;
    outline: none;
    background-color: #e5e5e5;
    height: 30px;
    line-height: 30px;
    width: 200px;
    font-family: 'Montserrat';
    text-align: center;
}

#usedpromos {
    margin-left: 20px;
    height: 400px;
    width: 1200px;
    border: 1px solid lightgray;
    overflow-y: scroll;
    overflow-x: hidden;
}

.userpromohead {
    margin-left: 20px;
    margin-top: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.userpromo {
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 13px;
}

.userpromoitem1 {
    background-color: white;
    min-width: 200px;
    max-width: 200px;
}
#todayscollectiontaxtoggle {
    height: 20px; width: 20px;
    margin-top: 10px;
    cursor: pointer;
}
.userpromoitem2 {
    background-color: white;
    text-align: center;
    min-width: 100px;
    max-width: 100px;
}

.userpromoimg, .payhistoryitemvaluebill {
    margin-left: 10px;
    margin-right: 10px;
    height: 15px;
    width: 15px;
    cursor: pointer;
}

.adminoptions {
    margin-left: 10px;
    margin-right: 10px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

#usedpromochart {
    height: 250px;
    width: 1200px;
}

.loadstaffbills {
    height: 20px;
    cursor: pointer;
}

#closewindow {
    position: absolute;    
    cursor: pointer;
    right: 20px;
    color: white;
    font-size: 20px;
    font-weight: 300;
}
.editBillCheck {    
    top: 80px;
    left: 30%;
    text-align: center;
    position: absolute;
    min-height: 300px; 
    width: 500px;
    font-size: 13px;
    z-index: 999;
    padding-bottom: 20px;
    background-color: white;
    border: 1px solid lightgray;
}
.editBillButtons{ 
    display: flex;
    align-items: center;
    justify-content: center; 
}
.editBillbutton {
    cursor: pointer; color: white;
    padding-left: 10px; padding-right: 10px;
    height: 30px;  line-height: 30px;
    background-color: gray; text-align: center;
}
.editBillCancel{ 
    margin: 20px;
    background-color:#e67575;
}
.editBillCancelCheck{ 
    margin-left: 20px; 
    font-size: 13px;
}
.editBillCheckTitle{ 
    height: 30px; line-height: 30px; 
    margin-bottom: 20px;
    background-color: #2d3131; 
    color: white;
    text-align: center;    
}
.editBillComments{ 
    margin: 20px auto 20px auto;
    width: 200px;
    height: 100px;
    font-family: Montserrat;
}
.editBillCheckleft {
    border-right: 1px solid lightgray;
}
.editBillChecklefttxt{ 
    font-size: 13px; 
    margin-bottom: 10px;
}
.editBillCheckleftitem{ 
    display: flex; align-items: center;
    height: 25px;        
}
.editBillCheckleftitemname { 
    width: 200px; 
    white-space: nowrap; 
    overflow: hidden;
    font-size: 11px;
    background-color: #006187; color: white;
    height: 25px; line-height: 25px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 10px;
}
.editBillCheckleftitemexp { 
    height: 23px; width: 120px;
    background-color: #e5e5e5;
    text-align: center;
    font-size: 10px;
}
.editBillCheckleft, .editBillCheckright{ 
    width: 50%;
    text-align: left;
    padding-left: 20px;
    font-size: 12px;
    padding-right: 20px;
    max-height: 300px; overflow-y: scroll;
}
.editBillBottom{ 
    display: flex;
}
.editBill {
    position: absolute;
    height: 600px;
    width: 1200px;
    border: 1px solid gray;
    z-index: 102;
    background-color: white;
}

.editBillHead {
    top: 3px; right: 10px;
    cursor: pointer;
    position: absolute;
    height: 25px; width: 25px; line-height: 25px; text-align: center;
    background-color: white;
    border-radius: 50%;
}
.editBillContent {    
    display: flex;
}
.editBillLeft {
    width: 300px; border-right: 1px solid lightgray;
    height: 600px;
    text-align: center;
    position: relative;
}
.editBillRight {
    width: 900px;
    height: 600px;
}
.editBillRightTop{
    overflow-y: auto;
    border-bottom: 1px solid lightgray;
    height: 300px;
}
.boxRightBottom {
    height:265px;
}
.ebbottom {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ebschangestaffholder {
    width: 200px;
    margin-left: 20px;
    text-align: center;
}
.ebschangestaffinfo {
    text-align: center;
    font-size: 12px;
}
.ebschangestaff {   
    margin: 20px auto;
    background-color: #006187; color: white;
    height: 30px; line-height: 30px; text-align: center;
    font-size: 14px; cursor: pointer;
    width: 75px;
}
.ebsitem{
    margin-top: 20px;
    background-color: white;
    width: 150px;
    margin-left: 20px;
    text-align: center;
    padding: 10px;
}
.ebsitemname {
    font-size: 15px;
    height: 30px; line-height: 30px;
}
.ebstaff {
    height: 25px; 
    width: 120px;
    margin-top: 10px;
}
.ebsperc{
    background-color: #e5e5e5;
    text-align: center; width: 100px;
    height: 25px; line-height: 25px; 
    margin-top: 20px;
}

.ebillcancelled {
    position: absolute;
    top: 100px;
    left: 350px;
    z-index: 10;
}
.ebillnotes {
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid lightgray;
    height: 30px; line-height: 30px; 
    background-color: #e5e5e5;
}

.ebilltitle, .ebillitemtitle {
    background-color: white;
    text-align: center;
    width: 99.90%;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid lightgray;
}
.ebt1 {
    background-color: #E5E5E5;
}
.ebilloptions {
    display: flex;
    justify-content: flex-start;
    align-items: center;    
    height: 50px;
    margin-bottom: 10px;
    border-bottom: 1px solid lightgray;    
}
.ebillbackdate{ 
    text-align: center;
    z-index: 150;
    position: absolute;
    padding: 20px;
    background-color: white; 
    border: 1px solid lightgray;
}
.ebillbackdatedate{ 
    height: 30px; line-height: 30px;
    width: 200px; background-color: #e5e5e5;
    text-align: center;
}
.ebillbackdatedesc{ 
    font-family: Montserrat;
    height: 75px; 
    width: 180px;
    margin: 0 auto;
    padding: 10px;
    font-size: 13px;
    border: none;
    background-color: #e5e5e5;
}
.ebillbackbuts {
    display: flex;
    margin-top: 10px; justify-content: center;
}
.boxbutschange { 
    width: 90px; margin-right: 10px;
    color: white; text-align: center;
    cursor: pointer; height: 30px; line-height: 30px; 
    font-size: 13px;
}
.boxbutschange { background-color: #006187; }
.ebillCheckCancel, .ebillrefund {
    height: 30px; line-height: 30px; margin-left: 20px;
    text-align: center; padding: 0 10px 0 10px;  cursor: pointer;
    background-color: #e67575; color: white; font-size: 14px;
}
.ebillrefundcancel, .boxbutsclose{ 
    cursor: pointer;
    position: absolute;
    top: 5px; right: 5px;
    background-color: #006187; 
    color: white;
    height: 25px; line-height: 25px; width: 25px; 
    text-align: center;
    opacity: 0.7;
    border-radius: 50%;
    cursor: pointer;
}
.ebillrefundbox {
    position: absolute;
    padding: 20px;
    z-index: 120;
    background-color: white;
    border: 1px solid lightgray;
}
.ebillrefundboxerror{ 
    width: 180px;
    color: red;
    font-size: 13px; margin-top: 10px;
}
.ebillrefunddesc{ 
    width: 200px;
    text-align: left;
    font-size: 12px;
}
.ebillrefundbillamount{ 
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px; color: #006187; font-weight: 600;
}
.ebillrefundamount {
    height: 30px; padding-left: 10px; padding-right: 10px;
    text-align: center;
}
.ebillrefundcomments{ 
    height: 100px;
}
.ebillrefundamount, .ebillrefundcomments {
    font-size: 12px;
    max-width: 150px;
    min-width: 150px;
    border: none; outline: none;
    font-family: Montserrat;
    background-color: #e5e5e5;
}
.ebillrefundsubmit{ 
    background-color: #006187; color: white;
    font-size: 12px; width: 150px; text-align: center;
    cursor: pointer; margin-top: 20px;
    height: 30px; line-height: 30px;
}
.ebilltext {
    font-size: 13px; color: #006187;
    margin-left: 20px;
}
.ebillbillno { 
    text-align: left;
    padding-left: 10px;
    font-size: 14px;        
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #e5e5e5;
}
.ebillclient {
    text-align: left;
    color: #006187;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #e5e5e5;
}
.ebillphone {
    background-color: #e5e5e5;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    padding-left: 10px;
    padding-bottom: 10px;
}
.ebillvalue, .ebillvalue1 {
    background-color: #e5e5e5;
    display: flex;
    height: 20px; align-items: center;
    font-size: 12px;
    padding-left: 10px;
    border-bottom: 1px solid lightgray;
}
.ebillvaluename{ 
    width: 200px; text-align: left; padding-left: 5px;
}
.ebillvaluevalue{ 
    width: 150px; text-align: left; padding-left: 5px;
}
.ebillvalue1 { 
    text-align: left;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15px; 
    font-weight: 600;
}
.ebillvc { 
    background-color: #e5e5e5;
    padding-top: 5px;
    font-size: 12px;
    text-align: left;
    padding-left: 15px;
    padding-bottom: 10px;
}
.ebilluser{ 
    text-align: left;
    padding-left: 15px;
    font-size: 12px;height: 20px; line-height: 20px;    
}
.ebillchangetitle {    
    padding-top: 10px; 
    margin: 20px auto 10px auto;
    width: 250px;
    border-top: 2px solid #006187;
    font-size: 14px; 
    text-align: center;
}
.ebillpmselect {
    width: 200px; 
    height: 30px;
    outline: none;
    margin: 10px auto;
}
.ebillchangesubmit {    
    width: 250px;
    text-align: center;
    height: 30px;
    cursor: pointer; font-size: 13px;
    color: #006187;
    margin: 0 auto;
}
.ebillchangesubmit:hover { 
    text-decoration: underline;
}
.ebillpm {
    height: 20px;line-height: 20px;    
    font-size: 12px;
    text-align: left;
    padding-left: 15px;
    border-bottom: 1px solid lightgray;
}
.ebillitem, .ebillitemhead {
    justify-content: flex-start;
    display: flex;  
    height: 30px;
    align-items: center;
    border-bottom: 1px solid lightgray;
    font-size: 11px;
}
.ebillitemhead > div { 
    font-weight: 600;
}
.ebillitemname {
    padding-left: 10px; 
    min-width: 170px;
    max-width: 170px;
}
.ebillitemvalue{
    min-width: 50px;
    max-width: 50px;
    text-align: center;
}
.ebillstaffname{ 
    min-width: 75px;
    max-width: 75px;
    text-align: center;
}

.ebilloptionno{
    color: #e67575; 
    font-size: 13px; 
    padding-left: 20px;
}
.ebillchangestaff { 
    width: 100px; 
    cursor: pointer;
    font-size: 12px; 
    color: #006187;
    text-align: center;    
    height: 30px; line-height: 30px;
}
.ebillchangestaff:hover { text-decoration: underline;}
#clock {
    margin: -5px;	
	max-width: 170px;
	margin: -10px auto;
    background-color: transparent;
}

.calc {
    position: absolute;
    width: 500px;    
    border: 2px solid lightgray;
    background-color: white;
    z-index: 102;
    padding: 0px 0px 0px 0px;
}
.chpasstitle{ 
    height: 30px;  line-height: 30px; 
    border-bottom: 2px solid #006187;
    margin-bottom: 20px;
}
.chpass {
    position: absolute;
    width: 300px;    
    border: 2px solid lightgray;
    background-color: white;
    z-index: 102;
    padding: 20px;
    text-align: center;
}
.chpasserror{
    font-size: 12px; 
    color: red;
    text-align: center;
    margin: 10px 0 10px 0;
}
.chpasssubmit{
    margin: 10px auto; background-color: #006187; color: white;
    height: 30px; line-height: 30px;
    width: 100px; font-size: 14px; cursor: pointer;

}
.chpassold, .chpass1, .chpass2, .chpassname, .chpassphone, .chpassemail {
    margin-bottom: 10px;
    background-color: #e5e5e5;
    height: 30px; line-height: 30px; 
    text-align: center;
    font-size: 13px;
    width: 250px;
}
.chpassdeterror{ 
    height: 30px; line-height: 30px; 
    color: #006187; font-size: 12px;
}
.calcinput {
    width: 490px;
    background-color: #e5e5e5;
    height: 50px; line-height: 50px;
    font-family: 'Montserrat';
    font-size: 30px;
    text-align: right; padding-right: 10px;
}
.closecalc {        
    background-color: #2d3131;
    color: white;
    cursor: pointer;   
    height: 30px; line-height: 30px;
    width: 100%; text-align: center;    
}
.calcbuttons {
    display: flex;    
}
.numbuttons{ 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 300px;
}
.opbuttons {
    width: 200px;
    display: flex;
    align-items: flex-end;
  align-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
}
.calcbutton {
    height: 60px; line-height: 60px; 
    width: 80px;
    cursor: pointer; font-size: 30px;
    text-align: center;
    background-color: #006187; color: white;
    margin-left: 5px; margin-top: 5px;
}
.optbutton {
    height: 60px; line-height: 60px; 
    width: 80px;
    cursor: pointer; font-size: 30px;
    text-align: center;
    background-color: gray; color: white;
    margin-left: 5px; margin-top: 5px;
}
.calcbutton:hover {
    background-color: gray;
}
.calculatorheader {
    width: 100%; text-align: center;
    height: 30px; line-height: 30px; font-size: 13px;
    cursor: pointer;
    background-color: gray; color: white;
}

.calcresult {
    height: 50px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    background-color: #e5e5e5;
    border-top: 1px solid lightgray;
}
.calcequals{
    width: 80px;
    height: 50px; line-height: 50px;
    text-align: center; text-align: center;
    font-size: 40px;
    background-color: #006c5b; color: white;
    cursor: pointer;
}
.calcequals:hover {
    background-color: gray;
}
#staffseemore {
    color:#006187;
    cursor:pointer; 
}
#staffseemore:hover { 
    text-decoration: underline;
}
.frefunditem-head, .frefunditem { 
    display: flex; height: 30px; 
    align-items: center;
    font-size: 14px;
}
.frefunditem{ 
    border-bottom: 1px solid lightgray;
}
#frefundlist {
    background-color: white;
    height: 600px;
    overflow-y: scroll;
}
.frefunditem-head .userpromoimg { 
    opacity: 0;
}
.frefunditem-head { 
    font-weight: 600;
}
.frefund-billno{ 
    width: 120px;
    text-align :center;
    font-size: 13px;
}
.frefund-name {
    width: 200px;
}
.frefund-date {
    width: 200px;
}
.frefund-amount {
    width: 100px;
    text-align: center;
}
.frefund-desc {
    min-width: 400px;
}
.calcanswer{
    width: 320px;
    height: 50px; line-height: 50px;
    text-align: center;
    font-size: 30px;
}
.clientinfobillmain { 
    left: 50px !important;
}

.clientinfo, .clientinfobillmain, .clientinfoadmin, .clientinfonewapp, .clientinfoadddep {
    z-index: 102;
    position: absolute;
    top: 60px;left: 0px;
    width: 290px;
    padding-left: 10px;
    height: 30px; line-height: 30px;background-color: #006187; color: white;
    font-size: 14px;
}
.clientinfoadmin {
    left: 30px;
}

.clientinfonewapp { 
    top: 90px !important;
    left: 30px;
}
.clientresultnewapp { 
    top: 90px !important;
    left: 30px !important;
}

.clientresulttop {
    text-align: center;
    height: 30px; line-height: 30px;background-color: gray; color: white;
    font-size: 14px;
}
.clientresultbillmain {
    left: 50px !important;
}
.clientresult, .clientresultbillmain, .clientresultadmin, .clientresultnewapp, .clientresultadddep {
    z-index: 102;
    position: absolute;
    top: 60px;left: 0px;
    min-height: 100px;
    max-height: 700px;
    width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: white;
    border: 1px solid lightgray;
}
.clientresultadmin {
    left: 30px;
}
.clientresultitem {
    height: 25px; 
    cursor: pointer;
    font-size: 14px;
    padding-left: 10px;
    line-height: 25px;
    width: 310px;
    background-color: white;
    border-bottom: 1px solid lightgray;
}
.clientresultitem:hover {
    background-color: #e5e5e5;
}
.ndtab-summar-start, .ndtab-summar-end { 
    background-color: #e5e5e5;
}
#ndtab-summary-go { 
    width: 50px;
    height: 25px; line-height: 25px;
    text-align: center;
    background-color: #006187; color: white;
    margin-left: 20px; font-size: 14px;
    cursor: pointer;
}
.ndtab-summar-title {
    font-size: 14px;
    margin-left: 20px;
}
.actmetaitem {
    position: relative;
    display: flex;
    align-items: center;
}
#newtargetmonth {
    height: 30px;
    margin-bottom: 10px;
    width: 180px;
}
.atmeta-dnd { 
    height: 30px; 
    line-height: 30px;
    font-family: Montserrat;
    font-size: 14px;
}

.actname {
    font-size: 14px;
    text-align: right;
    width: 100px;
    padding-right: 10px;
}
.atcinput{
    height: 40px; line-height: 40px;
    width: 250px;
    text-align: left;
    padding-left: 10px;
    background-color: #e5e5e5;    
    font-size: 15px;
}
.actmetaitem:nth-of-type(1) {
    padding-bottom: 10px;
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}
#atcphone {
    width: 150px;
}
#actphone-update-exists {
    color: #e67575;
    font-size: 11px;
    position: absolute;
    bottom: 0px;
    right: 20px;
    display: none;
}
#actphone-update {
    user-select: none;
    background-color: #006187; color: white;
    margin-left: 20px;
    font-size: 13px;
    height: 30px; line-height: 30px;
    border-radius: 10px;
    width: 75px;
    cursor: pointer; 
    text-align: center;
}
#atsubmitclientmeta {
    width: 100px; text-align: center;
    background-color: #006187; color: white;
    height: 30px; line-height: 30px; 
    margin: 20px auto;
    cursor: pointer;
}
#atsubmitclientmeta:hover { 
    background-color: gray;
}
.atcnotes{
    outline: none;
    border: none;
    font-family: 'Montserrat';
    resize: none;
    height: 80px; 
    width: 250px;
    padding: 5px; 
    background-color: #e5e5e5;
    font-size: 13px;
}
#searchspinner, #searchspinnerbillmain, #searchspinnernewapp {
    display: none;
    position: absolute;
    right: 70px; top: 0px;
}
#searchspinneradmin {
    display: none;
    position: absolute;
    left: 230px; top: 0px;
}
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-spinner div {
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #006187;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#mgrcreatepolink{
    font-size: 18px;
    background-color: #006187;
    color: white;
    cursor: pointer;
    margin-right: 20px;
    height: 30px; line-height: 30px; 
    width: 100px; text-align: center;
}

#addnewproduct , #addnewvendor{
    user-select: none;
    width: 200px; font-size: 15px; color:#006187; font-weight: 600;
    cursor: pointer; text-align: center; height: 40px; line-height: 40px;
    margin-left: 20px;
}
#addnewproduct:hover {
    background-color: #e5e5e5;
}
#addnewvendor:hover {
    background-color: #e5e5e5;
}
#invprodmaster, #invvendormaster {
    margin-top: 10px;
    margin-left: 20px;
    width: 1000px;
    height: 700px; overflow-y: scroll;
    border: 1px solid lightgray;
}
.prodmasteritemhead > div:hover {
    text-decoration: underline;
}
.prodmasteritemhead > div {
    font-weight: 600;
    cursor: pointer;
}
.vendoritemhead > div {
    font-weight: 600;
}
.prodmasteritem, .prodmasteritemhead, .vendoritem, .vendoritemhead {
    display: flex;
    height: 30px;   
    font-size: 13px;
    align-items: center;
    border-bottom: 1px solid lightgray;
}
.vendoritem {
    cursor: pointer;
}
.vendoritem:hover {
    background-color: #e5e5e5;
}
.vendoritemphone, .vendoritemvalue {
    min-width: 150px; 
    max-width: 150px;
    padding-left: 10px;
}
.vendoritemname {
    min-width: 300px; 
    max-width: 300px;
    padding-left: 10px;
}
.prodmasteritem {
    cursor: pointer;
}
.prodmasteritem:hover {
    background-color: #e5e5e5;
}
.prodmasteritemid {
    width: 50px;
    text-align: center;
}
.prodmasteritemname {
    min-width: 300px;
    max-width: 300px;
    text-align: left;
    padding-left: 5px;
}
.prodmasteritemcat {
    min-width: 150px;
    max-width: 150px;
    text-align: left;
}
.prodmasteritemprice {
    width: 100px;
    text-align: center;
}
.prodmasteritembarcode {
    width: 120px;
    text-align: center;
}
.prodmasteritemsac {
    width: 120px;
    text-align: center;
}
#addproductform, #addvendorform {
    background-color: #e5e5e5;
    padding: 20px;
    margin-left: 20px;
    display: none;
    width: 850px;
}

#receiptlists {
    border: 1px solid lightgray;
    margin-top: 10px; margin-left: 20px;
    height: 700px;
    width: 1200px;
    overflow-y: scroll;
}
.invreceipt, .invreceipthead {
    padding-left: 10px;
    display: flex; border-bottom: 1px solid lightgray;
    font-size: 13px; 
    height: 30px; align-items: center;
}
.invreceipt:hover {
    background-color: #e5e5e5;
}
.invreceipt {
    cursor: pointer;
    position: relative;
}
#p1_discounttype{ 
    margin-right: 10px;
    height: 30px; line-height: 30px; 
    width: 200px;
}
.invreceipthead > div {
    font-weight: 600;
}
.po-editdate{ 
    position: absolute; 
    width: 250px; 
    height: 100px;
    border-radius: 10px;
    background-color: #e5e5e5;
    text-align: center;
    border: 1px solid lightgray;
}
.po-editdate-submit { 
    background-color: #006187;
    color: white;
    width: 150px;
    height: 25px; line-height: 25px;
    font-size: 13px;
    margin: 10px auto;
    cursor: pointer;
}
#bill-comments { 
    width: 600px; 
    height: 50px;
    resize: none;
    margin-top: 10px;
    margin-left: 30px;
    border: 1px solid lightgray;
    border-radius: 10px;
    padding: 10px;
    font-family: Montserrat;
}
.po-editdate-poid {
    height: 30px;
    line-height: 30px;
}
.po-editdate-input{ 
    height: 30px; 
    text-align: center;
}
.po-editdate-close {
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
}
.invreceiptdate, .invreceiptname, .invreceiptinvno {
    width: 150px;
    text-align: left;
    padding-left: 5px;
    overflow: hidden;
    white-space: nowrap;
}
.invreceiptedit { 
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 45px;
    top: 3px;
}
.invreceiptdelete { 
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 3px;
}
.invreceiptvendor {
    text-align: left;
    width: 200px;
}
.invreceiptno { 
    width: 100px; text-align: center;
}
.invreceiptcount { width: 100px; text-align: center}
.checkoutstaff { 
    margin-bottom: 10px;
    text-align: center;
    width: 170px;
    background-color: #e5e5e5;
    height: 30px; line-height: 30px;
}
#addproductsubmit, #addvendorsubmit {
    font-size: 14px; 
    background-color: #006187; color: white;
    height: 30px; line-height: 30px; 
    width: 150px; cursor: pointer;
    text-align: center; margin-left: 20px; 
    margin-top: 10px;
}
#addproducttype {
    height: 30px; line-height: 30px; 
    width: 200px; 
    margin-left: 20px;
    margin-bottom: 10px;
    font-family: 'Montserrat';
}
#addproductname, #addproductcategory, #addproductprice, #addproductsac, #addproductbarcode {
    background-color: white;
    height: 30px; line-height: 30px;
    width: 200px; margin-left: 20px;
    margin-bottom: 10px;
    text-align: center;
}
#addvendorname, #addvendorgst, #addvendorpan, #addvendorphone, #addvendoremail {
    background-color: white;
    height: 30px; line-height: 30px;
    width: 250px; margin-left: 20px;
    margin-bottom: 10px;
    text-align: center;
}
#addvendoraddress, #addvendorpocname {
    background-color: white;
    height: 30px; line-height: 30px;
    width: 525px; margin-left: 20px;
    margin-bottom: 10px;
    text-align: center;
}

#invprodedittype {
    font-family: 'Montserrat';
    width: 150px; 
    height: 30px; line-height: 30px; 
    margin-top: 10px; 
    margin: 10px;
}

#invproductedit {
    margin-top: 40px;
    margin-left: 20px;
    background-color: #e5e5e5;
    padding: 20px;
    text-align: center; 
}
#invproductlots { 
    margin-top: 20px;
    margin-left: 20px;
    background-color: #e5e5e5;
    padding: 20px;
}
#changeProductDetails { 
    background-color: #006187;
    color: white; 
    height: 30px; line-height: 30px; 
    text-align: center; 
    width: 150px;
    margin: 20px auto;
    cursor: pointer;
}
.invprodedititem {
    margin-top: 10px;
    display: flex; align-items: center; height: 40px;
}
.invproedittitle {
    width: 150px;
    text-align: right;
    padding-right: 10px;
}
#prodlotstitle {
    color: #006187;
}
#invlotsalons {
    height: 25px; margin-top: 10px; margin-bottom: 10px; 
    font-family: 'Montserrat';
}
#addnewlotbutton {
    height: 40px; line-height: 50px; 
    text-align: left;
    color: #006187;
    margin-bottom: 10px;
    cursor: pointer;
    margin-left: 20px; 
}
.newlotprice {
    text-align: center;
    height: 25px; line-height: 25px; 
    width: 150px; outline: none; border: none;
}
.invprodeditname,.invprodeditcat,.invprodeditprice, .invprodeditsac, .invprodeditbarcode, .invprodeditgst {
    background-color: white;
    height: 30px; line-height: 30px;
    width: 250px; margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
    text-align: left; padding-left: 10px;
}

.invtitle {
    height: 50px; display: flex; align-items: center;
    font-size: 18px; color: #006187;
    width: 100%;
    padding-left: 50px;
    border-bottom: 1px solid lightgray;
}
.invsubtitle {
    height: 30px; display: flex; align-items: center;
    font-size: 15px; color: #006187;
    width: 100%;
    padding-left: 50px;
}
#mgrdraftpos{
    height: 800px; overflow-y: scroll;
    width: 300px; border-right: 1px solid lightgray;
}
#mgrdraftpostitle {
    height: 30px; line-height: 30px; 
    color: #006187; text-align: center;
    font-size: 14px;
    border-bottom: 1px solid lightgray;
}
.savedpo {
    border-bottom: 1px solid lightgray;    
    position: relative;
    padding-bottom: 25px;
    cursor: pointer;
}
.deletepo{ 
    position: absolute;
    bottom: 2px;  right: 5px;
    height: 20px; 
    cursor: pointer;
}
.savedpo:hover {
    background-color: #e5e5e5;
}
.savedpovendor{
    padding-left: 5px;
    height: 30px; line-height: 30px;
    font-size: 14px; font-weight: 600;
    color: #006187;
}
.submittedpo {
    background-color: #64c466 !important;
}
.savedpochanged, .savedpocreated, .savedpostatus {
    position: absolute;
    font-size: 10px;
    right: 5px;
}
.savedpovalue {
    font-size: 10px;
    padding-left: 10px;
    height: 15px; line-height: 15px;
}
.savedpocreated {   
    top: 10px; 
}
.savedpochanged {
   top: 30px;
}
.savedpostatus{
    color: #006187;
    top: 50px;
}
#mgrpoview {
    position: relative; 
    width: 1000px;
    padding-top: 10px;
    padding-left: 20px;
}
#poprint {
    position: absolute; top: 20px; right: 100px; cursor: pointer;
    height: 30px; display: none;
}
#mgrpoviewcover, #mgrpoviewcoverreceive {
    cursor: pointer;
    color: #006187;
    font-size: 25px;
    height: 100%;
    width: 1500px;
    background-color: white; 
    opacity: 0.7;
    position: absolute;
    display: flex; justify-content: center; align-items: center;
}
#mgrpoviewcoverreceive {
    justify-content: flex-start;
    padding-left: 200px;
}
#mpovendor, #mpotarget {
    width: 200px; height: 30px; 
}
.mpoitem {
    display: flex;
    height: 30px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.mpoitem1 {
    display: flex;
    height: 30px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
#potop {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
} 
#potopvendor, #potopsalon {
    width: 500px;
    text-align: left;
    border: 1px solid lightgray;
    padding: 10px;
}
#potopsalon{ 
    margin-left: 100px;
}
.potopitem, .potopsitem {
    font-size: 14px; 
    margin-top: 5px;
}
.invbutton{
    background-color: #006187; color: white;
    height: 30px; line-height: 30px;
    margin-right: 20px;
    padding-left: 10px; padding-right: 10px;
    font-size: 14px; cursor: pointer;
}
.inverror {
    font-size: 13px; margin-left: 20px;
    color: red; height: 30px; line-height: 30px;
}
.mpoitemname {
    width: 200px;
    font-size: 17px; color: #006187;
}

#showFManagerView, #showFFinanceView {
    font-size: 15px; cursor: pointer;
    height: 25px; line-height: 25px; color: #006187;
}
#showFFinanceView {
    margin-bottom: 20px;
}
#showFManagerView:hover, #showFFinanceView:hover { 
    text-decoration: underline;
}
#mpoitemlist{    
    border: 1px solid lightgray;
    height: 250px;
    width: 1200px;
    overflow-y:scroll;
    overflow-x: hidden;
}
.pototalitem { height: 30px; display: flex; align-items: center; font-size: 14px; }

.pototalname {
    width: 200px; text-align: right; padding-right: 5px;
}
.pototaldisc, .pototalquant {
    width: 150px; margin-left: 10px; height: 25px; line-height: 25px;
}
.pototalvalue {
    width: 150px; margin-left: 10px;
}
.poitem {
    font-size: 13px;
    padding-left: 5px;
    display: flex;
    border-bottom: 1px solid lightgray;
    height: 30px; align-items: center;
}
.poitemhead {    
    margin-top: 20px;
    font-size: 13px;
    padding-left: 5px;
    display: flex;   
}
.poitemhead > div {
    font-weight: 600;
    background-color: white !important;

}
.poitemname {
    min-width: 250px;
    max-width: 250px;
    white-space: nowrap;
    overflow-x: hidden;
}

.poitemcode {
    min-width: 110px;
    font-size: 12px;
    max-width: 110px;
    text-align: center; 
}

.finexcel{
    display: none;
    margin-left: 20px;
    height: 25px;
    cursor: pointer;
}
.smallexcel {
    top: 10px;
    position: absolute;
    height: 20px;    
    cursor: pointer;
    margin-left: 30px;
}
.poitemprice {
    min-width: 150px;
    max-width: 150px;
    text-align: center;
}
.poitemquant {
    background-color: #e5e5e5;
    min-width: 65px;
    max-width: 65px;
    text-align: center;
}
.poitemhead .poitemdisc {
    margin-left: 15px;
}
.poitemhead .poitemtax {
    margin-left: 5px;
}
.poitemdisc, .poitemrate, .poitemtax {
    margin-left: 5px;
    margin-right: 5px;
    background-color: #e5e5e5;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}
.poitemvalue {
    min-width: 100px; 
    max-width: 100px;
    text-align: center;
}
.poitemdelete{
    height: 25px; width: 25px; 
    margin-left: 10px;
    cursor: pointer;
}
#mrgpinputvendor, #mrgpinputnonvendor {
    background-color: #e5e5e5;
    height: 30px; line-height: 30px; 
    font-size: 13px; 
    text-align: center;
    width: 200px;
    margin-right: 10px; 
}
#mrgpinputnonvendor {
    margin: 10px;
}
.lastStaff { 
    height: 20px; line-height: 20px; 
    font-size: 12px; 
    color: #006187;
    text-align: center;
    cursor: pointer;
}
.audititemdownload{ 
    width: 300px;
    margin-top: 10px;
    margin-left: 20px;
    font-size: 13px; 
    cursor: pointer;
    color: #006187;
}
.audititemdownload:hover { 
    text-decoration: underline;
}
.lastStaff:hover {
    text-decoration: underline;
}
#showvendorwithmappingholder {
    display: flex;
    align-items: center;
    height: 30px;
    margin-left: 20px;
}
#showvendorwithmappingtitle {
    margin-left: 5px; font-size: 15px;
}
#showvendorwithmapping {
    height: 25px; width: 25px; cursor: pointer;
}
#showonlystockwithcount {
    height: 20px; width: 20px; cursor: pointer;
    margin-left: 20px;
}

#showonlystockwithcountlabel {
    margin-left: 10px; font-size: 14px;
}

#apptop {        
    height: 40px;
    background-color: white;
    border-bottom: 1px solid lightgray;
}
#apptopline{
    display: flex; align-items: center; height: 40px;
    border-bottom: 1px solid white;
}
#appsalon {     
    margin-left: 20px;
    height: 25px; 
}
.appdate{
    background-color: #e5e5e5;
    height: 30px; line-height: 30px;
    text-align: center;
    width: 150px;
    margin: 0 20px 0 20px;
}
.apptoptitle {
    margin-left: 50px;
    font-size: 13px;
    height: 40px; line-height: 40px; 
}
.app-option { 
    height: 30px; line-height: 30px; 
    margin: 0 20px 0 10px;
}
.apptopbutton {
    cursor: pointer;
    height: 30px; line-height: 30px; 
    padding: 0 15px 0 15px; font-size: 13px;
    color: white;
}
.app-newapp {
    margin-left: 100px;
    font-weight: 600;
    color: #006187;
}
.app-newbill {
    margin-left: 20px;   
    background-color: #09aa25;
}
.apps-unac {
    width: 280px;
    height: 800px;
    overflow-y: scroll;
    position: relative;overflow-y: auto;
}
.apps-unac-title {
    height: 30px; line-height: 30px;
    background-color: #2d3131; color: white;
    text-align: center;
}
.appTime{
    background-color: white;
    width: 300px;     
    height: 800px;
    overflow-y: auto;
    z-index: 2;
}
#appview {     
    overflow-x: scroll;
    overflow-y: auto;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    height: 800px;
    width: 1370px;
    position: relative;
}

.app_line { 
    position: relative;
    display: flex; height: 50px; 
    border-bottom: 1px solid lightgray;    
    padding-top: 5px;
}
.app_line, .app_line_head { 
    width: 3200px;
}
.app_line_head {     
    background-color: #2d3131; color: white;
    height: auto !important;
    min-height: 30px;
    display: flex; height: 50px; 
    border-bottom: 1px solid lightgray;
}
.app_line_head_ghost {     
    position: absolute;
    background-color: #e5e5e5; color: black;
    opacity: 0.7;        
    min-height: 30px;
    height: 30px; 
    display: flex; 
    height: auto !important;
}
.app_line_head_ghost .app_hour { 
    text-align: right !important;
}
.aline_staff_ghost { 
    position: absolute;    
    background-color: white;
    opacity: 0.6; 
    z-index: 5;
    height: 100%;
    color: #006187; font-weight: 600;
    border-right: none !important;
}
.aline_staff, .aline_title, .aline_staff_ghost {
    min-width: 125px; max-width: 125px;
    white-space: nowrap; overflow: hidden;
    padding-right: 10px;
    border-right: 1px solid lightgray;
    font-size: 13px;
    display: flex; align-items: center; justify-content: flex-end;
}
.aline_title {   
    height: 30px; line-height: 30px;
}
.app_line_head .app_hour {
    height: 30px; line-height: 30px; text-align: center !important;
    display: block;
}
#app-refresh{ 
    height: 20px; margin: 20px; 
    cursor: pointer;
}

.app-show { 
    z-index: 6;
    display: none;
    position: absolute;
    top: 200px;
    left: 400px;
    min-height: 200px; 
    padding: 10px;
    width: 1200px; 
    background-color: #e5e5e5;
    border-radius: 10px;
    background-color: #64c466;
    opacity: 0.9;
}
.app-drag-desc { 
    font-size: 13px; font-weight: 600;
    top: 3px; left: 3px;
}
#app-show-top { 
    display: flex;     
}
.app-show-close {
    color: white;
    position: absolute;
    right: 5px; 
    top: 5px;
    cursor: pointer;
    background-color: white;
    width: 30px; height: 30px; line-height: 30px;
    border-radius: 50%;
    font-size: 17px; color: black; font-weight: 600;
    text-align: center;
}
.app-show-client{
    margin: 20px;
}
.app-show-client-title {
    font-size: 13px;
}
.clientMeta-blacklist{
    color: #006187;
    font-size: 13px; 
    margin-left: 10px;
    height: 30px; line-height: 30px;
    cursor: pointer;
}
.clientMeta-blacklist:hover { 
    text-decoration: underline;
}
.app-show-submit {
    display: flex;
    margin: 20px auto 0 20px;
    height: 25px;
    line-height: 25px;
    width: 700px;
}
.app-show-update, .app-show-save { 
    text-align: center;
    cursor: pointer; font-size: 13px;
    padding-left: 10px; padding-right: 10px;
    background-color: #006c5b; color: white;
}
.app-show-cancel, .app-show-jobcard, .app-show-sendsms {
    margin-left: 30px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #e67575;
}
.app-show-sendsms {
    color: white;
    background-color: #2d3131 !important;
}
    .app-show-jobcard{ 
        color: white;
        background-color: #006187 !important;
    }
    .app-show-newservice {
        display: flex;
        height: 40px;
        align-items: center;
        font-size: 13px;
    }
.app-show-servicesearch {
    margin-left: 10px; background-color: #e5e5e5;
    height: 25px; line-height: 25px; text-align: center;
    width: 200px;
}
.app-show-confirm { 
    margin: 0 20px 0 20px;
    display: none;
    font-size: 12px; font-weight: 400;
}
.app-show-client-list {
    background-color: white;
    margin-top: 10px;
    height: 170px;
    width: 800px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.app-show-client-list-none { 
    font-size: 14px; text-align: center; color: #006187;
}
.app-show-client-list-item { 
    display: flex; align-items: center;
    height: 30px; border-bottom: 1px solid lightgray;
    font-size: 11px; 
}
.app-show-client-list-item-time {
    width: 100px; 
    padding-left: 5px; white-space: nowrap;
}
.app-show-client-list-item-salon {
    padding-left: 10px;
    width: 250px; white-space: nowrap; overflow: hidden
}
.app-show-client-list-item-name {
    padding-left: 10px;
    width: 300px; white-space: nowrap; overflow: hidden
}
.app-show-client-list-item-staff {
    width: 750px;    
    padding-left: 10px;
}
.app-show-time {     
    width: 100px;
    font-size: 13px;
    text-align: center;
}

#app-show-searchclient { 
    height: 30px; line-height: 30px; 
    margin: 0px 0 0px 20px;
    width: 150px;
    text-align: center;
}
.app-show-name {
    font-size: 22px;    
    padding-left: 20px; 
    color: #006187;
    white-space: nowrap;
    overflow: hidden;
}
.app-show-number {     
    font-size: 16px;
    height: 30px; line-height: 30px; padding-left: 20px;
}
.app-show-date {
    text-align: center;
    height: 25px; line-height: 25px;
    margin-left: 20px;
    width: 150px;
}
.app-show-notes{ 
    margin-top: 10px;
    margin-left: 20px;
    background-color: white;
    width: 130px; 
    padding: 10px;
    height: 72px;
    font-size: 11px;
    color: black;
    font-family: 'Montserrat';
    resize: none;
    border: none;
}
.app-show-services{ 
    background-color: white;
    padding: 10px;
    margin-left: 20px;
}
.app-show-service-head { 
    font-weight: 600;
}
.app-show-service, .app-show-service-head {
    height: 30px; line-height: 30px; 
    border-bottom: 1px solid lightgray;   
    position: relative;
    display: flex; justify-content: flex-start; align-items: center;
}
.app-show-service-name{
    font-size: 13px;
    min-width: 300px; max-width: 300px;
    white-space: nowrap; overflow: hidden;
}
.app-show-service-duration {
    text-align: center;
    width: 150px; font-size: 13px;
}
.app-show-service-staff {
    width: 150px;
    font-size: 13px;
    text-align: center;    
}
.app-show-service-delete {
    cursor: pointer;
    height: 20px; 
    position: absolute; right: 10px;
}
.app-show-service .app-show-service-staff {
    background-color: #e5e5e5;
}
.app-show-service .app-show-time {
    background-color: #e5e5e5;
}
.appitem {    
    cursor: pointer;
    width: 180px;
    padding: 20px 10px 5px 10px;
    background-color: #4d8bac; color: white;    
    border-radius: 5px;    
    margin: 10px auto;
    position: relative;
    font-size: 13px;
    transition-duration: 0.8s;
}
.appItemImg { 
    height: 30px; 
    position: absolute;
    right: 5px; bottom: 5px;
}
.appitem:hover { 
    background-color: gray;
}
.appitem-time { 
    position: absolute;
    right: 5px; top: 5px; 
    font-size: 12px; font-weight: 600;
    color: #a9f5c1;
}
.app_hour {    
    display: flex; 
    min-width: 200px;
    max-width: 200px;
    text-align: center;
    height: 100%;
    border-right: 1px solid lightgray;
    position: relative;
}
.app-hour-inside, .app-hour-inside4 {
    border-right: 1px dashed lightgray;    
    width: 50px;
    top: 0px;    
}
.app-hour-inside4 {
    border-right: none !important;
}
.appitemsmall, .appitemsmall-bill {   
    z-index: 1;
    top: 0px;left: 0px;
    position: absolute;
    font-size: 11px;           
    text-align: left; height: 20px; line-height: 20px;    
    white-space: nowrap; overflow: hidden;        
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    padding-left: 5px; padding-right: 5px;     
    background-color: white;    
}
.app-show-closed { 
    height: 20px; width: 20px; 
    cursor: pointer;
    margin-right: 5px; 
}
.app-show-closed-title { 
    font-size: 13px; 
}

.uploadbutton{ 
    height: 30px; line-height: 30px; 
    background-color: #006187; color: white;
    text-align: center; cursor: pointer;
    width: 150px; 
    font-size: 13px;
    margin: 20px;
}

.uploadbox{ 
    position: absolute;     
    width: 400px;     
    padding: 30px;
    border: 1px solid lightgray;
    border-radius: 15px; 
    background-color: #e5e5e5;
    margin: 150px;
    z-index: 103;
}
.uploadbox-close { 
    position: absolute; 
    top: 5px; right: 5px;
    cursor: pointer;
    height: 20px; width: 20px;
    text-align: center;
    line-height: 20px;
    background-color: #2d3131;
    color: white;
    font-size: 13px;
    border-radius: 50%;
}
.uploadbox-servicedownload { 
    width: 200px; 
    background-color: #2d3131;
    color: white;
    font-size: 13px; 
    text-align:center;
    height: 30px; line-height: 30px;
    margin: 20px auto;
    cursor: pointer;
    border-radius: 10px;
}

.upladbox-fileinput { 
    position: absolute;
    left: 10px;
    text-align: left;
    opacity: 0;
    width: 200px; 
    height: 30px; line-height:30px;
}
.uploadbox-serviceupload{ 
    left: 130px;
    text-align: center;
    position: absolute;
    width: 200px; 
    border-radius: 10px;
    font-size: 13px; 
    height: 30px; line-height:30px;
    background-color: lightgreen;
}
.uploadbox-inputname{ 
    margin-top: 80px; 
    text-align: center;
    margin-bottom: 10px; 
    font-size: 13px;
}
.uploadbox-status{ 
    text-align: center;
    margin-top: 10px;
    font-size: 12px;    
}
.uploadbox-save { 
    background-color: #006187;
    color: white;
    width: 100px;
    height: 30px; line-height: 30px;
    text-align: center;
    cursor: pointer;
    margin: 20px auto;
    border-radius: 10px;
}
.uploadbox-text{ 
    font-size: 13px; 
    height: 30px; 
    color: #006187;
}