@import url(https://fonts.googleapis.com/css?family=Quicksand);
head {
	font-family: 'Quicksand', sans-serif;
	font-display: swap;
}

input {
	outline: none;
	opacity: 0.6;
	-webkit-appearance: none;
	z-index: 2;
	width: 6rem;
	margin:  2px;
	padding: 2px;
	
	max-height: 1.4rem;
	text-decoration: none;
	font-family: 'Quicksand', sans-serif;
	font-display: swap;
    text-align: center;
	font-size: 1.0rem;
	line-height: 1.0rem;
	border-radius: 20px/2px;

}
input:hover{
	opacity: 0.99;
}
input:focus{
	opacity: 1.0; 
	outline: none;
}
.clickable{
	opacity: 0.7;
}
.clickable:hover{
	opacity: 0.99;
}
.clickable:focus{
	opacity: 1.0;
}
button{
	cursor:pointer;
}
input[type="button" i]{
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-sizing:content-box;
					box-sizing:content-box;
	height: 20px;
	width: 6rem;
	cursor:pointer;
}
input[type="button" i]:hover{
	opacity: 0.99;
}
input[type="button" i]:active{
	opacity: 1.0;
}
div{
	-webkit-box-sizing:content-box;
	        box-sizing:content-box;
}
form{
	display: -ms-grid;
	display: grid;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	height: 0;
	margin: 0;
	padding: 0;
}
.form1{
	display: -ms-grid;
	display: grid;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	height: auto;
	margin: 0;
	padding: 0;
	-ms-grid-areas: 'a b'
	'c d'
	'e e';
	grid-template-areas: 'a b'
	'c d'
	'e e';
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
	width:100%;
	height:100%;
  margin: 0;
	padding: 0;}
p{
    margin: 0;
    padding: 0;}

body {
	width:100%;
   scrollbar-width: thin;
	height:100%;
	font-family: 'Quicksand', sans-serif;
	font-display: swap;
	margin: 0;
	padding: 0;
	overflow:hidden;
  }

.hiddenInput{
	display: none;
}
#modalComment1{
	display: none;
}
#modalComment2{
	display: none;
}
canvas{
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#searchResult{
	text-align: center;
}

.gridsearch{
	display: -ms-grid;
	display: grid;
	grid-template-areas: 
	'a a'
	'b b';
}  

#frontpage{
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	    -ms-grid-rows: auto auto auto;
	        /* grid-template-areas:
	'boxA boxA boxA'
	'boxC boxCenter boxD'
	'boxB boxB boxB'; */
	grid-auto-rows:  1fr 1fr 2fr;
	height: 100%;
	gap:0px;
	margin: 0;
	padding: 0;
	width: auto;
	overflow:hidden;
}
#centerroom{
	text-overflow: ellipsis;
	overflow: hidden;
	grid-column-start: 2;
	grid-column-end: 3;
	    grid-row-start: 2;
	grid-row-end: 3;
	display: -ms-grid;
	display: grid;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	justify-items: center;
    margin: -2px;
}
#roomnameA{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	overflow:hidden;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	-ms-grid-row-span: 0;
	grid-row-end: 1;
	cursor: pointer;
	/* clip-path: polygon(0% 0%, 0% 75.1%, 33% 100%,66.9% 100%, 100% 75.1%, 100% 0%); */
	/* -webkit-clip-path: polygon(0% 0%, 0% 75.1%, 33% 100%,66.9% 100%, 100% 75.1%, 100% 0%); */
	/* clip-path: polygon(0% 0%, 0% 33.333333%, 33.333333% 100%,66.666666% 100%, 100% 33.333333%, 100% 0%);
	/* -webkit-clip-path: polygon(0% 0%, 0% 33.333333%, 33.333333% 100%,66.666666% 100%, 100% 33.333333%, 100% 0%); */ */
}

#roomnameB{
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 4;
	overflow:hidden;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 3;
	-ms-grid-row-span: 0;
	grid-row-end: 3;
	/* clip-path: polygon(0% 100%, 0% 24.9%, 33% 0%,66.9% 0%, 100% 24.9%, 100% 100%); */
	/* -webkit-clip-path: polygon(0% 100%, 0% 24.9%, 33% 0%,66.9% 0%, 100% 24.9%, 100% 100%); */
}

#roomnameC{
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-column-span: 1;
	overflow:hidden;
	grid-column-end: 2;
	-ms-grid-row: 1;
	    grid-row-start: 1;
	-ms-grid-row-span: 3;
	grid-row-end: 4;
	cursor: pointer;
	/* clip-path: polygon(0 25%, 100% 33.333333%, 100% 66.666666%, 0 75%); */
	/* -webkit-clip-path: polygon(0 25%, 100% 33.333333%, 100% 66.666666%, 0 75%); */
}
#roomnameD{
	-ms-grid-row: 3;
	-ms-grid-column: 5;
	grid-column-start: 3;
	-ms-grid-column-span: 1;
	grid-column-end: 4;
	overflow:hidden;
	-ms-grid-row: 1;
	    grid-row-start: 1;
	-ms-grid-row-span: 3;
	grid-row-end: 4;
	cursor: pointer;
	/* clip-path: polygon(100% 25%, 0 33.333333%, 0 66.666666%,D100% 75%); */
	/* -webkit-clip-path: polygon(100% 25%, 0 33.333333%, 0 66.666666%, 100% 75%); */
}
#button1{
	height: 22.39px;
	width:100px;
}
#button2{
	-webkit-appearance: none;
	height: 22.39px;
	width:100px;
}
#button3{
	-webkit-appearance: none;
	height: 22.39px;
	width:100px;
}
#button4{
	-webkit-appearance: none;
	height: 22.39px;
	width:100px;
}
#hiddenComment{
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	-webkit-appearance: none;
	display: inline;
	height: 14.39px;
	font-size: 0.8rem;
	line-height: 0.8rem; 
	grid-area: e;
}
#bottomRoomBox{
	position: relative;
	top: -180px;
	font-size: 1rem;
	z-index: 2;
}
#username{
	padding:2px;
	margin:2px;
}
.roomtitle{
	z-index: 2;
	position: relative;
	font-size: 1.3rem;
	height: 0px;
	top: -63px;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sendicon{
	position: relative;
	top: -21.2px;
	text-align: center;
	z-index: 9
}
.indicators{
	z-index: 2;
	text-align: center;
	position: relative;
	top:0rem
}
.roompassword{
	display: none;
}
.roompasswordSide{
	display: none;
	width: calc(52px + 6rem);
}
.notif-icon{
	pointer-events: none;
}
.online-icon{
	pointer-events: none;
}
.online{
	pointer-events: none;
	position: relative;
	font-size: 1rem;
	line-height: 1rem;
}
.notifs{	
	position: relative;
	font-size: 1rem;
	line-height: 1rem;
}
.notifsnum{
	position: relative;
	top: -0.4rem;
	-ms-user-select: none;
	    user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}
.onlinenum{
	position: relative;
	top: -0.4rem;
	-ms-user-select: none;
	    user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

.doneicon{
	pointer-events: none;
	position: relative;
	top: -21px;
	text-align: center;
	z-index: 9;
}
.buildicon{
	position: relative;
	top: -21px;
	text-align: center;
	z-index: 9;
}
.error-comment{
	position: absolute;
	z-index: 3;
	left: 5px;
	top: 5px;
	display: none;
}
.inner-error{
	position: absolute;
	left:22px;
	top:2px;
}

#progressbar{
	top:-4px;
	z-index: 2;
	display: none;
	position: absolute;
	width: 100%;
	height: 4px;
}
#thebar{
	top:0px;
	left:0%;
	z-index: 2;
	display: block;
	position: absolute;
	width: 186px;
	height: 4px;
}
.formHorizontal{
	display: -ms-grid;
	display: grid;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	position: relative;
	top:-13px;
	-ms-grid-columns: 20fr 0fr 0fr 0fr 0fr 0fr 0fr 20fr;
	grid-template-columns: 20fr 0fr 0fr 0fr 0fr 0fr 0fr 20fr;
	top:-10px;
}
.center{
	width: 100%;
	height: 0;
	top: 100%;
	z-index: 1;
	text-align: center;
	position: relative;

}
.checkboxs {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkboxs input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }

.checkmark {
	position: absolute;
	top: 4.5px;
	left: 2px;
	min-height: 22px;
	min-width: 22px;
  }
  
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  .checkboxs input:checked ~ .checkmark:after{
	display: block;
  }
  
  /* Style the checkmark/indicator */
  .checkboxs .checkmark:after {
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
  }

  .radiocontainer {
	display: block;
	position: relative;
	padding-left: 25px;
	margin-bottom: 2px;
	cursor: pointer;
	font-size: 1rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  .radiocontainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  .radiospan {
	position: absolute;
	top: 0;
	left: 3px;
	height: 1rem;
	width: 1rem;
	border-radius: 50%;
  }
  .radiospan:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radiocontainer input:checked ~ .radiospan:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radiocontainer .radiospan:after {
	   top: 0.25rem;
	  left: 0.25rem;
	  width: 0.5rem;
	  height: 0.5rem;
	  border-radius: 50%;
  }

.roomname{
	position: relative;
	text-align: center;
	top: 0;
	top: 37.5%;
	height: 0;
	width: auto;
	line-height: 1.8rem;
}
.max6rem{
	display:inline-block;
	text-align: center;
	cursor: pointer;
	width: 6rem;
}

.texts{
	position: relative;
	top: 0;
	top: -1.8rem;
}

.comments{
	position: relative;
	z-index: 2;
	top:-0.7rem;
	font-size: 1rem;
	line-height: 1rem;
	height: 0;
	width: auto;
    text-align: center;
}
.titlename{
	text-align: center;
	font-size: 1.8rem;
	line-height: 1.8rem;
	max-width: 13.5rem;
}

/* Scroll Bar? */

.resize-drag.scroll > ::-webkit-scrollbar {
	width: 8px;
	height: 5px;
}

::-webkit-scrollbar {
	width: 8px;
	height: 5px;
}

.borderSub{
	text-overflow: ellipsis;
	overflow:hidden;
	margin: 2px;
	padding: 4px;
	border-radius: 20px/2px;
}
radiobut{
	widows: 1rem;
}

.nums{
	width: 2.7rem;
}

#roomerror{
	display:none;
}
.large{
	height: 3rem;
	min-width: 6rem;
	width: -webkit-fill-available;
}
.closetag{
	float:right;
}

.infotag{
	position: relative;
	top: 5px;
}

.infotext{
	display: none;
	padding: 2px;
}

.tiny{
	height: 0.1rem;
}
i[value='true'] {
	opacity: 0.5
}
i[value='false'] {
	opacity: 1.0
}
.material-icons{
	user-select: none;
	cursor: pointer;
	opacity: 0.3;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.material-icons:hover {opacity: 0.9}

.material-icons:active {opacity: 1.0}


#emojiDescription{
	width:-webkit-fill-available;
}

#title {
	font-size: 2.2rem;
	line-height: 2.2rem;
	text-align: center;
}
.bottomRightFloat{
	z-index: 3;
	position:absolute;
	bottom:7px;
	right:7px;
	opacity: 100%;
}
.bottomComments{
	position: relative;
	z-index: 1;
	top: 170px;
	height: 0;
	width: auto;
    text-align: center;
}
#section3{
	z-index: 3;
	position: absolute;
	display: none;
	/* left:20%;
	top:20%; */
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	-ms-grid-rows: 1fr 5px 20fr;
	grid-template-rows: 1fr 20fr;
	-ms-touch-action: none;
	touch-action: none;
	            grid-template-areas:
	'box1'
	 'box2';
	grid-gap:5px;
	grid-auto-rows: minmax(35px, auto);
	width: 50%;
	height:50%;
	min-height: 95px;
    margin-left: auto;
    margin-right: auto;
	-webkit-transform: translate(0px, 0px);
	    -ms-transform: translate(0px, 0px);
	        transform: translate(0px, 0px);
}
#section4{
	z-index: 3;
	position: absolute;
	display: none;
	/* left:20%;
	top:20%; */
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	-ms-grid-rows: 1fr 5px 20fr;
	grid-template-rows: 1fr 20fr;
	-ms-touch-action: none;
	touch-action: none;
	            grid-template-areas:
	'box1'
	 'box2';
	grid-gap:5px;
	grid-auto-rows: minmax(35px, auto);
	width: 50%;
	height:50%;
	min-height: 95px;
    margin-left: auto;
    margin-right: auto;
	-webkit-transform: translate(0px, 0px);
	    -ms-transform: translate(0px, 0px);
	        transform: translate(0px, 0px);
}
#activeOnline{
	text-align: center;
	max-height:100%;
	height:100%;
	direction:rtl;
	overflow-y: auto;
	line-height: 1rem;
}

#activeNotif{
	text-align: center;
	max-height:100%;
	height:100%;
	overflow-y: auto;
	line-height: 1rem;
}

.onlineNotif{
	display:-ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 15fr 1fr 15fr 1fr;
	grid-template-columns: 1fr 15fr 1fr 15fr 1fr;
	-ms-grid-rows: 2fr 17fr 1fr;
	grid-template-rows: 2fr 17fr 1fr;
	grid-template-areas:
		"e1 e2 e2 e2 e4"
		"e1 a e5 b  e4"
		"e1 e3 e3 e3 e4";
	grid-auto-rows: minmax(35px, auto);
	width: 100%;
	height: 100%
}
#section2{
	z-index: 3;
	position: absolute;
	/* left: 25%;
	top:  25%; */
	display: none;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	-ms-grid-rows: 1fr 5px 20fr;
	grid-template-rows: 1fr 20fr;
	-ms-touch-action: none;
	touch-action: none;
	            grid-template-areas:
	'box1'
	 'box2';
	grid-gap:5px;
	grid-auto-rows: minmax(35px, auto);
	width: 50%;
	height:50%;
	min-height: 95px;
    margin-left: auto;
    margin-right: auto;
	-webkit-transform: translate(0px, 0px);
	    -ms-transform: translate(0px, 0px);
	        transform: translate(0px, 0px);
}
#authall{
	text-align: center;
}
#section1{
	z-index: 3;
	position: absolute;
	/* left:30%;
	top: 30%; */
	display: none;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	-ms-grid-rows: 1fr 5px 20fr;
	grid-template-rows: 1fr 20fr;
	-ms-touch-action: none;
	touch-action: none;
	            grid-template-areas:
	'box1'
	 'box2';
	 
	grid-gap:5px;
	grid-auto-rows: minmax(35px, auto);
	width: 50%;
	height:50%;
	min-height: 95px;
    margin-left: auto;
    margin-right: auto;
	-webkit-transform: translate(0px, 0px);
	    -ms-transform: translate(0px, 0px);
	        transform: translate(0px, 0px);
}
.openingBox{
	position: absolute;
	z-index: 2;
}
.resize-left{
}
.resize-right{
}
.resize-bottom{
}
.resize-top{
}


.box2 {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	z-index: 3;
	grid-area: box2;
	border-radius: 20px/2px ;
	/* max-width: 24rem; */
	/* min-width: 6rem; */
	/* resize: horizontal; */
	font-size: 0.9rem;
	line-height: 0.95rem;
	overflow: auto;
	min-height: 60px;
	/* height: 145px; */
	padding: 5px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

}

.small{
	line-height: 1rem;
	position: relative;
	top: 4px;
	font-size: 0.6rem;
}
.smallBreak{
	height: 0.3rem;
}

#section1 > .box2 {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

#section4 > .box2 {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}


#section3 > .box2 {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

.box1 {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	-ms-touch-action: none;
	touch-action: none;
	z-index: 1;
	grid-area: box1;
    padding: 0;
	/* max-height: 35px; */
	border-radius: 20px/2px ;
 	font-size: 1.4rem;
 	line-height: 1.6rem;
 	padding: 5px;
	text-align: left;	 
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

}

#section1 > .box1{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}

#section4 > .box1 {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}

#section3 > .box1{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}
#section2 > .box1 {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}

.griduser{
	        grid-template-areas: 'a b'
		'c c'
		'c c'
		'd d'
		'e e';
}

.resize-top-left{
	position: absolute;
	left: -20px;
	top: -20px;
	height: 40px;
	width: 40px;
}
.resize-top-right{
	position: absolute;
	right: -20px;
	top: -20px;
	height: 40px;
	width: 40px;
}
.resize-bottom-left{
	position: absolute;
	left: -20px;
	bottom: -20px;
	height: 40px;
	width: 40px;
}
.resize-bottom-right{
	position: absolute;
	right: -20px;
	bottom: -20px;
	height: 40px;
	width: 40px;
}
.slideTextBottom{
	position: absolute;
    width: 30rem;
    font-size: 1.2rem;
    right: calc(50% - 15rem);
	top: calc(50% - 2rem);
	pointer-events: none;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	user-select: none;
}
.slideTextTop{
	z-index: 1;
	position: absolute;
    width: 20rem;
    font-size: 1.2rem;
    right: calc(50% - 10rem);
    top: 0.5rem;
	pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.aSlide{
	height:100%;
}
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
.dots{
    position: absolute;
    bottom: 2%;
    width: 10rem;
    left: calc(50% - 5rem);
	text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
.active, .dot:hover {
}
.prev{
    position: absolute;
    top: calc(50% - 2rem);
    left: 2%;
    font-size: 4rem;
    line-height: 4rem;
	cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.next{
    position: absolute;
    top: calc(50% - 2rem);
    right: 2%;
    font-size: 4rem;
    line-height: 4rem;
	cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@keyframes appear {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

#titlecard{
	line-height: 2.4rem;
	height: 2.4rem;
	text-overflow: ellipsis;
	overflow: hidden;
}
#pathBoxA{
	display:grid;
	overflow: auto;
	grid-template-rows: 2fr 3fr;
}
#pathBoxB{
	display:grid;
	overflow: auto;
	grid-template-rows: 2fr 3fr;
}


@media (max-width: 625px){ 
	.form1{
		display: -ms-grid;
		display: grid;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		height: auto;
		margin: 0;
		padding: 0;
		-ms-grid-areas: 'a'
		'b'
		'c'
		'd'
		'e';
		        grid-template-areas: 'a'
		'b'
		'c'
		'd'
		'e';
	}
	input{
		width: 5rem;
	}
	#titlecard{
		display: none;
	}
	.material-icons.doneicon{
		display: none;
	}
	.material-icons.sendicon{
		display: none;
	}
	
	.titlename{
		max-width: 6rem;
	} 
	#hiddenComment{
		-ms-grid-row: 5;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
}


@media (max-height: 500px){ 
	.comments{
		position: relative;
		z-index: 2;
		top:-0.7rem;
		font-size: 1rem;
		line-height: 1rem;
		height: 0;
		width: auto;
	    text-align: center;
	}
	input{
		width: 4rem;
		margin: 1px;
		padding: 1px;
	}
	.titlename{
		max-width: 6rem;
	}
	#titlecard{
		display:none;
	}
	#pathBoxA{
		display:grid;
		grid-template-rows: 1fr 3fr;
	}
	#pathBoxB{
		display:grid;
		grid-template-rows: 1fr 3fr;
	}
}