* {
	margin:       0;
	padding:      0;
}
html, body {
	width:        100%;
	height:       100%;
	font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}
#vidyoConnectorApp {
}
#options {
	position:     absolute;
	top:          0px;
	left:         0px;
	bottom:       60px;
	width:        350px;
	text-align: center;
	z-index: 99;
}
#optionsVisibilityButton {
	position: absolute;
	z-index: 100;
}
#renderer {
	position:     absolute;
	top:          0px;
	right:        0px;
	bottom:       60px;
	z-index: 99;
}
#helper {
	position:     absolute;
	top:          0px;
	left:         0px;
	width:        100%;
	height:       100%;
	background:   white;
	color:        #5d5d5d;
	font-weight:  300;
}
#helper table {
	max-width: 1200px;
	height: 100%;
	margin: auto;
}
#helper td {
	vertical-align: middle;
	text-align:     center;
	width:          800px;
	padding:        10px;
}
#helper img {
	vertical-align: middle;
}
.helperCheck {
	vertical-align: middle;
	text-align:		left;
	padding: 		10px;
}
.helperHeader, .helperFooter {
	padding:        30px 0px;
}
#helperText {
	font-size:  36px;
}
#helperText p {
	font-size:  16px;
}

.helperFooter a {
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	background-color: #fff;
    border: 2px solid #e23b94;
	display: inline-block;
	padding: 14px 0px 14px 0px;
	color: #000;
	font-weight: normal;
	width: 200px;
	margin: auto;
	border-radius: 5px;
}

.helperFooter a:hover {

	color:#e23b94;

}

#helper ul {
	display:         inline-block;
	list-style-type: none;
}

.toolbar {
	position:          absolute;
	bottom:            0px;
	height:            60px;
	text-align:        center;
	background-color:  rgb(19, 38, 58);
}

#toolbarLeft {
	left:               0%;
	right:             70%;
	width:             30%;
}
#toolbarCenter {
	left:              30%;
	right:             30%;
	width:             40%;
}
#toolbarRight {
	left:              70%;
	right:              0%;
	width:             30%;
}
.rendererWithOptions {
	left:         350px;
}
.rendererFullScreen {
	left:         0px;
}
.rendererFullScreenPermanent {
	left:         0px;
}
.hidden {
	display:      none;
}
.hiddenPermanent {
	display:      none;
}
#error {
	color:        red;
	font-size:    50%;
}
#message {
	font-size:    50%;
}
#participantStatus {
	color:        white;
	line-height:  60px;
	margin:       0px 10px;
	position:     absolute;
	left:         0px;
}
#connectionStatus {
	color:        white;
	line-height:  50px;
	margin:       0px 10px;
	position:     absolute;
	right:        0px;
	bottom:       10px;
}
#clientVersion {
	color:        white;
	line-height:  10px;
	margin:       0px 10px;
	position:     absolute;
	right:        0px;
	bottom:       3px;
	font-size:    75%;
}
.center {text-align: center; }
.options form  { }
.options p     { text-align: center; }
.options label { display: inline-block; width:105px; margin: 5px; padding: 4px; text-align: right; }
.options input { display: inline-block; width:195px; margin: 5px; padding: 4px; }
.options select{ display: inline-block; width:195px; margin: 5px; padding: 4px; }

.logo {
	margin:      20px;
	width:       300px;
}
.optionsVisibiliyButtonElements {
	width:       30px;
	height:      30px;
	background-repeat:   no-repeat;
	background-position: center;
	background-color:    rgb(255, 255, 255);
	border:              0;
}
.toolbarButton        {
	width:               100px;
	height:              60px;
	background-size:     32px auto;
	background-repeat:   no-repeat;
	background-position: center;
	background-color:    rgb(19, 38, 58);
	border:              0;
}

.cameraOn      { background-image: url(Images/cameraOn.png); }
.cameraOff     { background-image: url(Images/cameraOff.png); }
.microphoneOn  { background-image: url(Images/microphoneOn.png); }
.microphoneOff { background-image: url(Images/microphoneOff.png); }
.callStart     { background-image: url(Images/callStart.png); }
.callEnd       { background-image: url(Images/callEnd.png); }
.showOptions   {
	background-image: url(Images/showOptions.png);
	background-size:  30px auto;
	left: 0px;
}
.hideOptions   {
	background-image: url(Images/hideOptions.png);
	background-size:  15px auto;
	left: 315px;
}

/* Renderer Layout CSS */
.pluginOverlay .videoContainer .frame video {
	background-image: url(Images/default_profile.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 33%;
}