/*to improve admin page desgin have to comment this css*/
/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}


/* login css */
.login {
    background-color: #2a3f54 !important;
}

    .login .site_title i {
        border: 1px solid #eaeaea;
        border-radius: 50%;
        padding: 5px 6px;
    }

    .login .logo {
        margin: 0px auto 20px auto;
        padding: 15px;
        text-align: center;
        color: #fff;
    }

        .login .logo a {
            color: #fff;
            font-size: 24px;
        }

            .login .logo a:hover {
                text-decoration: none;
            }

    .login .content {
        background-color: #fff;
        width: 360px;
        margin: 0 auto;
        margin-bottom: 0px;
        padding: 30px;
        padding-top: 20px;
        padding-bottom: 15px;
    }

        .login .content h3 {
            color: #000;
        }

        .login .content h4 {
            color: #555;
        }

        .login .content p {
            color: #222;
        }

        .login .content .login-form, .login .content .forget-form {
            padding: 0px;
            margin: 0px;
        }

        .login .content .input-group {
            border-left: 2px solid #2a3f54 !important;
            border-radius: 0;
        }

        .login .content .input-group {
        }

        .login .content .form-control {
            border-color: #ccc;
            box-shadow: none;
            border-radius: 0;
        }

        .login .content .input-group .form-control {
            border-left: 0;
            box-shadow: none;
        }

            .login .content .input-group .form-control:focus {
                box-shadow: none;
                border-color: #ccc;
            }

        .login .content .input-group .input-group-addon {
            border-radius: 0;
            background-color: #fff;
        }

        .login .content .forget-form {
            display: none;
        }

        .login .content .register-form {
            display: none;
        }

        .login .content .form-title {
            font-weight: 300;
            margin: 0;
            margin-bottom: 5px;
        }

        .login .content .form-actions {
            background-color: #fff;
            clear: both;
            border: 0px;
            border-bottom: 1px solid #eee;
            padding: 0px 30px 25px 30px;
            margin-left: -30px;
            margin-right: -30px;
        }

            .login .content .form-actions input[type="checkbox"] {
                margin: 0;
                margin-right: 3px;
                margin-top: 0;
            }

            .login .content .form-actions .checkbox label {
                position: relative;
                top: -3px;
            }

            .login .content .form-actions .checkbox {
                margin-left: 0;
                padding-left: 0;
            }

        .login .content .forget-form .form-actions {
            border: 0;
            margin-bottom: 0;
            padding-bottom: 20px;
        }

        .login .content .register-form .form-actions {
            border: 0;
            margin-bottom: 0;
            padding-bottom: 0px;
        }

        .login .content .form-actions .checkbox {
            margin-top: 8px;
            display: inline-block;
        }

        .login .content .form-actions .btn {
            margin-top: 1px;
        }

        .login .content .forget-password {
            margin-top: 25px;
        }

        .login .content .create-account {
            padding-top: 10px;
            margin-top: 0px;
        }

            .login .content .create-account a {
                display: inline-block;
                margin-top: 5px;
            }
        /* select2 dropdowns */
        .login .content .select2-container {
            border-left: 2px solid #44B6AE !important;
        }

            .login .content .select2-container .select2-choice {
                border-left: none !important;
            }

            .login .content .select2-container i {
                display: inline-block;
                position: relative;
                color: #ccc;
                z-index: 1;
                top: 1px;
                margin: 4px 4px 0px -1px;
                width: 16px;
                height: 16px;
                font-size: 16px;
                text-align: center;
            }

        .login .content .has-error .select2-container i {
            color: #b94a48;
        }

        .login .content .select2-container a span {
            font-size: 13px;
        }

            .login .content .select2-container a span img {
                margin-left: 4px;
            }
    /* footer copyright */
    .login .copyright {
        text-align: center;
        margin: 0 auto;
        padding: 10px;
        color: #999;
        font-size: 13px;
    }

/* Button */
.green-haze.btn {
    color: #FFFFFF;
    background-color: #2a3f54;
    border-radius: 0px;
}

    .green-haze.btn:hover, .green-haze.btn:focus, .green-haze.btn:active, .green-haze.btn.active {
        color: #FFFFFF;
        background-color: #1a2835;
    }

@media (max-width:480px) {
    /***Login page***/
    .login .logo {
        margin-top: 10px;
    }

    .login .content {
        width: 280px;
    }

        .login .content h3 {
            font-size: 22px;
        }

    .login .checkbox {
        font-size: 13px;
    }
}
.mt10 { margin-top:10px;}


.ddldisable {
    pointer-events: none;
    background-color: #eee;
}


.sparkline-box {
    margin: 0;
    padding: 0;
    width:100%; 
    display:flex;
    flex-wrap:wrap;
    /*margin-top: 10px*/
}

    .sparkline-box.side .sparkline {
        /*margin-top: 5px*/
    }

    .sparkline-box.side .sparkline-row {
        padding: 0;
        float: none;
        border: none
    }

    .sparkline-box.side h4 {
        margin-right: 20px;
        min-width: 70px;
        text-shadow: none
    }

        .sparkline-box.side h4 span {
            color: inherit
        }

    .sparkline-box .sparkline {
        margin-top: 8px;
        display: inline-block;
        vertical-align: top;
        height: 30px
    }

    .sparkline-box .big {
        width: 83px;
        height: 30px
    }

    .sparkline-box .sparkline-row {
        zoom: 1;
        text-align: center;
        padding: 0;
        padding: 0 15px 0 13px;
        float: left;
        border-right: 1px dotted #aaa;
        border-left: 1px dotted #fff
    }

        .sparkline-box .sparkline-row:before,
        .sparkline-box .sparkline-row:after {
            display: table;
            content: "";
            line-height: 0
        }

        .sparkline-box .sparkline-row:after {
            clear: both
        }

        .sparkline-box .sparkline-row:last-child {
            border-right: none
        }

        .sparkline-box .sparkline-row:first-child {
            border-left: none
        }

    .sparkline-box h4 {
        display: inline-block;
        text-align: center;
        margin: 0;
        text-shadow: 0 1px rgba(255,255,255,0.5);
        min-width: 70px
    }

        .sparkline-box h4.red {
            color: #c75d5d
        }
.sparkline-row-hight label {
    margin: 12px 0 0 0;
    font-family: 'Open Sans',sans-serif !important;
    vertical-align: middle;
}
.sparkline-row-hight-1 {
    margin: 22px 0 0 0 !important;
    font-family: 'Open Sans',sans-serif !important;
    vertical-align: middle !important;
}

.sparkline-box h4.orange {
    color: #ff9f01
}

        .sparkline-box h4.blue {
            color: #6e97aa
        }

        .sparkline-box h4.gray {
            color: #6b787f
        }

        .sparkline-box h4.green {
            color: #8fae53
        }

        .sparkline-box h4.dark-green {
            color: #779148
        }

.sparkline-box h4 span {
    color: #717e88;
    font-size: 12px;
    font-weight: bold !important;
    display: block;
    text-align: center;
    vertical-align: middle;
    font-family: 'Open Sans',sans-serif !important;
}
li.vertical-centered {
    padding: 10px !important;
}
.left-sub-sparkling-box-item {
    float: left;
    margin: 10px;
    border-right: 1px dotted #aaa;
}
.middle-sub-sparkling-box-item {
    margin: 10px;
    padding-left: 6px;
    float: right;
    border-left: 1px dotted #aaa;
}

.right-sub-sparkling-box-item {
    float: right;
    margin: 10px;
}

.sparkline-box .sparkline-row-hight {
    height: 80px;
    zoom: 1;
    text-align: center;
    padding: 2px 8px 0 8px;
    /*flex-basis:25%;*/
    border-right: 1px dotted #aaa;
    margin-bottom: 15px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
    .sparkline-box .sparkline-row-hight:last-child {
        border:0px;
    }

    .sparkline-box .sparkline-row-hight .form-control {
        margin-top:10px;
    }

.area-manager {
    background: #ececec;
    background-image: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…dpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
    background-size: 100%;
    background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#fafafa),color-stop(100%,#ececec));
    background-image: -webkit-linear-gradient(top,#fafafa,#ececec);
    background-image: -moz-linear-gradient(top,#fafafa,#ececec);
    background-image: -o-linear-gradient(top,#fafafa,#ececec);
    background-image: linear-gradient(top,#fafafa,#ececec);
    -webkit-box-shadow: 0 2px 1px -1px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 2px 1px -1px rgba(0,0,0,0.07);
    box-shadow: 0 2px 1px -1px rgba(0,0,0,0.07);
    /*box-shadow:0px 0px 5px #000;*/
    border-bottom: 1px solid #ccc;
    position: relative;
    width: 100%;
    padding: 10px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sparkline-left-hight {
    width: 50%;
    height: auto;
    zoom: 1;
    text-align: center;
    border-right: 1px dotted #aaa;
}

    .sparkline-left-hight h4 {
        display: inline-block;
        text-align: center;
        margin: 0;
        text-shadow: 0 1px rgba(255,255,255,0.5);
        min-width: 70px;
        width: 96%;
    }
        .sparkline-left-hight h4 span {
            color: #717e88;
            font-size: 14px;
            font-weight: bold !important;
            display: block;
            text-align: center;
            vertical-align: middle;
            font-family: 'Open Sans',sans-serif !important;
        }
    .sparkline-left-hight label {
        margin: 6px 0 0 0;
        font-family: 'Open Sans',sans-serif !important;
        vertical-align: middle;
    }
    .sparkline-left-hight h4 [class*="sub-sparkling-box-item"] > span{margin-top:5px;   }
    .canvas-holder11 {
        display: flex;
        flex-wrap: wrap;
    }

.sparkling-box-item-outer {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px dotted #aaa;
    padding-top: 10px;
    margin-top: 10px;
}
    .sparkling-box-item-outer .sub-sparkling-box-item {
        /*padding: 2px 10px;*/
        border-right: 1px dotted #aaa;
        width: 25%;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .sparkling-box-item-outer .sub-sparkling-box-item:last-child{border-right:none;}
.col .sparkline-left-hight:last-child {
    border-right: none;
}

@media(max-width:1199px) {
    .sparkling-box-item-outer .sub-sparkling-box-item {
        width: 100%;
        border-right: none;
        border-bottom: 1px dotted #aaa;
    }
    .sparkling-box-item-outer .sub-sparkling-box-item:last-child{border-bottom:none;}
}
    @media (max-width:550px) {
        .sparkline-left-hight {
        width: 100%;
    }
    .area-top .sparkline-box .sparkline {
        display: none
    }
    li.sparkline-row-hight{
        width:100%;
        border:none;
    }
    .sparkline-box .sparkline-row-hight {
        width: 100%;
        border: none;
    }
}

@media (max-width:767px) {
    .area-top .sparkline-box {
        float: none !important;
        display: inline-block
    }
    .sparkline-left-hight {
        width: 100%;
        border-right: none;
        border-bottom: 1px dotted #aaa;
        margin-bottom: 15px;
    }
}