/* Extra small devices (phones, less than 960px) */
/* No media query since this is the default in Bootstrap */
@media (max-width: 960px) {

	footer label {
		font-size: 10px;
	}

	#list-users, #full-container, #main-video {
		width: 100%;
		display: block;
		position: relative;
	}

	#main-video {
		width: 100% !important;
	}

	/* Utils */
	.hidden-sidebar-xs {
		top: calc(-100% - 160px) !important;
		transition: all 0.5s ease;
	}

	/* Modal */
	#body-modal {
		margin: 1.5em 1em;
	}

	#language-modal {
		margin: 1.5em 1em;
	}

	.modal {
		padding-left: 0 !important;
	}

	.modal form img {
		width: 250px;
	}

	.modal-content {
		width: auto !important;
		height: 450px;
	}

	#open-onboarding {
		height: 30px;
		width: auto;
		font-size: 0.9em;
	}

	#open-test {
		height: 30px;
		width: auto;
		font-size: 0.9em;
	}


	/* Header */
	header {
		z-index: 1000;
		border-bottom: 1px solid #23527c;
	}

	header #title img {
		height: 49px;
	}

	header .visible-xs {
		display: inline-block !important;
	}

	#settings-header a {
		font-size: 16px;
	}

	#modal-person, #modal-person-minus {
		font-size: 25px !important;
	}

	.div-direct-buttons .btn-sm {
		font-size: 5vw !important;
		padding: 3px 6px !important;
		width: 8vw;
		height: 8vw;
		line-height: 20px;
	}

	.div-direct-buttons span {
		font-size: 4.5vw !important;
	}

	#help-button {
		height: 8vw;
		width: 8vw;
	}

	#help-button img {
		height: 8vw;
		width: 8vw;
	}

	.div-add-person {
		background-color: white;
		position: relative;
	}
	

	/* Screenshare */
	#main-video {
		height: 0px !important;
		top: 0px !important;
	}

	#main-video.enabled-video {
		margin-top: 20px !important;
		height: 240px !important;
		margin-bottom: 20px;
	}

	.list-users-active .enabled-video {
		margin-top: 105px !important;
		height: 240px !important;
		margin-bottom: 20px;
	}

	.presentation-active #screen-share {
		height: auto;
		width: 80% !important;
	}

	/* Containers */
	#full-container {
		right: 0;
		background-color: #1081C2;
		height: calc(100% - 230px);
	}

	.super-container {
		float: none;
		width: 100%;
		height: 100%;
		display: block;
	}

	.container-options {
		width: 98%;
		margin: 1% 1%;
	}

	/* Chat */
	#chat {
		width: 98%;
		height: 250px;
	}

	/* Subtitles */
	#subtitles {
		width: 98%;
		height: calc(100% - 2%);
		resize: none;
	}

	#input-subtitles textarea {
		height: 100%;
	}

	.movie-mode {
		width: 98% !important;
	}

	/* Speaking */
	#speaking {
		height: 170px;
	}

	/* Translate voice*/
	#translate {
		height: 170px;
	}

	/* Interpreters */
	#interpreters {
		height: 200px;
	}


	/* Menu components*/
	#sidebar {
		font-size: 10px;
		width: 100%;
		height: auto;
		top: 0;
		position: absolute;
		z-index: 2147483650;
	}

	#sidebar ul {
		position: relative;
		text-align: left;
	}

	.item-sidebar {
		border-radius: none;
		margin: 0;
	}

	.body-item a {
		padding-left: 40%;
		width: 100%;
		border-radius: 0;
	}

	.body-item a:hover {
		background-color: #ccc;
	}

	.body-item p {
		display: inline-block;
		vertical-align: super;
	}

	/* Customer service */
	.div-cs {
		text-align: center !important;
	}

	.form-modal {
		padding: 0 !important;
	}

	#msg-screen-share strong {
		font-size: 20px;
	}


	/* ------------------ AVATAR MODE ------------------ */
	.container-options main {
		height: auto;
		min-height: calc(100% - 180px);
	}

	.container-options footer {
		position: relative;
		display: inline-block;
	}

	.container-options #full-container {
		height: auto !important;
	}

	.container-options #subtitles {
		height: 270px !important;
	}

	#wrapper.container-options {
		margin: 0 !important;
	    float: none !important;
	    width: 100% !important;
	}
}

@media (max-width: 361px) {
	.icon-add-person {
		margin: 0;
	}
	
	.icon-person {
		font-size: 40px !important;
	}

	.icon-add-person .volume {
		top: -1px;
		font-size: 14px !important;
	}
}