@font-face {
    font-family: 'Forte';
    src: url('ForteMT.woff2') format('woff2'),
        url('ForteMT.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Comic Sans MS';
    src: url('ComicSansMS.woff2') format('woff2'),
        url('ComicSansMS.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Bahari';
	font-style: normal;
	font-weight: normal;
	src: url('ITCEDSCR.woff'),url('ITCEDSCR.woff2') format('woff');
}
@font-face {
	font-family: 'copperplate';
	font-style: normal;
	font-weight: normal;
	src: url('copperplate.woff') format('woff');
}

*:not(.body-info){
	padding: 0;
	margin: 0;
	transition:0.3s ease-in-out;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
    font-weight: 400;
	line-height: 1.5;
	box-sizing: border-box;
	color:#785A3E;
	z-index: 0;
	text-align: center;
}



html,body{
	width:100%;
	min-height:100vh;
}
body{
	overflow-x:hidden;
}

a{
	text-decoration: none;
	color:rgb(41, 41, 41);
}
a:hover{
	color:black;
	text-decoration:underline;
}

@keyframes hov{
	0%{
		margin-top: calc(7.5% - 0.1vh) !important;
	}
	100%{
		margin-top: calc(6.5% - 0.1vh) !important;
	}
}
.hoverShade:hover{
	box-shadow: 0px 3px 4px 0px #0000004f;
	/* margin-top: calc(6.5% - 0.1vh) !important; */
	animation:hov 0.3s ease-out 1;
}
input{
	display: block;
	border:1px solid rgba(139, 139, 139,0.2);
	box-shadow:0 0 0.1px 0.1px rgba(0,0,0,0.4) !important;
	/* margin-left:1rem; */
	/* padding:0 0.5rem; */
	border-radius:0.25rem;
	font-size: 1.1rem !important;
	text-align: left !important;
	background:#FAFAFA;
	padding:0 0.25rem !important;
}
input:required{
	box-shadow: none;
}
input:focus {
    box-shadow: 0 0 0 0.1rem #c5c5c5;
    outline: none;
}
input:hover{
	cursor:text;
}
select{
	border-radius: 15px;
    padding: 0.3vw;
    margin: 0.5vw;
    border: 0.5px solid darkgrey;
}
select:focus{
	outline: none;
	box-shadow:1px 1px 1px 0.1px #2b2b2b6e;
}

.inp-cont label{
	font-size:1.15rem;
	font-weight:450;
}

.danger{
	color:#f75858;
}
.success{
	color:#51ce51;
}
.in-success{
	color: #51ce51;
    outline: #51ce51 auto 2px;
}
.in-danger{
	color: #f75858;
    outline: #f75858 auto 2px;
}
.primary{
	color:#5454ef;
}

.hide{
	display:none !important;
}

.show{
	display:block !important;
}

.padding{
	padding:2vw;
	margin:2vw;
}
.btn{
	border-radius: 0.25rem;
    border: 0;
    padding: 0 1.5rem;
	line-height: 5vh;
	margin:0.2rem 0.5rem;
	font-weight:500;
}
.dot{
    display:none;
    width:7px;
    height:7px;
    background:red;
    border-radius:50%;
    position: absolute;
    top:20%;
    right:0;
}
.btn.btn-login{
	float:right;
	margin: 1vw;
    height: 14vh;
	width: 11vw;
	font-size: 1.5rem;
    background: #fafafa;
    border: 2px solid #5b9ce0;
    color: #5b9ce0;
    font-weight: bolder;
}
.btn.btn-login:hover{
	color:white;
	background: #5b9ce0;
	margin:1vw;
}
.btn:hover{
	cursor:pointer;
	box-shadow: 0 4px 0.7rem 0.01rem #0000004f;
	margin:0rem 0.5rem 0.4rem;
}
.btn:active {
    box-shadow: 0 4px 0rem 0rem transparent;
}
.btn:focus{
	outline:none;
}

.shadow{
    box-shadow:0 1px 2px 1px #0000004f;
}

.success{
	background: #53bf38;
    color: white;
}

.loading{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150vh;
    background: wheat;
    text-align: center;
    padding: 20%;
    z-index: 2000;
}


@keyframes sDown{
	0%{
		transform:translateY(-100%)
	}
	100%{
		transform: translateY(0)
	}
}

body nav.nav{
	height:7.2vh;
	background:#f4ece6;
	color:#65513f;
	padding: 0 2vw;
	z-index:1;
	animation: sDown 0.3s ease-out 1;
}
nav ul{
	display: flex;
    justify-content: space-between;
}
nav *{
	font-weight: bolder;
	line-height: 7.2vh;
	margin-top:auto !important;
	margin-bottom:auto !important;
}
nav div{
	display:inline-block;
}
nav img{
	vertical-align: middle;
}
nav #brand a{
	font-size:1.35rem;
	font-family: 'Fredoka One', cursive;
	color:#5E4935;
	width: 15vw;
    text-align: center;
}
nav #brand a img{
	width:2.6vw;
	margin-right: 0.15vw;
}
nav #brand:hover + #brand img{
	border:50%;
	box-shadow:0 4px 0.7rem 0.01rem #0000004f;
}
nav #brand:hover + #brand{
	text-shadow:0 4px 0.01rem #0000004f;
}
nav ul{
	list-style: none;
	margin-left: -30vw;
}
nav ul .active{
    background: rgba(109, 109, 109, 0.65);
    border-radius: 0.2rem;
    color: white;
}
nav ul .active a{
    color: white;
}
/* nav ul li{
	display:inline;
	margin:0 2vw;
    padding: 0.2rem 0.5rem;
} */


nav .sign-btn{
	background: #F4973A;
	color:white;
	border:1px solid #F4973A;
}
nav .log-btn{
	background:white;
	color:#F4973A;
	border:1px solid #AE6E2E;
}
nav #lang img{
	width:2vw;
	padding: 0;
    margin: 0;
    border-radius: 50%;
}
nav li{
	position: relative;
	height:7.2vh;
	line-height: 7.2vh !important;
	display: inline-flex;
	z-index: 5 !important;
}
nav li a.menu-link {
    line-height: 7.2vh;
    padding: 0 1.6vw;
	border-radius:0;
	font-weight: 600;
}
nav li #username{
    background: #785a3e;
    color: white;
    font-weight: bold;
    border-radius: 5vw;
    padding: 0.27vw 0.6vw;
    /* text-shadow: 0 0 3px #404040; */
}
/* nav li #username:hover{
	background:#f4973a;
} */

.dropIcon-cont{
	position: relative;
	text-align: center;
	z-index: 20;
} 
li .dropIcon-cont{
	position: unset;
}
.dropIcon-cont input{
	margin: auto !important;
}
nav ul li div.dropIcon-cont:hover > i.dropIcon{
	color:#f4973a;
}
nav ul li div.dropIcon-cont:hover > h1.dropIcon{
	background:#f4973a !important;
}
.dropDown{
	position: absolute;
	padding:1vw;
	top:4.5vh;
    right: 50%;
    transform: translate(50%);
	display:none;
	z-index: 300;
}
#search{
	z-index: 3;
}
#search .dropDown{
	padding: 0;
	background: #fafafa;
}
.dropContain .book{
	width:100%;
}
#search .dropDown .dropContain:before {
	display:none;
}

.dropDown .dropContain{
	background:white;
	width: 15vw;
	min-height:4vh;
	max-height: 50vh;
	overflow: auto;
	padding:1vw 0.5vw;
	border-radius:2px;
	z-index: 3;
}

.dropContain[data-type='search']{
	width:30vw;
	height: 40vh;
	position: relative;
}
.s-radio{
	display: inline-block;
}

.s-radio:checked + .s-res{
    display:block;
    z-index: 500;
}

.s-res{
	display: none;
    position: absolute;
	top: 20%;
	left:0;
}
/* .s-res-label:nth-of-type(1){
	left:5%;
}
.s-res-label:nth-of-type(2){
	left: 40%;
}
.s-res-label:nth-of-type(3){
	left: 75%;
} */


.dropDown .dropContain:before {
	content: '';
    position: absolute;
    top: -1vh;
    right: calc(7.7vw);
    border: 0.8vw solid #ffffff00;
	border-bottom-color: white;
	filter:drop-shadow(0 -2px 0.01px #0000004f);
	z-index: 0;
}
.dropDown:hover{
	display:block;
}
nav ul li i.dropIcon{
	font-size:1.7vw;
}


.dropIcon:hover + .dropDown{
	display:block;
}
.dropIcon:hover + .dropDown .dropContain:empty{
	display:none;
}
.dropIcon[type='search']:focus + .dropDown{
	display:block;
}
.dropIcon[type='search']:focus + .dropDown .dropContain:empty{
	display:none;
}


#sidebar{
	display:inline-block;
	width:15vw;
	float:left;
	height:100vh;
	background:#b5b5b5;
}
#sidebar ul{
	margin:1.5rem 3rem;
	list-style: none;
}
#sidebar ul *{
	color:white;
	font-size:1.1rem;
}
#sidebar ul p{
	font-weight:500;
}
#sidebar ul li{
	margin-left:1rem;
}

#container{
	display:inline-block;
	width:85vw;
	float:right;
	height:100vh;
	background:white;
}

.gray-back{
	display: flex;
	width:100vw;
	height:100vh;
    justify-content: center;
    flex-flow: column;
	position: fixed;
	top:0;
	left:0;
	background:rgba(56, 56, 56, 0.404);
	z-index: 100;
	cursor:url(cancel.png),auto;
}

.pop{
	width:60vw;
	height:100%;
	display: flex;
	flex-flow: column;
	justify-content: space-evenly;
	max-height:70vh;
	min-height: 40vh;
	position: relative;
	border:1px solid rgb(128, 128, 128);
	border-radius:0.2rem;
	background:#FAFAFA;
	margin:auto;
	box-shadow:2px 3px 13px 0.3px #525252a3;
	vertical-align: middle;
	overflow: auto;
	cursor: default;
}
.pop .header{
	height:7vh;
	text-align: center;
	font-size:1.4rem;
	font-weight:500;
	border-bottom:1.5px solid rgba(99, 99, 99, 0.344);
	padding:0.5rem;
}
.pop .body{
	padding: 2vh;
}
.pop fieldset{
	width:50vw;
	margin:0 auto;
	border:0;
	border-top:1px solid rgba(0,0,0,0.4);
}
.pop legend{
	padding:0.5rem;
	font-size:1.2rem;
	text-shadow:0 0 0.01px rgba(0,0,0,0.4);
}
.pop .body > div{
	width:max-content;
	margin:0.9rem auto;
}
.pop .footer{
	/* height:9vh; */
	/* border-top:1.5px solid rgba(99, 99, 99, 0.378); */
	/* line-height:9vh; */
	/* text-align: right; */
}
.pop-head{
	display: inline-block;
    background: #796048;
    border: 1px solid;
	padding: 0.7vw;
	font-size:1.5rem;
    border-radius: 12vw;
    color: white;
}
#init-req{
	border:0;
}
.greeting h1{
	font-size:2rem;
	font-weight:500;
}
.greeting p{
	font-family: comic sans ms;
	font-style: italic;
	font-size:1.2rem;
}
.greeting span{
	font-size:1rem;
	font-weight: 450;
}
.greeting small span{
	text-shadow:0 0 0.001px brown;
}

#ext-sign div button{
	width: 25%;
	border-radius: 10vw;
	padding:0;
	margin:0;
	line-height: 25%;
	background: white;
}
#ext-sign button img{
	width:100%;
}
/* 
.inp-cont{
	display:flex;
	justify-content: space-between;
	width:35vw;
	margin:0.5rem auto;
}
.inp-cont label,.inp-cont input{
	display:inline-block;
}
.inp-cont small{
	display: contents;
} */

.inp-cont{
	width: 40vw;
    max-width: 30rem;
	position: relative;
	margin:0 auto;
	text-align: center;
}
fieldset .inp-cont{
	margin:auto;
}
.inp-cont input{
	width:30vw;
	height:2.5rem;
	max-width:20rem;
	margin: 1rem auto;
}
.inp-cont label{
	display:block;
	position: absolute;
	color:grey;
	top:calc(15%);
	left:calc(6.1vw);
	background:#FAFAFA;
	padding:0 0.5vw;
}

.inp-cont-mini-cont{
	display: flex;
    justify-content: space-around;
    flex-flow: row;
}
.inp-cont-mini{
	position: relative;
	text-align: center;
}
.inp-cont-mini input{
	width: 15vw;
    height: 2.5rem;
    max-width: 20rem;
    margin: 1rem auto;
}
.inp-cont-mini label{
	display: block;
    position: absolute;
    color: grey;
    top: calc(1.45em);
    left: calc(0.5em);
	background: #FAFAFA;
	font-weight: bolder;
    padding: 0 0.5vw;
}


input:focus + label,input:valid + label{
	transform-origin: left;
	transform:scale(0.75) translateY(calc(-100%));
	color:brown;
}
.slide-cont{
	height: 100%;
	max-height: 100%;
}



@keyframes s_show{
	0%{
		/*transform:translateX(100%);*/
		opacity:0;
		/*transform: scale(0.7)*/
	}
	100%{
		opacity:1;
		/*transform: scale(1);*/
	}
}

.slide{
	display: flex;
    flex-flow: column;
    justify-content: space-evenly;
	height: 100%;
	animation: s_show 0.3s ease-out 1;
}
.slide .greeting{
	/* height: 85%; */
    z-index: 3;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.slide table{
	width: 100%;
	height: 30%;
	/* margin: 3vw 0 0; */
	background: hsla(0, 0%, 94%, 1);
}
.slide table td{
	/* vertical-align: top; */
    text-align: center;
	margin: auto;
	padding:2vw 0;
}
.slide table td input{
	margin: auto;
}

#swap:checked body{
	border:10px solid black;
}

.slide #bookAdd{
	text-align: center;
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    margin-top: 2vw;
}

.slide .footer{
	/* height: 15%; */
}
.slide .footer{
	display:flex;
	/* min-height:7vh; */
	justify-content: space-around;
	/* line-height:7vh; */

}
.slide .footer button{
	width:7vw;
	height:2.5vw;
	min-width: 5rem;
    min-height: 2rem;
	margin:auto;
}
.slide .footer .next{
	float:right;
	background: #5757d8;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.73);
    border: 0;
    border-radius: 0.2rem;
    font-weight: 500;
}


.s-show{
	animation:s_show 0.3s ease-in 1;
	display: block;
}

@keyframes s_hide{
	0%{
		/*transform:translateX(0);*/
		/*opacity:1;*/
		/*transform: scale(1);*/
		position: initial;	
		visibility: visible;	
	}
	100%{
		/*transform:translateX(-100%);*/
		/*opacity:0;*/
		/*display: block !important;*/
		/*transform: scale(0.5);*/
		position: initial;
		visibility: visible;
	}
}

.s-hide{
	animation:s_hide 0.2s ease-in 1;
	/*display:block;*/
	/*position:absolute;*/
	/*opacity:0;*/
	/*position: absolute;*/
	/*visibility: hidden;*/
	display: none;
}

.AA{
	display:inline-block;
   
}
#home-int{
	margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}
#home-int div{
	vertical-align: middle;
    display: inline-block;
    max-width: 29vw;
    word-break: break-word;
}

@keyframes centerPop{
	0%{
		transform: scale(0);
		opacity: 0;
	}
	50%{
		opacity: 0;
		transform: scale(0.45);
	}
	100%{
		transform: scale(1);
	}
}
#bcontainer {
	width: 80%;
	margin: auto;
	transform-origin:center; 
	animation:centerPop 0.6s ease-out 1;
}
#bcontainer > center{
	padding:5vh 0;
}
#bcontainer > center > div:not(.AA) h1{
	display: inline-block;
	color:saddlebrown;
	font-size:2.5rem;
}
#bcontainer > center > div:not(.AA) p{
	padding: 1vw 3vw;
	font-size: 1.2rem;
	font-weight: 450;
    text-align: center;
    display: inline-block;
    /* width: 74vw; */
    vertical-align: middle;
}
#bcontainer > center > div:not(.AA) img{
	display:block;
	width: 20vw;
}

.book {
	display: inline-flex;
	position: relative;
    /* float: left; */
    height: 8vw;
    background: #f0f2d2;
    margin: 0.2vw;
    box-shadow: 0 0 0.1px 0.1px grey;
}
.book div{
	display: flex;
	flex-flow: column;
    justify-content: space-evenly;
    margin:0.2rem;
}
.home-p .book{
	padding-right:15%;	
}

.book img{
	width:70px;
	margin-right: 2vw;
}
.book  p{
	display: block;
    width: 14vw;
    text-overflow: ellipsis;
    white-space: nowrap;
	text-align: left;
	overflow:hidden;
    font-weight: bold;
    font-style: normal;
    /* margin: auto auto auto 0; */
    font-family: arial;
    font-size: 1rem;
}
.book > div > p:nth-child(1){
	font-size:0.7rem;
}
.book > div:nth-of-type(1) > p:nth-child(1):before{
	content:'ISBN: ';
}
.book > div:nth-of-type(1) > p:nth-child(2):before{
	content:'Title: ';
}
.book > div:nth-of-type(1) > p:nth-child(3):before{
	content:'Author: ';
}
.book > div:nth-of-type(1) > p:nth-child(4):before{
	content:'Tags: ';
}

.book > div:nth-of-type(2) > p:nth-of-type(1):before{
	content:'Governorate: ';
}
.book > div:nth-of-type(2) > p:nth-of-type(2):before{
	content:'Area: ';
}

.book p:before{
	font-weight: 400;
	padding-right:0.4vw;
}



.chat-pop{
	position: fixed;
	bottom:0;
	right:20vw;
	width:22vw;
	height:45vh;
	border-radius:4px;
	box-shadow:0px -1px 2px 0px #8b8b8b;
	background:rgb(243, 243, 243);
}
.chat-header,.chat-body,.chat-footer{
	width:100%;
	/* background: #f6f6f6; */
	box-shadow:0px 0px 2px 0px #8b8b8b;
}
.chat-header{
    height:7vh;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-body{
	height:30vh;
	overflow: scroll;
	overflow-x:hidden;
}
.chat-mess {
	margin:0.5rem;
	text-align: left;
}
.chat-mess p{
	border-radius:12px;
	border-bottom-left-radius: 0;
	display:inline-block;
	background: #d8d8d8;
	padding:0.25rem;
	word-break: break-word;
}
.mess-same{
	text-align: right;
}
.mess-same p{
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 0;
}
.chat-footer{
	height:8vh;
	display:flex;
	justify-content: space-evenly;
	flex-flow: row;
}



footer{
	background-color: #b7ab9f;
	height:9vh;
}
footer center{
	display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    height: 9vh;
}
footer center > div{
	width:auto;
	margin:auto;
}
footer center div:nth-of-type(2){
	display:flex;
}
footer center.body-info hr{
	height: 4vh;
	margin: auto 0;
}
footer center.body-info div img{
	vertical-align: middle;
}
footer center.body-info div p{
	color: saddlebrown;
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    font-size: 1.5rem;
    font-family: forte;
}
footer center > div a{
	line-height: 9vh;
	font-weight: bold;
	/* font-size:0.6rem; */
}
footer a:hover{
	color:darkred;
	/* font-weight:bold; */
}
footer .List{ 
	font-size:1rem;
	color:white;
	font-family:Arial; 
	margin: auto 0;
}
footer center div:nth-of-type(2) a{
	margin:auto 2vw;
}
footer center div:nth-of-type(2) hr{
	border-color:rgb(195, 195, 195);
}

footer center > div a img{
	padding:10px;
	vertical-align:middle;
	width:1.5rem;
}
footer center div a img:hover{
	filter:opacity(0.35) drop-shadow(0 0 0 rgb(206, 110, 1)) drop-shadow(0 0 2.5px black);
}
footer p img{
	vertical-align: middle;
}

@media only screen and (max-width: 750px) {
  .btn{
  	padding:0 3vw;
  	margin:0.5vh;
  }
  #cross-icon{
  	float:unset !important;
  }
  #home-int{
    margin: auto !important;
  }
  #home-int div{
  	max-width: initial;
  }
  #platforms-div{
  	margin:auto !important;
  }
  footer center.body-info div p{
  	display: none;
  }
  #socials{
  	display: none;
  }
  #george{
  	padding-right:0 !important;
  }

}