@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
*{
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}
.hide{
	display: none;
}
.test-content{
	background: black;
	height: 100%;
	width: 100%;
}
html, body{
	height: 100%;
	padding: 0px;
	margin: 0px;
	background: #F9F9FA;
	overflow: hidden;
	position: relative;
}
#header{
	padding: 16px 24px;
	padding-bottom: 12px;
	background: #FFF;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	box-shadow: 0 10px 20px 0 rgb(198 201 210 / 25%) !important;
}
#header img{
	height: 34px;
	width:auto;
}
#logo{
	float: left;
}
#logo-right{
	float: right;
}
#main-content{
	padding: 24px;
	padding-top: 90px;
	height: 100%;
	width: 100%;
	transition: width .75s;
}
#main-content.with-sidebar{
	width: calc(100% - 350px);
}
#main-content iframe,#main-content #video-player, #main-content embed{
	width: 100%;
	height: 100%;
}
#main-content iframe{
	overflow-y: scroll;
	overflow-x: hidden;
}
#sidebar, #sidebar-buttons{
	width: 350px;
	background: #FFF;
	height: calc(100% - 66px);
	position: absolute;
	top: 66px;
	right: 0px;
	transition: right .25s;
	overflow-y: scroll;
	overflow-x: hidden;
	box-shadow: -10px 0px 20px 0 rgb(198 201 210 / 25%) !important;
}
#sidebar.sidebar-hidden, #sidebar-buttons.sidebar-hidden{
	right: -350px;
}
#sidebar-buttons{
	overflow: visible;
}
@media only screen and (max-width: 992px) {
	#main-content{
		padding: 0px;
		padding-top: 66px;
	}
  #main-content.with-sidebar{
	width: 100%;
	}
	#sidebar, #sidebar-buttons{
		width: 100%;
	}
	#sidebar.sidebar-hidden, #sidebar-buttons.sidebar-hidden{
		right: -100%;
	}
}




.nav-container{
	height: 0px;
	transition: height 1s;
	overflow: hidden;
}
.nav{
	color: #101010;
	line-height: 1.2;
	padding: 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: 600;
	border-bottom: 1px solid #E7E7E7;
	background: #FFF;
	border-left:3px solid #FFF;
	transition: background .5s;
	padding-left: 46px;
	cursor: pointer;
	position: relative;
}
.nav::before{
	content: '';
	height: 24px;
	width: 24px;
	background-image: url("images/icons/golbe.svg");
	background-size: 24px 24px;
	position: absolute;
	left: 15px;
	top: 15px;
}
.nav:hover{
	background: #edeced;
	border-left:3px solid #6a2c5b;
}
.nav-header{
	position: relative;
	padding-right: 35px;
}
.nav-header::before{
	background-image: url("images/icons/folder.svg");
}
.nav.pdf::before{
	background-image: url("images/icons/pdf.svg");
}
.nav.video::before{
	background-image: url("images/icons/video.svg");
}
.nav-header::after{
	content: '';
	height: 100%;
	width: 24px;
	background-image: url("images/icons/arrow-expand.jpg");
	background-repeat: no-repeat;
	background-size: 10px 5px;
	background-position: center center;
	position: absolute;
	right: 10px;
	top: 0px;
	bottom: 0px;
	  transform: rotate(270deg);

}
.nav-header.expand::after{
	  transform: none;
}
.nav-container .nav{
	background: #f8f8f8;
	border-bottom: none;
	border-left: #f8f8f8 solid 3px;
	padding: 13px;
	padding-left: 56px;
	font-weight: 500;
}
.nav-container .nav::before{
	top: 8px;
	left: 25px;
}
.nav-container .nav:hover{
	background: #edeced;
	border-left:3px solid #6a2c5b;
}


#sidebar-hide{
	position: absolute;
    left: -30px;
    background: #fff;
    box-shadow: -8px 0px 20px 0 rgb(198 201 210 / 25%);
    border-left: 1px solid #efeded;
    border-top: 1px solid #efeded;
    border-bottom: 1px solid #efeded;
    border-radius: 5px 0px 0px 5px;
    cursor: pointer;
    z-index: 99;
    width: 30px;
    text-align: center;
    top: 13px;
	padding-top: 12px;
    padding-bottom: 6px;
}

#close-tab {
    width: 174px;
    height: 40px;
    position: absolute;
    top: 31%;
    cursor: pointer;
    z-index: 100;
	right: -67px;
    transition: right ease 1s;
	background: #4a4a4a none repeat scroll 0 0;
    border-radius: 0 0 4px 4px;
    padding: 7px 10px;
	color: #FFF;
   transform: rotate(90deg);
	display: block;
	text-align: center;
}
#close-tab.hidden{
    right: -107px;
}
#close-tab img{
	transform: rotate( 270deg);
    height: 12px;
    width: auto;
    margin-left: 5px;
    display: inline-block;
    margin-bottom: -3px;
}
#menu-button{
	background-color: #712C63;
    border:solid 1px #712C63;
	border-radius: 8px;
	width: 69px;
	text-align: center;
    color: #ffffff;
	line-height: 34px;
	padding: 0px;
	cursor: pointer;
	float: right;
	margin-left: 20px;
	display: none;
}
#menu-button img{
	height: 5px;
    margin-left: 5px;
}
@media only screen and (max-width: 992px) {
	#logo,#logo-right{
		opacity: 0;
	}
	#menu-button{
		display: block !important;
	}
	#sidebar-hide{
		display: none;
	}
	#close-tab{
		display: none;
	}
}