/* 
    Created on : 8 Dec, 2017, 4:22:39 PM
    Author     : safdar
*/
.e-row {
    margin: 2.5px 0px;
}
.e-row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="e-c-"] {
    float: left;
    padding: 5px;
    /*box-shadow: 0px 0px 0px 1px gray;*/
}

.h-50 [class*="e-c-"]{
    height: 50px;
}

.e-c-1 {width: calc(8.33% - 10px);}
.e-c-2 {width: calc(16.66% - 10px);}
.e-c-3 {width: calc(25% - 10px);}
.e-c-4 {width: calc(33.33% - 10px);}
.e-c-5 {width: calc(41.66% - 10px);}
.e-c-6 {width: calc(50% - 10px);}
.e-c-7 {width: calc(58.33% - 10px);}
.e-c-8 {width: calc(66.66% - 10px);}
.e-c-9 {width: calc(75% - 10px);}
.e-c-10 {width: calc(83.33% - 10px);}
.e-c-11 {width: calc(91.66% - 10px);}
.e-c-12 {width: calc(100% - 10px);}


@media(min-width:0px) and (max-width:640px){
    /* SMALL-Screen*/
    .e-c-sm-1 {width: calc(8.33% - 10px);}
    .e-c-sm-2 {width: calc(16.66% - 10px);}
    .e-c-sm-3 {width: calc(25% - 10px);}
    .e-c-sm-4 {width: calc(33.33% - 10px);}
    .e-c-sm-5 {width: calc(41.66% - 10px);}
    .e-c-sm-6 {width: calc(50% - 10px);}
    .e-c-sm-7 {width: calc(58.33% - 10px);}
    .e-c-sm-8 {width: calc(66.66% - 10px);}
    .e-c-sm-9 {width: calc(75% - 10px);}
    .e-c-sm-10 {width: calc(83.33% - 10px);}
    .e-c-sm-11 {width: calc(91.66% - 10px);}
    .e-c-sm-12 {width: calc(100% - 10px);}


    div.dash-msg-board{
        width:95%;
    }
    .headertextbox {
        outline: 0px! important;
        border: 2px solid #E5E5E5! important;
        color: #000000! important;
        height: 20px! important;
        padding: 2px 2px 2px 5px! important;
        width: 100px! important;
        float: left;
    }    
    .headerselectBox {
        outline: 0px! important;
        background-color: rgba(247, 247, 247, 0.54)! important;
        width: 60px! important;
        position: relative! important;
        height: 28px! important;
        border: 2px solid #DFDDDC! important;
        left: 3px! important;
        float: left;
    } 
}

@media(min-width:641px) and (max-width:980px){
    /* MEDIUM-Screen*/
    .e-c-md-1 {width: calc(8.33% - 10px);}
    .e-c-md-2 {width: calc(16.66% - 10px);}
    .e-c-md-3 {width: calc(25% - 10px);}
    .e-c-md-4 {width: calc(33.33% - 10px);}
    .e-c-md-5 {width: calc(41.66% - 10px);}
    .e-c-md-6 {width: calc(50% - 10px);}
    .e-c-md-7 {width: calc(58.33% - 10px);}
    .e-c-md-8 {width: calc(66.66% - 10px);}
    .e-c-md-9 {width: calc(75% - 10px);}
    .e-c-md-10 {width: calc(83.33% - 10px);}
    .e-c-md-11 {width: calc(91.66% - 10px);}
    .e-c-md-12 {width: calc(100% - 10px);}


    div.dash-msg-board{
        width:47.5%;
    }
    .headertextbox {
        outline: 0px! important;
        border: 2px solid #E5E5E5! important;
        color: #000000! important;
        height: 20px! important;
        padding: 2px 2px 2px 5px! important;
        width: 96px! important;
        float: left;
    }    
    .headerselectBox {
        outline: 0px! important;
        background-color: rgba(247, 247, 247, 0.54)! important;
        width: 70px! important;
        position: relative! important;
        height: 28px! important;
        border: 2px solid #DFDDDC! important;
        left: 3px! important;
        float: left;
    } 
}

@media(min-width:981px) and (max-width:1400px){
    /* LARGE-Screen*/
    .e-c-lg-1 {width: calc(8.33% - 10px);}
    .e-c-lg-2 {width: calc(16.66% - 10px);}
    .e-c-lg-3 {width: calc(25% - 10px);}
    .e-c-lg-4 {width: calc(33.33% - 10px);}
    .e-c-lg-5 {width: calc(41.66% - 10px);}
    .e-c-lg-6 {width: calc(50% - 10px);}
    .e-c-lg-7 {width: calc(58.33% - 10px);}
    .e-c-lg-8 {width: calc(66.66% - 10px);}
    .e-c-lg-9 {width: calc(75% - 10px);}
    .e-c-lg-10 {width: calc(83.33% - 10px);}
    .e-c-lg-11 {width: calc(91.66% - 10px);}
    .e-c-lg-12 {width: calc(100% - 10px);}


    div.dash-msg-board{
        width:31%;
    }
    .headertextbox {
        outline: 0px! important;
        border: 2px solid #E5E5E5! important;
        color: #000000! important;
        height: 20px! important;
        padding: 2px 2px 2px 5px! important;
        min-width: 200px! important;
        max-width: 225px! important;
        float: left;
    }    
    .headerselectBox {
        outline: 0px! important;
        background-color: rgba(247, 247, 247, 0.54)! important;
        min-width: 80px! important;
        max-width: 106px! important;
        position: relative! important;
        height: 28px! important;
        border: 2px solid #DFDDDC! important;
        left: 3px! important;
        float: left;
    }   
}

@media screen and (min-width: 1401px) and (max-width: 5000px) {
    /*Extra Large*/
    .e-c-xl-1 {width: calc(8.33% - 10px);}
    .e-c-xl-2 {width: calc(16.66% - 10px);}
    .e-c-xl-3 {width: calc(25% - 10px);}
    .e-c-xl-4 {width: calc(33.33% - 10px);}
    .e-c-xl-5 {width: calc(41.66% - 10px);}
    .e-c-xl-6 {width: calc(50% - 10px);}
    .e-c-xl-7 {width: calc(58.33% - 10px);}
    .e-c-xl-8 {width: calc(66.66% - 10px);}
    .e-c-xl-9 {width: calc(75% - 10px);}
    .e-c-xl-10 {width: calc(83.33% - 10px);}
    .e-c-xl-11 {width: calc(91.66% - 10px);}
    .e-c-xl-12 {width: calc(100% - 10px);}


    div.dash-msg-board{
        height: 250px;
        /*width: 46%;*/
    }

    .headertextbox {
        outline: 0px! important;
        border: 2px solid #E5E5E5! important;
        color: #000000! important;
        height: 20px! important;
        padding: 2px 2px 2px 5px! important;
        min-width: 270px! important;        
        float: left;
    }

    .headerselectBox {
        outline: 0px! important;
        background-color: rgba(247, 247, 247, 0.54)! important;
        min-width: 106px! important;
        position: relative! important;
        height: 28px! important;
        border: 2px solid #DFDDDC! important;
        left: 3px! important;
        float: left;
    }
}