.var_item {
    display: flex;
    padding-right: 25px;
    align-items: center;
}
.var_item p{
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.mblabel {
    font-size: 18px;
    padding-bottom: 4px;
    display: block;
}

/* .var_item p:nth-child(2){
    color: #777676;
} */
.indaddflexcon{
    position: relative;
}
.indaddflexcon button{
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0px;
}
.actionscon button svg, .actionscon a svg{
    width: 20px;
    height: auto;
    display: block;
}
.inditems button.approve_client svg{
    margin-right: 10px;
}
.inditems .actionscon{
    display: flex;
    align-items: center;
}
/* .client_settings{
    right: 0px;
    width: auto;
}
.client_approve{
    right: -3px;
    top: -27px;
    width: auto !important;
}
.client_remove, .client_only_remove{
    width: auto !important;
    right: 0px;
    top: 4px
} */
.variable_name{
    word-break: break-all;
}
.variable_description{
    width: 100%;
}
.adminmain h4{
    font-size: 18px;
}
.variable_value, .variable_value_new{
    display: flex;
    width: 129px;
    flex-shrink: 0;
}
.adminmain .variable_value input{
    background-color: rgba(233, 122, 134, 0.3);
}

.adminmain .mbovelemcon .mbovelemh:not(:last-of-type){
    border-bottom: 1px solid #000000;
}
#customers .inditem span.client_settings{
    width: 22px;
    margin-top: 4px;
    height: 22px;
}
#customers .inditem span.client_transfer{
    margin-left: 10px;
    width: 22px;
    margin-top: 4px;
    line-height: normal;
}
#customers .inditem span.client_transfer svg{
    margin-top: 2px;
}

.offheaders{
    display: flex;
    border-bottom: 1px solid #000000;
}
.offheaders h4{
    font-size: 16px;
    /* width: 25%; */
}
#offers .offone, #customers .offone, #plannings .offone{
    width: calc(50% - 10px);
    margin-right: 20px;
    display: flex;
    flex-shrink: 0;
}
#offers .offone h4, #offers .offone span, #customers .offone h4, #customers .offone span, #plannings .offone h4, #plannings .offone span{
    width: 50%;
    flex-shrink: 0;
}
#offers .offother, #customers .custother, #plannings .custother{
    width: 100%;
}
/* #customers .offheaders h4, {
    width: 33%;
} */
#offers .inditem:not(:last-of-type), #customers .inditem:not(:last-of-type), #plannings .inditem:not(:last-of-type){
    border-bottom: 1px solid;
}
/* #offers .inditem{
    padding: 10px;
} */
#offers .inditem span, #customers .inditem span, #plannings .inditem span{
    /* width: 25%; */
    display: block;
}
#offers .contents h4, #customers .contents h4, #plannings .contents h4{
    font-size: 16px;
    line-height: normal;
}
#customers .client_name, #customers .estimate_project_name, #offers .estimate_project_name, #planningsind .planning_project_name, #offers .estimate_eID{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#customers .indactive .client_name, #customers .indactive .estimate_project_name, #offers .indactive .estimate_project_name, #planningsind .indactive .planning_project_name, #offers .indactive .estimate_eID{
    white-space: pre-wrap;
}
/* #customers .indmain span{
    width: 33%;
} */
#offers .indadd .contents, #customers .indadd .contents, #plannings .indadd .contents{
    display: flex;
}
#offers .indadd .rightcolumn, #customers .indadd .rightcolumn, #plannings .indadd .rightcolumn{
    width: calc(50% - 10px);
    margin-right: 20px;
    flex-shrink: 0;
}
.indmain{
    position: relative;
    width: 100%;
}
.indmain .estimate_project_name, #customers .client_name{
    padding-right: 20px;
    /* width: calc(25% - 20px) !important; */
}
.indmain, .indadd .indaddflexcon{
    display: flex;
    align-items: flex-start;
}
.adminmain .inditem span.indexpand{
    position: absolute;
    right: 30px;
    top:5px;
    width: 20px !important;
    cursor: pointer;
}

#admintests{
    text-align: center;
}
#offersind, #customersind {
    height: 850px;
    overflow-y: auto;
}

.showAllAccountscon{
    text-align: right;
}
.mbovelemh{
    cursor: pointer;
}

.offheaders, .indmain, .contents{
    padding-right: 30px;
}
.item_container .indmain{
    width: auto;
}
#offers h4, #customers h4, #plannings h4{
    margin:0px;
    line-height: 30px;
}
#offers span, #customers span, #plannings span{
    line-height: 31.5px;
}
#offers .inditem:nth-of-type(even), #customers .inditem:nth-of-type(even), #plannings .inditem:nth-of-type(even){
    background-color: rgba(230, 230, 230, 0.90);
}
#offers .inditem:nth-of-type(odd), #customers .inditem:nth-of-type(odd), #plannings .inditem:nth-of-type(odd){
    background-color: rgb(209, 207, 207);
}
#customers .client_email{
    word-break: break-all;
}
.offsearch{
    text-align: right;
}
.showEstimate .cls-1{
    /* stroke: rgba(72, 182, 225, 1); */
}
.showEstimateCon{
    width: auto !important;
    right: 0;
}
.inditems button{
    background-color: transparent;
    border: none;
    padding: 0px;
    cursor: pointer;
}
.showEstimateCon svg{
    width: 20px;
    height: auto;
    display: block;
}
.mbel .offsearch .mbinput{
    width: 100%;
    margin-right: 10px;
}
.mbel .offsearch .mbinput#showCount{
    width: 70px;
}
/* .mbbutton#showMore{
    width: 40px;
} */
.showmorecon{
    text-align: right;
    margin-top: 10px;
}
/* .mbinput#user_id{
    width: 174px;
} */
.offsrightcon label{
    margin-right: 10px;
}
.offsearch{
    display: flex;
    justify-content: space-between;
}
.offsearchright{
    width: 100%;
}
.offsrightcon{
    display: flex;
    align-items:center;
    justify-content: space-between;
    width: 100%;
}

.offsearch #type_find_offer, .offsearch #type_find_client, .offsearch #type_find_planning{
    width: 100%;
    min-width: 150px;
    margin-right: 10px;
}
#showAllOffers, #showAllAccounts{
    margin-top: 15px;
}
.mberror{
    display: block;
    color: rgba(72, 182, 225, 1);
    margin-top: 10px;
}
.inditem.indactive{
    background-color: rgba(230, 230, 230, 0.90);
}
.inditem.indactive .indadd{
    display: block;
}
.inditem.indactive .hide{
    display: block;
}
.inditem.indactive .show{
    display: none;
}
.inditem .show{
    display: block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
#planningsind .inditem .show.received{
    background-color: #EA2027;
}
#planningsind .inditem .show.pending{
    background-color: #fff200;
}
#planningsind .inditem .show.done{
    background-color: #4cd137;
}
.inditem .indadd{
    display: none;
}
/* Approve Customer */
.delcmname{
    font-weight: 600;
}
.mbapprovepopup .input-checkbox .input-checkbox-text{
    padding-left: 40px;
}
.mbapprovepopup .input-checkbox .input-checkbox-placeholder{
    right: initial;
    left: 0px;
    top: 0;
}
.mbapprovepopup .input-checkbox{
    margin-top: 20px;
}
.mbapprovepopup .mbbutton{
    display: block;
    margin-top: 20px;
    margin-left: auto;
}
.mbapproveheadl{
    font-weight: 600;
    font-size: 20px;
}
.popupclose{
    width: 25px;
    height: 18px;
    cursor: pointer;
    z-index: 99;
    position: absolute;
    top: 20px;
    right: 20px;
}
.popupclose span{
    display: block;
    position: relative;
    height: 2px;
    width: 100%;
    background-color: #000000;
    border-radius: 2px;
    opacity: 1;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}
.popupclose span:nth-child(1){
    top: 8px;
    background-color: rgb(166, 166, 166);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
.popupclose span:nth-child(2){
    margin-left: -20px;
    opacity: 0;
}
.popupclose span:nth-child(3){
    top: 4px;
    background-color: rgb(166, 166, 166);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.mbcnew{
    display: block !important;
}
.mbcnew .mbinput{
    display: block !important;
    width: 174px !important;
    margin-top: 0px;
}
/* Admin Vars*/

/* Formula */
.formexpand svg{
    width: 20px;
    height: auto;
    display: block;
    cursor: pointer;
}
.formexpand .hide{
    display: none;
}
.formelmain{
    display: flex;
    align-items: center;
}
.formel.formexpnd .show{
    display: none;
}
.formel.formexpnd .hide{
    display: block;
}
.formelrest{
    display: none;
    margin-top: 0px;
}
.formelrest p{
    margin: 0px;
    display: flex;
}
.formelrest .var_spacer{
    width: 30px;
    display: block;
}
.formelrest p:last-of-type{
    margin-bottom: 0px;
}
.formelmain{
    display: flex;
    justify-content: space-between;
    padding-right: 30px;
}
.formelmain span{
    margin-left: 10px;
    cursor: pointer;
}
.formel h5{
    font-size: 16px;
    margin: 0;
    line-height: 31px;
}
.formel {
    /* background: rgba(72, 182, 225, 0.60); */
    border-bottom: 1px solid #000000;
}
.adminmain .mbinput.mbsmallin{
    width: 76px;
    margin-right: 3px;
}

#content{
    height: 850px;
    overflow-y: auto;
}
.var_actions{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 20px;
    text-align: right;
}
.var_actions span{
    display: block;
    text-align: left;
    margin-top: 10px;
}
.var_actions .mbcnew{
    margin-right: 20px;
}
.var_container .varSubmitNew{
    background-color: rgba(72, 182, 225, 0.60);
    margin-right: 20px;
}
.var_container .varSubmit, .var_container .varSubmit:hover{
    background-color: rgba(233, 122, 134, 0.6) !important;
}
.var_container .varSubmit:hover{
    border-color: rgba(233, 122, 134, 0.6) !important;
}
.var_container .mbinput:not(:last-of-type){
    margin-left: 15px;
}
.var_container .mbflex{
    align-items: stretch;
    justify-content: flex-end;
}
.var_actions{
    text-align: right;
}
.iteamheadcon{
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    /* padding: 10px 0; */
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.iteamheadcon h3{
    padding-bottom: 0px;
}
.iteamheadcon svg{
    width: 20px;
    height: auto;
    display: block;
    cursor: pointer;
    margin-right: 30px;
}
.iteamheadcon svg.show{
    display: none;
}
.iteamheadcon svg.hide{
    display: block;
}
.itemcon.varhidden svg.show{
    display: block;
}
.itemcon.varhidden .indcontents{
    display: none;
}
.itemcon.varhidden svg.hide{
    display: none;
}
#content .iteamheadcon h3{
    margin: 0px;
    font-size: 16px;
    display: flex;
}
.itemcon h4{
    margin: 0px;
    width: 100%;
    margin-right: 20px;
    flex-shrink: 0;
    border-bottom: 1px solid;
    line-height: 31px;
    font-size: 16px;
}
.itemcon .var_item{
    line-height: 31px;
}
.variable_unit{
    line-height: normal;
}
.itemcon .var_item p{
    margin: 0px;
}
.itemcon .var_item:not(:last-of-type){
    border-bottom: 1px solid #000000;
}
.itemcon:not(:last-of-type).varhidden .iteamheadcon{
    border-bottom: 0px;
}
#content .itemcon:nth-of-type(odd) .iteamheadcon{
    background-color: rgb(209, 207, 207);
}
#content .itemcon:nth-of-type(even) .iteamheadcon{
    background-color: rgba(230, 230, 230, 0.90);
}
span.mbihcletter {
    width: 20px;
    display: block;
}







/* Datepicker */
.ui-datepicker{
    background-color: #ffffff;
    border: 2px solid rgb(166, 166, 166);
    padding: 20px;
    margin-top: 20px;
    margin-left: -15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.ui-datepicker-title{
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
    margin-top: 10px;
    font-size: 19px;
}
.ui-datepicker-calendar{
    border-collapse: collapse;
}
.ui-datepicker-calendar td{
    text-align: center;
    border: 1px solid #000000;
    transition: .1s ease-in-out;
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -ms-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
}
.ui-datepicker-calendar td a{
    color: #000000;
    padding: 5px;
    
}
.ui-datepicker-calendar td:hover{
    background-color: rgba(72, 182, 225, 0.30);
}
.ui-datepicker-calendar td.ui-datepicker-week-end a{
    color: rgba(233, 122, 134, 0.6)
}
.ui-datepicker-calendar td.ui-datepicker-current-day{
    background-color: rgba(72, 182, 225, 0.60);
}
.ui-datepicker-calendar td a.ui-state-active{
    color: #000000;
}
.ui-datepicker-prev, .ui-datepicker-next{
    cursor: pointer;
    user-select: none;
    color: rgba(72, 182, 225, 0.60)
}
.ui-datepicker-next{
    float: right;
}


.deleteEstcon .cls-1{
    fill: #000000;
    stroke-width: 0px;
}

.mbsort{
    cursor: pointer;
    position: relative;
    width: 100%;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}
.mbsort::after{
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    right: 0px;
    background-size: contain;
    top: 50%;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
}