@font-face {
    font-family: MYRIADPRO;
    src: url(../fonts/MYRIADPRO-REGULAR.OTF) format("truetype");
}
@font-face {
    font-family: MYRIADPRO_BOLD;
    src: url(../fonts/MYRIADPRO-BOLD.OTF) format("truetype");
} 
@font-face {
    font-family: Zirkon;
    src:url('../fonts/UTM Zirkon.ttf') ;
} 

.wrapperFull {
    padding-left: 0 !important;
}

.menuHide {
    left: 0 !important;
}

#page-wrapper {
    position: relative;
    z-index: 10;
}

#menuLeftToggle {
    position: absolute !important;
    left: -12px !important;
}
@media only screen and (max-width: 769px) {


.chieu-cao{
	height:auto;
	font-size:12px;
}

#bang-bieu table,
#bang-bieu thead,
#bang-bieu tbody,
#bang-bieu th,
#bang-bieu td,
#bang-bieu tr {
display: block !important;
} 

#bang-bieu thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
 
#bang-bieu tr { border: 1px solid #ccc; }
  
#bang-bieu td {

border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 35%;
white-space: normal;
text-align:left;
font-size:12px;
        
}
 
#bang-bieu td:before {

position: absolute;

top: 6px;
left: 6px;
width: 35%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
        
}

#bang-bieu td:before { content: attr(data-title); }
}



body {
    margin-top:5px;
    background-color: #15273f;
}

.navbar-fixed-bottom, .navbar-fixed-top{
    position:static;
}

.navbar {
    min-height: 60px !important;
    margin-bottom:0px !important;
}

.navbar-inverse {
    background-color: #15273f !important;
    border-color: #15273f !important;
}

.nav-controls {
    background-color: #080808;
    display: none !important;
}

.nav-controls > span {
    padding: 15px;
    display: block;
    width: 225px;
    text-align: right;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

.nav-controls > span > .fa {
    color: #fff;
    cursor: pointer;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    color: #fff;
    background-color: #233D98;
}

.side-nav > li > ul > li, .side-nav > li > ul > li > a {
    color: #fff;
    background-color: #3252A0;
}

.side-nav > li > a > span > .fa{
    float:right;
}

.side-nav  li > a{
    border-bottom: 1px solid #2c3f63;
}

.navbar-header .logo {
    color: #ffffff;
    font-size: 14px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
}

.top-nav {
    margin-top: 0px;
    min-width:260px;
}

.top-nav > li > a {
    color: #fff;
}

.nav-dashboard {
    padding: 15px;
    min-height: calc(100vh - 120px);
}

#footer {
    padding: 15px;
    background-color: #fff;
    height: auto;
    font-size: 1.2em;
}

#footer .donvi {
    color: #36AFE4;
}

.canh-le-ten {
    text-align: center;
    font-size:14px;
    padding-left:0px;
    padding-right:0px;
}

.canh-le-tac-gia {
    text-align: center;
    display: none;
}
/**/
@media (min-width: 768px) {
    body {
        margin-top: 60px !important;
    }

    .navbar-fixed-bottom, .navbar-fixed-top{
        position:fixed;
    }

    .side-nav {
        top: 61px;
        background-color: #16273e;
    }

    #page-wrapper {
        min-height: calc(100vh - 60px);
        background-color: #e9eaeb;
        padding: 0;
    }

    .nav-controls {
        background-color: #080808;
        display: block !important;
    }

    .navbar-header .logo {
        font-size: 20px;
        margin-top: 5px;
        color:#ffffff;
        font-family:Arial, Helvetica, sans-serif;
    }

    .top-nav {
        margin-top: 5px;
    }

    .nav-dashboard {
        padding: 15px;
        min-height: calc(100vh - 120px);
    }

    #footer {
        padding: 15px;
        background-color: #fff;
        height: 50px;
        font-size: 1.2em;
    }

    #footer .donvi {
        color: #36AFE4;
    }
           
    ul.nav.navbar-nav.side-nav.collapsed, ul.nav.navbar-nav.side-nav.collapsed > li, ul.nav.navbar-nav.side-nav.collapsed > li > a, ul.nav.navbar-nav.side-nav.collapsed > li.nav-controls > span {
        width: 60px;
        text-align: center;
        overflow: visible;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li {
        position: relative;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li > ul {
        position: absolute;
        z-index: 100;
        background-color: #fff;
        left: 60px;
        width: 189px;
        border: 1px solid #e7e7e7;
        border-top: 0;
        border-left: 0;
        list-style: none;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li > ul > li {
        text-align: left;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li > ul > li > a {
        padding: 10px;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li > a > span {
        display: none;
    }

    div#wrapper.expanded {
        padding-left: 60px;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li.active > a {
        width: 248px;
        text-align: left;
        background-color: #233D98;
        padding-left: 21px;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li.active > a > span {
        display: inline;
        padding-left: 33px;
    }

    .canh-le-ten {
        text-align: left;
        font-size:16px;
    }

    .canh-le-tac-gia {
        text-align: right;
        display: block;
    }
}

@media (min-width: 1200px) {
    body {
        margin-top: 60px;
    }
    .navbar-fixed-bottom, .navbar-fixed-top{
        position:fixed;
    }
    .side-nav {
        top: 61px;
        background-color: #16273e;
    }

    #page-wrapper {
        min-height: calc(100vh - 70px);
        background-color: #e9eaeb;
        padding: 0;
    }

    .nav-controls {
        background-color: #080808;
        display: block !important;
    }

    .navbar-header .logo {
        font-size: 20px;
        margin-top: 5px;
        color:#ffffff;
        font-family:Arial, Helvetica, sans-serif;
    }
    .top-nav {
        margin-top: 5px;
    }

    .nav-dashboard {
        padding: 15px;
        min-height: calc(100vh - 120px);
    }

    #footer {
        padding: 15px;
        background-color: #fff;
        height: 50px;
        font-size: 1.2em;
    }

    #footer .donvi {
        color: #36AFE4;
    }
            
    ul.nav.navbar-nav.side-nav.collapsed, ul.nav.navbar-nav.side-nav.collapsed > li, ul.nav.navbar-nav.side-nav.collapsed > li > a, ul.nav.navbar-nav.side-nav.collapsed > li.nav-controls > span {
        width: 60px;
        text-align: center;
        overflow: visible;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li {
        position: relative;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li > ul {
        position: absolute;
        z-index: 100;
        background-color: #fff;
        left: 60px;
        width: 189px;
        border: 1px solid #e7e7e7;
        border-top: 0;
        border-left: 0;
        list-style: none;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li > ul > li {
        text-align: left;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li > ul > li > a {
        padding: 10px;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li > a > span {
        display: none;
    }

    div#wrapper.expanded {
        padding-left: 60px;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li.active > a {
        width: 248px;
        text-align: left;
        background-color: #233D98;
        padding-left: 21px;
    }

    ul.nav.navbar-nav.side-nav.collapsed > li.active > a > span {
        display: inline;
        padding-left: 33px;
    }

    .canh-le-ten {
        text-align: left;
        font-size:16px;
    }

    .canh-le-tac-gia {
        text-align: right;
        display: block;
    }
}