/*------------------------------------*\
    S4BT Counter
\*------------------------------------*/
.webix_view.webix_control.webix_el_s4btcounter.s4bt_counterHeight36{
    width: auto;
    height: 64px;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin-left: 0px !important;
}
.s4bt_counterHeight36 .webix_inp_top_label{
    display: block;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left;
}
.s4bt_counterHeight36Log .webix_inp_top_label{
    display: block;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 5px 3px !important;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left;
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_inp_counter_value {
    width: auto;
    background: #ffffff;
    border: 1px solid #dadee3 !important;
    border-right: none !important;
    border-left: none !important;
    font-family: 'Rubik';
    border-color: #cccccc;
    box-shadow: inset 0 2px 4px 0 rgba(70, 82, 93, 0.1);
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_inp_counter_prev,
.s4bt_counterHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    color: #9ea7b3 !important;
    background-color:#f0f2f4;
    width: 29px;
    color: #cad1d8;
    font-size: 15px;
    padding: auto 6px;
    font-family: 'Rubik';
    outline: none;
    font-weight: bold;
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_inp_counter_prev,
.s4bt_counterHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    width: 32px;
    border: 1px solid #dadee3;
    border-bottom: 1px solid #dadee3;
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_inp_counter_prev{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

/* Readonly Mobile */
.webix_view.webix_control.webix_el_s4btcounter.s4bt_counterHeight36ReadonlyMobile{
    width: auto;
    height: 64px;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin-left: 0px !important;
}
.s4bt_counterHeight36ReadonlyMobile .webix_inp_top_label{
    display: block;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left;
}
.s4bt_counterHeight36ReadonlyMobile.webix_el_s4btcounter .webix_inp_counter_value {
    width: auto;
    background: #ffffff;
    border: 1px solid #dadee3 !important;
    border-right: none !important;
    border-left: none !important;
    font-family: 'Rubik';
    border-color: #cccccc;
    box-shadow: inset 0 2px 4px 0 rgba(70, 82, 93, 0.1);
}
.s4bt_counterHeight36ReadonlyMobile.webix_el_s4btcounter .webix_inp_counter_prev,
.s4bt_counterHeight36ReadonlyMobile.webix_el_s4btcounter .webix_inp_counter_next {
    color: #9ea7b3 !important;
    background-color:#f0f2f4;
    width: 30px;
    color: #cad1d8;
    font-size: 15px;
    padding: auto 6px;
    font-family: 'Rubik';
    outline: none;
    font-weight: bold;
    border: 1px solid #dadee3 !important;
}
.s4bt_counterHeight36ReadonlyMobile.webix_el_s4btcounter .webix_inp_counter_prev,
.s4bt_counterHeight36ReadonlyMobile.webix_el_s4btcounter .webix_inp_counter_next {
    width: 30px;
    border: 1px solid #dadee3 !important;
    border-bottom: 1px solid #dadee3;
}
.s4bt_counterHeight36ReadonlyMobile.webix_el_s4btcounter .webix_inp_counter_prev{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.s4bt_counterHeight36ReadonlyMobile.webix_el_s4btcounter .webix_inp_counter_next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}


/* Readonly */
.s4bt_counterReadOnlyHeight36 .webix_el_box{
    padding: 0px !important
}
.webix_view.webix_control.webix_el_s4btcounter.s4bt_counterReadOnlyHeight36{
    width: auto;
    height: 64px;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 7px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
.s4bt_counterReadOnlyHeight36 .webix_inp_top_label{
    display: block;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left;
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_inp_counter_value {
    width: auto;
    background: #ffffff;
    border: 1px solid #dadee3 !important;
    border-right: none !important;
    border-left: none !important;
    font-family: 'Rubik';
    border-color: #cccccc;
    box-shadow: inset 0 2px 4px 0 rgba(70, 82, 93, 0.1);
}
.webix_view.webix_control.webix_el_s4btcounter.s4bt_counterReadOnlyHeight36.s4bt_counterReadOnlyHeight36Width56{
    width: auto !important;
    height: 64px;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 7px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
.s4bt_counterReadOnlyHeight36Width56 .webix_el_box{
    width: auto !important;
    height: 36px !important;
    padding: 0px !important
}
.s4bt_counterReadOnlyHeight36Width56.webix_el_s4btcounter .webix_inp_counter_value {
    width: 188px !important;
    background: #ffffff;
    border: 1px solid #dadee3 !important;
    border-right: none !important;
    border-left: none !important;
    font-family: 'Rubik';
    border-color: #cccccc;
    box-shadow: inset 0 2px 4px 0 rgba(70, 82, 93, 0.1);
}
.s4bt_counterReadOnlyHeight36Width56 .webix_el_group,
.s4bt_counterReadOnlyHeight36Width56.webix_all_segments{
    width:auto !important;
    height:36px !important;
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_inp_counter_prev,
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    color: #9ea7b3 !important;
    background-color:#f0f2f4;
    width: 29px;
    color: #cad1d8;
    font-size: 15px;
    padding: auto 6px;
    font-family: 'Rubik';
    outline: none;
    font-weight: bold;
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_inp_counter_prev,
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    width: 36px;
    border: 1px solid #dadee3;
    border-bottom: 1px solid #dadee3;
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_inp_counter_prev{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
/* Readonly Disabled */
.webix_view.webix_control.webix_el_s4btcounter.webix_disabled_view.s4bt_counterReadOnlyHeight36{
    width: auto;
    height: 64px;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
.s4bt_counterReadOnlyHeight36 .webix_inp_top_label{
    display: block;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 5px 3px !important;
    padding-bottom: 8px !important;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left;
}
.s4bt_counterReadOnlyHeight36Width56 .webix_inp_top_label{
    display: block;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left;
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_value {
    width: auto;
    background: #fff !important;
    border: 1px solid #f0f2f4 !important;
    border-right: none !important;
    border-left: none !important;
    font-family: 'Rubik';
    border-color: #f0f2f4 !important;
    color: #424548 !important
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_prev,
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_next {
    color: #cad1d8 !important;
    background-color:#f7f8f9 !important;
    width: 29px;
    font-size: 15px;
    padding: auto 6px;
    font-family: 'Rubik';
    outline: none;
    font-weight: bold;
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_prev,
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_next {
    width: 36px;
    border: 1px solid #f0f2f4;
    border-bottom: 1px solid #f0f2f4;
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_prev{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.s4bt_counterReadOnlyHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
/* Disabled */
.webix_view.webix_control.webix_el_s4btcounter.webix_disabled_view.s4bt_counterHeight36{
    width: auto;
    height: 64px;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #424548;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
.s4bt_counterHeight36 .webix_inp_top_label{
    display: block;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left;
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_value {
    width: auto;
    background: #f7f8f9 !important;
    border: 1px solid #f0f2f4 !important;
    color: #424548 !important;
    font-family: 'Rubik';
    border-right: none !important;
    border-left: none !important;
    box-shadow: none
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_value {
    width: auto;
    background: #f7f8f9 !important;
    border: 1px solid #f0f2f4 !important;
    color: #424548 !important;
    font-family: 'Rubik';
    border-right: none !important;
    border-left: none !important;
    box-shadow: none
}  
.s4bt_counterHeight36.webix_el_s4btcounter .webix_disabled_box  .webix_inp_counter_prev,
.s4bt_counterHeight36.webix_el_s4btcounter .webix_disabled_box  .webix_inp_counter_next {
    background-color:#f7f8f9 !important;
    color: #cfd5da !important;
    width: 29px;
    font-size: 15px;
    padding: auto 6px;
    font-family: 'Rubik';
    outline: none;
    font-weight: bold; 
}   
.s4bt_counterHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_prev,
.s4bt_counterHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_next {
    width: 36px;
    border: 1px solid #f0f2f4 !important;
    border-bottom: 1px solid #f0f2f4 !important;
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_prev{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.s4bt_counterHeight36.webix_el_s4btcounter .webix_disabled_box .webix_inp_counter_next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
/* Error */
.webix_view.webix_control.webix_el_s4btcounter.s4bt_counterErrorHeight36{
    width: auto;
    height: 64px;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #738596;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
.s4bt_counterErrorHeight36 .webix_inp_top_label{
    display: block;
    font-family: Rubik;
    height: auto;
    font-weight: 500;
    color: #ee5244;
    float: none;
    padding: 8px 3px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 8px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left;
}
.s4bt_counterErrorHeight36.webix_el_s4btcounter .webix_inp_counter_value {
    width: auto;
    background: #ffffff;
    font-family: 'Rubik';
    box-shadow: inset 0 2px 4px 0 rgba(238, 82, 69, 0.2) !important;
    border: solid 1px #ee5244 !important;
    border-right: none !important;
    border-left: none !important;
}
.s4bt_counterErrorHeight36.webix_el_s4btcounter .webix_inp_counter_prev,
.s4bt_counterErrorHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    color: #9ea7b3 !important;
    background-color:#fef7f6;
    width: 29px;
    color: #ee5244 !important;
    font-size: 15px;
    padding: auto 6px;
    font-family: 'Rubik';
    outline: none;
    font-weight: bold;
}
.s4bt_counterErrorHeight36.webix_el_s4btcounter .webix_inp_counter_prev,
.s4bt_counterErrorHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    width: 36px;
    border: 1px solid #ee5244;
    border-bottom: 1px solid #ee5244;
}
.s4bt_counterErrorHeight36.webix_el_s4btcounter .webix_inp_counter_prev{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.s4bt_counterErrorHeight36.webix_el_s4btcounter .webix_inp_counter_next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}