/**
 * Font Faces
 */
@font-face {
  font-family: "Arial Black";
  src: url(../fonts/arial-black.ttf);
}

@font-face {
  font-family: "Rubik";
  src: url(../fonts/rubik.ttf);
}

@font-face {
  font-family: "Roboto Flex";
  src: url(../fonts/roboto-flex.ttf);
}

/*
   * @Reset CSS
  */
/*html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
	  margin: 0;
	  padding: 0;
	  border: 0;
	  font-size: 100%;
	  font: inherit;
	  vertical-align: baseline;
  }*/
html,
body,
div,
span,
applet,
object,
iframe,
blockquote,
abbr,
acronym,
address,
big,
cite,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
sub,
sup,
tt,
var,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
output,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 16px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 13px;
  background-color: #eef3f6;
  /*background: url(../images/background-login.jpg) repeat;*/
}
#sidebar ol,
#sidebar ul {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
#wrapper-content ol,
#wrapper-content ul {
  padding: 5px;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
#header-content ol,
#header-content ul,
#content ol,
#content ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #7e8f96;

  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    color-stop(0.5, rgba(255, 255, 255, 0.1)),
    color-stop(0.5, transparent),
    to(transparent)
  );
}

#bullet-poster-slider::-webkit-scrollbar {
      width: 0px;
      height: 0px;
}
 
#bullet-poster-slider::-webkit-scrollbar-thumb {
      background-color: transparent; 
      border-radius: 0px;
}
 
#bullet-poster-slider::-webkit-scrollbar-corner {
      background-color: transparent;
}

#bullet-poster-slider::-webkit-scrollbar-track-piece
{
    background-color: transparent;
}

#bullet-poster-slider::-webkit-scrollbar-track {
  -webkit-box-shadow: transparent;
  background-color: transparent;
}

/********************
   * Default CSS
  *********************/
a:hover {
  text-decoration: none;
}
.link-as-button {
  display: inline-block;
  padding: 10px;
  background-color: #1f76c8;
  color: #fff;
}
.link-as-button:hover {
  color: yellow;
  text-decoration: none;
}
button {
  border: none;
  background-color: #1f76c8;
  padding: 5px 10px;
  color: #fff;
}
button:hover {
  cursor: pointer;
  color: yellow;
}
button a {
  color: #fff;
}
button a:hover {
  color: yellow;
}
button.btn-as-a-tag {
  background-color: inherit !important;
  border: none;
  padding: 0 !important;
  color: #337ab7 !important;
}
button.btn-as-a-tag:hover {
  color: #074783 !important;
}
.border-1px {
  height: 1px;
  border-top: 1px solid #ccc;
}
.col-none-padding {
  padding: 0;
}

/********************
   * @ Five collumn for Bootstrap
  *********************/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15,
.col-xs-45,
.col-sm-45,
.col-md-45,
.col-lg-45 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
.col-xs-15 {
  width: 20%;
  float: left;
}
.col-xs-45 {
  width: 80%;
  float: left;
}
.container {
  padding: 0;
}
@media (min-width: 768px) {
  .col-sm-15 {
    width: 20%;
    float: left;
  }
  .col-sm-45 {
    width: 80%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-15 {
    width: 20%;
    float: left;
  }
  .col-md-45 {
    width: 80%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-15 {
    width: 20%;
    float: left;
  }
  .col-lg-45 {
    width: 80%;
    float: left;
  }
}

/********************
   * @ Seven collumn for Bootstrap
  *********************/
.col-xs-17,
.col-sm-17,
.col-md-17,
.col-lg-17,
.col-xs-47,
.col-sm-47,
.col-md-47,
.col-lg-47 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
.col-xs-17 {
  width: 14.3%;
  float: left;
}
.col-xs-47 {
  width: 85.7%;
  float: left;
}
.col-xs-offset-17 {
  margin-left: 14.3%;
}
.container {
  padding: 0;
}
@media (min-width: 768px) {
  .col-sm-17 {
    width: 14.3%;
    float: left;
  }
  .col-sm-47 {
    width: 85.7%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-17 {
    width: 14.3%;
    float: left;
  }
  .col-md-47 {
    width: 85.7%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-17 {
    width: 14.3%;
    float: left;
  }
  .col-lg-47 {
    width: 85.7%;
    float: left;
  }
}

/********************
   * @Main CSS
  *********************/
.clearboth {
  clear: both;
}
input:-moz-read-only {
  /* For Firefox */
  background-color: #e0e0e0;
}

input:read-only {
  background-color: #e0e0e0;
}
/*
   * @Login Page CSS
  */
#wrap-content {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}
#wrap-login {
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 30px 0;
}
.login-title {
  padding: 10px 0;
  font-size: 20px;
}
.login-form input,
.submit-button {
  border: 1px #ccc solid;
  height: auto;
  padding: 8px 20px;
  box-sizing: border-box;
  color: #000;
  font-size: 14px;
  margin-top: 15px;
  line-height: 1.5em;
}
.submit-button {
  background-color: #1f76c9;
  color: #fff;
}
.login-help {
  margin-top: 30px;
}
.login-footer {
  position: fixed;
  bottom: 0;
  margin-left: -15px;
  width: 100%;
  background-color: #062237;
  height: 50px;
}
.login-footer p {
  padding-top: 20px;
  color: #b6b6b6;
}

/***********************
   * @Header CSS
  ************************/
#header {
  position: fixed;
  width: 100%;
  min-height: 50px;
  background-color: #062237;
  z-index: 10;
}
#header-company-info img {
  height: 50px;
  width: auto;
}
.company-info {
  margin-left: -30px;
  margin-top: 10px;
}
.company-info h1 {
  color: #e5e5e5;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}
.company-info h2 {
  color: #9d9d9d;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}
.user-area {
  margin: 0;
}
.user-area > li {
  position: relative;
  display: inline-block;
  margin-right: 20px;
  color: #9d9d9d;
  padding: 20px 0 15px;
}
.user-area > li:hover {
  cursor: default;
}
.login-in-as a {
  color: #9d9d9d;
}
.login-in-as a:hover {
  color: #ffffff;
}
.user-area i {
  font-size: 18px;
  color: #9d9d9d;
  padding-right: 6px;
}
#header-user-area .fa-caret-down {
  margin-left: 4px;
  font-size: 13px;
}
.drop-down-menu {
  position: absolute;
  display: none;
  right: -20px;
  padding: 10px;
  top: 45px;
  width: 140px;
  text-align: left;
  background-color: #ffffff;
  z-index: 110;
}
.drop-down-menu:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.drop-down-menu:after {
  border-bottom-color: #ffffff;
  border-width: 8px;
  margin-left: -8px;
}

.user-area li:hover .drop-down-menu {
  display: block;
}
.drop-down-menu li {
  list-style: none;
  padding: 5px;
}

/********************
   * @Content CSS
  ********************/
/*
   * Sidebar CSS
   */
#sidebar {
  position: fixed;
  width: 200px;
  height: calc(100vh - 54px);
  padding: 0;
  background-color: #11191c;
  overflow-y: scroll;
  padding-bottom: 100px;
}
.menu-sidebar .submenu {
  display: none;
}
.has-child div {
  cursor: pointer;
}
.menu-sidebar > li {
  border-bottom: 1px solid #262626;
}
.menu-sidebar > li:hover,
.menu-sidebar > li.active {
  border-left: 2px solid #1f76c8;
  background-color: #0c1114;
}
.menu-sidebar li:hover i,
.menu-sidebar li:hover img,
.menu-sidebar li.active i,
.menu-sidebar li.active img {
  padding-left: 28px;
}
.menu-sidebar .submenu i {
  padding-left: 50px !important;
}
.menu-sidebar li:hover .submenu i {
  padding-left: 48px !important;
}
.menu-sidebar li.active .submenu i {
  padding-left: 50px !important;
}
.submenu li.active {
  border-left: 2px solid #1f76c8;
}
.menu-sidebar > li:hover > ul.submenu > li > ul.submenu i {
  padding-left: 68px !important;
}
.menu-sidebar > li > ul.submenu > li > ul.submenu i {
  padding-left: 70px !important;
}
.menu-sidebar > li.active > ul.submenu > li > ul.submenu i {
  padding-left: 70px !important;
}
.menu-sidebar li a {
  width: 100%;
  color: #9d9d9d;
}
.menu-sidebar li a:hover {
  text-decoration: none;
}
.menu-sidebar li i {
  padding-left: 30px;
  padding-right: 12px;
  color: #7f878d;
}
.menu-sidebar li img {
  margin-left: -3px;
  margin-bottom: -3px;
  padding-left: 30px;
  padding-right: 10px;
  height: 20px;
}
.menu-sidebar li a div {
  display: inline-block;
  padding: 20px 0;
  width: calc(100% - 85px);
}
.menu-sidebar > li > ul.submenu > li > ul.submenu > li > a > div {
  width: calc(100% - 105px);
}

/*
   * Content CSS
  */
.div-active-click {
  box-shadow: 0px 0px 5px 2px rgba(31, 118, 200, 1);
}
#main-content {
  margin-top: 54px;
  width: 100%;
  min-height: 1px;
}
#wrapper-content {
  margin-left: 220px;
  position: relative;
}
#header-content {
  position: fixed;
  padding: 20px 0px 10px 0;
  width: calc(100% - 230px);
  border-bottom: 1px solid #ccc;
  background-color: rgba(238, 243, 246, 1);
  z-index: 9;
}
@media (max-width: 991px) {
  /*#header-content{
		  width: 92%;
	  }*/
}
@media (min-width: 992px) {
  /*#header-content{
		  width: 79%;
	  }*/
}
#header-content h1 {
  display: inline-block;
  margin-bottom: 0px;
  padding: 0;
  font-size: 16px;
}
#header-content ul {
  float: right;
  display: inline-block;
  margin-bottom: 4px;
  padding: 0;
}
#header-content ul li {
  display: inline-block;
  margin-left: 10px;
}
#header-content a {
  padding: 8px;
  background-color: #1f76c8;
  color: #ffffff;
}
.unenable-button {
  background-color: #c1d7ec !important;
  cursor: default;
}
.unenable-button:hover {
  color: #ffffff !important;
}

#header-content button {
  padding: 8px;
}
#header-content a:hover {
  text-decoration: none;
  color: yellow;
}
#header-content i {
  padding-right: 10px;
}
#content {
  margin-top: 70px;
  padding: 0 10px 0 0;
}

/********************
   * @ Admin GUI CSS
  *********************/
/*
   * Dashboard CSS
  */
.wrap-dashboard-icon-block {
  margin-bottom: 15px;
  padding: 0 5px;
}
.dashboard-icon-block {
  padding: 15px;
  background-color: #fff;
}
.dashboard-icon {
  width: 30%;
  margin-left: 35%;
  border-radius: 200px;
  border: 0px solid #000000;
  background-color: #1f76c8;
}
.dashboard-icon i {
  color: #fff;
  font-size: 20px;
}
.dashboard-icon-block h3 {
  padding: 10px 0;
  font-size: 16px;
  border-bottom: 1px solid #e3e3e3;
}
.dashboard-icon-block h4 {
  padding: 10px 0 0 0;
  font-size: 30px;
  color: #1f76c8;
}

/*
   * Client CSS
  */
.wrap-client-icon-block {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  padding: 0 5px;
  width: 23%;
}
.operator-client-block {
  top: -2px !important;
  padding: 0 !important;
}
.operator-client-block li {
  margin: 6px 0 6px 0 !important;
}
.operator-client-block ul {
  min-width: 80px !important;
  margin-right: 3px;
  background-color: rgba(234, 238, 239, 1);
}
.client-icon-block {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
}
.client-icon-block img {
  width: 60%;
}
.client-icon-block h3 {
  padding: 18px 0;
  color: #1f76c8;
  font-size: 100% !important;
}
.client-icon-block h4 {
  margin-bottom: 3px;
  padding: 8px;
  font-size: 100% !important;
  border: 1px solid #e3e3e3;
}
.wrap-user-of-client {
  position: fixed;
  right: 10px;
  top: 120px;
  margin-left: 10px;
  padding: 0 0 15px 0;
  background-color: #fff;
}
.filter-user-of-client-block {
  width: 100%;
  margin-top: 4px;
}
.filter-user-of-client-block input {
  padding: 5px 6px;
  width: 75%;
}
.filter-user-of-client-block button {
  padding: 7px 24px;
}
.user-of-client {
  overflow-y: scroll;
  padding: 3px 3px;
}
.user-of-client .page-of-slideshow-block {
  margin-top: 6px;
  border: 1px solid #e6e6e6;
}
.user-of-client .image-of-page {
  padding: 15px 0;
}
.content-of-user-block {
  padding: 0 0 0 4px;
}
.content-of-user-block ul {
  margin: 0;
  /* list-style-type: circle !important;*/
}
.content-of-user-block ul li {
  margin-bottom: 5px;
}

.wrap-client-page {
  background-color: #ffffff;
}
.client-detail {
  padding: 30px 40px 30px 30px;
  background-color: #fff;
}
.remove-logo {
  display: none;
  color: #1f76c8;
  cursor: pointer;
}
.client-logo-image {
  margin-top: 10px;
  max-height: 130px;
}

.add-client-title {
  padding-top: 30px;
  padding-left: 30px;
  font-size: 15px;
  font-weight: bold;
}

.input-checkbox {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.label-for-input-checkbox {
  display: inline-block;
  vertical-align: middle;
  margin-top: -10px !important;
  cursor: pointer;
}

/*
   * Template CSS
  */
.tempalte-page-content {
  margin-top: 110px !important;
  margin-bottom: 30px;
}
.wrap-template-block {
  position: relative;
  padding: 0 5px;
}
.wrap-template-block .display-block:hover {
  cursor: pointer;
}
.wrap-action-for-template {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 8;
}
.wrap-action-for-template li {
  position: relative;
  margin-bottom: 6px;
}
.wrap-action-for-template .fa-ellipsis-v {
  padding: 8px 14px;
  font-size: 15px;
  color: #1f76c8;
}
.wrap-action-for-template .fa-ellipsis-v:hover {
  cursor: pointer;
}
.action-for-template-lv2 {
  display: none;
  position: absolute;
  right: 0;
  top: 22px;
  min-width: 80px;
  background-color: rgba(234, 238, 239, 0.74);
  padding: 10px;
}
.wrap-action-for-template li:hover .action-for-template-lv2 {
  display: block;
  z-index: 100;
}

.template-filter-block {
  margin-top: 6px;
  padding: 8px 10px;
  background-color: #cedae1;
}
#input-filter-name {
  width: 250px;
}
.template-filter-block div {
  display: inline-block;
}
.middle-block {
  margin: 0 18px;
  padding: 0 18px;
  border-left: 1px solid #afadad;
  border-right: 1px solid #afadad;
}
.template-filter-block label {
  display: inline-block;
  vertical-align: middle;
  margin: 0 15px 0 5px;
  cursor: pointer;
}
.template-filter-block label:last-child {
  margin-right: 0;
}
.template-checkbox {
  margin-top: 0 !important;
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.wrap-client-of-template {
  position: fixed;
  right: 10px;
  top: 175px;
  margin-left: 10px;
  padding: 0 0 15px 0;
  background-color: #fff;
}
.client-checkbox {
  margin: 10px 10px !important;
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.client-checkbox-label {
  display: inline-block;
  vertical-align: middle;
  margin-top: 3px;
  cursor: pointer;
  font-size: 15px;
}
#client-search-text {
  width: 100%;
}
#btn-assign-clients {
  margin-bottom: 5px;
  width: 100%;
}

/*
   * Add New Template CSS
  */
.btn-template-submit {
  margin-top: -10px;
}
.add-new-template {
  z-index: 9999 !important;
}
.new-template-block {
  margin-top: 15px;
  padding: 6px 10px;
  background-color: #cedae1;
}
.new-template-item {
  display: inline-block;
  padding: 3px 20px 3px 0;
}
.new-template-item input,
.new-template-item select {
  height: 25px;
}
#templateWidth,
#templateHeight,
#sectionWidth,
#sectionHeight {
  width: 80px;
}
#sectionX,
#sectionY {
  width: 80px;
}
.labelTemplateIsDefault {
  cursor: pointer;
}

.add-section-block {
  margin-top: 150px !important;
}
.wrap-template {
}
#template {
  position: relative;
  margin: 20px auto 20px;
  overflow: hidden;
  width: 99%;
}
.template-section {
  position: absolute;
  display: inline-block;
  border: 0.2px solid #9e9e9e;
  background-color: #ecf0f3;
}
.template-section:hover,
.template-section-active {
  border: 0.2px solid red;
  cursor: pointer;
}
.add-section {
  padding: 0 20px;
}
.add-section button {
  display: none;
}
#btn-add-section {
  display: inline-block;
}

/*
   * User management CSS
  */
.wrap-user-management-block {
  margin-bottom: 20px;
  padding: 0 6px !important;
}
.operator-user-block {
  top: 0 !important;
  padding: 5px 0 0 !important;
  right: 6px !important;
}
.operator-user-block .action-for-template-lv2 li {
  margin: 4px !important;
}
.wrap-user-management-block h4 {
  margin-top: 3px;
}

/********************
   * @ Client GUI CSS
  *********************/
/*
   * Group Css
  */
.wrap-group-detail-block {
  padding-left: 5px;
  padding-right: 5px;
}
.btn-add-display-to-group,
.btn-remove-display-of-group {
  left: unset !important;
  top: 2px !important;
  right: 2px;
}
.group-detail-block {
  margin-bottom: 5px;
  padding: 4px 6px;
}

/*
   * Display CSS
  */
.wrap-display-block {
  padding: 0 3px;
}
.display-block {
  margin: 10px 5px;
  padding: 8px 8px 4px 8px;
  background-color: #fff;
}
.display-block .display-feature:hover {
  box-shadow: rgb(31, 118, 200) 0px 0px 5px 2px;
}
.display-feature {
  width: 100%;
  height: 100px;
  z-index: 10;
  background-color: rgba(194, 205, 210, 0.35);
}
.display-feature img {
  margin-top: 16px;
}
.display-block h1 {
  padding: 12px;
  color: #1f76c8;
  font-weight: bold;
  font-size: 100%;
}
.display-block table {
  margin: 5px 0;
}
.display-group-feature {
  width: 36px;
}
.display-block table img {
  margin-bottom: -3px;
  width: 24px;
}
.display-block h3 {
  margin-bottom: 5px;
  padding: 6px;
  border: 1px solid #ddd;
  font-size: 100%;
}

.client-services .client-service .client-service-container {
  border: 1px solid #e2e2e2;
  padding: 20px;
}

/*
   * Display Detail CSS
  */
.display-detail {
  margin-top: 6px;
  padding: 30px 40px 20px 30px;
  background-color: #fff;
}
.display-detail input,
.display-detail textarea,
.display-detail select {
  padding: 5px 10px;
  box-sizing: border-box;
  color: #000;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.5em;
}
.display-detail select {
  padding-right: 50px;
}
.display-detail button {
  padding: 10px;
  background-color: #1f76c8;
  color: #fff;
  border: none;
}
.display-detail button:hover {
  color: yellow;
}
.display-detail label {
  margin-top: 10px;
  font-weight: bold;
}

#editAssignMainSlideshow .modal-lg,
#editAssignTempSlideshow .modal-lg {
  width: 80% !important;
}
#editAssignMainSlideshow .modal-title,
#editAssignTempSlideshow .modal-title {
  font-size: 20px;
  font-weight: bold;
}
#editAssignMainSlideshow .close,
#editAssignTempSlideshow .close {
  margin: -8px -8px 0 0;
  padding: 8px 14px;
  background-color: #1f76c8;
  opacity: 1;
}
#editAssignMainSlideshow .close span,
#editAssignTempSlideshow .close span {
  color: #fff;
}

.wrap-assign-slideshow-block,
.wrap-preview-slideshow-block {
  padding: 0 5px;
}
#editAssignTempSlideshow .wrap-assign-slideshow-block {
  padding: 0 0 0 10px;
}
.assign-slideshow {
  background-color: #f1f1f1;
  height: 360px;
  overflow-y: scroll;
}
.assign-slideshow-title {
  padding: 12px;
  background-color: #272d30;
}
.assign-slideshow-title h3 {
  color: #fff;
}
.assign-slideshow-content {
  padding: 16px 12px;
}
.assign-slideshow-content input {
  margin: 8px 10px;
}

.wrap-page-of-slideshow-block {
  margin-bottom: 5px;
  padding: 5px;
}
.page-of-slideshow-block {
  margin-bottom: 4px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
}
.image-of-page {
  padding: 22px;
  background-color: #f0f0f0;
}
.image-of-page img {
  margin-left: -3px;
  width: 45px;
}
.content-of-page ul {
  margin: 0;
  list-style-type: circle !important;
}
.content-of-page ul li {
  margin-bottom: 5px;
}
/*.content-of-page ul li:first-child{
	  color: #337ab7;
  }*/

.btn-assign-slideshow,
.btn-assign-slideshow:visited,
.btn-assign-slideshow:active {
  margin-bottom: 10px;
  padding: 10px 35px;
  background-color: #1f76c8;
  color: #fff;
  text-decoration: none;
}
.btn-assign-slideshow:hover {
  color: yellow;
  text-decoration: none;
}
.remove-slideshow {
  display: none;
  vertical-align: middle;
  margin: 12px 0 0 5px;
  color: #337ab7;
  cursor: pointer;
}

.temp-slideshow-time-block {
  margin-top: 10px;
  margin-left: 0.9%;
  padding: 4px 0;
  width: 97.8%;
  background-color: #f1f1f1;
}
.temp-slideshow-time-block div {
  display: inline-block;
}
.temp-slideshow-time-block div:first-child {
  margin-right: 10px;
}
.temp-slideshow-time-block > div:first-child {
  margin-right: 40px;
}
.temp-slideshow-time {
  display: inline-block;
}
.temp-slideshow-time .date-of-temp-slideshow-time {
  width: 140px !important;
}
.temp-slideshow-time .time-of-temp-slideshow-time {
  width: 110px !important;
}

/*
   * Slideshow CSS
  */
.slideshow-page-content {
  margin-bottom: 30px;
}
.wrap-slideshow-block {
  padding: 0 10px;
}
.slideshow-page-content .display-block {
  margin-bottom: 2px;
}
.slideshow-page-content .display-block:hover {
  cursor: pointer;
}
.slideshow-feature {
  width: 100%;
  height: 60px;
  z-index: 5;
  background-color: rgba(194, 205, 210, 0.35);
}
.slideshow-feature i {
  margin-top: 10px;
  color: #d2d6d8;
  font-size: 40px;
}
.wrap-slideshow-crud {
  margin: 0 0 10px 5px;
  padding: 0;
}
.slideshow-crud {
  border: 1px solid #fff;
  background-color: #1f76c8;
}
.slideshow-crud a {
  line-height: 28px;
  color: #fff !important;
  padding: 10px 0;
}
.slideshow-crud button {
  padding: 6px;
  background-color: #1f76c8;
  color: #fff;
}
.slideshow-crud a:hover,
.slideshow-crud button:hover {
  color: yellow !important;
}
.wrap-page-of-slideshow,
.wrap-instance-of-page {
  position: fixed;
  right: 10px;
  top: 130px;
  margin-left: 10px;
  padding: 0 0 15px 0;
  background-color: #fff;
}
.wrap-page-of-slideshow h2,
.wrap-client-of-template h2,
.wrap-instance-of-page h2,
.wrap-user-of-client h2 {
  padding: 10px 3px;
  background-color: #272d30;
  color: #fff;
  font-size: 100%;
}
.page-of-slideshow {
  padding: 5px;
  height: 420px;
  overflow-y: scroll;
}

/*
   * Slideshow Detail CSS
  */
.template-of-slideshow-block {
  position: relative;
  margin-bottom: 4px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
}
.template-of-slideshow-block:hover {
  box-shadow: rgb(31, 118, 200) 0px 0px 5px 2px;
  cursor: pointer;
}
.btn-add-new-page {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 4px 7px !important;
  border: none;
  background-color: #1f76c8;
  color: #fff;
  display: none;
  z-index: 100;
}
.btn-add-new-page:hover {
  color: yellow;
}
.template-of-slideshow-block:hover .btn-add-new-page {
  display: inline-block;
}
.template-of-slideshow-block .content-of-page ul {
  margin: 0;
}
.slideshow-detail-block .display-block {
  margin-bottom: 3px;
}
#page-of-slideshow-detail {
  position: relative;
}
.page-of-slideshow-detail-title {
  padding: 10px 10px;
  background-color: #272d30;
  color: #fff;
}
.page-of-slideshow-detail {
  padding: 5px 5px 40px 5px;
  overflow-y: scroll;
  height: 460px;
  background-color: #ecf0f3;
}
.page-of-slideshow-lv2 {
  min-width: 80px !important;
}

.ui-state-default a,
.ui-state-default a:visited {
  color: #1f76c8 !important;
}
.ui-state-default a:hover {
  color: #074783 !important;
}

.slideshow-detail-block {
  border-color: rgba(255, 255, 255, 0.01);
}
.slideshow-detail-block .display-block:hover {
  box-shadow: rgb(31, 118, 200) 0px 0px 5px 2px;
  cursor: move;
}
#update-and-create-messager {
  /*position: absolute;*/
  width: 98%;
  /*top: 40px;*/
  padding: 20px 5px;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
  font-size: 14px;
  z-index: 100;
  display: none;
}

/*
   * Page Detail CSS
  */
.header-breadcrumb {
  background-color: #eef3f6 !important;
  padding: 0 !important;
  color: #1f76c8 !important;
}
.page-detail {
  margin-top: 6px;
  padding: 0 20px;
}
.page-detail-1 {
  margin-bottom: 5px;
}
.page-detail-name {
  width: 300px;
  margin-left: 34px;
  margin-right: 20px;
}
.page-detail-desc {
  width: 500px;
}
.page-detail input {
  display: inline-block;
  vertical-align: middle;
  height: 28px;
}
.page-detail label {
  margin-top: 5px;
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
}
.page-background-color-value {
  margin-top: 1px;
  width: 80px;
  margin-right: 30px;
}
.page-duration-block label {
  margin: 5px 0 0 4px !important;
}
.page-duration-input,
.page-play-times-input {
  margin-top: 5px;
  width: 55px;
}
.page-detail-template-name {
  display: inline-block;
  vertical-align: middle;
  margin-top: 5px;
  margin-left: 30px;
}

.section-name-of-page {
  padding: 10px;
  font-size: 14px;
}
.section-of-slideshow:hover i {
  display: inline-block;
}
.new-instance {
  padding: 0;
  display: inline-block;
  z-index: 9;
}
.new-instance i {
  display: none;
  padding: 5px 8px;
  color: #0f5292;
  font-size: 15px;
}

.btn-control-of-instance {
  margin: 5px 0;
  padding: 3px 5px;
}
#btn-all-instance {
  display: inline-block;
  width: 49%;
  margin-bottom: 3px;
}
#btn-add-instance {
  display: inline-block;
  width: 49%;
  padding: 5px 10px;
  background-color: #1f76c8;
  color: #fff;
}
#btn-add-instance:hover {
  color: yellow;
}
#instance-search-text {
  width: 98%;
  padding: 3px 5px;
}

.page-detail-content {
  margin-top: 90px !important;
  margin-bottom: 30px;
}
.wrap-instance-of-page {
  top: 190px;
}

.instance-of-section-block {
  overflow-y: scroll;
}
.wrap-instance-of-section {
  position: relative;
  padding: 0;
  margin-bottom: 20px;
}
.action-for-instance {
  position: absolute;
  list-style: none;
  top: -8px;
  right: -10px;
}
.action-for-instance li {
  list-style: none;
}
.instance-of-section {
  padding: 7px 0;
  border: 1px solid #d9d9d9;
  background-color: #f0f0f0;
}
.instance-name-of-section,
.section-of-instance,
.info-of-instance {
  padding: 4px 0;
}
.instance-name-of-section {
  color: #1f76c8;
  font-size: 14px;
}
.content-of-instance {
  max-height: 300px;
  overflow: hidden;
  margin: 3px;
  padding: 6px 3px 0 3px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
}
.content-of-instance img {
  width: 96%;
  margin-left: 2%;
}

.hide-instance,
.hide-page {
  color: #bcbcbc !important;
}

/*
   * AddNewInstance Css
  */
.instance-block {
  padding-top: 10px;
}
.section-of-instance,
.instance-info {
  padding: 0;
}
.instance-block input,
.instance-block select {
  height: 25px;
}
.section-of-instance select {
  min-width: 120px;
}

#instance-name {
  width: 200px;
  margin-right: 20px;
}
#instance-type {
  margin-right: 20px;
}
#instance-timer {
  width: 70px;
  margin-right: 20px;
}
#instance-play-to-end,
#instance-play-all-once {
  display: none;
}
#instance-play-to-end-checkbox,
#instance-play-all-once-checkbox {
  margin: -2px 0 0 -20px !important;
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  cursor: pointer;
}
#instance-play-to-end-label {
  margin-right: 20px;
  cursor: pointer;
}
#instance-positionX,
#instance-positionY {
  width: 60px;
}

/*.note-editor{
	  margin-left: 190px;
	  min-height: 100%;
  }
  .note-editable{
	  position: absolute;
	  top: 0;left: 0;
	  width: 100%;height: 100%;
	  background-color: rgba(255,255,255,0) !important;
  }*/

.operation-of-instance {
  position: fixed;
  height: 100vh;
  padding: 0;
}
.operation-info-of-instance {
  margin: 8px 0;
}
.operation-info-of-instance label {
  vertical-align: middle;
  display: inline-block;
  min-width: 50px;
  margin-top: -6px;
}
.operation-info-of-instance input {
  display: inline-block;
  width: 60px;
  height: 25px;
}
.operation-of-instance .operation-form-of-instance {
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 170px);
  padding-right: 10px;
  width: 180px;
}
.operation-of-instance .operation-form-of-instance .operation-form-header {
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

#draw-section-of-image-instance,
#draw-section-of-video-instance,
#draw-section-of-parking-spot-instance,
#draw-section-of-staff-roster-instance,
#draw-section-of-staff-department-instance,
#draw-section-of-machine-instance {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  overflow: hidden;
}

.section-info-of-instance {
}
.section-info-of-instance .operation-of-instance {
  position: absolute;
  width: 180px;
}

.instance-content-of-section {
  position: absolute;
  margin: 0;
  padding: 0;
  min-height: 1px;
}
#show-selected-image,
#show-selected-parking-spot {
  position: absolute;
  margin: 0;
  padding: 0;
}
#selected-image,
#selected-parking-spot {
  display: none;
}

.instance-detail-content {
  margin-top: 110px !important;
}

#section-of-video-instance,
#section-of-editor-instance,
#section-of-folder-instance,
#section-of-parking-spot-instance,
#section-of-staff-roster-instance,
#section-of-staff-department-instance,
#section-of-machine-instance {
  display: none;
  margin-top: 1%;
}
#section-of-video-instance div {
  margin-bottom: 10px;
}
#section-of-video-instance button {
  margin-top: -4px;
  margin-left: 10px;
  width: 160px;
}
#youtube-url {
  width: 160px;
  height: 30px;
  margin-left: 8px;
  padding: 3px 5px;
}
.video-fit-size,
.fit-image-size {
  margin: 16px 0 0 0 !important;
}
.video-size,
.keep-image-size {
  margin: 0 0 20px 0 !important;
}
.unselected-label {
  color: #868686;
}
#choose-fit-video-size,
#choose-keep-ratio-video-size,
#choose-fit-image-size,
#choose-keep-ratio-image-size,
#file-order-random,
#file-order-manual,
#file-order-ascending,
#file-order-descending,
input[type="radio"].instance-opt,
input[type="radio"].image-size,
input[type="radio"].image-size {
  width: 13px;
  height: 13px;
  margin-right: 10px;
}

/*checkbox css of video instance*/
.operation-info-of-instance > span {
  width: 100%;
  top: -20px;
  left: -25%;
  font-family: Tahoma;
  font-size: 12px;
  color: grey;
  text-shadow: 1px 1px rgb(50, 50, 50);
}
.box-checkbox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 5px !important;
  width: 50px;
  height: 20px;
  background: rgb(200, 200, 200);
}
.lb-video-instance {
  min-width: 130px !important;
}
.box-checkbox input {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  z-index: 999;
}

.box-checkbox .toogle {
  display: block;
  position: absolute;
  z-index: 998;
  width: 25px;
  height: 100%;
  background: grey;
  top: 0;
  box-shadow: 0px 0px 3px rgb(50, 50, 50) inset;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  text-align: center;
}
.box-checkbox .toogle:before {
  content: "OFF";
  color: #fff;
  text-shadow: 1px 1px #000;
  font-family: tahoma;
  font-size: 11px;
  line-height: 20px;
}

.box-checkbox input:checked ~ .toogle {
  margin-left: 25px;
}
.box-checkbox input:checked + .toogle:before {
  content: "ON";
}

.video-time-begin {
  width: 44px !important;
}

#draw-section-of-video-instance .instance-content-of-section {
  width: 100%;
  height: 100%;
}
iframe#show-video-instance {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}
#local-video-instance {
  object-fit: cover;
}

/* Preload icon CSS */
.preload-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
}
.preload-icon {
  display: inline-block;
  margin-top: 20px;
  vertical-align: middle;
  font-size: 25px !important;
  color: #555555;
}
@-webkit-keyframes {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 1.5s linear infinite;
  -moz-animation: rotating 1.5s linear infinite;
  -ms-animation: rotating 1.5s linear infinite;
  -o-animation: rotating 1.5s linear infinite;
  animation: rotating 1.5s linear infinite;
}

/*
   * Preview Page CSS
  */
.page-preview-content {
  width: 100%;
}
.section-slider-preview {
  position: absolute;
  display: inline-block;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.wrap-instance-content-preview {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.instance-content-preview {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  display: none;
}
.text-content-preview {
  width: 100%;
  height: 100%;
}
.text-content-preview p {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}
.instance-content-preview-top {
  display: block;
}
.image-content-preview img {
  width: 100%;
  height: 100%;
}

/*
   * Preview Slideshow CSS
  */
#wrap-preview-slideshow {
  position: relative;
  width: 100%;
}
.page-in-preview-slideshow {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  overflow: hidden;
}
.page-in-preview-slideshow-top {
  display: block;
}

/********************************************************************************/
/********************************************************************************/
/**********************  DIGITAL POSTER CSS  ************************************/
/********************************************************************************/
/********************************************************************************/
.ui.selection.dropdown {
  border: 1px solid rgba(34, 36, 38, 0.4) !important;
}

#ajax-success-message {
  width: 98%;
  display: none;
  margin: 15px;
  font-size: 16px;
  color: #3c763d;
}

#ajax-error-message {
  width: 98%;
  display: none;
  margin: 15px;
  font-size: 16px;
  color: red;
}

#ajax-success-message-ss {
    width: 98%;
  display: none;
  margin: 15px;
  font-size: 16px;
  color: #3c763d;
}

#ajax-error-message-ss {
  width: 98%;
  display: none;
  margin: 15px;
  font-size: 16px;
  color: red;
}

#image-of-screensaving-mockup {
  padding: 0;
  margin-top: 5px;
  margin-bottom: 10px;
}
.wrap-screensaving-image {
  display: flex;
  flex-direction: column;
  flex-flow: column wrap;
  width: 50%;
  overflow: hidden;
  margin-bottom: 10px;
}
.show-screensaving-image {
  max-height: 150px;
  max-width: -webkit-fill-available;
}
.remove-screensaving-image {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 3px;
  font-size: 18px !important;
  color: white;
  background-color: red;
  cursor: pointer;
  margin-right: 15px;
}

#group-of-event #drag-drop-sortable {
  width: 100%;
  position: relative;
}
.group-of-event-block {
  position: relative;
  padding: 10px;
  /*cursor: move;*/
}

.group-of-event-block > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  background-color: #fbfbfb;
  width: 100%;
  height: 100%;
}
.wrap-poster-image {
  display: flex;
  flex-direction: column;
  flex-flow: column wrap;
  width: 50%;
  margin-left: 25%;
  overflow: hidden;
}
.wrap-poster-image img {
  width: 100%;
  max-height: 100%;
}

.group-of-event-block > div:hover {
  box-shadow: rgb(31, 118, 200) 0px 0px 5px 2px;
}
#add-new-event,
#add-edit-event,
#add-edit-screensaver {
  cursor: pointer;
}
#add-new-event i,
#add-edit-event i,
#add-edit-screensaver i {
  vertical-align: middle;
  line-height: 110px;
  color: #ccc;
  font-size: 90px;
}
.group-of-event-block .fa-cubes {
  margin: 12px 0;
  font-size: 35px;
  color: #ccc;
}
.group-of-event-block h2 {
  color: #1f76c8;
  font-weight: bold;
  padding: 10px;
}
.group-of-event-block .action-for-template-lv2 {
  right: 5px;
}

#group-of-event .ui-state-default {
  border: none;
  background: none;
}

.handle {
  background-color: red;
}

/**
   * poster attachment
   */
.poster-attachment input {
  padding: 0;
}
.poster-attachment button.btn-flat {
  border-radius: 0;
}
.poster-attachment button.btn-choose {
  padding: 6px 12px; /* reverted back to .btn */
  margin-left: 8px;
}
.poster-attachment input#pav-youtube-url {
  margin-left: 8px;
}
.poster-attachment button.btn-choose:hover,
.poster-attachment button.btn-choose[disabled]:hover {
  background-color: #1f76c8;
}
.poster-attachment button.btn-choose[disabled]:hover {
  color: #fff;
}
.poster-attachment button.btn-choose-image {
  margin-left: 0;
}

/**
   * carpark
   */
.carpark-reserved-text {
  position: absolute;
  /*bottom: 0;*/
  /*right: 0;*/
  color: #333;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
    1px 1px 0 #fff;
  /*padding-bottom: 100px;*/
  font-size: 40px;
  /*padding-right: 250px;*/
  font-family: verdana;
  text-transform: uppercase;
}
/**
   * carpark reserved text color per category
   * on instance, preview pages, and frontend
   */
.carpark-reserved-text.director,
.carpark-reserved-text.standard {
  color: #f0ad4e;
}
.carpark-reserved-text.resident {
  color: #337ab7;
}
.carpark-reserved-text.vip {
  color: #d9534f;
}
/**
   * special text box
   */
.carpark-special-text {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  /*border: 1px solid #00f;*/
  color: #5cb85c;
}
/**
   * marking text area for special text box
   */
.carpark-special-text.current {
  background: transparent;
  border: 1px dashed #aaa !important;
}

/**
   * car list item background color
   * on calendar per category
   */
.item-car.director,
.item-car.standard {
  background-color: #f0ad4e;
}
.item-car.resident {
  background-color: #337ab7;
}
.item-car.vip {
  background-color: #d9534f;
}
.item-car.special {
  background-color: #5cb85c;
}

/**
   * cancer therapy
   */
.btn-flat {
  border-radius: 0;
}
.image-preview a.close {
  position: absolute;
  right: 25px;
}
label.radio-inline {
  margin-top: 10px !important;
  font-weight: 400;
}
label.radio-inline input[type="radio"] {
  margin-top: 0;
}

/**
   * client shortcut
   */
.shortcut-list .shortcut-item {
  margin: 3px 10px 3px 0;
  padding: 5px;
  float: left;
  width: 180px;
  height: 180px;
  background-color: #fff;
}
.shortcut-list .shortcut-item .btn-sort-shortcut,
.shortcut-list .shortcut-item .btn-edit-shortcut {
  margin-right: 5px;
}
.shortcut-list .shortcut-item .btn-sort-shortcut {
  cursor: move;
}
.shortcut-list .shortcut-item .shortcut-icon {
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
}
/* helpers */
.p-0 {
  padding: 0;
}
.pl-0 {
  padding-left: 0;
}
.pr-0 {
  padding-right: 0px;
}

.m-0 {
  margin: 0;
}
.ml-0 {
  margin-left: 0;
}
.mr-0 {
  margin-right: 0px;
}

/* Survey Display */
.survey-container .survey-row {
  font-size: 14px;
  background: #ffffff;
}
.survey-container .survey-row td {
  padding: 5px;
}
.survey-container .survey-row .survey-actions .fa {
  font-size: 20px;
}
.no-surveys h1 {
  font-size: 15px;
}
/* Survey Item/Edit */
.survey-item-container select {
  width: 100%;
  height: 34px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 100%;
}

.survey-questions-header {
  margin: 20px 0 20px 0;
  font-size: 16px;
}

.survey-questions-items {
  padding: 15px;
}
.survey-questions-items .survey-questions-item {
  padding: 6px 6px;
}
/*.survey-questions-items .survey-questions-item.added { background: #ccd2d5; }*/
.survey-questions-items p:first-child {
}
.survey-questions-header h1 {
  font-weight: bold;
}
.survey-questions-header p {
  font-style: italic;
  font-size: 14px;
}
/* Survey Add */
.survey-add-container .survey-add-container-banner-preview-container {
  max-width: 450px;
  position: relative;
}
.survey-add-container #remove-survey-banner {
  display: none;
  position: absolute;
  right: 0;
}
.survey-add-container #remove-survey-banner:hover {
  cursor: pointer;
}
.survey-add-container #survey-banner-img {
  width: 100%;
}
.survey-add-container #survey-banner-img:hover {
  border: 4px solid #1f76c8;
}
.survey-add-container .survey-add-container-banner-preview {
  padding: 10px;
}

.remove-question-form i {
  font-size: 20px;
}
.remove-question-form i:hover {
  cursor: pointer;
}

/*Survey Report*/
.survey-report table tr td {
  padding: 15px;
}
/*Module News & events*/
.news-actions i {
  font-size: 25px;
  color: #000;
}
.news-actions td {
  width: 30px;
}
.news-actions button {
  background: none;
}
.news .toggle-group label {
  margin-top: 2px;
  font-weight: bold;
}
.news-container .statuson {
  color: #007bf7;
  font-size: 20px;
}
.news-container .statusoff {
  color: #808080;
  font-size: 20px;
}
/*Module date time instance*/
.date-time-opt {
  width: 100%;
  text-align: center;
}
.data-date-time {
  margin-top: 2%;
}
.date-time-header {
  margin-bottom: 2%;
}
.col-md-6.date-label {
  width: 30%;
}
.col-md-6.date-opt {
  width: 20%;
}
.col-md-6.time-opt {
  width: 20%;
}
.col-md-6.time-label {
  width: 30%;
}
.col-md-6.date-time-label-date.text-center {
  width: 25%;
}
.col-md-6.date-time-label-time.text-center {
  width: 72%;
}
#wrapper-content #notification {
  position: fixed;
  top: 54px; /* Set to 0 or wherever */
  width: 30%; /* set to 100% if space is available */
  z-index: 105;
  text-align: center;
  font-weight: normal;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background-color: #09cd49;
  padding: 2px;
  /* float: right; */
  right: 30%;
  height: 19px;
}
#wrapper-content #notification span.dismiss {
  border: 2px solid #fff;
  padding: 0 5px;
  cursor: pointer;
  float: right;
  margin-right: 10px;
}
#wrapper-content #notification a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}


.staff_roster_col_1 {
  height: -webkit-fill-available; 
  width: 20% !important; 
  display: flex !important;
  justify-content: center !important;
}

.staff_roster_col_2 {
  width: 50% !important;
}

.staff_roster_col_3 {
  width: 30% !important;
}


/* Default Interface */
/* Major Heading/Page Heading (dfi-1) */
.dfi-1 {
  font-family : "Rubik" !important;
  font-weight : 700 !important;
  font-size : 30px !important;
}

/* Subheading - Section Heading (dfi-2) */
.dfi-2 {
  font-family : "Rubik" !important;
  font-weight : 700 !important;
  font-size : 22px !important;
}

/* Group/Category Heading (dfi-3) */
.dfi-3 {
  font-family : "Roboto Flex" !important;
  font-weight : 700 !important;
  font-size : 16px !important;
}

.dfi-3-nb {
  font-family : "Roboto Flex" !important;
  font-size : 16px !important;
}

/* Text/Content/Labels/Menu/Captions */
.dfi-t {
  font-family : "Roboto Flex" !important;
  font-size : 14px !important;
}

input, select, textarea, button, li, label, a, span {
  font-family : "Roboto Flex";
  font-size : 14px;
}

/* Link */
.dfi-link {
  color: #1f76c8;
}

.mt-10 {
  margin: 10px 0 0 !important;
}

.mb-10 {
  margin: 0 0 10px;
}

.p-0 {
  padding: 0 !important;
}

.b-unset {
  border: unset !important;
}

.delete_btn {
  background-color: red !important;
  color: white !important;
}

.delete_color {
  color: red !important;
}