/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the
 * later versions of this theme.
 *
 * We advise that you use use this CSS to override
 * SmartAdmin styles.
 *
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 *
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

/*@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,700');*/

@font-face {
  font-family: 'Raleway';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/Raleway-regular/Raleway-regular.eot');
  src: url('fonts/Raleway-regular/Raleway-regular.eot?#iefix') format('embedded-opentype'),
       local('Raleway'),
       local('Raleway-regular'),
       url('fonts/Raleway-regular/Raleway-regular.woff2') format('woff2'),
       url('fonts/Raleway-regular/Raleway-regular.woff') format('woff'),
       url('fonts/Raleway-regular/Raleway-regular.ttf') format('truetype'),
       url('fonts/Raleway-regular/Raleway-regular.svg#Raleway') format('svg');
}

@font-face {
  font-family: 'Raleway';
  font-weight: 400;
  font-style: italic;
  src: url('fonts/Raleway-italic/Raleway-italic.eot');
  src: url('fonts/Raleway-italic/Raleway-italic.eot?#iefix') format('embedded-opentype'),
       local('Raleway Italic'),
       local('Raleway-italic'),
       url('fonts/Raleway-italic/Raleway-italic.woff2') format('woff2'),
       url('fonts/Raleway-italic/Raleway-italic.woff') format('woff'),
       url('fonts/Raleway-italic/Raleway-italic.ttf') format('truetype'),
       url('fonts/Raleway-italic/Raleway-italic.svg#Raleway') format('svg');
}

@font-face {
  font-family: 'Raleway';
  font-weight: 700;
  font-style: italic;
  src: url('fonts/Raleway-700italic/Raleway-700italic.eot');
  src: url('fonts/Raleway-700italic/Raleway-700italic.eot?#iefix') format('embedded-opentype'),
       local('Raleway Bold Italic'),
       local('Raleway-700italic'),
       url('fonts/Raleway-700italic/Raleway-700italic.woff2') format('woff2'),
       url('fonts/Raleway-700italic/Raleway-700italic.woff') format('woff'),
       url('fonts/Raleway-700italic/Raleway-700italic.ttf') format('truetype'),
       url('fonts/Raleway-700italic/Raleway-700italic.svg#Raleway') format('svg');
}

/* Estilos comunes */
.clear { clear:both; }
.block { display:block; }
.no-overflow { overflow:hidden; }
.clear { clear: both; }
.small-font { font-size: 11px !important; }
.medium-font { font-size: 13px !important; }
.large-font { font-size: 16px !important; }
.big-font { font-size: 26px !important; }
.to-left { text-align: left; }
.to-right { text-align: right; }
.no-bold { font-weight:300 !important; }
.align-center { text-align: center !important; }
.underline { text-decoration: underline; }
.disable-pointer { pointer-events: none; }
.hcenter { margin-left: auto; margin-right: auto; }
.tocenter { text-align: center; }
.no-margin { margin: 0; }
.margin-t10 { margin-top:10px; }
.margin-t20 { margin-top:20px; }
.margin-r10 { margin-right: 10px; }
.margin-b5 { margin-bottom: 5px; }
.margin-b10 { margin-bottom: 10px; }
.margin-b20 { margin-bottom: 20px; }
.margin-tb5 { margin-top: 5px; margin-bottom: 5px; }
.form-label { font-size: 15px !important; }
.margin-b0 { margin-bottom:0px !important; }
.nobold { font-weight:300 !important; }
.padding-20 { padding:20px; }
.padding-0 {padding: 0px !important;}
.padding-5 {padding: 5px !important;}
.padding-10 {padding: 10px !important;}
.padding-15 {padding: 15px !important;}
.padding-t5 { padding-top:5px !important; }
.padding-t10 { padding-top:10px !important; }
.padding-t15 { padding-top:15px !important; }
.padding-t20 { padding-top:20px !important; }
.padding-t30 { padding-top:30px !important; }
.padding-lr15 { padding-left:15px !important; padding-right:15px !important;}
.spacer { display:block; height:20px; overflow:hidden; }
.inline { display:inline-block; }
.uppercase { text-transform: uppercase; }
.letter-compact { letter-spacing:-1px; } 

.modal .modal-dialog-wide { width: 700px; }

.flex { display:flex; }
.table { display: table; }
.cell { display:table-cell; }

/* Hacks al template SmartAdmin */
h1, h2, h3, h4 { font-family:"Raleway"; }
body { 
    font-family:'Raleway'; 
    font-weight:400 !important; 
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);    
}

.min-width-btn { min-width: 220px;}

/* Logo */
#logo { color: #ffffff; }
#logo-login img { width:140px !important; margin-top:20px; }
#logo-login::before { content:"" !important; }
#logo::before { content:"Europa ITS" !important; }

/* Hack para que funcione el datepicker en una ventana modal*/
.ui-datepicker {z-index:1150 !important;}
.modal-backdrop { opacity:0 !important; }

/* Profile */
.profile-background {
	height: 200px;
	background: url("../../static/img/app/profile-background.jpg") no-repeat center;
	background-size: cover;
}

/* Formularios */
.form-control[disabled] { background-color:#eee !important; }
.smart-form .toggle i:before { font-size:12px; }
.smart-form .toggle i:after { font-size:12px; }

/* Estilos para resaltar errores en formularios */
.help-block>p {
	background-color: #ff6666;
	color: white;
	padding: 4px;
	box-sizing: border-box;
	font-size: 12px;
}

.error-block {
	background-color: #ff6666;
	color: white !important;
	padding: 4px !important;
	box-sizing: border-box;
	font-size: 12px;
}

/* Para algunas modales que necesitan más anchura en desktop */
@media (min-width: 992px) {
  .modal-desktop {
    width: 750px;
  }
}

/* Wizards */
.five-step-wizard li { width: 20% !important; }

/* Estilos para la lista de hitos */
.event-list {
	background-color: rgb(255, 255, 255);
	list-style: none;
	font-family: 'Lato', sans-serif;
	margin: 0px;
	padding: 0px;
}
.event-list > li {
	/*background-color: rgb(197, 44, 102);*/
	box-shadow: 0px 0px 5px rgb(51, 51, 51);
	box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
	padding: 0px;
	margin: 0px 0px 20px;
}
.event-list > li > time {
	display: inline-block;
	width: 100%;
	color: rgb(255, 255, 255);
	background-color: none;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
}
.event-list > li:nth-child(even) > time {
	background-color: none;
}
.event-list > li > time > span {
	display: none;
}
.event-list > li > time > .day {
	display: block;
	font-size: 46pt;
	font-weight: 100;
	line-height: 1;
}
.event-list > li time > .month {
	display: block;
	font-size: 14pt;
	font-weight: 900;
	line-height: 1;
}
.event-list > li time > .time {
	display: block;
	font-size: 15pt;
	font-weight: 900;
	line-height: 1;
}
.event-list > li > img {
	width: 100%;
}
.event-list > li > .info {
	text-align: center;
	box-sizing: border-box;
	padding: 10px;
}
.event-list > li > .info > .title {
	font-size: 17pt;
	font-weight: 700;
	margin: 0px;
}
.event-list > li > .info > .desc {
	font-size: 13pt;
	font-weight: 300;
	margin: 0px;
}
.event-list > li > .info > ul,
.event-list > li > .social > ul {
	display: table;
	list-style: none;
	margin: 10px 0px 0px;
	padding: 0px;
	width: 100%;
	text-align: center;
}
.event-list > li > .social > ul {
	margin: 0px;
}
.event-list > li > .info > ul > li,
.event-list > li > .social > ul > li {
	display: table-cell;
	cursor: pointer;
	color: rgb(30, 30, 30);
	font-size: 11pt;
	font-weight: 300;
    padding: 3px 0px;
}
.event-list > li > .info > ul > li > a {
	display: block;
	width: 100%;
	color: rgb(30, 30, 30);
	text-decoration: none;
}
.event-list > li > .social > ul > li {
    padding: 0px;
}
.event-list > li > .social > ul > li > a {
    padding: 3px 0px;
}
.event-list > li > .info > ul > li:hover,
.event-list > li > .social > ul > li:hover {
	color: rgb(30, 30, 30);
	background-color: rgb(200, 200, 200);
}
.facebook a,
.twitter a,
.google-plus a {
	display: block;
	width: 100%;
	color: rgb(75, 110, 168) !important;
}
.twitter a {
	color: rgb(79, 213, 248) !important;
}
.google-plus a {
	color: rgb(221, 75, 57) !important;
}
.facebook:hover a {
	color: rgb(255, 255, 255) !important;
	background-color: rgb(75, 110, 168) !important;
}
.twitter:hover a {
	color: rgb(255, 255, 255) !important;
	background-color: rgb(79, 213, 248) !important;
}
.google-plus:hover a {
	color: rgb(255, 255, 255) !important;
	background-color: rgb(221, 75, 57) !important;
}

@media (min-width: 768px) {
	.event-list > li {
		position: relative;
		display: block;
		width: 100%;
		padding: 0px;
	}
	.event-list > li > time,
	.event-list > li > img  {
		display: inline-block;
	}
	.event-list > li > time,
	.event-list > li > img {
		width: 120px;
		float: left;
	}
	.event-list > li > .info {
		background-color: rgb(245, 245, 245);
		overflow: hidden;
	}
	.event-list > li > time,
	.event-list > li > img {
		width: 120px;
		min-height: 120px;
		padding: 0px;
		margin: 0px;
	}
	.event-list > li > .info {
		position: relative;
		min-height: 120px;
		text-align: left;
		padding-right: 40px;
	}
	.event-list > li > .info > .title,
	.event-list > li > .info > .desc {
		padding: 0px 10px;
	}
	.event-list > li > .info > ul {
		position: absolute;
		left: 0px;
		bottom: 0px;
	}
	.event-list > li > .social {
		position: absolute;
		top: 0px;
		right: 0px;
		display: block;
		width: 40px;
	}
	.event-list > li > .social > ul {
	    border-left: 1px solid rgb(230, 230, 230);
	}
	.event-list > li > .social > ul > li {
		display: block;
	    padding: 0px;
	}
	.event-list > li > .social > ul > li > a {
		display: block;
		width: 40px;
		padding: 10px 0px 9px;
	}
}