body { padding: 0; background-color: #F7F7F7; }
    body.isloading { overflow: hidden; }
    body.error-page { background: #222222; }
        body.error-page #error-container { padding: 120px 0; }
        body.error-page .text-muted { color: #999999; }
.error-image { text-align: center; }
    .error-image .error-imginner { display: table; margin: 0 auto; position: relative; }
    .error-image .error-name { font-size: 72px; color: #fff; position: absolute; /* top: 0; */ left: 0; bottom: 15%; right: 0; width: 100%; /* height: 100%; */ text-align: center; /* display: flex; */ }
    .error-image image { margin: 0 auto; }
.error-text { border-top: 8px solid #dd904a; margin-top: -18px; }
.test-circle-cs { float: right; width: 65px; height: 28px; line-height: 25px; }
.font-weightNor { font-weight: normal !important; }
.font-weight200 { font-weight: 200 !important; }
.font-weight400 { font-weight: 400 !important; }
.font-weight600 { font-weight: 600 !important; }
.config { padding: 70px 70px 0; }
.bg-w { background-color: #fff; }
.border-top { border-top: 1px solid #dbe1e8; }
.border-right { border-right: 1px solid #dbe1e8; }
.border-bottom { border-bottom: 1px solid #dbe1e8; }
.border-left { border-bottom: 1px solid #dbe1e8; }
.border-transparent { border-color: transparent !important; }
.alert { margin-top: 15px; border-radius: 0; }
.bg-grey { background: #F3F3F3; }
.box-shadow { box-shadow: none !important; }
.validate { color: #e74c3c; }
.margin-b-70 { margin-bottom: 70px; }
.Setup-config-head { margin-bottom: 70px; }
.progress { margin-bottom: 0; border-radius: 50px; }
.number-line { position: absolute; color: #333; font-size: 41px; font-weight: 100; top: 120px; right: 0; left: 0; }
/*.loading { position: relative; }*/
.loading-box { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: rgba(255,255,255,.90); display: block; z-index: 9999; display: block; overflow: hidden; }
    .loading-box .loading-inner { position: relative; display: block; width: 100%; height: 100%; }

.boxLoading { width: 50px; height: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
    .boxLoading:before { content: ''; width: 50px; height: 5px; background: #000; opacity: 0.1; position: absolute; top: 59px; left: 0; border-radius: 50%; -moz-animation: shadow .5s linear infinite; -o-animation: shadow .5s linear infinite; -webkit-animation: shadow .5s linear infinite; animation: shadow .5s linear infinite; }
    .boxLoading:after { content: ''; width: 50px; height: 50px; background: #3BA6DD; -moz-animation: animate .5s linear infinite; -o-animation: animate .5s linear infinite; -webkit-animation: animate .5s linear infinite; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; }

@keyframes animate {
    17% { border-bottom-right-radius: 3px; }
    25% { transform: translateY(9px) rotate(22.5deg); }
    50% { transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; }
    75% { transform: translateY(9px) rotate(67.5deg); }
    100% { transform: translateY(0) rotate(90deg); }
}

@keyframes shadow {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.2, 1); }
}

.slimScrollDiv, .sync-noti-process-list { height: 72px; overflow: hidden; }
#form-login .form-group { padding-left: 15px; padding-right: 15px; }
#page-container,
#sidebar,
#sidebar-alt { background: none; }

.navbar-nav-custom > .dropdown-emt { margin: 15px 5px 5px; min-height: 30px !important; }
.nav.navbar-nav-custom > li .fullscreen-toggle { padding: 5px 8px; box-shadow: none; background: none; color: #ccc; margin-top: 14px; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; border-radius: 50%; width: 42px; height: 42px; }
    .nav.navbar-nav-custom > li .fullscreen-toggle:hover,
    .nav.navbar-nav-custom > li .fullscreen-toggle:focus,
    .nav.navbar-nav-custom > li .fullscreen-toggle:active { background-color: #f1f3f6; color: #394263; }
#sidebar { background: #1f364f; padding-bottom: 200px; position: fixed; height: 100%; /*width: 90px;*/ z-index: 1000; overflow: visible; }
/*.sidebar-partial #sidebar { width: 90px; opacity: 1; }*/
.navbar-nav-custom .dropdown-emt .dropdown-toggle { border: none; border-radius: 50%; min-width: 42px; width: 42px; height: 42px; line-height: 32px; padding: 5px 8px; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; color: #ccc; }

    .navbar-nav-custom .dropdown-emt .dropdown-toggle:hover,
    .navbar-nav-custom .dropdown-emt .dropdown-toggle:focus,
    .navbar-nav-custom .dropdown-emt .dropdown-toggle:active,
    .navbar-nav-custom .dropdown-emt.open .dropdown-toggle { background-color: #f1f3f6; color: #394263; }

.navbar-nav-custom .dropdown-emt .badge { position: absolute; top: 0; right: 0; bottom: auto; left: auto; background-color: #1bbae1; width: 20px; height: 20px; display: table; align-items: center; border-radius: 50%; padding: 4px 0; font-size: 10px; }

.navbar-nav-custom .dropdown-email .badge { background-color: #27ae60; }
.navbar-nav-custom .dropdown-task .badge { background-color: #d9416c; }

.nav.navbar-nav-custom > li > a { padding-top: 10px; padding-bottom: 10px; }
    .nav.navbar-nav-custom > li.open > a, .nav.navbar-nav-custom > li > a:hover, .nav.navbar-nav-custom > li > a:focus { background-color: #f1f3f6; color: #394263; }
.dropdown-emt .dropdown-menu { min-width: 280px; /*border-color: #394263;*/ border: none; }
    .dropdown-emt .dropdown-menu > li { padding-left: 0; padding-right: 0; }
    .dropdown-emt .dropdown-menu .dropdown-header { background-color: #394263; color: #fff; font-size: 14px; border-radius: 0; padding-left: 8px; padding-right: 8px; }
    .dropdown-emt .dropdown-menu .dropdown-footer { background-color: #eaeaea; font-size: 13px; color: #9a9a9a; text-align: center; padding: 0; }
        .dropdown-emt .dropdown-menu .dropdown-footer a:hover,
        .dropdown-emt .dropdown-menu .dropdown-footer a:focus,
        .dropdown-emt .dropdown-menu .dropdown-footer a:active { background: none; color: #3BA6DD; }

.dropdown-emt .navver { margin: 0; padding: 0; }
    .dropdown-emt .navver > li { border-bottom: 1px solid #f1f3f6; padding: 10px; }
        .dropdown-emt .navver > li:hover,
        .dropdown-emt .navver > li:focus { background-color: #f1f3f6; }

.dropdown-emt .dropdown-item-inner { cursor: pointer; }
    .dropdown-emt .dropdown-item-inner .pull-left { width: 32px; height: 32px; overflow: hidden; border-radius: 50%; margin-right: 5px; background-color: skyblue; }
        .dropdown-emt .dropdown-item-inner .pull-left img { width: 100%; height: auto; }

    .dropdown-emt .dropdown-item-inner h4,
    .dropdown-emt .dropdown-item-inner p { -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; display: block; white-space: nowrap; -ms-word-break: break-word; word-break: break-word; width: 220px; margin: 0; }

.dropdown-email .dropdown-item-inner h4 { font-size: 13px; }
.nav.navbar-nav-custom > li.dropdown-account { margin: 14px 5px 0; min-height: 30px !important; }
    .nav.navbar-nav-custom > li.dropdown-account a .fa { position: absolute; bottom: 0; left: 50%; margin-left: -4px; }
.nav.navbar-nav-custom > .dropdown-account .dropdown-toggle { border: none; border-radius: 50%; min-width: 42px; width: 42px; height: 42px; line-height: 32px; padding: 5px 8px; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; color: #ccc; }
.navbar-nav-custom > .dropdown-account .dropdown-toggle > img { width: 28px; height: 28px; border: none; }

.nav.navbar-nav-custom > li.dropdown-lang > a { padding-top: 11px; padding-bottom: 11px; }
.nav.navbar-nav-custom > li.dropdown-lang > ul > li{ padding: 0; }
    .nav.navbar-nav-custom > li.dropdown-lang > ul > li.dropdown-header { padding: 8px 10px; }
.nav.navbar-nav-custom > li.dropdown-lang > ul > li > a:hover{ background-color: #f1f3f6; color: #18293d}


.sidebar-brand { height: auto; width: 100%; background: #3E76B3; text-align: center; line-height: normal; padding: 10px; }
    .sidebar-brand img { }
.sidebar-visible-lg a.sidebar-brand { }
    .sidebar-visible-lg a.sidebar-brand img { margin: 0 auto; }
.sidebar-nav { padding-top: 0; }
    .sidebar-nav li { position: relative; }
        .sidebar-nav li a { color: #9a9a9a; font-weight: 400; border-left: 5px solid transparent; border-right: 5px solid transparent; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; font-size: 14px; padding: 10px 5px 10px 10px; text-align: center; line-height: 32px; }
    .sidebar-nav a > i.nav-sub-indicator { -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; float: right; font-size: 18px; }
    .sidebar-nav a .fa,
    .sidebar-nav a .gi,
    .sidebar-nav a .hi { font-size: 28px; }
    .sidebar-nav a .nav-text { line-height: 24px; display: block; font-weight: 100; }
    .sidebar-nav li.active > a,
    .sidebar-nav a:hover { color: #ffffff; text-decoration: none; border-left-color: #3BA6DD; background-color: #18293d; }
    .sidebar-nav .sub-nav { position: absolute; left: -100%; top: 0; max-width: 240px; min-width: 140px; background-color: #18293d; visibility: hidden; opacity: 0; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; }
        .sidebar-nav .sub-nav li a { line-height: normal; text-align: left; padding-right: 20px; }
            .sidebar-nav .sub-nav li a::after { font-family: 'Glyphicons Halflings Regular'; content: "\E178"; position: absolute; right: 5px; top: 0; bottom: 0; height: 100%; display: flex; align-items: center; }
    .sidebar-nav > li:hover .sub-nav { visibility: visible; opacity: 1; left: 100%; /*display: block;*/ }

.sidebar-visible-lg .sidebar-nav a { text-align: left; }
    .sidebar-visible-lg .sidebar-nav a .fa,
    .sidebar-visible-lg .sidebar-nav a .gi,
    .sidebar-visible-lg .sidebar-nav a .hi { font-size: 18px; padding-right: 10px; }
    .sidebar-visible-lg .sidebar-nav a .nav-text { display: inline; }
.sidebar-visible-xs .sidebar-nav { }
    .sidebar-visible-xs .sidebar-nav li { text-align: left; }
        .sidebar-visible-xs .sidebar-nav li a { text-align: left; }
            .sidebar-visible-xs .sidebar-nav li a .fa,
            .sidebar-visible-xs .sidebar-nav li a .gi,
            .sidebar-visible-xs .sidebar-nav li a .hi { font-size: 18px; }
            .sidebar-visible-xs .sidebar-nav li a .nav-text { display: inline; }
section.section { background-color: #fff; margin: -21px -20px 0; padding-bottom: 20px; }
    section.section .block:last-child { margin-bottom: 0; }

    section.section .row > div > .block { border: none; }
        section.section .row > div > .block .block-title { margin-top: 0; }
/*section.section .form-group .help-block
{
    height: 24px;
    margin-bottom: 0;
}*/

.form-bordered .form-group:last-child { border: none; }

section.section .form-horizontal .form-group { margin-bottom: 8px; }

section.section-tab { margin-top: 20px; }

.section-tab .nav-tabs { background-color: #eaedf1; }

.section-tab .tab-content { padding: 0 20px 20px; }

section.section-tab .row > div > .block { padding: 0; }

.section-tab fieldset legend { padding-bottom: 5px; }
.section-tab .input-group { margin: 0; }
.section-tab fieldset .text-danger { font-size: 12px; }

/*#region sync-box */
.sync-box .sync-box-content { position: relative; }
.sync-to { margin-bottom: 20px; }
.sync-notify { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; display: block; z-index: 10; background-color: rgba(255,255,255,.95); }
    .sync-notify .sync-notify-box { text-align: center; background: none; }
        .sync-notify .sync-notify-box h4 { font-size: 24px; color: #27ae60; }
        .sync-notify .sync-notify-box p { font-size: 16px; color: #454545; }
        .sync-notify .sync-notify-box .icon-completed { width: 68px; height: 68px; border: 1px solid #27ae60; color: #27ae60; display: table; text-align: center; padding: 11px 0; border-radius: 50%; margin: 0 auto; font-size: 28px; }
    .sync-notify .sync-notify-error h4 { color: #e74c3c; }
    .sync-notify .sync-notify-error .icon-completed { color: #e74c3c; border-color: #e74c3c; }
.sync-img { width: 100%; margin: 0 auto; position: relative; text-align: center; }
.sync-img-left { text-align: left; }
.sync-img-right { text-align: right; }
    .sync-img-right img { display: inline; }
/*.sync-img img { max-width: 100%; height: auto; }*/
.sync-icon { display: table; position: relative; margin: 0 auto; width: 42px; height: 82px; }
    .sync-icon .fa { font-size: 35px; position: absolute; left: 0; top: 21px; right: 0; bottom: 0; display: table; color: #eaedf1; }
    .sync-icon.sync-one-way { }
        .sync-icon.sync-one-way .fa-long-arrow-right { visibility: visible; opacity: 1; }
        .sync-icon.sync-one-way .fa-exchange { visibility: hidden; opacity: 0; }
    .sync-icon.sync-two-way { }
        .sync-icon.sync-two-way .fa-exchange { visibility: visible; opacity: 1; }
        .sync-icon.sync-two-way .fa-long-arrow-right { visibility: hidden; opacity: 0; }

.sync-progress-bar { width: 70%; margin: 55px auto 30px; padding: 28px; }
.sync-control { margin-bottom: 20px; }
    .sync-control .sync-action-btn { max-width: 180px; margin: 0 auto; }
        .sync-control .sync-action-btn .btn { opacity: 0; visibility: hidden; height: 0; padding: 0; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; }
        .sync-control .sync-action-btn #syncstop { opacity: 1; visibility: visible; height: 45px; padding: 10px 16px; }
    .sync-control .progress { height: 20px; margin-bottom: 20px; opacity: 1; visibility: visible; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; }

.sync-control-isnotaction { }
    .sync-control-isnotaction .sync-action-current #syncdata { opacity: 1; visibility: visible; height: 40px; }
    .sync-control-isnotaction .sync-action-current #syncstop { opacity: 0; visibility: hidden; height: 0; padding: 0; }

    .sync-control-isnotaction .progress { height: 0; opacity: 0; visibility: hidden; margin-bottom: 0; }
.sync-noti-process { margin-left: -20px; margin-right: -20px; margin-bottom: -20px; }
    .sync-noti-process .title { display: block; background: #F9FAFC; border-bottom: 1px solid #bfbfbf; padding: 15px 20px; }
        .sync-noti-process .title h3 { font-size: 16px; color: #394263; margin: 0; }
    .sync-noti-process ul { list-style: none; background-color: #f6f6f6; padding: 10px 20px; box-shadow: inset 0 0 3px rgba(0,0,0,.15); margin: 0; }
        .sync-noti-process ul li { display: block; padding: 5px 0; }
            .sync-noti-process ul li p { font-size: 13px; color: #cbcbcb; }
/*#endregion */

.nav.navbar-nav-custom > li > a.btn-sider { padding: 2px 7px; margin: 15px 10px; line-height: 25px; color: #9a9a9a; border: none; min-width: 20px; background: none; box-shadow: none; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; }
    .nav.navbar-nav-custom > li > a.btn-sider:hover,
    .nav.navbar-nav-custom > li > a.btn-sider:focus,
    .nav.navbar-nav-custom > li > a.btn-sider:active { color: #005C8E; }
fieldset legend { font-size: 24px; }



/*
*
*
START // chart-loading'S RULES
 -> "if you're picking code, don't forget the variables :)"
*/
.chart-loading { font-size: 1em; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-backface-visibility: visible; backface-visibility: visible; height: 167px; }

.bar { font-size: 1em; position: relative; height: 10em; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotateX(60deg) rotateY(0deg); transform: rotateX(60deg) rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
    .bar .face { font-size: 2em; position: relative; width: 100%; height: 2em; background-color: rgba(254, 254, 254, 0.3); }
        .bar .face.side-a, .bar .face.side-b { width: 2em; }
    .bar .side-a { -webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em); transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em); }
    .bar .side-b { -webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em); transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em); position: absolute; right: 0; }
    .bar .side-0 { -webkit-transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em); transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em); }
    .bar .side-1 { -webkit-transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em); transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em); }
    .bar .top { -webkit-transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em); transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em); }
    .bar .floor { box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe; }

.growing-bar { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: rgba(236, 0, 140, 0.6); width: 100%; height: 2em; }

.bar.yellow .side-a,
.bar.yellow .growing-bar { background-color: rgba(241, 196, 15, 0.6); }
.bar.yellow .side-0 .growing-bar { box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8); }
.bar.yellow .floor .growing-bar { box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8); }

.bar.red .side-a, input[id='red']:checked ~ .chart-loading .side-a,
.bar.red .growing-bar,
input[id='red']:checked ~ .chart-loading .growing-bar { background-color: rgba(236, 0, 140, 0.6); }
.bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart-loading .side-0 .growing-bar { box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, 0.8); }
.bar.red .floor .growing-bar, input[id='red']:checked ~ .chart-loading .floor .growing-bar { box-shadow: 0em 0em 2em rgba(236, 0, 140, 0.8); }

.bar.cyan .side-a, input[id='cyan']:checked ~ .chart-loading .side-a,
.bar.cyan .growing-bar,
input[id='cyan']:checked ~ .chart-loading .growing-bar { background-color: rgba(87, 202, 244, 0.6); }
.bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart-loading .side-0 .growing-bar { box-shadow: -0.5em -1.5em 4em #57caf4; }
.bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart-loading .floor .growing-bar { box-shadow: 0em 0em 2em #57caf4; }

.bar.navy .side-a,
.bar.navy .growing-bar { background-color: rgba(10, 64, 105, 0.6); }
.bar.navy .side-0 .growing-bar { box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8); }
.bar.navy .floor .growing-bar { box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8); }

.bar.lime .side-a, input[id='lime']:checked ~ .chart-loading .side-a,
.bar.lime .growing-bar,
input[id='lime']:checked ~ .chart-loading .growing-bar { background-color: rgba(118, 201, 0, 0.6); }
.bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart-loading .side-0 .growing-bar { box-shadow: -0.5em -1.5em 4em #76c900; }
.bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart-loading .floor .growing-bar { box-shadow: 0em 0em 2em #76c900; }

.bar.white .side-a,
.bar.white .growing-bar { background-color: rgba(254, 254, 254, 0.6); }
.bar.white .side-0 .growing-bar { box-shadow: -0.5em -1.5em 4em #fefefe; }
.bar.white .floor .growing-bar { box-shadow: 0em 0em 2em #fefefe; }

.bar.gray .side-a,
.bar.gray .growing-bar { background-color: rgba(68, 68, 68, 0.6); }
.bar.gray .side-0 .growing-bar { box-shadow: -0.5em -1.5em 4em #444; }
.bar.gray .floor .growing-bar { box-shadow: 0em 0em 2em #444; }

.chart-loading .bar.yellow-face .face { background-color: rgba(241, 196, 15, 0.2); }

.chart-loading .bar.lime-face .face { background-color: rgba(118, 201, 0, 0.2); }

.chart-loading .bar.red-face .face { background-color: rgba(236, 0, 140, 0.2); }

.chart-loading .bar.navy-face .face { background-color: rgba(10, 64, 105, 0.2); }

.chart-loading .bar.cyan-face .face { background-color: rgba(87, 202, 244, 0.2); }

.chart-loading .bar.gray-face .face { background-color: rgba(68, 68, 68, 0.2); }

.chart-loading .bar.lightGray-face .face { background-color: rgba(145, 145, 145, 0.2); }

.bar-0 .growing-bar { width: 0%; }

.bar-1 .growing-bar { width: 1%; }

.bar-2 .growing-bar { width: 2%; }

.bar-3 .growing-bar { width: 3%; }

.bar-4 .growing-bar { width: 4%; }

.bar-5 .growing-bar { width: 5%; }

.bar-6 .growing-bar { width: 6%; }

.bar-7 .growing-bar { width: 7%; }

.bar-8 .growing-bar { width: 8%; }

.bar-9 .growing-bar { width: 9%; }

.bar-10 .growing-bar { width: 10%; }

.bar-11 .growing-bar { width: 11%; }

.bar-12 .growing-bar { width: 12%; }

.bar-13 .growing-bar { width: 13%; }

.bar-14 .growing-bar { width: 14%; }

.bar-15 .growing-bar { width: 15%; }

.bar-16 .growing-bar { width: 16%; }

.bar-17 .growing-bar { width: 17%; }

.bar-18 .growing-bar { width: 18%; }

.bar-19 .growing-bar { width: 19%; }

.bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart-loading.grid .exercise .bar:nth-child(1) .growing-bar { width: 20%; }

.bar-21 .growing-bar { width: 21%; }

.bar-22 .growing-bar { width: 22%; }

.bar-23 .growing-bar { width: 23%; }

.bar-24 .growing-bar { width: 24%; }

.bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart-loading .growing-bar { width: 25%; }

.bar-26 .growing-bar { width: 26%; }

.bar-27 .growing-bar { width: 27%; }

.bar-28 .growing-bar { width: 28%; }

.bar-29 .growing-bar { width: 29%; }

.bar-30 .growing-bar { width: 30%; }

.bar-31 .growing-bar { width: 31%; }

.bar-32 .growing-bar { width: 32%; }

.bar-33 .growing-bar { width: 33%; }

.bar-34 .growing-bar { width: 34%; }

.bar-35 .growing-bar { width: 35%; }

.bar-36 .growing-bar { width: 36%; }

.bar-37 .growing-bar { width: 37%; }

.bar-38 .growing-bar { width: 38%; }

.bar-39 .growing-bar { width: 39%; }

.bar-40 .growing-bar { width: 40%; }

.bar-41 .growing-bar { width: 41%; }

.bar-42 .growing-bar { width: 42%; }

.bar-43 .growing-bar { width: 43%; }

.bar-44 .growing-bar { width: 44%; }

.bar-45 .growing-bar { width: 45%; }

.bar-46 .growing-bar { width: 46%; }

.bar-47 .growing-bar { width: 47%; }

.bar-48 .growing-bar { width: 48%; }

.bar-49 .growing-bar { width: 49%; }

.bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart-loading .growing-bar, input[id='exercise-2']:checked ~ .chart-loading.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart-loading.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart-loading.grid .exercise .bar:nth-child(2) .growing-bar { width: 50%; }

.bar-51 .growing-bar { width: 51%; }

.bar-52 .growing-bar { width: 52%; }

.bar-53 .growing-bar { width: 53%; }

.bar-54 .growing-bar { width: 54%; }

.bar-55 .growing-bar { width: 55%; }

.bar-56 .growing-bar { width: 56%; }

.bar-57 .growing-bar { width: 57%; }

.bar-58 .growing-bar { width: 58%; }

.bar-59 .growing-bar { width: 59%; }

.bar-60 .growing-bar { width: 60%; }

.bar-61 .growing-bar { width: 61%; }

.bar-62 .growing-bar { width: 62%; }

.bar-63 .growing-bar { width: 63%; }

.bar-64 .growing-bar { width: 64%; }

.bar-65 .growing-bar { width: 65%; }

.bar-66 .growing-bar { width: 66%; }

.bar-67 .growing-bar { width: 67%; }

.bar-68 .growing-bar { width: 68%; }

.bar-69 .growing-bar { width: 69%; }

.bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart-loading.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart-loading.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart-loading.grid .exercise .bar:nth-child(3) .growing-bar { width: 70%; }

.bar-71 .growing-bar { width: 71%; }

.bar-72 .growing-bar { width: 72%; }

.bar-73 .growing-bar { width: 73%; }

.bar-74 .growing-bar { width: 74%; }

/*.bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart-loading .growing-bar { width: 75%; }*/
.bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart-loading .growing-bar { width: 0; }

.bar-76 .growing-bar { width: 76%; }

.bar-77 .growing-bar { width: 77%; }

.bar-78 .growing-bar { width: 78%; }

.bar-79 .growing-bar { width: 79%; }

.bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart-loading.grid .exercise .bar:nth-child(3) .growing-bar { width: 80%; }

.bar-81 .growing-bar { width: 81%; }

.bar-82 .growing-bar { width: 82%; }

.bar-83 .growing-bar { width: 83%; }

.bar-84 .growing-bar { width: 84%; }

.bar-85 .growing-bar { width: 85%; }

.bar-86 .growing-bar { width: 86%; }

.bar-87 .growing-bar { width: 87%; }

.bar-88 .growing-bar { width: 88%; }

.bar-89 .growing-bar { width: 89%; }

.bar-90 .growing-bar { width: 90%; }

.bar-91 .growing-bar { width: 91%; }

.bar-92 .growing-bar { width: 92%; }

.bar-93 .growing-bar { width: 93%; }

.bar-94 .growing-bar { width: 94%; }

.bar-95 .growing-bar { width: 95%; }

.bar-96 .growing-bar { width: 96%; }

.bar-97 .growing-bar { width: 97%; }

.bar-98 .growing-bar { width: 98%; }

.bar-99 .growing-bar { width: 99%; }

.bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart-loading .growing-bar, input[id='exercise-4']:checked ~ .chart-loading.grid .exercise .bar:nth-child(3) .growing-bar { width: 100%; }
@media screen and (min-width: 320px) and (max-width: 640px) {
    #login-container, #login-alt-container, #Setup-config { width: 300px; margin: 30px auto; position: relative; top: auto; left: auto; }
}

@media screen and (max-width: 767px) and (min-width: 640px) {
    #login-container, #login-alt-container, #Setup-config { width: 360px; margin-left: -180px; margin-top: -19%; }
        #login-container .login-title h1, #login-alt-container h1 { margin-bottom: 0; }
}
@media screen and (max-width: 767px) {
    body { padding: 5px 5px 0; }
    /*#login-container, #login-alt-container, #Setup-config { width: 90%; margin-left: -45%; margin-top: -45%; }*/
    .row { margin-left: -10px; margin-right: -10px; }

        .row .col-xs-1, .row .col-xs-2, .row .col-xs-3, .row .col-xs-4, .row .col-xs-6, .row .col-xs-7, .row .col-xs-8, .row .col-xs-9, .row .col-xs-10, .row .col-xs-11, .row .col-xs-12 { padding-left: 10px; padding-right: 10px; }

    .show-xs { display: table !important; visibility: visible !important; }
    #sidebar { visibility: hidden; opacity: 0; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; }
    .sidebar-visible-xs #sidebar { visibility: visible; opacity: 1; width: 200px; }
    .sidebar-brand { padding: 0; }
    .sidebar-nav li a { border: none; }
    .nav.navbar-nav-custom > li { position: static; }
    .navbar-nav-custom .dropdown-emt .dropdown-toggle { position: relative; }
    .dropdown-emt .dropdown-menu { width: 100%; }
    section.section-tab { margin: 10px 0 0; }
    .section-tab .tab-content { padding: 0 5px 5px; }
    .section-tab .input-group input.form-control { float: none; margin-bottom: 5px; }
    .section-tab .space { min-height: 62px; }
    .sync-progress-bar { width: 90%; margin: 15px; }
    .chart-loading { height: auto; }
}
@media(max-width: 991px) and (min-width: 768px) {
    .show-sm { display: table !important; visibility: visible !important; }
    #sidebar { visibility: hidden; opacity: 0; -moz-transition: all .31s; -o-transition: all .31s; -webkit-transition: all .31s; transition: all .31s; }
    .sidebar-visible-xs #sidebar { visibility: visible; opacity: 1; width: 200px; }
    .section-tab .input-group { margin-bottom: 10px; display: block; }

        .section-tab .input-group input.form-control { float: none; margin-bottom: 5px; }
    .section-tab .space { min-height: 54px; }
}

@media screen and (min-width: 992px) {
    /*.sidebar-partial #sidebar:hover,*/
    .sidebar-visible-lg #sidebar,
    .sidebar-visible-lg.sidebar-partial #sidebar,
    /*.sidebar-alt-partial #sidebar-alt:hover,*/
    .sidebar-alt-visible-lg #sidebar-alt,
    .sidebar-alt-visible-lg.sidebar-alt-partial #sidebar-alt { width: 250px; opacity: 1; filter: alpha(opacity=100); }
    .sidebar-partial #main-container { margin-left: 90px; }
    .sidebar-partial #sidebar { width: 90px; opacity: 1; }
    /*.sidebar-partial #sidebar:hover .sidebar-nav a { text-align: left; }*/
}

.sidebar-content { width: 100%; color: #ffffff; }
.sidebar-visible-lg .sidebar-content { width: 250px; }
.header-section { padding: 18px 10px; }

@media screen and (min-width: 992px) {
    /*.sidebar-partial #sidebar:hover + #main-container, .sidebar-visible-lg #main-container { margin-left: 200px; }
    .sidebar-partial #sidebar:hover .sidebar-content { width: 200px; }*/
    .sidebar-visible-lg #main-container { margin-left: 250px; }
    /*.sidebar-partial #sidebar:hover .sidebar-content { width: 200px; }*/
}