:root {
  /**
  * Animated.
  */
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
  /**
  * Preloader.
  */
  --color: #F3F3F3;
  --stroke-width: .5px;
  --size: 102px;
}

*, :after, :before {
  box-sizing: border-box;
}
html {
  line-height: 1.5;
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  overflow: hidden;
  background: #000;
  user-select: none;

}
body{
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #fff;
}
html,body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
h2,h3,h4,h5{
  margin: 0.67px 0;
}
a {
  background-color: transparent;
}
img {
  border-style: none;
}

/**
 * Default paragraph.
 */

.reset-margin{
  margin: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
button,
input { /* 1 */
  overflow: visible;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
[hidden] {
  display: none;
}
.col-full{
  width: 100%;
}

.wrap-right img{
  margin-right: 16px;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-items{
  line-height: 12px;
}
.list-items li > p{
  line-height: 16px;
}
.wg-container {
  position: relative;
  width: calc(100% - 64px);
  margin: auto;
  height: 100%;
  padding: 40px 0px;
}
.wg-collection{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}
.wg-items {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  margin: 4px;
  padding: 8px;
  position: relative;
  text-align: center;
  /* border: 2px solid #eee; */
  width: calc(100% / 3 - 8px);
}
.wg-items.full.footer{
  position: absolute;
  right: 0;
  bottom: 40px;
  left: 0;
  width: 100%;
  margin: auto;
}
.btn{
  background-color: rgba(255,255,255,.2);
  padding: 8px;
  border: 1px solid #fff;
  border-radius: 3px;
}
.btn.btn-circle{
  border-radius: 50%;
}
.wg-items.full.footer p{
  margin: 0;
}
.wg-items-events li{
  position: relative;
  margin-right: 16px;
}
.wg-items-events .btn{
  width: 32px;
  height: 32px;
  display: block;
}
.wg-items-events .btn svg{
  width: 16px;
  height: 16px;
  margin-top: 0px;
}
.wg-items .logo{
  width: 170px;
}
.wg-items .wrap img{
  width: 50px;
}
.wg-items .inline-text-icon{
  margin: 4px 0px;
}
.wg-items .inline-text-icon p{
  width: 90px;
  margin: 6px 0;
}
.wg-items .inline-text-icon img{
  width: 16px;
}
.wg-items .opacity:nth-child(1),
.wg-items .opacity:nth-child(2){
  opacity: 1;
}

.wg-items .opacity:nth-child(3){
  opacity: .8;
}
.wg-items .opacity:nth-child(4){
  opacity: .6;
}
.wg-items .opacity:nth-child(5){
  opacity: .4;
}

.wg-items .inline-text-icon .list-item:nth-child(1){
  width: 90px;
}
.wg-items .inline-text-icon .list-item:nth-child(2){
  width: 24px;
  margin-right: 4px;
  margin-left: 32px;
}
.wg-items .inline-text-icon .list-item:nth-child(3){
  width: 30px;
}
.wg-items .inline-text-icon .list-item:nth-child(4){
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
  margin-left: 16px;
  text-overflow: ellipsis;
}
.wg-items .inline-text-icon p i{
  margin-right: 4px;
}
.wg-items.floating{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  margin: auto;
  text-align: center;
}
.wg-items.full{
  width: 100%;
}

/**
 * Default gap top.
 */
.xxl-top{
  margin-top: 48px;
}
.xl-top{
  margin-top: 40px;
}
.xl-top{
  margin-top: 32px;
}
.l-top{
  margin-top: 28px;
}
.m-top{
  margin-top: 24px;
}




/**
 * Default flexbox.
 */

.flex{
  display: flex;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-row{
  flex-direction: row;
}
.flex-column{
  flex-direction: column;
}
.justify-space-between{
  justify-content: space-between;
}
.justify-flex-center{
  justify-content: center;
}
.justify-flex-end{
  justify-content: flex-end;
}
.align-center{
  align-items: center;
}

/**
 * Default styles - background color.
 */

.bg-color-transparent-black{
  background-color: rgba(0,0,0,.85);
}

/**
 * Default styles - color.
 */

.dimmed {
  color: #666;
}

.normal {
  color: #999;
}

.bright {
  color: #fff;
}

/**
 * Default styles - size.
 */

 .xsmall {
  font-size: 15px;
  font-size: 1rem;
  line-height: 20px;
  letter-spacing: .25px;
}

.small { 
  font-size: 1rem;
  line-height: 25px;
  letter-spacing: .5px;
}

.xmedium {
  font-size: 21px;
  line-height: 54px;
}
.xxmedium {
  font-size: 1.8rem;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: .5px;
}

.medium {
  font-size: 38px;
  line-height: 54px;
}

.large {
  font-size: 60px;
  line-height: 65px;
}

.xlarge {
  font-size: 75px;
  line-height: 75px;
  letter-spacing: -3px;
}

/**
 * Default styles - weight.
 */

.light {
  font-weight: 100;
}
.regular {
  font-weight: 300;
}
.bold {
  font-weight: 500;
}

.black-100{
  color: #0f0f0f;
}
.black-80{
  color: #696969;
}
.red-100{
  color: #b44949
}
/**
 * Default styles - position.
 */

.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}

.img-xsmall{
  width: 14px;
}

/**
 * Animated.
 */
.animated {
  animation-duration: 1s;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
}
.animate-delay-0{
  animation-delay: 0s;

}
.animate-delay-1{
  animation-delay: .25s;

}
.animate-delay-2{
  animation-delay: .5s;

}
.animate-delay-3{
  animation-delay: .75s;

}
.animate-delay-4{
  animation-delay: 1s;

}
.animate-delay-5{
  animation-delay: 1.25s;

}

@keyframes icon {
  50% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  75% {
    fill: transparent;
    stroke-width: var(--stroke-width);
  }
  100% {
    stroke-dashoffset: 0;
    fill: var(--color);
    stroke-width: 0px;
  }
}
 @keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* @-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.1;}
}
@keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.1;}
} */
/* .blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}
.blink-red{
  background-color: #ea3535;
}
.blink-circle{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
} */

.pulse{
  width: 32px;
  height: 32px;
  border-radius: 50% ;
  transform: scale(0);
  position: absolute;
  z-index: -1;
  background-color: #feeb70;
}
.pulse.active{
  animation: pulse 2s 4;
}
@keyframes pulse {
  0%{
      transform: scale(0);
      opacity: 0.5;
  }
  100%{
      transform: scale(5);
      opacity: 0;
  }

}
.animate-fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.animate-fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
.animate-fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.animate-zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.push-24-left{
  padding-left: 24px
}

/* 
 * Preloader for Smart mirror
 */
 .preloader{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   bottom: 0;
   z-index: 100;
   background-color: black;
 }
 .icon {
  width: 100%;
  max-width: 300px;
 }
 .icon path{
  color: var(--color);
  stroke-width: var(--stroke-width);
  stroke-dashoffset: -5000;
  stroke-dasharray: 5000;
 }
 .icon path.is-active{
  animation-name: icon;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
 }
/* Menu smartmirror */
.popup{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgba(0,0,0,.95);
}
.popup.popup-helper-speak{
  background-color: transparent;
  justify-content: center;
}
.popup.popup-helper-speak #show-speak p{
  width: 100%;
  margin-top: 16px;
  text-decoration: underline;
  font-size: 22px;
}
.popup.popup-helper-speak .container-helper{
  width: 100%;
  max-width: 1280px;
  height: 100%;
  max-height: 800px;
  background-color: rgba(255,255,255,.15);
  /* border: 1px solid rgba(255,255,255,.15); */
  border-radius: 6px;
  margin: auto 32px;
  padding: 16px;
  position: relative;
}
@media only screen and (max-height: 800px) {
  .popup.popup-helper-speak .container-helper{
    max-height: 630px;
  }
}
.popup.popup-helper-speak .container-helper h3{
  margin-top: 32px;
}
.popup.popup-helper-speak .container-helper p{
  margin: 8px 0;
}
.popup.popup-helper-speak .container-helper .container-list{
  margin: 64px auto 32px;
  /* border-bottom: 1px solid rgba(255,255,255,.15); */
  padding-bottom: 8px;
  padding-right: 16px;
  padding-left: 16px;
  width: 100%;
  max-width: calc(992px + 32px);
}
#container-list-helper > li{
  width: 185px;
  margin-bottom: 32px;
  margin-right: 16px;
}
.popup.popup-helper-speak .container-helper .container-list > li svg{
  width: 80px;
  margin-bottom: 8px;
}
.popup.popup-helper-speak .container-helper .container-list > li p{
  font-size: 14px;
}
.overlay-camera{
  width: 15%;
  height: 155px;
  position: relative;
  z-index: 100;
  margin-top: 16px;
  margin-left: 16px;
  position: relative;
  z-index: 101;
}
.popup-camera video, .popup-camera canvas{
  /* width: 100%;
  height: 100%;
  z-index: 101; */
  border-radius: 32px;
}

.popup-camera video.landscape, .popup-camera canvas.landscape{
  max-width: 1280px;
  max-height: 720px;
  margin: auto
}
.popup-camera video.potrait, .popup-camera canvas.potrait{
  max-width: 720px;
  max-height: 1280px;
}

#weatherCalendar p span:nth-child(1){
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 16px;
}
#weatherCalendar ul li p span:nth-child(2){
  white-space: nowrap;
  width: 120px;
}

.container-video{
  position: relative;
  top: 0;
  z-index: 100;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  margin: auto;
}
.container-thumbnail{
  width: 15%;
  background-color: #000000;
  height: 155px;
  position: relative;
  z-index: 100;
  margin-top: 16px;
  /* padding: 32px; */
  /* border: 1px solid #353535; */
  margin-left: 16px;
  position: relative;
  z-index: 101;
}
/* .container-thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
} */
.box-countDown{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  font-size: 70px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* border: 2px solid #ffffff; */
  padding: 12px;
  /* font-family: "Roboto-Medium", Roboto; */
  font-weight: 300;
}
.wrap-video-recording{
  position: relative;
}
.wrap-video-recording .durationVideo{
  position: absolute;
  top: 0;
  width: 100%;
  max-width: 70px;
  margin: 16px auto;
  background-color: rgba(0,0,0,.5);
  height: 32px;
  right: 0;
  left: 0;
  padding: 8px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.5)
}
.wrap-video-recording ul{
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 32px 64px 50px;
  background-color: rgba(0,0,0,.35);
}
.wrap-video-recording li{
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,.5);
  border-radius: 50%;
  text-align: center;
  order: 1;
}
.wrap-video-recording li.active{
  transform: scale3d(1.1, 1.1, 1.1);
  order: 2;
}

.wrap-video-recording .list-event-thumbnail{
  order: 3;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,85);
  background-color: rgb(112 112 112 / 87%);
}

.wrap-video-recording .list-event-thumbnail img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.wrap-video-recording .list-event-camera svg{
  width: 30px;
  fill: #fff;
}

.wrap-video-recording .list-event-video .icon-record{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #cb3737;
}
.wrap-video-recording .list-event-camera .labelCamera,
.wrap-video-recording .list-event-video .labelVideo,
.wrap-video-recording .list-event-thumbnail .labelGallery{
  width: 120px;
  position: absolute;
  top: 100px
}

.wrap-video-recording .list-event-video .icon-stop-record{
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: #cb3737;
}

.circle-capture{
  display: block;
  width: 18px;
  height: 18px;
  background-color: #f55b5b;
  border-radius: 50%;
  border: 2px solid #000000;
  margin: 16px 16px 16px 4px;
  box-shadow: 0 0 1px 3px rgb(238 90 91);
}

.area-chatbox{
  height: 100%;
  max-height: calc(100vh - 445px);
  overflow-y: auto;
}

.area-chatbox::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}

.area-chatbox::-webkit-scrollbar-track {
  background: #262626;        /* color of the tracking area */
}

.area-chatbox::-webkit-scrollbar-thumb {
  background-color: #d7d7d70a;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  /* border: 3px solid orange;  creates padding around scroll thumb */
}

.area-chatbox li{
  padding: 1px 0;
}
.area-chatbox li:nth-child(1n){
  padding-left: 16px;
  font-size: 20px;
  line-height: 24.5px;
  margin-bottom: 16px;
}
.area-chatbox li:nth-child(2n){
  padding-left: 0;
  font-size: 1rem;
  line-height: 20.5px;
}
.container-btn{
  position: relative;
}
.wave{
  margin-top: 12px;
  margin-left: 16px;
  opacity: .4;
}
.svg-close{
  margin-left: 8px;
  width: 16px;
}
.labelClose{
  position: absolute;
  top: -30px;
  right: 0;
}
.labelClose{
  position: absolute;
  top: -30px;
  right: 0;
}
.labelClose span{
  font-size: 14px;
  letter-spacing: .65px;
  font-weight: 300;
}
.info-1{
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 1080px){
  .info-1 p, .info-2 p{
    font-size: .875rem;
  }
}

.info-2{
  position: absolute;
  top: -64px;
  right: 0;
  padding-right: 32px;
}

.info-2 svg{
  position: relative;
  top: 2px;
}
.isOfline{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: #ffa635;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.isOfline .container{
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.isOfline svg{
  width: 16px;
  display: block;
  margin-right: 16px;
  color: #282828;
}
.isOfline span{
  font-size: 14px;
  color: #282828;
}

/* youtube video player */
#widget-player{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999 ;
}
#widget-player .overlay{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,.9);
  z-index: 1;
}
.inner-container{
  width: 992px;
  margin: auto;
  position: relative;
  z-index: 1;
}
.video-control{
  width: 100%;
  padding: 16px;
  background-color: #1d1d1d;
}

.items-info{
  margin-left: 16px;
}

.inner-placeholder{
  margin: auto;
}
/* .placeholder-music{
 background-color: #282828;
} */
.labelInfo{
  text-align: right;
  margin: 16px 0 16px auto;
}
.span-close{
  margin-left: 8px;
}
#placeholder-icon-music{
  width: 72px;
  height: 72px;
  margin-right: 16px;
}
#placeholder-icon-video{
  width: 72px;
  height: 72px;
  margin-right: 16px;
}
#menu-icon-music,
#menu-icon-video{
  width: 32px;
  height: auto; 
  margin-right: 16px;
}
.container-list-music{
  border-top: 1px solid rgba(255,255,255,.35);
  padding: 16px 0;
}
.boxTopMusic{
  margin-top: 56px;
}
.listVideo{
  width: calc(100% / 5);
  height: 92px;
  margin-right: 16px;
}
.info-response > .item-info{
  line-height: 1.25;
}
.listVideo h4{
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cover-list-music{
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  border-radius: 4px;
}
.cover-list-music img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
img.cover-list-music{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.song-music{
  text-align: center;
  margin-top: 8px;
}
.artist-music{
  text-align: center;
  color: rgba(255,255,255,.7);
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .85rem;
}
.widget-gallery,.overlay-gallery{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.widget-gallery{
  z-index: 9999;
}
.overlay-gallery{
  z-index: 1;
  background-color: rgba(0,0,0,1);
}
.inner-widget-gallery{
  position: relative; 
  z-index: 2;
  width: 100%;
  /* max-width: 1080px; */
  height: 100%;
  max-height: 1080px;
  margin: auto;
  border-radius: 4px;
  /* overflow: hidden; */
  /* background-color: #fff; */
  justify-content: center;
}
.swiper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.mirrorH{
  transform: scale(-1, 1);
}
#widget-gallery .swiper-slide {
  opacity: 0.4;
  width: calc(100% - 200px);
}
#widget-gallery .swiper-slide-active{
  opacity: 1;
  /* width: calc(100% - 50px); */
}

/* #widget-gallery .swiper-slide-thumb-active {
  opacity: 1;
} */

.swiper-slide img, .swiper-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#widget-gallery .swiper-slide img, #widget-gallery .swiper-slide video{
  transform: scale3d(.85,.85,.85);
} 
#widget-gallery .swiper-slide-active img,
#widget-gallery .swiper-slide-active video{
  transform: scale3d(1.1,1.1,1.1);
}

.box-thumbnail-photo{
  padding: 16px;
}

.labelCloseGallery{
  position: absolute;
  z-index: 10;
  top: -48px;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 1080px;
  margin: auto;
  justify-content: flex-end;
  margin-right: 32px;
}

/* Style map */
.widget-map{
  z-index: 9999;
}
.widget-map, .overlay{
  position: fixed;
  top: 0;
  right: 0;
  bottom:0;
  left:0;
  width: 100%;
  height: 100%;
}

.widget-map .inner-widget-map{
  position: relative;
  background-color: rgba(255,255,255,0);
  width: 100%;
  max-width: 1280px;
  height: 100%;
  max-height: 750px;
  /* padding: 16px; */
  overflow: hidden;
  /* border-radius: 40px; */
  margin: auto;
}

.widget-map .myMap{
  width: 100%;
    max-width: 920px;
    height: 290px;
    margin: auto;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  /* overflow: hidden; */
}

.widget-map .myLocation{
  padding: 32px 32px 0;
  /* width: 100%;
  max-width: 1280px; */
  width: 100%;
  max-width: 920px;
  background-color: rgba(255,255,255,.95);
  margin: auto;
  outline: none;
  border: none;
  padding-bottom: 200px;
  border-top: 1px solid #fff;
}

.widget-map ul{
  margin-top: -175px;
}
.widget-map .list-item{
  width: 240px;
  border-radius: 4px;
  margin-right: 16px;
}
.widget-map .myLocation h3{
  width: 100%;
  max-width: 920px;
  font-size: 28px;
}
.widget-map .wrapInfo h3{
  font-size: 1rem;
  line-height: 22px;
  letter-spacing: 0;
  font-weight: 600;
  width: 208px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.widget-map .wrapInfo h4{
  font-size: 1rem;
  letter-spacing: 0;
  color: #47464a;
  font-weight: 400;
  text-transform: capitalize;
  margin-bottom: 8px;
}

.wrapImg{
  width: 240px;
  height: 130px;
  background-color: #f1f1f1;
  position: relative;
  overflow: hidden;
}
.wrapImg img{
  width: 100%;
  display: block;
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
    margin: auto;
}
.wrapInfo{
  padding: 16px;
  background-color: rgba(255,255,255,.98);
  height: 170px;
}
.wrapInfo .labelDis{
  margin-left: 12px;
  margin-right: 16px;
}
.wrapInfo .wrapIcon img{
  margin-right: 8px;
}
.wrapInfo .wrapIcon span{
  display: block;
  margin-left: 8;
  margin-right: 16px;
}
.wrapInfo .wrapIcon p{
  margin-top: 0;
  margin-bottom: 0;
}
.wrapInfo .openingHours,
.wrapInfo .wrapPhone{
  margin: 0;
  font-weight: 400;
  height: 26px;
}
.wrapInfo .wrapPhone{
  margin-bottom: 8px;
}

.widget-map .wrapIconClose{
  width: 100%;
  max-width: 920px;
  justify-content: flex-end;
  margin: 16px auto;
}

/* icon svg */
#calendar_svg .cls-1{
  fill:url(#radial-gradient);
}
#calendar_svg .cls-2{
    fill:url(#radial-gradient-2);}
#calendar_svg .cls-3{
  font-size:74.77px;
  fill:#fff;
  font-family:Roboto-Black, Roboto;
  font-weight:800;
}
#calendar_svg .cls-4{
  letter-spacing:-0.01em;
}
#calendar_svg  .cls-5{
  letter-spacing:0em;
}
#calendar_svg .cls-6{
  font-size:305.15px;
  fill:#2b2b2b;
  font-family:Roboto-Medium, Roboto;
  font-weight:500;
}

#camera_svg .cls-1 {
	isolation: isolate;
}

#camera_svg .cls-2 {
	fill: url(#radial-gradient);
}

#camera_svg .cls-3 {
	fill: url(#linear-gradient);
}

#camera_svg .cls-4 {
	fill: url(#linear-gradient-2);
}

#camera_svg .cls-5 {
	fill: url(#linear-gradient-3);
}

#camera_svg .cls-6 {
	mask: url(#mask);
}

#camera_svg .cls-7 {
	mix-blend-mode: multiply;
	opacity: 0.73;
}

#camera_svg .cls-8 {
	fill: #939393;
}
 
#camera_svg .cls-9 {
	filter: url(#luminosity-invert);
}
.wrap-no-result .iconNoResult svg{
  width: 60px;
  height: 60px;
}
.wrap-no-result p{
margin-top: 4px;
margin-bottom: 4px;
}
.wrap-no-result h3
{
margin-top: 8px;
margin-bottom: 0px;
}
.introduce{
  margin-left: 16px;
}
#ul-helper-icon{
  position: absolute;
  bottom: 32px;
  left: 32px;
}
#ul-helper-icon button{
  width: 32px;
  height: 32px;
}


@keyframes blinker {
  0% {
    opacity: .8;
    transform: scale3d(1,1,1)
  }
  50%{
    opacity: .8;
    transform: scale3d(1.9,1.9,1.9)
  }
  100% {
    opacity: 0.5;
    transform: scale3d(1.5,1.5,1.5)
  }
}

.blink{
	text-decoration: blink;
  animation-name: blinker;
	animation-duration: .8s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-direction: alternate;
}

.box-speech{
  position: fixed;
  /* top: 0; */
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  padding-bottom: calc(15vh + 16px);
}

.box-speech span{
  display: block;
  margin: 4px;
  font-size: 36px;
  font-weight: 200;
  background-color: rgb(0 0 0 / 76%);
  font-weight: 200;
  padding: 8px 16px;
  border-radius: 10px;
  border: 2px solid #6a6a6a;
  align-self:  flex-end;
}

@media (orientation: portrait) {
  .container-thumbnail{
    display: none;
  }
  .container-video{
    /* max-width: 768px; */
    max-width: 720px;
    /* margin: 0; */
  }
  .overlay-camera{
    display: none;
  }
  .wrap-video-recording{
    height: 100%;
  }
  .popup-camera video, .popup-camera canvas{
    width: 100%;
    height: 100%;
    z-index: 101;
    text-align: center;
    display: block;
    /* object-fit: cover; */
  }
  .wrap-video-recording li{
    width: 80px;
    height: 80px;
  }
  .wrap-video-recording .list-event-camera svg{
    width: 45px;
    fill: #fff;
  }
  
  .wrap-video-recording .list-event-video .icon-record{
    width: 50px;
    height: 50px;
  }
  .wrap-video-recording .list-event-video .icon-stop-record{
    width: 50px;
    height: 50px;
  }
  .wrap-video-recording .list-event-camera .labelCamera,
  .wrap-video-recording .list-event-video .labelVideo,
  .wrap-video-recording .list-event-thumbnail .labelGallery{
    top: 125px
  }
  .wrap-video-recording ul{
    position: absolute;
    bottom: 0px;
  }
}