:root {
  /* V0
  --intrusion-set-bcolor: #006600;
  --intrusion-set-color: white;
  --intrusion-partset-bcolor: #006600;
  --intrusion-partset-color: #ff6600;
  --intrusion-unset-bcolor: white;
  --intrusion-unset-color: black;
  --intrusion-alarm-bcolor: #ff1a1a;
  --intrusion-alarm-color: #ffff00;*/
  --intrusion-set-bcolor: #44cc00ad;
  --intrusion-set-color: white;
  --intrusion-partset-bcolor: #44cc00ad;
  --intrusion-partset-color: #f0ad4e;
  --intrusion-unset-bcolor: white;
  --intrusion-unset-color: black;
  --intrusion-alarm-bcolor: #ff4d4d;
  --intrusion-alarm-color: #ffff00;
  --area-state-width: 80px;

  --color-main: #373737;
  --color-main-light: #4b4b4b;
  --color-main-light-light: #acacac;
  --color-main-dark: #222222;

  --color-secondary: #627d98;
  --color-secondary-light: #3F7FBF;



  --margin-default: 5px;
  --padding-default: 5px;
  --border-radius-default: 4px;
  --font-size-default: 13px;
  --font-size-icon-default: 15px;
}

body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: manipulation!important;
}

td.showAreaDetails:before {
  content: "";
  background: url(/css/images/details_open.png) no-repeat 0px -1px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  float: left;
}

tr.shown td.showAreaDetails:before {
  background: url(/css/images/details_close.png) no-repeat 0px -1px;
}

span.areaDetail {
  margin-left: 6px;
  margin-top: 1px;
  display: inline-block;
}

button.fullset,
button.fullunset,
button.intrusionRefreshBtn {
  float: right;
  margin-left: 10px;
}

button.isolateAlert,
button.integrateAlert,
button.restoreAlert {
  margin-left: 10px;
}

span.areaSet {
  display: inline-block;
  width: var(--area-state-width);
}

span.areaUnset {
  display: inline-block;
  width: var(--area-state-width);
}

span.areaAlarm {
  display: inline-block;
  width: var(--area-state-width);
}

span.areaIsolated {
  display: inline-block;
  width: var(--area-state-width);
}

.isolateZone,
.integrateZone {
  width: var(--area-state-width);
}

tr.intrusionAreaIsolatedUnset span.areaUnset {
  color: var(--intrusion-partset-color);
}

tr.intrusionAreaPartset span.areaSet {
  color: var(--intrusion-partset-color);
}

tr.intrusionArea td span.label {
  margin-left: 3px;
}

#titleIntrusion .btn-default {
  margin-right: 10px;
}

/*select#sltIntrusionService {
  display: none;
}*/
.progressCircle {
  width: 50px;
  height: 50px;
  background: none;
  position: relative;
}
.dropdown-contentAutofocus {
  display: none;
  position: absolute;
  background-color: #373737;
  min-width: 100px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  margin-left: 35%;
}
.dropdown-contentAutofocus li {
  text-decoration: none;
  display: block;
}
.dropdown-contentAutofocus li:hover {background-color: #ddd;}
.progressCircle::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;

  position: absolute;
  top: 0;
  left: 0;
}

.progressCircle>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progressCircle .progressCircle-left {
  left: 0;
}

.progressCircle .progressCircle-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 4px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.progressCircle .progressCircle-left .progressCircle-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progressCircle .progressCircle-right {
  right: 0;
}

.border-orange {
  border-color: orange;
}

.border-green {
  border-color: green !important;
}

.border-primary {
  border-color: #007bff !important;
}

.progressCircle .progressCircle-right .progressCircle-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progressCircle .progressCircle-value {
  position: absolute;
  top: 0;
  left: 0;
}

.streamImg {
  margin: 0 auto;
  display: block;
}

#myCanvas {
  background-color: red;
}

.snapshot {
  float: left;
  padding: 1px;
}

.astDeviceControlLinkWait {
  text-decoration: none;
  color: black;
  cursor: wait;
}

.astListControlTitle {
  color: white;
}

.bordered {
  border: 1px solid #ccc;
  padding: 7px;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.layoutGuardCell {
  height: 100%;
  padding-left: 0px !important;
  padding-right: 0px !important;
  background-color: black;
}

.astListControlTitleContainer {
  background-color: #747474;
  text-align: center;
  padding: 5px;
}

.astDeviceControlLinkOnline {
  cursor: pointer;
}

.astDeviceControlLinkOffline {
  text-decoration: none;
  color: black;
  cursor: default;
}

.astDeviceControlLinkOffline:hover {
  text-decoration: none;
  color: black;
  cursor: default;
}

.astDeviceControlLinkDisable {
  text-decoration: none;
  color: black;
  cursor: default;
}

.astDeviceControlLinkDisable:hover {
  text-decoration: none;
  color: black;
  cursor: default;
}

.astDeviceControlLinkError {
  text-decoration: none;
  color: black;
  cursor: default;
}

#dvBottomPanel {
  font-size: 12px !important;
}


.astMenuSideBarIconMode {
  width: 53px;
}

.nav_Disabled {
  pointer-events: none;
  opacity: 0.4;
}

@media(min-width: 767px) {
  .astBodyIconMode {
    margin-left: 40px;
  }
}

.astMenuSideBarTextMode {
  width: 16.66666667%;
}

@media(min-width: 767px) {
  .astBodyIconTxtMode {
    width: 83.33333333%;
    margin-left: 16.66666667%;
  }
}

.nav>li>a.astCollapseLink {
  color: #999
}

.nav>li>a.astCollapseLink:hover,
.nav>li>a.astCollapseLink:focus {
  color: #999;
  text-decoration: none;
  background-color: transparent;
}

.ast_fail_dot {
  background-color: red;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block
}

.ast_success_dot {
  background-color: green;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block
}

.ast_dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block
}

.ast_red_txt {
  color: red;
  font-weight: bold;
}

.ast_txt_warn {
  color: orange;
  font-weight: bold;
}

.ast_form_label {
  text-align: right;
  margin-top: 6px;
}

.ast_margin_top_10 {
  margin-top: 10px;
}

#player_content {
  padding: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.main {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.col-1-gold {
  width: 39%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  float: left;
  text-align: right;
}

.col-1-gold-offset {
  margin-left: 39%;
}

.col-2-gold {
  width: 61%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}

.ast-no-border {
  border: 0px !important;
}
/*#region Alarm*/



/*#endregion*/


/* Live page */
#liveQualityControl1 {
  margin-bottom: 10px;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

#liveQualityControl2 {
  margin-top: 20px;
}
/* Report */

  .pdf{
    display: none
  }
/* Replay */
#replayXSReplayControl {
  width: 233px;
  margin-bottom: 5px;
  margin-top: 5px;
}

#replayGoToDate {
  float: left;
  width: 170px;
  margin-right: 10px;
}

#replayGoToDate2 {
  float: left;
  width: 170px;
  margin-right: 10px;
  margin-bottom: 5px;
}

#replayGoToButton {
  float: left;
}

#replayQuality1 {
  margin-bottom: 10px;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

@media (max-width: 991px) {
  #replayQuality1 {
    margin-bottom: 10px;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (max-width: 768px) {
  #replayQuality1 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

#replayQuality2 {
  padding-right: 20px;
  padding-left: 20px;
}

/*camera Edit */

.cameraEditTabItem {
  min-height: 45px;
  padding-top: 0px !important;
  padding-bottom: 5px !important;
}

/*Screen Edit */

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

/* Users */
#userDivAddUserButton {
  margin-left: 16%;
}

@media (max-width: 990px) {
  #userDivTable {
    margin-left: 0px;
  }
}

@media (max-width: 768px) {
  .ast_table_responsive td {
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Screen edit */

.col-no-padding-right {
  padding-right: 0px !important;
}

@media (max-width: 768px) {
  #panel {
    display: block !important;
  }
}

#screenEditPopup {
  max-width: 1024px;
  width: 99%;
}

.ast_cursor_hand {
  cursor: pointer;
}

.ast_icon_flipped {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}

.no-close .ui-dialog-titlebar-close {
  display: none
}

.ui-widget.motion-dialog {
  font-family: Verdana, Arial, sans-serif;
  font-size: .8em;
}

.ui-widget-content.motion-dialog {
  background-color: rbga(0, 0, 0, 0.5);
  border: 1px solid black;
}

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
}

select {
  -webkit-appearance: none;
  background: url('/images/arrow.png') no-repeat right center !important;
}

select[disabled] {
  background-color: #eee !important;
}

/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

div.datePicker {
  max-width: 185px;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px;
  /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}

.nav-sidebar>li>a {
  padding-right: 20px;
}

.nav-sidebar>.active>a {
  color: #fff;
  background-color: #428bca;
}


/*
 * Main content
 */

.main {
  padding-top: 5px;
}

@media (min-width: 768px) {
  .main {
    padding-right: 40px;
  }
}

.main .page-header {
  margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}

.placeholders h4 {
  margin-bottom: 0;
}

.placeholder {
  margin-bottom: 20px;
}

.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

.logoWaitAnim {
  width: 250px;
  height: 250px;
  display: block;
  margin: auto;
  /*position: absolute;
    top: 50%;
    left:50%;*/
  /*transform: translateY(-50%);
    transform: translateX(-50%);*/
  /*-webkit-animation: fadeinout 1s linear forwards;
    animation: fadeinout 1s linear forwards;*/
  -webkit-animation: flickerAnimation 3s infinite;
  -moz-animation: flickerAnimation 3s infinite;
  -o-animation: flickerAnimation 3s infinite;
  animation: flickerAnimation 3s infinite;
}

.logoHead {
  width: 200px;
  height: 34px;
  margin-top: -7px;
}

@-webkit-keyframes fadeinout {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeinout {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}




@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.overlay-icon-button-checked {
  position: relative;
  top: -67%;
  left: -44%;
  color: limegreen;
  display: none;
}

.switchCustom input {
  display: none;
}

.switchCustom {
  display: inline-block;
  width: 40px;
  height: 20px;
  transform: translateY(50%);
  position: relative;
}

.sliderCustom {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: .4s;
}

.sliderCustom:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #777;
  border-radius: 20px;
  transform: translateX(-20px);
  transition: .4s;
}

input:checked+.sliderCustom:before {
  transform: translateX(20px);
  background: limeGreen;
}

input:checked+.sliderCustom {
  box-shadow: 0 0 0 2px limeGreen, 0 0 2px limeGreen;
}

.btnRowGroup {
  height: 17px;
  width: 17px;
  border: 2px solid white;
  border-radius: 14px;
  color: white;
  background-color: #31b131;
  box-shadow: 0 0 3px #444;
}

::-webkit-scrollbar {
  width: 12px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.tooltip {
  position: relative;
  display: inline-block;
  font-size: 16px;
}

.tooltip-inner {
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 5px 5px 5px;
  border-radius: 6px;
  position: absolute;
  font-size: 12px;
  float: left;
  clear: left;
}

.iti-flag {
  background-image: url("/images/flags.png");

  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2 / 1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    background-image: url("/images/flags@2x.png");
  }
}

.intl-tel-input {
  width: 100%;
}

.wordInLine {
  display: flex;
  margin-bottom: 20px;
}

.wordInLine:before,
.wordInLine:after {
  content: "";
  flex: 1 1;
  border-bottom: 2px solid #000;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
  margin-right: 5px;
}

#navBarCollapseControl>ul>li>a {
  color: white !important;
}

#navBarCollapseControl>ul>li>ul>li>a {
  color: white !important;
}

#navBarCollapseControl>ul>li>ul {
  background-color: #222222 !important;
  color: white !important;
}

.badge-success {
  background-color: #28a745;
}

.badge-warning {
  background-color: #ffc107;
}

.badge-danger {
  background-color: #dc3545;
}

.image_with_overlay {
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}

.icon_overlay {
  transition: .5s ease;
  opacity: 0;
}

.videoContainer:hover .image_with_overlay {
  opacity: 0.7;
}

.videoContainer:hover .icon_overlay {
  opacity: 1;
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

  table.responsive-mobile {
    display: block;
  }

  table.responsive-mobile>thead,
  table.responsive-mobile>tbody,
  table.responsive-mobile>thead>tr,
  table.responsive-mobile>thead>tr>th,
  table.responsive-mobile>tbody>tr,
  table.responsive-mobile>tbody>tr>td {
    display: block !important;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  table.responsive-mobile>thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.responsive-mobile>tbody>tr {
    margin-bottom: 15px;
  }

  .responsive-mobile>tr {
    border: 1px solid #ccc;
  }

  .responsive-mobile>td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  .responsive-mobile>td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45% !important;
    padding-right: 10px;
    white-space: nowrap;
  }

  .titleAstCustom {
    width: 100%;
    background-color: #373737;
    padding: 7px;
    border-radius: 5px;

  }
}




/*#region ast-mobile-toolbar*/
.ast-mobile-toolbar {
  display: none;
  z-index: 2;
  align-items: center;
  justify-content: space-evenly;
  position: fixed;
  height: 50px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  filter : saturate(2);
  background-color: rgba(177, 177, 177, 0.2);
  background-blend-mode: overlay;
  width: 100%;
  bottom: 0px;
}

.ast-mobile-toolbar div:first-of-type {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 5px 0 5px;
}

.ast-mobile-toolbar .tags-list {
  justify-content: left!important;
}



@media screen and (max-width: 768px) {
  .ast-mobile-toolbar {
    display: flex;
  }
}

/*#endregion*/





.mobile-toolbar-tab {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-toolbar-tab:first-child {
  width: 85%;
}
/*#region width*/
.ast-full-width {
  width: 100%!important;
}
.ast-full-width-child > * {
  width: 100%!important;
}
/*#endregion */

/*#region z index*/
.ast-high-zindex {
  z-index: 10000;
}
/*#endregion*/


/*#region ast-margin*/
.ast-margin {
  margin: var(--margin-default);
}

.ast-margin-horizontal {
  margin: 0 var(--margin-default) 0 var(--margin-default);
}
.ast-margin-horizontal-2x {
  margin: 0 calc(var(--margin-default) * 2) 0 calc(var(--margin-default) * 2);
}
.ast-margin-vertical {
  margin: var(--margin-default) 0 var(--margin-default) 0;
}

.ast-margin-left {
  margin: 0 0 0 var(--margin-default);
}

.ast-margin-right {
  margin: 0 var(--margin-default) 0 0;
}

.ast-margin-top {
  margin: var(--margin-default) 0 0 0;
}

.ast-margin-bottom {
  margin: 0 0 var(--margin-default) 0;
}

/*#endregion*/

/*#region padding */
.ast-padding {
  padding: var(--padding-default);
}

.ast-padding-horizontal {
  padding: 0 var(--padding-default) 0 var(--padding-default);
}

.ast-padding-vertical {
  padding: var(--padding-default) 0 var(--padding-default) 0;
}

.ast-padding-left {
  padding: 0 0 0 var(--padding-default);
}

.ast-padding-right {
  padding: 0 var(--padding-default) 0 0;
}

.ast-padding-top {
  padding: var(--padding-default) 0 0 0;
}

.ast-padding-bottom {
  padding: 0 0 var(--padding-default) 0;
}

/*#endregion*/


/*#region ast-flex */
.ast-flex {
  display: flex;
}

.ast-flex-align-center {
  display: flex;
  align-items: center;
}
.ast-flex-between {
  display: flex;
  justify-content: space-between;
}
/*#endregion*/

/*#region justify*/
.ast-justify-center {
  justify-content: center;
}
/*#endregion*/

/*#region overflow*/
.ast-overflow-hidden {
  overflow: hidden;
}

.ast-overflow-x-hidden {
  overflow-x: hidden;
}

.ast-overflow-y-hidden {
  overflow-y: hidden;
}

.ast-overflow-auto {
  overflow: auto;
}

.ast-overflow-y-auto {
  overflow-x: hidden;
  overflow-y: auto;
}

.ast-overflow-x-auto {
  overflow-y: hidden;
  overflow-x: auto;
}

/*#endregion

/*#region text-overflow*/
.ast-text-overflow-ellipsis {
  text-overflow: ellipsis;
}

/*#endregion*/

/* #region cursor */
.ast-cursor-pointer {
  cursor: pointer;
}

/* #endregion */


/*#region btn*/
.ast-btn-flat,
.ast-btn-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--padding-default) * 2);
  border-radius: var(--border-radius-default);
  border: none;
  background: transparent;
  transition: all .15s ease-in-out;
}



.ast-btn-icon {
  transition: all .01s ease-in-out;
  transform-origin: center;
}

.ast-btn-flat:hover {
  background-color: rgba(0, 0, 0, .06);
}

.ast-btn-flat:active {
  transition: all .02s ease-in;
  -webkit-box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, .1);
  background-color: rgba(0, 0, 0, .15);
}

.ast-btn-icon:active {
  transform: scale(.9);
}

.ast-btn-icon:active span {
  color: rgba(255, 255, 255, .8) !important;
}

/*#region secondary btn handling*/
.ast-btn-flat.ast-secondary {
}

.ast-btn-flat.ast-secondary:hover {
  background-color: rgba(63, 127, 191,.2);
}

.ast-btn-flat.ast-secondary:active {
  transition: all .02s ease-in;
  -webkit-box-shadow: inset 0px 0px 0px 2px rgba(63, 127, 191,.5);
  box-shadow: inset 0px 0px 0px 2px rgba(63, 127, 191,.5);
}

/*#endregion */

/*#region align*/ 
.ast-align-center {
  align-items: center;
}

/*#region text*/
.ast-text-w {
  font-size: var(--font-size-default);
  color: rgb(240, 240, 240);
}

.ast-text-b {
  font-size: var(--font-size-default);
  color: rgb(10, 10, 10);
}

/*#endregion */



/*#region icon*/
.ast-icon-w {
  font-size: var(--font-size-icon-default);
  color: rgb(240, 240, 240) !important;
}

.ast-icon-b {
  font-size: var(--font-size-icon-default);
  color: rgb(10, 10, 10);
}

/*#endregion */





/*#region ast-searchbox*/
#dvControlsLive {
  padding: 15px;
}
.ast-search-box-container {
  margin-left: 0;
  width: clamp(200px, 100%,100%);
  height: 24px;
  padding: var(--padding-default);
  display: flex;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  align-items: center;
  justify-content: left;
  border-radius: var(--border-radius-default);
   border-radius: var(--border-radius-default);

}

.ast-search-box-container .glyphicon-search {

  margin: 0 5px 3px 5px;
}


.ast-search-box-container i {
  color: rgba(255, 255, 255, .3);
  font-size: 12px;
  margin-bottom: 2px;
}

.ast-search-box {
  margin-top: 0px!important;
  background-color: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, .7);
  width: auto!important;
  flex-grow: 1;
  font-size: var(--font-size-default) !important;
  margin-top: 2px;
  box-shadow: 0px !important;
  outline: none !important;
}

.ast-search-box:focus {
  font-size: var(--font-size-default) !important;
}

/*#endregion */




.tags-list {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  overflow-y: auto;
  width: 80%;
  max-height: 40px;
}
.tags-list > * {
  margin-left: var(--margin-default);
  margin-right: var(--margin-default);
}





.cam-tag {
  display: flex;
  padding: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: var(--color-main-light-light);
  color: white;
  font-size: 10px;
  border-radius: calc(var(--border-radius-default) * 2);
  margin: var(--margin-default);
}






/* ast media queries */

@media screen and (max-width: 768px) {
  .ast-onmobile-nofloat {
    float: none!important;
  }
  .ast-onmobile-flex {
    display: flex!important;
    align-items: center;
  }

  .ast-onmobile-flex-grow {
    flex-grow: 1;
  }
  .ast-onmobile-flex-column {
    display: flex;
    flex-direction: column;
  }
  .ast-onmobile-reduced-font {
    font-size: .8em!important;
  }
  .ast-onmobile-high-zindex {
    z-index: 10000;
  }
  .ast-onmobile-full-width {
    width: 100%!important;
  }
  .ast-onmobile-child-full-width > * {
    width: 100%;
  }
  .ast-onmobile-full-height {
    height: 100%!important;
  }
  .ast-onmobile-none {
    display: none;
  }
  .ast-onmobile-full-screen-width {
     width: 100vw!important;
  }
}



.popup_replay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
 .popup_content_replay {
    overflow:auto;
    background: white;
    color: black;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
  }
    .close_replay {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      display: block;
    }
    .span_replay {
        cursor: pointer;
        position: fixed;
        width: 20px;
        height: 3px;
        background: #099ccc;
        
      }
.ast-carousel{
  display:block;
  width: 100%;
  /*background: white;*/
  overflow-x: scroll;
  padding: 10px;
  margin : 0px;
  margin-bottom: 10px;
  white-space: nowrap; 
}

.ast_card_user{
    display: inline-block;
    width: 150px;
    cursor:pointer;
    text-align:center;
    padding:0;
    margin-right:10px;
    border:solid;
    margin: 0 10px;
    background: rgba(0, 0, 0, 0.05) no-repeat center center;
    background-size: cover;
    position:relative;
    margin-bottom: 5px;
}

/*#region button*/
.row-btn {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-default) 0 var(--padding-default);
}


/*#region desktop*/
@media screen and (min-width: 769px) {
  .ast-ondsk-margin-right {
    margin-right: var(--margin-default);
  }
}
/*#endregion*/