p::selection{
	color: white;
	background: #01579B;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Armenian:wght@200;300;400;500&display=swap');

@font-face {
	font-family: 'Kelvinch Regular Armenian';
	src: url('/assets/fonts/kelvinch-regular-armenian.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Kelvinch Bold Armenian';
	src: url('/assets/fonts/kelvinch-bold-armenian.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Kelvinch Italic Armenian';
	src: url('/assets/fonts/kelvinch-italic-armenian.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Kelvinch BoldItalic Armenian';
	src: url('/assets/fonts/kelvinch-bolditalic-armenian.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Kelvinch Regular Latin';
	src: url('/assets/fonts/kelvinch-regular-latin.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('/assets/fonts/DejaVuSans-Bold.woff2') format('woff2'),
        url('/assets/fonts/DejaVuSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('/assets/fonts/DejaVuSans-ExtraLight.woff2') format('woff2'),
        url('/assets/fonts/DejaVuSans-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('/assets/fonts/DejaVuSans-Oblique.woff2') format('woff2'),
        url('/assets/fonts/DejaVuSans-Oblique.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('/assets/fonts/DejaVuSans-BoldOblique.woff2') format('woff2'),
        url('/assets/fonts/DejaVuSans-BoldOblique.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-BlackItalic.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-Italic.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-Bold.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-BoldItalic.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-Black.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-Light.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('/assets/fonts/DejaVuSans.woff2') format('woff2'),
        url('/assets/fonts/DejaVuSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-Thin.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-Regular.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-MediumItalic.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-Medium.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-ThinItalic.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mardoto';
    src: url('/assets/fonts/Mardoto-LightItalic.woff2') format('woff2'),
        url('/assets/fonts/Mardoto-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

body{
	float: left;
	width: 90vw;
	height: auto;
	min-height: 100vh;
	margin: 0;
	padding: 0 5vw;
	display: flex;
	flex-direction: column;
}

header{
	float: left;
	height: 96px;
	margin: 0;
	padding: 0 5vw;
	display: block;
}

body > main{
	float: left;
	width: 90vw;
	height: auto;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.left{
	flex: 1 1 calc(30vw - 32px);
	float: left;
	max-width: calc(90vw - 32px);
	height: auto;
	margin: 0;
	padding: 48px 16px 16px 16px;
	display: block;
}

.left section{
	float: left;
	width: calc(100% - 32px);
	height: auto;
	margin: 0 0 32px 0;
	padding: 16px;
	background: #f9f9f9;
	border-radius: 8px;
	display: block;
}

.left section h1{
	line-height: 24px;
	font-family: "Google Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 8px 0;
	color: #01579B;
	display: block;
}

.left section h2{
	line-height: 22px;
	font-family: "Noto Sans Armenian", sans-serif;
	font-size: 18px;
	font-weight: 300;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 6px 0;
	color: black;
	display: block;
	white-space: nowrap;
}

.left section ul{
	list-style: none;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
}

.left section ul li{
	float: left;
	width: 100%;
	height: auto;
	display: block;
}

.left section ul:not(#queue) li{
	padding: 0 0 4px 0;
	margin: 0;
}

.left section ul#queue li{
	background: #01579B;
	border-radius: 6px;
	transition: background .1s;
}

	.left section ul#queue li:nth-of-type(1){
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.left section ul#queue li:not(:nth-of-type(1)){
		margin-bottom: 8px;
	}

	.left section ul#queue li:not(:last-child){
		margin-bottom: 8px;
	}

	.left section ul#queue li:last-child{
		margin-bottom: 0;
	}

	.left section ul#queue li:hover{
		background: #2379BD;
	}

.left section ul li a{
	text-decoration: none;
	line-height: 20px;
	font-family: "Noto Sans Armenian", sans-serif;
	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}

	.left section ul:not(#queue) li a:hover{
		opacity: .75;
	}

.left section ul:not(#queue) li a{
	padding: 0;
	color: black;
}

.left section ul#queue li a{
	text-align: center;
	padding: 10px 0 12px 0;
	color: #f9f9f9;
}

.right{
	flex: 1 1 calc(60vw - 32px);
	float: left;
	min-width: calc(60vw - 32px);
	max-width: calc(90vw - 32px);
	height: auto;
	margin: 0;
	padding: 48px 16px 16px 16px;
	display: block;
}

.right section{
	float: left;
	min-width: calc(60vw - 32px - 32px);
	width: 100%;
	max-width: calc(90vw - 32px - 32px);
	height: auto;
	margin: 0 0 32px 0;
	padding: 16px;
	background: #f9f9f9;
	border-radius: 8px;
	display: block;
}

.right section header{
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 4px 0;
	display: block;
}

.right section header h1{
	line-height: 24px;
	font-family: "Google Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	float: left;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 0 12px 0;
	border-bottom: 1px solid #01579B;
	color: #01579B;
	display: block;
}

.right section header h1:after{
	content: " ";
	float: right;
	width: 32px;
}

.right section table{
	float: left;
	min-width: calc(60vw - 32px - 32px - 32px - 32px);
	width: 100%;
	max-width: calc(90vw - 32px - 32px);
	height: auto;
	margin: 0;
	padding: 36px 0 0 0;
	border-radius: 6px;
	border-spacing: 4px;
	display: block;
	clear: both;
	overflow-y: auto;
}

.right section table tr{
	margin: 0;
	padding: 0;
}

.right section table th, right section table td{
	text-align: center;
	width: auto;
	margin: 0;
	padding: 0;
}
.right section table th{

}
.right section table td{
	background: white;
	border-radius: 4px;
}

.right section table th span, .right section table td span{
	text-align: center;
	font-family: "Noto Sans Armenian", sans-serif;
	width: auto;
	height: aiuto;
	margin: 0;
	padding: 8px 12px 10px 12px;
	display: inline-block;
	white-space: nowrap;
}

.right section table th span{
	line-height: 22px;
	font-size: 18px;
	font-weight: 400;
}

.right section table td span{
	line-height: 20px;
	font-size: 16px;
	font-weight: 300;
}

.right section table td span a{
	text-decoration: none;
	color: #01579B;
}

.right section p{
	line-height: 20px;
	font-family: "Noto Serif Armenian", serif;
	font-optical-sizing: auto;
	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 8px 0 16px 0;
	color: black;
	display: block;
}

.right section form{
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 36px 0 0 0;
	display: block;
}

.right section form input{
	text-align: center;
	font-family: 'Mardoto';
	font-weight: 100;
	line-height: 1.25;
	font-size: 20px;
	float: left;
	width: 100%;
	height: auto;
	padding: 8px 0;
	border-radius: 6px;
	transition: border .1s;
	outline: 0;
}
	.right section form input::placeholder{
		color: #01579B;
		opacity: .25;
	}

.right section form input[type="text"]{
	margin: 0 0 8px 0;
	background: white;
	color: #01579B;
	border: 1px solid rgba(0, 0, 0, .1);
	box-sizing: border-box;
}

.right section form input[type="email"]{
	margin: 0 0 8px 0;
	background: white;
	color: #01579B;
	border: 1px solid rgba(0, 0, 0, .1);
	box-sizing: border-box;
}

.right section form input[type="phone"]{
	margin: 0 0 8px 0;
	background: white;
	color: #01579B;
	border: 1px solid rgba(0, 0, 0, .1);
	box-sizing: border-box;
}

.right section form input[type="password"]{
	margin: 0 0 8px 0;
	background: white;
	color: #01579B;
	border: 1px solid rgba(0, 0, 0, .1);
	box-sizing: border-box;
}

.right section form input[type="submit"]{
	margin: 0;
	background: #01579B;
	color: #f9f9f9;
	border: none;
	transition: background .1s;
	cursor: pointer;
}
	.right section form input[type="submit"]:hover{
		background: #2379BD;
	}

	.right section form input:not([type="submit"]):focus{
		border: 1px solid rgba(0, 0, 0, .25);
	}

footer{
	float: left;
/*	width: 90vw;*/
	height: 96px;
	margin: 0;
	padding: 0 5vw;
	display: block;
/*		background: #f9f9f9;*/
}



body > main > #video{
	float: left;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: block;
}

body > main > #video > section{
	position: fixed;
	border-radius: 16px;
	margin: 0;
	padding: 0;
	background: url("assets/images/user.png"), #f9f9f9;
	background-size: auto 50%;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	box-shadow: 0 0 4px rgba(0, 0, 0, .1);
	overflow: hidden;
}

body > main > #video > section > video{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%) scale(-1, 1);
}

@media (orientation: landscape) {
	#video #beneficiary{
		top: 5vh;
		left: 5vh;
		width: calc((100vw - 15vh)/2);
		height: 60vh;
	}
	#video #interpreter{
		top: 5vh;
		right: 5vh;
		width: calc((100vw - 15vh)/2);
		height: 60vh;
	}
	#video #specialist{
		bottom: 5vh;
		left: 50vw;
		width: calc((100vw - 15vh)/4);
		height: 25vh;
		transform: translateX(-50%);
	}
	#video #controls{
		position: fixed;
		bottom: 5vh;
		right: 5vh;
		width: calc(((100vw - 20vh) - ((100vw - 15vh)/3))/2);
		height: 64px;
		margin: 0;
		padding: 0;
		background: #f9f9f9;
		border-radius: 16px;
		box-shadow: 0 0 2px rgba(0, 0, 0, .1);
		display: block;
		overflow: hidden;
	}
	#video #controls > a{
		float: right;
		width: 64px;
		height: 48px;
		margin: 8px;
		padding: 0;
		background: url("assets/images/hang-call.png"), coral;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 12px;
		display: block;
		transition: opacity .25s;
	}
		#video #controls > a:hover{
			opacity: .75;
		}
}

@media (orientation: portrait) {
	#video #beneficiary{
		top: 5vh;
		left: 5vh;
		width: calc(100vw - 10vh);
		height: 42.5vh;
	}
	#video #interpreter{
		top: 52.5vh;
		right: 5vh;
		width: calc(100vw - 10vh);
		height: 42.5vh;
	}
	#video #specialist{
		bottom: 7.5vh;
		right: 7.5vh;
		width: calc((100vw - 15vh)/3);
		height: calc((100vw - 15vh)/4);
	}
	#video #controls{
		position: fixed;
		top: 7.5vh;
		right: 7.5vh;
		width: calc(((100vw - 20vh) - ((100vw - 15vh)/3))/2);
		min-width: 192px;
		height: 64px;
		margin: 0;
		padding: 0;
		background: white;
		border-radius: 16px;
		box-shadow: 0 0 2px rgba(0, 0, 0, .1);
		display: block;
		overflow: hidden;
	}
	#video #controls > a{
		float: right;
		width: 64px;
		height: 48px;
		margin: 8px;
		padding: 0;
		background: url("assets/images/hang-call.png"), coral;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 12px;
		display: block;
		transition: opacity .25s;
	}
		#video #controls > a:hover{
			opacity: .75;
		}
}

body > main > #video > section > article{
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 5vh);
	height: auto;
	margin: 0;
	padding: 2.5vh;
	display: block;
	z-index: 1;
}

body > main > #video > section > article > header{
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
}

body > main > #video > section > article > header > h1{
	font-family: 'DejaVu Sans';
	line-height: 1.25;
	font-size: max(3vw, 22px);
	font-weight: 400;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: block;
}

body > main > #video > section > article > p{
	font-family: 'Noto Sans Armenian', sans-serif;
	font-weight: 300;
	line-height: 1.5;
	font-size: max(1.8vw, 18px);
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

body > main > #video > section.waiting > article > p{
	display: block;
}

body > main > #video > section.joined > article > p{
	display: none;
}

div#notifications{
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 50vw;
	max-width: calc(90vw - 32px);
	height: auto;
	margin: 0;
	padding: 0;
	background: #ef6c00;
	border-top: 32px solid #ef6c00;
	border-right: 32px solid #ef6c00;
	border-bottom: 48px solid #ef6c00;
	border-left: 32px solid #ef6c00;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
}
	div#notifications.hide{
		display: none;
	}
	div#notifications.show{
		display: block;
	}

div#notifications a{
	position: fixed;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	background: url("assets/images/close.png"), white;
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	cursor: pointer;
}

div#notifications header{
	float: left;
	width: calc(100% - 96px);
	height: auto;
	min-height: 64px;
	margin: 0;
	padding: 16px 96px 16px 0;
	display: block;
}

div#notifications header h1{
	line-height: 24px;
	font-family: "Google Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 8px 0;
	color: white;
	display: block;
}

div#notifications p{
	line-height: 20px;
	font-family: "Noto Serif Armenian", serif;
	font-optical-sizing: auto;
	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 8px 0 16px 0;
	color: #f9f9f9;
	display: block;
}