@import 'colors.scss';

.wrapper_dashboard{
	padding: 10px;
	padding-bottom: 50px;
	.navbar {
	    border-radius: 0;
	    background-color: #263238 !important;
		border-bottom: 1px solid #D9DEE4 !important;
	    .navbar-brand{
	    	color:  $white !important;
	    }
		z-index: 10;
		.navbar_toggle{
			display: none;
			float: left;
			margin-right: 10px;
			cursor: pointer;
			background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzIgMzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPSdyZ2JhKDAsIDAsIDAsIDAuNSknIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIGQ9J000IDhoMjRNNCAxNmgyNE00IDI0aDI0Jy8+PC9zdmc+");
    		border-color: rgba(0,0,0,.1);
			@media (max-width: 720px){
				display: block;
			}
		}
		.dropdown-item {
		    padding: 10px !important;
		    margin-bottom: 0px !important;
		}
	}

	.sidebar{
		position: fixed;
		left: 0;
		top: 54px;
		width: 250px;
		background-color: $bluegrey600;
		min-height: 100vh;
		z-index: 10;
		@media (max-width: 720px){
			left: -250px;
		}
		ul{
			margin: 0;
			padding: 0;
			width: 100%;
			li{
				width: 100%;
				padding: 10px;
				cursor:pointer;
	            background-color:$bluegrey600;
	            color:$white;
				border-bottom: 1px solid rgba(255,255,255,0.1);
	            span{
					font-weight: 400;
					font-size: 0.8em;
					letter-spacing: 2px;
	            }
	            i{
	            	float: left;
					margin-right: 10px;
	            }
			}
		}
	}

	.sidebar_active_link{
		background-color: #41c7c2 !important;
	}

	.submenu{
		display: none;
		margin-top: 20px !important;
		li{
	            background-color:$bluegrey500;
	            color:$white;
				border-bottom: 0 !important;
	            span{
					font-weight: 300 !important;
	            	font-size: 0.7em !important;
	            	letter-spacing: 1px !important;
	            }
			}
	}

	.body_dashboard{
		margin-left: 250px;
		padding-top: 54px;
		@media (max-width: 720px){
			margin-left: 0px;
		}
		.home{
			h3{
				font-weight: 400;
				letter-spacing: 10px;
			}
			.perfildetails{
				margin-top: 25px;
				margin-bottom: 70px;
				.perfil_photo{
					@media (max-width: 720px){
						display: none;
					}
					img{
						margin-top:15px;
						width:90%;
						max-width: 120px;
						border-radius: 50%;
					}
				}
				.perfil_geral{
					margin-top: 15px;
					p{
						margin-bottom: 5px !important;
						span{
							font-weight: 300;
							font-size: 1em;
							b{
								font-weight: 400;
								font-size: 1em;
							}
						}
					}
				}
			}
			.perfilnews{
				margin-top: 30px;
				margin-bottom: 70px;
				.newstitle{
					font-weight: 400;
					font-size: 1.2em;
				}
				.newsdesc{
					font-weight: 300;
					font-size: 1em;
				}
			}
		}
		.settings{
			h3{
				font-weight: 400; 
			}
			.perfildetails{
				margin-top:25px;
				.perfil_photo{
					@media (max-width: 720px){
						display: none;
					}
					img{
						margin-top:15px;
						width:90%;
						max-width: 120px;
						border-radius: 50%;
						cursor: pointer;
					}
				}
				.perfil_geral{
					margin-top: 15px;
					p{
						margin-bottom: 25px !important;
						span{
							font-weight: 300;
							b{
								font-weight: 400;
							}
						}
						input{
							width: 100%;
						}
					}
				}
			}

			.save_button{
				padding: 10px 20px 10px 20px;
				position: fixed;
				bottom: 10px;
				right: 10px;
				color: $white;
				font-weight: 400;
				cursor: pointer;
				background-color: $bluegrey600;
				text-shadow: rgba(0,0,0,0.25) 0 -1px 0;
				box-shadow: rgba(0,0,0,0.25) 0 1px 0,inset rgba(255,255,255,0.16) 0 1px 0;
			}
		}

		.courses{
			h3{
				font-weight: 400;
				letter-spacing: 10px;
			}
			.table_courses{
				margin-top: 50px;
			}
		}

		.page_course{
			position: relative;
			h3{
				font-weight: 400;
				letter-spacing: 10px;
			}
			.back_course{
				padding: 10px 20px 10px 20px;
				color: $white;
				font-weight: 400;
				position: absolute;
				top: 0;
				right: 0;
				cursor: pointer;
				background-color: $bluegrey600;
				text-shadow: rgba(0,0,0,0.25) 0 -1px 0;
				box-shadow: rgba(0,0,0,0.25) 0 1px 0,inset rgba(255,255,255,0.16) 0 1px 0;
			}
			.save_grade{
				color: $white;
				font-size: 1.2em;
				font-weight: 300;
				padding: 10px;
				position: fixed;
				bottom: 10px;
				right: 10px;
				text-align: center;
				cursor: pointer;
				background-color: $bluegrey600;
				text-shadow: rgba(0,0,0,0.25) 0 -1px 0;
				box-shadow: rgba(0,0,0,0.25) 0 1px 0,inset rgba(255,255,255,0.16) 0 1px 0;	
			}
			.add_option{
				color: $white;
				font-size: 1.5em;
				font-weight: 400;
				position: fixed;
				bottom: 10px;
				right: 10px;
				height: 50px;
    			width: 50px;
				border-radius: 25px;
				line-height: 50px;
				text-align: center;
				cursor: pointer;
				background-color: $bluegrey600;
				text-shadow: rgba(0,0,0,0.25) 0 -1px 0;
				box-shadow: rgba(0,0,0,0.25) 0 1px 0,inset rgba(255,255,255,0.16) 0 1px 0;	
			}
			.search_option{
				color: $white;
				font-size: 1.5em;
				font-weight: 400;
				position: fixed;
				line-height: 50px;
				z-index: 10;
				bottom: 10px;
				right: 70px;
				height: 50px;
    			width: 50px;
				border-radius: 25px;
				text-align: center;
				cursor: pointer;
				background-color: $bluegrey600;
				text-shadow: rgba(0,0,0,0.25) 0 -1px 0;
				box-shadow: rgba(0,0,0,0.25) 0 1px 0,inset rgba(255,255,255,0.16) 0 1px 0;
			}
			.search_box{
				width: 50px;
				height: 50px;
				padding-left: 10px;
				color: $greydark;
				position: fixed;
				border: none !important;
				right: 70px !important;
				bottom: 25px !important;
				background-color: $greenlight !important;
				border-radius: 25px !important;
				z-index: 5;
			}
			.course_info{
				margin-top: 25px;
				p{
					font-weight: 300;
				}
			}
			.course_options{
				margin-top: 50px;
				.course_option{
					p{
			            padding: 10px 20px;
			            cursor:pointer;
			            background-color:$greylight;
			            color:$greydark;
			            transition:0.3s;
			            text-align: center;
			            &:hover{
			                background-color:$greenlight;
			            }
			        }
			        .sel_style{
			            color:$white;
			            background-color:$greendark;
			            &:hover{
			                background-color:$greendark !important;
			            }
			        }
				}
			}
		}
	}
}

.mancha{
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	display: none;
	z-index: 5;
	@media (max-width: 720px){
		display: none;
	}
}

.sep{
	background-color: $greendark;
	height: 2px;
	width: 250px;
	margin-top: 5px;
}

.remove_option .edit_option{
	color: $black;
	font-size: 1.2em;
	font-weight: 300;
	text-align: center;
	cursor: pointer;	
}