/**
 * Common
 */
body {
    background-color: #f9f9f9;
}
body.overlay:after {
    background: rgba(191, 191, 191, 0.8);
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
}
p {
    margin-bottom:5px;
}
a {
    color: #1cbbb9;
}
.form-group {
    width: 100%;
}
.form-control {
    /* margin-bottom: 5px; */
}
.side-bar {
    min-height: 94vh;
    background: #ffffff;
    padding: 0;
    /* border-right: 1px solid lightgrey; */
    position: relative;
    z-index: 1;
    top: 60px;
    max-width: 360px;
}
ul.cf-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
}
li.cf-menu-item a {
    background: #ffffff;
    padding: 10px 20px;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #212529;
    font-weight: 400;
}
.navbar {
    box-shadow: 0;
    /* border-bottom: 1px solid #c7c7c778; */
}
.bg-light {
    background-color: #ffffff!important;
}
li.cf-menu-item a.active {
    font-weight: 700;
    /* border-right: 5px solid #1cbbb9; */
    background: #ebebeb;
}
li.cf-menu-item a:hover {
    background: #ebebeb;
    /* transition: .2s; */
}
.btn-primary {
    color: #fff;
    background-color: #1cbbb9;
    border-color: #1cbbb9;
    min-width: 200px;
}
.btn-primary:hover {
    color: #fff;
    background-color: #18a09e;
    border-color: #18a09e;
}
.btn-check:focus+.btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: #1cbbb9;
    border-color: #1cbbb9;
    box-shadow: 0 0 0 0.25rem rgb(254 110 75 / 28%);
}
.color-display {
    height: 24px;
    width: 100px;
    display: inline-block;
    border-radius: 15px;
    position: relative;
    top: 4px;
    border: 1px solid #212529;
    float: left;
}
.content-holder {
    padding: 40px;
    /* max-height: 100vh; */
    /* overflow-y: scroll; */
    margin: 20px;
    box-shadow: 0 0 10px 3px #ebebeb;
    box-shadow: var(--p-card-shadow,0 0 0 1px rgba(63,63,68,.05),0 1px 3px 0 rgba(63,63,68,.15));
    border-radius: 10px;
    background-color: #ffffff;
    margin: 100px 10px 0 10px;
    position: relative;
}
.toner-row {
    /* float: left; */
    /* width: 100%; */
    /* margin-bottom: 0px; */
}
.toner-name {
    /* padding: 17px; */
    /* background: white; */
    /* display: inline-block; */
    /* line-height: 1; */
    /* min-width: 370px; */
    font-size: 18px;
}
.toner-row .actions {
    float: right;
    padding: 17px;
}
.toner-quantity {
    /* display: inline-block; */
}
.content-holder.popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 750px;
    z-index: 12;
    margin: 0;
    max-height: 90vh;
    overflow-y: auto;
}
span.close-pop {
    font-size: 40px;
    position: absolute;
    top: -11px;
    right: 0px;
    opacity: .5;
    cursor: pointer;
}
span.close-pop:hover {
    opacity: 1;
}
.text-right.print-formula img {
    cursor: pointer;
    opacity: .8;
}
.text-right.print-formula img:hover {
    opacity: 1;
}
/* i {
    color: #1cbbb9;
    font-size: 17px;
} */
ul.cf-menu i {
    color: #212529;
}
form.reset-form,
form.forgot-form,
form.login-form,
form.signup-form {
    background: white;
    padding: 30px;
    box-shadow: var(--p-card-shadow,0 0 0 1px rgba(63,63,68,.05),0 1px 3px 0 rgba(63,63,68,.15));
    border-radius: 10px;
}
input[type="text"]:focus-visible {
    outline: 0;
}
p.info {
    background: rgb(225 200 6 / 14%);
    border-left: 4px solid #1cbbb9;
    padding: 20px;
    margin: 20px 0 0;
    font-size: 20px;
    font-weight: 500;
}
ul.filters {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.filters li {
    display: inline-block;
    margin-right: 5px;
}
ul.filters li label {
    margin: 0;
}
.all-actions a {
    cursor: pointer!important;
}
a.disabled-action {
    color: #c5c5c5;
    pointer-events: none;
}
input.form-control.price,
input.form-control.percentage {
    display: inline-block;
    /* width: 70px; */
    background: 0;
    padding-left: 0px;
}

.ent-ounce {
    display: none;
}
span.account-types {
    background: #212529;
    display: inline-block;
    padding: 3px 20px;
    border-radius: 15px;
    color: white;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 14px;
}
p.text-center.text-muted.version-info {
    margin: 20px 0;
}
.account-information {
    right: 20px;
    top: 43px;
    position: absolute;
}
.search-holder {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 500px;
}
.page-item.active .page-link {
    background-color: #1cbbb9;
    border-color: #1cbbb9;
}
.page-link {
    color: #1cbbb9;
}

ul.dash-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.dash-menu li {
    display: inline-block;
    /* background: rebeccapurple; */
    /* padding: 10px; */
    min-width: 220px;
    /* min-height: 200px; */
    margin: 0 10px 10px 0;
    text-align: center;
}
ul.dash-menu li a {
    background: #f4f6f8;
    display: block;
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    color: #000000;
    font-size: 15px;
    font-weight: 500;
    /*border: 1px solid #d4d4d4;*/
    text-decoration: none;
    transition: 200ms;
    box-shadow: 0 3px 5px #eaeaea;
    background-color: #ffffff;
    box-shadow: var(--p-card-shadow,0 0px 2px 1px rgba(63,63,68,0.09),1px 2px 4px 0 rgba(63,63,68,.15));
    border-radius: 10px;
    box-shadow: rgb(156 154 154 / 40%) 0px 0px 3px, rgb(0 0 0 / 30%) 0px 3px 7px -3px, rgb(132 128 128 / 20%) 0px -3px 0px inset
}
ul.dash-menu li a:hover {
    color: #ffffff;
    transition: 200ms;
    background: #1cbbb9;
    border-color: #1cbbb9;
}
ul.dash-menu li a:hover img {
    filter: invert(1);
    transition: 200ms;

}
span.dash-menu-ti {
    display: block;
    margin-top: 20px;
}


/* Mobile */
@media only screen and (max-width: 600px) {
    li.cf-menu-item {
        height: 60px;
        width: 60px;
    }
    ul.cf-menu span {
        display: none;
    }
    li.cf-menu-item a {
        height: 60px;
        width: 65px;
        text-align: center;
    }
    .content-holder {
        padding: 20px;
        overflow: scroll;
        font-size: 12px;
    }
    .account-information {
        position: relative;
        text-align: center;
        top: initial;
        right: initial;
    }
    .search-holder {
        position: relative;
        top: -15px;
        left: 0;
        transform: none;
    }
    .content-holder.popup {
        min-width: 100%;
    }
    .formula-holder h4 {
        text-align: center;
    }
    h4.account-dtl {
        font-size: 16px;
    }
    .no-mobile {
        display: none;
    }
    h4.module-heading {
        font-size: 16px;
    }
    .table td {
        padding: 2px;
    }
    span.account-types {
        background: #212529;
        display: inline-block;
        padding: 3px 8px;
        border-radius: 15px;
        color: white;
        margin-right: 5px;
        margin-bottom: 2px;
        font-size: 11px;
    }
    button#create {
        padding: 5px 10px;
        min-width: auto;
        top: -55px!important;
        right: 5px!important;
    }
    form#cc-form label {
        margin: 3px 0 0 0;
    }
    form#toner-add label,
    form#edit-toner label {
        margin: 0;
    }
    form#toner-add .mb-3,
    form#edit-toner .mb-3 {
        margin: 3px!important;
    }
    td.toner-name {
        font-size: 12px;
    }
    ul.dash-menu li {
        width: 100%;
    }
    ul.dash-menu li a {
        padding: 10px 20px;
    }
    .paint-holder h4 {
        text-align: center;
        margin-top: 10px;
        font-size: 20px;
    }
    .formula-holder h4 {
        font-size: 20px;
        margin-top: 10px;
    }
}
ul.size-chart-wrap {
    padding: 0 15px;
}
ul.size-chart-wrap b {
    width: 60px;
    display: inline-block;
}

.pace .pace-progress {
    background: #000000!important;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 5px!important;
}
ul#pt-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}