/*Fonts*/

/*@import url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");*/

.black {
    background-color: black;
    color: white;
    padding: 20px;
}

@font-face {
  font-family: "segoe-ui";
    font-display: auto;
  src: url("segoeicons.woff") format("woff");
}
@font-face {
  font-family: "segoe-ui-plus";
  font-display: auto;
  src: url("segoeicons_plus.woff") format("woff");
}

#muteSeparator, #leaveSeparator {
    visibility: hidden !important;
}

.activeUserInfo {
    top: 60px !important;
}

.userInfoPanel {
    background-color: rgba(10,10,10,0.5) !important;
}

/*Logo*/

#loaderLogo {
    background-image: url("../images/cafex.jpg");
    /*background-position: 50% 50%;*/
    /*background-size: cover;*/
    mix-blend-mode: darken !important;
}

.hoverButton div.up, .hoverButton div.over {
 background-size: 32px;
 /*border: 1px lightGrey solid;*/
 border-radius: 50%;
 padding:5px;
 font-weight: 100px;
}

.selfVideoContainer,  .thumbBaseElement .videoContent {
    border-radius: 50% !important;
}

.activeVideoContainer  .thumbBaseElement .videoContent {
    border-radius: 0px !important;
}

.activeVideoContainer .thumbBaseElement {
  /*  width: 500px !important;
    height: 500px !important;
    top:400px !important;*/

}

.selfVideoContainer .thumbBaseElement {
    width: 150px !important;
    height: 150px !important;
    left: 50px !important;
    bottom: 70px !important;
}

.thumbVideoContainer .thumbBaseElement {
    width: 150px !important;
    height: 150px !important;
    right: 50px !important;
    bottom: 50px !important;
}

#topBar {
    background-image: url("https://www.cafex.com/static/images/logo.png");
    background-repeat: no-repeat;
    background-position: 30px;
    background-size: 120px;
    border-bottom: 1px solid lightGrey;
    height: 60px;
}

#topBar {
    background-color: white !important;

    }

#loaderText {
    font-size: 0px;
    width:200px !important;
    left: -90px!important;
}

#loaderText:after {
    font-size: 30px;
    content: "Minimal";
    visibility: visible;
    display: block;
}
#meetingsRoot {
    background: #fff;
}

#systemUIBg {
    border-radius: 0px;
    background-color: white !important;
    margin-bottom: 20px;
}

#leaveSeparator {
    border: 0px solid white;
}

.thumbVideoContainer {
    top: auto;
    bottom: 2px;
}

.activeVideoContainer .thumbBaseElement {
    width: 100%;
    height: calc(100%);
    top: calc(40%);
}

.thumbBaseElement {
    border-radius: 0%;
}

.selfThumbInitials {
    color: black;
}

.thumbVideoContainer .thumbBaseElement {
    width: 150px;
    height: 100px;
    margin-right: 3px;
}

.selfVideoContainer .thumbBaseElement {
    width: 150px;
    height: 100px;
    left: 3px;
}

.thumbBaseElement .videoContent {
    border-radius: 0%;
    
}

.thumbBaseElement .videoContent, .videoContent {
    border-color: white !important;
    background-color: white !important;
    color: white !important;
}

.showHide.show.top {
    bottom: 0px;
    top: auto;
}

.selfVideoContainer .thumbBaseElement, .thumbVideoContainer .thumbBaseElement {
    bottom: 2px;
    top: auto;
}

.settingsPanel .chevron input[type=submit], .rtShare .documentItem .presentButton,
    .chat #chatSendButton {
    background-color: #eeeeee;
}

.meetingsform input[type=button], .meetingsform input[type=submit] {
    background-color: #cccccc;
}

.meetingsAlert {
    background-color: #eeeeee;
}

.meetingsAlert #alert_heading, 
.meetingsAlert #alert_subheading,
.meetingsAlert H1 {
    background-color: #444444;
}

.chevron::after {
    border-color: #000000;
}


/* Images */
.meetingsSystemMessageLogo {
    background-image: url(logo.png);
}


.font-button-microphone-off:before, .font-button-camera-off:before, .mutedIcon:before, .videoMutedIcon:before  {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 6px;
    background-color: white;
}

.hoverButton div, .mutedIcon, .videoMutedIcon {
 background-image: url("") !important;
 color: #171e37;
}

.font-button-microphone-off:before, .mutedIcon:before {
    background-image: url("") !important;
    font-family: "segoe-ui" !important;
    content: "\E720";
    font-size: 22px;
    color:#e5224a;
}

.font-button-camera-off:before, .videoMutedIcon:before {
    background-image: url("") !important;
    font-family: "segoe-ui" !important;
    content: "\E979";
    font-size: 30px;
    text-decoration: line-through;
    color:#e5224a;
}

.font-button-chat:before, .chat.up:before, .chatButton .up:before, .chat.over:before, .chatButton .over:before {
    background-image: url("") !important;
    font-family: "segoe-ui-plus" !important;
    content: "\E8F2";
    font-size: 30px;
}

.font-button-participants:before, .participantsIcon.up:before, .participantsIcon .up:before, .participantsIcon.over:before, .participantsIcon .over:before {
    font-family: "segoe-ui" !important;
    content: "\E716";
    font-size: 30px;
}

.font-button-present:before, .docShare.up:before, .docShare .up:before, .docShare.over:before, .docShare .over:before {
    font-family: "segoe-ui" !important;
    content: "\E72D";
    font-size: 30px;
}

.font-button-settings:before, .settings.up:before, .settings .up:before, .settings.over:before, .settings .over:before {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E713";
    font-size: 30px;
}

.font-button-enter-fullscreen:before, .enterFullscreen.up:before, .enterFullscreen .up:before, .enterFullscreen.over:before, .enterFullscreen .over:before, .exitFullscreen.up:before, .exitFullscreen .up:before,
.exitFullscreen.over:before, .exitFullscreen .over:before {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E9A6";
    font-size: 30px;
}

.font-button-leave:before, .leave.up:before, .leave .up:before, .leave.over:before, .leave .over:before {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E711";
    font-size: 30px;
}

.font-button-message:before, .inviteButton.up:before, .inviteButton .up:before, .inviteButton.over:before, .inviteButton .over:before {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E715";
    font-size: 30px;
}


.font-button-record:before, .recordButton.up:before, .recordButton .up:before, .recordButton.over:before, .recordButton .over:before {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E81D";
    font-size: 30px;
}

.font-button-microphone-off:before, .micOff .up:before, .micOff.up:before, .micOff .over:before, .micOff.over:before, .micOn .over:before, .micOn.over:before  {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E720";
    font-size: 30px;
    color:#e5224a;
}

.font-button-microphone-on:before, .micOn .up:before, .micOn.up:before{
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E720";
    font-size: 30px;
}

.font-button-camera-off:before, .cameraOff .up:before, .cameraOff.up:before, .cameraOff .over:before, .cameraOff.over:before, .cameraOn .over:before, .cameraOn.over:before {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E714";
    font-size: 30px;
    color:#e5224a;
}

.font-button-camera-on:before, .cameraOn .up:before, .cameraOn.up:before {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E714";
    font-size: 30px;
}

.font-button-feedback:before, .userFeedback .up:before, .userFeedback.up:before, .userFeedback .over:before, .userFeedback.over:before, .userFeedback .over:before, .userFeedback.over:before  {
    background-image: none;
    font-family: "segoe-ui" !important;
    content: "\E789";
    font-size: 30px;
}

.disclaimerButton .up:before, .disclaimerButton.up:before, .disclaimerButton .over:before, .disclaimerButton.over:before, .disclaimerButton .over:before, .disclaimerButton.over:before  {
    background-image: none;
    font-family: "segoe-ui";
    content: "\E946";
    font-size: 30px;
}


/* Dialogues */

.button {
    background-color: darkgrey !important;
}

.meetingsCheckBox input[type=checkbox]:checked ~ .check {
    border: 2px solid black !important;
}

#dialogContainer form, .feedbackForm, #feedbackFormContainer form {
    background-color: lightgrey;
    color: black;
}

#dialogContainer h1, .uff_heading, #feedbackFormContainer h1 {
    background-color: white;
}

#dialogContainer .dialog_subheading, .uff_subheading, #pref_subheading, #feedbackFormContainer .subheading {
    background-color: white;
}

#dialogContainer input.button, #feedbackFormContainer input[type="button"] {
    background-color: white;
}

#dialogContainer input.button:hover, #feedbackFormContainer input[type="button"]:hover {
    color: grey;
}


#dialogContainer textarea, #feedbackFormContainer textarea {
    color: grey;
}

#dialogBG, #feedbackFormBG {
    background:rgba(120,120,120,0.8) !important;
}

/* Panels */

.chat div#background, .rtShare div#background, 
.rtRoster div#background, .settingsPanel div#background,
.disclaimerPanel div#background {
    background: rgba(160,160,160,0.8);
}

#meetingsPanels {
    top: 0px !important;
}

#meetingsPanels #topSpace {
    background: rgba(80,80,80,0.8);
}

#chatMessagesContainer div, #meetingsPanels #topSpace, #topSpace #heading
 {
    color: white !important;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    
}