/* ESTILOS CSS Q CODE PROYECT*/
* {
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {	
	font-family: 'Roboto Slab', serif;
}
p, i{	
	font-family: 'Montserrat', sans-serif;
}
.editor-icon {	
	background-color: transparent;
	font-size: 200px;
}
.editor-icon:hover {
	color: #005146;
	background-color: transparent;
	font-size: 200px;
}
strong {
	color: #FAFAFA;
}
a {
	cursor: pointer;
}
/* As hex codes */
.color-primary-0 { color: #006D5E }	/* Main Primary color */
.color-primary-1 { color: #00AF97 }
.color-primary-2 { color: #008875 }
.color-primary-3 { color: #005146 }
.color-primary-4 { color: #002F28 }

.foot {	
	color: #FAFAFA ;
	background: linear-gradient(to right, #00AF97, #005146);
	padding: 5px ;
  	margin-top: 5px ;  	
}
.foot i{
	color: #00AF97 ; 
	font-size: 25px ;
	background-color: #FAFAFA ;
	padding: 5px ;
	border-radius: 10px ;
}
.foot i:hover{
	color: #008875 ; 
	font-size: 25px ;
	background-color: #FAFAFA ;
	padding: 5px ;
	border-radius: 10px ;
}

.full {
	 width: 100%;
	 height: 100%;
}

/* Layout para editor pantalla completa y footer fijo */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#editor-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#editor-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    min-height: 0;
    height: 0;
}
#sidebar {
    height: auto;
    max-height: calc(100vh - 56px); /* solo navbar */
    overflow-y: auto;
}
#editor-area {
    height: auto;
    max-height: calc(100vh - 56px); /* solo navbar */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.CodeMirror {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
}