@import url(https://fonts.googleapis.com/css?family=Muli:300i,400,400i,600&subset=vietnamese);
*,*:hover{
    outline: 0!important;
    text-decoration: none;
}
body {
    background-color: #f9f9f9;
}
.login-bg
{
    background-image: url('/assets/img/flat-bg.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

#login-page
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    height: 100vh;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;

}
#login-page .card-panel.border-radius-6.login-card
{
    margin-left: 0 !important;
}
#login-page .login-box {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 6px;
    right: auto;
    left: auto;
    /* width: 33.33333%; */
    margin-left: auto;
    margin: 0 auto;
}
#login-page h1{
    font-size: 1.64rem;
    line-height: 110%;
    margin: .82rem 0 .656rem 0;
    text-align: center;
    text-transform: uppercase;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    color: #333;
}
span.help-block {
    color: #d00000;
    padding: 5px 0;
    display: block;
}
#login-page .form-control{
    background-color: transparent;
}
.btn-login{
    display: block;
    width: 100%;
    border-radius: 30px;
}
.alert-danger {
    color: #ffffff;
    background-color: #b50313d9;
    border-color: #b50313d9;
}
.alert-danger .close {color: #ffffff;opacity: 1;text-shadow: none}
.submenu.navbar-light .navbar-toggler {
    position: absolute;
    right: 10px;
    top: -60px;
}
.mainmenu {
    height: 80px;
    background: #0288d1;
    background: -webkit-linear-gradient(45deg, #0288d1, #26c6da) !important;
    background: -moz- oldlinear-gradient(45deg, #0288d1, #26c6da) !important;
    background: -o-linear-gradient(45deg, #0288d1, #26c6da) !important;
    background: linear-gradient(45deg, #0288d1, #26c6da) !important;
}
.mainmenu.navbar-light .navbar-brand{
    color: #FFF;
    width: 150px;
}
.mainmenu.navbar-light .navbar-nav .active>.nav-link, .mainmenu.navbar-light .navbar-nav .nav-link.active, .mainmenu.navbar-light .navbar-nav .nav-link.show, .mainmenu.navbar-light .navbar-nav .show>.nav-link{
    color: #FFF;
}
.mainmenu.navbar-light .navbar-nav .nav-link {
    color: #FFF;
}
.mainmenu.navbar-light .navbar-nav .nav-link.disabled {
    color: #ccc;
}
#psearch{width: 100%}
#psearch input {
    color: #fff;
    border: 1px solid rgba(230, 230, 230, .05);
    background: rgba(230, 230, 230, .3);
    padding-left: 38px;
    height: 45px;
    width: 80%;
}
.btn-search,.btn-search:hover,.btn-search:focus{
    border-color: transparent;
    background: transparent;
    color: #FFF;
    position: absolute;

}
#psearch input::placeholder{
    color: #FFF;
}
.navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: #FFF;
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
.submenu{
    /* background: #FFF; */
    padding: 0;
    /* border-bottom: 1px solid #CCC; */
}
.submenu .navbar-nav{
    margin: 0 auto;
}
.submenu .navbar-nav li{
    padding: 0 5px;
    position: relative;
}
.submenu .navbar-nav li a.nav-link{
    line-height: 61px;
    text-align: center;
    font-size: 13px;
}
.submenu .navbar-nav li a i {
    font-size: 1.4rem;
    line-height: 55px;
    display: block;
    height: 7px;
    color: #FFF;
}
.submenu .navbar-nav  li a span {
    position: relative;
    top: 14px;
    color: #FFF;
    white-space: nowrap;
}
.submenu .navbar-nav  li a span i {
    font-size: 14px;
    position: absolute;
    top: -16px;
    right: -15px;
}
.mainmenu .navbar-brand{
    width: 170px;
    /* position: absolute; */
    /* left: 10px; */
    /* top: 20px; */
}
.navbar-brand img{
    width: 100%;
}
.mainmenu .navbar-nav a.nav-link{
    color: #FFF;
}
.mainmenu .notification-badge {
    font-family: 'Muli', sans-serif;
    position: relative;
    top: -20px;
    right: -1px;
    margin: 0 -.8em;
    padding: 2px 5px;
    color: #fff;
    border-radius: 50%;
    background-color: #ff9100;
    -webkit-box-shadow: 0 0 10px 0 #ff9100;
    box-shadow: 0 0 10px 0 #ff9100;
    font-size: 13px;
}
.submenu .dropdown-toggle::after {
    position: absolute;
    bottom: 41px;
    right: 10px;
}
.cyan {
    background-color: #00bcd4 !important;
}
#card-stats .card .card-content {
    padding: 10px 14px;
}
#card-stats .card-stats-title {
    font-size: 1rem;
}
.card .card-content p {
    margin: 0;
}
p {
    font-family: 'Muli', sans-serif;
}
.white-text {
    color: #fff !important;
}
#card-stats .card-content {
    text-align: center;
}
#card-stats .card-stats-number {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 2rem;
    margin: .8rem 0 .6rem 0;
}
#card-stats .card-stats-compare {
    font-size: .85rem;
}
#card-stats .card-stats-compare i {
    position: relative;
    top: 8px;
}
#card-stats .card .card-action {
    padding: 10px 14px;
}
.card .card-action {
    position: relative;
    padding: 16px 24px;
    border-top: 1px solid rgba(160, 160, 160, .2);
    background-color: inherit;
}
.card .card-action:last-child {
    border-radius: 0 0 2px 2px;
}
.cyan.darken-1 {
    background-color: #00acc1 !important;
}
.red.accent-2 {
    background-color: #ff6565 !important;
}
.red {
    background-color: #f44336 !important;
}
.orange.lighten-1 {
    background-color: #ffa726 !important;
}
.orange {
    background-color: #ff9800 !important;
}
.green.lighten-1 {
    background-color: #66bb6a !important;
}
.green {
    background-color: #4caf50 !important;
}

/*----------------------------------------
    Charts
------------------------------------------*/
#card-stats
{
    padding-top: 20px;
}

#chart-dashboard .card
{
    overflow: hidden;
}

#chart-dashboard .card .card-content
{
    padding: 10px 14px;
}

#chartjs .sample-chart-wrapper,
#chartjs2 .sample-chart-wrapper,
#chartjs3 .sample-chart-wrapper
{
    margin-top: -75px;
    margin-bottom: -14px;
}

.sample-chart-wrapper
{
    width: 100%;
}

.chart-title
{
    font-size: 1.6rem;
    font-weight: 300;
}

/* Revenue Chart */
.chart-revenue
{
    float: right;

    padding: 8px;

    text-align: center;

    border-radius: 3px;
}
.chart-revenue .chart-revenue-total
{
    font-size: .9rem;

    margin: 0;
}
.chart-revenue .chart-revenue-per
{
    font-size: .8rem;

    margin: 0;
}
.chart-revenue .chart-revenue-per i
{
    position: relative;
    top: 5px;
}

.chart-revenue-switch
{
    padding-top: 28px;
    padding-right: 10px;

    text-align: right;

    color: #fff;
}

#materialize-chartist .ct-chart-line,
#materialize-chartist .ct-chart-bar,
#materialize-chartist .ct-chart-pie,
#materialize-chartist .ct-chart-donut
{
    height: 400px !important;
}

/* doughnut chart */
.doughnut-chart-status
{
    font-size: 16px;
    font-weight: 500;

    position: relative;
    top: -75px;
    left: 0;

    height: 0;

    text-align: center;
}
.doughnut-chart-status p
{
    margin-top: -5px;
}

.doughnut-chart-legend li
{
    font-size: .9rem;

    padding: 2px 0;
}
.doughnut-chart-legend li:before
{
    display: block;
    float: left;

    width: 8px;
    height: 8px;
    margin-top: 6px;
    margin-right: 4px;

    content: '';
}

a.button-collapse.top-nav
{
    font-size: 32px;

    position: absolute;
    z-index: 2;
    top: 0;
    left: 7.5%;

    float: none;

    margin-left: 1.5rem;

    color: #fff;
}

/* trending bar chart */
.trending-bar-chart-wrapper
{
    width: 100%;
}

.btn-move-up
{
    position: relative;
    top: -28px;
    right: -18px;

    margin-right: 10px !important;
}

/*Sparkline*/
.jqstooltip
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

    border: none !important;
}

.tooltip-class
{
    overflow: hidden;

    width: 30px;
    height: 20px;

    color: #fff;
}

#ct2-chart .ct-series.ct-series-a .ct-area
{
    fill: #00bcd4;
}

#ct2-chart .ct-series.ct-series-a .ct-point
{
    stroke: #00bcd4;
}

#ct2-chart .ct-series.ct-series-a .ct-line
{
    stroke: #54e2f4;
}
.chart-revenue-switch {
    padding-top: 28px;
    padding-right: 10px;
    text-align: right;
    color: #fff;
}
.cyan.darken-2 {
    background-color: #0097a7 !important;
}
.chart-revenue .chart-revenue-total {
    font-size: .9rem;
    margin: 0;
}
.switch, .switch * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.chart-revenue-switch {
    padding-top: 28px;
    padding-right: 10px;
    text-align: right;
    color: #fff;
}
.right {
    float: right !important;
}
.chartjs-render-monitor {
    -webkit-animation: chartjs-render-animation 0.001s;
    animation: chartjs-render-animation 0.001s;
}
canvas {
    display: inline-block;
}
.card {
    overflow: hidden;
    margin: 1rem 0 1rem 0;
}
.btn-floating {
    line-height: 40px;
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    -webkit-transition: background-color .3s;
    -moz-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition: background-color .3s;
    vertical-align: middle;
    color: #fff;
    border-radius: 50%;
    background-color: #ff9100;
}
.btn-floating i {
    font-size: 1.6rem;
    line-height: 40px;
    display: inline-block;
    width: inherit;
    text-align: center;
    color: #fff;
}
.btn-move-up {
    position: relative;
    top: -28px;
    right: -18px;
    margin-right: 10px !important;
}
.waves-effect {
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    transition: .3s ease-out;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
.doughnut-chart-status {
    font-size: 16px;
    font-weight: 500;
    position: relative;
    top: -85px;
    left: 0;
    height: 0;
    text-align: center;
}
.doughnut-chart-legend li {
    font-size: .9rem;
    padding: 2px 0;
}
ul:not(.browser-default) {
    padding-left: 0;
    list-style-type: none;
}
li.mobile:before {
    background: #f7464a;
}
ul:not(.browser-default) > li {
    list-style-type: none;
}
li.kitchen:before {
    background: #46bfbd;
}
li.home:before {
    background: #fdb45c;
}
.trending-bar-chart-wrapper {
    width: 100%;
}
.chartjs-render-monitor {
    -webkit-animation: chartjs-render-animation 0.001s;
    animation: chartjs-render-animation 0.001s;
}
.card .card-reveal {
    position: absolute;
    z-index: 3;
    top: 100%;
    left: 0;
    display: none;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    padding: 24px;
    background-color: #fff;
}
#chart-dashboard .card {
    overflow: hidden;
}
.teal.accent-4 {
    background-color: #00bfa5 !important;
}
.margin {
    margin: 0 !important;
}
.card-move-up .move-up {
    padding: 20px;
}
#chart-dashboard .card .card-content {
    padding: 10px 14px;
}
.teal {
    background-color: #009688 !important;
}
.dropdown-item, .dropdown-item:active {
    padding: 10px 20px;
}
.mainmenu #menu_notification .material-icons {
    font-size: 28px;
}
.d-mobile{
    display: none;
}
.dropdown-header {
    display: block;
    padding: .5rem 1rem;
    margin-bottom: 0;
    font-size: .875rem;
    color: #000000;
    white-space: nowrap;
    margin-top: -.5rem;
    text-transform: uppercase;
    border-bottom: 1px solid #CCC;
    text-align: left;
}
.dropdown-footer {
    display: block;
    padding: .5rem;
    margin-bottom: 0;
    font-size: .875rem;
    color: #000000;
    white-space: nowrap;
    border-top: 1px solid #CCC;
    text-align: right;
}
ul:not(.browser-default) > li {
    list-style-type: none;
    position: relative;
}
.dropdown-footer a{
    font-weight: 400;
    color: #212529;
    text-align: inherit;

}
.dropdown-item a  {
    font-size: 1.2rem;
    position: relative;
    top: 4px;
    display: block;
    margin-right: 5px;
    font-weight: 400;
    color: #212529;
}
.dropdown-item a > span {
    font-size: 1.2rem;
    position: relative;
    top: 4px;
    display: inline-block;
    margin-right: 5px;
    font-weight: 400;
    color: #FFF;
}
.dropdown-item time {
    font-size: .8rem;
    font-weight: 400;
    margin-left: 38px;
}
.icon-bg-circle {
    padding: .4rem;
    color: #fff;
    border-radius: 50%;
}
.breadcrumb {
    background-color: transparent;
}
.page-header {
    margin: 20px 0;
}
.card-body .alert{
    width: 100%;
}
/* iCheck plugin Minimal skin, blue
----------------------------------- */
.icheckbox,
.iradio {
    display: inline-block;
    *
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    background: url("/assets/img/blue.png") no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox {
    background-position: 0 0;
}
.icheckbox.hover {
    background-position: -24px 0;
}
.icheckbox.checked {
    background-position: -47px 0;
}
.icheckbox.disabled {
    background-position: -60px 0;
    cursor: default;
}
.icheckbox.checked.disabled {
    background-position: -80px 0;
}

.iradio {
    background-position: -120px 0;
}
.iradio.hover {
    background-position: -144px 0;
}
.iradio.checked {
    background-position: -166px 0;
}
.iradio.disabled {
    background-position: -160px 0;
    cursor: default;
}
.iradio.checked.disabled {
    background-position: -180px 0;
}

/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    .icheckbox,
    .iradio {
        background-image: url("/assets/img/blue@2x.png");
        -webkit-background-size: 240px 24px;
        background-size:  240px 24px;
    }
}

.footer-dark .footer-copyright {
    color: rgba(255, 255, 255, .8);
}
.page-footer .footer-copyright {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    min-height: 50px;
    padding: 10px 0;
    color: rgba(255, 255, 255, .8);
    background-color: rgba(51, 51, 51, .08);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.footer-dark .footer-copyright a {
    color: rgba(255, 255, 255, .8);
}
footer.page-footer {
    padding-top: 20px;
    color: #fff;
    background-color: #2196f3;
    -webkit-box-shadow: 0 6px 20px 0 rgba(38, 198, 218, .5) !important;
    box-shadow: 0 6px 20px 0 rgba(38, 198, 218, .5) !important;
    padding-top: 1px;
    color: rgba(255, 255, 255, .8);
}
.table thead td a, .table thead td a:not([href]) {
    color: #33373F;
    font-weight: bold;
}
.table a.asc,.table a.desc{
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.table a.asc:after {
    content: "\f106";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    padding-left: 5px;
}
.table a.desc:after {
    content: "\f107";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    padding-left: 5px;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 8px;
    margin-right: -20px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #ccc;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
.dropdown-menu.multi-level .dropdown-item{
    text-align: left;
}

.dropdown-menu.multi-level .dropdown-item a:hover{ text-decoration: none}
.dropdown-menu.multi-level .dropdown-item a{
    top: 0;
    font-size: 1rem;
    display: block;
    width: 100%;
    padding: 0;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-menu.multi-level .dropdown-submenu, .dropdown-menu.multi-level .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}
.roleLists ul {
    padding-left: 30px;
    line-height: 35px;
}
#configview .listsView .viewItem{
    display: inline-block;
}
#configview{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #034173;
    text-align: center;
    padding: 5px 10px;
}
#cameraBox{
    position: relative;
    width: 100%;
    /* margin: 0 -15px; */

}
.cameraPlayer{
    width: 100%;
    height: auto;
    padding: 5px;
}
.cameraItem{
    background: #000;
    font-size: 0;
    margin-right:-4px;
    display: block;
    float: left;
    border: 1px solid #CCC;
}
.cameraPlayer>div{
    width: 100%!important;
}



.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}
.sidebar-menu > li > a {
    padding: 12px 5px 12px 15px;
    display: block;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
    width: 20px;
}
.sidebar-menu > li .label,
.sidebar-menu > li .badge {
    margin-right: 5px;
}
.sidebar-menu > li .badge {
    margin-top: 3px;
}
.sidebar-menu li.header {
    padding: 10px 25px 10px 15px;
    font-size: 12px;
}
.sidebar-menu li > a > .fa-angle-left,
.sidebar-menu li > a > .pull-right-container > .fa-angle-left {
    width: auto;
    height: auto;
    padding: 0;
    margin-right: 10px;
    -webkit-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
}
.sidebar-menu li > a > .fa-angle-left {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -8px;
}
.sidebar-menu .menu-open > a > .fa-angle-left,
.sidebar-menu .menu-open > a > .pull-right-container > .fa-angle-left {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.sidebar-menu .active > .treeview-menu {
    display: block;
}
.treeview-menu {
    display: none;
    padding: 0;
    margin: 0;
    padding-left: 30px;
}
.treeview-menu .treeview-menu {
    padding-left: 20px;
}
.treeview-menu > li {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 25px;
}
.treeview-menu > li > a {
    padding: 0;
    display: block;
    font-size: 14px;
}
.treeview-menu > li > a > .fa,
.treeview-menu > li > a > .glyphicon,
.treeview-menu > li > a > .ion {
    width: 20px;
}
.treeview-menu > li > a > .pull-right-container > .fa-angle-left,
.treeview-menu > li > a > .pull-right-container > .fa-angle-down,
.treeview-menu > li > a > .fa-angle-left,
.treeview-menu > li > a > .fa-angle-down {
    width: auto;
}
.treeview .treeview::after {
    top: 0;
}
.treeview::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    content: "\f105";
    position: absolute;
    right: 10px;
    top: 10px;
}
.cat-lists>li {
    padding: 10px 15px 10px 10px;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.cat-lists>li>ul{
    padding: 10px 15px 10px 10px;
    position: relative;
}
.cat-lists li a {
    font-weight: 500;
    display: block;
}
.cat-lists a {
    color: #3c3a39;
}
.cat-lists li.active>a, .cat-lists>li:hover>a,
.cat-lists>li>ul>li:hover>a,
.cat-lists>li>ul>li>ul>li:hover>a,
.cat-lists>li>ul>li>ul>li>ul>li:hover>a {
    color: #a86402;
    list-style: none;
    text-decoration: none;
}
.box-title {
    color: #a76628;
    border-bottom: 2px solid;
    line-height: 30px;
    background: #f3f3f3;
    padding: 20px 10px 5px 10px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 18px;
    font-weight: bold;
}
.fileLists{

}
.fileName {
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0;
}
.fileItem .fileImage img{
    width: 100%;
}
.fileItem .fileImage{
    width: 100%;
    border: 1px solid #CCC;
}
.fileItem1 .fileImage img{
    width: 100%;
}
.fileItem1 .fileImage{
    width: 100%;
    border: 1px solid #CCC;
}
.fileItem{
}
.groupCamera,.listsView{display: inline-block}
.groupCamera{width: 200px}
#filterWeek,#filterDate,#filterTime{
    margin: 10px 0;
}
.configTime{font-size: 20px;font-weight: bold;margin: 10px 0 ;}
footer#pFooter {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 10;
}
.trending-line-chart-wrapper {
    height: 200px;
}
div#main {
    padding-bottom: 40px;
}
.about-info img{
    max-width: 100%!important;
    height: auto!important;
}
fieldset legend{display: inline-block;width: 280px;}
fieldset{
    border: 1px solid #CCC;
    padding: 10px;
    border-radius: 10px;
}
.small-box {
    border-radius: .25rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    display: block;
    margin-bottom: 20px;
    position: relative;
    color: #FFF;
}
.small-box h3{color: #FFF}
.small-box .icon>i {
    font-size: 42px;
    position: absolute;
    right: 15px;
    top: 22px;
    transition: all .3s linear;
    color: #FFF;
}
.small-box>.inner {
    padding: 10px;
}
.small-box .icon {
    color: rgba(0,0,0,.15);
    z-index: 0;
}
.small-box:hover .icon>i.fa, .small-box:hover .icon>i.fab, .small-box:hover .icon>i.far, .small-box:hover .icon>i.fas, .small-box:hover .icon>i.glyphicon, .small-box:hover .icon>i.ion {
    font-size: 55px;
}
.bd-1{
    border: 1px solid #FF6384;
    height: 5px;
    border-radius: 5px;
    background: #FF6384;
}
.cl-1{
    color: #FF6384;
}
.cl-2{
    color: #FF9F40;
}
.cl-3{
    color: #FFCD56;
}
.cl-4{
    color: #4BC0C0;
}
.cl-5{
    color: #ca5500;
}
.bd-2{
    border: 1px solid #FF9F40;
    height: 5px;
    border-radius: 5px;
    background: #FF9F40;
}
.bd-3{
    border: 1px solid #FFCD56;
    height: 5px;
    border-radius: 5px;
    background: #FFCD56;
}
.bd-4{
    border: 1px solid #4BC0C0;
    height: 5px;
    border-radius: 5px;
    background: #4BC0C0;
}
.bd-5{
    border: 1px solid #ca5500;
    height: 5px;
    border-radius: 5px;
    background: #ca5500;
}
.pmsg-footer{
    text-align: center;
    color: #17a2b8;
}
.pmsg{
    padding: 10px;
}
h2.chart-title {
    padding: 10px 0;
    text-align: center;
    font-size: 23px;
    font-weight: 500;
}
.small-box.bg-youtube {
    background: #ffcd56;
}
.small-box.bg-dc {
    background: #6794ec;
}
.bg-danger {
    background-color: #ec474f !important;
}
.bg-success {
    background-color: #1fa753 !important;
}
.bg-camera {
    background-color: #7f47ecd9 !important;
}
.fileDelete a{
    color: #F00;}
.fileDelete {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
}
.custom-control-inline {
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 10px;
}
.mainmenu2 {
    background: #0288d1;
    background: -webkit-linear-gradient(45deg, #0288d1, #26c6da) !important;
    background: -moz-oldlinear-gradient(45deg, #0288d1, #26c6da) !important;
    background: -o-linear-gradient(45deg, #0288d1, #26c6da) !important;
    background: linear-gradient(45deg, #0288d1, #26c6da) !important;
}
.mainmenu2.navbar-dark .navbar-nav .nav-link {
    color: #FFF;
    display: flex;flex-direction: column;align-items: center;justify-content: center;align-content: center;padding: 5px 15px;}
.mainmenu2.navbar-dark .nav-link i{ margin: 6px 0;font-size: 18px;}
.mainmenu2 .dropdown-toggle::after {
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute;
    right: -3px;
}
.d-desktop{display: block}
.d-mobile {
    display: none!important;
}
.cameraItem{
    position: relative;
}
.cameraItem .cameraName{
    position: absolute;
    z-index: 11;
    top:0;
    padding: 5px 10px;
    left:0;
    color: #FFF;
    font-size: 14px;
}
.cameraError {
    color: #FFF;
    font-size: 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 100%;
    text-transform: uppercase;
}
.col-md-12.form-inline .form-group {
    margin:0 10px;
}