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

#meetingsRoot {
    background: #000000;
}

#loaderText {
    font-size: 0px;
}

#loaderLogo {
    display: none;
}

.topDown #systemButtons {
    top: auto;
}

#loadingMessage {
    display: none;
}

#loaderBg {
    background-color: #000;
}

#loaderText:after {
    font-size: 30px;
    content: "Connecting to Meeting...";
    visibility: visible;
    display: block;
    width: 500px;
    margin-left: -200px;
}

#systemUIBg {
    border-radius: 0px;
    background-color: #222222;
}

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

.activeVideoContainer .thumbBaseElement {
    width: 100%;
    height: calc(100% - 175px);
    top: calc(50% + 25px);
}

#systemButtons {
    background-color: #222222;
}

#topBar {
    visibility: hidden;
}

.hoverButton {
    width: 45px;
    height: 45px;   
}

.thumbBaseElement {
    border-radius: 0%;
}

.thumbBaseElement .videoContent {
    border: 1px solid white !important;
    background-color: : black !important;
}

.activeVideoContainer .thumbBaseElement .videoContent {
    border: 1px black !important;
}

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

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

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

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

.selfVideoContainer .thumbBaseElement {
    top: 2px;
    bottom: 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);
}

.mutedIcon:before, .videoMutedIcon:before  {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 5px;
}

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

.hoverButton div:before {
    height:30px !important;
}

.hoverButton {
    color: white !important;
}

.mainMenuBarSeparator {
    display: none !important;
}

.flyingTooltip {
    display:none;
}

.font-button-microphone-off:before, .mutedIcon:before {
    background-image: url("") !important;
    font-family: "FontAwesome" !important;
    content: "\f131";
    font-size: 28px;
    color:red;
    font-weight: 100 !important;

}

.font-button-camera-off:before, .videoMutedIcon:before {
    background-image: url("") !important;
    font-family: "FontAwesome" !important;
    content: "\f03d";
    font-size: 28px;
    text-decoration: line-through;
    color:red;
    font-weight: 100 !important;

}

.font-button-chat:before, .chat.up:before, .chatButton .up:before, .chat.over:before, .chatButton .over:before {
    background-image: url("") !important;
    font-family: "FontAwesome" !important;
    content: "\f086";
    font-size: 28px;
    font-weight: 100 !important;

}

.font-button-participants:before, .participantsIcon.up:before, .participantsIcon .up:before, .participantsIcon.over:before, .participantsIcon .over:before {
    font-family: "FontAwesome" !important;
    content: "\f0c0";
    font-size: 28px;
    font-weight: 100 !important;

}

.font-button-present:before, .docShare.up:before, .docShare .up:before, .docShare.over:before, .docShare .over:before {
    font-family: "FontAwesome" !important;
    content: "\f15b";
    font-size: 28px;
    font-weight: 100 !important;

}

.font-button-message:before, .inviteButton.up:before, .inviteButton .up:before, .inviteButton.over:before, .inviteButton .over:before {
    font-family: "FontAwesome" !important;
    content: "\f0e0";
    font-size: 28px;
    font-weight: 100 !important;
}

.font-button-settings:before, .settings.up:before, .settings .up:before, .settings.over:before, .settings .over:before {
    background-image: none;
    font-family: "FontAwesome" !important;
    content: "\f013";
    font-size: 28px;
    font-weight: 100 !important;
}

.font-button-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: "FontAwesome" !important;
    content: "\f0b2";
    font-size: 28px;
    font-weight: 100 !important;
}

.font-button-leave:before, .leave.up:before, .leave .up:before, .leave.over:before, .leave .over:before {
    background-image: none;
    font-family: "FontAwesome" !important;
    content: "\f08b";
    font-size: 28px;
    font-weight: 100 !important;

}

.font-button-record:before, .recordButton .up:before, .recordButton.up:before, .recordButton .over:before, .recordButton.over:before, .recordButton .over:before, .recordButton.over:before  {
    background-image: none;
    font-family: "FontAwesome" !important;
    content: "\f111";
    font-size: 28px;
    font-weight: 100 !important;

}

.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: "FontAwesome" !important;
    content: "\f131";
    font-size: 28px;
    color:red;
    font-weight: 100 !important;

}

.font-button-microphone-on:before, .micOn .up:before, .micOn.up:before{
    background-image: none;
    font-family: "FontAwesome" !important;
    content: "\f130";
    font-size: 28px;
    font-weight: 100 !important;
}

.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: "FontAwesome" !important;
    content: "\f03d";
    font-size: 28px;
    text-decoration: line-through;
    color:red;
    font-weight: 100 !important;
}

.font-button-camera-on:before, .cameraOn .up:before, .cameraOn.up:before {
    background-image: none;
    font-family: "FontAwesome" !important;
    content: "\f03d";
    font-size: 28px;
    text-decoration: line-through;
}


.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: "FontAwesome" !important;
    content: "\f0a1";
    font-size: 28px;
    color:white;
    font-weight: 100 !important;
}

.font-button-feedback:before, .userFeedback .up:before, .userFeedback.up:before {
    background-image: none;
    font-family: "FontAwesome" !important;
    content: "\f0a1";
    font-size: 28px;
    font-weight: 100 !important;
}

.disclaimerButton .up:before, .disclaimerButton.up:before, .disclaimerButton .over:before, .disclaimerButton.over:before, .disclaimerButton .over:before, .disclaimerButton.over:before {
    background-image: none;
    font-family: "FontAwesome";
    content: "\f05a";
    font-size: 28px;
    font-weight: 100 !important;
}

/* Labels */
.font-button-chat:after, .chat.up:after, .chatButton .up:after, .chat.over:after, .chatButton .over:after {
    content: "Chat";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
}

.font-button-participants:after, .participantsIcon.up:after, .participantsIcon .up:after, .participantsIcon.over:after, .participantsIcon .over:after {
    content: "Roster";
    font-size: 12px;
    float: left;
    left: 4px;
    position: absolute;
    bottom: 0px;
}

.font-button-present:after, .docShare.up:after, .docShare .up:after, .docShare.over:after, .docShare .over:after {
    content: "Share";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
}

.font-button-message:after, .inviteButton.up:after, .inviteButton .up:after, .inviteButton.over:after, .inviteButton .over:after {
    content: "Invite";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
}

.font-button-settings:after, .settings.up:after, .settings .up:after, .settings.over:after, .settings .over:after {
    content: "Settings";
    font-size: 12px;
    float: left;
    margin: 0 auto;
    margin-top: 2px;
}

.font-button-enter-fullscreen:after, .enterFullscreen.up:after, .enterFullscreen .up:after, .enterFullscreen.over:after, .enterFullscreen .over:after, .exitFullscreen.up:after, .exitFullscreen .up:after,
.exitFullscreen.over:after, .exitFullscreen .over:after {
    content: "Full";
    font-size: 12px;
    float: left;
    left: 11px;
    position: absolute;
    bottom: 0px;
}

.font-button-leave:after, .leave.up:after, .leave .up:after, .leave.over:after, .leave .over:after {
    content: "Leave";
    font-size: 12px;
    float: left;
    left: 5px;
    position: absolute;
    bottom: 0px;
}

.font-button-record:after, .recordButton.up:after, .recordButton .up:after, .recordButton.over:after, .recordButton .over:after {
    content: "Record";
    font-size: 12px;
    float: left;
    left: 5px;
    position: absolute;
    bottom: 0px;
}

.font-button-microphone-off:after, .micOff .up:after, .micOff.up:after, .micOff .over:after, .micOff.over:after, .micOn .over:after, .micOn.over:after  {
    content: "Audio";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
    color:red;
}

.font-button-microphone-on:after, .micOn .up:after, .micOn.up:after{
    content: "Audio";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
}

.font-button-camera-off:after, .cameraOff .up:after, .cameraOff.up:after, .cameraOff .over:after, .cameraOff.over:after, .cameraOn .over:after, .cameraOn.over:after {
    content: "Video";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
    color:red;
}

.font-button-camera-on:after, .cameraOn .up:after, .cameraOn.up:after {
    content: "Video";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
}

.font-button-feedback:after, .userFeedback .up:after, .userFeedback.up:after, .userFeedback .over:after, .userFeedback.over:after, .userFeedback .over:after, .userFeedback.over:after {
    content: "Feedback";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
}


.font-button-disclaimer:after, .disclaimerButton .up:after, .disclaimerButton.up:after, .disclaimerButton .over:after, .disclaimerButton.over:after, .disclaimerButton .over:after, .disclaimerButton.over:after {
    content: "Terms";
    font-size: 12px;
    float: left;
    left: 8px;
    position: absolute;
    bottom: 0px;
}


/* Dialogues */

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

#dialogContainer h1, #feedbackFormContainer h1 {
    background-color: black;
}

#dialogContainer .dialog_subheading, #feedbackFormContainer .subheading {
    background-color: black;
}

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

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


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

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

#feedbackFormBG {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Panels */

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

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

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

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



}