.header {
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    color: #ffffff;
}

    .header a:hover {
        color: #e6e6e6;
    }

    .header a:link {
        color: #0970bd;
    }

    .header a:visited {
        color: #2e93de;
    }

    .header a:active {
        color: #2e93de;
    }

.main {
    width: 100%;
    min-height: 200px;
    top: 0;
    left: 0;
    right: 0;
    color: #ffffff;
}

.footer {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    color: #444444;
}

    .footer a:hover {
        color: #7c7c7c;
    }

    .footer a:link {
        color: #444444;
    }

    .footer a:visited {
        color: #444444;
    }

    .footer a:active {
        color: #7c7c7c;
    }

.footer-end {
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    right: 0;
    background-color: #34445e;
}

.section {
    padding-top: 10px;
    padding-bottom: 20px;
}

.page {
    width: 70%;
    margin: 0 auto;
}

.page-min {
    height: auto;
    min-height: 800px;
    margin-top: 60px; /* header menu start*/
}

.body-l {
    color: #ffffff;
    background-color: #161c2a;
    min-height: 1300px;
}

.body-r {
    background-color: #fbfbfb;
    color: #2e2e2e;
    min-height: 1300px;
}

/* Div model -------------------------------------------------------*/

.divr {
    padding: 5px;
    text-align: right;
}

.divpad {
    padding: 2px;
    margin: 3px;
}

.border {
    border: 1px solid #f1f1f1;
    padding: 7px;
}

.empty {
    width: 100%;
}

.pointer {
    cursor: pointer;
}

.pad {
    padding: 6px;
}

.padzero {
    padding: 0px;
}

.padleft {
    padding: 4px 4px 4px 6px;
}

.padten {
    padding: 10px;
}

.shadow {
    -moz-box-shadow: 0px 1px 2px 0px #cecece;
    -webkit-box-shadow: 0px 1px 2px 0px #cecece;
    box-shadow: 0px 1px 2px 0px #cecece;
}

.radius {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/* ROW COL Extra ------------------------------------------------------*/

.tb {
    display: table;
    width: 100%;
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
    padding: 6px;
}

.tr:hover {
    background-color: #f2f2f2;
    color: #000000;
}

.tr-back {
    background-color: #f6f6f6;
}

.td-back {
    background-color: #cecece;
}

.tb-border {
    border: #dcdcdc solid 1px;
    background-color: #fefefe;
}

.td-pad {
    padding: 5px 5px 5px 10px;
}

.td-header {
    display: table-cell;
    padding: 10px 6px 10px 6px;
    background-color: #fbfbfb;
    border-width: 0;
    border-right: solid 1px #dcdcdc;
    border-bottom: solid 1px #dcdcdc;
}

.td-header-end {
    display: table-cell;
    padding: 10px 6px 10px 6px;
    background-color: #fbfbfb;
    border-width: 0;
    border-bottom: solid 1px #dcdcdc;
}

@media screen and (max-width: 1200px) {
    .tb, .tr {
        display: block;
    }

    .td {
        display: inline-block;
    }

    .grid-tb, .grid-tr {
        display: block;
    }

    .grid-td {
        display: inline-block;
    }
}

/* ROW COL ------------------------------------------------------*/

.col {
    float: left;
}

.col2 {
    float: left;
    width: 50%;
}

.col3 {
    float: left;
    width: 33.33%;
}

.col4 {
    float: left;
    width: 25%;
}

.col5 {
    float: left;
    width: 20%;
}

.col6 {
    float: left;
    width: 16.66%;
}

.col7 {
    float: left;
    width: 14.28%;
}

.col8 {
    float: left;
    width: 12.50%;
}

.col9 {
    float: left;
    width: 11.11%;
}

.col10 {
    float: left;
    width: 10%;
}

.row {
    width: 100%;
    display: table;
}

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

.img {
    max-width: 100%;
    height: auto;
}

.h1 {
    color: #006dc8;
}

.h2 {
    color: #006dc8;
}

.h3 {
    color: #006dc8;
}

.hb {
    color: #006dc8;
    font-size: 1.80vw;
}

.hr-solid {
    border: 1px solid #efefef;
}

.hr-dashed {
    border: 1px dashed #efefef;
}

.hr-dotted {
    border: 1px dotted #efefef;
}

@media screen and (max-width: 800px) {
    .col2, .col3, .col4, .col5, .col6, .col7, .col8 {
        float: left;
        width: 100%;
    }

    .page {
        width: 95%;
        margin: 0 auto;
    }
}

/* COLOR --------------------------------------------------------*/

.red {
    color: #ffffff;
    background-color: #dd0000;
}

.platin {
    color: #000000;
    background-color: #f4f4f4;
}

.blue {
    color: #ffffff;
    background-color: #0078d4;
}

.blue-light {
    color: #ffffff;
    background-color: #0086ef;
}

.teal {
    color: #ffffff;
    background-color: #39CCCC;
}

.black {
    color: #ffffff;
    background-color: #000000;
}

.dark {
    color: #ffffff;
    background-color: #25476a;
}

.purple {
    color: #ffffff;
    background-color: #ab47bc;
}

.purple-dark {
    color: #ffffff;
    background-color: #605ca8;
}

.yellow {
    color: #ffffff;
    background-color: #ffb300;
}

.grey {
    color: #ffffff;
    background-color: #161c2a;
}

.green {
    color: #ffffff;
    background-color: #598203;
}

.anthracite {
    color: #ffffff;
    background-color: #1f2c41;
}

.cream {
    color: #000000;
    background-color: #9CC4E4;
}

/* COLOR AND BORDER ---------------------------------------------*/


.red-b {
    color: #ffffff;
    background-color: #dd0000;
    border: 1px solid #c90000;
}


.platin-b {
    color: #000000;
    background-color: #f4f4f4;
    border: 1px solid #dcdcdc;
}

.blue-b {
    color: #ffffff;
    background-color: #0078d4;
    border: 1px solid #006cbe;
}

.blue-light-b {
    color: #ffffff;
    background-color: #0086ef;
}

.teal-b {
    color: #ffffff;
    background-color: #94caE2;
    border: 1px solid #6fb7d7;
}

.black-b {
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #1e1e1e;
}

.dark-b {
    color: #ffffff;
    background-color: #25476a;
    border: 1px solid #1a426b;
}

.purple-b {
    color: #ffffff;
    background-color: #ab47bc;
    border: 1px solid #a92cbe;
}

.purple-dark-b {
    color: #ffffff;
    background-color: #605ca8;
    border: 1px solid #4f4c8e;
}

.yellow-b {
    color: #000000;
    background-color: #ffb300;
    border: 1px solid #ffa400;
}

.yellow-light-b {
    color: #000000;
    background-color: #ffcc00;
    border: 1px solid #ffa400;
}

.grey-b {
    color: #ffffff;
    background-color: #3a444e;
    border: 1px solid #2d3945;
}

.green-b {
    color: #ffffff;
    background-color: #598203;
    border: 1px solid #4e7400;
}

.anthracite-b {
    color: #ffffff;
    background-color: #1f2c41;
    border: 1px solid #0d141f;
}

.cream-b {
    color: #000000;
    background-color: #9CC4E4;
    border: 1px solid #74abd8;
}

/* BUTTON -------------------------------------------------------*/

.btn {
    display:inline-block;
    position: relative;
    cursor: pointer;
    color: #ffffff;
    text-align: center;
    padding: 8px 18px 8px 18px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn-sm {
    position: relative;
    cursor: pointer;
    color: #ffffff;
    text-align: center;
    padding: 6px 12px 6px 12px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn-xs {
    position: relative;
    cursor: pointer;
    color: #ffffff;
    text-align: center;
    padding: 4px 10px 4px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.btn-blue {
    background-color: #007bff;
    border: 1px solid #007bff;
}

    .btn-blue:hover {
        background-color: #006adc;
        text-decoration: none;
    }

.btn-grey {
    color: #000000;
    background-color: #eeeeee;
    border: 1px solid #cecece;
}

    .btn-grey:hover {
        background-color: #cecece;
        text-decoration: none;
    }

.btn-green {
    background-color: #10980f;
    border: 1px solid #10980f;
}

    .btn-green:hover {
        background-color: #068906;
        text-decoration: none;
    }

.btn-yellow {
    color: #000000;
    background-color: #ffcc00;
    border: 1px solid #ffcc00;
}

    .btn-yellow:hover {
        background-color: #ffbb00;
        text-decoration: none;
    }

.btn-red {
    background-color: #e80000;
    border: 1px solid #e80000;
}

    .btn-red:hover {
        background-color: #c80000;
        text-decoration: none;
    }

.btn-ant {
    background-color: #1f2c41;
    border: 1px solid #1f2c41;
}

    .btn-ant:hover {
        background-color: #121c2b;
        text-decoration: none;
    }

/* BTN ICON ----------------------------------------------------*/

.btn-icon-x1 {
    display: inline-block;
    padding: 4px;
    border-radius: 5%;
    background-color: #e6e6e6;
}
    .btn-icon-x1:hover {
        background-color: #bfbfbf;
        text-decoration: none;
    }

.btn-icon-x2 {
    display: inline-block;
    padding: 4px;
    border-radius: 50%;
    background-color: #e6e6e6;
}

    .btn-icon-x2:hover {
        background-color: #bfbfbf;
        text-decoration: none;
    }

/* BALLON ----------------------------------------------------*/

.ballon {
    position: absolute;
    display: inline-block;
    line-height: 1;
    top: -7px;
    right: -10px;
    padding: 3px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.minballon {
    font-size: 9px;
    position: absolute;
    display: inline-block;
    line-height: 1;
    top: -10px;
    right: -10px;
    padding: 3px 4px;
    border-radius: 2px;
    min-width: 5px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

/* BOX MINI --------------------------------------------------*/

.minbox-menu {
    display: inline-block;
    margin: 0px 8px 0px 8px;
    padding: 2px 8px 2px 8px;
    text-align: center;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.minround {
    display: inline-block;
/*    margin: 0px 8px 0px 8px;
    padding: 2px 8px 2px 8px;*/
    text-align: center;
    height:5px;
    width:5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.minsquare {
    display: inline-block;
    text-align: center;
    height: 5px;
    width: 5px;
    -moz-border-radius: 2%;
    -webkit-border-radius: 2%;
    border-radius: 2%;
}

.minbox-auto {
    display: inline-block;
    margin: 5px;
    padding: 8px;
    text-align: left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.minbox-ex {
    display: block;
    position: relative;
    width: auto;
    margin: 5px;
    padding: 10px;
    text-align: center;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.minbox {
    display: block;
    position: relative;
    min-height: 80px;
    width: auto;
    margin: 5px;
    padding: 10px;
    text-align: center;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.minbox-bottom {
    /*margin-left:-9px;
    margin-right:-9px;*/
    position: relative;
    text-align: center;
    color: #ffffff;
    display: block;
    background: rgba(0,0,0,0.2);
    text-decoration: none;
}

    .minbox-bottom:hover {
        background: rgba(0, 0, 0, 0.40);
        /*-moz-box-shadow: #b7b7b7 0px 0 5px;
        -webkit-box-shadow: #b7b7b7 0px 0 5px;
        box-shadow: #b7b7b7 0px 0 5px;*/
    }


/* BOX -------------------------------------------------------*/

.box {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 1px 2px 0px #eaeaea;
    -webkit-box-shadow: 0px 1px 2px 0px #eaeaea;
    box-shadow: 0px 1px 2px 0px #eaeaea;
}

.box-in {
    margin: 10px;
}

.box p {
    color: #747474;
    padding-top: 5px;
}

.box-out {
    margin: 6px;
}

.box-tools {
/*    position: absolute;
    right: 10px;
    top: 5px;*/
font-size:initial;
    position: absolute;
    display: inline-block;
    line-height: 1;
    top: -7px;
    right: -1px;
    padding: 3px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.box-form {
    max-width: 1000px;
    margin: 0 auto;
}

.box-login {
    max-width: 500px;
    padding: 10px;
    margin: 0 auto;
}

.box-top {
    display: block;
    position: relative;
    font-size: 1.2rem;
    margin: 5px 0px 14px 0px;
    padding: 5px;
    min-height: 25px;
    top: 0px;
    left: 0px;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 2px 2px 0px 0px;
}

.box-bottom {
    margin: 10px;
    height: 50px;
    text-align: center;
    border: none;
    padding-top: 10px;
    color: #000;
    background-color: #ffffff;
}

.boxTool {
    margin: 6px;
    padding: 0px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #9CC4E4;
}

.boxToolHeader {
    padding: 10px;
    border-bottom: 1px solid #9CC4E4;
    background-color: #9CC4E4;
    font-size: 1.40em;
}

.boxToolIn {
    padding: 10px;
    background-color: #cedeeb;
}

.box-alert {
    margin: 6px;
    padding: 0px;
    padding: 10px 20px 10px 20px;
    border: 1px solid #9acca6;
    background-color: #d4edda;
}

/* ERROR ----------------------------------------------------------*/

.error-danger {
    color: #b94a48;
}

.error-min {
    display: inline-block;
    padding: 5px;
    height: 20px;
    color: #000000;
    border: 1px solid #ffbb00;
    background-color: #ffcc00;
}

.error {
    height: 40px;
    width: 100%;
    color: #a5a5a5;
}

.error-blue {
    border: 1px solid #0c75dd;
    background-image: url('error/error_blue.png');
}

.error-red {
    border: 1px solid #9c0000;
    background-image: url('error/error_red.png');
}

.error-yellow {
    border: 1px solid #f1c000;
    background-image: url('error/error_yellow.png');
}

.error-green {
    border: 1px solid #276b02;
    background-image: url('error/error_green.png');
}

.error-grey {
    border: 1px solid #7d7d7d;
    background-image: url('error/error_grey.png');
}


/* IMAGE ----------------------------------------------------------*/

.imgright {
    padding-right: 5px;
}

.img-date {
    padding-right:25px;
    background: url('icon/calender.png') no-repeat right;
}

/* TEXT WRAP ----------------------------------------------------------*/

.txtwrap{
    word-wrap:normal;
    word-break:break-all;
}

.txtgrey{
    color: #ffffff;
    background-color: #3a444e;
}

.desaturate {
    max-width: 100%;
    height: auto;
    filter: grayscale(0%); /* Standard CSS */
    -webkit-filter: grayscale(0%); /* CSS for Webkit Browsers */
    filter: none; /* Internet Explorer IE6-9 */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
}

    .desaturate:hover {
        max-width: 100%;
        height: auto;
        filter: grayscale(100%);
        filter: gray;
        -webkit-filter: grayscale(100%);
    }