/* header */
.menu-sidebar2 {
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
}
.inline {
    display: inline-block;
}
.italic {
    font-style: italic;
}
.copyright {
    position: relative;
    text-align: left;
    padding: 0 9px;
}
/* menu sidebar */
.menu-sidebar2 .logo, .header-desktop2 {
    height: 75px;
}
/* dropdown btn */
.dropbtn {
    font-size: 16px;
    border: none;
}
.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}


.btn-scn {
    color: #fff;
    background-color: grey;
    border-color: grey;
    border-radius: 3px;
}

.btn-scn:hover {
    color: #fff;
    background-color: lightgrey;
    border-color: lightgrey;
}

.dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0 6px 30px 3px rgba(130,140,145,.3);
    right: 0;
    border-radius: 3px;
    border-top-right-radius: 0;
    min-width: 100px;
    z-index: 10;
    overflow: hidden;
}
.dropdown-content a {
    display: block;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 22px;
    padding: 6px 10px;
    color: #828c91;
    cursor: pointer;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #ddd;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
    /*background-color: #fff;*/
    box-shadow: 0 6px 30px 3px rgba(130,140,145,.3);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
select.dropdown-content, select.dropdown-content option {
    padding: 6px 10px;
    font-size: 12px;
    border-bottom: 1px solid #ddd;
    color: #828c91;
}
.header-desktop2 {
    background: #fff;
    box-shadow: none;
    border-bottom: 2px solid #056fb2;
    left: 250px;
}
.header-desktop2 .section__content {
    padding: 0;
}
/*login page*/
.login-layout, .logout-layout {
    background: url(../images/bg-login.png) no-repeat center center fixed;
    background-size: cover;
}
.login-layout img.logo, .logout-layout img.logo {
    width: 70%;
}
/*logout page*/
.logout-container {
    width: 375px;
    margin: 0 auto;
    color: #fff;
}
/* left-sidebar */
.menu-sidebar2 {
    background: #edf1f6;
    overflow: hidden;
    width: 250px;
}
.menu-sidebar2 .logo .img-140 {
    height: 205px;
}
.menu-sidebar2 .logo img {
    max-width: 80%;
}
.account2 {
    padding: 10px 12px 0;
    display: block;
}
.account2 .fa {
    margin-right: 10px;
}
.account2 span a {
    font-size: 12px;
    color: #666;
}
.account2 span a:hover {
    text-decoration: underline;
}
.account2 span {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    margin-top: 9px;
}
.menu-sidebar2 .account2 .image {
    display: none;
}
.menu-sidebar2 .logo {
    background: #fff;
    box-shadow: none;
    border-bottom: 2px solid #056fb2;
}
.navbar-sidebar2 .navbar__list li a, .navbar-sidebar2 .navbar__list li .arrow i {
    color: #666;
}
.navbar-sidebar2 .navbar__sub-list li a, .navbar-sidebar2 .navbar__list li .arrow.up i.fas.fa-angle-down {
    background: #056fb2;
    color: #fff;
}
.navbar-sidebar2 .navbar__list li.active > a, .navbar-sidebar2 .navbar__list li a:hover, .navbar-sidebar2 .navbar__list li a.open {
    background: #056fb2;
    color: #fff;
}
span.menu {
    padding: 10px 5px;
}
span.comp-name {
    padding: 20px !important;
    width: 100px;
    line-height: 1;
}
span.comp-name .comp {
    font-size: 12px;
    font-style: italic;
}
span.translate select.form-control {
    border: none !important;
    height: 48px !important;
}
/* login page */
.login-container {
    width: 400px;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* right sidebar */
.menu-sidebar2.right {
    width: 350px;/*34%;/*23.5%;*/
    height: 100%;
    left: auto;
    right: 0;
    color: #056fb2;
    background: #fff;
    box-shadow: 0 0 10px 0 grey;
    z-index: 999;
}
.pg-content .menu-sidebar2.right, .pg-screen-detail .menu-sidebar2.right {
    overflow-y: auto;
}
.menu-sidebar2.right .img-logo {
    padding: 150px 20px 0;
    text-align: center;
}
.menu-sidebar2.right .img-logo img {
    width: 65%;
}
.menu-sidebar2 .content {
    margin-top: -20px;
    padding: 0 30px;
    text-align: center;
}
.menu-sidebar2 .content h4 {
    padding: 0 0 10px;
    font-weight: 600;
    color: #056fb2;
}
.menu-sidebar2 .content span {
    font-size: 14px;
    word-break: break-word;
}
/* body content */
.page-container2 {
    background: #fff;
    padding-left: 250px;
}
.page-container2.full {
    padding: 0 0 0 250px !important;
}
.page-container2.center {
    padding: 0 350px 0 250px;
}
h1, h2, h3, h4, h5, h6 {
    color: #666;
}
.account2 > a, .navbar-sidebar2 .navbar__list li:hover .arrow i {
    color: #ced2d7;
}
.au-breadcrumb {
    background: #9ab1d7;
    border-bottom: 10px solid #edf1f6;
}
.au-breadcrumb.grey {
    background: #edf1f6;
}
.au-breadcrumb .col-md-12 {
    padding: 0;
}
.au-breadcrumb a.icon {
    display: inline;
}
.au-breadcrumb a.icon img {
    width: 13%;
}
.au-breadcrumb-left input {
    color: #fff;
    /*background-image: url(../images/icon/icon08.png);*/
    background-repeat: no-repeat;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 30px;
    padding-left: 38px;
}
.au-breadcrumb-left input::placeholder {
    color: #ffffffc2;
}
.au-breadcrumb.grey .search input {
    background-image: url(../images/icon/search-grey-icon.svg);
    background-repeat: no-repeat;
}
.au-breadcrumb-content {
    /*margin-top: 8px;*/
}
.au-breadcrumb button.btn {
    color: #fff !important;
    border: 1px solid #fff !important;
    padding: 4px 8px !important;
    margin: 0 10px !important;
    width: auto !important;
}
.au-breadcrumb .btn-combine button.btn {
    margin: 0 !important;
}
.au-breadcrumb .btn-combine button.left {
    border-right: none !important;
}
.au-breadcrumb .btn-combine button.right {
    border-left: none !important;
}
.au-breadcrumb button.btn:hover {
    background: #056fb2;
}
.au-breadcrumb-span, .au-breadcrumb__list .active a, .au-breadcrumb__list li {
    color: #fff;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button] {
    background: #056fb2 !important;
    color: #fff !important;
}
.widget-header h4.smaller {
    padding: 20px 30px 0;
}
.widget-header {
    margin: 18px 0;
    display: flex;
    align-items: center;
    padding: 0 24px;
}
.widget-header .left {
    flex: 1 1 auto;
}
.widget-header .right {
    flex: 0 0 auto;
}
.widget-header .left span.title {
    font-size: 20px;
    line-height: 27px;
    height: 27px;
}
.widget-header .left span.ls-count {
    font-size: 14px;
    color: #aaaeb3;
    font-style: italic;
    margin-left: 12px;
}
.widget-header .right .icon {
    width: 34px;
    height: 34px;
}
.widget-main {
    padding: 0 24px;
}

/* content page */
/*select.form-control:not([size]):not([multiple]) {
    height: calc(3.25rem + 2px);
}*/
.menu-sidebar2 button.btn {
    border-color: #5f5f64;
    color: #5f5f64;
    background: 0 0;
    margin: 24px 0 10px;
    width: 100%;
}
.menu-sidebar2 button.btn.checked, .menu-sidebar2 button.btn:hover, .menu-sidebar2 button.btn.active {
    background: #056fb2;
    color: #fff;
    border-color: #056fb2;
}
.pg-content img#blah {
    width: 50%;
}
.pg-content .content-detail, .pg-playlist-detail .playlist-gallery {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    box-sizing: border-box;
    width: calc(100%);
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    margin-bottom: 100px;
}
.content-item {
    display: inline-block;
    width: calc(((100vw - 672px)/ 4) - 24px);
    height: calc((((100vw - 600px)/ 4) - 24px) * .9516);
    font-size: calc((((100vw - 440px)/ 4) - 24px) * .0679015);
    position: relative;
    margin: 0 24px 24px 0;
    background: #ecf1f6;
    border-radius: 4px;
    overflow: visible;
    font-size: 14px;
    color: #fff;
    text-align: left;
}
.content-item .content-img {
    height: 75%;
    width: 100%;
    border-radius: 4px 4px 0 0;
    background-clip: padding-box;
    overflow: hidden;
    position: relative;
    /*cursor: pointer;*/
}
.content-item .content-img:hover .shadow {
    transition: opacity .5s,background-color .5s;
    display: block;
    background: rgba(0, 0, 0, .7);
}
.content-item .content-img .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.5s ease;
}
.content-item .content-img img.thumbnail {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}
.icon.top-bar {
    position: absolute;
    left: 0;
    top: 0;
    right: 15px;
    display: none;
    width: auto;
    opacity: 1;
    display: block;
}
.icon.top-bar span.delete {
    transform: translate3d(0,-40px,0);
    opacity: 0;
    transition: all 0s ease-in;
    cursor: pointer;
    margin-left: 10px;
    display: inline-block;
    background-size: 20px 22px;
    width: 20px;
    height: 22px;
    right: 0;
    position: absolute;
    background-image: url(../images/icon/delete-default.svg);
    background-repeat: no-repeat;
}
.icon.top-bar .edit {
    transform: translate3d(0,-40px,0);
    opacity: 0;
    transition: all 0s ease-in;
    cursor: pointer;
    display: inline-block;
    left: 0;
    position: absolute;
    color: #fff;
}
.dropdown.inline.icon {
    margin-left: 0;
}
.content-item .content-img:hover span.delete {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: all .2s .3s ease-in;
    background-image: url(../images/icon/delete-hover.svg);
    background-repeat: no-repeat;
}
.content-item .content-img:hover a.edit {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: all .2s .3s ease-in;
    padding: 15px 0;
    margin: 0;
}
.content-item .content-img a.edit:hover {
    text-decoration: underline;
}
.content-item .content-title {
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    background-color: #ecf1f6;
    width: 100%;
    height: 25%;
    display: block;
    vertical-align: middle;
    color: #5f5f64;
    font-size: 15px;
    padding: 0 15px;
    line-height: 60px;
    border-radius: 0 0 4px 4px;
    word-wrap: break-word;
}
.content-item .content-title span.name {
    font-size: 13px;
    display: block;
    padding-top: 3%;
    line-height: 1;
    color: #4b4b50;
    vertical-align: middle;
    line-height: 1.4;
    width: auto;
    position: relative;
    z-index: 1;
}
.content-item .content-title span.type, .content-item .content-title span.duration {
    position: absolute;
    bottom: 3%;
    font-size: 86%;
    color: #828c91;
    line-height: 1.4;
    font-weight: 400;
    font-style: italic;
    font-size: 11px;
}
.content-item .content-title span.duration {
    right: 15px;
}
.au-breadcrumb span.btn {
    border: 1px solid #fff;
    color: #fff;
}
.au-breadcrumb span.btn:hover {
    border: 1px solid #056fb2;
    background: #056fb2;
}
button.btn.upload {
    width: 200px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
button.btn.cancel {
    width: 200px;
    margin-left: 10px;
}
button.btn.cancel:hover {
    width: 200px;
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 14px;
}
.form-group {
    margin-bottom: 15px;
    position: relative;
}
.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}
.form-control {
    border-radius: 4px;
}
.col-md-12 {
    width: 100%;
}
@media (min-width: 768px) {
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float: left;
    }
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        float: left;
    }
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
    }
}
/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 80px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto !important;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 65%;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.close {
    color: #aaaaaa;
    float: right;
    text-align: right;
    font-size: 28px;
    font-weight: bold;
}
.close1 {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close:hover, .close:focus, .close1:hover, .close1:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* icon */
.fa-stats:before {
    content: url(../images/icon/icon01.png);
}
.fa-usrs:before {
    content: url(../images/icon/icon02.png);
}
.fa-sets:before {
    content: url(../images/icon/icon03.png);
}
.fa-acc:before {
    content: url(../images/icon/icon044.png);
}
.fa-screen:before {
    content: url(../images/icon/icon05.png);
}
.navbar-sidebar2 .navbar__list li.active a .fa-screen:before, .navbar-sidebar2 .navbar__list li a:hover .fa-screen:before {
    content: url(../images/icon/screen-hover.png);
}
.fa-content:before {
    content: url(../images/icon/icon06.png);
}
.fa-time:before {
    content: url(../images/icon/output-onlinepngtools.png);
}
.navbar-sidebar2 .navbar__list li.active a .fa-content:before, .navbar-sidebar2 .navbar__list li a:hover .fa-content:before {
    content: url(../images/icon/content-hover.png);
}
.fa-playlist:before {
    content: url(../images/icon/icon071.png);
}
.navbar-sidebar2 .navbar__list li.active a .fa-playlist:before, .navbar-sidebar2 .navbar__list li a:hover .fa-playlist:before {
    content: url(../images/icon/playlist-hover.png);
}
.fa-account:before {
    content: url(../images/icon/settings.png);
}
.navbar-sidebar2 .navbar__list li.active a .fa-account:before, .navbar-sidebar2 .navbar__list li a:hover .fa-account:before, .navbar-sidebar2 .navbar__list li a.open .fa-account:before {
    content: url(../images/icon/settings-hover.png);
}
/*li a:hover .fa-playlist:before {
    content: url(../images/icon/icon07.png);
}*/
.fa-srch:before {
    content: url(../images/icon/icon08.png);
}
.fa-view:before {
    content: url(../images/icon/icon09.png);
}
.fa-filter:before {
    content: url(../images/icon/icon10.png);
}
.fa-more:before {
    content: url(../images/icon/icon11.png);
}
.fa-plays:before {
    content: url(../images/icon/icon12.png);
}
.fa-dwl:before {
    content: url(../images/icon/icon13.png);
}
.fa-screen-settings:before {
    content: url(../images/icon/icon14.png);
}
.navbar-sidebar2 .navbar__list li a {
    padding: 5px 35px 0;
}
.navbar-sidebar2 .navbar__list li > a span {
    top: 10px;
    position: relative;
    vertical-align: top;
}

/* Generic Styling, for Desktops/Laptops */
table {
    width: 100%;
    border-collapse: collapse;
    padding: 50px;
    margin: auto !important;
}
/* Zebra striping */
tr:nth-of-type(odd) {
    background: #ffffff;
}
th {
    background: #4b4b50;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: center;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}
.form-style-1 {
    margin: 1px;
    max-width: 200px;
    padding: 0px;
    font: 11px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}
.form-style-1 label {
    margin: 0 0 3px 0;
    padding: 0px;
    display: block;
    font-weight: bold;
}
.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #BEBEBE !important;
    padding: 7px;
    margin: 0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus {
    -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
ul {
    list-style-type: none;
}
div.gallery {
    padding: 12px 12px 12px 12px;
    border: 1px solid #ccc;
    float: center;
    width: 374px;
}
div.gallery:hover {
    border: 1px solid #777;
}
div.gallery img {
    width: 100%;
    height: auto;
}
/* page statistic */
table.tbl-list td {
    padding: 15px 0;
    border-right: none;
    border-left: none;
    border-top: none;
}
table.tbl-list th {
    background: #e6ebf0;
    border: none !important;
    color: #5f5f64;
    padding: 0;
}
table.tbl-list img.thumbnail, table.tbl-list video {
    width: 60px;
    height: 60px;
    border-radius: 3px;
    display: inline-block;
    float: left;
    object-fit: cover;
}
th.wid15 {
    width: 15%;
}
th.wid25 {
    width: 25%;
}
th.wid30 {
    width: 30%;
}
th.wid35 {
    width: 35%;
}
table.tbl-list tr {
    line-height: 60px;
    height: 60px;
    font-size: 16px;
    color: #808388;
    position: relative;
    overflow: hidden;
    padding-right: 10px
}

table.tbl-list span.name {
    overflow: hidden;
    padding-left: 35px;
    text-align: left;
    display: block;
    line-height: 1.5;
    word-break: break-all;
}
/* page user */
span.btn.user {
    padding: 5px 30px;
}
.usr-list {
    width: 190px;
    text-align: center;
    margin-bottom: 60px;
    cursor: pointer;
    margin: 0 24px 24px 0;
    font-size: 14px;
    display: inline-block;
}
.usr-list span.name {
    color: #5f5f64;
    text-align: center;
    font-size: 16px;
    padding: 10px 5px 0;
    display: block;
    overflow: hidden;
}
.usr-list span.email {
    font-style: italic;
}
.modal .form-group.btn {
    text-align: center;
    margin: 20px 0;
}
/* page setting */
/*.modal.settings {
    transition-property: -webkit-transform,-moz-transform,-o-transform,transform;
    transition-duration: .5s;
    transform: translate3d(-340px,0,0);
}*/
form.form-horizontal {
    margin: 40px 0 0;
}
.menu-sidebar2 form.form-horizontal {
    margin: 0;
}
.modal-content {
    padding: 0;
    border: none;
}
.modal-content .close:hover {
    color: #ddd;
}
.modal-content .header {
    background: #4c4b51;
    padding: 20px 40px;
    border-radius: .3rem .3rem 0 0;
}
.modal-content .header h4 {
    line-height: 30px;
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
}
.pg-user .widget-main {
    padding: 20px 24px;
}
#addContent, #screenSetting, #editPlaylist, #addScreen, #addPlaylist {
    display: none;
}
.menu-sidebar2 .form-control:disabled {
    background: #e9ecef0a !important;
    color: #4b4b50 !important;
}
select[name=day_of_week] option:disabled, select#playlist_id option:disabled {
    background: #ccd !important;
    color: #4b4b50 !important;
}
.menu-sidebar2 .img-preview {
    top: 75px;
    height: 222px;
    max-height: 222px;
    overflow: hidden;
    position: relative;
}
.menu-sidebar2 .img-preview img {
    max-height: 100%;
    width: 100%;
    height: 222px;
    display: block; 
    object-fit: cover; 
    object-position: center; 
}
.preview.icon {
    position: absolute;
    bottom: 5px;
    left: 0;
    padding: 18px 24px;
    margin-left: 0;
    width: 12px;
    height: 12px;
    cursor: pointer;
    z-index: 6;
    background-image: url(../images/icon/preview-default.svg);
    background-repeat: no-repeat;
}
.preview.play.icon {
    background-image: url(../images/icon/play-preview-default.svg);
    background-repeat: no-repeat;
}
.menu-sidebar2.detail .content {
    margin-top: 105px;
    text-align: left;
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
}
.menu-sidebar2 label, .menu-sidebar2 .info {
    color: #aaaeb3;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    display: block;
}
.menu-sidebar2 input, .menu-sidebar2 select {
    color: #4b4b50;
    font-weight: 400;
    font-style: normal;
    border: none !important;
    border-bottom: 1px solid #d7dce1 !important;
    padding: 0 0 6px;
    border-radius: 0;
}
.menu-sidebar2 label.radio {
    font-size: 1rem;
    color: #4b4b50;
}
.menu-sidebar2 .other input, .menu-sidebar2 .other select, .other span.note {
    font-size: 13px;
    color: #4b4b50;
}
.menu-sidebar2 .form-control:focus {
    box-shadow: none;
}
.menu-sidebar2 .info .lbl {
    font-size: 16px;
    color: #4b4b50;
    margin-bottom: 12px;
    display: inline-block;
    width: 65%;
}
span.val {
    color: #5f5f64;
}
/* scrollbar */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
/* playlist page */
.playlist-detail {
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    margin-bottom: 24px;
}


.playlist-item {
    border: 1px solid #d7dce1;
    border-radius: 3px;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 11px 0 5px;
    background-color: #fff;
    transition: margin-left .2s,margin-right .2s,padding-left .2s,padding-right .2s,box-shadow .2s,border-color .2s;
    display: flex;
    align-items: center;
    /*cursor: pointer;*/
    margin-bottom: 10px;
    height: 78px;
}
.playlist-item:hover {
    box-shadow: 0 6px 30px 3px rgba(130,140,145,.3);
    border-color: transparent;
}
.playlist-item .gallery {
    flex: 0 0 auto;
    padding: 0;
    margin-right: 12px;
    transition: margin-right .2s;
    font-size: 0;
    line-height: 0;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border: none;
    /*border-radius: 3px;*/
}
.playlist-item .gallery:hover {
    border: none;
}
.playlist-item .item-img {
    width: 32px;
    height: 32px;
    position: relative;
    overflow: hidden;
    vertical-align: baseline;
    display: inline-block;
    vertical-align: top;
    margin: 0 2px 2px 0;
}
.playlist-item .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.playlist-item .item-title {
    font-size: 16px;
    line-height: 22px;
    height: 22px;
    color: #4b4b50;
}
.subtitle, .playlist-item .item-subtitle {
    font-style: italic;
    font-size: 13px;
    line-height: 17px;
    height: 17px;
    color: #aaaeb3;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
}
.playlist-item .info {
    flex: 1 1 auto;
}
.playlist-item .controls {
    flex: 0 0 auto;
    position: relative;
    width: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 12px;
    transition: width .1s;
    transition-delay: .4s;
    height: 100%;
    cursor: default;
}
.playlist-item .vertical-icon {
    opacity: 1;
    position: absolute;
    right: 6px;
    transform: none;
    flex: 0 0 auto;
    cursor: pointer;
    transition: opacity .5s,transform .5s;
    margin-left: 24px;
    width: 4px;
    height: 22px;
    background-size: 4px 22px;
    background-image: url(../images/icon/dots-vrt.svg);
    background-repeat: no-repeat;
    background-position: center;
}
/* playlist detail page */
.playlist-info {
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
}
.playlist-info .header {
    margin-left: -24px;
    margin-bottom: 24px;
    border: 1px solid #d7dce1;
    border-left: none;
    border-right: none;
    margin-right: -24px;
    padding-left: 26px;
    padding-right: 26px;
    height: 78px;
    transition: margin-left .2s,margin-right .2s,padding-left .2s,padding-right .2s,box-shadow .2s,border-color .2s;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.playlist-info .info {
    flex: 1 1 auto;
    overflow: hidden;
}
.playlist-info .info .title {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
}
.playlist-info .controls {
    width: 168px;
    transition-duration: .5s;
    transition-delay: 0s;
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 12px;
    transition: width .1s;
    transition-delay: .4s;
    height: 100%;
    cursor: default;
}
.icon {
    flex: 0 0 auto;
    cursor: pointer;
    transition: opacity .5s,transform .5s;
    opacity: 0;
    margin-left: 24px;
    transition-delay: .2s,.2s;
    opacity: 1;
    width: 24px;
    background-size: 24px 24px;
    height: 24px;
    background-position: center;
}
.playlist-info .controls>:nth-child(1) {
    margin-left: 0;
}
.playlist-info .dropdown-content {
    top: 25px;
}
.add-widget {
    background-image: url(../images/icon/add-widget.svg);
    background-repeat: no-repeat;
}
.add-content.active {
    background-image: url(../images/icon/add-content-active.svg);
    background-repeat: no-repeat;
}
.add-content.not-active, .add-content {
    background-image: url(../images/icon/add-content-default.svg);
    background-repeat: no-repeat;
}
.add-content.not-active:hover, .add-content:hover {
    background-image: url(../images/icon/add-content-hover.svg);
    background-repeat: no-repeat;
}
.share-content {
    background-image: url(../images/icon/share-screen-default.svg);
    background-repeat: no-repeat;
}
.share-content:hover, .share-content.not-active:hover {
    background-image: url(../images/icon/share-screen-hover.svg);
    background-repeat: no-repeat;
}
.share-content.active {
    background-image: url(../images/icon/share-screen-active.svg);
    background-repeat: no-repeat;
}
.dot-horizontal {
    background-image: url(../images/icon/dots-hrz.svg);
    background-repeat: no-repeat;
    margin-left: 24px !important;
}
.dot-vertical {
    background-image: url(../images/icon/dots-vrt.svg);
    background-repeat: no-repeat;
    margin-left: 24px !important;
}
.tooltip-text {
    visibility: hidden;
    width: 100px;
    background-color: #5F5F64;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    font-size: 12px;
    font-style: normal;
    margin-left: -35px;
    bottom: 70%;
}
.icon:hover .tooltip-text, .status:hover .tooltip-text, .playlist-info .controls .duration .start:hover .tooltip-text, .playlist-info .controls .duration .end:hover .tooltip-text, span.name:hover .tooltip-text {
    visibility: visible;
}
.pg-playlist-detail .base-sidebar, .pg-screen-detail .base-sidebar {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}
.menu-sidebar2 .header {
    top: 75px;
    position: relative;
    flex: 0 0 auto;
    height: 70px;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #d7dce1;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-size: 20px;
    color: #5f5f64;
}
.pg-playlist-detail .menu-sidebar2.right .info, .pg-screen-detail .menu-sidebar2.right .info {
    margin-top: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.pg-playlist-detail #addScreen.menu-sidebar2.right .info, .pg-playlist-detail #addContent.menu-sidebar2.right .info, .pg-screen-detail #addPlaylist.menu-sidebar2 .info {
    margin-top: 70px;
}
.pg-playlist-detail .menu-sidebar2.right .info .search, .pg-screen-detail .menu-sidebar2.right .info .search {
    position: absolute;
    height: 42px;
    overflow: hidden;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid #d7dce1;
    display: flex;
    align-items: center;
    padding: 0 24px;
    width: 100%;
}
input.clear {
    border-bottom: none !important;
    padding: 0;
}
.pg-playlist-detail .menu-sidebar2.right .info .scope, .pg-screen-detail .menu-sidebar2.right .info .scope {
    margin: 24px 0 0;
    display: block;
    width: 100%;
    top: 40px;
    position: relative;
    padding: 0 18px;
}
.pg-playlist-detail .menu-sidebar2.right .scope .select-all {
    width: 100%;
    display: block;
    position: relative;
    height: 22px;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content, .pg-screen-detail .menu-sidebar2.right .scope .content {
    margin: 24px 0 0 !important;
    padding: 0;
    display: block;
    position: relative;
    height: 100%;
}
.pg-playlist-detail .menu-sidebar2.right .search .filter {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 24px;
    cursor: pointer;
    background-image: url(../images/icon/filter-default.svg);
    background-repeat: no-repeat;
}
.pg-playlist-detail .menu-sidebar2.right .search input, .pg-screen-detail .menu-sidebar2.right .search input {
    flex: 1 1 auto;
    font-size: 16px;
}
.pg-playlist-detail .menu-sidebar2.right .search input::placeholder, .pg-screen-detail .menu-sidebar2.right .search input::placeholder {
    color: #AAAEB3;
}
.pg-playlist-detail .menu-sidebar2.right .search .search-upload.icon, .pg-playlist-detail .menu-sidebar2.right .search .search-upload.icon.not-active {
    flex: 0 0 auto;
    width: 18px;
    height: 20px;
    cursor: pointer;
    background-image: url(../images/icon/upload-content.svg);
    background-repeat: no-repeat;
}
.pg-playlist-detail .menu-sidebar2.right .search .search-upload.icon:hover, .pg-playlist-detail .menu-sidebar2.right .search .search-upload.icon.active {
    background-image: url(../images/icon/upload-content-hover.svg);
}
.pg-playlist-detail .menu-sidebar2.right .scope .select-all label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 22px;
    color: #4b4b50;
    font-size: 16px;
}
.pg-playlist-detail .menu-sidebar2.right .scope .select-all label input {
    display: block;
    visibility: hidden;
    position: absolute;
}
.pg-playlist-detail .menu-sidebar2.right .scope .select-all span.tumbler {
    width: 40px;
    height: 22px;
    margin-left: 0;
}
.pg-playlist-detail .menu-sidebar2.right .scope .select-all input+span.tumbler:before {
    content: "";
    background-image: url(../images/icon/tumbler-off.svg);
    background-repeat: no-repeat;
    background-size: 40px 22px;
    background-repeat: no-repeat;
    width: 40px;
    height: 22px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.pg-playlist-detail .menu-sidebar2.right .scope .select-all input:checked+span.tumbler:before {
    background-image: url(../images/icon/tumbler-on.svg);
}
.pg-playlist-detail .menu-sidebar2.right .scope .select-all span.text {
    vertical-align: 5px;
    margin-left: 5px;
    color: #aaaeb3;
}
.pg-playlist-detail .menu-sidebar2.right .scope .select-all span.text.on {
    color: #4b4b50;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content .content-item, .pg-screen-detail .menu-sidebar2.right .scope .content .content-item {
    height: 40px;
    width: 320px;
    margin-bottom: 12px;
    padding-right: 24px;
    box-sizing: border-box;
    position: relative;
    /*cursor: pointer;*/
    background: #fff;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content .content-item .image, .pg-screen-detail .menu-sidebar2.right .scope .content .content-item .image {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 3px;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content .content-item .image img, .pg-screen-detail .menu-sidebar2.right .scope .content .content-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .detail, .pg-screen-detail .menu-sidebar2.right .scope .content-item .detail {
    width: 210px;
    height: auto;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    padding: 0 5px;
    font-size: 16px;
    white-space: nowrap;
}
.pg-screen-detail .menu-sidebar2.right .scope .content-item .detail {
    width: 215px;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .detail {
    width: 168px;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .detail span.title, .pg-screen-detail .menu-sidebar2.right .scope .content-item .detail span.title  {
    font-size: 16px !important;
    color: #5f5f64;
    width: 100%;
    display: inline-block;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .detail span.type, .pg-screen-detail .menu-sidebar2.right .scope .content-item .detail span.type {
    color: #aaaeb3;
    display: block;
    width: 100px;
    font-size: 12px;
    overflow: hidden;
    line-height: normal;
}
.pg-screen-detail .menu-sidebar2.right #playI .detail span.type {
    width: 100%;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .chk-switch, .pg-screen-detail .menu-sidebar2.right .scope .content-item .chk-switch {
    position: absolute;
    right: 8px;
    top: 0;
    width: 26px;
    height: 40px;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .chk-switch>label, .pg-screen-detail .menu-sidebar2.right .scope .content-item .chk-switch>label {
    right: 0;
    top: 50%;
    width: 26px;
    height: 26px;
    position: absolute;
    margin-top: -12px;
    cursor: pointer;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .chk-switch>label input, .pg-screen-detail .menu-sidebar2.right .scope .content-item .chk-switch>label input {
    display: block;
    visibility: hidden;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .chk-switch>label input+span.swtch, .pg-screen-detail .menu-sidebar2.right .scope .content-item .chk-switch>label input+span.swtch {
    display: block;
    width: 26px;
    height: 26px;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .chk-switch>label input+span.swtch:before, .pg-screen-detail .menu-sidebar2.right .scope .content-item .chk-switch>label input+span.swtch:before  {
    content: '';
    border: 1px solid #c5cacf;
    border-radius: 26px;
    background-clip: padding-box;
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .chk-switch>label input:checked+span.swtch:before, .pg-screen-detail .menu-sidebar2.right .scope .content-item .chk-switch>label input:checked+span.swtch:before {
    background-image: url(../images/icon/chk-group.svg);
}
.playlist-gallery .content-item.add-content-item {
    border-radius: 4px;
    background-color: #fff;
    border: 2px solid #ecf1f6;
    background-position: center;
    background-image: url(../images/icon/add-gallery.svg);
    background-repeat: no-repeat;
    background-size: 62px 62px;
    cursor: pointer;
}
.playlist-gallery .content-item.add-content-item:hover {
    box-shadow: 0 6px 30px 3px rgba(130,140,145,.3);
    border-color: #fff;
}
.pg-screen-detail .menu-sidebar2.right .scope .content-item .add-play, .pg-screen-detail .menu-sidebar2.right .scope .content-item .add-play.not-active {
    position: absolute;
    top: 7px;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-image: url(../images/icon/add-playlist-default.svg);
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
.pg-screen-detail .menu-sidebar2.right .scope .content-item .add-play {
    right: 0;
}
.pg-screen-detail .menu-sidebar2.right .scope .content-item .add-play:hover, .pg-screen-detail .menu-sidebar2.right .scope .content-item .add-play.active {
    background-image: url(../images/icon/add-playlist-hover.svg);
}
/* modal add playlist content */
#addGallery .content {
    padding: 70px 0;
    margin: 0 auto;
    width: 75%;
}
#addGallery .content span {
    width: 250px;
}
.dz-message {
    text-align: center;
    font-size: 28px;
}
.dropzone {
    background-color: #F2FFF9;
    border: 5px dashed rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 20px;
}
/* screen page */
.frame.group {
    padding: 0 0 60px;
}
.group-entity {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
}
.screen-item {
    width: calc(((100vw - 442px)/ 4) - 24px);
    height: 66px;
    /*overflow: hidden;*/
    position: relative;
    /*cursor: pointer;*/
    background: #ecf1f6;
    margin: 0 24px 24px 0;
    box-sizing: border-box;
    border-left: 6px solid #d7dce1;
    border-radius: 4px;
}
.screen-item .info-block {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 14px 0 14px 14px;
    -lh-property: 0;
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    height: 100%;
    float: left;
}
.screen-item .controls {
    height: 100%;
    width: 4px;
    display: block;
    float: right;
    cursor: pointer;
    position: relative;
    padding: 0 18px;
    bottom: -18px;
    /*vertical-align: middle;*/
}
span.status {
    position: relative;
    top: 1px;
    display: inline-block;
    margin: 2px 10px 2px 6px;
    border-radius: 50%;
    width: 6px;
    height: 6px;
}
.pg-screen-detail span.status {
    top: 10%;
    left: 16%;
    vertical-align: bottom;
    width: 8px;
    height: 8px;
    cursor: pointer;
}
span.status.online {
    background-color: #05cd7d;
}
span.status.offline {
    background-color: #ff5c27;
}
.screen-item span.title {
    display: inline-block;
    height: 19px;
    line-height: 19px;
    font-size: 14px;
    color: #4b4b50;
    max-width: calc(100% - 19px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.screen-item .sub-title {
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    color: #828c91;
}
.screen-item .sub-title span.status:hover .tooltip-text {
    visibility: visible;
}
.screen-item .sub-title span.status .tooltip-text {
    width: 70px;
}
.screen-item.add-screen-item {
    border: solid 2px #ecf1f6;
    background: url(../images/icon/add-gallery.svg) no-repeat center center;
    -webkit-background-size: 32px 32px;
    -moz-background-size: 32px 32px;
    background-size: 32px 32px;
}
.screen-item.add-screen-item:hover {
    box-shadow: 0 6px 30px 3px rgba(130,140,145,.3);
    border-color: #fff;
}
p#noresult, p.noresult {
    display: block;
    width: 100%;
    padding-bottom: 20px;
}
span.title a, .item-title a {
    color: #4b4b50;
}
span.title a:hover, .item-title a:hover {
    color: #3A3E42;
    text-decoration: underline;
}
.widget-header .text {
    position: absolute;
    color: #5f5f64;
    max-width: calc(100% - 245px);
}
.pg-screen-detail .playlist-info .header {
    border-top: none;
}
.widget-header.add {
    padding: 0 24px 15px;
}
.pg-screen-detail .widget-header .subtitle {
    position: absolute;
    top: 80%;
    overflow: hidden;
}
.right.setting.not-active {
    background-image: url(../images/icon/settings-default.svg);
    background-repeat: no-repeat;
    right: 44px;
}
.right.setting.not-active:hover {
    background-image: url(../images/icon/settings-hover.svg);
    background-repeat: no-repeat;
    right: 44px;
}
.right.setting.active {
    background-image: url(../images/icon/settings-active.svg);
    background-repeat: no-repeat;
    right: 44px;
}
.right.setting.icon span.tooltip-text {
    bottom: 98%;
    margin-left: -20px;
    z-index: 9999;
}
.playlist-info .header .info .title, .playlist-info .header .info .subtitle {
    display: inline-block;
    width: auto;
    margin: 0;
}
.playlist-info .header .info .subtitle {
    vertical-align: middle;
    margin: 0;
    padding-right: 10px;
}
.playlist-info .header .controls .duration {
    flex: 0 0 auto;
    color: #aaaeb3;
    font-size: 14px;
}
.playlist-info .header.h-50 {
    margin: 0 0 24px;
    padding: 0;
}
.menu-sidebar2 .info .hide {
    display: inline-block;
    width: 30%;
    text-align: right;
    cursor: pointer;
}
.pg-screen-detail .widget-header {
    display: block;
    margin: 18px 0 30px;
}
.pg-screen-detail .widget-header .left {
    display: inline-block;
    width: 70%;
}
.pg-screen-detail .widget-header .left .text, .pg-screen-detail .widget-header .left .stats {
    position: relative;
    display: inline-block;
    width: auto;
}
.pg-screen-detail .widget-header .right {
    display: inline-block;
    width: 7%;
    float: right;
}
.playlist-info .header .controls .duration .start, .playlist-info .header .controls .duration .end {
    /*cursor: pointer;*/
}
.playlist-info .controls .duration .tooltip-text {
    margin-left: -60%;
    bottom: 100%;
}
.playlist-info .controls .duration .end .tooltip-text {
    margin-left: 60%;
}
/* more text */
.morecontent span {
    display: none;
}
.morelink {
    display: block;
}
/* popup new group */
.form-group.chk-group {
    position: relative;
    padding: 0 40px 20px!important;
    /* height: calc(60vh); */
    overflow: auto;
    margin: 0;
}
.form-group.chk-group span.txt-select {
    margin: 10px 0 20px;
    display: block;
}
.form-group.chk-group li.ng-group {
    display: block;
    height: 26px;
    white-space: nowrap;
    width: 100%;
    line-height: 26px;
    margin-bottom: 24px;
    list-style: none;
    position: relative;
}
.form-group.chk-group li.ng-group label {
    top: 50%;
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    margin-top: -13px;
}
li.ng-group input[type="checkbox"] {
    display: block;
    visibility: hidden;
}
[disabled] {
    background-color: #05cd7d !important;
    border-color: #05cd7d !important;
    color: #5f5f64!important;
    opacity: .5!important;
}
.add-playlist .form-control:disabled {
    background-color: #e9ecef !important;
    border-color: #e9ecef !important;
    color: #eee;
    opacity: 1;
}
.chk-group li label input+span {
    display: block;
    width: 26px;
    height: 26px;
    color: #4b4b50;
    font-size: 16px;
    margin-left: 80px;
}
.chk-group li label input+span:before {
    content: '';
    border: 1px solid #c5cacf;
    border-radius: 26px;
    background-clip: padding-box;
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 0;
}
.chk-group li label input:checked+span:before {
    background-image: url(../images/icon/chk-group.svg);
}
li.ng-group .no-img-group {
    background-size: 26px 26px;
    background-image: url(../images/icon/add-group.svg);
    background-position: center;
    background-repeat: no-repeat;
    height: 26px;
    left: 35px;
    top: 0;
    display: inline-block;
    width: 40px;
    overflow: hidden;
    position: absolute;
    line-height: normal;
}
li.ng-group span.title {
    margin-left: 80px;
    color: #4b4b50;
}
.screen .image {
    background-image: url(../images/icon/screen-img.svg);
    background-size: 24px 22px;
    background-position: center;
    background-color: #d7dce1;
    background-repeat: no-repeat;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content .content-item .count-sc, .pg-screen-detail .menu-sidebar2.right .scope .content .content-item .count-sc {
    display: inline-block;
    margin-right: 6px;
}
.pg-screen-detail .menu-sidebar2.right .scope .content .content-item .count-sc, .pg-playlist-detail .menu-sidebar2.right .scope .content .content-item .count-sc {
    float: right;
}
.pg-screen-detail .menu-sidebar2.right .scope .content .content-item .count-sc .ttl, .pg-playlist-detail .menu-sidebar2.right .scope .content .content-item .count-sc .ttl {
    margin-top: 8px;
}
.pg-screen-detail .menu-sidebar2.right .scope .content .content-item .count-sc .ttl.active, .pg-playlist-detail .menu-sidebar2.right .scope .content .content-item .count-sc .ttl.active {
    background: #28A745;
    color: #fff;
}
.pg-screen-detail .menu-sidebar2.right .scope .content .content-item .count-sc .ttl.not-active, .pg-playlist-detail .menu-sidebar2.right .scope .content .content-item .count-sc .ttl.not-active {
    background: #DC3545;
    color: #fff;
}
.pg-playlist-detail .menu-sidebar2.right .scope .content-item .chk-switch {
    right: 0
}
.pg-playlist-detail .menu-sidebar2.right .scope .content .content-item .count-sc .ttl, .pg-screen-detail .menu-sidebar2.right .scope .content .content-item .count-sc .ttl {
    font-size: 12px;
    height: 20px;
    min-width: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 6.5705px;
    background-color: #ecf1f6;
    color: #828c91;
    border-radius: 10px;
    user-select: none;
    text-align: center;
}
/* disable am/pm in time */
#duration::-webkit-datetime-edit-ampm-field {
   display: none;
}
input[type=time]::-webkit-clear-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance:none;
    appearance: none;
    margin: -10px; 
}
/*.duration input[name="start_time"], .duration input[name="end_time"] {
    width: 60px;
}*/
/* schedule playlist */
.pad0 {
    padding: 0;
}
.mrb20 {
    margin-bottom: 20px;
}
.mrt20 {
    margin-top: 20px;
}
.mr4 {
    margin-right: 4px;
}
.mr5 {
    margin: 5px 0;
}
.full {
    width: 100%;
    padding: 0;
}
.schedule-playlist label {
    font-weight: 400;
}
.schedule-playlist label.full {
    width: 100%;
}
.schedule-playlist table.tbl-list {
    margin-top: 20px !important;
}
.schedule-playlist table.tbl-list td {
    padding: 15px;
    text-align: left;
    vertical-align: top;
}
table.tbl-list .form-group {
    line-height: 12px;
}
.pg-screen-detail.new #footer .row {
    display: block;
    margin-top: 30px;
}
/* duration for playlist content*/
#saveChanges {
    display: none;
}
span.duration input.duration-play {
    background: #fff0;
    text-align: right;
    font-size: 12px;
    color: #4b4b50;
}
.bottom.button-save {
    bottom: 0;
    transition-duration: 0.5s;
    transition-property: bottom;
    display: flex;
    -webkit-box-pack: justify;
    padding: 0 20px;
    height: 80px;
    background-color: #e6ebf0;
    position: fixed;
    width: auto;
    left: 200px;
    right: 340px;
    z-index: 99;
}
.btn-save-changes.left {
    width: 33.3%;
    padding-top: 25px;
    text-align: left;
    height: 30px;
    overflow: hidden;
}
.btn-save-changes.center {
    width: 33.3%;
    padding-top: 20px;
    text-align: center;
}
button.save-entities-changes {
    height: 40px;
    overflow: hidden;
    display: inline-block;
    color: #fff;
    line-height: 40px;
    padding: 0 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    transition: all .3s ease;
    background-color: #337ab7;
    border-color: #2e6da4;
}
button.save-entities-changes:hover {
    background-color: #286090;
    border-color: #204d74;
}
span.save-entities-changes:hover {
    background: #14dc8c;
}
.btn-save-changes.right {
    text-align: right;
    width: 33.3%;
    height: 80px;
    line-height: 80px;
}
span.not-save-entities-changes {
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
    background-image: url(../images/icon/dont-save.svg);
    -webkit-background-size: 12px;
    -moz-background-size: 12px;
    background-size: 12px;
    background-position: 100% center;
    background-repeat: no-repeat;
    padding-right: 20px;
    font-size: 16px;
    color: #a0a0a0;
    text-decoration: underline;
}
label.dayweek {
    padding: 0 15px 0 5px;
}
/* new changes for add playlist to schedule screen */
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content-item .detail span.title {
    font-size: 15px !important;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content .content-item {
    height: auto;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content .content-item {
    width: 100%;
    padding-right: 0;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content .content-item .image {
    display: inline-block;
    width: 15%;
    vertical-align: top;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content-item .detail {
    display: inline-block;
    width: 83%;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content-item .detail .wd {
    width: 250px;
    height: auto;
    display: block;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content-item .detail .wd .flx {
    display: flex;
    flex-wrap: wrap;
    height: 40px;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content .content-item .count-sc {
    width: 86%;
    display: inline-block;
    float: unset;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content .content-item span.time-segment {
    font-size: 14px !important;
    color: #5f5f64;
    padding: 5px 5px 5px 0;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content-item .chk-switch {
    position: relative;
    display: inline-block;
}
.pg-playlist-detail .menu-sidebar2.right.sch .scope .content .content-item .count-sc .ttl {
    display: inline-block;
}
#btnAddScreen .tooltip-text {
    margin-left: -60px;
    width: 150px;
}
.pd0 {
    padding: 0 !important;
}
/* edit group details*/
#editGroup .form-group.chk-group {
    padding: 0 !important;
    overflow: hidden;
}
#editGroup .form-group.chk-group li.ng-group {
    margin-bottom: 12px;
}
#editGroup .ungroup-ls {
    padding-top: 10px;
}
/* user list */
.usr-info {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 14px 0 14px 14px;
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: calc(100% - 20px);
    height: 100%;
    float: left;
    font-size: 14px;
}
.usr-list span.name {
    font-size: 14px;
}
.usr-list .controls {
    height: 100%;
    width: 4px;
    display: block;
    float: right;
    cursor: pointer;
    position: relative;
    padding: 0;
    bottom: -38px;
}
.required {
    color: red;
}
/* ellipsis text */
.ellip {
    display: block;
    height: 100%;
}
.ellip-line {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    max-width: 100%;
}
.ellip,
.ellip-line {
    position: relative;
    overflow: hidden;
}
span.name.mores {
    width: 135px !important;
    height: 25px !important;
    overflow: hidden;
}
/* new added 10/7 */
.navbar-sidebar2 .navbar__sub-list li a {
    height: 55px;
}
.page-container2.full.acc {
    overflow-x: hidden;
}
table.wd80 {
    margin: 0 !important;
    width: 80%;
}
.txt-right {
    text-align: right;
}
.btn-group-sm>.btn, .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.alert.mr10 {
    margin: 10px;
    font-size: 14px;
}