:root {
	/*#EF5264;*/
	--main-color-h: 353;
	--main-color-s: 83%;
	--main-color-l: 63%;
	--main-color-hsl: var(--main-color-h), var(--main-color-s), var(--main-color-l);
	--main-color: hsl(var(--main-color-hsl));
}
html, body{
	height:100%;
	margin:0;
	padding:0;
	/*font-family:'Open Sans', sans-serif;*/
	font-family: 'Titillium Web', sans-serif;
}

body div.ui-dialog div.ui-dialog-titlebar a.ui-dialog-titlebar-close.ui-corner-all {
	color:red;
	display:none;
}

body div.login header.title h1 img#medicheck{
	padding-top:30px
}

body div.login header.title h1 img#smacvei{
	padding-top:10px
}


header.main{
	width:100%;
	display:block;
	height:42px;
	background-color: var(--main-color);
	
	-webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;
}

header.main section.logo{
	
	display:inline-block;
	width:350px;
	height:42px;
	vertical-align:top;
	padding:0 5px 0 50px;
	font-family: 'Roboto Mono', monospace;
	line-height:42px;
	font-weight:400;
	font-size:28px;
	color:#fff;
	box-sizing:border-box;
	background-image:url( /templates/medicheck.vtemplate/assets/images/medicheck_app_42px.png );
	/*background-image:url( /templates/medicheck.vtemplate/assets/images/LOGO_MERRYCHECK.png );*/
	background-repeat:no-repeat;
	background-position:5px center;
	background-size: 220px 30px;
	/*background-position: -30px center;
	background-size: 250px 250px;*/
}

header.main section#clinic.logo{
	width:100%
}

header.main section.covid-logo{
	
	display:inline-block;
	width: 100%;
	height:42px;
	vertical-align:top;
	padding:0 5px 0 50px;
	font-family: 'Roboto Mono', monospace;
	line-height:42px;
	font-weight:400;
	font-size:28px;
	color:#fff;
	box-sizing:border-box;
	background-image:url( /templates/encuesta_covid/assets/virus.png );
	background-repeat:no-repeat;
	background-position:5px center;
	background-size:auto 100%;
	webkit-filter: brightness(0) invert(1);
  	filter: brightness(0) invert(1);
}

header.main section.general-logo{
	
	display:inline-block;
	width: 100%;
	height:42px;
	vertical-align:top;
	padding:0 5px 0 10px;
	font-family: 'Roboto Mono', monospace;
	line-height:42px;
	font-weight:400;
	font-size:28px;
	color:#fff;
	box-sizing:border-box;
	background-repeat:no-repeat;
	background-image:url( /templates/medicheck.vtemplate/assets/images/medicheck_health_workplace.png );
	background-position:5px center;
	background-size:auto 100%;
	webkit-filter: brightness(0) invert(1);
  	filter: brightness(0) invert(1);
}

header.main section.covid-logo span,
header.main section.general-logo span.powered_by {
	position: relative;
    font-size: 16px;
    margin: -10px;
    float:right;
    top: 40%;
    margin-right: 5px;
    display:none;
}

header.main section#clinic.logo span.clinic {
	position: relative;
    font-size: 18px;
    float:right;
    margin-right: 5px;
}

header.main section.covid-logo span img,
header.main section.general-logo span img {
    width: 120px;
    position: relative;
    top: 6px;
}


header.main nav.top{
	display:inline-block;
	width:calc( 100% - 360px );
	vertical-align:top;
	height:42px;
	text-align:right;
	padding-right:10px;
}

header.main nav.top span{
	color:#fff;
    font-size: 20px;
    line-height:40px;
}

header.main nav.top div.top-menu,
header.main nav.top div.vhelper {
	position: relative;
	display: inline-block;
    padding-right: 5px;
    background: var(--main-color);
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;

}

header.main nav.top div.vhelper {
	padding: 0;

}

header.main nav.top div.vhelper section.icon button#help {
	
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 3px;
	outline: none;
	padding: 0;

}

header.main nav.top div.vhelper section.icon button#help i {
	color: #ffff;
    font-size: 18px;
}

header.main nav.top div.vhelper{
	bottom: 30%;
}

header.main nav.top div.top-menu section.icon{
	display: inline-block;
	cursor: pointer;
}

header.main nav.top div.top-menu.active {
	background: hsl(var(--main-color-h), var(--main-color-s), calc(var(--main-color-l) * .9));
}

header.main nav.top span#top-menu{
	font-size: 20px;
	margin-left: 5px;
    cursor: pointer;
    outline: none;
}

header.main nav.top span.active#top-menu{
	color: #FFFFFF;
}


header.main nav.top span#top-menu:before{
    font-family: FontAwesome;
    content: "\f0d7";
    float: right;
    padding-left: 10px;
    font-size: 16px;
}

header.main nav.top span#top-menu span#temp:before{
    font-family: FontAwesome;
    content: "\f0d7";
}

header.main nav.top span#top-menu:focus{
	outline: none;
}

div.top-menu  div.user_dropdown {
  	float: left;
  	overflow: hidden;
}

div.top-menu  div.user_dropdown button.dropbtn {
  	font-size: 18px;  
  	border: none;
  	height: 42px;
  	outline: none;
  	color: white;
  	text-transform: uppercase;
  	background-color: inherit;
  	margin: 0;
  	font-family: 'Titillium Web', sans-serif;
}

div.top-menu  div.user_dropdown button.dropbtn:before {
  	font-family: FontAwesome;
    content: "\f0d7";
    float: right;
    padding-left: 10px;
    font-size: 18px;
    margin-top: 5px;
}

div.top-menu  div.user_dropdown button.dropbtn i {
  	padding-left: 5px;
}

div.top-menu  div.user_dropdown button.dropbtn.active {
  	background-color: hsl(var(--main-color-h), var(--main-color-s), calc(var(--main-color-l) * .9));
}

div.top-menu  div.user_dropdown div.user_dropdown_content {
  	display: none;
  	position: absolute;
  	background-color: #fff;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  	z-index: 1000;
}

div.top-menu  div.user_dropdown div.user_dropdown_content a {
  	color: #000000;
  	cursor: pointer;
    font-size: 12px;
    text-align: left;
    text-decoration: none !important;
    display: block;
    padding: 10px 0 10px 5px;
    border-bottom: 1px solid #ddd;
}

div.top-menu  div.user_dropdown div.user_dropdown_content a i {
  	margin-right: 5px;
}

div.top-menu  div.user_dropdown div.user_dropdown_content.active a:hover {
	color:#FFFFFF;
	background-color:var(--main-color);
}

div.top-menu  div.user_dropdown div.user_dropdown_content.active {
  	display: block;
	position: fixed;
  	right: 1%;
}

section.bottom{
	display:flex;
	flex-direction:row;
	width:100%;
	height:calc( 100% - 42px );
}

section.bottom section.side{
	
	width:260px;
	background-color:#34393d;
	height:100%;
	position:relative;
	box-sizing:border-box;
	border-right:10px solid #5C646B;
	z-index: 999;
	
}

section.bottom section.side.closed{
	
	width:50px;
	 
}

section.bottom section.side span.burger{
	
	display:block;
	position:absolute;
	top:50%;
	right:0;
	margin-right:-20px;
	margin-top:-10px;
	width:30px;
	height:30px;
	background-color:#5C646B;
	border-radius:4px;
	z-index:5;
	cursor:pointer;
	
}

section.bottom section.side span.burger:before{
	
	font-family:FontAwesome;
	content:"\f0c9";
	position:absolute;
	top:0;
	left:0;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:13px;
	color:#fff;
	
}

section.bottom section.side nav.side{
	
	width:100%;
	display:block;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	white-space:nowrap;
	text-overflow:ellipsis;
	
}

section.bottom main.middle{
	position: relative;
	display:block;
	flex:1;
	height:100%;
	width: calc( 100% - 260px );
	background-color:#fff;
}

section.bottom nav.side ul{
	display:block;
	width:100%;
	height:auto;
	padding:0;
	margin:0;
	padding-left:5px;
	box-sizing:border-box;
	list-style-type:none;
	
}

section.bottom nav.side ul li{
	width:100%;
	display:block;
	height:60px;
	line-height:60px;
	color:#999;
	box-sizing:border-box;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap; 
	padding-left:45px;
	position:relative;
	font-size:16px;
	
	background-size: 45px 45px;
    background-position: -7px center;
    background-repeat: no-repeat;
	
}

section.bottom nav.side ul a, div.top-menu nav.menu ul a{
	color:#999;
	text-decoration:none;
	border:none;
	
}

section.bottom nav.side ul li:before {
	font-family: 'Font Awesome\ 5 Free';
	font-weight: 900;
	position:absolute;
	left:2px;
	top:0;
	height:60px;
	width:30px;
	text-align:left;
	line-height:60px;
	color:#999;
	font-size:26px;
	
}

section.bottom nav.side ul li#dashboard:before{
	content:"\f015";
}

/*section.bottom nav.side ul li#dashboard{
	background-image:url( /templates/medicheck.vtemplate/assets/images/CASA.png );
}*/

section.bottom nav.side ul li#patient_intake:before {
	content:"\f0c0";
}

/*section.bottom nav.side ul li#patient_intake {
	background-image:url( /templates/medicheck.vtemplate/assets/images/USUARIOS.png );
}*/

section.bottom nav.side ul li#users:before{
	content:"\f47f";
}

section.bottom nav.side ul li#saas_users:before{
	content:"\f508";
}

section.bottom nav.side ul li#schedule:before{
	content:"\f073";
}

/*section.bottom nav.side ul li#schedule{
	background-image:url( /templates/medicheck.vtemplate/assets/images/CALENDARIO.png );
}*/

section.bottom nav.side ul li#report:before{
	content:"\f201";
}

/*section.bottom nav.side ul li#report{
	background-image:url( /templates/medicheck.vtemplate/assets/images/ESTADISTICAS.png );
}*/

section.bottom nav.side ul li#prompt:before{
	content:"\f05e";
}

section.bottom nav.side ul li#settings:before{
	content:"\f013";
}

section.bottom nav.side ul li#log_out:before{
    content:'\f011';
}

section.bottom nav.side ul li#pages:before{
    content:'\f05a';
}

section.bottom nav.side ul li#invoice:before{
    content:'\f570';
}

section.bottom nav.side ul li#data_first:before{
    content:'\f022';
}

section.bottom nav.side ul li#data_appointment:before{
    content:'\f274';
}


section.bottom nav.side ul li#notifications:before{
    content:'\f075';
}

header.main nav.top div.general-countdown {
	display: inline-block;
    height: 42px;
    line-height: 42px;
    vertical-align: top;
    width: 450px;
    margin-right: 20px;
    color: white;
}

header.main nav.top div.general-countdown label {
	text-transform: uppercase;
    font-size: 18px;
    padding-right: 10px;
    vertical-align: top;
}

header.main nav.top div.general-countdown div.clock-container {
	display: inline-block;
    height: 42px;
}

header.main nav.top div.general-countdown div.clock-container div.slot {
	display: inline-block;
    width: 50px;
    text-align: center;
    height: 42px;
    vertical-align: top;
}

header.main nav.top div.general-countdown div.clock-container div.slot div span {
	line-height: normal;
    text-transform: uppercase;
}

header.main nav.top div.general-countdown div.clock-container div.slot div.number {
	margin-bottom: 3px;
}

header.main nav.top div.general-countdown div.clock-container div.slot div.number span {
	font-weight: 600;
	font-size: 16px;
}

header.main nav.top div.general-countdown div.clock-container div.slot div.smalltext span {
	font-size: 12px;
}

header.main nav.top div.general-countdown div.clock-container div.slot div {
	display: grid;
    height: 20px;
}

@media screen and (max-width:850px){
	
	header.main nav.top div.top-menu,
	header.main nav.top div.vhelper {
		padding-left: 0;
	
	}
	
	header.main nav.top div.general-countdown {
		display:none;
	}
	
	body {
		overflow:hidden;
	}
	
	header.main nav.top div.vhelper{
		vertical-align: unset;
		padding-left: 0;
    	padding-right: 0;
	}
	
	div.top-menu  div.user_dropdown button.dropbtn {
	  	white-space: nowrap;
    	overflow: hidden;
	 	text-overflow: ellipsis;
    	max-width: 200px;
	}
	
	div.top-menu  div.user_dropdown div.user_dropdown_content.active {
	  	right: unset;
	  	left: calc(100% - 215px);
	}
	
	header.main section.logo{
		position: absolute;
    	right: 0;
		width:50px;
		color:var(--main-color);
		overflow:hidden;
		padding: 0 0 0 50px;
		background-size:auto 100%;
		background-image:url( /templates/medicheck.vtemplate/assets/images/medicheck_heart_check_vector.svg );
		
		background-position:5px center;
	}
	
	header.main section#clinic.logo{
		background-image:url( /templates/medicheck.vtemplate/assets/images/medicheck_app_42px.png );
		background-size: 220px 30px;
	}
	
	header.main section#clinic.logo span.clinic {
		display:none;
	}
	
	header.main section.general-logo label#header_name {
	    font-size: 20px;
	    width: 100%;
	    display: block;
	}
	
	header.main section.general-logo span {
	    font-size: 14px;
	    top: 1%;
	}
	
	header.main section.covid-logo {
		padding: 0 5px 0 35px;
		font-size: 20px;
		background-size: 30px 30px;
		height: 35px;
    	line-height: 35px;
	}
	
	header.main section.covid-logo span {
		font-size: 12px;
    	margin-right: 10px;
    	top: 0;
	}
	
	header.main section.covid-logo span img {
		width: 80px;
	    height: 25px;
	}
	
	header.main section.general-logo span img {
	    width: 110px;
	}
	
	header.main nav.top{
		width:calc( 100% - 50px );
	}

	section.bottom{
		box-sizing:border-box;
		width:100%;
	}
	
	section.bottom.covid{
		height: calc(100% - 70px);
	}
	
	section.bottom.general{
		height: calc(100% - 70px);
	}
	
	section.bottom section.side{
		position:absolute;
		z-index: 99;
	}
	
	section.bottom section.side.closed{
		width:0;
		border-right: none;
	}
	
	section.bottom section.side span.burger{
	    bottom: calc(100% - 10px);
	    top: auto;
	    right: auto; 
     	margin: 0;
	    width: auto; 
	    height: 42px;
	    cursor:pointer;
	    background-color: none; 
	}
	
	section.bottom section.side span.burger:before {
		width: 45px;
		line-height: normal; 
		font-size: 23px;
	}

}

@media print {
	header.main{
		display:none;
	}
	
    section.side {
        display: none;
    }
    
   	header.main section.logo{
		overflow:visible;
		
	}
	
	header.main nav.top span{
		display:none;
	}
	
}