:root {
    --main-color: #FF5757; /* Define your main color here */
}

.toggle.ios, .toggle-on.ios, .toggle-off.ios {
    border-radius: 20px;
}

.toggle.ios .toggle-handle {
    border-radius: 20px;
}

.webbgcolor {
    background-color: var(--main-color) !important;
}

.ficon:hover {

    opacity: .5;
}

.icon {
    color: #a1aeab !important;
}

/*active color*/
.a-color {
    color: var(--main-color) !important;
}

/*non active color*/
.non-a-color {
    color: black !important;
}

/*.main-header {*/
/*    visibility: hidden;*/
/*!important;*/
/*}*/

body {
    background: #f6ffff !important;
}

.content-wrapper {
    padding-top: 20px;
    margin-top: 0px !important;
    background: #f6ffff !important;
}

.main-sidebar {
    background-color: #fffff7 !important;
    border-right: 1px solid #e5f2ef;
}

/*@media screen and (max-width: 992px) {*/
/*    .main-header {*/
/*        visibility: visible;*/
/*    !important;*/
/*    }*/

/*    .content-wrapper {*/
/*        margin-top: calc(3.5rem + 1px) !important;*/
/*    }*/
/*}*/

.content-wrapper {
    margin-top: calc(3.5rem + 1px) !important;
}

/* Three column layout */
.side {
    text-align: center;
    width: 12%;
    margin-top: 10px;
}

.middle {
    margin-top: 18px;
    float: left;
    width: 76%;
}

/* Place text to the right */
.right {
    text-align: center;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The bar container */
.bar-container {
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    color: white;
}

/* Individual bars */
.bar-5 {
    width: 60%;
    height: 10px;
    background-color: #04AA6D;
}

.bar-4 {
    width: 30%;
    height: 10px;
    background-color: #2196F3;
}

.bar-3 {
    width: 10%;
    height: 10px;
    background-color: #00bcd4;
}

.bar-2 {
    width: 4%;
    height: 10px;
    background-color: #ff9800;
}

.bar-1 {
    width: 15%;
    height: 10px;
    background-color: #f44336;
}

/*scroll bar color*/
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background-color: var(--main-color);
}

.os-theme-light > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
    background-color: var(--main-color);

}