@media screen and (min-width:320px) and (max-width:359px){

    .login-position-rwd {padding-left: /*17vw*/8.84vw !important;}
    .liveview-position-rwd {padding-left: 18vw !important;}
    .liveview-position-rwd2 {padding-left: 18vw !important;}
    .nav-tabs .btn { font-size: 0.2rem !important; padding:1.3vw 1.9vw !important;}

}
@media screen and (min-width:375px) and (max-width:413px){

    .login-position-rwd {padding-left: /*19vw*/9.88vw !important;}
    .liveview-position-rwd {padding-left: 6vw !important;}
    .nav-tabs .btn {padding:0.6vw 0.93vw !important;}

}
@media screen and (min-width:414px) and (max-width:500px){

    .login-position-rwd {padding-left: /*21vw*/10.92vw !important;}
    .liveview-position-rwd {padding-left: 6vw !important;}
    .nav-tabs .btn {padding:1vw 1.627vw;}

}
@media screen and (min-width:501px) and (max-width:600px){
    .login-position-rwd {padding-left: /*26vw*/13.52vw !important;}
    .liveview-position-rwd {padding-left:15vw !important;}
    .nav-tabs .btn {padding:0.6vw 3.67vw !important;}

}
@media screen and (min-width:601px) and (max-width:800px){
    .login-position-rwd {padding-left: /*15.5vw*/8.06vw !important;}
    .nav-tabs .btn {padding:0.6vw 2.21vw !important;}

}
@media screen and (min-width:801px) and (max-width:1024px){
    .login-position-rwd {padding-left: /*26vw*/13.52vw !important;}

}
@media screen and (min-width:1025px) and (max-width:1280px){
    .login-position-rwd {padding-left: /*34vw*/17.68vw !important;}

}


@media screen and (min-width:1281px) and (max-width:1366px){
    .login-position-rwd {padding-left: /*36vw*/18.72vw !important;}

}

@media screen and (min-width:1367px) and (max-width:1600px){
    .login-position-rwd {padding-left: /*44vw*/18.72vw !important;}

}
@media screen and (min-width:1601px) and (max-width:1920px){
    .login-position-rwd {padding-left: /*47vw*/24.44vw !important;}

}

@media screen and (min-width:1921px) and (max-width:2160px){
    .login-position-rwd {padding-left: /*50vw*/26vw !important;}

}
@media screen and (min-width:2161px) and (max-width:3200px){
    .login-position-rwd {padding-left: /*55vw*/28.6vw !important;}

}

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
/*時間搜尋*/
#wrapper{
    width: 780px;
    margin: auto;
}

.log-wrapper {
    float: right;
}
.log {
    max-height: 500px;
    overflow: auto;
}
.log .log__entry {
    margin: .1em 0;
    padding: .1em .2em;
    border: 1px solid black;
    white-space: nowrap;
}
/*時間搜尋*/

/*canvas FIX BUG*/
canvas.streaming {padding: 0px !important; margin: 0px !important;
width: 100% !important; height: 100% !important;}
/*canvas FIX BUG*/

/*new add */
  /*系統資訊*/
  .table-scrollbar {
    position: relative!important;
    height: 200px !important;
    overflow: auto!important;
}

.table-wrapper-scroll-y {
    display: block!important;
}
/*系統資訊*/

.accordion-button {
color:#e7f1ff;
background-color: #313131;
}.accordion-button:not(.collapsed) {
color:#e7f1ff;
background-color: #313131;
}.accordion-button::after {

color:#e7f1ff;
}
.accordion-collapse li:hover {background-color:#0d6efd; cursor: pointer;}
.accordion-collapse li {padding: 5px 0px 5px 10px;}
    .nav-pills .nav-link {color: white;background-color:transparent; }
    .nav-pills .nav-link:hover {color: white; background-color:#0d6efd ; border-radius: 0px;}
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {color: #131313;background-color: #fff !important; border-radius: 0px; font-weight: bold;}

@media screen and (max-width: 500px) {

    .btn-fix {padding: 0.2rem !important;
    margin-left: 1.5vw !important;
margin-top: 1vh;}

.nav-btn-fix {border: none !important;}

}
hr {margin: 0.7rem 0;}
.ptz-btn-size { width: 50px; height: 45px;}

/* .video-lost {border-width:thin !important;
background:url(../images/video-lost.svg); background-repeat: no-repeat;
background-color: blue !important;
background-position: center center;
} */


.hover-1:hover { background-color: blue !important;}
/*new add*/
body {
    font-family: 'Poppins', sans-serif;
    background: #232323;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    /*padding: 15px 10px;*/
    padding: 5px 10px;
    background: #232323!important;
    border: none;
    border-radius: 0;
    /*margin-bottom: 40px;*/
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
    color:#fff !important;
}
.navbar-light .navbar-nav .nav-link {
    color:#fff !important;
}
.navbar-light .navbar-nav .nav-link:hover {
    color:#0d6efd !important;
}
.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #313131;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding:6px;
    background: #232323;
    border-bottom: solid 1px #232323;
}

#sidebar ul.components {
    /*padding: 20px 0;*/
    padding: 0px;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #eee;
    background: #005DA2;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #0d6efd;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    /*background: #003e6d;*/
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    /*padding: 20px;*/
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }

    #sidebar.active {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }
}