body {
font-family: "Montserrat", serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
text-transform: uppercase;
}

.schedule-time-span{
  font-size: 16px;
  /* font-weight: 700; */
  color: #fff;
  font-family: "Montserrat", serif;
  min-width: 60px;
  display: inline-block;
}

#webinar-register-content-div{
  width: 60%;
  margin: auto;
  margin-top: 60px;
  color: white;
}

.schedule-time-text-span{
  color:#fff;
  font-size: 16px;
  /* font-weight: 700; */
  font-family: 'Montserrat', sans-serif;
}

.schedule-title-header{
  color: #fff;
  text-transform: initial;
  margin: 24px 0;
  font-size: 30px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  text-align: left;
}

.schedule-speaker-header{
  color: #fff;
  text-transform: capitalize;
  margin: 24px 0;
  font-size: 24px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  text-align: left; 
}

.schedule-title-subheader{
  color: #fff;
  font-size: 16px;
  margin: 24px 0;
  font-family: "Montserrat", serif;
  line-height: 30px;
  white-space: break-spaces;
}

.schedule-timer-header{
  color: #fff;
  text-transform: revert;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin: 24px 0;
}

.countdown-value{
  border-radius: 8px;
  font-size: 24px;
  min-width: 70px;
  font-family: "Montserrat", serif;
  color: #fff;
  padding: 10px 19px;
  border: 2px solid #fff;
}

.countdown-unit{
  color: #fff;
  font-size: 12px;
  font-family: "Montserrat", serif;
}

.custom-countdown ul{
  float: left;
  padding-left: 0;
}

.custom-countdown ul>li {
  padding: 0px 4px;
}






.schedule-wait-form-container{
  border: 2px solid #c9d3dd;
  width: 90%;
  min-height: 400px;
  border-radius: 8px;
  margin-left: 10%;
  padding: 0;
}

.webinar_img_container{
  width: 100%;
  height: auto;
  box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
  border-radius: 8px;
}

.webinar-logo-img{
  max-width: 120px;
  max-height: 120px;
  display: block;
  margin:auto;
}


.speakers-div{
  display: block;
  clear: both;
  padding-top: 1px;
}


.small-text{
  font-size: 10px;
}

#livelink-container{
  display: inline-flex;
  align-items: center;
  background: #ebebeb;
  padding: 4px;
  border: 1px solid #111111;
  border-radius: 4px;
}

#livelink-container input{
  background: transparent;
  border: none;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}


.auth-livelink-panel .panel-body{
  background: #c6d6f3;
}


#registerWebinarForm #countdown-email, #registerWebinarForm #countdown-email-desktop, #registerWebinarForm #countdown-name-desktop, #registerWebinarForm #countdown-name {
  background: white !important;
  color: #333;
}

#registerWebinarForm #countdown-email-btn{
  background: dodgerblue;
  width: 100%;
  /*border: 1px solid #333;*/
  text-transform: capitalize;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  margin-top: 10px;
  font-weight: 500;
}

#registerWebinarForm #countdown-email-btn:hover{
  transform: translateY(-0.15rem);
}

#registerWebinarForm label{
  color: #fff;
}

.schedule-when-div{
  margin-top: 24px;
}

.copresenter-name-div{
  font-family: "Montserrat", serif;
}



#startVideosViewersBtn{
  position: fixed;
  z-index: 9999999999999;
  left: 0;
  bottom:0;
  width: 1px;
  height: 1px;
  opacity: 0;
  max-height: 1px;
}

#progress-gif{
  position: fixed;
  left: 0;
  top: 0px;
  z-index: 999999;
  width: 30px;
  display: none;
}
#recorded-stream-top-div{
  position: relative;
  width: 100%;
  height: 88%;
}


.no_vid_logo{
  display: block !important;
  margin:auto;
  margin-bottom: 20px;
  max-width: 120px;
  position: absolute;
  right: 12px;
  top:12px;
}

#create-account-viewer-container-div{
  width: fit-content;
  display: block;
  position: relative;
  margin: auto;
}


#create-account-viewer-div{
  display: none;
  width: 30%;
  position: fixed;
  right: 0;
  z-index: 9999999;
  top: 60px;
}

#showSignupModalBtn{
  background-color: #e01a0a;
  font-size: 10px;
  padding: 4px 12px;
}

#closeCreateAccountBtn{
  font-size: 12px;
  padding: 0px;
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  right: 0;
  top: -8px;
  color: black !important;
  border-radius: 50%;
}


#closeCreateAccountFormBtn{
  font-size: 18px;
  padding: 0px;
  width: 24px;
  height: 24px;
  background: white;
  position: absolute;
  right: 4px;
  top: 4px;
  color: black !important;
  border-radius: 50%;
}

#createUserDiv{
  width: 30%;
  padding: 20px 10px;
  background: #ffffff;
  height: calc(100%);
  right: 0;
  top: 0px;
  position: fixed;
  z-index: 9999999999;
  overflow-y: scroll;
  display: none;
  border-radius: 4px;
}

@media screen and (max-width: 950px){
  #createUserDiv{
    width: 100%;
  }  

  #create-account-viewer-div{
    width: 100%;
    top: 20px;
    left: 4px;
  }

  #create-account-viewer-container-div {
    margin: inherit;
    top: 8px;
  }

  .mobile-center{
    text-align: center;
    /*display: block;*/
    display: inline-block;
  }
}

#createUserDiv h2{
  text-align: center;
  color: #111111;
}


.pre-signup-error{
  color: red;
  display: block;
  width: 100%;
  text-align: center;
}


.form-control.password-div{
  padding: 0;
  margin-bottom:22px;
}

.panel-body {
  height: auto !important;
}


#createUserDiv label{
  color: 011627;
}

.audio-muted-span{
  color: red;
  padding-right: 8px;
  display: none;
}

.video-muted-div{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  text-align: center;    
  align-items: center;
  display: none;
  z-index: 0;
  color: white;
  font-size: 18px;
  text-transform: capitalize;
}

.video-muted-div span{ 
  display: block;
  margin: auto;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
}



.audio-muted .audio-muted-span{
  display: inline-block;
}


.video-muted .video-muted-div{
  display: flex;
}

#video-muted{
  display: none;
  position: fixed;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: black;
  text-align: center;
  align-items: center;
  color: white;
}


#video-muted span{
  font-size: 18px;
  width: 100%;
}


#audio-muted{
  display: none;
  position: fixed;
  left: 0;
  top:0;
  height: 1px;
  width: 100%;
  z-index: 6;
  background: transparent;
  text-align: center;
}

#audio-muted-span{
  display: inline-block;
  background: #282828;
  color: white;
  padding: 6px 16px;
  margin-top: 2px;
  border-radius: 4px;
}

#audio-muted-span span{
  padding-left: 4px;
}

#reconnectModal .modal-background-black{
  background: black;
}

#reconnectModal .groupFormDiv button {
    width: 40%;
    background: #e01a0a;
    text-transform: capitalize;
    text-align: center;
    font-size: 12px;
    padding: 6px 4px;
    border-radius: 0;
    margin: auto;
}


.input-chat-select-div .form-control.selectize-control{
  width: 150px;
  max-width: 100%;
}


.groupFormDiv{
  width: 100%;
  margin: 10px 0px;
}


.groupFormDiv input{
  font-size: 14px;
  padding: 8px 32px 8px 11px;
  background: transparent;
  border-radius: 0;
}

.groupFormDiv label{
  color: #ccc;
  font-size: 16px;
  text-transform: capitalize;
  margin-bottom: 0;
}


.groupFormDiv input:focus{
  color:white;
  background: transparent;
}


.groupFormDiv button{
  width: 100%;
  background: #e01a0a;
  text-transform: capitalize;
  text-align: center;
  font-size: 14px;
  padding: 10px 4px;
  border-radius: 0;
}


.groupFormDiv button:hover{
  background: #028FFF;
}




.page-top-recorded{
  /* position: absolute; */
  z-index: 904;
  width: 100%;
  padding: 0;
}

.page-top-recorded .navbar-default {
  z-index: 999999;
  padding: 0px;
  background: #000b15;
  border: none;
  margin-bottom: 0;
}


.page-top-recorded  .navbar-header{
  display: flex;
  align-items: center;
}

.page-top-recorded .navbar-default .navbar-header a{
  padding-left: 12px;
}

.page-top-recorded .navbar-nav>li>a {
  color: #fff !important;
  font-size: 16px;
  font-family: 'Montserrat';
  font-weight: 600;
}


#recorded-stream-top-div .h2, 
#recorded-stream-top-div h2 {
  font-size: 16px;
  color: white;
  text-transform: initial;
}

.center-flex-row{
  display: flex;
  align-items: center;
  height: 100%;
}

.img-responsive.logo{
  max-width: 110px;
}


.participant_remote_video{
  cursor: pointer;
}

.participant_divs{
  /* background: #232229; */
  background: transparent;
  border:3px solid transparent;
  border-radius:4px;
}

.participant_divs.talking{
  border:3px solid green !important;
}

.group_participants_1 .participant_divs{
  width: 100%;
  height: 100%;
  left: 0;
  top:0;
  display: inline-block;
}

.group_participants_1 .participant_divs video{
  width: 100%;
  height: 100%;
}

.group_participants_2 .participant_divs{
  width: 50%;
  height: 100%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_2 .participant_divs video{
  width: 100%;
  height: 100%;
}


.group_participants_3 .participant_divs{
  width: 50%;
  height: 50%;
  left: 0;
  top:0;
  display: inline-block;
    position: relative;
    padding: 4px;
}

.group_participants_3 .participant_divs video{
  width: 100%;
  height: 100%;
}


.group_participants_4 .participant_divs{
  width: 50%;
  height: 50%;
  left: 0;
  top:0;
  display: inline-block;
    position: relative;
    padding: 4px;
}

.group_participants_4 .participant_divs video{
  width: 100%;
  height: 100%;
}

#live-container{
  width: 100%;
  height: 100%;
}

.group_participants_5 .participant_divs{
  width: 33%;
  height: 50%;
  left: 0;
  top:0;
  display: inline-block;
    position: relative;
    padding: 4px;
}

.group_participants_5 .participant_divs video{
  width: 100%;
  height: 100%;
}

.group_participants_6 .participant_divs{
  width: 33%;
  height: 50%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_6 .participant_divs video{
  width: 100%;
  height: 100%;
}


@media (max-width:700px){
  .group_participants_5 .participant_divs, .group_participants_6 .participant_divs{
    width: 50%;
    height: 33%;
  }
}

.group_participants_7 .participant_divs{
  width: 33%;
  height: 33%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_7 .participant_divs video{
  width: 100%;
  height: 100%;
}


.group_participants_8 .participant_divs{
  width: 33%;
  height: 33%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_8 .participant_divs video{
  width: 100%;
  height: 100%;
}

@media (max-width:700px){
  .group_participants_7 .participant_divs, .group_participants_8 .participant_divs{
    width: 50%;
    height: 25%;
  }
}

.group_participants_9 .participant_divs{
  width: 33%;
  height: 33%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_9 .participant_divs video{
  width: 100%;
  height: 100%;
}

.group_participants_10 .participant_divs{
  width: 33%;
  height: 25%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_10 .participant_divs video{
  width: 100%;
  height: 100%;
}


.group_participants_11 .participant_divs{
  width: 33%;
  height: 25%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_11 .participant_divs video{
  width: 100%;
  height: 100%;
}


.group_participants_12 .participant_divs{
  width: 33%;
  height: 25%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_12 .participant_divs video{
  width: 100%;
  height: 100%;
}




.group_participants_13 .participant_divs{
  width: 33%;
  height: 20%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_13 .participant_divs video{
  width: 100%;
  height: 100%;
}

.group_participants_14 .participant_divs{
  width: 33%;
  height: 20%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_14 .participant_divs video{
  width: 100%;
  height: 100%;
}



.group_participants_15 .participant_divs{
  width: 33%;
  height: 20%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_15 .participant_divs video{
  width: 100%;
  height: 100%;
}


.group_participants_16 .participant_divs{
  width: 33%;
  height: 16.6%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_16 .participant_divs video{
  width: 100%;
  height: 100%;
}

.group_participants_17 .participant_divs{
  width: 33%;
  height: 16.6%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_17 .participant_divs video{
  width: 100%;
  height: 100%;
}

.group_participants_18 .participant_divs{
  width: 33%;
  height: 16.6%;
  left: 0;
  top:0;
  display: inline-block;
  position: relative;
  padding: 4px;
}

.group_participants_18 .participant_divs video{
  width: 100%;
  height: 100%;
}

#live-container{
  width: 100%;
  height: 100%;
}


@media (max-width: 450px){
  .group_participants_2 .participant_divs{
    width: 100%;
    height: 50%;
    left: 0;
    top:0;
    display: inline-block;
  }
}




.fullScreen-div, .pinned{
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  left: 0;
  top:0;
  z-index: 10000;
  background: black;
}



#novidDiv{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  text-align: center;
  z-index: 99;
  align-items: center;
}


.novid-container{
  margin: auto;
  width: 75%;
  height: 100%;
  display: flex;
  align-items: center;
}


#mutedDiv{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  text-align: center;
  z-index: 999999999;
  align-items: center;
}


#mutedDiv .muted-container{
  margin: auto;
  width: 240px;
  height: 240px;
}


#mutedDiv .blurred-box{
  position: relative;
  background: inherit;
  border-radius: 2px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}



#mutedDiv .blurred-box:after{
content: '';
width: 300px;
height: 300px;
background: inherit; 
position: absolute;
left: -25px;
right: 0;
top: -25px;  
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.55);
filter: blur(10px);
}


#mutedDiv .muted-span-container, #novidDiv .muted-span-container{
  display: block;
  width:100%;
}



#mutedDiv .muted-span-icon, #novidDiv .muted-span-icon{
  display: block;
  margin:auto;
  color: white;
  font-size: 90px;
}

#mutedDiv .muted-span-text, #novidDiv .muted-span-text{
  color: white;
  text-transform: uppercase;
  font-size: 20px;
}






/*  mnuted div css */
#mutedCallDiv{
  position: fixed;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  display: none;
  text-align: center;
  z-index: 999;
  align-items: center;
}

#mutedCallDiv .muted-container{
  margin: auto;
  width: 160px;
  height: 160px;
  backdrop-filter: blur(4px);
  background-color: rgba(200,200,200,0.4);
}

#mutedCallDiv .blurred-box{
  position: relative;
  /*background: inherit;*/
  border-radius: 2px;
  overflow: visible;
  border-radius: 28px;
  display: flex;
  align-items: center;
  top: -90px;
}


#mutedCallDiv .muted-span-container{
  display: block;
  width:100%;
}

#mutedCallDiv .muted-span-icon{
  display: block;
  margin:auto;
  color: black;
  font-size: 54px;
}

#mutedCallDiv .muted-span-text{
  color: white;
  text-transform: uppercase;
  font-size: 20px;
}

#mutedCallDiv #muted-span-text{
  font-size: 20px;
  width: 100%;
  text-align: center;
  display: block;
}

@media (max-width: 800px) {
  #mutedCallDiv .muted-container{
    margin: auto;
    /*width: 40%;*/
    /*height: 40%;*/
  }

  #mutedCallDiv .muted-span-container{
    display: block;
    width:100%;
  }

  #mutedCallDiv .muted-span-icon{
    display: block;
    margin:auto;
    font-size: 50px;
  }

}

/*  end of muted div css*/



.no-video-image-div{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  z-index: 100;
  display: none;
}


.no-video-image-div .bg-overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  /*border-radius: 20%;*/
}

.no-video-image-div img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #232229;
}

.no-video-image-div span{
  position: absolute;
  left: 0;
  z-index: 10000;
  font-size: 12px;
  bottom: 8px;
  width: 100%;
  color: white;
  font-family: 'Montserrat';
  text-transform: capitalize;
  text-align: center;
}


#vid_div.photo_available.pip-muted .no-video-image-div, .participant_divs.photo_available.video-muted .no-video-image-div, .photo_available.video-off .no-video-image-div, .photo_available.no_video .no-video-image-div{
  display: block;
}


.photo_available.no_video .no_video_div{
  display: none;
}

.photo_available img{
  background: #232229;
  object-fit: contain;
}


#video_list .participant_divs.no_video.photo_available .video_span_name{
  display: block !important;
}

.comment-image-name-span{
  width: 100%;
  height: 40px;
  object-fit: contain;
  background: #111111;
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}


.show_if_no_appointments, .show_if_no_appointments_block{
  display: none;
}


.disable_appointments .show_if_no_appointments{
  display: inline-block;
}

.disable_appointments .show_if_no_appointments_block{
  display: block;
}

.disable_appointments .show_if_appointments{
  display: none;
}


.disable_appointments #scheduling-container{
  display: none;
}


.disable_appointments .show_if_appointments_text_left{
  text-align: left;
}


@media screen and (max-width: 736px){
  .inline_mobile.show_if_no_appointments {
    display: none !important;
  }

  .disable_appointments .inline_mobile.show_if_no_appointments {
    display: inline-block !important;
  }

}


#streamNameModal{
  z-index: 99999999;
}


#streamNameModal.no-email .streamEmailDiv{
  display: none !important;
}


#main-stream-div{
  position: absolute;
  left: 0;
  top:0;
  width: 70%;
  height: 100%;
}


#side-stream-div{
  position: absolute;
  left: 70%;
  top: 0;
  height: 100%;
  display: block;
  width: 30%;
}


@media screen and (max-width: 950px){
  #main-stream-div{
    position: absolute;
    left: 0;
    top:0;
    width: 100vw !important;
    height: 100%;
  }


  #side-stream-div{
    position: absolute;
    left: 0%;
    top: 100%;
    height: 80%;
    display: block;
    width: 100%;
  } 


  .input-footer-dock-comments, .input-footer-dock-questions {
    top: 0;
    bottom: auto;
  }

  #dock_comments_container, #dock_questions_container {
    top: 10%;
  }
}







.no_viewer_interactivity #main-stream-div{
  position: absolute;
  left: 0 !important;
  top:0 !important;
  width: 100% !important;
  height: 100% !important;
}

.no_viewer_interactivity #side-stream-div{
  display: none;
}


.poll-header-btn{
  overflow: hidden;
}

/* css for calender scheduling ui */

.box-container {
  margin: 40px auto;
  padding: 40px;
  box-shadow: 1px 1px 8px 0 rgba(0,0,0,0.4);
  border-radius: 4px;
  width: 100%;
  float: none;
  background-color: white !important;
  float: none !important;
}

#calendar .Zebra_DatePicker{
  display: block;
  position: relative;
  width: 100% !important;
}

#schedule-container{
  border-left: 1px solid rgba(0,0,0,0.3);
  padding: 0px 0px 24px 0;
}


.summary .profile-name, .summary .duration{
  text-align: left;
  font-size: 16px;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 400;
}

.summary .event_name{
  text-align: left;
  font-size: 24px;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
  color: #fff;
}



.summary .event_desc{
  text-align: left;
  font-size: 18px;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
  color: #fff;
}

.summary {
  margin-top: 10%;
  padding: 0px 24px !important;
}

.calender_header_span{
  margin-top: 40px !important;
  margin-bottom: 10px !important;
  display: block;
}

.branding {
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    overflow: hidden;
    width: 105px;
    height: 105px;
    z-index: 1;
    text-decoration: none;
    pointer-events: none;
    transition: all 0.1s ease-in;
    will-change: transform;
    padding: 0 0 0 0.2em !important;
}

.branding .branding-badge {
    pointer-events: auto;
    display: block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
    transform: rotate(312deg);
    background-color: #ebebeb;
    position: relative;
    z-index: 1;
    top: 10px;
    left: -53px;
    padding: 9px 0 6px 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    width: 160px;
}

.branding .branding-powered-by {
    font-size: 8px;
    color: dodgerblue;
    text-transform: uppercase;
    margin-left: -7px;
}

.branding .branding-vidphon {
    font-size: 14px;
    color: dodgerblue;
    margin-left: -7px;
}


.btn-primary{
  background-color: dodgerblue !important;
  border-color: dodgerblue !important;
  padding: 4px 20px !important;
  text-transform: uppercase;
  font-family: 'Montserrat' !important;
  font-weight: 600 !important;
}

.btn-primary:hover{
  transform: translateY(-0.15em);
}

.liveStreamFormDiv .btn-primary{
  background-color: #fff !important;
  color: dodgerblue !important;
  padding: 4px 20px !important;
  border-color: dodgerblue !important;
}

.liveStreamFormDiv .btn-primary:hover{
  background-color: dodgerblue !important;
  color: #fff !important;
}

.form-control.answer_box{
  background-color: white !important;
  color:#111111;
}

.selectize-control.custom-select{
  text-align: left;
}

#calendar .Zebra_DatePicker{
  z-index: 100;
}

.calendar-time-btn{
  width: 100%;
  max-height: 50px;
  background: white;
  /* border-color: #ebebeb !important; */
  color: dodgerblue !important;
  border: 1px solid dodgerblue;
  border-radius: 8px;
  font-size: 18px;
}

.calendar-time-btn:hover{
  width: 100%;
  background: white;
  box-shadow: 0 0 3px 0 !important;
  outline: none !important;
}

.calendar-time-btn:active, .calendar-time-btn:visited, .calendar-time-btn:focus, .calendar-select-btn:active, .calendar-select-btn:visited, .calendar-select-btn:focus{
  outline: none !important;
  box-shadow: none !important;
}

#select-time-div{
  display: none;
  padding:40px;
  padding-top: 0;
  max-height: 70vh;
  overflow-y: scroll;
}

#show-no-slots-text{
  display: none
}

#show-no-slots-text p{
  font-size: 16px !important;
}

#current_date{
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
}

.calendar-select-btn{
  display: none;
}

.selected-time .calendar-time-btn,  .selected-time .calendar-select-btn{
  flex:1;
  padding:0;
  font-size: 15px;
  display: inline-block;
  border-radius: 8px;
}

.selected-time .calendar-select-btn{
  background:dodgerblue;
}

#back-selected-date{
  width: 40px;
  height: 40px;
  background: white;
  /*border: 1px solid #e01a0a;*/
  border-radius: 50%;
  float: left;
  color: dodgerblue !important;
  outline: none !important;
}

#timezone-select{
  -webkit-appearance: menulist;
  appearance: menulist;
}

#select-time-div::-webkit-scrollbar {
  width: 5px !important;
  display: inline-block !important;
}

.showTimeOptions #summary-container{
  width: 35%;
}

.showTimeOptions #schedule-container{
  width: 65%;
}

.showTimeOptions #select-time-div{
  width: 40%;
  display: inline-block;
}

.showTimeOptions #scheduled_main_container{
  width: 60%;
}

.showTimeOptions #calendar_container{
  width: auto;
  margin: 0;
}

.showTimeOptions #show-no-slots-text{
  display: inline;
}

.showTimeOptions #calendar_timezone_container{
  width: 100%;
  margin: 0;
}

.select-time-btn-div{
  display: flex;
  margin-top: 16px;
}

@media only screen and (max-width: 740px) {
  #buttons {
    padding: 0;
    margin: 0;
    width: 100% !important;
  }

  .summary {
    padding: 0px 12px !important;
  }

  #schedule-container{
    border-left: none;
    border-radius: none;
  }

  .summary span, .details-item.duration, .details-item, .summary .duration{
    text-align: center !important;
  }

  .showTimeOptions #summary-container{
    width: 100%;
  }

  .showTimeOptions #schedule-container{
    width: 100%;
  }

  .showTimeOptions #select-time-div{
    width: 100%;
    margin-top: 20px;
  }

  .showTimeOptions #scheduled_main_container{
    display: none;
  }


}

iframe.hidden{
  display: none !important;
}

.no_top_margin{
  margin-top: 0 !important;
}
/* end of calender scheduling ui */



.schedule_call_with_header{
  font-size: 24px !important;
  width: 100%;
  text-align: center;
}


#streamStartedNoNameOverlay{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top:0;
  background-color: rgba(0,0,0,0.95);
  z-index: 100000;
  text-align: center;
  align-items: center;
  align-content: center;
}

#streamStartedNoNameOverlay div{
  display: block;
  width: 100%;
  text-align: center;
}

#streamStartedNoNameOverlay h2{
  display: block;
  color: white;
  width: 100%;
}

#streamStartedNoNameOverlay button{
  display: block;  
  text-align: center;
  margin: auto;
  margin-top: 20px;
  cursor: pointer;
}




/* streaming dock div*/
#streamingDockDiv{
  /*position: fixed;*/
  position: absolute;
  z-index: 999999;
  /*width: 38%;*/
  /*right: -40%;*/
  /*top: 7%;*/
  /*height: 93%;*/
  width: 100%;
  right: 0;
  top:0;
  height: 100%;
  background: #ebebeb;
  transition: right 0.5s;
  text-overflow: clip;
  white-space: nowrap;
}

/*@media only screen and (max-width: 525px) {
  #streamingDockDiv{
    top:0;
    height: 100%; 
  }
}

@media (orientation: landscape) and (max-width: 800px) {
  #streamingDockDiv {
    width: 60%;
    right: -60%;
  }  
}*/



#streamingDockDiv.open{
  right: 0;
  text-overflow: ellipsis;
  background: linear-gradient(90deg, #270b3a, #3c1242);
}

#streamingDockDiv .container{
  max-width:100%;
}

#streamingDockDiv #tab-comments-dock-div form, #streamingDockDiv #tab-questions-dock-div form, #streamingDockDiv #tab-users-dock-div form{
  margin: 0;
  width: 100%;
}


#viewer-polls .checkbox input[type=checkbox] {
  width: 16px;
    height: 16px;
    opacity: 1;
    z-index: 100;
    bottom: 2px;
  -webkit-appearance: checkbox;
  appearance:checkbox;
}


#viewer-polls .checkbox input[type=radio]{
  width: 16px;
  height: 16px;
  opacity: 1;
  z-index: 100;
  bottom: 2px;
  -webkit-appearance: radio;
  appearance:radio;
}



#toggleStreamDockBtn i{
  color: white;
  opacity: 1;
}

.no_items_span{
  display: block;
  font-size: 24px;
  color: white;
  text-align: center;
}

.unread_span{
  position: absolute;
  background: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: 0px;
  top: 0;
  line-height: 1.3;
  display: none;
  overflow: hidden;
  color: #000;
}

.unread_span.show{
  display: block;
}


#no-comments-div, #no-questions-div, #no-viewers-div, #no-polls-div{
  display: block;
}

#no-comments-div i, #no-questions-div i, #no-viewers-div i, #no-polls-div i{
  display: block;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  color: #fff;
  text-align: center; 
}


#no-comments-div span.empty_comments_label, #no-questions-div span.empty_questions_label, #no-viewers-div span.empty_viewers_label, #no-polls-div span.empty_polls_label{
  position: relative;
  display: block;
  color: #fff;
  text-align: center;
  margin: auto;
  font-size: 16px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  margin-top: 4px;
}

#no-comments-div span, #no-questions-div span, #no-viewers-div span, #no-polls-div span{
  white-space: break-spaces;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  display: block;
  color: #fff; 
}


#streamingDockDiv #toggleStreamDockBtn .close{
  display: none;
}

#streamingDockDiv.open #toggleStreamDockBtn .open{
  display: none;
}

#streamingDockDiv.open #toggleStreamDockBtn .close{
  display: inline-block;
}

#streamingDockCloseBtn{
  position: absolute;
  top:0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  color: white;
  border:none;
}

#streamingDockDiv .input-footer{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  background: white;
}

#streamingDockDiv .input-footer input{
  height: 100%;
  flex-grow: 1;
  outline: none;
}

#tab-header{
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* background: #111111; */
  background: transparent;
  overflow-x: auto;
  height: 46px;
}




#tab-header div {
  color: #fff;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  flex-grow: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  height: 37px;
  padding-bottom: 30px;
  border-radius: 0;
  padding-top: 12px;
}

#tab-header div.selected, #tab-header div:hover{
  /*border-bottom: 3px solid #e01a0a;*/
}


#stream-dock-header{
  width: 100%;
}

#tab-comments-dock-div, #tab-questions-dock-div, #tab-users-dock-div, #tab-polls-dock-div, #tab-settings-dock-div{
  display: none;
  width: 100%;
  height: calc(100% - 34px);
  overflow-y: scroll;
} 

#tab-polls-dock-div{
  height: 100%;
}

#stream-dock-body{
  position: absolute;
  left: 0;
  top: 46px;
  height: calc(100% - 46px);
  width: 100%;
}



@media only screen and (max-width: 950px) and (orientation: landscape) {
  #dock_comments_container, #dock_questions_container{
    top:40px !important;
  }
}


#toggleStreamDockBtn{
  position: fixed;
  bottom: calc(10% + 10px);
  z-index: 99999;
  border: none;
  background: transparent;
  color: white;
  font-size: 36px;
  outline: none;
  cursor: pointer;
  padding:0;
  /*display: none !important;*/
}

#toggleStreamDockBtn i{
  color: white;
}




.name_span{
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 16px;
  z-index: 100;
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 4px 20px;
  text-transform: capitalize;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  z-index: 101;
  max-width: 99%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: auto;
}



#toggleStreamDockBtn{
  position: absolute !important;
  bottom: 0 !important;
  z-index: 100 !important;
  left: -36px !important;
  bottom: 30px !important;
}


.dock-closed #main-stream-div{
  width:100%;
  position: absolute;
  left: 0;
  top:0;
}


.dock-closed #toggleStreamDockBtn .open{
  display: inline-block !important;
}

.dock-closed #toggleStreamDockBtn .close{
  display: none !important;
}

.dock-closed #side-stream-div{
  position: absolute;
  width: 30%;
  left: 100%;
}

#side-stream-div{
  transition: all 0.5s;
}

body.dock-disabled #side-stream-div {
  display:none !important;
  opacity: 0;
}



@media screen and (max-width: 950px){
  body.dock-disabled #main-stream-div {
    height:100% !important;
  }
}



.input-chat-select-div .nice-select.open .list{
  top: auto !important;
  bottom: 100%;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.input-chat-select-div .nice-select.open .list::-webkit-scrollbar {
  width: 2px !important;  /* Remove scrollbar space */
  background: #111111 !important;  /*  make scrollbar invisible */
}

.input-chat-select-div .nice-select {
    padding: 0px 8px;
    min-width: 120px;
    text-transform: capitalize;
    text-align: center;
    height: auto;
    font-size: 12px;
    max-width: 100%;
}




#dock_comments_container{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 80px) !important;
}


#dock_comments_container, #dock_questions_container, #dock_users_container, #stream-poll-div, #viewer-polls{
  overflow-y: scroll;
  /* background: #111111; */
  background: transparent;
  height: 100%;
  white-space: initial;
  padding: 2px 8px;
  height: 100%;
  white-space: initial;
}

#viewer-polls{
  /* background: #111111; */
  background: transparent;
}

.input-footer-dock-comments, .input-footer-dock-questions{
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  display: flex;
  border-left: 1px solid #ebebeb;
}

@media screen and (max-width:750px){
  #dock_comments_container, #dock_questions_container{
    top: 9%;
    height: 90%;
    position: absolute;
    z-index: 1000;
    width: 100%;
  } 

  .name_span {
    bottom: 4px;
    font-size: 12px;
  } 
} 


@media screen and (max-width: 750px) and (orientation:landscape){
  #dock_comments_container, #dock_questions_container {
    top: 15%;
    height: 85%;
    position: absolute;
    z-index: 1000;
    width: 100%;
  }
}

#createPollBtn{
  display: block;
  margin: auto;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 300;
  border: none;
  color: white;
  background: #e01a0a;
  padding: 4px 16px;
  cursor: pointer;
  outline: none;
}

#submitPollBtn, #cancelPollBtn{
  display: inline-block;
  margin: auto;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 300;
  border: none;
  color: white;
  background: #e01a0a;
  padding: 4px 16px;
  cursor: pointer;
  outline: none;
}

.empty_comments_label{
  position: relative;
  display: block;
  color: white;
  text-align: center;
  margin: auto;
  font-size: 24px;
}

#cancelPollBtn{
  background-color: #ebebeb;
}


#createPollDiv{
  padding: 8px;
  display: none;
}


.poll-label{
  color:white;
}

#create-poll-answers{
  margin-top: 20px;
}

.create-poll-answer-option{
  display: flex;
  width: 100%;
  align-items: center;
  padding: 4px 2px;
}

.create-poll-answer-option label{
  flex-grow: 0;
  color:white;
  padding: 4px 8px;
}


.create-poll-answer-option input{
  flex-grow: 1;
  width:auto;
}



#multiple-answers-checkbox-div, #enable-viewers-checkbox-div{
  display: flex;
  color: white;
  align-items: center;
  margin-top: 20px;
}




#multiple-answers-checkbox-div input, #enable-viewers-checkbox-div input{
  margin-right: 8px;
  position: relative;
  top: 1px;
}



.collapsible-btn {
  cursor: pointer;
  outline: none;
  font-size: 16px;
  width: 100%;
  text-align: left;
  background: #fff;
  color: dodgerblue !important;
  border-color: dodgerblue;
  border-bottom: 1px solid dodgerblue;
  border: none;
  padding: 4px 8px;
  border-radius: 4px 4px 0px 0px;
  font-weight: 300;
  outline: none !important;
}


.collapsible-btn:hover{
  background: dodgerblue;
  color: white !important;
}


.collapsible-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background: white;
  padding: 4px 8px;
  border-radius: 0px;
  max-height: 450px;
  overflow-y: scroll;
  overflow-wrap: anywhere;
}

.collapsible-content.open{
  display: block;
}


.poll-answers .checkbox{
  display: inline-block;
  min-width: 100%;
}

.poll-answers .checkbox input{
  font-size: 24px;
  margin-right: 4px;
}

.poll-answers .checkbox label{
  display: flex;
  align-items: center;
}

.submitPollResponse{    
  font-size: 18px;
    padding: 6px 16px;
    color: white;
    background: dodgerblue;
    border: none;
    border-radius: 4px;
    font-weight: 300;
    height: auto;
}

#commentForm, #questionForm, #commentLiveForm{
  width:100%;
}

#commentForm input, #questionForm input, #commentLiveForm input{
  width:100%;
  background-color: #ffffff !important;
}

#unreadDockSpan{
  position: absolute;
  left: 60px;
  top:20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
  background-color: red;
  font-size: 12px;
  display: block;
}

#thank-you-div{
  display: none;
}

#thank-you-div h3{
  color: white;
  margin-top: 0px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 525px) {
  #unreadDockSpan{
    left: 8px;
    top:20px;
  }

  #thank-you-div h2{
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}


.viewer-polls-container{
  white-space: normal;
}


.viewer-polls-container + .viewer-polls-container{
  margin-top: 20px;
}

.commentTypeBtn{
  color: white;
  float: left;
  background: #e01a0a;
  cursor: pointer;
  border: none;
  padding: 4px 8px;
  height: 40px;
}


.commentTypeBtn:disabled,
.commentTypeBtn[disabled]{
  background: #ebebeb;
}


#presenter-polls{
  margin-top: 20px;
}

#enable-viewers-checkbox-div label{
  display: block;
  margin: auto;
}

/*@media only screen and (max-width: 525px) {
  #streamingDockDiv.open{
    width: 100%;
    right: 0;
  }*/
/*
  #streamingDockDiv.open #toggleStreamDockBtn{
    left: 4px;
  }

  #toggleStreamDockBtn{
    left:-40px;
  }*/
/*}*/



/*end of streaming dock div*/










.viewerCallContainer{
  position: absolute;
  bottom: 4px;
  width: 100%;
  left: 0;
  z-index: 999;
}




.walnut-logo-m{
  max-width: 120px;
  max-height: 70px;
  display: block;
  margin: auto;
  margin-top: 4px;
}


#call_presenter, #call_audio_presenter{
  /*outline: none;*/
  padding: 2px 10px;
  max-width: 150px;
  float: right;
  margin-right: 4px
}



#viewerAudio{
  display: none;
}

#on_stream_call_div{
  position: absolute;
  z-index: 9999999;
  display: none; 
  width: 350px;
  height: 300px;
  border-radius: 4px;
  bottom: 4px;
  right: 0;
  background: #232229 !important;
  color: white;
  border: 1px solid;
  max-width: 100%;
  max-height: 25%;
}


#on_stream_call_button_div{
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  text-align: center;
}

#on_stream_call_button_div img{
  max-width: 60px;
  display: block;
  text-align: center;
  margin:auto;
}






/* webinar early css*/

#webinar-scheduled-div{
  color:#fff;
  position:relative;
  background-color:#fff;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  display:none;
  position: fixed;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow-y: scroll;
}


#webinar-scheduled-div .wrapper-div{
  display: block;
  margin: auto;
}

#webinar-scheduled-div .wrapper-div {
  display: block;
  margin: auto;
  width: 100%;
}


#webinar_img{
  max-width: 100%;
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 350px;
  padding: 20px;
}


#imageModal.modal.in{
  z-index: 99991050;
}

.modal-backdrop.in{
  z-index: 1040;
}  

.modal-open .modal-backdrop.in{
  z-index: 104;
}  

.modal.fade.in{
  z-index: 1049;
}

.webinar_label_header{
  text-align: center;
}


.wrapper-div .wrapper-center-div{
  display: flex;
  align-content: center;
  align-items: center;
  align-self: center;
}

.webinar-stream-details-div{
  border-right: 1px solid white;
}


.webinar-stream-details-div-mobile{
  display: none;
}

.copresenter-photo{
  max-width: 100%;
}

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

  .wrapper-div .wrapper-center-div{
    display: block;
  }

  .webinar-stream-details-div{
    border-right: none;
  }

  .webinar-stream-details-div-mobile{
    display: block;
    clear: both;
    padding-top: 8px;
  }


  .webinar-stream-details-div{
    display: none;
  }

  .webinar-stream-register-div{
    margin-top: 20px;
  }
}

@media only screen and (max-width: 800px) {
  #webinar-scheduled-div .wrapper-div {
    display: block;
    margin: auto;
    width: 90%;
  }
}



@media (max-width:900px) {
  #webinar-scheduled-div .wrapper-div {
    display: block;
    margin: auto;
    width: 100%;
  }

  .schedule-wait-form-container {
    border: 2px solid #c9d3dd;
    width: 100%;
    min-height: 400px;
    border-radius: 8px;
    margin-left: 0;
    padding: 0;
  }
}


@media (max-width:768px) {
  #webinar-scheduled-div .wrapper-div {
    display: block;
    margin: auto;
    width: 100%;
  }
}



@media (max-width:660px) {
  #webinar-scheduled-div .wrapper-div {
    display: block;
    margin: auto;
    width: 100%;
  }

  .modal-content {
    width: 100%;
    margin: 0 !important;
  }

  .modal-footer {
    display: flex;
    align-items: center;
  }

  .modal-footer .btn {
    flex-grow: 1;
  }

}


@media (max-width:550px) {
  #webinar-scheduled-div .wrapper-div {
    display: block;
    margin: auto;
    width: 100%;
  }
}


@media (max-width:500px) {
  #webinar-scheduled-div .wrapper-div {
    display: block;
    margin: auto;
    width: 100%;
  }
}


#countdown-email-div div{
  display: flex;
  margin-top: 20px;
}

#countdown-email-div h2{
  text-align: center;
  font-size: 24px;
}

#countdown-email-div div input, #countdown-email-div div button{
  height: 40px;
}

#countdown-email-div div input{
  color: black;
}

#countdown-email-div div button{
  font-weight: 500;
  background: #e01a0a;
  border: 1px solid white;
  margin-left: 8px;
  padding: 0 8px;
  text-transform: uppercase;
  outline: none;
}



.copresenter-photo-div{
  box-shadow: 0 0 3px 0 black;
  width: 80px;
  height: 80px;
  display: inline-flex;
  border-radius: 4px;
}

.copresenter-photo-div span{
  display: block;
  margin: auto;
  font-size: 24px;
  text-transform: capitalize;
  color: #000;
}


.copresenter-photo-div img{
  height: 100%;
  width: 100%;
  object-fit: contain;
  background: #111111;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%);
  border-radius: 4px;
}


.copresenter-name-div{
  color: #fff;
  display: block;
  margin: auto;
  text-align: center;
  margin-top: 20px;
  min-height: 70px;
}

.copresenter-name-div span{
  text-transform: capitalize; 
  font-size: 24px;
}

.copresenter-title{
  display: block;
  font-size: 12px !important;
  color: #fff;
  font-family: "Montserrat";
}


.schedule-webinar-host-header{
  font-size: 16px;
  text-align: center;
  text-transform: capitalize;
  margin: 20px 0;
  color: white;
}


.copresenter-div{
  margin-bottom: 20px;
  padding: 40px 35px 20px;
  background: rgb(48 46 57);
  border-radius: 12px;
}

.copresenter-div .copresenter-photo-div{
  box-shadow: 0 0 3px 0 black;
  width: 200px;
  height: 200px;
  display: block;
  border-radius: 50%;
  margin: auto;
}

.copresenter-div .copresenter-photo-div img,
.copresenter-div .copresenter-photo-div span{
  height: 100%;
  width: 100%;
  object-fit: contain;
  background: #111111;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%);
  border-radius: 50%;
  margin: auto;
}

#registerWebinarForm{
  width: 100%;
  display: block;
  padding: 20px;
}

#countdown-email-div div button:hover{
  background: #028daa;
}
    
  .webinar-logo{
    display:block;
    margin:20px auto 0 auto
  }
  
  .webinar-logo.custom{
    background-size:contain;
    width:200px;
    height:60px;
    background-repeat:no-repeat;
    background-position:50%
  }

  .webinar-header{
    text-transform:uppercase;
    font-weight:500
  }
  
  .webinar-title{
    font-size:32px;
    line-height:30px;
    margin:14px auto;
    max-width:740px;
    text-transform: capitalize;
  }

  .countdown-seperator{
    max-width: 300px;
    display: block;
    margin: 20px auto;
  }

  .webinar-date{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    font-size:1.2em;
    display:block;
    display:flex;
    align-items:center;
    margin-top: 20px;
  }

  .webinar-date span{
    display: block;
    margin: auto;
  }

  .webinar-date:first-letter{
    text-transform:capitalize
  }

  .join-webinar-btn{
    display: inline-block;
    margin: 20px auto;
    background: white;
    border: none;
    color: #e01a0a;
    font-size: 20px;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
  }

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

  .logo_name{
    font-size: 40px;
    margin: 15px;
  } 


  .countdown-div{
    color: rgb(255, 255, 255);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    margin-top: 20px;
    padding: 0px;
    align-items: center;
    justify-content: center;
  }

  .custom-countdown{
    color: rgb(255, 255, 255);
    display: block;
    font-size: 14px;
    padding: 0px;
  }

  .custom-countdown ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .custom-countdown ul>li {
    text-align: center;
    list-style: none;
    padding: 0px 4px;
  }

  .custom-countdown ul>li span{
    display: block;
  }

  .custom-countdown ul>li span.countdown-value{
    font-weight: 500;
    min-width: 72px;
  }


  @media only screen and (max-width: 600px) {
    #countdown-email-div div{
      display: block;
    }

    #countdown-email-div div button, #countdown-email-div div input{
      display: block;
      width: 100%;
      margin: 10px 0;
    }

    #registerWebinarForm{
      width: 100%;
      display: block;
      margin: auto;
    }

    .webinar-title{
      margin-top: 24px;
    }
  }



  @media (max-width:990px){
    #webinar-register-top-hero {
      display: block !important;
    }

    #webinar-register-top-hero .webinar_img_container {
      width: 100% !important;
      margin-bottom: 40px;
    }

    .schedule-when-div{
      padding: 0 20px;
    }

    #webinar-register-content-div {
      width: 90%;
    }
  }


  #mobile-show-webinar-register-div{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: black;
    padding-top: 20px;
    z-index: 999;
    display: none;
  }

  @media (max-width:650px){

    #webinar-register-content-div {
      width: 100%;
    }

    #register-webinar-vidphone-logo-div {
      padding: 4px 0 0 20px;
    }

    #register-webinar-vidphone-logo-div img{
      width: 50px !important;
    }

    #mobile-show-webinar-register-div{
      display: block;
    }

    #webinar-register-popup-container.show + #mobile-show-webinar-register-div{
      display: none;
    }
  }

/*end of webinar early css*/

input:focus::placeholder { 
  color:transparent !important; 
} 

.walnut-logo-d{
  max-width: 120px;
  max-height: 70px;
  display: block;
  margin: 10px 0 0 0;
}


#safari_popup{
  display: none;
  position: fixed;
  right: 8px;
  top:8px;
}


#chrome_popup{
  display: none !important;
  position: fixed;
  top:40%;
  margin: auto;
  left: 25%;
  width: 50%;
  z-index: 9999;
  box-shadow: 0 0 178px 1000px rgba(0,0,0,0.8);
}


#chrome_popup .heading, #chrome_popup .sub_heading{
  text-align: center;
}

.btn-call-icon{
  width: 50px !important;
  height: 50px !important;
  background: rgba(100,100,100,0.4) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  margin: auto !important;
  outline: none;
}

.btn-call-icon i{
  font-size: 24px;
  color: white;
}

.btn-call-icon.end_call{
  background: #ff171f !important;
  transform: rotate(133deg);
}



.btn-call-icon.toggleActivated.inactive .ion-ios7-videocam:after {
  position: absolute;
  content: "/";
  color: white;
  font-weight: 300;
  font-size: 50px;
  left: -4px;
  top: -22px;
  transform: rotate(-2deg);
}


.btn-call-icon.toggleActivated #mic, .btn-call-icon.toggleActivated #mic1{
  display: inline-block;
}

.btn-call-icon.toggleActivated #mic-off, .btn-call-icon.toggleActivated #mic-off1{
  display: none;
}

.btn-call-icon.toggleActivated.inactive #mic, .btn-call-icon.toggleActivated.inactive #mic1{
  display: none !important;
}

.btn-call-icon.toggleActivated.inactive #mic-off, .btn-call-icon.toggleActivated.inactive #mic-off1{
  display: inline-block !important;
}




#live_viewer_comments{
  transition: all 0.5s;
  scrollbar-width: none;
}


#toggleLiveCommentsBtn, #toggleRecordedCommentsBtn{
  font-size: 25px;
  width: 40px;
  height: 40px;
  outline: none;
  padding: 0;
  background: #444;
  display: inline-block;
  float: left;
  text-align: center;
  border-radius: 0;
}



.live-stream-description{
  /*position: fixed;*/
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: transparent;
  text-align: center;
  white-space: nowrap;
  overflow-x: scroll;
  display: flex;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  align-items: center;
}

.live-stream-description img{
  height: 60px;
  width: 60px;
  border-radius: 50%;
}

.live-stream-description .stream-logo-letter{
  height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-transform: capitalize;
    border: none;
}


.live-stream-description div{
  margin-left: 8px;
}


.live-stream-description .stream-user{
  display: block;
  font-size: 16px;
  color: white;
  text-transform: capitalize;
  margin-bottom: 4px;
  text-align: left;    
}

.live-stream-description .stream-name{
  display: block;
  font-size: 12px;
  color: white;
  text-transform: capitalize;
  text-align: left;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.live-stream-description .live-label{
  background: white;
  color: red;
  font-size: 10px;
  padding: 4px 8px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 12px;
  margin-left: 8px;
}


#live_comments_input{ 
  background-color:white !important; 
  border:0; 
  min-height: 36px; 
  width: -webkit-fill-available;
  max-width: 80%;
}



#toggleRecordedCommentsBtn .opened{
  display: none;
}

#toggleRecordedCommentsBtn .closed{
  display: inline-block;
}

#toggleRecordedCommentsBtn.commentsOff .opened{
  display: inline-block;
}

#toggleRecordedCommentsBtn.commentsOff .closed{
  display: none;
}


#toggleLiveCommentsBtn .opened{
  display: inline-block;
}


#toggleLiveCommentsBtn .closed{
  display: none;
}


.openComments #toggleLiveCommentsBtn .opened{
  display: none;
}


.openComments #toggleLiveCommentsBtn .closed{
  display: inline-block;
}






#pip-canvas{
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 20000000;
  display: none;
}



.liveurl-logo{
  max-width: 60%;
}

#oncall-textchat-div{
  position: fixed;
  top:0;
  right: 0;
  width: 0%;
  height: 100%;
  z-index: 10000;
  background: white;
  transition: all 0.5s;
}

#feedback-submit{
  margin-top: 20px;
}

#oncall-textchat-div.open{
  width: 20%;
}


.oncall-chat-container{
  position: absolute;
  left: 0;
  width: 100% !important;
  padding: 0;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.oncall-chat-container .panel-footer{
  position: absolute;
  bottom: 0;
  z-index: 10000;
  border: 1px solid;
}


#oncall-message-container{
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 20px;
  border: 1px solid;
}

#close-oncall-chat-btn, #open-oncall-chat-btn{
  position: absolute;
  left: -48px;
  z-index: 10000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0px;
  border: 1px solid white;
  font-size: 20px;
  font-weight: 500;
  outline: none;
}

#oncall-message-container .chat-bubble {
  border-radius: 5px;
  display: inline-block;
  padding: 10px 10px !important;
  position: relative;
  margin: 10px;
  max-width: 80% !important;
  min-width: 75% !important;
}

#oncall-textchat-div.open #close-oncall-chat-btn{
  left: -20px;
  display: block;
}

#oncall-textchat-div #close-oncall-chat-btn{
  display: none;
}


#oncall-textchat-div.open #open-oncall-chat-btn{
  display: none;
}

#oncall-textchat-div #open-oncall-chat-btn{
  display: block;
}


.oncall-logo{
  /*position: fixed;*/
  position: absolute;
  z-index: 1000;
  right:2%;
  top:2%;
  max-width: 100px;
}



#close{
    position: absolute;
    top: 5.8%;
    right: 3%;
    z-index: 25000;
    display: none;
    background: black;
    color: white;
    font-size: 24px;
    font-weight: 400;
    border: transparent;
    padding: 0;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding-bottom: 10px;
  }


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


  #on_stream_call_div{
    width: 100%;
  }

  #toast-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    width: 90%;
    left: 0;
    top: 40%;
    margin-left: 5%;
  }

  #toast-container .toast {
    width:100%;
  }

  #oncall-textchat-div{
    position: fixed;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0%;
    z-index: 10000;
    background: white;
  }  

  #oncall-textchat-div .chat_panel_footer{
    display: none;
  }

  #oncall-textchat-div.open .chat_panel_footer{
    display: block;
  }

  #oncall-textchat-div.open{
    width: 100%;
    top:70%;
    height: 30%;
  }

  #oncall-textchat-div .oncall-chat-container{
    width: 100% !important;
  }

  #close-oncall-chat-btn, #open-oncall-chat-btn{
    position: absolute;
    left: auto;
    right:8px;
    top: -42px;
    z-index: 10000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0px;
    border: 1px solid white;
    font-size: 20px;
    font-weight: 500;
  }

  #oncall-textchat-div.open #close-oncall-chat-btn{
    left: auto;
    right:8px;
  }
  




  

  #live_viewer_comments{
    /*background: rgba(0,0,0,0.3) !important;*/
    scrollbar-width: none;
  }


  .oncall-logo{
    max-width: 100px;
    /* top: 6%; */
  }

  #chrome_popup{
    left: 5%;
    width: 90%;
  }



  .live-stream-description .stream-user {
    width: 160px;
    overflow: hidden;
  }

  .live-stream-description .stream-name{
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
}



#streamCommentNameModal{
  z-index: 99999;
}


.feedbackModel{
  width: 100%;
  display: flex;
  align-items: center;
  margin: auto;
}


#feedbackModel{
  z-index: 99999 !important;
}



.feedback-label{
  display: block;
  text-align: center;
  margin: auto;
  color:white;
}

.selected .feedback-label{  
  font-weight: 500;
  font-size: 18px;
}



.feedback-modal-form{
  width: 100%;
  padding: 20px;
  margin-top: 20px;
}

.feedback-modal-form .control-group{
  margin-top: 20px;
  display: block;
  margin: auto;
  text-align: center;
}

.feedback-input-div + .feedback-input-div{
  margin-top: 20px;
}


#feedback-submit{
  background: dodgerblue;
  color: white;
  padding: 4px 16px;
  text-transform: capitalize;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
}

/*smiley face css*/


.selected .smile-div{
  width: 80px;
  height: 80px;
  font-weight: bolder;
}


.smiley-good .smile{
  position: absolute;
  top :67%;
  left: 16.5%;
  width: 70%;
  height: 20%;
  overflow: hidden;
}


.smiley-good .smile:after, .smiley-good .smile:before {
  content: "";
  position:absolute;
  top: -50%;
  left: 0%;
  border-radius: 50%;
  background: #dba652;
  height: 100%;
  width: 97%;
}

.smiley-good .smile:after {
  background: #dba652;
  height: 80%;
  top: -40%;
  left: 0%;
}


    .smile-div {
      background: #eed16a;
      border: 1px solid #dbae51;
      position: relative;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: block;
      margin:auto;
      cursor: pointer;
    }


    .smile-div .left-eye {
      width: 18%;
      height: 18%;
      background: #dba652;
      position: relative;
      top: 29%;
      left: 22%;
      border-radius: 50%;
      float: left;
    }
    .smile-div .right-eye {
      width: 18%;
      height: 18%;
      border-radius: 50%;
      position: relative;
      background: #dba652;
      top: 29%;
      right: 22%;
      float: right;
    }
    .smiley-ok .smile {
      position: absolute;
      top: 67%;
      left: 19%;
      width: 65%;
      height: 14%;
      background: #dba652;
      overflow: hidden;
      border-radius: 8px;
    }

  
    .smiley-bad .smile {
      position: absolute;
      top: 57%;
      left: 16.5%;
      width: 70%;
      height: 20%;
      overflow: hidden;
    }
    .smiley-bad .smile:after, .smiley-bad .smile:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0%;
      border-radius: 50%;
      background: #dba652;
      height: 100%;
      width: 97%;
    }
    .smiley-bad .smile:after {
      background: #dba652;
      height: 80%;
      top: 30%;
      left: 0%;
    }

/*end of smiley face css*/



#share-div .fab{
  display: none;
}


#share-div .fab{
  display: none;
}

#share-div .fab.active{
  display: block;
}





.next-stream-btn{
  position: absolute;
  top: 35%;
  padding: 0px 0px;
  font-size: 20px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  outline: none;
  z-index: 100000000000;
}

#left-next-stream{
  left: 0%;
}

#right-next-stream{
  right: 0%;
}


#recorded_div_desc {
  position: initial; 
  left: 0;
  top: 5px;
  z-index: 9998;
  color: white;
  width: 100%;
  text-align: center;
}

#hideMeetingDiv, #waitingForStream{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  z-index: 1000;
  display: flex;
  top: 0;
  left: 0;
}

#webinar-full{
  background: black;
  position: fixed;
  z-index: 9999999;
  color: white;
  text-align: center;
  align-items: center;
  display: none;
  width:100%;
  height: 100%;
}

#webinar-full h1{
  width:100%;
  text-align: center;
  color: white;
  text-transform: initial;
}

#hideMeetingDiv h1, #waitingForStream h1{    
  width: 100%;
  display: block;
  margin: auto;
  text-align: center;
  color: white;
  padding: 8px;
  text-transform: initial;
}

#webinar-full{
  display: none;
}

#recorded_div_desc h1{
  padding: 0;
  margin: 0;
  text-align: center;
  background: rgba(0,0,0,0.5);
}


#recorded_div_desc h2 {
  padding: 0;
  margin: 0;
  text-align: center;
  background: transparent;
  color: #FFF;
  margin: 20px 0;
  text-transform: initial;
  font-size: 24px;
}

#recorded_div_desc h3{
  color: #999;
  text-transform: initial;
  font-size: 20px;
  margin-bottom: 22px;
}


#share-facebook, #share-twitter, #share-mail, #share-reddit, #share-copy, #share-whatsapp{
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 24px;
  outline: none;
  border: none;
}

#share-whatsapp{
  background: #54eb4b;
  font-size: 30px;
}

#share-facebook{
  background: #3b5998;
}

#share-twitter{
  background: #08a0e9;
}

#share-mail{
  background: #67b6e3;
}

#share-reddit{
  background: #ff4500;
}

#share-copy{
  background: #168e38
}


.share, .share:before, .share:after, .fab {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
}

.share {
  position: absolute;
  z-index: 999999999;
  left: 12px;
  bottom: 68px;
  float: left;
  background-color: #e01a0a;
}

.share:before, .share:after {
  content: '';
  will-change: transform;
}
.share:before {
  background: url(./share-icon.svg) center/20px no-repeat;
  z-index: 5;
  transition: 0.3s;
  /*background-color: #e01a0a;*/
}
.share:after {
  background: rgba(0,0,0,0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: -1;
  transition: 0.39s;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}



.recorded-logo {
  background: white;
  padding: 4px;
  max-width: 120px;
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 99999999999;
  cursor: pointer;
  border-radius: 4px;
}


.fab {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: 0.3s;
  -webkit-animation: 0.3s down forwards;
          animation: 0.3s down forwards;
  opacity: 0;
  will-change: animation;
}
.fab:nth-child(1) {
  top: -210px;
}
.fab:nth-child(2) {
  top: -155px;
}
.fab:nth-child(3) {
  top: -100px;
}

.fab:nth-child(4) {
  top: -45px;
}

.fab:nth-child(5) {
  top: 10px;
}


.fab.active {
  -webkit-animation: 0.48s up forwards;
          animation: 0.48s up forwards;
}
.fab.active:nth-child(1) {
  -webkit-animation-delay: 0.39s;
          animation-delay: 0.39s;
}
.fab.active:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.fab.no {
  -webkit-animation: none;
          animation: none;
}

@-webkit-keyframes up {
  50% {
    -webkit-transform: translateY(-170%);
            transform: translateY(-170%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-130%);
            transform: translateY(-130%);
  }
}

@keyframes up {
  50% {
    -webkit-transform: translateY(-170%);
            transform: translateY(-170%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-130%);
            transform: translateY(-130%);
  }
}
@-webkit-keyframes down {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-130%);
            transform: translateY(-130%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    top: 0;
  }
}
@keyframes down {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-130%);
            transform: translateY(-130%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    top: 0;
  }
}


#share_link_para{
  margin: 0;
  margin-bottom: 4px;
  padding: 2px;
  position: relative;
  right: 132px;
  top: -50px;
  font-size: 11px;
  width: 130px;
  text-align: center;
}


#share_link_input{
  position: relative;
  right: 133px;
  bottom: 46px;
  border: 1px solid #e01a0a;
  padding: 4px;
  border-radius: 4px;
  width: 130px;
}

#share_link_div{
  display: none;
}









#screenShareToggle{
  background: #6c7273;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  padding: 0;
  font-size: 22px;
  margin:auto;
}


.stream_later_modal{
  background: transparent;
  box-shadow: none;
  outline: none;  
  margin-top: 12px;
  height: 16px;
  text-decoration: underline;
}

.stream_later_modal:hover{
  background: transparent !important;
}

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
}
.modal-content {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px;
  bottom:45px;
  left:0;
  right:0;
  overflow-y:auto;
}

.feedbackModelBody{
  position:relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  overflow-y: auto;
}

.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}


#incorrect-details-div{
  display: none;
}

#privateStreamModal.fade.in {
  background: rgba(0,0,0,1) !important;
}

.fade.in {
  background: rgba(0,0,0,0.8) !important;
}


.modalStreamContent{
  padding: 24px 4px;
  background: transparent;
  background-color: transparent !important;
}

.modalStreamContent form{
  margin: 0;
}

.liveStreamFormDiv{
  width: 100%;
  padding: 4px !important;
}

.liveStreamFormDiv .btn-primary{
  background: #e01a0a;
  width: 100%;
}


.liveStreamFormDiv label{
  font-size: 16px;
  margin-bottom: 0;
  text-transform: capitalize;
  color: #ccc;
  text-align: left;
  display: block;
}




.extra-fields{
  width: 100%;
  padding: 0 !important;
  margin-top: 12px;
}


.show_prompt{
  position: fixed; 
  z-index: 1000; 
  left: 10%;
  top:20%;
}

.show_prompt p{
  color: white;
  font-size: 24px;
  font-weight: 500;
}

.prompt_container{
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000000000;
  background: rgba(0,0,0,0.6);
}

@-webkit-keyframes up-down {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

@keyframes up-down {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}


.show_prompt i{
  color: white;
  font-size: 45px;
  font-weight: 500;
  text-align: center;
  margin: auto;
  -webkit-animation: up-down 1s infinite  alternate;
  animation: up-down 1s infinite  alternate;
}

.desktop-arrow{
  display: block !important;
}

.mobile-arrow{
  display: none !important;
}

@media only screen and (max-width: 525px) {
  .show_prompt{
    left: 10%;
    top:0%;
  }

  .desktop-arrow{
    display: none !important;
  }

  .mobile-arrow{
    display: block !important;
  }

  .modalStreamContent{
    margin: 0 20px;
  }


  #recorded_div_desc h1, #recorded_div_desc h2{
    font-size: 20px;
  }

}


@media only screen and (max-width: 600px){
  #recorded_div_desc {
    /*left: 13%;*/
    /*top: 6px;*/
    z-index: 9999;
    color: white;
    /*width: 76%;*/
  }
}


#audioToggle{
  width: 53px;
  height: 53px;
  /* display: flex; */
  margin: auto;
  text-align: center;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  padding: 0;
  outline: none;
}

#audioToggle i{
  display: block;
  margin: auto;
  font-size: 28px;
}

#audioToggle #mic, #audioToggle1 #mic1{
  display: block;
}

#audioToggle #mic-off,#audioToggle1 #mic-off1{
  display: none;
}

#audioToggle.audioOff #mic, #audioToggle1.audioOff #mic1{
  display: none !important;
}

#audioToggle.audioOff #mic-off, #audioToggle1.audioOff #mic-off1{
  display: block !important;
}

.screenShareWithSwitch{
  position: absolute;
  right: 116%;
}

.four_btn_div div{
  /*width: 25%;*/
  flex-grow: 1;
  text-align: center;
}

.five_btn_div div{
  /*width: 20%;*/
  flex-grow: 1;
  text-align: center;
}


.five_btn_div div img, .four_btn_div div img{
  margin: auto;
}

.four_btn_div div:first{
  display: none;
}

.empty_span{
  width: 1px;
  display: block;
  height: 1px;
}

.end_call_img{
  width: 53px;
  height: 53px;
}


.country-name{
  color:#6e6e6e;
}

#row-center{
  margin: auto !important;
}

#row-center .intl-tel-input{
  width: 45%;
  background-color: whitesmoke;
  border-radius: 4px;
  margin-left: 2%;
  margin-right: 2%; 
  margin-bottom: 2em;
  margin-top: 2em;
}

.full_width{
  width: 95% !important;
}

.no_padding{
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#refresh{
  display: none;
}


#order_button{
  float: right;
  position: relative;
  top: 12px;
}

#refresh:active{
  width: 56px;
  height: 56px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


.viewer_comments_div{
  z-index: 15; 
  position: absolute; 
  width: 100%; 
  height: 60%;
  bottom: 20%; 
  left: 0px; 
  overflow-y: scroll; 
  display: block; 
  background: transparent;
  scrollbar-width: none;
}

#recorded-comments-div{
  z-index: 15;
  position: relative;
  width: 100%;
  height: 60%;
  top: 0;
  left: 0px;
  overflow-y: scroll;
  display: block;
  /* background: #031525; */
  background: transparent;
  scrollbar-width: none;
  /* padding: 0 8px; */
}

#recorded-comments-div .comment_div {
  padding: 8px 4px;
  min-height: 54px;
  /* background: #172c3f; */
  background: rgba(0, 0, 0, 0.2);
  margin-top: 8px;
  border-radius: 8px;
  display: inline-flex;
  width: 100%;
}

#recorded-comments-div  .comment-name-start-div {
  width: 32px;
  text-align: center;
  height: 32px;
  text-transform: capitalize;
  border-radius: 50%;
  /* background: #031525; */
  /* color: white; */
  background: #ddd;
  color: black;
  display: inline-flex;
  align-items: self-start;
  text-align: center;
  margin-right: 8px;
}

.live_comments_container{
  z-index: 15; 
  position: fixed; 
  width: 0%; 
  height: 60%; 
  bottom:20%; 
  left: 0px; 
  overflow-y: scroll; 
  display: block; 
  background: transparent;
  /*opacity: 0;*/
  scrollbar-width: none;
}


.openComments .live_comments_container{
  width: 60%;
  opacity: 1;
}

.live_comments{
  margin-top: 2vh;
  margin-right: 5%;
  scrollbar-width: none;
}


.comment_div{
  padding: 8px 4px;
  min-height: 54px;
  /* background: #2f2f2f; */
  background: rgba(0, 0, 0, 0.25);
  margin-top: 8px;
  border-radius: 8px;
  display: inline-flex;
  width: 100%;
}


.comment-name-start-div{
  width: 40px;
  text-align: center;
  height: 40px;
  text-transform: capitalize;
  /* background: #111111;
  color:white; */
  background: #c0c0c0;
  color: black;
  border-radius: 4px;
  display: inline-flex;
  align-items: self-start;
  text-align: center;
  margin-right: 8px;
}


.comment-name-start-div span{
  display: block;
  margin:auto;
  text-align: center;
  line-height: 4px;
  width: 40px;
  /*position: relative;*/
  /*right: 8px;*/
}

.comment_para .name{
  text-transform: uppercase;
  display: block;
  font-size: 12px;
  font-family: 'Montserrat';
  position: relative;
  color: #fff;
  left: 0;
  top: 0;
  max-width: calc(100% - 60px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.comment_para .text{
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  display:block;
  /* line-height: 22px; */
}


.comment_para .timestamp{
  font-size: 10px;
  display: block;
  text-align: right;
  text-transform: uppercase;
  position: absolute;
  left: 0px;
  top: -3px;
  width: 100%;
  padding-right: 4px;
}


.comment_para{
  /*background-color: rgba(0,0,0,0.3); */
  color: #fff; 
  display:inline-block;
  white-space: normal;
  align-items: center;
  width: 100%;
  overflow-wrap: anywhere;
  margin-bottom: 0;
  position: relative;
}


#streamingDockDiv.open .comment_para{
  opacity: 1;
}

#streamingDockDiv #tab-comments-dock-div .comment_para,
#streamingDockDiv #tab-questions-dock-div .comment_para{
  max-width: calc(100% - 50px);
}


.text_chat_player{
  z-index: 15; 
  width: 100%; 
  background-color:transparent;
  display: flex;
}


.send-glyph{
  display: inline-block;
  float:right;
  font-size: 12px; 
  margin:2px;
}

.input_parent_div{
  overflow: hidden; 
  padding-right: .5em; 
  width: 100%;
}



.input_stream{
  width:100%; 
  background-color:white !important; 
  border: transparent !important; 
  min-height: 36px; 
  margin-left:0px;
  padding-left: 5px;
  border-radius: 4px;
}


.android_download_button_live{
  display:inline-block;
  float:right; 
  margin:1em;
}



.desktop.banner_div{
  text-align: left;
  width: 100%;
  padding: 0 9%;
}





.store_header{
  text-transform: none; 
  /*font-family: "Roboto", sans-serif;*/
  font-size: 45px;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}


.margin_auto{
  margin: auto;
}


.video_call_button_circle{
  float: none !important; 
  background: linear-gradient(to right, #04AEC5, #049ABD, #0467A8) !important; 
  width: 185px; 
  height: 185px !important; 
  padding: 20px !important; 
  border-radius: 50% !important; 
  font-size: 100px !important;
  border-color: transparent; 
  outline: transparent; 
  box-shadow: 6px 6px 12px rgba(0,0,0,0.6);
  line-height: 0px !important;
  /*background-image: url(/static/images/video_icon.png);*/
  /*background-repeat: no-repeat;*/
  /*background-position-x: 40px;*/
  /*background-position-y: center;*/
}

.video_call_button_circle img {    
  padding-left: 12px;
}

.audio_call_business_button{
  background: linear-gradient(#0467A8, #04AEC5) !important;
  position: absolute; 
  bottom: 2%; 
  left: 2%; 
  padding: 4px 16px; 
  font-size: 26px; 
  font-weight:500; 
  border-radius: 8px; 
  /*font-family: "Roboto", sans-serif;*/
}


.video_call_button_circle:hover , .audio_call_business_button:hover{
  background: linear-gradient(#0467B8, #04AEE5) !important;
}

.chat_business_button{
  background: linear-gradient(#0467A8, #04AEC5) !important;
  position: relative; 
  padding: 4px 16px; 
  font-size: 15px; 
  font-weight: 300; 
  border-radius: 4px; 
  margin-top: 20px;
}


.chat_container{
  position: absolute;
  bottom: 0;
  right: 2px;
  margin: 0;
  padding: 0 0 0 0 !important;
  background-color: transparent !important;
  border-color: #e01a0a;
  border-radius: 10%;
  width: 25% !important;
}

.no_spacing{
  margin: 0 !important;
  padding: 0 !important;
}

.chat_panel_header{
  background: linear-gradient(#0467A8, #04AEC5) !important;
  padding: 6px 15px !important;
  font-size: 18px
}

.chat_panel_body{
  height:120px !important;
}

.chat_panel_footer{
  padding: 2px 10px !important;
}

.chat_panel_input{
  border-color: transparent !important;
  background: whitesmoke !important;
  outline: none !important;
  box-shadow: none !important;
}

.input_panel_send{
  font-size: 30px;
  color: #e01a0a;
  cursor: pointer;
}

.input_panel_send:hover{
  color: #005ba3 !important;
}

.input-group-btn{
  font-size: 20px !important;
}

.lw_call_buttons{
  border: 1px solid transparent !important;
}

.lw_call_buttons:hover{
  /*background-color: #888 !important;*/
  border: 1px solid #e01a0a !important;
  border-radius: 8px;
}









/*Text chat css*/
html{
  height: 100% !important;
}





#text_chat{
    min-width: 100%;
    position: fixed;
    top: 2%;
    left: 5px;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    min-height: 100%;
}

.chat
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat li
{
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body
{
    margin-left: 60px;
}

.chat li.right .chat-body
{
    margin-right: 60px;
}


.chat li .chat-body p
{
    margin: 0;
    color: #777777;
}

.panel .slidedown .glyphicon, .chat .glyphicon
{
    margin-right: 5px;
}

.panel-body
{
    overflow-y: scroll;
    height: 250px;
}

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

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

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}


.message {
  font-size: 1.2em;
  text-align: left;
}

.message-detail {
  white-space: nowrap;
  font-size: 10px;
  text-align: right;
}

.bar.item-input-inset .item-input-wrapper input {
  width: 100% !important;
}

.message-wrapper {
  position: relative;
}

.message-wrapper:last-child {
  margin-bottom: 10px;
}

.chat-bubble {
  border-radius: 5px;
  display: inline-block;
  padding: 10px 18px;
  position: relative;
  margin: 10px;
  max-width: 80%;
}

.chat-bubble:before {
  content: "\00a0";
  display: block;
  height: 16px;
  width: 9px;
  position: absolute;
  bottom: -7.5px;
}

.chat-bubble.left {
  background-color: #c0c0c0;
  color: #111111;    
  float: left;
  margin-left: 15px;
}

.chat-bubble.left:before {
  background-color: #c0c0c0;
  left: 10px;
  -webkit-transform: rotate(70deg) skew(5deg);
}

.chat-bubble.right {
  background-color: #c6d6f3;
  color: #111111;
  float: right;
  margin-right: 15px;
}

.chat-bubble.right:before {
  background-color: #c6d6f3;
  right: 10px;
  -webkit-transform: rotate(118deg) skew(-5deg);
}

.chat-bubble.right a.autolinker {
  color: #fff;
  font-weight: 500;
}

.user-messages-top-icon {
  font-size: 28px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -3px;
  right: 5px;
}

.msg-header-username {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -3px;
}

input, textarea, .item-input, .item-input-wrapper {
  background-color: #e6e6e6 !important;
}

.bold {
  font-weight: bold;
}

.cf {
  clear: both !important;
}

a.autolinker {
  color: #3b88c3;
  text-decoration: none;
}

.search::-webkit-input-placeholder { 
    color: #b9b9b9 !important;
}

/* loading */
.loader-center {
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.loader .ion-loading-c {
  font-size: 64px;
}


/*End of text chat css*/


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


.pointer{
  cursor:pointer;
}


::-webkit-scrollbar { /*hides all scroll bars*/
    display: none; 
}

#dock_comments_container::-webkit-scrollbar{
  display: block !important;
  width: 4px !important;
  background: white !important;
  min-width: 4px !important;
  max-width: 4px !important;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  box-shadow: none !important;
}

#dock_comments_container::-webkit-scrollbar-thumb{
  background: #989ca5 !important;
  border:none !important;
}


#dock_comments_container::selection{
  background: white !important;
}

#dock_comments_container::-webkit-scrollbar-track {
  -webkit-box-shadow: none !important;
  background-color: #fff !important;
}

.table-bordered {
    border: 2px solid #ccc !important;
}


bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 2px solid #aaa !important;
}





.activeButton:active{
  border:0px !important;
}



#video_stream{
  display: block;
  object-position: 50% 50%; /* center the video content, cut the rest*/    
  opacity: 1;
  /*position: fixed;*/
  position: absolute;
  left:0px;
  top: 0px;    
  transition: opacity 1s;
  z-index: 2;  
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: 100%;
}

#stream_container{
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    position: relative;
}



#signup_chat_div{
    position: fixed;
    top:51px;
    width:100%;
    z-index: 10;
}

#toggle_chat{
    position: fixed;
    right: 5%;
    top: 16%;
    font-size: 22px;
}

#signup_chat_button{
    background-color: #3A98D8;
    color: white;
    font-weight: 500;
    border: 2px solid #3A98D8;
    border-radius: 10px;
    padding: 10px;
    z-index: 1;
}

#toggle{
    position: fixed;
    right: 5%;
    top: 5%;
    font-size: 22px;
}

#toggle_image{
    position: fixed;
    right: 5%;
}


#sign_up_button{
    position: fixed;
    top: 2%;
    right: 2%;
    background-color: #3A98D8;
    color: white;
    font-weight: 500;
    border: 2px solid #3A98D8;
    border-radius: 10px;
    padding: 10px;
    z-index: 1;
    display: none;
}


.text-call{
    background-color: transparent;
    border: none !important;
    color: white;
    font-size: 28px !important;
    position: relative;
    top: 5px;
    
}



.btn-success, .btn-warning{
    color: #fff;
    background-color: #3A98D8 !important;
    border-color: #3A98D8 !important;
}



#notify{
    z-index: 1000;
    position: fixed;
    top: 2%;
    right: 5%;
}





/*Custom css below*/


.shopgrid_name, .shopgrid_text{
  color: white;
  text-transform: capitalize;
  font-weight: 500;
}

.shopgrid_div{
  background-color: black;
  padding: 0;
  padding-left:0 !important; 
  padding-right: 0 !important;
}


.shopgrid_row{
  padding: 0 !important;
  background-color: black; 
}

.shopgrid_content{
  margin: 6px;
}

.shopgrid_left{
  margin-left: 12px;
} 

.shopgrid_top{
  margin-top:12px;
}

.shopgrid_right{
  margin-right:12px;
} 

.shopgrid_bottom{
  margin-bottom:12px; 
}

.shopgrid_image{
  height: 250px;
  width:100%;
  max-width: 100%;
  cursor: pointer;
}


.shopgrid_container{
  padding: 0 !important;
}

.shopgrid_span{
  position: absolute;
  bottom: 1px;
  left: 0;
  border: 1px solid black;
  padding: 6px !important;
  color: white;
  font-weight: 500;
  background-color: rgba(0,0,0,0.5);
}



.shopgrid_spanrow{
  position: absolute;
  width: 100%;
  text-align: left;
  bottom: 8px;
}


.row{
  padding: 0 !important;
  margin: 0 !important;
}


@media only screen and (max-width: 525px) {
  .shopgrid_container{
    background-color: white;
  }

  .shopgrid_name {
    color: black;
  }

  .shopgrid_text{
    color: black;
    text-transform: inherit;
    font-weight: 300;
    font-size: 12px;
  }

  .shopgrid_content{
    margin: 0px;
  }

  .store_header{
    font-size: 32px
  }

  .video_call_button_circle{
    margin-top:16px;
  }

}


.blue_button {
  font-weight: 500;
    /*font-family: 'Roboto', sans-serif;*/
    text-transform: uppercase;
    background-color: #e01a0a;
  border: none;
  border-radius: 3px;
  color: white;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}




#minimise{
  position: fixed;
  top: 2%;
  right: 5%;
  font-size: 25px;
}
    


.half_width{
  width: 50% !important;
}


#refresh_button{
    position: fixed;
    left:30%;
    bottom: 5%;
}



#end_button{
height: 53px;
width:53px; 
}

#start_order{
    position: fixed;
    bottom: 5px;
    left: 2px;
}

.order-input{
  border: 0;
  outline: 0;
  background: transparent;
/* border-bottom: 2px solid white;*/
  width: 95%;
  color:white;
  margin: 0 auto;
  margin-bottom: 5px;
}



#customer_order{
  padding-top: 8%;
  padding-bottom: 8%;
  position: fixed;
  width: 100%;
  height: 60%;
  left: 0px;
  top: 0px;
  overflow: scroll;
  border-collapse: collapse;
  border:none !important;
  z-index: 100;
  background:rgba(250,250,250,0.9);    
}

#orderTable{
  padding-top: 8%;
  padding-bottom: 8%;
  position: fixed;
  width: 100%;
  height: 80%;
  left: 0px;
  top: 0px;
  overflow: scroll;
  border-collapse: collapse;
  border:none !important;
  z-index: 100;
  background:rgba(250,250,250,0.9);    
}




table{
  border: none !important;
}

th{
  text-align: center !important;
}

.center{
    position: fixed;
    top: 40%;
    left: 40%;
}

/*table td + td { border-left:0.5pt solid #9e9e9e; }
.total > td{ border-left:none !important; }
table th + th { border-left:0.5pt solid #9e9e9e; }
.table>thead>tr>th { border-bottom: 0.5pt solid #9e9e9e !important; }

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
  border-top: none !important;
}

table .total> td + td { border-left: none; }*/



body{
  background-color:#f6f6f6;
  height: 100% !important;
}




#top_text{
  width: 99%;
  margin: auto;
} 

#buttons{
    width:100%; 
    text-align:center; 
    margin: auto; 
    height:50%;
    color: white;
    font-size: 20px;
    /*font-family: "Roboto", sans-serif;*/
    height: 50%; 
    margin-top: 5%;
}

#oncall_div{ 
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  background: white;
  height: 100%;
  background-color: #111111;
}

#connecting{
    text-align: center;
    position: relative;
    z-index: 2;
    color: white
}

#is_recorded_header{
  position: absolute;
  left: 0;
  top:10%;
  color: white;
  width:100%;
  z-index: 100;
  text-align: center;
  font-size: 16px;
}

#shop_name{
    color: white;
    text-align: center;
    /*font-family: "Roboto", sans-serif;*/
    font-weight: 500;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}

#audio_button{
    border: none;
    background: transparent;
    margin: auto;

}

#audio_div{
  padding-top: 50px;
  text-align: center;
  color: white;
  display: none;
}

.center-block{
  color:#333 !important;
}



#jumbotron{
    height: 30%;
    background: transparent;
}




#copyright{
    left: 0;
    background-color: transparent;
    width: 100% !important;
    position: relative;
    text-align: center;
    bottom: 0;
    z-index: -1;
}



.spinner_text{
    position: fixed;
    top: 20%;
    text-align: center;
    width: 100%;
    z-index: 1000;
}


#end_call{
  width:50%;
  display: none;
  position: fixed;
  bottom: 5%;
  left:25%;
  z-index: 10;
  margin: 0px !important;
  padding: 0px !important;
  text-align: center;
}


#end_call div{
  padding: 0 !important;
}


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

  #end_call{
    width:100%;
    left:0%;
    transition: 0.5s all;
  }


  #end_call.mobile-chat-up{
    bottom:40%;
  }

  .openComments .live_comments_container{
    width: 100%;
  }
}


@media screen and (max-width: 625px){
  #end_call{
    width: 100%;
    left: 0px;
  }
}



#video_button{
    border: none;
    border:0px !important;
    background: transparent;
    margin: auto ;
}

#video_button:active, #audio_button:active{
  border: none !important;
  border:0px !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}


#name{
  width: 45%;
  margin-left: 2%;
  margin-right: 2%;
}

#phone_num{
  width: 100%;
  border: none;
}

.call_input{
    border: 0;
    outline: 0;
    background: transparent;
    border: 2px solid white;
    /*font-family: "Roboto", sans-serif;*/
    color:black !important;
    margin: 0 auto;
    margin-left: 2px;
    margin-right: 2px; 
    margin-bottom: 2em;
    margin-top: 2em;
}

.call_input::-webkit-input-placeholder {
    color: #353473;
}
.call_input:-moz-placeholder {
    /* FF 4-18 */
    color: #353473;
}
.call_input::-moz-placeholder {
    /* FF 19+ */
    color: #353473;
}
.call_input:-ms-input-placeholder {
    /* IE 10+ */
    color: #353473;
}

#intro{
    margin: auto;
    padding: 5%;
    text-align:center;
}

#oncall{
    display: none;
}


.fullscreen{
    position: fixed;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}


/*Apprtc css*/

#local-video {  
  display: block;
  object-fit: contain;  /* maintain aspect ratio */
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1); 
  transform: scale(-1, 1);    
  position: fixed;
  top:0px;    
  left:1px;    
  bottom: 20px;    
  transition: opacity 1s;
  z-index: 1;  
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;   
    
  
}

#mini-video {
  top: 0%;
  left: 0%;
  /*height: 10%;*/
  width: 10%;    
  opacity: 10;
  z-index: 3;    
  position: fixed;
  transition: opacity 1s;
  object-fit: cover;
}



#remote-video {    
  display: block;
  opacity: 1;
  position: fixed;   
  transition: opacity 1s;
  z-index: 2;  
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%; 
  background-color: #232229;
}


#remote-video.full_vid{
  height: auto !important;
  width: auto  !important;
  min-height:  100% !important;
  min-width:   100% !important;
  max-height:  none !important;
  max-width:   none !important;
}



/* end of Apprtc css*/


.schedule-call-btns{
  text-align: left;
}

.schedule-call-btns button{
  color: #fff !important;
  border-radius: 8px !important;
  background: hsla(0, 0%, 100%, 0) 0 0 no-repeat padding-box !important;
  border: 1px solid #fff !important;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  padding: 13px 20px;
  height: auto;
}

.schedule-call-btns button.video-btn{
  background: #ff554d !important;
  text-transform: capitalize;
  border:none !important;
  margin-right: 16px;
}

.schedule-call-btns button:hover, .schedule-call-btns button:active{
  color: #fff !important;
  background-color: dodgerblue;
  border-color: dodgerblue;
  outline: none !important;
}

@media only screen and (max-width: 425px) {
    .center{position: static;}

    #mini-video {
      height: 20%;
      width: 15%;
    }
}

@media only screen and (max-width: 768px) {
    
    
    #orderTable{
        height:350px;
    }

    #mini-video {
      height: 20%;
      width: 20%;
    }

    .half_width{
      width: 70% !important;
    }

    .schedule-call-btns{
      text-align: center;
    }
}

/*@media only screen and (max-width: 900px) {
    
    
    .mobile_clear{
      clear: both;
    }
    
    .desktop{
        display: none !important;
    }
}*/

@media only screen and (max-width: 454px) {
    #download_button {
        float: none !important;
        padding-bottom: 16px;
    }

    .half_width{
      width: 90% !important;
    }
}


.call_text{
    color: #fff;
    margin: auto;
    /*white-space: nowrap;*/
}
































@import url(font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);

/*
  Spatial by TEMPLATED
  templated.co @templatedco
  Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

/* Reset */

  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: inherit;
  }

  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
  }

  body {
    background-attachment: fixed;
    background-image: url("/static/images/overlay.png");
    background-position: center top;
    background-size: cover;
    background-position-y: 25%;
  }

  ol, 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;
  }

  body {
    -webkit-text-size-adjust: none;
  }

/* Box Model */

  *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

/* Containers */

  .container {
    margin-left: auto;
    margin-right: auto;
  }

  .container.\31 25\25 {
    width: 100%;
    max-width: 100em;
    min-width: 80em;
  }

  .container.\37 5\25 {
    width: 60em;
  }

  .container.\35 0\25 {
    width: 40em;
  }

  .container.\32 5\25 {
    width: 20em;
  }

  .container {
    width: 80em;
  }

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

    .container.\31 25\25 {
      width: 100%;
      max-width: 100em;
      min-width: 80em;
    }

    .container.\37 5\25 {
      width: 60em;
    }

    .container.\35 0\25 {
      width: 40em;
    }

    .container.\32 5\25 {
      width: 20em;
    }

    .container {
      width: 80em;
    }

  }

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

    .container.\31 25\25 {
      width: 100%;
      max-width: 81.25em;
      min-width: 65em;
    }

    .container.\37 5\25 {
      width: 48.75em;
    }

    .container.\35 0\25 {
      width: 32.5em;
    }

    .container.\32 5\25 {
      width: 16.25em;
    }

    .container {
      width: 65em;
    }

  }

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

    .container.\31 25\25 {
      width: 100%;
      max-width: 112.5%;
      min-width: 90%;
    }

    .container.\37 5\25 {
      width: 67.5%;
    }

    .container.\35 0\25 {
      width: 45%;
    }

    .container.\32 5\25 {
      width: 22.5%;
    }

    .container {
      width: 90%;
    }

    .store_header{
      font-size: 32px;
    }

  }

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

    .container.\31 25\25 {
      width: 100%;
      max-width: 112.5%;
      min-width: 90%;
    }

    .container.\37 5\25 {
      width: 67.5%;
    }

    .container.\35 0\25 {
      width: 45%;
    }

    .container.\32 5\25 {
      width: 22.5%;
    }

    .container {
      width: 90% !important;
    }

  }

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

    .container.\31 25\25 {
      width: 100%;
      max-width: 112.5%;
      min-width: 90%;
    }

    .container.\37 5\25 {
      width: 67.5%;
    }

    .container.\35 0\25 {
      width: 45%;
    }

    .container.\32 5\25 {
      width: 22.5%;
    }

    .container {
      width: 90% !important;
    }

    body {
      background-position-y: 0%;
    }

  }

/* Grid */

  .row {
    border-bottom: solid 1px transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row > * {
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row:after, .row:before {
    content: '';
    display: block;
    clear: both;
    height: 0;
  }

  .row.uniform > * > :first-child {
    margin-top: 0;
  }

  .row.uniform > * > :last-child {
    margin-bottom: 0;
  }

  .row.\30 \25 > * {
    padding: 0 0 0 0em;
  }

  .row.\30 \25 {
    margin: 0 0 -1px 0em;
  }

  .row.uniform.\30 \25 > * {
    padding: 0em 0 0 0em;
  }

  .row.uniform.\30 \25 {
    margin: 0em 0 -1px 0em;
  }

  .row > * {
    padding: 0 0 0 2em;
  }

  .row {
    margin: 0 0 -1px -2em;
  }

  .row.uniform > * {
    padding: 2em 0 0 2em;
  }

  .row.uniform {
    margin: -2em 0 -1px -2em;
  }

  .row.\32 00\25 > * {
    padding: 0 0 0 4em;
  }

  .row.\32 00\25 {
    margin: 0 0 -1px -4em;
  }

  .row.uniform.\32 00\25 > * {
    padding: 4em 0 0 4em;
  }

  .row.uniform.\32 00\25 {
    margin: -4em 0 -1px -4em;
  }

  .row.\31 50\25 > * {
    padding: 0 0 0 3em;
  }

  .row.\31 50\25 {
    margin: 0 0 -1px -3em;
  }

  .row.uniform.\31 50\25 > * {
    padding: 3em 0 0 3em;
  }

  .row.uniform.\31 50\25 {
    margin: -3em 0 -1px -3em;
  }

  .row.\35 0\25 > * {
    padding: 0 0 0 1em;
  }

  .row.\35 0\25 {
    margin: 0 0 -1px -1em;
  }

  .row.uniform.\35 0\25 > * {
    padding: 1em 0 0 1em;
  }

  .row.uniform.\35 0\25 {
    margin: -1em 0 -1px -1em;
  }

  .row.\32 5\25 > * {
    padding: 0 0 0 0.5em;
  }

  .row.\32 5\25 {
    margin: 0 0 -1px -0.5em;
  }

  .row.uniform.\32 5\25 > * {
    padding: 0.5em 0 0 0.5em;
  }

  .row.uniform.\32 5\25 {
    margin: -0.5em 0 -1px -0.5em;
  }

  .\31 2u, .\31 2u\24 {
    width: 100%;
    clear: none;
    margin-left: 0;
  }

  .\31 1u, .\31 1u\24 {
    width: 91.6666666667%;
    clear: none;
    margin-left: 0;
  }

  .\31 0u, .\31 0u\24 {
    width: 83.3333333333%;
    clear: none;
    margin-left: 0;
  }

  .\39 u, .\39 u\24 {
    width: 75%;
    clear: none;
    margin-left: 0;
  }

  .\38 u, .\38 u\24 {
    width: 66.6666666667%;
    clear: none;
    margin-left: 0;
  }

  .\37 u, .\37 u\24 {
    width: 58.3333333333%;
    clear: none;
    margin-left: 0;
  }

  .\36 u, .\36 u\24 {
    width: 50%;
    clear: none;
    margin-left: 0;
  }

  .\35 u, .\35 u\24 {
    width: 41.6666666667%;
    clear: none;
    margin-left: 0;
  }

  .\34 u, .\34 u\24 {
    width: 33.3333333333%;
    clear: none;
    margin-left: 0;
  }

  .\33 u, .\33 u\24 {
    width: 25%;
    clear: none;
    margin-left: 0;
  }

  .\32 u, .\32 u\24 {
    width: 16.6666666667%;
    clear: none;
    margin-left: 0;
  }

  .\31 u, .\31 u\24 {
    width: 8.3333333333%;
    clear: none;
    margin-left: 0;
  }

  .\31 2u\24 + *,
  .\31 1u\24 + *,
  .\31 0u\24 + *,
  .\39 u\24 + *,
  .\38 u\24 + *,
  .\37 u\24 + *,
  .\36 u\24 + *,
  .\35 u\24 + *,
  .\34 u\24 + *,
  .\33 u\24 + *,
  .\32 u\24 + *,
  .\31 u\24 + * {
    clear: left;
  }

  .\-11u {
    margin-left: 91.66667%;
  }

  .\-10u {
    margin-left: 83.33333%;
  }

  .\-9u {
    margin-left: 75%;
  }

  .\-8u {
    margin-left: 66.66667%;
  }

  .\-7u {
    margin-left: 58.33333%;
  }

  .\-6u {
    margin-left: 50%;
  }

  .\-5u {
    margin-left: 41.66667%;
  }

  .\-4u {
    margin-left: 33.33333%;
  }

  .\-3u {
    margin-left: 25%;
  }

  .\-2u {
    margin-left: 16.66667%;
  }

  .\-1u {
    margin-left: 8.33333%;
  }

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

    .row > * {
      padding: 0 0 0 2em;
    }

    .row {
      margin: 0 0 -1px -2em;
    }

    .row.uniform > * {
      padding: 2em 0 0 2em;
    }

    .row.uniform {
      margin: -2em 0 -1px -2em;
    }

    .row.\32 00\25 > * {
      padding: 0 0 0 4em;
    }

    .row.\32 00\25 {
      margin: 0 0 -1px -4em;
    }

    .row.uniform.\32 00\25 > * {
      padding: 4em 0 0 4em;
    }

    .row.uniform.\32 00\25 {
      margin: -4em 0 -1px -4em;
    }

    .row.\31 50\25 > * {
      padding: 0 0 0 3em;
    }

    .row.\31 50\25 {
      margin: 0 0 -1px -3em;
    }

    .row.uniform.\31 50\25 > * {
      padding: 3em 0 0 3em;
    }

    .row.uniform.\31 50\25 {
      margin: -3em 0 -1px -3em;
    }

    .row.\35 0\25 > * {
      padding: 0 0 0 1em;
    }

    .row.\35 0\25 {
      margin: 0 0 -1px -1em;
    }

    .row.uniform.\35 0\25 > * {
      padding: 1em 0 0 1em;
    }

    .row.uniform.\35 0\25 {
      margin: -1em 0 -1px -1em;
    }

    .row.\32 5\25 > * {
      padding: 0 0 0 0.5em;
    }

    .row.\32 5\25 {
      margin: 0 0 -1px -0.5em;
    }

    .row.uniform.\32 5\25 > * {
      padding: 0.5em 0 0 0.5em;
    }

    .row.uniform.\32 5\25 {
      margin: -0.5em 0 -1px -0.5em;
    }

    .\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 {
      width: 100%;
      clear: none;
      margin-left: 0;
    }

    .\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 {
      width: 91.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 {
      width: 83.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\39 u\28xlarge\29, .\39 u\24\28xlarge\29 {
      width: 75%;
      clear: none;
      margin-left: 0;
    }

    .\38 u\28xlarge\29, .\38 u\24\28xlarge\29 {
      width: 66.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\37 u\28xlarge\29, .\37 u\24\28xlarge\29 {
      width: 58.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\36 u\28xlarge\29, .\36 u\24\28xlarge\29 {
      width: 50%;
      clear: none;
      margin-left: 0;
    }

    .\35 u\28xlarge\29, .\35 u\24\28xlarge\29 {
      width: 41.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\34 u\28xlarge\29, .\34 u\24\28xlarge\29 {
      width: 33.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\33 u\28xlarge\29, .\33 u\24\28xlarge\29 {
      width: 25%;
      clear: none;
      margin-left: 0;
    }

    .\32 u\28xlarge\29, .\32 u\24\28xlarge\29 {
      width: 16.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 u\28xlarge\29, .\31 u\24\28xlarge\29 {
      width: 8.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\31 2u\24\28xlarge\29 + *,
    .\31 1u\24\28xlarge\29 + *,
    .\31 0u\24\28xlarge\29 + *,
    .\39 u\24\28xlarge\29 + *,
    .\38 u\24\28xlarge\29 + *,
    .\37 u\24\28xlarge\29 + *,
    .\36 u\24\28xlarge\29 + *,
    .\35 u\24\28xlarge\29 + *,
    .\34 u\24\28xlarge\29 + *,
    .\33 u\24\28xlarge\29 + *,
    .\32 u\24\28xlarge\29 + *,
    .\31 u\24\28xlarge\29 + * {
      clear: left;
    }

    .\-11u\28xlarge\29 {
      margin-left: 91.66667%;
    }

    .\-10u\28xlarge\29 {
      margin-left: 83.33333%;
    }

    .\-9u\28xlarge\29 {
      margin-left: 75%;
    }

    .\-8u\28xlarge\29 {
      margin-left: 66.66667%;
    }

    .\-7u\28xlarge\29 {
      margin-left: 58.33333%;
    }

    .\-6u\28xlarge\29 {
      margin-left: 50%;
    }

    .\-5u\28xlarge\29 {
      margin-left: 41.66667%;
    }

    .\-4u\28xlarge\29 {
      margin-left: 33.33333%;
    }

    .\-3u\28xlarge\29 {
      margin-left: 25%;
    }

    .\-2u\28xlarge\29 {
      margin-left: 16.66667%;
    }

    .\-1u\28xlarge\29 {
      margin-left: 8.33333%;
    }

  }

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

    .row > * {
      padding: 0 0 0 1.5em;
    }

    .row {
      margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
      padding: 1.5em 0 0 1.5em;
    }

    .row.uniform {
      margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
      padding: 0 0 0 3em;
    }

    .row.\32 00\25 {
      margin: 0 0 -1px -3em;
    }

    .row.uniform.\32 00\25 > * {
      padding: 3em 0 0 3em;
    }

    .row.uniform.\32 00\25 {
      margin: -3em 0 -1px -3em;
    }

    .row.\31 50\25 > * {
      padding: 0 0 0 2.25em;
    }

    .row.\31 50\25 {
      margin: 0 0 -1px -2.25em;
    }

    .row.uniform.\31 50\25 > * {
      padding: 2.25em 0 0 2.25em;
    }

    .row.uniform.\31 50\25 {
      margin: -2.25em 0 -1px -2.25em;
    }

    .row.\35 0\25 > * {
      padding: 0 0 0 0.75em;
    }

    .row.\35 0\25 {
      margin: 0 0 -1px -0.75em;
    }

    .row.uniform.\35 0\25 > * {
      padding: 0.75em 0 0 0.75em;
    }

    .row.uniform.\35 0\25 {
      margin: -0.75em 0 -1px -0.75em;
    }

    .row.\32 5\25 > * {
      padding: 0 0 0 0.375em;
    }

    .row.\32 5\25 {
      margin: 0 0 -1px -0.375em;
    }

    .row.uniform.\32 5\25 > * {
      padding: 0.375em 0 0 0.375em;
    }

    .row.uniform.\32 5\25 {
      margin: -0.375em 0 -1px -0.375em;
    }

    .\31 2u\28large\29, .\31 2u\24\28large\29 {
      width: 100%;
      clear: none;
      margin-left: 0;
    }

    .\31 1u\28large\29, .\31 1u\24\28large\29 {
      width: 91.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 0u\28large\29, .\31 0u\24\28large\29 {
      width: 83.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\39 u\28large\29, .\39 u\24\28large\29 {
      width: 75%;
      clear: none;
      margin-left: 0;
    }

    .\38 u\28large\29, .\38 u\24\28large\29 {
      width: 66.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\37 u\28large\29, .\37 u\24\28large\29 {
      width: 58.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\36 u\28large\29, .\36 u\24\28large\29 {
      width: 50%;
      clear: none;
      margin-left: 0;
    }

    .\35 u\28large\29, .\35 u\24\28large\29 {
      width: 41.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\34 u\28large\29, .\34 u\24\28large\29 {
      width: 33.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\33 u\28large\29, .\33 u\24\28large\29 {
      width: 25%;
      clear: none;
      margin-left: 0;
    }

    .\32 u\28large\29, .\32 u\24\28large\29 {
      width: 16.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 u\28large\29, .\31 u\24\28large\29 {
      width: 8.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\31 2u\24\28large\29 + *,
    .\31 1u\24\28large\29 + *,
    .\31 0u\24\28large\29 + *,
    .\39 u\24\28large\29 + *,
    .\38 u\24\28large\29 + *,
    .\37 u\24\28large\29 + *,
    .\36 u\24\28large\29 + *,
    .\35 u\24\28large\29 + *,
    .\34 u\24\28large\29 + *,
    .\33 u\24\28large\29 + *,
    .\32 u\24\28large\29 + *,
    .\31 u\24\28large\29 + * {
      clear: left;
    }

    .\-11u\28large\29 {
      margin-left: 91.66667%;
    }

    .\-10u\28large\29 {
      margin-left: 83.33333%;
    }

    .\-9u\28large\29 {
      margin-left: 75%;
    }

    .\-8u\28large\29 {
      margin-left: 66.66667%;
    }

    .\-7u\28large\29 {
      margin-left: 58.33333%;
    }

    .\-6u\28large\29 {
      margin-left: 50%;
    }

    .\-5u\28large\29 {
      margin-left: 41.66667%;
    }

    .\-4u\28large\29 {
      margin-left: 33.33333%;
    }

    .\-3u\28large\29 {
      margin-left: 25%;
    }

    .\-2u\28large\29 {
      margin-left: 16.66667%;
    }

    .\-1u\28large\29 {
      margin-left: 8.33333%;
    }

  }

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

    .row > * {
      padding: 0 0 0 1.5em;
    }

    .row {
      margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
      padding: 1.5em 0 0 1.5em;
    }

    .row.uniform {
      margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
      padding: 0 0 0 3em;
    }

    .row.\32 00\25 {
      margin: 0 0 -1px -3em;
    }

    .row.uniform.\32 00\25 > * {
      padding: 3em 0 0 3em;
    }

    .row.uniform.\32 00\25 {
      margin: -3em 0 -1px -3em;
    }

    .row.\31 50\25 > * {
      padding: 0 0 0 2.25em;
    }

    .row.\31 50\25 {
      margin: 0 0 -1px -2.25em;
    }

    .row.uniform.\31 50\25 > * {
      padding: 2.25em 0 0 2.25em;
    }

    .row.uniform.\31 50\25 {
      margin: -2.25em 0 -1px -2.25em;
    }

    .row.\35 0\25 > * {
      padding: 0 0 0 0.75em;
    }

    .row.\35 0\25 {
      margin: 0 0 -1px -0.75em;
    }

    .row.uniform.\35 0\25 > * {
      padding: 0.75em 0 0 0.75em;
    }

    .row.uniform.\35 0\25 {
      margin: -0.75em 0 -1px -0.75em;
    }

    .row.\32 5\25 > * {
      padding: 0 0 0 0.375em;
    }

    .row.\32 5\25 {
      margin: 0 0 -1px -0.375em;
    }

    .row.uniform.\32 5\25 > * {
      padding: 0.375em 0 0 0.375em;
    }

    .row.uniform.\32 5\25 {
      margin: -0.375em 0 -1px -0.375em;
    }

    .\31 2u\28medium\29, .\31 2u\24\28medium\29 {
      width: 100%;
      clear: none;
      margin-left: 0;
    }

    .\31 1u\28medium\29, .\31 1u\24\28medium\29 {
      width: 91.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 0u\28medium\29, .\31 0u\24\28medium\29 {
      width: 83.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\39 u\28medium\29, .\39 u\24\28medium\29 {
      width: 75%;
      clear: none;
      margin-left: 0;
    }

    .\38 u\28medium\29, .\38 u\24\28medium\29 {
      width: 66.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\37 u\28medium\29, .\37 u\24\28medium\29 {
      width: 58.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\36 u\28medium\29, .\36 u\24\28medium\29 {
      width: 50%;
      clear: none;
      margin-left: 0;
    }

    .\35 u\28medium\29, .\35 u\24\28medium\29 {
      width: 41.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\34 u\28medium\29, .\34 u\24\28medium\29 {
      width: 33.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\33 u\28medium\29, .\33 u\24\28medium\29 {
      width: 25%;
      clear: none;
      margin-left: 0;
    }

    .\32 u\28medium\29, .\32 u\24\28medium\29 {
      width: 16.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 u\28medium\29, .\31 u\24\28medium\29 {
      width: 8.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\31 2u\24\28medium\29 + *,
    .\31 1u\24\28medium\29 + *,
    .\31 0u\24\28medium\29 + *,
    .\39 u\24\28medium\29 + *,
    .\38 u\24\28medium\29 + *,
    .\37 u\24\28medium\29 + *,
    .\36 u\24\28medium\29 + *,
    .\35 u\24\28medium\29 + *,
    .\34 u\24\28medium\29 + *,
    .\33 u\24\28medium\29 + *,
    .\32 u\24\28medium\29 + *,
    .\31 u\24\28medium\29 + * {
      clear: left;
    }

    .\-11u\28medium\29 {
      margin-left: 91.66667%;
    }

    .\-10u\28medium\29 {
      margin-left: 83.33333%;
    }

    .\-9u\28medium\29 {
      margin-left: 75%;
    }

    .\-8u\28medium\29 {
      margin-left: 66.66667%;
    }

    .\-7u\28medium\29 {
      margin-left: 58.33333%;
    }

    .\-6u\28medium\29 {
      margin-left: 50%;
    }

    .\-5u\28medium\29 {
      margin-left: 41.66667%;
    }

    .\-4u\28medium\29 {
      margin-left: 33.33333%;
    }

    .\-3u\28medium\29 {
      margin-left: 25%;
    }

    .\-2u\28medium\29 {
      margin-left: 16.66667%;
    }

    .\-1u\28medium\29 {
      margin-left: 8.33333%;
    }

  }

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

    .row > * {
      padding: 0 0 0 1.25em;
    }

    .row {
      margin: 0 0 -1px -1.25em;
    }

    .row.uniform > * {
      padding: 1.25em 0 0 1.25em;
    }

    .row.uniform {
      margin: -1.25em 0 -1px -1.25em;
    }

    .row.\32 00\25 > * {
      padding: 0 0 0 2.5em;
    }

    .row.\32 00\25 {
      margin: 0 0 -1px -2.5em;
    }

    .row.uniform.\32 00\25 > * {
      padding: 2.5em 0 0 2.5em;
    }

    .row.uniform.\32 00\25 {
      margin: -2.5em 0 -1px -2.5em;
    }

    .row.\31 50\25 > * {
      padding: 0 0 0 1.875em;
    }

    .row.\31 50\25 {
      margin: 0 0 -1px -1.875em;
    }

    .row.uniform.\31 50\25 > * {
      padding: 1.875em 0 0 1.875em;
    }

    .row.uniform.\31 50\25 {
      margin: -1.875em 0 -1px -1.875em;
    }

    .row.\35 0\25 > * {
      padding: 0 0 0 0.625em;
    }

    .row.\35 0\25 {
      margin: 0 0 -1px -0.625em;
    }

    .row.uniform.\35 0\25 > * {
      padding: 0.625em 0 0 0.625em;
    }

    .row.uniform.\35 0\25 {
      margin: -0.625em 0 -1px -0.625em;
    }

    .row.\32 5\25 > * {
      padding: 0 0 0 0.3125em;
    }

    .row.\32 5\25 {
      margin: 0 0 -1px -0.3125em;
    }

    .row.uniform.\32 5\25 > * {
      padding: 0.3125em 0 0 0.3125em;
    }

    .row.uniform.\32 5\25 {
      margin: -0.3125em 0 -1px -0.3125em;
    }

    .\31 2u\28small\29, .\31 2u\24\28small\29 {
      width: 100%;
      clear: none;
      margin-left: 0;
    }

    .\31 1u\28small\29, .\31 1u\24\28small\29 {
      width: 91.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 0u\28small\29, .\31 0u\24\28small\29 {
      width: 83.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\39 u\28small\29, .\39 u\24\28small\29 {
      width: 75%;
      clear: none;
      margin-left: 0;
    }

    .\38 u\28small\29, .\38 u\24\28small\29 {
      width: 66.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\37 u\28small\29, .\37 u\24\28small\29 {
      width: 58.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\36 u\28small\29, .\36 u\24\28small\29 {
      width: 50%;
      clear: none;
      margin-left: 0;
    }

    .\35 u\28small\29, .\35 u\24\28small\29 {
      width: 41.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\34 u\28small\29, .\34 u\24\28small\29 {
      width: 33.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\33 u\28small\29, .\33 u\24\28small\29 {
      width: 25%;
      clear: none;
      margin-left: 0;
    }

    .\32 u\28small\29, .\32 u\24\28small\29 {
      width: 16.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 u\28small\29, .\31 u\24\28small\29 {
      width: 8.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\31 2u\24\28small\29 + *,
    .\31 1u\24\28small\29 + *,
    .\31 0u\24\28small\29 + *,
    .\39 u\24\28small\29 + *,
    .\38 u\24\28small\29 + *,
    .\37 u\24\28small\29 + *,
    .\36 u\24\28small\29 + *,
    .\35 u\24\28small\29 + *,
    .\34 u\24\28small\29 + *,
    .\33 u\24\28small\29 + *,
    .\32 u\24\28small\29 + *,
    .\31 u\24\28small\29 + * {
      clear: left;
    }

    .\-11u\28small\29 {
      margin-left: 91.66667%;
    }

    .\-10u\28small\29 {
      margin-left: 83.33333%;
    }

    .\-9u\28small\29 {
      margin-left: 75%;
    }

    .\-8u\28small\29 {
      margin-left: 66.66667%;
    }

    .\-7u\28small\29 {
      margin-left: 58.33333%;
    }

    .\-6u\28small\29 {
      margin-left: 50%;
    }

    .\-5u\28small\29 {
      margin-left: 41.66667%;
    }

    .\-4u\28small\29 {
      margin-left: 33.33333%;
    }

    .\-3u\28small\29 {
      margin-left: 25%;
    }

    .\-2u\28small\29 {
      margin-left: 16.66667%;
    }

    .\-1u\28small\29 {
      margin-left: 8.33333%;
    }

  }

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

    .row > * {
      padding: 0 0 0 1.25em;
    }

    .row {
      margin: 0 0 -1px -1.25em;
    }

    .row.uniform > * {
      padding: 1.25em 0 0 1.25em;
    }

    .row.uniform {
      margin: -1.25em 0 -1px -1.25em;
    }

    .row.\32 00\25 > * {
      padding: 0 0 0 2.5em;
    }

    .row.\32 00\25 {
      margin: 0 0 -1px -2.5em;
    }

    .row.uniform.\32 00\25 > * {
      padding: 2.5em 0 0 2.5em;
    }

    .row.uniform.\32 00\25 {
      margin: -2.5em 0 -1px -2.5em;
    }

    .row.\31 50\25 > * {
      padding: 0 0 0 1.875em;
    }

    .row.\31 50\25 {
      margin: 0 0 -1px -1.875em;
    }

    .row.uniform.\31 50\25 > * {
      padding: 1.875em 0 0 1.875em;
    }

    .row.uniform.\31 50\25 {
      margin: -1.875em 0 -1px -1.875em;
    }

    .row.\35 0\25 > * {
      padding: 0 0 0 0.625em;
    }

    .row.\35 0\25 {
      margin: 0 0 -1px -0.625em;
    }

    .row.uniform.\35 0\25 > * {
      padding: 0.625em 0 0 0.625em;
    }

    .row.uniform.\35 0\25 {
      margin: -0.625em 0 -1px -0.625em;
    }

    .row.\32 5\25 > * {
      padding: 0 0 0 0.3125em;
    }

    .row.\32 5\25 {
      margin: 0 0 -1px -0.3125em;
    }

    .row.uniform.\32 5\25 > * {
      padding: 0.3125em 0 0 0.3125em;
    }

    .row.uniform.\32 5\25 {
      margin: -0.3125em 0 -1px -0.3125em;
    }

    .\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 {
      width: 100%;
      clear: none;
      margin-left: 0;
    }

    .\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 {
      width: 91.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 {
      width: 83.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\39 u\28xsmall\29, .\39 u\24\28xsmall\29 {
      width: 75%;
      clear: none;
      margin-left: 0;
    }

    .\38 u\28xsmall\29, .\38 u\24\28xsmall\29 {
      width: 66.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\37 u\28xsmall\29, .\37 u\24\28xsmall\29 {
      width: 58.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\36 u\28xsmall\29, .\36 u\24\28xsmall\29 {
      width: 50%;
      clear: none;
      margin-left: 0;
    }

    .\35 u\28xsmall\29, .\35 u\24\28xsmall\29 {
      width: 41.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\34 u\28xsmall\29, .\34 u\24\28xsmall\29 {
      width: 33.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\33 u\28xsmall\29, .\33 u\24\28xsmall\29 {
      width: 25%;
      clear: none;
      margin-left: 0;
    }

    .\32 u\28xsmall\29, .\32 u\24\28xsmall\29 {
      width: 16.6666666667%;
      clear: none;
      margin-left: 0;
    }

    .\31 u\28xsmall\29, .\31 u\24\28xsmall\29 {
      width: 8.3333333333%;
      clear: none;
      margin-left: 0;
    }

    .\31 2u\24\28xsmall\29 + *,
    .\31 1u\24\28xsmall\29 + *,
    .\31 0u\24\28xsmall\29 + *,
    .\39 u\24\28xsmall\29 + *,
    .\38 u\24\28xsmall\29 + *,
    .\37 u\24\28xsmall\29 + *,
    .\36 u\24\28xsmall\29 + *,
    .\35 u\24\28xsmall\29 + *,
    .\34 u\24\28xsmall\29 + *,
    .\33 u\24\28xsmall\29 + *,
    .\32 u\24\28xsmall\29 + *,
    .\31 u\24\28xsmall\29 + * {
      clear: left;
    }

    .\-11u\28xsmall\29 {
      margin-left: 91.66667%;
    }

    .\-10u\28xsmall\29 {
      margin-left: 83.33333%;
    }

    .\-9u\28xsmall\29 {
      margin-left: 75%;
    }

    .\-8u\28xsmall\29 {
      margin-left: 66.66667%;
    }

    .\-7u\28xsmall\29 {
      margin-left: 58.33333%;
    }

    .\-6u\28xsmall\29 {
      margin-left: 50%;
    }

    .\-5u\28xsmall\29 {
      margin-left: 41.66667%;
    }

    .\-4u\28xsmall\29 {
      margin-left: 33.33333%;
    }

    .\-3u\28xsmall\29 {
      margin-left: 25%;
    }

    .\-2u\28xsmall\29 {
      margin-left: 16.66667%;
    }

    .\-1u\28xsmall\29 {
      margin-left: 8.33333%;
    }

  }

/* Basic */

  @-ms-viewport {
    width: device-width;
  }

  body {
    -ms-overflow-style: scrollbar;
  }

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

    html, body {
      min-width: 320px;
    }

  }

  

    body.landing {
      padding-top: 0 !important;
    }

    

    body.is-loading *, body.is-loading *:before, body.is-loading *:after {
      -moz-animation: none !important;
      -webkit-animation: none !important;
      -ms-animation: none !important;
      animation: none !important;
      -moz-transition: none !important;
      -webkit-transition: none !important;
      -ms-transition: none !important;
      transition: none !important;
    }

/* Type */

  

  body, input, select, textarea {
    /*font-family: "Roboto", sans-serif;*/
    font-size: 13pt;
    font-weight: 400;
    line-height: 2em;
  }

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

      body, input, select, textarea {
        font-size: 11pt;
      }

    }

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

      body, input, select, textarea {
        font-size: 11pt;
      }

    }

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

      body, input, select, textarea {
        font-size: 12pt;
      }

    }

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

      body, input, select, textarea {
        font-size: 12pt;
      }

    }

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

      body, input, select, textarea {
        font-size: 12pt;
      }

    }

  a {
    text-decoration: underline;
    color: #f32853;
  }

    a:hover {
      text-decoration: none;
    }

  strong, b {
    /* color: #484848; */
    font-weight: 500;
  }

  em, i {
    font-style: italic;
  }

  p {
    margin: 0 0 2em 0;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #484848;
    font-weight: 500;
    line-height: 1em;
    margin: 0 0 1em 0;
    text-transform: uppercase;
  }

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
      color: inherit;
      text-decoration: none;
    }

  h2 {
    font-size: 1.75em;
    line-height: 1.5em;
  }

  h3 {
    font-size: 1.35em;
    line-height: 1.5em;
  }

  h4 {
    font-size: 1.1em;
    line-height: 1.5em;
  }

  h5 {
    font-size: 0.9em;
    line-height: 1.5em;
  }

  h6 {
    font-size: 0.7em;
    line-height: 1.5em;
  }

  sub {
    font-size: 0.8em;
    position: relative;
    top: 0.5em;
  }

  sup {
    font-size: 0.8em;
    position: relative;
    top: -0.5em;
  }

  blockquote {
    border-left: solid 4px;
    font-style: italic;
    margin: 0 0 2em 0;
    padding: 0.5em 0 0.5em 2em;
  }

  code {
    background: rgba(144, 144, 144, 0.075);
    border-radius: 4px;
    border: solid 1px;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    margin: 0 0.25em;
    padding: 0.25em 0.65em;
  }

  pre {
    -webkit-overflow-scrolling: touch;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    margin: 0 0 2em 0;
  }

    pre code {
      display: block;
      line-height: 1.75;
      padding: 1em 1.5em;
      overflow-x: auto;
    }

  hr {
    border: 0;
    border-bottom: solid 1px rgba(144, 144, 144, 0.25);
    margin: 2em 0;
  }

    hr.major {
      margin: 3em 0;
    }

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

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

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

/* Box */

  .box {
    border-radius: 4px;
    border: solid 1px rgba(144, 144, 144, 0.25);
    margin-bottom: 2em;
    padding: 1.5em;
  }

    .box > :last-child,
    .box > :last-child > :last-child,
    .box > :last-child > :last-child > :last-child {
      margin-bottom: 0;
    }

    .box.alt {
      border: 0;
      border-radius: 0;
      padding: 0;
    }

/* Button */

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button,
  .button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: #323037;
    border-radius: 4px;
    color: #ffffff !important;
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    height: 3.15em;
    line-height: 3.25em;
    padding: 0 2.2em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover,
    button:hover,
    .button:hover {
      background-color: #3e3c45;
    }

    input[type="submit"]:active,
    input[type="reset"]:active,
    input[type="button"]:active,
    button:active,
    .button:active {
      background-color: #262429;
    }

    input[type="submit"].icon,
    input[type="reset"].icon,
    input[type="button"].icon,
    button.icon,
    .button.icon {
      padding-left: 1.35em;
    }

      input[type="submit"].icon:before,
      input[type="reset"].icon:before,
      input[type="button"].icon:before,
      button.icon:before,
      .button.icon:before {
        margin-right: 0.5em;
      }

    input[type="submit"].fit,
    input[type="reset"].fit,
    input[type="button"].fit,
    button.fit,
    .button.fit {
      display: block;
      margin: 0 0 1em 0;
      width: 100%;
    }

    input[type="submit"].small,
    input[type="reset"].small,
    input[type="button"].small,
    button.small,
    .button.small {
      font-size: 0.8em;
    }

    input[type="submit"].big,
    input[type="reset"].big,
    input[type="button"].big,
    button.big,
    .button.big {
      font-size: 1.35em;
    }

    input[type="submit"].disabled, input[type="submit"]:disabled,
    input[type="reset"].disabled,
    input[type="reset"]:disabled,
    input[type="button"].disabled,
    input[type="button"]:disabled,
    button.disabled,
    button:disabled,
    .button.disabled,
    .button:disabled {
      -moz-pointer-events: none;
      -webkit-pointer-events: none;
      -ms-pointer-events: none;
      pointer-events: none;
      background-color: #111111 !important;
      box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
      color: #fff !important;
      cursor: default;
      opacity: 0.25;
    }

    input[type="submit"].alt,
    input[type="reset"].alt,
    input[type="button"].alt,
    button.alt,
    .button.alt {
      background-color: transparent;
      box-shadow: inset 0 0 0 2px rgba(144, 144, 144, 0.25);
      color: #484848 !important;
    }

      input[type="submit"].alt:hover,
      input[type="reset"].alt:hover,
      input[type="button"].alt:hover,
      button.alt:hover,
      .button.alt:hover {
        background-color: rgba(144, 144, 144, 0.075);
      }

      input[type="submit"].alt:active,
      input[type="reset"].alt:active,
      input[type="button"].alt:active,
      button.alt:active,
      .button.alt:active {
        background-color: rgba(144, 144, 144, 0.2);
      }

      input[type="submit"].alt.icon:before,
      input[type="reset"].alt.icon:before,
      input[type="button"].alt.icon:before,
      button.alt.icon:before,
      .button.alt.icon:before {
        color: #aaa;
      }

    input[type="submit"].special,
    input[type="reset"].special,
    input[type="button"].special,
    button.special,
    .button.special {
      background-color: #f32853;
      color: #ffffff !important;
    }

      input[type="submit"].special:hover,
      input[type="reset"].special:hover,
      input[type="button"].special:hover,
      button.special:hover,
      .button.special:hover {
        background-color: #f44066;
      }

      input[type="submit"].special:active,
      input[type="reset"].special:active,
      input[type="button"].special:active,
      button.special:active,
      .button.special:active {
        background-color: #f21040;
      }

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

      input[type="submit"],
      input[type="reset"],
      input[type="button"],
      button,
      .button {
        padding: 0;
      }

    }

/* Feature */

  .feature-grid {
    position: relative;
  }

    .feature-grid:after {
      clear: both;
      content: '';
      display: block;
    }

    .feature-grid .feature {
      display: inline-block;
      float: left;
      margin-bottom: 3em;
      width: 50%;
    }

      .feature-grid .feature .content {
        width: 60%;
      }

      .feature-grid .feature .image {
        width: 30%;
      }

        .feature-grid .feature .image img {
          display: inline;
          max-width: 100%;
        }

      .feature-grid .feature:nth-child(odd) .content, .feature-grid .feature:nth-child(odd) .image {
        float: right;
        margin-right: 5%;
        text-align: right;
      }

      .feature-grid .feature:nth-child(even) .content, .feature-grid .feature:nth-child(even) .image {
        float: left;
        margin-left: 5%;
        text-align: left;
      }

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

      .feature-grid .feature {
        margin-bottom: 2em;
      }

    }

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

      .feature-grid .feature {
        display: block;
        width: 100%;
      }

        .feature-grid .feature .content {
          width: 65%;
        }

        .feature-grid .feature .image {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }

    }

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

      .feature-grid .feature {
        margin-bottom: 1em;
      }

    }

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

      .feature-grid .feature .content,
      .feature-grid .feature .image {
        display: block;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        width: 100%;
      }

      .feature-grid .feature .image {
        margin-bottom: 1em;
      }

    }

/* Form */

  form {
    margin: 0 0 2em 0;
  }

  label {
    color: #484848;
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    margin: 0 0 1em 0;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: rgba(144, 144, 144, 0.075);
    border-radius: 4px;
    border: none;
    border: solid 1px rgba(144, 144, 144, 0.25);
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;
  }

    input[type="text"]:invalid,
    input[type="password"]:invalid,
    input[type="email"]:invalid,
    select:invalid,
    textarea:invalid {
      box-shadow: none;
    }

    

  .select-wrapper {
    text-decoration: none;
    text-decoration: none;
    display: block;
    position: relative;
  }

    .select-wrapper:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-transform: none !important;
    }

    .select-wrapper:before {
      content: '\f078';
      color: rgba(144, 144, 144, 0.25);
      display: block;
      height: 2.75em;
      line-height: 2.75em;
      pointer-events: none;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
      width: 2.75em;
    }

    .select-wrapper select::-ms-expand {
      display: none;
    }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
    height: 2.75em;
  }

  textarea {
    padding: 0.75em 1em;
  }

  input[type="checkbox"],
  input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    float: left;
    margin-right: -2em;
    opacity: 0;
    width: 1em;
    z-index: -1;
  }

    input[type="checkbox"] + label,
    input[type="radio"] + label {
      text-decoration: none;
      color: #111111;
      cursor: pointer;
      display: inline-block;
      font-size: 1em;
      font-weight: 400;
      padding-left: 2.4em;
      padding-right: 0.75em;
      position: relative;
    }

      input[type="checkbox"] + label:before,
      input[type="radio"] + label:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-transform: none !important;
      }

      input[type="checkbox"] + label:before,
      input[type="radio"] + label:before {
        background: rgba(144, 144, 144, 0.075);
        border-radius: 4px;
        border: solid 1px rgba(144, 144, 144, 0.25);
        content: '';
        display: inline-block;
        height: 1.65em;
        left: 0;
        line-height: 1.58125em;
        position: absolute;
        text-align: center;
        top: 0;
        width: 1.65em;
      }

    input[type="checkbox"]:checked + label:before,
    input[type="radio"]:checked + label:before {
      content: '\f00c';
      background: #323037;
      border-color: #323037;
      color: #ffffff;
    }

    

  input[type="checkbox"] + label:before {
    border-radius: 4px;
  }

  input[type="radio"] + label:before {
    border-radius: 100%;
  }

  ::-webkit-input-placeholder {
    opacity: 1.0;
    color: #aaa !important;
  }

  :-moz-placeholder {
    opacity: 1.0;
    color: #aaa !important;
  }

  ::-moz-placeholder {
    opacity: 1.0;
    color: #aaa !important;
  }

  :-ms-input-placeholder {
    opacity: 1.0;
    color: #aaa !important;
  }

  .formerize-placeholder {
    opacity: 1.0;
    color: #aaa !important;
  }

/* Icon */

  .icon {
    text-decoration: none;
    border-bottom: none;
    position: relative;
  }

    .icon:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-transform: none !important;
    }

    .icon > .label {
      display: none;
    }

/* Image */

  .image {
    border-radius: 4px;
    border: 0;
    display: inline-block;
    position: relative;
  }

    .image img {
      border-radius: 4px;
      display: block;
    }

    .image.left, .image.right {
      max-width: 40%;
    }

      .image.left img, .image.right img {
        width: 100%;
      }

    .image.left {
      float: left;
      padding: 0 1.5em 1em 0;
      top: 0.25em;
    }

    .image.right {
      float: right;
      padding: 0 0 1em 1.5em;
      top: 0.25em;
    }

    .image.fit {
      display: block;
      margin: 0 0 2em 0;
      width: 100%;
    }

      .image.fit img {
        width: 100%;
      }

    .image.rounded {
      border-radius: 100%;
    }

      .image.rounded img {
        border: solid 0.5em rgba(144, 144, 144, 0.25);
        border-radius: 100%;
      }

    .image.captioned {
      border-radius: 0;
      margin-bottom: 4em;
    }

      .image.captioned img {
        border-radius: 0;
      }

      .image.captioned h3 {
        background-color: #fff;
        box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.15);
        display: block;
        padding: 2em 1em;
      }

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

        .image.captioned {
          margin-bottom: 2em;
        }

          .image.captioned h3 {
            padding: 1em;
          }

      }

    .image.main {
      display: block;
      margin: 0 0 3em 0;
      width: 100%;
    }

      .image.main img {
        width: 100%;
      }

/* List */

  ol {
    list-style: decimal;
    margin: 0 0 2em 0;
    padding-left: 1.25em;
  }

    ol li {
      padding-left: 0.25em;
    }

  ul {
    list-style: disc;
    margin: 0 0 2em 0;
    padding-left: 1em;
  }

    ul li {
      padding-left: 0.5em;
    }

    ul.alt {
      list-style: none;
      padding-left: 0;
    }

      ul.alt li {
        border-top: solid 1px rgba(144, 144, 144, 0.25);
        padding: 0.5em 0;
      }

        ul.alt li:first-child {
          border-top: 0;
          padding-top: 0;
        }

    ul.icons {
      cursor: default;
      list-style: none;
      padding-left: 0;
    }

      ul.icons li {
        display: inline-block;
        padding: 0 1em 0 0;
      }

        ul.icons li:last-child {
          padding-right: 0;
        }

        ul.icons li .icon:before {
          font-size: 2em;
        }

    ul.actions {
      cursor: default;
      list-style: none;
      padding-left: 0;
    }

      ul.actions li {
        display: inline-block;
        padding: 0 1em 0 0;
        vertical-align: middle;
      }

        ul.actions li:last-child {
          padding-right: 0;
        }

      ul.actions.small li {
        padding: 0 0.5em 0 0;
      }

      ul.actions.vertical li {
        display: block;
        padding: 1em 0 0 0;
      }

        ul.actions.vertical li:first-child {
          padding-top: 0;
        }

        ul.actions.vertical li > * {
          margin-bottom: 0;
        }

      ul.actions.vertical.small li {
        padding: 0.5em 0 0 0;
      }

        ul.actions.vertical.small li:first-child {
          padding-top: 0;
        }

      ul.actions.fit {
        display: table;
        margin-left: -1em;
        padding: 0;
        table-layout: fixed;
        width: calc(100% + 1em);
      }

        ul.actions.fit li {
          display: table-cell;
          padding: 0 0 0 1em;
        }

          ul.actions.fit li > * {
            margin-bottom: 0;
          }

        ul.actions.fit.small {
          margin-left: -0.5em;
          width: calc(100% + 0.5em);
        }

          ul.actions.fit.small li {
            padding: 0 0 0 0.5em;
          }

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

        ul.actions {
          margin: 0 0 2em 0;
        }

          ul.actions li {
            padding: 1em 0 0 0;
            display: block;
            text-align: center;
            width: 100%;
          }

            ul.actions li:first-child {
              padding-top: 0;
            }

            ul.actions li > * {
              width: 100%;
              margin: 0 !important;
            }

              ul.actions li > *.icon:before {
                margin-left: -2em;
              }

          ul.actions.small li {
            padding: 0.5em 0 0 0;
          }

            ul.actions.small li:first-child {
              padding-top: 0;
            }

      }

  dl {
    margin: 0 0 2em 0;
  }

    dl dt {
      display: block;
      font-weight: 500;
      margin: 0 0 1em 0;
    }

    dl dd {
      margin-left: 2em;
    }

/* Section/Article */

  section.special, article.special {
    text-align: center;
  }

  header p {
    color: #aaa;
    position: relative;
    margin: 0 0 1.5em 0;
    text-transform: uppercase;
  }

  header h2 + p {
    font-size: 1.25em;
    margin-top: -1em;
    line-height: 1.5em;
  }

  header h3 + p {
    font-size: 1.1em;
    margin-top: -0.8em;
    line-height: 1.5em;
  }

  header h4 + p,
  header h5 + p,
  header h6 + p {
    font-size: 0.9em;
    margin-top: -0.6em;
    line-height: 1.5em;
  }

  header.major {
    margin: 0 0 6em 0;
  }

    header.major h2 {
      font-size: 3em;
    }

    header.major h2, header.major h3, header.major h4, header.major h5, header.major h6 {
      display: inline-block;
      margin: 0 0 0.8em;
    }

    header.major p {
      font-size: 1.7em;
      margin-bottom: 0;
    }

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

    header.major {
      margin-bottom: 4em;
    }

      header.major h2 {
        font-size: 2.5em;
      }

      header.major p {
        font-size: 1.3em;
      }

  }

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

    header.major h2 {
      font-size: 2em;
    }

    header.major p {
      font-size: 1.1em;
    }

  }

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

    header.major {
      margin-bottom: 2em;
    }

  }

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

    header.major h2 {
      font-size: 1.75em;
    }

  }

/* Table */

  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  table {
    margin: 0 0 2em 0;
    width: 100%;
  }

    table tbody tr {
      border: solid 1px rgba(144, 144, 144, 0.25);
      border-left: 0;
      border-right: 0;
    }

      table tbody tr:nth-child(2n + 1) {
        background-color: rgba(144, 144, 144, 0.075);
      }

    table td {
      padding: 0.75em 0.75em;
    }

    table th {
      color: #484848;
      font-size: 0.9em;
      font-weight: 500;
      padding: 0 0.75em 0.75em 0.75em;
      text-align: left;
    }

    table thead {
      border-bottom: solid 2px rgba(144, 144, 144, 0.25);
    }

    table tfoot {
      border-top: solid 2px rgba(144, 144, 144, 0.25);
    }

    table.alt {
      border-collapse: separate;
    }

      table.alt tbody tr td {
        border: solid 1px rgba(144, 144, 144, 0.25);
        border-left-width: 0;
        border-top-width: 0;
      }

        table.alt tbody tr td:first-child {
          border-left-width: 1px;
        }

      table.alt tbody tr:first-child td {
        border-top-width: 1px;
      }

      table.alt thead {
        border-bottom: 0;
      }

      table.alt tfoot {
        border-top: 0;
      }

/* Wrapper */

  body.is-touch .wrapper.style3 {
    background-attachment: scroll;
  }

  .wrapper {
    padding: 6em 0 4em 0;
  }

    .wrapper > .inner {
      margin: 0 auto;
      width: 60em;
    }

    .wrapper.style2 {
      background-color: #f6f6f6;
    }

    .wrapper.style3 {
      background-attachment: fixed;
      background-image: url("images/overlay.png");
      background-position: center center;
      background-size: cover;
    }

      .wrapper.style3 header.major {
        margin-bottom: 3em;
      }

        .wrapper.style3 header.major h2 {
          color: #ffffff;
        }

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

          .wrapper.style3 header.major {
            margin-bottom: 2em;
          }

        }

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

      .wrapper {
        padding: 4em 0 2em 0;
      }

    }

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

      .wrapper {
        padding: 3em 0 1em 0;
      }

    }

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

      .wrapper {
        padding: 2em 0 0.1em 0;
      }

    }

/* Header */

  #header {
    background-color: #fff;
    border-bottom: solid 1px rgba(144, 144, 144, 0.25);
    box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
    color: #484848;
    cursor: default;
    font-size: 1.25em;
    height: 4.5em;
    left: 0;
    line-height: 4.4em;
    position: fixed;
    text-transform: uppercase;
    top: 0;
    width: 100%;
    z-index: 10000;
    z-index: 10001;
  }

    #header h1 {
      color: #484848;
      font-weight: 400;
      height: inherit;
      left: 1.25em;
      line-height: inherit;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
    }

    #header nav {
      height: inherit;
      line-height: inherit;
      position: absolute;
      right: 1.25em;
      top: 0;
      vertical-align: middle;
    }

      #header nav ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
      }

        #header nav ul li {
          border-radius: 4px;
          display: inline-block;
          margin-left: 2.5em;
          padding-left: 0;
        }

          #header nav ul li a {
            -moz-transition: color 0.2s ease-in-out;
            -webkit-transition: color 0.2s ease-in-out;
            -ms-transition: color 0.2s ease-in-out;
            transition: color 0.2s ease-in-out;
            color: #111111;
            display: inline-block;
            text-decoration: none;
          }

            #header nav ul li a:hover {
              color: #484848;
            }

          #header nav ul li:first-child {
            margin-left: 0;
          }

          #header nav ul li .button {
            border-color: rgba(144, 144, 144, 0.25);
            box-shadow: none;
            height: 3em;
            line-height: 2.9em;
            margin-bottom: 0;
            padding: 0 1.5em;
            position: relative;
            top: -0.075em;
            vertical-align: middle;
          }

    #header .container {
      position: relative;
    }

      #header .container h1 {
        left: 0;
      }

      #header .container nav {
        right: 0;
      }

    #header.alt {
      background-color: transparent;
      border: 0;
      box-shadow: none;
      height: 3.25em;
      line-height: 3.25em;
      position: relative;
    }

      #header.alt h1 {
        color: #ffffff;
        left: 2.5em;
        top: 1em;
      }

        #header.alt h1 a {
          color: #FFF;
        }

      #header.alt nav {
        right: 2em;
        top: 2em;
      }

        #header.alt nav a {
          color: #ddd;
        }

          #header.alt nav a:active, #header.alt nav a:hover {
            color: #FFF;
          }

      #header.alt .button {
        border-color: rgba(255, 255, 255, 0.5);
        color: #ffffff !important;
      }

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

      #header {
        display: none;
      }

    }

/* Menu */

  .navPanelToggle {
    text-decoration: none;
    text-decoration: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    display: none;
  }

    .navPanelToggle:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-transform: none !important;
    }

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

      .navPanelToggle {
        display: block;
      }

    }

    .navPanelToggle *:before {
      background: rgba(144, 144, 144, 0.65);
      border-radius: 4px;
      color: #fff;
      display: block;
      font-size: 16px;
      height: 2.25em;
      left: 0.5em;
      line-height: 2.25em;
      position: absolute;
      text-align: center;
      top: 0.5em;
      width: 3.5em;
    }

  #navPanel {
    -moz-transform: translateX(-20em);
    -webkit-transform: translateX(-20em);
    -ms-transform: translateX(-20em);
    transform: translateX(-20em);
    -moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
    -ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
    transition: transform 0.5s ease, visibility 0.5s;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    background: #222;
    color: #fff;
    height: 100%;
    max-width: 80%;
    width: 20em;
    padding: 0.5em 1.25em;
    text-transform: uppercase;
  }

    #navPanel ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

      #navPanel ul li {
        padding: 0;
      }

        #navPanel ul li:first-child a:not(.button), #navPanel ul li:first-child span:not(.button) {
          border-top: 0;
        }

        #navPanel ul li a:not(.button),
        #navPanel ul li span:not(.button) {
          border-top: solid 1px #555;
          color: #fff;
          display: block;
          padding: 0.75em 0;
          text-decoration: none;
        }

    #navPanel .button {
      width: 100%;
    }

    #navPanel .close {
      text-decoration: none;
      -moz-transition: color 0.2s ease-in-out;
      -webkit-transition: color 0.2s ease-in-out;
      -ms-transition: color 0.2s ease-in-out;
      transition: color 0.2s ease-in-out;
      -webkit-tap-highlight-color: transparent;
      border: 0;
      color: #484848;
      cursor: pointer;
      display: block;
      height: 4em;
      padding-right: 1.25em;
      position: absolute;
      right: 0;
      text-align: right;
      top: 0;
      vertical-align: middle;
      width: 5em;
    }

      #navPanel .close:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-transform: none !important;
      }

      #navPanel .close:before {
        content: '\f00d';
        width: 3em;
        height: 3em;
        line-height: 3em;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
      }

      #navPanel .close:hover {
        color: inherit;
      }


      .mobile_heading{
        text-align:center;
      }

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

        #navPanel .close {
          height: 4em;
          line-height: 4em;
        }

      }

    #navPanel.visible {
      -moz-transform: translateX(0);
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
      visibility: visible;
    }

/* Banner */

  body.is-touch #banner {
    background-attachment: scroll;
  }

  #banner {
    padding: 1em 0 1em 0;
    line-height: 1.75;
    text-align: center;
  }

    #banner:last-child {
      margin-bottom: 0;
    }

    #banner h2 {
      color: #ffffff;
      display: inline-block;
      font-size: 3.5em;
      line-height: 1.35;
      margin-bottom: 0.5em;
    }

    #banner p {
      color: #aaa;
      font-size: 1.5em;
      margin-bottom: 1.75em;
      text-transform: uppercase;
    }



    .mobile{
      display: none !important;
    }

    .inline_mobile{
      display: none !important;
    }


    #copyright{
      margin-top: 80px;
    }

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

      #banner {
        padding: 1em 0 1em 0;
        width: fit-content !important;
      }

      #banner h2 {
        font-size: 2.5em;
      }

    }

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

      #banner {
        padding: 1em 0 1em 0;
      }

      .inline_mobile{
        display: inline-block !important;
      }

    }

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

      .recorded-logo{
        max-width: 30px;
        padding: 0px;
        left: 6px;
        top: 6px;
      }

      .store_header{
        font-size: 20px
      }

      .inline_mobile{
        display: inline-block !important;
      }

      #banner {
        padding: 1em 2em 1em 0em;
      }

        #banner br {
          display: none;
        }

        #banner h2 {
          font-size: 2.25em;
        }

        #banner p {
          font-size: 1.25em;
        }
            
        
        #buttons{
          margin-top: 1em !important; 
        }

        #copyright{
          margin-top: 5px;
        }
    }


    .desktop{
      display: block;
    }


    @media screen and (max-width: 650px){
      .mobile{
        display: block !important;
      }

      #post-mobile-webinar-purchase-modal.mobile{
        display: none !important;
      }

      #post-mobile-webinar-purchase-modal.mobile.show{
        display: block !important;
      }

      .inline_mobile{
        display: inline-block !important;
      }

      .desktop{
        display: none !important;
      }
    }



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

      #banner {
        padding: 0em 0em 0em 0em;
        margin-top: 0px;
      }

      #banner h2{
        font-size: 2em;
        margin-bottom: 0em;
        margin-top: 6px;
      }
      
      .call_input{
        margin-top: 1em;
        margin-bottom: 1em;
      }

      #name, #row-center .intl-tel-input{
        width: 100% !important;
        margin-top: 5px;
        margin-bottom: 5px;
      }


      .store_header{
        margin-top: 8px;
        margin-bottom: 8px;
      }

      h1,h2{
        margin-top: 8px;
        margin-bottom: 8px;
      }

      #buttons{
        margin-top: 0em !important; 
      }

    }

/* Main */

  #main {
    padding-top: 4em;
  }

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

      #main {
        padding-top: 2em;
      }

    }

/* Footer */

  #footer {
    padding: 8em 0 6em 0;
    background: #f6f6f6;
    color: #aaa;
    text-align: center;
  }


  

    #footer a {
      -moz-transition: color 0.2s ease-in-out;
      -webkit-transition: color 0.2s ease-in-out;
      -ms-transition: color 0.2s ease-in-out;
      transition: color 0.2s ease-in-out;
      color: #aaa;
      text-decoration: none;
    }

      #footer a:active, #footer a:hover {
        color: #111111;
      }

    #footer .icons {
      font-size: 1.5em;
    }

      #footer .icons li {
        padding-right: 2.5em;
      }

        #footer .icons li:last-child {
          padding-right: 0;
        }

    #footer .copyright {
      margin: 2em 0;
      padding: 0;
      text-align: center;
    }

      #footer .copyright li {
        border-left: solid 1px rgba(144, 144, 144, 0.25);
        display: inline-block;
        list-style: none;
        margin-left: 1.5em;
        padding-left: 1.5em;
      }

        #footer .copyright li:first-child {
          border-left: 0;
          margin-left: 0;
          padding-left: 0;
        }

    

    

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

      #banner{
        padding-bottom: 0px !important;
        padding-top: 0 !important;
      }

    }


.comment_row{
  margin-right: 0px; 
  margin-left: 0px; 
  margin:auto;
  position: absolute; 
  top:100%;
  width: 100%; 
  background-color: white;
}


/*CSS FOR OVERLAY VIDEO*/
.overlay {
  height: 95%;
  max-height: 100%;
  width: 0;
  position: absolute;
  z-index: 1;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: visible;
  transition: 0.01s;
}




.overlay-content {
    width: 100%;
    height: 100%;
}

#recorded_vid_stream{
  width: 100%;
  height: 100%;
  border-radius: 8px;
  /* background: black; */
  object-fit: cover;
}

@media screen and (max-width:650px) {
  #recorded-stream-top-div {
    padding: 8px;
  }

  #recorded_vid_stream{
    object-fit: contain;
  }
}

#recorded_vid_stream_container{
  position: relative;
  width: 100%;
  height: 70%;
  min-width: 100%;
  min-height: 300px;
  border-radius: 8px;
}

#btn-record-signup{
  display: inline-block;
  float: right;
  position: relative;
  top: 7px;
  font-weight: 800;
  background: linear-gradient(to right,#EB3275, #DD7104);
  color: white;
  text-transform: capitalize;
  border-radius: 4px;
  border: none;
  padding: 6px 20px !important;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase;
}


#btn-record-signup:hover{
  background: linear-gradient(to right,#fc4386, #ee8215);
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

#recorded_header{
  background-color:black;
  max-height: 40px;
  height: 40px;
  width:100%;
  /*position: absolute;*/
  z-index: 10000;
  display: block;
}


#recordedDiv {
  margin: auto;
  width: 100%;
  height: 100%;
}

#recordedDivParent{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  /* background-color: #031525 !important; */
  background: linear-gradient(90deg, #270b3a, #3c1242);
  overflow: auto;
}

.recordedDivOn{
  min-width: 50% !important;
}


.close_recorded{
  position: absolute;
  right:5px;
  top:5px;
  z-index: 10000;
  font-size: 28px !important;
  color: white;
}

.overlay .closebtn {
    position: absolute;
    top: -8px;
    right: 45px;
    font-size: 40px;
    z-index: 100000;
    color:white;
}

.overlay .fullbtn{
  position: absolute;
  /*top: 30px;*/
  right: 115px;
  font-size: 30px;
  z-index: 100000;
  color:white;
}



.overlay_recorded_div{
  margin-left:-25% !important;
  left:50%;
  width: 50%;
}





@media screen and (max-width: 600px) {
  .overlay_recorded_div{
    margin-left:0% !important;
    left:0%;
    width: 100% !important;
    margin: 0 !important;
    top: 0 !important;
    height: 90%;
  }

} 








#recorded-div-video-container{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  margin-top: 80px;
}

#recordedDivParent.show-upcoming #recorded-div-video-container{
  width: 70%;
}


#recorded-stream-top-div {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px;
  /* background: #031525 !important; */
  background: linear-gradient(90deg, #270b3a, #3c1242) !important;
}

#recorded-div-details-container{
  position: absolute;
  left: 70%;
  width: 30%;
  height: 100%;
  /* background: #031525 !important; */
  background: transparent !important;
  overflow-y: auto;
  padding: 20px;
  padding-top: 0;
  display: none;
  margin-top: 16px;
}

#recordedDivParent.show-upcoming #recorded-div-details-container{
  display: inline-block;
}


#recorded-button-nav{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 78px;
}

#recorded-button-nav .btn-group{
  width: 100%;
}

#recorded-button-nav .btn.btn-default{
  font-family: 'Montserrat';
  color: #fff !important;
  border-radius: 8px !important;
  background: hsla(0, 0%, 100%, 0) 0 0 no-repeat padding-box !important;
  /* border: 1px solid #fff; */
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  letter-spacing: -0.01rem;
  position: relative;
  padding: 8px 20px;
  height: auto;
  margin-right: 8px;
  margin: 0px 0px;
  width: 50%;
}

#recorded-button-nav .btn.btn-default.active{
  /* background: dodgerblue !important; */
  background: linear-gradient(45deg, #e9366d, #d77116) !important;
}

.fb_iframe_widget {
  min-height: 80vh;
  background: #031525;
}

@media screen and (max-width: 900px){
  #recordedDivParent.show-upcoming #recorded-div-video-container,
  #recordedDivParent #recorded-div-video-container {
    width: 100%;
    position: relative;
    top:0;
    left:0;
    margin-top: 0px;
    height: auto;
  }

  #recordedDivParent #recorded-div-details-container {
    width: 100%;
    position: relative;
    top:-10px;
    left:0;
  }

  #recorded_vid_stream_container {
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
    min-width: auto;
    min-height: auto;
    border-radius: 8px;
  }
}



@media screen and (max-width: 750px){
  #share-facebook, #share-twitter, #share-mail, #share-reddit, #share-copy, #share-whatsapp{
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .share, .share:before, .share:after, .fab {
    height: 40px;
    width: 40px;
  }


  /*.share {
    bottom: 65px;
  }

  .fab:nth-child(1) {
    top: -145px;
  }

  .fab:nth-child(2) {
    top: -112px;
  }

  .fab:nth-child(3) {
    top: -72px;
  }

  .fab:nth-child(4) {
    top: -32px;
  }

  .fab:nth-child(5) {
    top: 10px;
  }*/

}




@media screen and (max-height: 450px) {
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
} 


.file-text-download-span{
  cursor: pointer;
  color: dodgerblue;
}



#anotherTabModal.modal.show, #anotherTabModal.modal.in, #ctaModal.modal.show, #ctaModal.modal.in{
  z-index: 105000000000000;
  background: rgba(0,0,0,0.9);
}
  
#anotherTabModal .modal-header .close, #anotherTabModal .btn, #ctaModal .modal-header .close, #ctaModal .btn{
  cursor:pointer;
  color:#111111 !important;
}

#feedbackModel .modal-header .close {
  margin-top: -2px;
  height: 24px;
}


#anotherTabModal h5.modal-title, #ctaModal h5.modal-title{
  font-size: 20px;
  color:#111111;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  line-height: 28px;
}

#anotherTabModal .modal-body p, #ctaModal .modal-body p{
  font-size: 16px;
  color:#fff;
  font-family: "Montserrat", sans-serif;
  text-align: left;
  line-height: 24px;
}


#anotherTabModal .modal-footer button.btn, #ctaModal .modal-footer button.btn{
  font-size: 16px;
  color: #fff !important;
  background: #1e90ff;
  text-align: center;
  line-height: 24px;
  padding-left: 24px;
  padding-right: 24px;
}


#anotherTabModal .modal-footer button:hover.btn, #ctaModal .modal-footer button:hover.btn{
  transform: translateY(-0.15em);
}


#anotherTabModal .modal-body, #ctaModal .modal-body{
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  border: transparent;
  border-top: none !important;
  border-bottom: none !important;
}

#anotherTabModal .modal-footer, #ctaModal .modal-footer{
  position: relative;
  border: none;
  padding: 10px;
  padding-top: 0;
  border-top: none !important;
  border-bottom: none !important;
}


#ctaModal .modal-header{
  height: 0;
  border: none;
  border-top: none !important;
  border-bottom: none !important;
}

#ctaModal .modal-header .close{
  font-size: 32px;
  opacity: 0.6;
  position: absolute;
  right: 10px;
  padding: 0;
  height: 48px;
  z-index: 100000000;
  top: 0;
  color: white !important;
}


#cta-image{
  width: 60px;
  height: 60px;
  margin: auto;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}



#cta-presenter-header{
  color: #c0c0c0;
  text-align: center;
  font-weight: 500;font-size: 18px;
}

#cta-header-text{
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 10px;
}


#cta-link{
  display: block;
  margin: auto;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
}














#buttons.container{
        display: none;
      }

      


      .kiosk-container{
        background-image: url('/static/images/virtual_office.png');
        background-repeat: no-repeat;
        background-size: contain;
        width: 1280px;
        min-width: 1280px;
        height: 720px;
        position: relative;
        top: 0;
        left: 0;
        background-size: cover;
        font-family: "Montserrat", sans-serif;
        color: #111111;
        margin: auto;
        display: block;
      }

      /*.kiosk-container img{
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
      }*/

      .dot:before{
        content:' ';
        position: absolute;
        z-index:2;
        left:0;
        top:0;
        width:10px;
        height:10px; 
        background-color: #ff4200;
        border-radius: 50%;
        -webkit-animation-name:'alternate-show';
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-delay: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: normal;
        animation-name:'alternate-show';
        animation-duration: 3s;
        animation-timing-function: ease;
        animation-delay: 3s;
        animation-iteration-count: infinite;
        animation-direction: normal;
      }

      .dot:after {
        content:' ';
        position: absolute;
        z-index:1;
        width:10px;
        height:10px; 
        background-color: #ff4200;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
        -webkit-animation-name:'ripple';
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-delay: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: normal;
        animation-name:'ripple';
        animation-duration: 3s;
        animation-timing-function: ease;
        animation-delay: 3s;
        animation-iteration-count: infinite;
        animation-direction: normal;
      }

      @keyframes ripple {
        0% {
          left:5px;
          top:5px;
          /*opacity:75;*/
          width:0;
          height:0;
        }
        100% {
          left:-20px;
          top:-20px;
          opacity: 0;
          width:50px;
          height:50px;
        }
      }


      @keyframes alternate-show {
        0%, 25% {
          opacity: 1;
        }
        50%, 75%{
          opacity: 0;
        }
        80%,100% {
          opacity: 1;
        }
      }



      #kiosk-logo-div{
        position: absolute;
        width: 140px;
        height: 140px;
        left: 36%;
        top: 62%;
      }

      #kiosk-logo-div img{
        max-width: 100%;
        max-height: 100%;
      }


      #kiosk-room-div .dot, #kiosk-logo-div .dot, #kiosk-video-div .dot, #kiosk-schedule-div .dot, #kiosk-drop-card-div .dot, #kiosk-message-div .dot, #kiosk-resources-div .dot{
        cursor: pointer;
        position: absolute;
        left: 50%;
        top:50%;
      }


      #kiosk-room-div{
        position: absolute;
        left: 260px;
        top: 450px;
        text-align: center;
        max-width: 100px;
      }

      #kiosk-room-div h2{
        cursor: pointer;
        color: #111111;
        font-size: 16px;
        text-transform: uppercase;
        font-family: 'Montserrat';
        font-weight: 900;
        line-height: 28px;
      }



      #kiosk-video-div {
        width: 100%;
        background: black;
        overflow: hidden;
        border-radius: 8px;
        border: 8px solid #111111;
        box-shadow: 0 0 10px 0px #111111;
        position: relative;
      }


      #kiosk-message-div{
        position: absolute;
        left: 19%;
        top: 41%;
        width: 90px;
        height: 120px;
        cursor: pointer;
      }

      #kiosk-message-div span{
        position: absolute;
        bottom: -4%;
        left: 30%;
        line-height: 18px;
      }


      #kiosk-video{
        width:100%;
        height: 100%;
      }


      #kiosk-schedule-div{
        position: absolute;
        left: 61.8%;
        top: 63%;
        width: 80px;
        height: 80px;
        cursor: pointer;
        /*background: #ffffff;*/
      }


      #kiosk-schedule-div span{
        display: block;
      }

      #buttons.showScheduling{
        display: block !important;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        overflow: auto;
        z-index: 100;
      }

      .schedule-page #buttons.showScheduling{
        background: #031525 !important;
      }

      #buttons.showScheduling #row{
        box-shadow: 0px 0px 24px 2px #0f2337;
        border: 0px solid black;
        background:#0f2337;
        color: #fff;
      }


      #kiosk-drop-card-div{
        position: absolute;
        left: 32.5%;
        top: 42.2%;
        width: 64px;
        height: 100px;
        cursor: pointer;
      }


      #kiosk-poster-div-1{
        position: absolute;
        left: 0.4%;
        top: 23%;
        /* max-height: 18vh; */
        max-width: 200px;
        max-height: 300px;
        padding: 8px;
        border: 2px solid #c0c0c0;
        border-radius: 8px;
        min-width: 65px;
        min-height: 100px;
      }

      #kiosk-poster-div-2{
        position: absolute;
        right: 0.4%;
        top: 23%;
        width: 200px;
        height: 280px;
        padding: 8px;
        border: 2px solid #c0c0c0;
        border-radius: 8px;
        background: #6691e6;
        display: flex;
        align-items: center;
      }


      #kiosk-poster-div-1 img, #kiosk-poster-div-2 img{
        width: 100%;
        height: 100%;
        display: block;
        margin:auto;
      }
      

      #kiosk-drop-card-div span{
        color:#111111;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        text-align: center;
        display: block;
        line-height: 18px;
      }

      #kiosk-resources-div{
        width: 100px;
        display: block;
        left: 60vw;
        position: absolute;
        top: 75%;
      }

      #kiosk-resources-div span{
        display: block;
        margin: auto;
        margin-bottom: 35px;
      }

      #kiosk-name-div{
        position: absolute;
        text-transform: capitalize;
        font-weight: 500;
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        top: 8.7%;
        width: 100%;
        left: 0;
        text-align: center;
      }

      #kiosk-name-span{
        display: block;
        font-size: 18px;
        font-weight: 500;
      }

      #kiosk-name-tv{
        display: block;
        font-size: 14px;
        font-weight: 500;
      }


      #kiosk-rooms-div{
        width: auto;
        display: inline;
        position: absolute;
        left: 740px;
        top: 360px;
      }

      .kiosk-rooms-btn{
        color: #fff !important;
        font-family: 'Montserrat';
        text-transform: uppercase;
        font-size: 18px;
        padding: 8px 16px;
      }

      .kiosk-rooms-btn:hover{
        background: transparent !important;
      }

      #kiosk-poster-div-2 .dot-container{
        position: absolute;
        left: 0;
        top: 54%;
        height: 3px;
        width: 100%;
        display: block;
        margin: auto;
        text-align: center;
      }

      #kiosk-poster-div-2 .dot-container .dot{
        position: absolute;
        left: 0;
        top: 54%;
        height: 3px;
        width: 100%;
        display: block;
        margin: auto;
        text-align: center;
      }

      #kiosk-poster-div-2 .dot-container .dot{
        position: relative !important;
        left: 50%;
        top: 0;
        display: block;
        margin: auto;
        text-align: center;
      }

      #kiosk-poster-div-2 span{
        display: block;
        margin: auto;
        font-size: 18px;
        text-transform: uppercase;
        font-family: 'Montserrat';
        color: white;
      }

      #kiosk-rooms-div .dot{
        position: absolute;
        left: 55%;
        top: 17%;
      }

      @media only screen and (max-width: 750px){
        #kiosk-rooms-div{
          left: 340px;
          top: 172px;
        }

        #kiosk-rooms-div .kiosk-rooms-btn{
          font-size: 12px;
          padding: 6px 12px;
        }
      }


      @media only screen and (max-width : 550px) and (orientation : portrait) {
        #kiosk-rooms-div{
          left: 250px;
          top: 290px;
        }

        #kiosk-poster-div-2 span{
          font-size: 10px;
        }
      }


      @media only screen and (max-width : 500px) and (orientation : portrait) {
        #kiosk-rooms-div .kiosk-rooms-btn {
          font-size: 10px;
          padding: 4px 8px;
        }

        .admin-edit-btn {
          width: 50px;
          height: 50px;
          font-size: 20px;
        }
      }






      .modal-body{
        position: relative;
        padding: 15px;
        top: auto;
        bottom: auto;
      }

      .modal-footer {
        padding: 15px;
        text-align: right;
        border-top: 1px solid #c0c0c0;
        position: relative;
      }

      .modal-body .form-horizontal .col-sm-2,
      .modal-body .form-horizontal .col-sm-10 {
          width: 100%
      }

      .modal-body .form-horizontal .control-label {
          text-align: left;
      }
      .modal-body .form-horizontal .col-sm-offset-2 {
          margin-left: 15px;
      }

      .widget-desktop{
        display: none;
      }

      .kiosk-mode.widget-desktop{
        display: block;
      }

      .widget-desktop-open{
        display: block;
      }

      #banner{
        padding: 0;
        display: flex;
        align-items: center;
        height: 100%;
        background: #ebebeb;
      }

      @media only screen and (max-width: 768px){
        .widget-mobile.mobile {
          display: none !important;
        }

        .kiosk-mode.widget-mobile.mobile{
          display: block !important;
        }

        .widget-mobile-open.mobile {
          display: block !important;
        }
      }


      #close-schedule-div{
        position: absolute;
        color: #fff;
        margin: 0;
        padding: 0;
        right: 15px;
        top: 6px;
        font-size: 24px;
        cursor: pointer;
        display: block;
        z-index: 1000;
      }

      #close-schedule-div:hover{
        color: #fff !important;
      }

      #dropCardModal.modal.fade.in{
        background: rgba(0, 0, 0, 0.4) !important;
      }

      #dropCardModal .modal-content{
        box-shadow: 0 0px 12px 3px rgba(0,0,0,1);
      }

      #dropCardModal .close-btn{
        display: inline-block;
        background: transparent;
        float: right;
        width: auto;
        height: auto;
        padding: 0;
        position: relative;
        top: 0px;
        font-size: 18px;
        outline: none;
      }

      #dropCardModal .close-btn:hover{
        color: #022738 !important;
      }

      #dropCardModal .modal-body {
        position: relative;
        padding: 15px;
        top: auto;
        bottom: auto;
        border-bottom: 0;
        padding-bottom: 0;
      }

      #dropCardModal .modal-footer {
        padding: 15px;
        text-align: right;
        border-top: none;
        position: relative;
        padding-top: 0;
      }

      #dropCardModal .modal-title, #dropCardModal label{
        font-family: 'Montserrat', sans-serif;
        color: #fff;
      }

      #dropCardModal .form-group input{
        font-family: "Montserrat", sans-serif;
        color: #111111;
        background-color: #ebebeb !important;
      }

      #dropCardModal .modal-footer button{
        font-family: "Montserrat", sans-serif;
        margin-right: 30px;
      }


      #dropCardModal form{
        padding-left: 30px;
        padding-right: 30px;
      }



      #dropCardModal form .form-group{
        margin-bottom: 20px;
      }


      #kiosk-powered-div{
        position: absolute;
        left: 0;
        bottom: 30px;
        z-index: 100;
        width: 100%;
        color: #111111;
        height: 0;
        font-size: 14px;
      }

      #kiosk-powered-div a{
        color: white;
        /*text-decoration: underline;*/
        font-family: 'Montserrat', sans-serif;
        text-shadow: 1px 1px black;
        height: 24px;
      }


      @media (max-width: 750px){
        .kiosk-container{
          width: 400px;
          min-width: 400px;
          height: 466px;
          background-image: url('/static/images/virtual-office-m.png');
        }

        .kiosk-container.showScheduling{
          width: 100%;
          min-width: 100%;
          min-height: 466px;
          height: auto;
        }

        #mobile-kiosk-div{
          position: absolute;
          left: 0;
          width: 100%;
          display: inline-flex !important;
          top: 0;
          top: calc( 466px + (100% - 466px)/2 );
          height: calc( ( 100% - 466px )/2 );
          align-items: center;
          min-height: 45px;
        }

        #kiosk-powered-div{
          bottom: 48px;
        }

        #kiosk-message-div{
          position: absolute;
          left: 13.5%;
          top: 59%;
          width: 40px;
          height: 40px;
        }

        #kiosk-logo-div {
          position: absolute;
          width: 60px;
          height: 60px;
          left: 32%;
          top: 75%;
        }


        #kiosk-poster-div-1, #kiosk-poster-div-2{
          top: 38%;
          max-width: 60px;
          max-height: 80px;
          padding: 4px;
          border: 2px solid #c0c0c0;
          border-radius: 8px;
        }

        /* #kiosk-video-div {
          position: absolute;
          left: 22.5%;
          top: 16.5%;
          width: 222px;
          height: 115px;
          background: black;
          overflow: hidden;
          border-radius: 8px;
          border: 8px solid #111111;
          box-shadow: 0 0 10px 0px #111111;
        } */


        #kiosk-drop-card-div{
          left: 25.5%;
          top: 40.2%;
        }

        #kiosk-schedule-div {
          position: absolute;
          left: 57.8%;
          top: 65%;
          width: 80px;
          height: 80px;
        }

        #kiosk-name-span {
          display: block;
          font-size: 12px;
          font-weight: 500;
          padding-top: 6px;
        }
      }



      #kiosk-poster-div-1.active-poster, #kiosk-poster-div-2.active-poster{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        background-color: #111111;
        z-index: 100;
      }

      #kiosk-poster-div-1.active-poster img, #kiosk-poster-div-2.active-poster img{
        object-fit: contain;
      }


      .minimize-poster-btn{
        display: none;
      }

      .active-poster .minimize-poster-btn{
        display: block;
        position: absolute;
        right:4px;
        top:4px;
        font-size: 16px;
        border:none;
        outline: none;
        box-shadow: none;
        z-index: 1000;
        background: black;
        border-radius: 50%;
        padding: 0;
        height: 36px;
        padding: 0;
      }

      .minimize-poster-btn i{
        font-size: 36px;
      }


      @media only screen and (max-width : 750px) and (orientation : landscape) {
        .kiosk-container{
          width: 640px;
          min-width: 640px;
          height: 310px;
          background-image: url('/static/images/virtual_office.png');
        }

        #mobile-kiosk-div{
          position: absolute;
          left: 0;
          width: 100%;
          display: inline-flex !important;
          top:100%;
          height: calc( ( 100% - 466px )/2 );
          align-items: center;
          min-height: 45px;
        }


        #kiosk-poster-div-1, #kiosk-poster-div-2 {
          top: 26%;
          max-width: 100px;
          max-height: 140px;
        }

        /* #kiosk-video-div {
          position: absolute;
          left: 40.5%;
          top: 18.5%;
          width: 140px;
          height: 70px;
          background: black;
          overflow: hidden;
          border-radius: 8px;
          border: 8px solid #111111;
          box-shadow: 0 0 10px 0px #111111;
        } */

        #kiosk-logo-div {
          position: absolute;
          width: 82px;
          height: 82px;
          left: 34%;
          top: 72%;
        }

        #kiosk-message-div {
          position: absolute;
          left: 18.5%;
          top: 52%;
          width: 40px;
          height: 40px;
        }

        #kiosk-drop-card-div {
          left: 29.5%;
          top: 41.2%;
        }

        #kiosk-schedule-div {
          position: absolute;
          left: 57.8%;
          top: 71%;
        }

        #dropCardModal .modal-dialog{
          margin-top: 40px;
        }

        #summary-container, #schedule-container{
          padding: 0 40px;
        }
      }


      @media screen and (max-width: 500px){
        #scheduling-container.box-container {
          padding: 0px !important;
        }

        #buttons #schedule-container{
          padding: 0 18px;
        }
      }


     
      #mobile-kiosk-div .row {
        display: inline-flex;
        overflow-x: scroll;
        width: 100%;
      }


      .kiosk-theme-cryola-btn{
        background: #c6d6f3 !important;
        color: #111111 !important;
        margin-right: 3px;
        margin-left: 3px;
        padding: 4px 8px !important;
        font-size: 10px !important;
        font-family: 'Montserrat', sans-serif;
        line-height: 11px !important;
        min-width: 23.1%;
        white-space: initial !important;
      }


      .no_brochure .kiosk-theme-cryola-btn{
        min-width: 31.5vw;
      }
    
      #kiosk-no-recorded-stream {
        display: none;
        width: 100%;
        height: 100%;
        color: white;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        padding-top: 13%;
        padding-bottom: 13%;
      }

      #kiosk-no-sound-recorded-stream{
        display: none;
        width: 100%;
        height: 100%;
        color: white;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        background: rgba(0,0,0,0.3);
        position: absolute;
        z-index: 100;
        text-transform: uppercase;
        cursor: pointer;
        left: 0;
        top: 0;
      }

      #kiosk-no-sound-recorded-stream span{
        display: block;
        width: 100%;
        text-align: center;
        margin:auto;
      }

      #kiosk-no-sound-recorded-stream.show{
        display: inline-flex !important;
        align-items: center;
      }

      .no_video #kiosk-no-recorded-stream{
        display: block;
      }

      .no_video #kiosk-video, .no_video #kiosk-no-sound-recorded-stream{
        display: none;
      } 






.input-chat-select-div{
  position: absolute;
  left: 0;
  bottom: 36px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  /* background: #111111; */
  background: transparent;
  z-index: 100;
  padding: 4px 0;
}

.input-chat-select-div label{
  color: #fff;
  margin: 0px 8px 0 16px;
  font-size: 12px;
}

.input-chat-select-div select{
  color: #111111 !important;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  font-size: 12px;
  background: #c0c0c0 !important;
  width: 100px;
  text-transform: capitalize;
  height: 20px !important;
  padding: 0 4px;
}

.input-chat-select-div button.dropdown-toggle{
  font-size: 12px;
  outline: none !important;
}

.private_from_label{
  position: absolute;
  top: -10px;
  background: white;
  font-size: 10px;
  color: #e01a0a;
  padding: 2px 8px;
  border-radius: 4px;
  left: 0;
  text-transform: capitalize;
  font-weight: 500;
}


.private_span{
  text-transform: capitalize;
  font-size: 10px;
  color: red;
  white-space: nowrap;
  overflow: auto;
}


.nice-select .list{
  height: 0
}


.nice-select.open .list{
  height: initial;
} 


#emoji-picker-comments.show{
  z-index: 1000;
}


@media only screen and (max-width: 950px) {
  .input-chat-select-div {
    top: 36px;
    bottom: auto;
  }

  #dock_comments_container {
    top: 80px;
  }

  #dock_questions_container{
    top: 40px;
    height: calc(100% - 45px);
  }

  .footer-emoji-btns-div {
    /*position: absolute;
    top: 36px;
    bottom: auto;
    left: 0;
    width: 100vw;
    z-index: 10000;
    height: 60vh;*/
    top: 0px;
    width: 33px;
  }


  #emoji-picker-comments.show{
    min-width: 300px;
  }
}








.admin-edit-btn {
  position: absolute;
  width: 60px;
  display: block;
  text-align: center;
  padding: 0;
  height: 60px;
  border: 1px solid white;
  color: white !important;
  background: #e01a0a !important;
  right: 0;
  top: 0;
  font-size: 24px;
}

.admin-edit-btn span{
  display: block;
  font-size: 12px;
  padding: 0;
  margin: auto;
  position: relative;
  bottom: 8px;
  font-family: 'MONTSERRAT', sans-serif;
}


.admin-edit-btn:hover{
  color: #e01a0a !important;
  background: white !important;
}


.active-poster .admin-edit-btn{
  display: none;
}



.foia-donate-btn{    
  display: block !important;
  margin: auto !important;
  text-align: center;
  width: max-content;
  text-transform: uppercase;
  background-color: #1e90ff !important;
  font-weight: bold;
  padding: 8px 24px !important;
  color: white !important;
  margin-top: 20px !important;
}


.foia-donate-btn:hover{    
  background-color: #0d80ee !important;
}



#foia-donate-live-btn{
  padding: 12px 18px !important;
  max-width: 150px;
  float: right;
  margin-right: 4px;
  align-items: center;
  background: #1e90ff !important;
  border-color: #1e90ff !important;
  display: none;
}


#cta-recorded-btn{
  align-items: center;
  border: none !important;
  display: inline-block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 8px;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  border-radius: 8px;
  font-size: 14px;
  background: #ff554d !important;
  padding: 10px 20px !important;
}

#cta-recorded-btn:hover, #foia-donate-live-btn:hover{
  background: #0d80ee !important;
  border-color: #0d80ee !important;
}




.selected .stream-dock-label-span{
  padding: 0px 12px;
  /* background-color: #1e90ff; */
  background: linear-gradient(to right, #EB3275, #DD7104);
  color: white;
  font-weight: bold;
  border-radius: 12px;
  height: 24px;
  display: flex;
  align-items: center;
  position: relative;
  bottom: 2px;
  text-align: center;
  display: flex;
  justify-content: center;
}






#add-to-calendar-btn {
  background: #f5f5f5 !important;
  border: 1px solid #fff !important;
  border-radius: 6px;
  -webkit-box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 40%);
  box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 40%);
  color: #222 !important;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 10px auto;
  max-width: 300px;
  min-width: 150px;
  padding: 10px 16px 11px 16px;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: 180px;
  outline: none !important;
}

#add-to-calendar-div{
  width: 180px;
  margin: auto;
  margin-top: 12px;
}

#add-to-calendar-div:hover .dropdown-menu{
  display: block !important;
}

#add-to-calendar-div .dropdown-menu{
  display: block;
}

.add-cal-item-icon svg{
  width: 16px;
  margin-right: 4px;
  display: inline-block;
  height: 16px;
  padding: 0;
  object-fit: contain;
}

#add-to-calendar-div .dropdown-menu, #add-to-calendar-div .dropdown-menu li{
  padding: 0;
  width: 100%;
}

#add-to-calendar-div .dropdown-menu li a{
  padding: 8px;
  border-bottom: 1px solid lightgray;
  text-align: left;
  display: inline-flex;
  align-items: center;
  width: 100%;
}



.branded_webinar #live-container{
  width: 80%;
  height: calc(100% - 140px);
  position: relative;
  left: 10%;
  top: 70px;
  border-radius: 8px;
  /* overflow: hidden; */
  background-color: black;
}

.branded_webinar .oncall-logo{
  display: none !important;
}

.branded_webinar .live-stream-description{
  position: absolute;
  bottom: 0;
  top: auto;
  height: 70px;
  display: inline-flex;
  max-width: 70%;
  left: 15%;
}

#left-branded-img{
  position: absolute;
  left: 10%;
  top: 0;
  z-index: 10;
  max-width: 100px;
  display: none;
  height: 70px;
  object-fit: contain;
}

#right-branded-img{
  position: absolute;
  right: 10%;
  top: 0;
  z-index: 10;
  max-width: 100px;
  display: none;
  height: 70px;
  object-fit: contain;
}

#left-branded-img.show-branded-img, #right-branded-img.show-branded-img{
  display: block;
}


@media (max-width: 768px){
  .branded_webinar #live-container{
    width: 90%;
    height: calc(100% - 120px);
    position: relative;
    left: 5%;
    top: 60px;
  }

  #left-branded-img{
    left: 5%;
    top: 3px;
    height: 54px;
  }

  #right-branded-img{
    right: 5%;
    top: 3px;
    height: 54px;
  }

  .branded_webinar .live-stream-description{
    position: absolute;
    bottom: 0;
    top: auto;
    height: 60px;
    display: inline-flex;
    max-width: 90%;
    left: 5%;
    z-index: 0;
  }
}


.branded_webinar .group_participants_2 .participant_divs,
.branded_webinar .group_participants_3 .participant_divs,
.branded_webinar .group_participants_4 .participant_divs,
.branded_webinar .group_participants_5 .participant_divs,
.branded_webinar .group_participants_6 .participant_divs,
.branded_webinar .group_participants_7 .participant_divs,
.branded_webinar .group_participants_8 .participant_divs,
.branded_webinar .group_participants_9 .participant_divs,
.branded_webinar .group_participants_10 .participant_divs,
.branded_webinar .group_participants_11 .participant_divs,
.branded_webinar .group_participants_12 .participant_divs,
.branded_webinar .group_participants_13 .participant_divs,
.branded_webinar .group_participants_14 .participant_divs,
.branded_webinar .group_participants_15 .participant_divs,
.branded_webinar .group_participants_16 .participant_divs,
.branded_webinar .group_participants_17 .participant_divs,
.branded_webinar .group_participants_18 .participant_divs{
  padding: 0 !important;
  background-color: #000000;
}


.welcome-back-viewer-div{
  padding: 8px;
  border-radius: 8px;
}

.welcome-back-viewer-div label{
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  margin-top: 20px;
  text-align: center;
}


.welcome-back-viewer-div button{
  font-size: 18px;
  font-weight: 500;
  margin: 10px 0 20px 0;
}




#theme-select-div{
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: none;
}

.multiple_participants #theme-select-div{
  display: block;
}

#theme-select-div{
  display: none !important;
}

#theme-select-div .btn.dropdown-toggle.btn-default{
  color: #000 !important;
  padding: 0px;
  min-width: 120px;
  outline: none !important;
}

.bootstrap-select .dropdown-menu li {
  position: relative;
  padding-left: 0;
}

#videos-container-div{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  background: linear-gradient(90deg, #270b3a, #3c1242);
}


.multiple_participants.speaker-view #videos-container-div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  position: relative;
}

.multiple_participants.speaker-view #videos-container-div .participant_divs{
  width: 80px !important;
  height: 80px !important;
  left: 0 !important;
  top: 0 !important;
  display: inline-block !important;
  position: relative !important;
  padding: 4px !important;
  z-index: 1 !important;
}

.multiple_participants.speaker-view #videos-container-div .participant_divs.current-speaker{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
}

.branded_webinar.multiple_participants.speaker-view #videos-container-div .participant_divs.current-speaker {
  z-index: 0 !important;
}

#theme-select-div .dropdown-menu.open{
  z-index: 9999999;
}


#ongroupcall-row{
  position: fixed;
  width: 100vw;
  height: 60px;
  bottom: 0;
  margin: 0;
  left: 0;
  z-index: 1000;
  background-color: #f8f9fa;
  display: none;
  transform: translateY(0);
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  box-shadow: 0px 3px 5px 3px rgb(0 0 0 / 50%);
}

#ongroupcall-row.closed{ 
  transform: translateY(100%);
}

#ongroupcall-row .col-4{
  padding: 0;
}

#ongroupcall-row .hover-element:hover{
  background-color: #eeeeee;
}


#ongroupcall-row button{
  border: none;
  background: transparent;
  font-size: 24px;
  outline: none !important;
  box-shadow: none;
  white-space: nowrap;
  padding: 0;
  color: #67748e;
  /* box-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.2),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.15)!important; */
  border-radius: 8px !important;
  /* box-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07)!important; */
  box-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.2),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.2)!important;
  background: #fff !important;
  padding: 0 4px !important;
  width: 70px !important;
  border-radius: 4px !important;
  height: 54px;
  margin-top: 3px;
}


#ongroupcall-row .dock_section_div{
  display: flex;
  align-items: center;
  justify-content: space-around;
}


#ongroupcall-row button svg{
  width: 24px;
}

#ongroupcall-row button svg, #ongroupcall-row button svg path, #ongroupcall-row button i{
  color: #777777;
  fill:#777777;
}


#ongroupcall-row #leaveRoom{
  margin-top: 4px !important;
  border: none;
  background: transparent !important;
  outline: none !important;
  margin: auto;
  height: 54px;
  box-shadow: none !important;
}


#ongroupcall-row #leaveRoom i{
  transform: rotate(134deg);
  color: red;
  font-size: 28px;
}

#ongroupcall-row button span{
  font-size: 11px;
  color: #67748e;
  margin: auto;
  display: block;
  padding-top: 2px;
}


#toggleCameraImg .dock-cam-off, #toggleCameraImg .off{
  display: none;
}

#toggleCameraImg.inactive .dock-cam-off, #toggleCameraImg.inactive .off{
  display: block;
  margin: auto;
}

#toggleCameraImg.inactive .dock-cam-on, #toggleCameraImg.inactive .on{
  display: none;
}


#toggleCameraImg svg{
  min-height:32px;
}



#audioToggle .dock-mic-off, #audioToggle .off{
  display: none;
}

#audioToggle.inactive .dock-mic-off, #audioToggle.inactive .off{
  display: block;
  margin: auto;
}

#audioToggle.inactive .dock-mic-on, #audioToggle.inactive .on{
  display: none;
}


.group-top-dock-btns {
  position: fixed;
  right: 4px;
  bottom: 70px;
  z-index: 1;
}

#coBrowsingDockBtn {
  border: none;
  color:#777777 !important;
  font-size: 14px;
  outline: none !important;
  box-shadow: none;
  white-space: nowrap;
  padding: 2px 8px;
  background: #f8f9fa;
  border-radius: 4px;
  min-width: 120px;
  display: block;
}


.form-control.extra-register-field{
  background-color: #ffffff !important;
  color:black !important;
}



.filter-option-inner-inner{
  color: black;
  height: 38px;
  display: flex;
  width: 100%;
  align-items: center;
  padding-left: 8px;
}

.extra-register-field .dropdown-toggle{
  padding: 0;
  height: 38px;
}






#webinar-scheduled-div .wrapper-div {
  height: 100%;
  background: rgba(0,0,0,0.05);
}

#register-webinar-container-div{
  position: relative;
  height: 100%;
  background: #171a23;
}

#register-webinar-vidphone-logo-div{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 78px;
  background: black;
  padding: 12px 0 0 20px;
}

#webinar-register-top-div{
  position: absolute;
  left: 0;
  top: 78px;
  width: 100%;
  background: #1d1c23;
  border: none;
  box-shadow: none;
  height: calc(100% - 78px);
  padding-left: 0;
  overflow: scroll;
  padding-top: 60px;
  padding-bottom: 60px;
}

#webinar-register-top-div .webinar_img_container {
  box-shadow: none;
}

#webinar-register-top-div-container{
  width: 85%;
  margin: auto;
}

#webinar-register-top-hero{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#webinar-register-top-div #webinar_img {
  max-width: 100%;
  display: block;
  margin: auto;
  width: 100%;
  max-height: calc(100vh - 78px);
  padding: 0px;
  object-fit: contain;
  border-radius: 8px;
}

#webinar-register-top-hero .webinar_img_container{
  width: 60%;
}

#webinar-register-top-hero #webinar-register-hero{
  width: 40%;
  background: #302e39;
  max-width: 400px;
  display: table-footer-group;
  border-radius: 8px;
  margin: 0 40px;
  padding: 24px;
}

#left-side-webinar-register-div{
  position: absolute;
  left:0;
  top:78px;
  width: 60%;
  height: calc(100% - 78px);
  overflow-y: auto;
  padding:20px;
  background: #fafafa;
}

#right-side-webinar-register-div{
  position: absolute;
  left:60%;
  top:78px;
  width: 40%;
  height: calc(100% - 78px);
  overflow-y: auto;
  padding:20px;
  background: #fafafa;
}







#left-side-webinar-register-div::-webkit-scrollbar, #right-side-webinar-register-div::-webkit-scrollbar {
  display: block !important;
  height: 100%;
  box-shadow: none;
  max-height: 100%;
  background: transparent !important;
  box-shadow: none !important;
  width: 20px;
  min-width: 20px;
}

#left-side-webinar-register-div::-webkit-scrollbar-track, #right-side-webinar-register-div::-webkit-scrollbar-track{
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-radius: 10px;
  background-color: transparent !important;
}

#left-side-webinar-register-div::-webkit-scrollbar-button, #right-side-webinar-register-div::-webkit-scrollbar-button {
  display: block;
  height: 100%;
}

#left-side-webinar-register-div::-webkit-scrollbar-button, #right-side-webinar-register-div::-webkit-scrollbar-button{
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
}


#left-side-webinar-register-div::-webkit-scrollbar-thumb, #right-side-webinar-register-div::-webkit-scrollbar-thumb {
  display: none;
}

#left-side-webinar-register-div:hover::-webkit-scrollbar-thumb, #right-side-webinar-register-div:hover::-webkit-scrollbar-thumb {
  background-color: #dadada;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  box-shadow: none;
  display: block;
}

#webinar_img {
  max-width: 100%;
  display: block;
  margin: auto;
  width: 100%;
  max-height: calc(100vh - 78px);
  padding: 0px;
  object-fit: contain;
}


#register-now-lable{
  display: block;
  text-align:center;
  color:#fff;
  text-transform: capitalize;
  font-family: 'Montserrat';
  font-weight: 400;
}


.schedule-subtitle-div{
  display: inline-block;
}

.register-webinar-side-container{
  background: #fff;
  padding: 16px;
}

@media (max-width:900px){
  #left-side-webinar-register-div{
    width: 50%;
  }

  #right-side-webinar-register-div{
    left:50%;
    width: 50%;
  }

  .register-webinar-side-container{
    padding: 8px;
  }
}

@media (max-width:650px){
  #register-webinar-vidphone-logo-div {
    position: relative;
  }

  #left-side-webinar-register-div{
    left: 0%;
    width: 100%;
    position: relative;
    top: 0;
    height: fit-content;
  }

  #right-side-webinar-register-div{
    left: 0%;
    width: 100%;
    position: relative;
    top: 0;
    height: fit-content;
  }
}

#right-side-webinar-register-div .panel, .register-webinar-side-container{
  /* box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 50%); */
  border-radius: 8px;
  background: #fff;
}


.extra-registration-field.bootstrap-select>.dropdown-toggle{
  padding-top: 0;
}






.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 0.75rem !important;
}

.m-4 {
  margin: 1rem !important;
}

.m-5 {
  margin: 1.25rem !important;
}

.m-6 {
  margin: 1.5rem !important;
}

.m-7 {
  margin: 1.75rem !important;
}

.m-8 {
  margin: 2rem !important;
}

.m-9 {
  margin: 2.25rem !important;
}

.m-10 {
  margin: 2.5rem !important;
}

.m-11 {
  margin: 3rem !important;
}

.m-12 {
  margin: 3.5rem !important;
}

.m-13 {
  margin: 4rem !important;
}

.m-14 {
  margin: 4.5rem !important;
}

.m-15 {
  margin: 5rem !important;
}

.m-16 {
  margin: 6rem !important;
}

.m-17 {
  margin: 7rem !important;
}

.m-18 {
  margin: 8rem !important;
}

.m-19 {
  margin: 9rem !important;
}

.m-20 {
  margin: 10rem !important;
}

.m-21 {
  margin: 12.5rem !important;
}

.m-22 {
  margin: 15rem !important;
}

.m-23 {
  margin: 17.5rem !important;
}

.m-24 {
  margin: 20rem !important;
}

.m-25 {
  margin: 22.5rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 0.75rem !important;
  margin-left: 0.75rem !important;
}

.mx-4 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-5 {
  margin-right: 1.25rem !important;
  margin-left: 1.25rem !important;
}

.mx-6 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-7 {
  margin-right: 1.75rem !important;
  margin-left: 1.75rem !important;
}

.mx-8 {
  margin-right: 2rem !important;
  margin-left: 2rem !important;
}

.mx-9 {
  margin-right: 2.25rem !important;
  margin-left: 2.25rem !important;
}

.mx-10 {
  margin-right: 2.5rem !important;
  margin-left: 2.5rem !important;
}

.mx-11 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-12 {
  margin-right: 3.5rem !important;
  margin-left: 3.5rem !important;
}

.mx-13 {
  margin-right: 4rem !important;
  margin-left: 4rem !important;
}

.mx-14 {
  margin-right: 4.5rem !important;
  margin-left: 4.5rem !important;
}

.mx-15 {
  margin-right: 5rem !important;
  margin-left: 5rem !important;
}

.mx-16 {
  margin-right: 6rem !important;
  margin-left: 6rem !important;
}

.mx-17 {
  margin-right: 7rem !important;
  margin-left: 7rem !important;
}

.mx-18 {
  margin-right: 8rem !important;
  margin-left: 8rem !important;
}

.mx-19 {
  margin-right: 9rem !important;
  margin-left: 9rem !important;
}

.mx-20 {
  margin-right: 10rem !important;
  margin-left: 10rem !important;
}

.mx-21 {
  margin-right: 12.5rem !important;
  margin-left: 12.5rem !important;
}

.mx-22 {
  margin-right: 15rem !important;
  margin-left: 15rem !important;
}

.mx-23 {
  margin-right: 17.5rem !important;
  margin-left: 17.5rem !important;
}

.mx-24 {
  margin-right: 20rem !important;
  margin-left: 20rem !important;
}

.mx-25 {
  margin-right: 22.5rem !important;
  margin-left: 22.5rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-5 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.my-6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-7 {
  margin-top: 1.75rem !important;
  margin-bottom: 1.75rem !important;
}

.my-8 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.my-9 {
  margin-top: 2.25rem !important;
  margin-bottom: 2.25rem !important;
}

.my-10 {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

.my-11 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-12 {
  margin-top: 3.5rem !important;
  margin-bottom: 3.5rem !important;
}

.my-13 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.my-14 {
  margin-top: 4.5rem !important;
  margin-bottom: 4.5rem !important;
}

.my-15 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.my-16 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.my-17 {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}

.my-18 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}

.my-19 {
  margin-top: 9rem !important;
  margin-bottom: 9rem !important;
}

.my-20 {
  margin-top: 10rem !important;
  margin-bottom: 10rem !important;
}

.my-21 {
  margin-top: 12.5rem !important;
  margin-bottom: 12.5rem !important;
}

.my-22 {
  margin-top: 15rem !important;
  margin-bottom: 15rem !important;
}

.my-23 {
  margin-top: 17.5rem !important;
  margin-bottom: 17.5rem !important;
}

.my-24 {
  margin-top: 20rem !important;
  margin-bottom: 20rem !important;
}

.my-25 {
  margin-top: 22.5rem !important;
  margin-bottom: 22.5rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mt-5 {
  margin-top: 1.25rem !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.mt-7 {
  margin-top: 1.75rem !important;
}

.mt-8 {
  margin-top: 2rem !important;
}

.mt-9 {
  margin-top: 2.25rem !important;
}

.mt-10 {
  margin-top: 2.5rem !important;
}

.mt-11 {
  margin-top: 3rem !important;
}

.mt-12 {
  margin-top: 3.5rem !important;
}

.mt-13 {
  margin-top: 4rem !important;
}

.mt-14 {
  margin-top: 4.5rem !important;
}

.mt-15 {
  margin-top: 5rem !important;
}

.mt-16 {
  margin-top: 6rem !important;
}

.mt-17 {
  margin-top: 7rem !important;
}

.mt-18 {
  margin-top: 8rem !important;
}

.mt-19 {
  margin-top: 9rem !important;
}

.mt-20 {
  margin-top: 10rem !important;
}

.mt-21 {
  margin-top: 12.5rem !important;
}

.mt-22 {
  margin-top: 15rem !important;
}

.mt-23 {
  margin-top: 17.5rem !important;
}

.mt-24 {
  margin-top: 20rem !important;
}

.mt-25 {
  margin-top: 22.5rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 0.75rem !important;
}

.me-4 {
  margin-right: 1rem !important;
}

.me-5 {
  margin-right: 1.25rem !important;
}

.me-6 {
  margin-right: 1.5rem !important;
}

.me-7 {
  margin-right: 1.75rem !important;
}

.me-8 {
  margin-right: 2rem !important;
}

.me-9 {
  margin-right: 2.25rem !important;
}

.me-10 {
  margin-right: 2.5rem !important;
}

.me-11 {
  margin-right: 3rem !important;
}

.me-12 {
  margin-right: 3.5rem !important;
}

.me-13 {
  margin-right: 4rem !important;
}

.me-14 {
  margin-right: 4.5rem !important;
}

.me-15 {
  margin-right: 5rem !important;
}

.me-16 {
  margin-right: 6rem !important;
}

.me-17 {
  margin-right: 7rem !important;
}

.me-18 {
  margin-right: 8rem !important;
}

.me-19 {
  margin-right: 9rem !important;
}

.me-20 {
  margin-right: 10rem !important;
}

.me-21 {
  margin-right: 12.5rem !important;
}

.me-22 {
  margin-right: 15rem !important;
}

.me-23 {
  margin-right: 17.5rem !important;
}

.me-24 {
  margin-right: 20rem !important;
}

.me-25 {
  margin-right: 22.5rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mb-5 {
  margin-bottom: 1.25rem !important;
}

.mb-6 {
  margin-bottom: 1.5rem !important;
}

.mb-7 {
  margin-bottom: 1.75rem !important;
}

.mb-8 {
  margin-bottom: 2rem !important;
}

.mb-9 {
  margin-bottom: 2.25rem !important;
}

.mb-10 {
  margin-bottom: 2.5rem !important;
}

.mb-11 {
  margin-bottom: 3rem !important;
}

.mb-12 {
  margin-bottom: 3.5rem !important;
}

.mb-13 {
  margin-bottom: 4rem !important;
}

.mb-14 {
  margin-bottom: 4.5rem !important;
}

.mb-15 {
  margin-bottom: 5rem !important;
}

.mb-16 {
  margin-bottom: 6rem !important;
}

.mb-17 {
  margin-bottom: 7rem !important;
}

.mb-18 {
  margin-bottom: 8rem !important;
}

.mb-19 {
  margin-bottom: 9rem !important;
}

.mb-20 {
  margin-bottom: 10rem !important;
}

.mb-21 {
  margin-bottom: 12.5rem !important;
}

.mb-22 {
  margin-bottom: 15rem !important;
}

.mb-23 {
  margin-bottom: 17.5rem !important;
}

.mb-24 {
  margin-bottom: 20rem !important;
}

.mb-25 {
  margin-bottom: 22.5rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 0.75rem !important;
}

.ms-4 {
  margin-left: 1rem !important;
}

.ms-5 {
  margin-left: 1.25rem !important;
}

.ms-6 {
  margin-left: 1.5rem !important;
}

.ms-7 {
  margin-left: 1.75rem !important;
}

.ms-8 {
  margin-left: 2rem !important;
}

.ms-9 {
  margin-left: 2.25rem !important;
}

.ms-10 {
  margin-left: 2.5rem !important;
}

.ms-11 {
  margin-left: 3rem !important;
}

.ms-12 {
  margin-left: 3.5rem !important;
}

.ms-13 {
  margin-left: 4rem !important;
}

.ms-14 {
  margin-left: 4.5rem !important;
}

.ms-15 {
  margin-left: 5rem !important;
}

.ms-16 {
  margin-left: 6rem !important;
}

.ms-17 {
  margin-left: 7rem !important;
}

.ms-18 {
  margin-left: 8rem !important;
}

.ms-19 {
  margin-left: 9rem !important;
}

.ms-20 {
  margin-left: 10rem !important;
}

.ms-21 {
  margin-left: 12.5rem !important;
}

.ms-22 {
  margin-left: 15rem !important;
}

.ms-23 {
  margin-left: 17.5rem !important;
}

.ms-24 {
  margin-left: 20rem !important;
}

.ms-25 {
  margin-left: 22.5rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.m-n3 {
  margin: -0.75rem !important;
}

.m-n4 {
  margin: -1rem !important;
}

.m-n5 {
  margin: -1.25rem !important;
}

.m-n6 {
  margin: -1.5rem !important;
}

.m-n7 {
  margin: -1.75rem !important;
}

.m-n8 {
  margin: -2rem !important;
}

.m-n9 {
  margin: -2.25rem !important;
}

.m-n10 {
  margin: -2.5rem !important;
}

.m-n11 {
  margin: -3rem !important;
}

.m-n12 {
  margin: -3.5rem !important;
}

.m-n13 {
  margin: -4rem !important;
}

.m-n14 {
  margin: -4.5rem !important;
}

.m-n15 {
  margin: -5rem !important;
}

.m-n16 {
  margin: -6rem !important;
}

.m-n17 {
  margin: -7rem !important;
}

.m-n18 {
  margin: -8rem !important;
}

.m-n19 {
  margin: -9rem !important;
}

.m-n20 {
  margin: -10rem !important;
}

.m-n21 {
  margin: -12.5rem !important;
}

.m-n22 {
  margin: -15rem !important;
}

.m-n23 {
  margin: -17.5rem !important;
}

.m-n24 {
  margin: -20rem !important;
}

.m-n25 {
  margin: -22.5rem !important;
}

.mx-n1 {
  margin-right: -0.25rem !important;
  margin-left: -0.25rem !important;
}

.mx-n2 {
  margin-right: -0.5rem !important;
  margin-left: -0.5rem !important;
}

.mx-n3 {
  margin-right: -0.75rem !important;
  margin-left: -0.75rem !important;
}

.mx-n4 {
  margin-right: -1rem !important;
  margin-left: -1rem !important;
}

.mx-n5 {
  margin-right: -1.25rem !important;
  margin-left: -1.25rem !important;
}

.mx-n6 {
  margin-right: -1.5rem !important;
  margin-left: -1.5rem !important;
}

.mx-n7 {
  margin-right: -1.75rem !important;
  margin-left: -1.75rem !important;
}

.mx-n8 {
  margin-right: -2rem !important;
  margin-left: -2rem !important;
}

.mx-n9 {
  margin-right: -2.25rem !important;
  margin-left: -2.25rem !important;
}

.mx-n10 {
  margin-right: -2.5rem !important;
  margin-left: -2.5rem !important;
}

.mx-n11 {
  margin-right: -3rem !important;
  margin-left: -3rem !important;
}

.mx-n12 {
  margin-right: -3.5rem !important;
  margin-left: -3.5rem !important;
}

.mx-n13 {
  margin-right: -4rem !important;
  margin-left: -4rem !important;
}

.mx-n14 {
  margin-right: -4.5rem !important;
  margin-left: -4.5rem !important;
}

.mx-n15 {
  margin-right: -5rem !important;
  margin-left: -5rem !important;
}

.mx-n16 {
  margin-right: -6rem !important;
  margin-left: -6rem !important;
}

.mx-n17 {
  margin-right: -7rem !important;
  margin-left: -7rem !important;
}

.mx-n18 {
  margin-right: -8rem !important;
  margin-left: -8rem !important;
}

.mx-n19 {
  margin-right: -9rem !important;
  margin-left: -9rem !important;
}

.mx-n20 {
  margin-right: -10rem !important;
  margin-left: -10rem !important;
}

.mx-n21 {
  margin-right: -12.5rem !important;
  margin-left: -12.5rem !important;
}

.mx-n22 {
  margin-right: -15rem !important;
  margin-left: -15rem !important;
}

.mx-n23 {
  margin-right: -17.5rem !important;
  margin-left: -17.5rem !important;
}

.mx-n24 {
  margin-right: -20rem !important;
  margin-left: -20rem !important;
}

.mx-n25 {
  margin-right: -22.5rem !important;
  margin-left: -22.5rem !important;
}

.my-n1 {
  margin-top: -0.25rem !important;
  margin-bottom: -0.25rem !important;
}

.my-n2 {
  margin-top: -0.5rem !important;
  margin-bottom: -0.5rem !important;
}

.my-n3 {
  margin-top: -0.75rem !important;
  margin-bottom: -0.75rem !important;
}

.my-n4 {
  margin-top: -1rem !important;
  margin-bottom: -1rem !important;
}

.my-n5 {
  margin-top: -1.25rem !important;
  margin-bottom: -1.25rem !important;
}

.my-n6 {
  margin-top: -1.5rem !important;
  margin-bottom: -1.5rem !important;
}

.my-n7 {
  margin-top: -1.75rem !important;
  margin-bottom: -1.75rem !important;
}

.my-n8 {
  margin-top: -2rem !important;
  margin-bottom: -2rem !important;
}

.my-n9 {
  margin-top: -2.25rem !important;
  margin-bottom: -2.25rem !important;
}

.my-n10 {
  margin-top: -2.5rem !important;
  margin-bottom: -2.5rem !important;
}

.my-n11 {
  margin-top: -3rem !important;
  margin-bottom: -3rem !important;
}

.my-n12 {
  margin-top: -3.5rem !important;
  margin-bottom: -3.5rem !important;
}

.my-n13 {
  margin-top: -4rem !important;
  margin-bottom: -4rem !important;
}

.my-n14 {
  margin-top: -4.5rem !important;
  margin-bottom: -4.5rem !important;
}

.my-n15 {
  margin-top: -5rem !important;
  margin-bottom: -5rem !important;
}

.my-n16 {
  margin-top: -6rem !important;
  margin-bottom: -6rem !important;
}

.my-n17 {
  margin-top: -7rem !important;
  margin-bottom: -7rem !important;
}

.my-n18 {
  margin-top: -8rem !important;
  margin-bottom: -8rem !important;
}

.my-n19 {
  margin-top: -9rem !important;
  margin-bottom: -9rem !important;
}

.my-n20 {
  margin-top: -10rem !important;
  margin-bottom: -10rem !important;
}

.my-n21 {
  margin-top: -12.5rem !important;
  margin-bottom: -12.5rem !important;
}

.my-n22 {
  margin-top: -15rem !important;
  margin-bottom: -15rem !important;
}

.my-n23 {
  margin-top: -17.5rem !important;
  margin-bottom: -17.5rem !important;
}

.my-n24 {
  margin-top: -20rem !important;
  margin-bottom: -20rem !important;
}

.my-n25 {
  margin-top: -22.5rem !important;
  margin-bottom: -22.5rem !important;
}

.mt-n1 {
  margin-top: -0.25rem !important;
}

.mt-n2 {
  margin-top: -0.5rem !important;
}

.mt-n3 {
  margin-top: -0.75rem !important;
}

.mt-n4 {
  margin-top: -1rem !important;
}

.mt-n5 {
  margin-top: -1.25rem !important;
}

.mt-n6 {
  margin-top: -1.5rem !important;
}

.mt-n7 {
  margin-top: -1.75rem !important;
}

.mt-n8 {
  margin-top: -2rem !important;
}

.mt-n9 {
  margin-top: -2.25rem !important;
}

.mt-n10 {
  margin-top: -2.5rem !important;
}

.mt-n11 {
  margin-top: -3rem !important;
}

.mt-n12 {
  margin-top: -3.5rem !important;
}

.mt-n13 {
  margin-top: -4rem !important;
}

.mt-n14 {
  margin-top: -4.5rem !important;
}

.mt-n15 {
  margin-top: -5rem !important;
}

.mt-n16 {
  margin-top: -6rem !important;
}

.mt-n17 {
  margin-top: -7rem !important;
}

.mt-n18 {
  margin-top: -8rem !important;
}

.mt-n19 {
  margin-top: -9rem !important;
}

.mt-n20 {
  margin-top: -10rem !important;
}

.mt-n21 {
  margin-top: -12.5rem !important;
}

.mt-n22 {
  margin-top: -15rem !important;
}

.mt-n23 {
  margin-top: -17.5rem !important;
}

.mt-n24 {
  margin-top: -20rem !important;
}

.mt-n25 {
  margin-top: -22.5rem !important;
}

.me-n1 {
  margin-right: -0.25rem !important;
}

.me-n2 {
  margin-right: -0.5rem !important;
}

.me-n3 {
  margin-right: -0.75rem !important;
}

.me-n4 {
  margin-right: -1rem !important;
}

.me-n5 {
  margin-right: -1.25rem !important;
}

.me-n6 {
  margin-right: -1.5rem !important;
}

.me-n7 {
  margin-right: -1.75rem !important;
}

.me-n8 {
  margin-right: -2rem !important;
}

.me-n9 {
  margin-right: -2.25rem !important;
}

.me-n10 {
  margin-right: -2.5rem !important;
}

.me-n11 {
  margin-right: -3rem !important;
}

.me-n12 {
  margin-right: -3.5rem !important;
}

.me-n13 {
  margin-right: -4rem !important;
}

.me-n14 {
  margin-right: -4.5rem !important;
}

.me-n15 {
  margin-right: -5rem !important;
}

.me-n16 {
  margin-right: -6rem !important;
}

.me-n17 {
  margin-right: -7rem !important;
}

.me-n18 {
  margin-right: -8rem !important;
}

.me-n19 {
  margin-right: -9rem !important;
}

.me-n20 {
  margin-right: -10rem !important;
}

.me-n21 {
  margin-right: -12.5rem !important;
}

.me-n22 {
  margin-right: -15rem !important;
}

.me-n23 {
  margin-right: -17.5rem !important;
}

.me-n24 {
  margin-right: -20rem !important;
}

.me-n25 {
  margin-right: -22.5rem !important;
}

.mb-n1 {
  margin-bottom: -0.25rem !important;
}

.mb-n2 {
  margin-bottom: -0.5rem !important;
}

.mb-n3 {
  margin-bottom: -0.75rem !important;
}

.mb-n4 {
  margin-bottom: -1rem !important;
}

.mb-n5 {
  margin-bottom: -1.25rem !important;
}

.mb-n6 {
  margin-bottom: -1.5rem !important;
}

.mb-n7 {
  margin-bottom: -1.75rem !important;
}

.mb-n8 {
  margin-bottom: -2rem !important;
}

.mb-n9 {
  margin-bottom: -2.25rem !important;
}

.mb-n10 {
  margin-bottom: -2.5rem !important;
}

.mb-n11 {
  margin-bottom: -3rem !important;
}

.mb-n12 {
  margin-bottom: -3.5rem !important;
}

.mb-n13 {
  margin-bottom: -4rem !important;
}

.mb-n14 {
  margin-bottom: -4.5rem !important;
}

.mb-n15 {
  margin-bottom: -5rem !important;
}

.mb-n16 {
  margin-bottom: -6rem !important;
}

.mb-n17 {
  margin-bottom: -7rem !important;
}

.mb-n18 {
  margin-bottom: -8rem !important;
}

.mb-n19 {
  margin-bottom: -9rem !important;
}

.mb-n20 {
  margin-bottom: -10rem !important;
}

.mb-n21 {
  margin-bottom: -12.5rem !important;
}

.mb-n22 {
  margin-bottom: -15rem !important;
}

.mb-n23 {
  margin-bottom: -17.5rem !important;
}

.mb-n24 {
  margin-bottom: -20rem !important;
}

.mb-n25 {
  margin-bottom: -22.5rem !important;
}

.ms-n1 {
  margin-left: -0.25rem !important;
}

.ms-n2 {
  margin-left: -0.5rem !important;
}

.ms-n3 {
  margin-left: -0.75rem !important;
}

.ms-n4 {
  margin-left: -1rem !important;
}

.ms-n5 {
  margin-left: -1.25rem !important;
}

.ms-n6 {
  margin-left: -1.5rem !important;
}

.ms-n7 {
  margin-left: -1.75rem !important;
}

.ms-n8 {
  margin-left: -2rem !important;
}

.ms-n9 {
  margin-left: -2.25rem !important;
}

.ms-n10 {
  margin-left: -2.5rem !important;
}

.ms-n11 {
  margin-left: -3rem !important;
}

.ms-n12 {
  margin-left: -3.5rem !important;
}

.ms-n13 {
  margin-left: -4rem !important;
}

.ms-n14 {
  margin-left: -4.5rem !important;
}

.ms-n15 {
  margin-left: -5rem !important;
}

.ms-n16 {
  margin-left: -6rem !important;
}

.ms-n17 {
  margin-left: -7rem !important;
}

.ms-n18 {
  margin-left: -8rem !important;
}

.ms-n19 {
  margin-left: -9rem !important;
}

.ms-n20 {
  margin-left: -10rem !important;
}

.ms-n21 {
  margin-left: -12.5rem !important;
}

.ms-n22 {
  margin-left: -15rem !important;
}

.ms-n23 {
  margin-left: -17.5rem !important;
}

.ms-n24 {
  margin-left: -20rem !important;
}

.ms-n25 {
  margin-left: -22.5rem !important;
}

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

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 0.75rem !important;
}

.p-4 {
  padding: 1rem !important;
}

.p-5 {
  padding: 1.25rem !important;
}

.p-6 {
  padding: 1.5rem !important;
}

.p-7 {
  padding: 1.75rem !important;
}

.p-8 {
  padding: 2rem !important;
}

.p-9 {
  padding: 2.25rem !important;
}

.p-10 {
  padding: 2.5rem !important;
}

.p-11 {
  padding: 3rem !important;
}

.p-12 {
  padding: 3.5rem !important;
}

.p-13 {
  padding: 4rem !important;
}

.p-14 {
  padding: 4.5rem !important;
}

.p-15 {
  padding: 5rem !important;
}

.p-16 {
  padding: 6rem !important;
}

.p-17 {
  padding: 7rem !important;
}

.p-18 {
  padding: 8rem !important;
}

.p-19 {
  padding: 9rem !important;
}

.p-20 {
  padding: 10rem !important;
}

.p-21 {
  padding: 12.5rem !important;
}

.p-22 {
  padding: 15rem !important;
}

.p-23 {
  padding: 17.5rem !important;
}

.p-24 {
  padding: 20rem !important;
}

.p-25 {
  padding: 22.5rem !important;
}

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

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 0.75rem !important;
  padding-left: 0.75rem !important;
}

.px-4 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

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

.px-6 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-7 {
  padding-right: 1.75rem !important;
  padding-left: 1.75rem !important;
}

.px-8 {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

.px-9 {
  padding-right: 2.25rem !important;
  padding-left: 2.25rem !important;
}

.px-10 {
  padding-right: 2.5rem !important;
  padding-left: 2.5rem !important;
}

.px-11 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.px-12 {
  padding-right: 3.5rem !important;
  padding-left: 3.5rem !important;
}

.px-13 {
  padding-right: 4rem !important;
  padding-left: 4rem !important;
}

.px-14 {
  padding-right: 4.5rem !important;
  padding-left: 4.5rem !important;
}

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

.px-16 {
  padding-right: 6rem !important;
  padding-left: 6rem !important;
}

.px-17 {
  padding-right: 7rem !important;
  padding-left: 7rem !important;
}

.px-18 {
  padding-right: 8rem !important;
  padding-left: 8rem !important;
}

.px-19 {
  padding-right: 9rem !important;
  padding-left: 9rem !important;
}

.px-20 {
  padding-right: 10rem !important;
  padding-left: 10rem !important;
}

.px-21 {
  padding-right: 12.5rem !important;
  padding-left: 12.5rem !important;
}

.px-22 {
  padding-right: 15rem !important;
  padding-left: 15rem !important;
}

.px-23 {
  padding-right: 17.5rem !important;
  padding-left: 17.5rem !important;
}

.px-24 {
  padding-right: 20rem !important;
  padding-left: 20rem !important;
}

.px-25 {
  padding-right: 22.5rem !important;
  padding-left: 22.5rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-5 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.py-6 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-7 {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

.py-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.py-9 {
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

.py-10 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.py-11 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.py-12 {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

.py-13 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.py-14 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.py-15 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.py-16 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.py-17 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.py-18 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.py-19 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}

.py-20 {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important;
}

.py-21 {
  padding-top: 12.5rem !important;
  padding-bottom: 12.5rem !important;
}

.py-22 {
  padding-top: 15rem !important;
  padding-bottom: 15rem !important;
}

.py-23 {
  padding-top: 17.5rem !important;
  padding-bottom: 17.5rem !important;
}

.py-24 {
  padding-top: 20rem !important;
  padding-bottom: 20rem !important;
}

.py-25 {
  padding-top: 22.5rem !important;
  padding-bottom: 22.5rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 0.75rem !important;
}

.pt-4 {
  padding-top: 1rem !important;
}

.pt-5 {
  padding-top: 1.25rem !important;
}

.pt-6 {
  padding-top: 1.5rem !important;
}

.pt-7 {
  padding-top: 1.75rem !important;
}

.pt-8 {
  padding-top: 2rem !important;
}

.pt-9 {
  padding-top: 2.25rem !important;
}

.pt-10 {
  padding-top: 2.5rem !important;
}

.pt-11 {
  padding-top: 3rem !important;
}

.pt-12 {
  padding-top: 3.5rem !important;
}

.pt-13 {
  padding-top: 4rem !important;
}

.pt-14 {
  padding-top: 4.5rem !important;
}

.pt-15 {
  padding-top: 5rem !important;
}

.pt-16 {
  padding-top: 6rem !important;
}

.pt-17 {
  padding-top: 7rem !important;
}

.pt-18 {
  padding-top: 8rem !important;
}

.pt-19 {
  padding-top: 9rem !important;
}

.pt-20 {
  padding-top: 10rem !important;
}

.pt-21 {
  padding-top: 12.5rem !important;
}

.pt-22 {
  padding-top: 15rem !important;
}

.pt-23 {
  padding-top: 17.5rem !important;
}

.pt-24 {
  padding-top: 20rem !important;
}

.pt-25 {
  padding-top: 22.5rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 0.75rem !important;
}

.pe-4 {
  padding-right: 1rem !important;
}

.pe-5 {
  padding-right: 1.25rem !important;
}

.pe-6 {
  padding-right: 1.5rem !important;
}

.pe-7 {
  padding-right: 1.75rem !important;
}

.pe-8 {
  padding-right: 2rem !important;
}

.pe-9 {
  padding-right: 2.25rem !important;
}

.pe-10 {
  padding-right: 2.5rem !important;
}

.pe-11 {
  padding-right: 3rem !important;
}

.pe-12 {
  padding-right: 3.5rem !important;
}

.pe-13 {
  padding-right: 4rem !important;
}

.pe-14 {
  padding-right: 4.5rem !important;
}

.pe-15 {
  padding-right: 5rem !important;
}

.pe-16 {
  padding-right: 6rem !important;
}

.pe-17 {
  padding-right: 7rem !important;
}

.pe-18 {
  padding-right: 8rem !important;
}

.pe-19 {
  padding-right: 9rem !important;
}

.pe-20 {
  padding-right: 10rem !important;
}

.pe-21 {
  padding-right: 12.5rem !important;
}

.pe-22 {
  padding-right: 15rem !important;
}

.pe-23 {
  padding-right: 17.5rem !important;
}

.pe-24 {
  padding-right: 20rem !important;
}

.pe-25 {
  padding-right: 22.5rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 0.75rem !important;
}

.pb-4 {
  padding-bottom: 1rem !important;
}

.pb-5 {
  padding-bottom: 1.25rem !important;
}

.pb-6 {
  padding-bottom: 1.5rem !important;
}

.pb-7 {
  padding-bottom: 1.75rem !important;
}

.pb-8 {
  padding-bottom: 2rem !important;
}

.pb-9 {
  padding-bottom: 2.25rem !important;
}

.pb-10 {
  padding-bottom: 2.5rem !important;
}

.pb-11 {
  padding-bottom: 3rem !important;
}

.pb-12 {
  padding-bottom: 3.5rem !important;
}

.pb-13 {
  padding-bottom: 4rem !important;
}

.pb-14 {
  padding-bottom: 4.5rem !important;
}

.pb-15 {
  padding-bottom: 5rem !important;
}

.pb-16 {
  padding-bottom: 6rem !important;
}

.pb-17 {
  padding-bottom: 7rem !important;
}

.pb-18 {
  padding-bottom: 8rem !important;
}

.pb-19 {
  padding-bottom: 9rem !important;
}

.pb-20 {
  padding-bottom: 10rem !important;
}

.pb-21 {
  padding-bottom: 12.5rem !important;
}

.pb-22 {
  padding-bottom: 15rem !important;
}

.pb-23 {
  padding-bottom: 17.5rem !important;
}

.pb-24 {
  padding-bottom: 20rem !important;
}

.pb-25 {
  padding-bottom: 22.5rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 0.75rem !important;
}

.ps-4 {
  padding-left: 1rem !important;
}

.ps-5 {
  padding-left: 1.25rem !important;
}

.ps-6 {
  padding-left: 1.5rem !important;
}

.ps-7 {
  padding-left: 1.75rem !important;
}

.ps-8 {
  padding-left: 2rem !important;
}

.ps-9 {
  padding-left: 2.25rem !important;
}

.ps-10 {
  padding-left: 2.5rem !important;
}

.ps-11 {
  padding-left: 3rem !important;
}

.ps-12 {
  padding-left: 3.5rem !important;
}

.ps-13 {
  padding-left: 4rem !important;
}

.ps-14 {
  padding-left: 4.5rem !important;
}

.ps-15 {
  padding-left: 5rem !important;
}

.ps-16 {
  padding-left: 6rem !important;
}

.ps-17 {
  padding-left: 7rem !important;
}

.ps-18 {
  padding-left: 8rem !important;
}

.ps-19 {
  padding-left: 9rem !important;
}

.ps-20 {
  padding-left: 10rem !important;
}

.ps-21 {
  padding-left: 12.5rem !important;
}

.ps-22 {
  padding-left: 15rem !important;
}

.ps-23 {
  padding-left: 17.5rem !important;
}

.ps-24 {
  padding-left: 20rem !important;
}

.dark-bg, .dark-bg:focus{
  background-color: #111111;
}

.bg-dark{
  background-color: #111111 !important;
}

.light-text{
  color:#a7aeb9 !important;
}


.text-white{
  color:white !important;
}

.modal-body {
  background: #111111;
}


body{
  color:white;
}

.modal-header {
  background: #111111;
}

.modal-content, .modal-footer {
  background-color: #111111;
  border-top: none;
}


.modal-content {
  background-color: #111111 !important;
}


#calendar .Zebra_DatePicker {
  background: #0f2337 !important;
}

#calendar .Zebra_DatePicker .dp_daypicker th, #calendar .Zebra_DatePicker .dp_actions .dp_caption {
  color: white;
}


.Zebra_DatePicker .dp_actions .dp_next, .Zebra_DatePicker .dp_actions .dp_previous, .Zebra_DatePicker .dp_actions .dp_next:hover, .Zebra_DatePicker .dp_actions .dp_previous:hover {
  background: #0f2337 !important;
  color: white !important;
}

.Zebra_DatePicker .dp_body .dp_selected {
  background: dodgerblue;
}

.Zebra_DatePicker .dp_body .dp_hover {
  background: #2f4559;
}

.Zebra_DatePicker .dp_actions .dp_next:hover, .Zebra_DatePicker .dp_actions .dp_previous:hover {
  background: white;
}

.dp_caption.dp_hover{
  background-color: #111111 !important;
}

.Zebra_DatePicker td{
  color:dodgerblue;
}

.Zebra_DatePicker .dp_body .dp_disabled {
  color: #555;
}

.modal-title {
  color: white;
}


#register-modal-show-btn{
  background: dodgerblue;
  text-transform: capitalize;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  margin-top: 10px;
  font-weight: 500;
  margin: auto;
  display: block;
  margin-bottom: 24px;
  padding: 0 20px;
  text-transform: uppercase;
  font-size: 18px;
}


#webinar-register-popup-container{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  display: none;
}

#webinar-register-popup-container.show{
  display: block;
}

#webinar-register-popup-container #webinar-register-popup-form-div{
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  background: #302e39;
  height: 100%;
  box-shadow: 0 0 4px 0px rgba(0,0,0,0.6);
}

@media screen and (max-width:990px) {
  #webinar-register-popup-container #webinar-register-popup-form-div{
    width: 100%;
    top: 0%;
    height: 100%;
    overflow-y: auto;
  } 
}


#register-instructions-div{
  margin:20px
}

#register-instructions-div h4, #register-instructions-div p{
  color:#111;
  text-transform: none;
}

#register-instructions-div h4{
  font-weight: 600;
}

#register-modal-close-btn{
  padding: 0;
  color: #fff !important;
  background: transparent;
  width: 36px;
  height: 36px;
  font-size: 24px;
}

#register-modal-header-div{
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0 12px;
}


.screenshare_mode .participant_divs .video-muted-div span {
  display: none;
}

.screenshare_mode .participant_divs .name_span {
  font-size: 12px;
}


.screenshare_mode #videos-container-div{
  position: absolute;
  right: 0;
  top: 45px;
  width: 100px;
  height: calc(100% - 45px);
  overflow: auto;
}

.screenshare_mode #videos-container-div #vid_div,
.screenshare_mode #videos-container-div .participant_divs{
  width: 100% !important;
  height: 100px !important;
  position: relative !important;
  top:0 !important;
  left:0 !important;
}

.screenshare_mode #videos-container-div div.participant_divs.screen-share-on{
  position: fixed !important;
  left: 0 !important;
  top: 45px !important;
  width: calc(70% - 100px) !important;
  height: calc(100% - 45px) !important;
  z-index: -100 !important;
}


.screenshare_mode .group_participants_1 #videos-container-div div.participant_divs.screen-share-on{
  width: 70% !important;
}

.dock-closed.screenshare_mode #videos-container-div div.participant_divs.screen-share-on{
  width: calc(100% - 100px) !important;
}

.dock-closed.screenshare_mode .group_participants_1 #videos-container-div div.participant_divs.screen-share-on{
  width: 100% !important;
}


@media screen and (max-width:950px) {
  
  .screenshare_mode #videos-container-div div.participant_divs.screen-share-on {
    width: 100% !important;
    top: 35px !important;
    height: calc(100% - 245px) !important;
  }

  .screenshare_mode .group_participants_1 #videos-container-div div.participant_divs.screen-share-on{
    width: 100% !important;
    top: 0px !important;
    height: calc(100% - 110px) !important;
  }

  .screenshare_mode #videos-container-div {
    position: absolute;
    left: 0 !important;
    bottom: 0 !important;
    top:auto;
    width: 100% !important;
    height: 100px !important;
    overflow: auto;
  }

  .screenshare_mode #videos-container-div .participant_divs {
    width: 100px !important;
    height: 100px !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    display: inline-block;
  }

  .screenshare_mode #side-dock-container {
    z-index: 3;
  }
}

.mobile-webinar-img{
  display: none !important;
}

#registered-webinar-text{
  color: #171a23;
  font-size: 18px;
  text-transform: none;
  text-align: center;
  line-height: 24px;
  padding: 0;
  margin-bottom: 12px;
}

@media (max-width: 650px){
  #register-webinar-vidphone-logo-div {
    height: 78px;
    padding: 12px 0px 0px 12px;
  }

  #right-side-webinar-register-div{
    padding:0;
  }

  #webinar_img {
    max-height:60vh !important;
  }

  .schedule-title-header {
    color: #fff;
    text-transform: initial;
    margin: 16px 0;
    font-size: 20px;
    font-weight: 400;
  }

  .schedule-timer-div{
    display:none;
  }

  .mobile-webinar-img{
    display: block !important;
    border: none;
    box-shadow: none;
  }

  .desktop-webinar-img{
    display: none !important;
  }

  div.schedule-when-div {
    margin-top: 16px;
    margin-bottom: 16px !important;
  }
}

#informRaiseHandSoonModal p{
  margin-bottom: 0;
}



#update-browser-div,
#not-supported-browser-div{
  display: none;
}

#update-browser-div img,
#not-supported-browser-div img{
  width: 120px;
}

#update-browser-div.show,
#not-supported-browser-div.show{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999999;
  background: rgba(0,0,0,1);
  display: flex !important;
  align-items: center;
}

#update-browser-div .container,
#not-supported-browser-div .container{
  width: 80%;
  height: auto;
  /* margin-top: 5%; */
  border: 1px solid white;
  padding: 20px;
  box-shadow: 0 0 27px 0px rgba(255,255,255,0.5);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  max-width: 500px;
}

#update-browser-div .container p,
#not-supported-browser-div .container p{
  text-align: left;
  color: white;
}


#askForCoPresenterModal .modal-header{
  border-bottom: none !important; 
}

#askForCoPresenterModal .modal-header h2{
  padding: 0;
  border-bottom: none;
  font-family: 'Montserrat';
  margin: 0;
  color: white;
  font-size: 18px;
}

#askForCoPresenterModal .modal-body p {
  margin: 0;
  color: white;
  font-family: 'Montserrat';
}

#askForCoPresenterModal  .modal-footer {
  border-top: none !important;
}

#askForCoPresenterModal .modal-footer .btn-danger{
  text-transform: uppercase;
  padding: 8px 16px;
  font-size: 14px;
  font-family: 'Montserrat';
  min-width: 90px;
}

#askForCoPresenterModal .modal-footer .btn-success{
  font-size: 14px;
  font-family: 'Montserrat';
  text-transform: uppercase;
  padding: 8px 16px;
  min-width: 90px;
  background-color: #5cb85c !important;
  border-color: #4cae4c !important;
}

body p, 
body span,
body input,
body button,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
  font-family: 'Montserrat';
}


#call_audio_presenter svg{
  margin-right: 8px;
  fill: white;
  width: 24px;
  height: 24px;
}

#call_audio_presenter {
  display: flex;
  align-items: center;
  box-shadow: 0px 0px 4px 0px #ffffffcc;
}

#payment-buy-model input,
#payment-buy-model select{
  background: white;
  background-color: white !important;
  border: none !important;
  height: 36px;
}

#payment-buy-model .btn.btn-secondary,
#payment-buy-model .btn.btn-primary{
  text-transform: uppercase;
  font-weight: 600;
  min-width: 160px;
  height: 44px;
  border: none !important;
}




#whiteboard-div{
  display: none;
  position: fixed;
  z-index: 101;
  left: 0;
  top: 0;
  height: calc(100% - 0px);
  width: 70%;
  background-color: white;
}

.dock-closed #whiteboard-div{
  width: 100%;
}

body.viewing-whiteboard #whiteboard-div,
body.viewing-ppt #whiteboard-div{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fcfcfc;
}

body.viewing-whiteboard #toggleStreamDockBtn,
body.viewing-ppt #toggleStreamDockBtn
body.viewing-whiteboard .live-stream-description,
body.viewing-ppt .live-stream-description{
  display: none;
}


body.start-muted .live-stream-description,
body.start-muted .oncall-logo{
  display: none !important;
}

@media (max-width:650px){
  body.viewing-whiteboard #whiteboard-div,
  body.viewing-ppt #whiteboard-div{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  } 
}

#whiteboard-div canvas, 
#whiteboard-div .canvas-container,
#whiteboard-div #whiteboard-container{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}


#whiteboard-container{
  background: white;
  box-shadow: 0 0 4px 0px rgb(0 0 0 / 30%);
}


#whiteboard-overlay{
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height:100%;
  opacity: 0;
  display: none;
  z-index: 1000;
}

#whiteboard-div #whiteboard-name-div{
  position: absolute;
  left: 0;
  top: 4px;
  width: 100% !important;
  height: 1px !important;
  z-index: 10;
  text-align: center;
}

#whiteboard-name-span{
  background: #1e1e1e;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 10px;
  height: 28px;
  display: inline-block;
}


body.viewing-whiteboard #whiteboard-overlay,
body.viewing-ppt #whiteboard-overlay{
  display: block !important;
}


@media (max-width: 650px){
  #whiteboard-div {
    display: none;
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    height: calc(100% - 150px) !important;
    width: 100% !important;
  }
}


#qr-code-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#paymentQRModal .modal-footer{
  border-top: none !important;
}


#product-offer-modal{
  z-index: 999999;
}

#product-offer-modal .modal-content{
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(255, 255, 255, .5);
}

#product-offer-modal .modal-body{
  display: flex;
  align-items: start;
}

#product-offer-modal  #product-offer-image{
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
}

#product-offer-modal  #product-details-div{
  padding: 12px;
  padding-top: 0;
}

#product-offer-modal  #product-details-div h4{
  padding-top: 0;
  margin-top: 0;
  text-transform: capitalize;
  color: white;
  font-size: 24px;
}


#product-offer-modal  #product-details-div p{
  color: white;
  font-size: 18px;
}

#product-offer-modal  #product-details-div span{
  font-size: 18px;
  color: white;
  display: block;
}

#product-offer-modal  .modal-footer {
  border-top: none !important;
  padding: 8px;
}

#product-offer-modal  .modal-footer .btn {
  text-transform: uppercase;
  padding: 8px 16px;
  min-width: 90px;
}

#product-offer-modal  .modal-footer .btn-primary{
  background: #1e90ff;
}

#recorded-stream-user-details-div{
  padding: 16px;
}

#recorded-stream-user-details-div .details-inner-div{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#recorded-stream-user-details-div #details-div{
  display: flex;
  align-items: center;
}

.hide{
  display: none;
}

.recorded-stream-profile-img,
.recorded-stream-profile-letter{
  display: block;
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  /* border: 1px solid rgba(0, 0, 0, 0.3); */
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}

.recorded-stream-profile-letter{
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  background: dodgerblue;
  color: white;
  font-size: 24px;
}

.recorded-stream-username{
  font-size: 16px;
  text-transform: capitalize;
  padding-left: 8px;
  color: #fff;
  font-weight: 500;
}

.details-desc-div{
  margin: 16px 0;
  width: 100%;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  /* background: #172c3f; */
  background: #443965;
  color: white;
}


.webinar-card-list{
  display: flex;
  flex-direction: column;
  gap: 16px; 
}

.webinar-item-card{
  display: flex;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  cursor: pointer;
}

.webinar-card-image{
  width: 180px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  background-color: #000;
}

.webinar-card-content {
  flex-grow: 1;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: calc(100% - 180px);
}

.webinar-card-heading {
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  text-overflow: ellipsis;
  text-align: left;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.webinar-card-subheader {
  color: #fff;
  display: block;
  text-transform: capitalize;
  font-size: 12px;
  text-align: left;
  margin-top: 12px;
  font-weight: 400;
}


#close-product-purchase-btn{
  font-size: 24px;
  padding: 0;
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 100;
  right: 8px;
  top: 8px;
  background: transparent;
}

#close-product-purchase-btn i{
  color: black;
  font-size: 18px;
}

#close-product-purchase-btn svg path{
  fill: black;
}


#webinar-purchase-modal,
#post-webinar-purchase-modal{
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 9999999999;
}

#post-mobile-webinar-purchase-modal{
  display: none;
  position: relative;
  z-index: 9999999999;
  padding: 0 8px;
  margin-top: 12px;
}

#webinar-purchase-modal .cta,
#post-webinar-purchase-modal .cta ,
#post-mobile-webinar-purchase-modal .cta {
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 16px;
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
  background-color: rgba(255, 255, 255, 0.9);
}

#webinar-purchase-modal .product-details-div,
#post-webinar-purchase-modal .product-details-div,
#post-mobile-webinar-purchase-modal .product-details-div{
  display: flex;
  align-items: center;
  justify-content: start;
}

/* #webinar-purchase-modal .cta img,
#post-mobile-webinar-purchase-modal .cta img {
  width: 120px;
  border-radius: 10px;
  height: 70px;
  object-fit: cover;
} */

#webinar-purchase-modal .cta img,
#post-webinar-purchase-modal .cta img{
  width: 70px;
  border-radius: 50%;
  height: 70px;
  object-fit: cover;
}

#webinar-purchase-modal .cta .stream-buy-letter{
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e01a0a;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-transform: capitalize;
}

/* #post-mobile-webinar-purchase-modal .cta img {
  width: 90px;
  height: 90px;
} */

#post-mobile-webinar-purchase-modal .cta-button{
  display: flex;
  padding-top: 0;
  margin-top: 4px !important;
  margin-bottom: 4px;
}

#post-mobile-webinar-purchase-modal .cta-button .btn-secondary{
  width: 50%;
  background: rgba(0, 0, 0, 0.2);
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid white;
}

#post-mobile-webinar-purchase-modal .cta-button .btn-primary{
  width: 100%;
  background-color: #ff554d !important;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: capitalize;
  border-color: #ff554d !important;
}

#webinar-purchase-modal .cta-text,
#post-webinar-purchase-modal .cta-text,
#post-mobile-webinar-purchase-modal .cta-text {
  flex-grow: 1;
  margin-left: 8px;
  min-width: 150px;
  max-width: 250px;
}

#webinar-purchase-modal .cta-text h4,
#post-webinar-purchase-modal .cta-text h4,
#post-mobile-webinar-purchase-modal .cta-text h4 {
  margin-bottom: 10px;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  text-transform: initial;
  padding-right: 24px;
}

#webinar-purchase-modal .cta-button,
#post-webinar-purchase-modal .cta-button ,
#post-mobile-webinar-purchase-modal .cta-button {
  margin-top: 16px;
  width: 100%;
}

#webinar-purchase-modal .cta-button a,
#post-webinar-purchase-modal .cta-button a,
#post-mobile-webinar-purchase-modal .cta-button a{
  border-radius: 12px;
  background: dodgerblue;
  font-size: 16px;
  width: 100%;
}

#mobile-stream-details-div{
  display: flex;
  align-items: end;
}

#mobile-stream-details-div .mobile-comments{
  width: 85%;
  padding: 0 8px;
}

#product-billing-customer-phone{
  height: 38.5px;
}


#drop-cf-container{
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}


#vidphone-profile-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #031525 !important;
  justify-content: center;
  align-items: center;
  overflow: auto;
}


#drop-cf-container .iframe-container {
  position: relative;
  display: inline-block;
}

#drop-cf-container .drop-iframe {
  display: block;
  max-width: 100%;
  height: 100vh;
}

#drop-cf-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1; /* Ensure it is on top of the iframe */
  margin: 10px;
  font-size: 32px;
  padding: 0;
  width: 48px;
  height: 48px;
}





#qr-purchase-modal{
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 9999999;
}

#qr-purchase-modal .cta {
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 10px;
  display: block;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.9);
  width: 250px;
  height: 250px;
}

#qr-purchase-modal .cta img {
  width: 100%;
  border-radius: 10px;
  height: 80%;
  object-fit: contain;
}

#qr-purchase-modal h4 {
  margin-bottom: 10px;
  text-align: center;
}

#qr-purchase-modal #close-qr-purchase-btn {
  color: black !important;
  background: transparent;
  position: absolute;
  right: 4px;
  top: -4px;
  font-size: 24px;
  padding: 0;
  height: 42px;
  z-index: 99;
}


#vidphone-profile-container .navbar-default .navbar-brand {
  padding: 4px 15px;
  display: flex;
  align-items: center;
}

#vidphone-profile-container .container{
  margin: auto;
  margin-top: 45px;
}

@media screen and (max-width:780px) {
  #vidphone-profile-container .container {
    margin: auto;
    margin-top: 45px;
  }

  #webinar-purchase-modal{
    width: 100%;
  }

  #post-webinar-purchase-modal {
    width: 100%;
  }
}

#vidphone-profile-container #profile-header{
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  margin-bottom: 45px !important;
  align-items: center;
}

#vidphone-profile-container .rounded-circle {
  border-radius: 50% !important;
}

#vidphone-profile-container p{
  font-size: 16px;
  color: #fff !important;
  line-height: normal !important;
  text-transform: none !important;
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: 'Montserrat';
  white-space: pre-line;
}

#vidphone-profile-container .stat-div{
  padding-left: 0;
}

#vidphone-profile-container .img-fluid {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

#vidphone-profile-container .btn-default{
  font-family: 'Montserrat';
  color: #fff !important;
  border-radius: 8px !important;
  background: hsla(0, 0%, 100%, 0) 0 0 no-repeat padding-box !important;
  border: 1px solid #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  letter-spacing: -0.01rem;
  position: relative;
  padding: 16px 20px;
  height: auto;
  margin-right: 8px;
  margin: 0 10px;
  min-width: 190px;
}

#vidphone-profile-container .btn-default:first-child {
 margin-left: 0 !important; 
}


#vidphone-profile-container .btn-default.btn-red{
  font-family: 'Montserrat';
  color: #fff !important;
  background: #ff554d !important;
  border-radius: 8px !important;
  border: none;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  letter-spacing: -0.01rem;
  position: relative;
  height: auto;
  margin-left: 0px;
}

#vidphone-profile-container .mt-5, 
#vidphone-profile-container .my-5 {
  margin-top: 3rem !important;
}



#vidphone-profile-container .past-webinar-card{
  background: #172c3f;
  flex: 1 1 calc(33.333% - 10px);
  color: white;
  display: flex;
  justify-content: center;
  height: 350px;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 8px;
  min-width: 0;
}

@media (max-width: 900px) {
  #vidphone-profile-container .past-webinar-card{
      flex: 1 1 calc(50% - 10px);
  }
}
@media (max-width: 600px) {
  #vidphone-profile-container .past-webinar-card{
    flex: 1 1 48%;
    height: 200px;
  }
}


#vidphone-profile-container #pre-webinar-container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 45px;
}

.pre-webinar-header{
  display: block;
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-family: 'Montserrat';
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pre-webinar-subheader{
  display: block;
    margin: 16px 0 8px 0;
    font-size: 16px;
    font-family: 'Montserrat';
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#vidphone-profile-container .h4, 
#vidphone-profile-container h4 {
  font-size: 24px;
  color: white;
  margin-top: 20px;
  margin-bottom: 15px;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
}

#vidphone-profile-container section{
  font-size: 16px;
}

#vidphone-profile-container .mt-1, 
#vidphone-profile-container .my-1 {
  margin-top: .25rem !important;
}

#vidphone-profile-container .h6, 
#vidphone-profile-container h6 {
  font-size: 16px;
}

#vidphone-profile-container .w-100{
  width: 100%;
}

#vidphone-profile-container .d-block{
  display: block;
}

#vidphone-profile-container .stat-header{
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0;
  display: inline-block;
}

#vidphone-profile-container .stat-text{
  display: inline-block;
  padding-left: 8px;
}

#vidphone-profile-container .mt-4, 
#vidphone-profile-container .my-4 {
  margin-top: 1.5rem !important;
  font-family: 'Montserrat';
}

#vidphone-profile-container .container{
  max-width: 999px;
}

#vidphone-profile-container .container-article {
  position: relative;
  display: block;
  width: 100%;
}

#vidphone-profile-container .container-article .info{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.5);
}

#vidphone-profile-container .image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background-color: #000;
}

#vidphone-profile-container .navbar-light .navbar-nav .nav-link {
  color: rgb(0 0 0);
}

#vidphone-profile-container .round img {
  border-radius: 100%
}

#vidphone-profile-container .mt-100 {
  margin-top: 100px
}

#vidphone-profile-container .navbar-default {
  z-index: 999999;
  padding: 14px 0px;
  background: #000b15;
  border:none;
}

#vidphone-profile-container .nav>li {
  text-align: left;
}

#vidphone-profile-container .navbar-default .navbar-nav>li>a {
  color: #fff;
  font-size: 16px;
  font-family: 'Montserrat';
  font-weight: 600;
}

.cursor-pointer{
  cursor: pointer;
}

#profile-no-img-span{
  width: 120px;
  height: 120px;
  display: flex;
  background: dodgerblue;
  border-radius: 50%;
  color: white;
  text-transform: capitalize;
  font-size: 42px;
  align-items: center;
  justify-content: center;
  margin: auto;
}

#kiosk-video-div{
  margin-top: 16px;
}

#scheduling-container .Zebra_DatePicker {
  font-family: "Montserrat", sans-serif;
}

#recorded-button-nav .btn-group {
  position: relative;
  display: flex;
  vertical-align: middle;
  gap: 8px;
}


.profile-btn-small{
  padding: 12px 0 !important;
  min-width: 120px !important;
  margin-left: 16px !important;
}

.flex-center{
  display: flex;
  align-items: center;
}

@media screen and (max-width:650px) {
  #vidphone-profile-container .navbar-toggle {
    position: relative;
    float: left;
    padding: 9px 10px;
    margin-top: 8px;
    margin-left: 15px;
  }

  #vidphone-profile-container .btn-default {
    font-size: 12px;
    font-weight: 500;
    padding: 16px 8px;
    min-width: 140px;
  }

  #vidphone-profile-container .past-webinar-card {
    padding: 8px;
  }

  #mobile-recorded-nav-div.mobile{
    display: flex !important;
    align-items: center;
    /* background: #000b15; */
    padding: 8px 8px;
    justify-content: space-between;
    color: white !important;
  }

  #mobile-recorded-nav-div.mobile div{
    display: flex !important;
    align-items: center;
  }

  #mobile-recorded-nav-div.mobile a{
    padding: 0;
    font-size: 16px;
    color: white;
  }
}


#mobile-recorded-comments-input-div{
  display: flex;
  align-items: center;
  border: 1px solid white;
  border-radius: 24px;
}


@media screen and (max-width:500px){
  
  #vidphone-profile-container .img-fluid {
    width: 80px;
    height: 80px;
  }

  #profile-no-img-span {
    width: 80px;
    height: 80px;
  }

  #vidphone-profile-container .container {
    padding: 0;
    margin-top: 30px;
  }

  #vidphone-profile-container .container .btn-group .btn-default{
    width: 100%;
    margin: auto;
    margin-bottom: 8px;
  }

  #vidphone-profile-container .btn-default.profile-btn-small {
    font-size: 14px !important;
    font-weight: 500;
    padding: 12px 8px !important;
    min-width: 90px !important;
    margin: 0 2px !important;
  }
}



.truncated-text-container {
  position: relative;
}

.truncated-text-container .truncated-text {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 0 !important;
}

.truncated-text-container .full-text {
  display: none;
}

.truncated-text-container .full-text.show{
  display: block;
}

.truncated-text-container .more-link {
  font-weight: bold;
  cursor: pointer;
}


#mobile-recorded-details-container{
  position: absolute;
  /* background-color: rgba(0,0,0,0.5); */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05));
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.navbar-default .navbar-toggle {
  float: left;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 0px;
  margin-left: 4px;
  border:none;
}

#mobile-recorded-comments-div{
  width: 100%;
  height: 45vh;
  overflow-y: auto;
  position: relative;
  bottom: 8px;
}


#mobile-recorded-details-container #mobile-recorded-comments-div{
  height: 35vh;
}

#mobile-recorded-comments-div .comment-name-start-div {
  width: 30px;
  text-align: center;
  height: 30px;
  border-radius: 50%;
  /* background-color: dodgerblue; */
}

#mobile-recorded-comments-div .comment-name-start-div .comment_para .name {
  text-transform: capitalize;
  display: block;
  font-size: 12px;
  font-family: 'Montserrat';
  position: relative;
  color: #fff;
  left: 0;
  top: 0;
  max-width: calc(100% - 60px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}


#mobile-recorded-comments-div .comment-name-start-div .comment_para .comment_para .text {
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  display: block;
  line-height: 16px;
}


#mobile-recorded-comments-div .comment_div {
  padding: 8px 4px;
  min-height: 54px;
  background: transparent;
  margin-top: 0px;
  border-radius: 8px;
}

#mobile-recorded-comments-input{
  height: 38px;
  background: transparent;
  background-color: transparent !important;
  border: none !important;
  border-radius: 24px;
  padding: 0 16px;
  color: white;
  font-size: 16px;
  outline: none !important;
  box-shadow: none !important;
  flex-grow: 1;
}

#mobile-recorded-comments-input::placeholder{
  color: #fff;
}

.user-info {
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.user-info img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.stream-user-header-name{
  font-size: 16px;
  font-family: 'Montserrat';
  font-weight: 400;
  margin-left:4px;
}

#send-comment-recorded-video-btn{
  flex-grow: 1;
  background: transparent;
  outline: none;
  box-shadow: none;
}

#mobile-recorded-nav-div .recorded-stream-profile-letter{
  font-size: 16px !important;
  width: 30px !important;
  height: 30px !important;
}

#recorded-offer{
  position: absolute;
  left: 0;
  width: 80%;
  bottom: 0;
  color: white;
}

#recorded-offer h5{
  display: block;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#recorded-offer p{
  width: 100%;
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

#recorded-offer  button{
  width: 49%;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid white;
  border-radius: 24px;
}

#shareLinkModal .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#shareLinkModal .modal-header .close{
  margin: 0;
  padding: 0;
  height: auto;
  font-size: 24px;
  color: white !important;
  opacity: 1;
}

#shareLinkModal .input-group-btn .btn-default{
  color: black !important;
}

#shareLinkModal #shareLinkInput{
  height: 44px;
}

#shareLinkModal .share-buttons .btn{
  background-color: transparent;
  border: none !important;
  color: white;
  font-size: 14px;
}

#shareLinkModal .share-buttons i{
  display: flex;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  margin: auto;
  margin-bottom: 6px;
}

.side-btn-div div{
  width: 50px;
  height: 50px;
  display: flex;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 50%;
  margin: auto;
  margin-top: 8px;
}

.side-btn-div span{
  font-size: 10px;
  display: block;
  margin: auto;
  text-align: center;
  padding-top: 0px;
  color: white;
  text-transform: uppercase;
}

.side-btn-div.active div{
  /* background: rgba(255, 255, 255, 1); */
}

.side-btn-div.active i{
  /* color: #000; */
}

.side-btn-div div .inactive_icon{
  display: none;
}

.side-btn-div.active div .inactive_icon{
  display: block;
}

.side-btn-div.active div .active_icon{
  display: none;
}

/* .side-btn-div.active span{
  color: black;
} */

#post-offer-div-btn-container{
  display: none;
}

#post-offer-div-btn-container.show{
  display: block;
}

#live-mobile-stream-details-div{
  display: none;
}


#live-offer-div-btn-container{
  display: none;
}

#mobile_dock_comments_container{
  width: 100%;
  height: 100%;
  overflow: auto;
}

.mobile-stream-btns{
  position: relative;
  bottom: 40px;
}

.btn-transparent{
  background-color: transparent;
}

@media screen and (max-width:990px) {
  #live-mobile-stream-details-div{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: end;
    z-index: 999;
    background: linear-gradient(0deg, black, rgba(0, 0, 0, 0.5), transparent);
  }

  #live-mobile-stream-details-div .mobile-comments{
    width: 85%;
    padding: 0 8px;
  }

  .recorder_page #live-mobile-stream-details-div{
    display: none;
  }

  #mobile_dock_comments_container .comment_div .timestamp,
  #mobile_dock_questions_container .comment_div .timestamp{
    display: none;
  }

  #mobile_dock_comments_container .comment-image-name-span{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid black;
    object-fit: cover;
  }

  #mobile_dock_comments_container  .comment_para .name{
    font-size: 14px;
    font-weight: 400;
    max-width: none;
  }

  #mobile_dock_comments_container  .comment_para .text{
    font-size: 14px;
    font-weight: 600;
  }

  #mobile-recorded-comments-div .comment_div {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent);
    margin-bottom: 8px;
  }

  #live-offer-div-btn-container.show{
    display: block;
  }
}


@media screen and (max-width:650px){
  #recorded-div-details-container,
  #recorded-stream-user-details-div{
    display: none !important;
  }

  #hideMeetingDiv h1, #waitingForStream h1 {
    font-size: 24px;
  }
}

@media screen and (max-width:950px){
  #side-stream-div{
    display: none !important;
  }
}


@media screen and (max-width:320px){
  .no_vid_logo{
    max-width: 80px;
  }

  #hideMeetingDiv h1, #waitingForStream h1 {
    font-size: 18px;
  }
}


@media screen and (max-width:200px){
  .no_vid_logo{
    max-width: 50px;
  }

  #hideMeetingDiv h1, #waitingForStream h1 {
    font-size: 10px;
  }
}

.modal-title {
  font-weight: 600;
  text-transform: capitalize;
}

.modal-header {
  padding: 16px;
}

.modal-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom: 1px solid white !important;
  display: flex;
  align-items: center;
}

.modal .form-group label{
  font-size: 12px;
  font-weight: 700;
  font-family: 'Montserrat';
}

.modal-body, .modal-footer {
  background: rgba(0, 0, 0, 0.6) !important;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 16px;
}

.modal-body:has(+ .modal-footer) {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: 1px solid white;
}

.modal-header, 
.modal-body, 
.modal-footer,
.translucent-modal .modal-header,
.translucent-modal .modal-body,
.translucent-modal .modal-footer {
  background: #111322 !important;
  color: white !important;
}


.modal-body input.form-control,
.modal-body textarea.form-control{
  background: rgba(0, 0, 0, 0.5);
  color: white;
  color: #fff;
  background-color: #182d3f;
  border-radius: 8px;
}

.modal-content {
  background-color: transparent;
  border: none;
}