/* -!- Edit These Variables so that everything Maintains its Spacing and Proper Scaling -!- */

:root {
    --banner-fixed-height: 20px;
    --banner-scale-height: 5vh;
    --icon-min-size: 40px;
    --icon-scale-size: 4vmin;
}


/* -------------------------------------------------------------------------------------------*/

.headerfont {
  font-size: calc( 20px + 2.0vmin);
  font-weight: 600;
  color: #39b5ff;
  text-align: center;
}

.subheaderfont {
  font-size: calc(8px + 0.8vmin);
  font-weight: 400;
  color: #eeeeee;
}

.errorfont {
  font-size: calc(8px + 0.8vmin);
  font-weight: 400;
  color: #FF3333;
}

.smallfont {
  font-size: calc(5px + 0.8vmin);
  font-weight: 300;
  color: #CCCCCC;
}

.smallbluefont {
  font-size: calc(5px + 0.8vmin);
  font-weight: 400;
  color: #39B5FF;
}

.smallredfont {
  font-size: calc(5px + 0.8vmin);
  font-weight: 400;
  color: #FF3333;
}

.labelfont {
  font-size: 3.0vmin;
  font-weight: 500;
}

.bannerfont {
  font-size: 3.25vmin;
  font-weight: 200;
}

.mediumfont {
  font-size: calc(12px + 1.7vmin);
  color: #cccccc;
  font-weight: 300;
}

.largefont {
  font-size: calc(15px + 6.5vmin);
  font-weight: 600;
  color: #39b5ff;
}

.borderfont {
  width: 100%;
  font-size: calc(10px + 1.7vmin);
  font-weight: 500;
  border-bottom: 0.25vmin solid;
  border-color: #cccccc;
  text-align: center;
  padding-bottom: calc(4px + 0.3vmin);
}

.formfont {
  font-size: calc(5px + 1.0vmin);
  font-weight: 400;
  color: #39b5ff;
}

.mediumbluefont {
  font-size: calc(12px + 1.7vmin);
  font-weight: 300;
  color: #39b5ff;
}

.blockedfont {
  font-size: calc(15px + 6.5vmin);
  font-weight: 600;
  width: 100%;
  color: #dd0000;
}

.showNameDisplay {
  color: #cccccc;
}

.max_width {
  width: 100%;
}

.half_width {
  width: 50%;
}

.max_height {
  height: 100%;
}

.threeQuarters_height {
  height: 75%;
}

.textcenter {
  text-align: center;
}

.Line_Rule_Div {
  height: 1%;
  width: 80%;
  border-bottom: 0.25vmin solid;
  border-color: #cccccc;
}


/* -------------------------------------------------------------------------------------------*/

.grey_custom_button {
  background-image: -webkit-linear-gradient(290deg, #888888, #666666, #555555, #555555, #666666);
  background-image: linear-gradient(160deg, #888888, #666666, #555555, #555555, #666666);
  text-decoration: none;
  box-shadow: 1px 2px 1px 1px #000000;
  border: none;
  border-radius: 2px;
  color: #FFFFFF;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0), 2px -2px 0px rgba(0, 0, 0, 0.25), -2px 2px 0px rgba(0, 0, 0, 0.25), -2px -2px 0px rgba(0, 0, 0, 0.5);
}

.grey_custom_button:focus {
  outline: 0;
}

.grey_custom_button:hover {
  border: none;
  background-image: -webkit-linear-gradient(290deg, #999999, #777777, #666666, #666666, #777777);
  background-image: linear-gradient(160deg, #999999, #777777, #666666, #666666, #777777);
  color: #FFFFFF;
}

.grey_custom_button:active {
  border: none;
  box-shadow: inset 1px 1px 3px 2px #000000, 1px 2px 1px 1px #000000;
  color: #EEEEEE;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0), 1px -1px 0px rgba(0, 0, 0, 0.25), -1px 1px 0px rgba(0, 0, 0, 0.25), -1px -1px 0px rgba(0, 0, 0, 0.5);
}


/* -------------------------------------------------------------------------------------------*/

.green_custom_button {
  background-image: -webkit-linear-gradient(290deg, rgb(23, 159, 73), rgb(03, 139, 53), rgb(23, 159, 73));
  background-image: linear-gradient(160deg, rgb(23, 159, 73), rgb(03, 139, 53), rgb(23, 159, 73));
  text-decoration: none;
  border: none;
  color: #FFFFFF;
  border-radius: calc(1px + 0.05vmin);
}

.green_custom_button:focus {
  outline: 0;
}

.green_custom_button:hover {
  background-image: -webkit-linear-gradient(290deg, rgb(63, 199, 113), rgb(43, 179, 93), rgb(63, 199, 113));
  background-image: linear-gradient(160deg, rgb(63, 199, 113), rgb(43, 179, 93), rgb(63, 199, 113));
}

.green_custom_button:active {
  background-image: -webkit-linear-gradient(290deg, rgb(13, 149, 63), rgb(00, 129, 43), rgb(13, 149, 63));
  background-image: linear-gradient(160deg, rgb(13, 149, 63), rgb(00, 129, 43), rgb(13, 149, 63));
  box-shadow: 0px 0px calc(0.5px + 0.05vmin) calc(0.5px + 0.05vmin) #000000 inset;
  color: #D0D0D0;
}


/* -------------------------------------------------------------------------------------------*/

.dark_grey_custom_button {
  background-image: -webkit-linear-gradient(290deg, #444444, #333333, #444444);
  background-image: linear-gradient(160deg, #444444, #333333, #444444);
  box-shadow: 0px calc(1px + 0.1vmin) calc(1px + 0.1vmin) calc(1px + 0.1vmin) #000000;
  border: none;
  color: #FFFFFF;
  border-radius: calc(1px + 0.05vmin);
}

.dark_grey_custom_button:focus {
  outline: 0;
}

.dark_grey_custom_button:hover {
  background-image: -webkit-linear-gradient(290deg, #555555, #444444, #555555);
  background-image: linear-gradient(160deg, #555555, #444444, #555555);
}

.dark_grey_custom_button:active {
  background-image: -webkit-linear-gradient(290deg, #393939, #282828, #393939);
  background-image: linear-gradient(160deg, #393939, #282828, #393939);
  box-shadow: 0px 0px calc(0.5px + 0.05vmin) calc(0.5px + 0.05vmin) #000000 inset;
  color: #D0D0D0;
}


/* -------------------------------------------------------------------------------------------*/
.very_dark_grey_custom_button {
  background-image: -webkit-linear-gradient(290deg, #333333, #222222, #333333);
  background-image: linear-gradient(160deg, #333333, #222222, #333333);
  box-shadow: 0px calc(1px + 0.1vmin) calc(1px + 0.1vmin) calc(1px + 0.1vmin) #000000;
  border: none;
  color: #FFFFFF;
  border-radius: calc(1px + 0.05vmin);
}

.very_dark_grey_custom_button:focus {
  outline: 0;
}

.very_dark_grey_custom_button:hover {
  background-image: -webkit-linear-gradient(290deg, #555555, #444444, #555555);
  background-image: linear-gradient(160deg, #555555, #444444, #555555);
}

.very_dark_grey_custom_button:active {
  background-image: -webkit-linear-gradient(290deg, #393939, #282828, #393939);
  background-image: linear-gradient(160deg, #393939, #282828, #393939);
  box-shadow: 0px 0px calc(0.5px + 0.05vmin) calc(0.5px + 0.05vmin) #000000 inset;
  color: #D0D0D0;
}

/* -------------------------------------------------------------------------------------------*/

* {
  font-family: "Roboto Condensed", sans-serif;
}
  /*  -webkit-touch-callout: none;
  /* iOS Safari 
  -webkit-user-select: none;
  /* Chrome/Safari/Opera 
  /* Konqueror 
  -moz-user-select: none;
  /* Firefox 
  -ms-user-select: none;
  /* Internet Explorer/Edge 
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser 
}
*/

body {
  position: relative;
  background: #111;
  color: #fff;
}

.hidden {
  /* This is used for Flex-Box elements as the Default HTML Hidden Tag 
    Does not seem to work on them */
  display: none !important;
}


/* -------------------------------------------------------------------------------------------*/

#Main_div {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0%;
  top: 0%;
  background-color: rgb(20, 20, 128);
}


/* -------------------------------------------------------------------------------------------*/

#Banner_div {
  overflow-x: hidden;
  overflow-y: hidden;
  position: fixed;
  z-index: 15;
  width: 100vw;
  height: calc( 20px + 5vh);
  background-color: #111111;
  border-bottom: 0.25vmin solid;
  border-color: #000000;
}

#Banner_Branding_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  margin-left: calc((100% - 50%)/2);
  margin-right: calc((100% - 50%)/2);
}

#StateIndicator {
  position: absolute;
  top: calc(20px + 5vh);
  left: calc(50% - (20vw+ 10px)/2);
  right: calc(50% - (20vw + 10px)/2);
  border-bottom-left-radius: 5vw 2vw;
  border-bottom-right-radius: 5vw 2vw;
  width: calc(20vw + 10px);
  height: calc(3px + 0.8vw);
  border-left: 0.25vmin solid;
  border-right: 0.25vmin solid;
  border-bottom: 0.25vmin solid;
  border-color: #000000;
  text-align: center;
  font-size: calc(4px + 0.7vw);
  line-height: calc(3px + 0.8vw);
  color: #FFFFFF;
  z-index: 15;
}

.statusbarOnAir {
  visibility: visible;
  background-color: rgba(200, 50, 50, 0.9);
  background: -webkit-linear-gradient(left, rgba(200, 50, 50, 0.9), rgba(190, 40, 40, 0.9), rgba(180, 30, 30, 0.9), rgba(170, 20, 20, 0.9), rgba(160, 10, 10, 0.9), rgba(160, 10, 10, 0.9), rgba(170, 20, 20, 0.9), rgba(180, 30, 30, 0.9), rgba(190, 40, 40, 0.9), rgba(200, 50, 50, 0.9));
  background: linear-gradient(90deg, rgba(200, 50, 50, 0.9), rgba(190, 40, 40, 0.9), rgba(180, 30, 30, 0.9), rgba(170, 20, 20, 0.9), rgba(160, 10, 10, 0.9), rgba(160, 10, 10, 0.9), rgba(170, 20, 20, 0.9), rgba(180, 30, 30, 0.9), rgba(190, 40, 40, 0.9), rgba(200, 50, 50, 0.9));
}

.statusbarOffAir {
  visibility: visible;
  background: -webkit-linear-gradient(left, rgba(50, 180, 50, 0.9), rgba(40, 160, 40, 0.9), rgba(30, 140, 30, 0.9), rgba(20, 120, 20, 0.9), rgba(10, 100, 10, 0.9), rgba(10, 100, 10, 0.9), rgba(20, 120, 20, 0.9), rgba(30, 140, 30, 0.9), rgba(40, 160, 40, 0.9), rgba(50, 180, 50, 0.9));
  background: linear-gradient(90deg, rgba(50, 180, 50, 0.9), rgba(40, 160, 40, 0.9), rgba(30, 140, 30, 0.9), rgba(20, 120, 20, 0.9), rgba(10, 100, 10, 0.9), rgba(10, 100, 10, 0.9), rgba(20, 120, 20, 0.9), rgba(30, 140, 30, 0.9), rgba(40, 160, 40, 0.9), rgba(50, 180, 50, 0.9));
}

.statusbarNeutral {
  visibility: hidden;
}


/* -------------------------------------------------------------------------------------------*/
.SelectScreenShare {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-top: calc(3px + 0.4vmin);
  padding: calc(2px + 0.4vmin);
  width: 60%;
  height: 100%;
}
#SelectScreenShare > img {
  width: 18%;
  height: auto;
}
#SelectScreenShare > div {
  vertical-align: middle;
  text-align: center;
  width: 82%;
}

#ScreenShare_Modal {
  z-index: 35;
  width: 30vw;
  height: 10vw;
  min-width: 550px;
  min-height: 182.3px;
  max-width: 60vh;
  max-height: 20vh;
  max-width: auto;
}

.headerWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15%;
  width: 100%;
}

.bodyWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 70%;
  width: 100%;
}

.bodyWrapper > div {
  font-weight: 300;
  padding: calc(2px + 1vmin);
}

.footerWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15%;
  width: 100%;
}

/* -------------------------------------------------------------------------------------------*/

#LeftBlock_div {
  float: left;
  position: relative;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  z-index: 12;
  width: calc(150px + 13.8125%);
  top: calc( 20px + 5vh);
  height: calc(100% - (20px + 5vh));
  background-color: rgb(20, 60, 128);
  background: -webkit-linear-gradient(#0000, #2222);
  /* For Safari 5.1 to 6.0 */
  /* For Opera 11.1 to 12.0 */
  /* For Firefox 3.6 to 15 */
  background: -webkit-linear-gradient(rgba(32, 32, 32, 0.8), rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8));
  background: linear-gradient(rgba(32, 32, 32, 0.8), rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8));
  font-weight: 300;
  border-right: 0.25vmin solid;
  border-color: #000000;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .7);
}

#LeftBlock_Toggle_Button_Out_Of_Menu {
  position: absolute;
  border: none;
  background: url('../images/Icons/Icon-Contacts-Tab.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: calc(20px + 5vh + 0.2vh + 5px);
  left: 0vw;
  min-width: 40px;
  min-height: 40px;
  width: 4vmin;
  height: 4vmin;
  z-index: 30;
}

#LeftBlock_Toggle_Button_In_Menu {
  position: relative;
}

#LeftBlock_Toggle_Button_In_Menu_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  height: calc(20px + 1.5%);
  background: -webkit-linear-gradient(255deg, rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(8, 8, 8, 0.8), rgba(0, 0, 0, 0.8), rgba(8, 8, 8, 0.8));
  background: linear-gradient(-165deg, rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(8, 8, 8, 0.8), rgba(0, 0, 0, 0.8), rgba(8, 8, 8, 0.8));
  border-bottom: calc(1px + 0.05vmin) solid #000000;
}


/* -------------------------------------------------------------------------------------------*/

#Search_div {
  overflow-y: hidden;
  width: 100%;
  padding-top: calc(3px + 0.75vh);
  padding-bottom: calc(3px + 0.75vh);
  border-bottom: calc(1px + 0.15vmin) solid #666666;
}

#Search_div_Inner_Wrapper {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

#Search_div_Inner_Button_Wrapper {
  float: left;
  height: calc(10px + 0.6vh);
  width: 20%;
  margin: 0;
  padding-top: calc(1px + 0.15vh);
  padding-bottom: calc(1px + 0.15vh);
  font-size: calc(8px + 0.8vmin);
  text-align: center;
  line-height: calc(10px + 0.6vh);
  border-radius: 0px calc(10px + 0.15vmin) calc(10px + 0.15vmin) 0px;
  background-image: -webkit-linear-gradient(290deg, #1995df, #0985cf, #0075bf, #0075bf, #0985cf);
  background-image: linear-gradient(160deg, #1995df, #0985cf, #0075bf, #0075bf, #0985cf);
  border-top: calc(0.25px + 0.15vmin) solid #000000;
  border-right: calc(0.25px + 0.15vmin) solid #000000;
  border-bottom: calc(0.25px + 0.15vmin) solid #000000;
}

#Search_div_Inner_Button {
  outline: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  width: 100%;
  height: 100%;
  font-size: calc(8px + 0.8vmin);
  color: white;
  text-align: center;
  font-weight: 300;
  line-height: calc(10px + 0.6vh);
  margin: 0;
  padding: 0;
}

#searchname {
  outline: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  float: left;
  border-radius: calc(10px + 0.15vmin) 0px 0px calc(10px + 0.15vmin);
  width: 77%;
  height: calc(10px + 0.6vh);
  margin: 0;
  padding-top: calc(1px + 0.15vh);
  padding-bottom: calc(1px + 0.15vh);
  padding-left: 3%;
  color: white;
  font-size: calc(8px + 0.8vmin);
  line-height: 0;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.8), rgba(16, 16, 16, 0.8), rgba(24, 24, 24, 0.8));
  background: radial-gradient(rgba(0, 0, 0, 0.8), rgba(16, 16, 16, 0.8), rgba(24, 24, 24, 0.8));
  border-top: calc(0.25px + 0.15vmin) solid #000000;
  border-left: calc(0.25px + 0.15vmin) solid #000000;
  border-bottom: calc(0.25px + 0.15vmin) solid #000000;
}

#LeftBlock_Tab_div {
  width: 100%;
  height: 3%;
}

#LeftBlock_Tab_div > ul {
  width: 100%;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#LeftBlock_Tab_div > ul > li {
  width: calc(100%/3);
  height: 100%;
  float: left;
}

.LeftBlock_Active_Tab {
  border-bottom: calc(1px + 0.15vmin) solid #FFFFFF;
  color: #FFFFFF !important;
}

#LeftBlock_Tab_div > ul > li > div {
  text-decoration: none;
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #AAAAAA;
  font-size: calc(8px + 0.8vmin);
}


/* -------------------------------------------------------------------------------------------*/

#directory_div,
#search_div,
#recent_div {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  flex: 1;
  border-bottom: calc(1px + 0.15vmin) solid #666666;
}

#group_div {
  height: auto;
  clear: both;
  width: 100%;
  float: left;
}

#card_div {
  clear: both;
  width: 325px;
  height: 65px;
  border: .5px solid;
  margin: .5px;
  /* Chrome 7+ */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444444), to(#111111));
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #444444, #111111);
  float: left;
}

#card_div_SELECTED {
  clear: both;
  width: 325px;
  height: 65px;
  border: .5px solid #2222aa;
  margin: 1px;
  /* Chrome 7+ */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #1a82f7, #2F2727);
  float: left;
}

.group_card_div_SELECTED {
  width: 99%;
  height: 20%;
  border: 1px solid #2222aa;
  background-color: #333;
  /* Chrome 7+ */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #1a82f7, #2F2727);
  float: left;
}

.group_card_div {
  overflow: hidden;
  position: relative;
  width: 99%;
  height: auto;
  float: left;
}

.group_card_wrapper {
  overflow: hidden;
  position: relative;
  width: 99%;
  height: auto;
  /*Match the color of the folder */
  margin: 2px;
  padding-bottom: calc(1px + 0.15vmin);
  float: left;
}

.group_card_wrapper:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(1px + 0.15vmin);
  width: 100%;
  background: -webkit-radial-gradient(#39b5ff 15%, rgba(0, 0, 0, 0) 70%);
  background: radial-gradient(#39b5ff 15%, rgba(0, 0, 0, 0) 70%);
}

.CallDetailWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  float: left;
  width: 99%;
}

.itemsOne {
  width: calc(100%/1);
}

.itemsTwo {
  width: calc(100%/2);
}

.callDetailButton {
  border: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  vertical-align: middle;
  padding-top: calc(2px + 0.15vh);
  padding-bottom: calc(2px + 0.15vh);
  margin-left: calc(5px + 1.0vmin);
  margin-right: calc(5px + 1.0vmin);
  margin-top: calc(2px + 0.35vh);
  margin-bottom: calc(2px + 0.35vh);
  font-size: calc(4px + 0.8vmin);
}

.image_div {
  width: 20%;
  height: auto;
  float: left;
  margin: calc(1px + 0.15vmin);
}

.image_div > img {
  border-radius: 100%;
  width: calc(100% - 2*(1px + 0.25vmin));
  height: auto;
}

.folder_div {
  width: 28px;
  height: 20px;
  float: left;
  margin: 2px 2px 4px 4px;
}

.group_label_div {
  float: left;
  margin: 2px 2px 4px 4px;
}

.group_control_div {
  width: 30px;
  float: right;
  padding-right: 3px;
}

.detail_div {
  width: 65%;
  height: auto;
  float: left;
}

.status_div {
  width: 10%;
  height: auto;
  float: left;
}

.control_div {
  width: 5%;
  height: auto;
  float: right;
}

.FirstName {
  font-weight: 100;
  line-height: 1.4;
  font-stretch: normal;
  color: #ddd;
  font-size: calc(4px + 0.8vmin);
}

.LastName {
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  font-size: calc(4px + 0.8vmin);
}

.Title {
  font-weight: 300;
  line-height: 1.4;
  font-size: calc(4px + 0.8vmin);
  color: #00bfff;
}

.Organization {
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  font-size: calc(4px + 0.8vmin);
  color: #eeeee0;
}

.Phone {
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  font-size: calc(4px + 0.8vmin);
  color: #eeeee0;
}

.email {
  font-weight: 300;
  line-height: 1;
  font-size: calc(4px + 0.8vmin);
  color: #ddddee;
}


/* -------------------------------------------------------------------------------------------*/

#Incoming_Call_Div,
#Outgoing_Call_Div {
  z-index: 12;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 15vw;
  height: 2.5vw;
  min-width: 150px;
  min-height: 25px;
  max-width: 90vh;
  max-height: 15vh;
  max-width: auto;
  padding: calc(1px + 2vmin);
  background: -webkit-linear-gradient(#0000, #2222);
  /* For Safari 5.1 to 6.0 */
  /* For Opera 11.1 to 12.0 */
  /* For Firefox 3.6 to 15 */
  background: -webkit-linear-gradient(rgba(32, 32, 32, 0.8), rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8));
  background: linear-gradient(rgba(32, 32, 32, 0.8), rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8));
  border-radius: 1.5vmin;
  font-weight: 300;
  border: 0.25vmin solid;
  border-color: #000000;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .7);
  z-index: 11;
  /* 1 higher than the controls div */
}

#Incoming_Call_Div_Inner_Wrapper,
#Outgoing_Call_Div_Wrapper {
  width: 100%;
  height: 100%;
}

#Incoming_Call_Div_Text,
#Outgoing_Call_Div_Text {
  height: 66%;
  width: 100%;
  text-align: center;
  font-size: calc(2px + 1.0vmin);
}

#Incoming_Call_Div_Button_Wrapper,
#Outgoing_Call_Div_Button_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 50%;
}

#Incoming_Call_Div_Button_Wrapper > button,
#Outgoing_Call_Div_Button_Wrapper > button {
  margin-left: calc(2px + 0.15vw);
  margin-right: calc(2px + 0.15vw);
  font-size: calc(5px + 1.0vmin);
  background-color: #FF0000;
}


/* -------------------------------------------------------------------------------------------*/

#LocalVideo_Div_Wrapper {
  position: absolute;
  bottom: 2vmin;
  right: 2vmin;
  border: calc(2px + 0.25vmin) solid;
  border-radius: calc(1px + 0.15vmin);
  border-color: #050505;
  z-index: 14;
}

.LocalVideo_Div_Wrapper_Stationary {
  width: auto !important;
  height: auto !important;
  min-width: 200px !important;
  min-height: 112.5px !important;
  max-height: 15vh !important;
  max-width: 26.6vh !important;
}

#LocalVideo_Div_Main {
  overflow: hidden;
  z-index: 13;
  background-color: #050505;
  width: 12vw;
  height: 6.75vw;
  min-width: 200px;
  min-height: 112.5px;
  max-height: 15vh;
  max-width: 26.6vh;
  z-index: 14;
}

#LocalVideo_Main {
  -o-object-fit: contain;
  object-fit: contain;
}

#LocalVideo_Main_Overlay_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.LocalVideo_Main_Inner_Item {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  min-height: 112.5px;
  max-height: 15vh;
  z-index: 15;
}

.LocalVideo_Main_Overlay_Active {
  background-color: rgba(57, 181, 255, 0.75) !important;
}

.LocalVideo_Main_Overlay_Inactive {
  background-color: rgba(30, 30, 30, 0.5);
}

.LocalVideo_Main_Overlay {
  position: relative;
  box-sizing: border-box;
  text-align: center;
  color: #FFFFFF;
  font-size: 0px;
  margin: 0;
  -ms-flex-preferred-size: calc(100%/(4/2));
  flex-basis: calc(100%/(4/2));
  height: 50.25%;
  z-index: 16;
  font-size: calc(4px + 0.8vmin);
  border: calc(0px + 0.15vmin) solid #000000;
}

.LocalVideo_Main_Overlay:hover {
  background-color: rgba(130, 130, 130, 0.65);
}

.LocalVideo_Main_Overlay:active {
  background-color: rgba(200, 200, 200, 0.75);
}

#LocalVideo_Div_Secondary {
  width: 12vw;
  height: 6.75vw;
  min-width: 200px;
  min-height: 112.5px;
  max-height: 15vh;
  max-width: 26.6vh;
  margin-top: calc(10px + 1vh);
  border: calc(2px + 0.25vmin) solid;
  border-radius: calc(1px + 0.15vmin);
  background-color: #050505;
  border-color: #050505;
}

#LocalVideo_Secondary {
  -o-object-fit: contain;
  object-fit: contain;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  height: 100%;
}

#StudioVideo_div {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  background-color: #222222;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0vw 0vw 0vw 0vw;
  top: calc( 20px + 5vh);
  width: 100%;
  height: 100%;
}

.Account_div_Primary_Wrapper,
.CallInMenu_Outer_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.Center_Display_Div {
  z-index: 12;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 30vw;
  height: 22.5vw;
  min-width: 550px;
  min-height: 412px;
  max-width: 60vh;
  max-height: 45vh;
  max-width: auto;
  padding: calc(3px + 2%);
  background: -webkit-linear-gradient(#0000, #222);
  /* For Safari 5.1 to 6.0 */
  /* For Opera 11.1 to 12.0 */
  /* For Firefox 3.6 to 15 */
  background: -webkit-linear-gradient(rgba(32, 32, 32, 0.8), rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8));
  background: linear-gradient(rgba(32, 32, 32, 0.8), rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8));
  border-radius: 1.5vmin;
  font-weight: 300;
  border: 0.25vmin solid;
  border-color: #000000;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .7);
  z-index: 11;
  /* 1 higher than the controls div */
}

#Settings-1_div {
  overflow-y: hidden;
  position: relative;
  width: 95%;
  height: 50%;
  bottom: 0;
  margin-left: calc((100% - 95%)/2);
  margin-right: calc((100% - 95%)/2);
  padding-top: calc(3px + 0.25vmin);
  padding-bottom: calc(3px + 0.25vmin);
  border-top: calc(1px + 0.15vmin) solid #FFFFFF;
}

.SettingsPickupAndScreenShare {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: flex-start;
  flex-direction: row;
}

#Call_Controls {
  overflow-y: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 2%;
  z-index: 18;
}

#RightBlock_Button_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 44px;
  height: 10%;
  padding: calc(1px + 0.15vwmin);
}

.SettingsBlock_Button_Top {
  min-width: 60px;
  width: 27%;
  height: auto;
  border: none;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #FFFFFF;
  font-size: calc(8px + 0.8vmin);
  white-space: nowrap;
  vertical-align: center;
  font-weight: 300;
}

.SettingsBlock_Button_Top:Hover {
  color: #39b5ff;
}

.SettingsBlock_Button_Top:active {
  color: #1793dd;
}

#Account_Button_Wrapper {
  float: left;
  width: 50%;
}

.SettingsBlock_div_Primary_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: calc(1px + 0.15vmin) solid #666666;
  width: 100%;
  min-height: 270px;
}

#SettingsBlock_Toggle_Button_In_Menu_Wrapper {
  float: right;
  width: 50%;
}

#SettingsBlock_Toggle_Button_In_Menu {
  position: relative;
  border: none;
  left: 80%;
}

#Account_Toggle_Button_Out_Of_Menu {
  background: url('../images/Icons/Icon-Settings.png');
  border: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: calc(20px + 5vh + 0.2vh + 5px);
  right: calc(40px + 4vmin);
  min-width: 40px;
  min-height: 40px;
  width: 4vmin;
  height: 4vmin;
  z-index: 30;
}

.Hex-Icon {
  width: calc(40px + 12vmin);
  height: calc(40px + 12vmin);
  margin-left: calc( (100% - calc(40px + 12vmin))/2);
  margin-right: calc( (100% - calc(40px + 12vmin))/2);
}

#RightBlock_Toggle_Button_Out_Of_Menu {
  position: absolute;
  border: none;
  background: url('../images/Icons/Icon-Settings-Tab.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: calc(20px + 5vh + 0.2vh + 5px);
  right: 0vw;
  min-width: 40px;
  min-height: 40px;
  width: 4vmin;
  height: 4vmin;
  z-index: 30;
}

#loginformwrapper {
  margin: auto;
  width: 65%;
  height: 80%;
  padding: 0;
}

#signupformwrapper {
  margin: auto;
  width: 70%;
  height: 85%;
  padding: 0;
}

.flexRow {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  text-align: center;
}

.flexColumn {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  text-align: center;
}

.editProfileRowSizing {
  margin-top: 3%;
  margin-bottom: 3%;
  width: 100%;
  height: 10%;
}

.oneQuarter_Width {
  width: 25%;
}

.threeQuarter_Width {
  width: 75%;
}

.oneThird_Width {
  width: 33.333%;
}

.twoThird_Width {
  width: 66.666%;
}

.flexStart {
  justify-content: flex-start;
}

.flexCenter {
  justify-content: center;
}

.flexEnd {
  justify-content: flex-end;
}

.flexSpaceBetween {
  justify-content: space-between;
}

.flexSpaceAround {
  justify-content: space-around;
}

.editProfileMultiInput {
  box-sizing: border-box;
  width: 50%;
  height: 100%;
}

.editProfileSingleInput {
  box-sizing: border-box;
  width: 82%;
  height: 100%;
}

.editProfileApplyButton {
  align-self: center;
  box-sizing: border-box;
  width: 17%;
  height: 90%;
}

#editProfileWrapper {
  margin: auto;
  width: 100%;
  height: 100%;
  padding: 0;
}

#editProfileImageInput {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  z-index: -1;
}

#editProfileImageInputLabel,
#editProfileImageButton,
#takeVideoSnapshotButton {
  width: 31%;
  height: 100%;
  color: #FFFFFF;
  vertical-align: middle;
  text-align: center;
  line-height: 100%;
}

#editProfileImageInputLabel:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#editProfileCanvas {
  box-sizing: border-box;
  background-color: rgba(20, 20, 20, 0.9);
  border: solid calc(1px + 0.15vmin) #202020;
  width: 150px;
  height: 150px;
  margin-top: 3%;
  margin-bottom: 4%;
  align-self: center;
}

.Flex_Inner_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: auto;
  width: 95%;
  height: 100%;
  padding: 0;
}

#loginerror,
#signuperror {
  width: 100%;
  height: auto;
  text-align: center;
  margin-bottom: calc(5px + 0.25vmin);
  margin-top: calc( 2px + 0.15vmin);
}

#loginerror {
  border-bottom: 0.25vmin solid #D0D0D0;
}

#loginform,
#signupform,
.Flex_Inner_Wrapper > form {
  width: 100%;
  height: 100%;
}

#JoinShow_Button_Outer_Wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 5%;
  width: 100%;
}

#JoinShow_Button {
  width: 55%;
  height: 55%;
  line-height: 0px;
  text-align: center;
  font-weight: 300;
  font-size: calc(3px + 1.2vmin);
}

.CallIn_Leave_Button {
  box-sizing: border-box;
  position: absolute;
  vertical-align: middle;
  width: 30%;
  height: 6%;
  bottom: 10%;
  left: 35%;
  right: 35%;
}

#loginform .Full_Line_Input {
  height: 10%;
}

#Login_Form_Button_Wrapper,
#Signup_Form_Button_Wrapper,
#CallIn_Form_Button_Wrapper {
  margin-top: calc( 8px + 0.3vmin);
  --Login-Form-Button-Wrapper-Width: 80%;
  width: 80%;
  height: 20%;
  margin-left: calc((100% - 80%)/2);
  margin-right: calc((100% - 80%)/2);
}

#Login_Form_Button_Wrapper > button,
#Login_Form_Button_Wrapper > input,
#Signup_Form_Button_Wrapper > button,
#Signup_Form_Button_Wrapper > input,
#CallIn_Form_Button_Wrapper > button,
#CallIn_Form_Button_Wrapper > input {
  width: 45%;
  height: 45%;
  margin-top: calc(5px + 0.5vmin);
  font-size: calc(4px + 1.2vmin);
  font-weight: 300;
}

#Login_Form_Button_Wrapper > button,
#Signup_Form_Button_Wrapper > button,
#CallIn_Form_Button_Wrapper > button {
  float: right;
}

Login_Form_Button_Wrapper > input,
#Signup_Form_Button_Wrapper > input,
#CallIn_Form_Button_Wrapper > input {
  float: left;
}

#Signup_Form_Input_Wrapper, #CallIn_Form_Input_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  height: 60%;
  margin-left: calc((100% - 100%)/2);
  margin-right: calc((100% - 100%)/2);
}

#CallIn_Form_Input_Wrapper {
  width: 100%;
  height: 70%;
}

#CallIn_Form_Input_Wrapper > input {
  font-size: calc(9px + 0.5vmin);
}


/* -------------------------------------------------------------------------------------------*/


/* Right Block Div CSS
/* -------------------------------------------------------------------------------------------*/

#RightBlock_div {
  float: right;
  position: relative;
  z-index: 12;
  width: calc(150px + 13.8125%);
  top: calc( 20px + 5vh);
  height: calc(100% - (20px + 5vh));
  background-color: rgb(20, 60, 128);
  background: -webkit-linear-gradient(#0000, #2222);
  /* For Safari 5.1 to 6.0 */
  /* For Opera 11.1 to 12.0 */
  /* For Firefox 3.6 to 15 */
  background: -webkit-linear-gradient(rgba(32, 32, 32, 0.8), rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8));
  background: linear-gradient(rgba(32, 32, 32, 0.8), rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8));
  font-weight: 300;
  border-left: 0.25vmin solid;
  border-color: #000000;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, .7);
}

#RightBlock_Header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 100%;
  height: calc(20px + 1.5%);
  background: -webkit-linear-gradient(285deg, rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(8, 8, 8, 0.8), rgba(0, 0, 0, 0.8), rgba(8, 8, 8, 0.8));
  background: linear-gradient(165deg, rgba(24, 24, 24, 0.8), rgba(16, 16, 16, 0.8), rgba(8, 8, 8, 0.8), rgba(0, 0, 0, 0.8), rgba(8, 8, 8, 0.8));
  border-bottom: calc(1px + 0.05vmin) solid #000000;
}

#RightBlock_Toggle_Button {
  margin-right: 0;
  margin-left: auto;
}


/* -------------------------------------------------------------------------------------------*/


/* Format the text blocks used on the site */

.livetoairframe {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  height: 72.0vmin;
  width: 100vmin;
  margin: auto;
  background-image: -webkit-radial-gradient(rgba(0, 0, 0, 1), rgba(30, 30, 30, 1));
  background-image: radial-gradient(rgba(0, 0, 0, 1), rgba(30, 30, 30, 1));
  border: 0.2vmin solid;
  border-color: rgb(0, 0, 0);
  border-radius: 10px;
  z-index: 7;
}

.SecondaryWrapper {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.statusbarContact {
  background-clip: content-box;
  position: relative;
  width: 100%;
  height: 2.0vmin;
  background-color: #0a0;
  background-position: center;
  background-size: 0vmin 0vmin;
  border-right: 0.5vmin solid;
  border-left: 0.5vmin solid;
  border-top: 0.25vmin solid;
  border-color: #000;
  text-align: center;
  z-index: 10;
  /* 1 higher than the studio div */
}

.studiovideocontrols {
  position: relative;
  width: 100%;
  height: 5%;
  margin: 0px auto auto auto;
  background-color: rgba(0, 20, 0, 1);
  border-radius: 0px;
  border: 0.4vmin solid;
  border-color: #000;
  /* Dynamically set this to the correct status color */
  text-align: center;
  z-index: 9;
  /* 1 lower than the status div */
}

.studiovideo > video {
  -o-object-fit: contain;
  object-fit: contain;
  background-size: contain;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  z-index: 9;
}

.studiovideo {
  position: relative;
  width: 100%;
  /*116.0vmin;*/
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-color: rgba(0, 0, 0, 1);
  border-radius: 0px;
  border-color: #000;
  /* Dynamically set this to the correct status color */
  text-align: center;
  z-index: 9;
  /* 1 lower than the status div */
}

.studiovideo4 {
  float: left;
  position: relative;
  width: 45%;
  height: 45%;
  margin: 0px auto auto auto;
  background-color: rgba(0, 0, 0, 1);
  border-radius: 0px;
  border: 0.4vmin solid;
  border-color: #000;
  /* Dynamically set this to the correct status color */
  text-align: center;
  z-index: 9;
  /* 1 lower than the status div */
}

.studiovideo6 {
  float: left;
  position: relative;
  width: 45%;
  height: 30%;
  margin: 0px auto auto auto;
  background-color: rgba(0, 0, 0, 1);
  border-radius: 0px;
  border: 0.4vmin solid;
  border-color: #000;
  /* Dynamically set this to the correct status color */
  text-align: center;
  z-index: 9;
  /* 1 lower than the status div */
}

.centeredtext {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  text-align: center;
  width: 100%;
  height: 80%;
}

#SubmitButton {
  position: relative;
  width: 12.6829vmin;
  height: 4vmin;
}

#HideVideo {
  background: url('../images/Icons/Icon-LocalVideo-ON.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  border: none;
  z-index: 16;
  min-width: 40px;
  min-height: 40px;
  height: 4vmin;
  width: 4vmin;
  right: 0vmin;
  bottom: 0vmin;
}

#MuteVideo {
  position: relative;
  z-index: 12;
  min-width: 40px;
  min-height: 40px;
  height: 4vmin;
  width: 4vmin;
  margin: 0 auto;
}

#DisconnectConf {
  position: relative;
  z-index: 12;
  min-width: calc( 40px * 1.5);
  min-height: calc( 40px * 1.5);
  height: calc( 4vmin * 1.5);
  width: calc( 4vmin * 1.5);
  margin: 0 auto;
}

#MuteAudio {
  position: relative;
  z-index: 12;
  min-width: 40px;
  min-height: 40px;
  height: 4vmin;
  width: 4vmin;
  margin: 0 auto;
}

.select {
  width: 100%;
  height: 20%;
  margin-top: calc(1px + 1%);
}

#InstallScreenShare {
  width: 80%;
  margin-left: calc(10% - (2px + 0.5vmin)/2);
  margin-right: calc(10% - (2px + 0.5vmin)/2);
  text-align: center;
  padding: calc(2px + 0.5vmin);
  font-size: calc(13px + 0.2vmin);
  font-weight: 200;
}

.display_block {
  display: block;
}


#InstallScreenShare:visited {
  color: inherit;
  text-decoration: none;
}

#InstallScreenShare:link {
  color: inherit;
  text-decoration: none;
}

#autoAnswerLabel {
  width: 100%;
  height: 20%;
  margin-top: calc(1px + 1%);
}

div > label {
  display: inline-block;
  width: 25%;
  height: 100%;
  font-size: calc(4px + 1.3vmin);
}

div > select {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  padding: 0px;
  background-image: -webkit-linear-gradient(#eeeeee, #e5e5e5, #dddddd 40%, #e5e5e5, #eeeeee);
  background-image: linear-gradient(#eeeeee, #e5e5e5, #dddddd 40%, #e5e5e5, #eeeeee);
  background-color: #e5e5e5;
  border: calc(1px + 1%) solid;
  border-color: #cccccc;
  font-size: calc(7px + 0.75vmin);
  display: inline-block;
  width: 75%;
  height: 100%;
}


/* -------------------------------------------------------------------------------------------------- */

::-webkit-input-placeholder {
  color: #aaaaaa;
  font-family: sans-serif;
  font-style: italic;
  font-size: 15px;
  opacity: .3;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #aaaaaa;
  font-family: sans-serif;
  font-style: italic;
  font-size: 15px;
  opacity: .5;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #aaaaaa;
  font-family: sans-serif;
  font-style: italic;
  font-size: 15px;
  opacity: .5;
}

.VideoSourceReload-Mini {
  background-image: url('../images/Icon-Reload-Mini.png');
  background-repeat: no-repeat;
  border: none;
}

.VideoSourceReload-Mini:hover {
  background-image: url('../images/Icon-Reload-Mini-Hover.png');
  background-repeat: no-repeat;
  border: none;
}

.VideoSourceReload-Mini:focus {
  outline: 0;
}

.ActiveGuestDisplayName {
  text-align: center;
  font-family: sans-serif;
  color: #1aad50;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
  border: none;
}

.ActivityCenter-EventBlock {
  margin-bottom: 15px;
}

.ActivityCenter-EventIcon {
  float: left;
  margin-top: 2px;
  margin-right: 15px;
}

.ActivityCenter-EventDetails {
  align-items: left;
  margin-right: 30px;
  margin-left: 45px;
  word-wrap: break-word;
}

.ActivityCenter-EventDate {
  font-size: 70%;
  color: #33AFFF;
}

.ActivityCenter-EventTime {
  float: right;
  margin-top: 3px;
  font-size: 70%;
  color: #A4D4F3;
}

.ActivityCenter-EventFrom {
  margin-left: 15px;
  font-size: 80%;
  color: #0CB70E;
}

.ActivityCenter-EventContent {
  /* margin-bottom:25px; */
  font-size: 90%;
  color: #ffffff;
}

#HistCaption.ActivityCenter-Caption {
  font-size: 90%;
  text-align: center;
  margin-top: 8px;
  color: #6FA1E0;
}

#ActivityCenter-MessageSender {
  width: 100%;
  height: 40%;
  z-index: 30;
  background-color: #202020;
  border: 0px solid #000000;
}

#ActivityCenter-FormBlock {
  width: 100%;
}

.ActivityCenter-MessageToSend {
  z-index: 31;
  height: 40px;
  width: 100%;
  resize: none;
  float: left;
  color: #dddddd;
  background-color: #303030;
}

.ActivityCenter-MessageSendButton {
  background: #1383CB;
  color: #FFFFFF;
  height: 20px;
  width: 60px;
  float: right;
  font-size: 12px;
  font-weight: 500;
}

#ActivityCenter-MessageReceiver {
  width: 100%;
  height: 80%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #FF0000;
}

#ActivityCenter-HistText {
  text-align: left;
  color: #eeeeee;
}

.ActivityCenter-HistoryBox {
  height: 100%;
  width: 100%;
  opacity: 1;
  margin: 10px;
  resize: none;
  background-color: #202020;
  border: 0px solid #000000;
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  color: #dddddd;
  font-size: 82%;
  overflow-y: scroll;
  overflow-x: hidden;
}


/* -------------------------------------------------------------------------------------------------- */

#CallInMenu_Div {
  z-index: 10;
  text-align: center;
  width: 40vw;
  height: 50vw;
  min-width: 520px;
  min-height: 650px;
  max-width: 52vh;
  max-height: 65vh;
}

.Single_Centered_Button_Wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 10%;
}

.Single_Centered_Button_Wrapper > button {
  width: 45%;
  height: 100%;
}

fieldset {
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#guestformfs {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.Flex_Inner_Wrapper .Full_Line_Input {
  height: 9%;
}

.Half_Line_Input {
  box-sizing: border-box;
  width: 46%;
  margin-left: calc((50% - 46%)/2);
  margin-right: calc((50% - 46%)/2);
  height: 15%;
  padding-left: 1.5%;
  margin-top: 4.5%;
}

.Full_Line_Input {
  display: block;
  width: 90%;
  margin-left: calc((100% - 90%)/2);
  margin-right: calc((100% - 90%)/2);
  padding-left: 3%;
  margin-top: 4.5%;
}

.Grey_Blue_Input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  font-size: calc(8px + 0.8vmin);
  color: #D0D0D0;
  border: none;
  background-color: rgba(45, 45, 45, 0.85);
  border-top: solid calc(0.15vmin) black;
  border-right: solid calc(0.15vmin) black;
  border-left: solid calc(0.15vmin) black;
  border-bottom: solid calc(0.15vmin) #39B5FF;
  border-radius: calc(0.25vmin);
  box-shadow: calc(0.25px + 0.015vmin) calc(0.25px + 0.10vmin) calc(0.15px + 0.015vmin) calc(0.25px + 0.05vmin) #101010 inset, calc(-1*(0.25px + 0.015vmin)) 0px calc(0.25px + 0.025vmin) calc(0.25px + 0.05vmin) #101010 inset;
  padding-left: 3%;
}

.Grey_Blue_Input::-webkit-input-placeholder {
  color: #A0A0A0;
  font-style: italic;
  font-size: calc(3px + 0.9vmin);
  font-weight: 100;
}

.Grey_Blue_Input:-moz-placeholder {
  /* Firefox 18- */
  color: #A0A0A0;
  font-style: italic;
  font-size: calc(3px + 0.9vmin);
  font-weight: 100;
}

.Grey_Blue_Input::-moz-placeholder {
  /* Firefox 19+ */
  color: #A0A0A0;
  font-style: italic;
  font-size: calc(3px + 0.9vmin);
  font-weight: 100;
}

.Grey_Blue_Input:-ms-input-placeholder {
  color: #A0A0A0;
  font-style: italic;
  font-size: calc(3px + 0.9vmin);
  font-weight: 100;
}