/*Estilos DS-Admin*/

@import url(bootstrap.css);
@import url(icon.css);
@import url(font-awesome.min.css);
@import url(datatables.min.css);
@import url(material.min.css);
@import url(getmdl-select.min.css);
@import url(animate.css);

@font-face{
	font-family: 'Neue';
	src: url(../fonts/neue/HelveticaNeue-Regular.ttf);
}

@font-face{
	font-family: 'Neue Light';
	src: url(../fonts/neue/HelveticaNeue-Light.ttf);
}

/*Main colors*/
.menucolor{
	background: #05456d;
	color: white;
}

.headercolor{
	border-bottom: solid 1px #05456d;
}

.menuitemcolor{
	background-color: #05456d !important;
	color: white;
}

.bubblecolor{
	background: #e20b2a;
	color: white;
	font-size: 9px;
}

.colorpanel-1{
	background: #e20b2a;
}

.colorpanel-2{
	background: #05456d;
}

.color-overlaylogin{
	background-color: rgba(5, 69, 109, .85);
}

.btnlogin-color{
	background-color: #e20b2a;
	color: white;
}
/*Main colors*/

 body{
  	display: flex;
  	flex-direction: row;
  	flex-wrap: nowrap;
  	position: relative;
    overflow-x: hidden;
    font-family: 'Neue';
 }

 .sidebar{
 	position: relative;
 	width: 17%;
 	background: white;
 	padding: 0;
 	-webkit-box-shadow: 1px 0px 2px 0px rgba(204,204,204,0.49);
	-moz-box-shadow: 1px 0px 2px 0px rgba(204,204,204,0.49);
	box-shadow: 1px 0px 2px 0px rgba(204,204,204,0.49);
	z-index: 9;
 }

.thinside{
	width: 6% !important;
}

.widedash{
	width: 94% !important;
}

.fullwidth{
	width: 100% !important;
}

.littleimg{
	width: 35px !important;
	height: 35px !important;
}

.centeredhard{
	margin-left: 14px;
	margin-right: 15px;
}

.oculto{
	display: none;
}

 .logobox{
 	height: 80px;
 	padding: 20px;
 	text-align: center;
 }

 .logobox img{
 	width: 80%;
 }

 .userbox{
 	padding: 20px;
 	text-align: center;
 	display: flex;
 	flex-direction: column;
 }

 .userimg{
 	width: 68px;
 	height: 68px;
 	border-radius: 50%;
 	margin: 0 auto;
 }

 .userimg img{
 	width: 100%;
 	border-radius: 50%;
 }

 .username{
 	font-size: 15px;
 	color: black;
 	margin-top: 20px;
 	margin-bottom: 0;
 }

 .user-rol{
 	font-size: 12px;
 	color: #808080;
 	margin-bottom: 0;
 }

 .searchwrap{
 	position: relative; 	
 }

.searcher{
	width: 100%;
    background-color: #e6e6e6;
 	padding: 10px 20px;
 	border: none;
 	color: #999999;
 	font-size: 14px;
 	font-weight: lighter;	
} 

.searchwrap i{
	position: absolute;
	right: 20px;
	top: 13px;
 	font-size: 15px;
 	color: #4d4d4d; 	
 }

 nav ul{
 	padding: 0;
 	margin: 0;
 }

 nav ul li{
 	position: relative;
 	list-style: none;
 	font-size: 14px;
 	font-weight: lighter;
 	cursor: pointer;
 }

 nav ul li:last-child{
  	margin-bottom: 0;
 }

 nav ul li a{ 	
 	font-size: 14px;
 	font-weight: lighter;
 	display: block;
 	padding: 10px 20px;
 	text-decoration: none;
 	color: white;
 	transition: all .3s ease;
 }

 nav ul li a:hover,  nav ul li a:focus,  nav ul li a:active{
 	color: white;
 	text-decoration: none;
 	background-color: rgba(26, 26, 26, .2);
 }

 nav ul li i{
  	font-size: 15px;
  	margin-right: 10px;
 }

.treeview-menu{
	display: none;
	padding-left: 5px;
}

.treeview-menu .treeview-menu{
	padding-left: 10px;
}

.treeview-menu li a:hover, .treeview-menu li a:focus, .treeview-menu li a:active{
	background-color: transparent;
}

 .chevronmenu{
 	float: right;
 	margin-top: 6px;
 }

 .rotaico{
 	transition: all .3s ease;
 	transform: rotate(180deg);
 } 	

 .thinside .sidebar-menu>li:hover a, .thinside .searchwrap:hover{
 	width: 240px;
 	border-left: 7px solid rgba(26, 26, 26, .2);
 }


  .thinside .sidebar-menu>li:hover>.chevronmenu{
  	transition: all .3s ease;
  	transform: rotate(180deg);
  }

  .thinside .sidebar-menu>li:hover>.treeview-menu{
  	display: block !important;
  	position: absolute;
  	top: 40px;
  	right: -240px;
  	width: 240px;
  }

 .thinside .searchwrap i{
	right: 30px;
 }

  .thinside .searchwrap:hover i{
	right: 20px;
 }


  .thinside .sidebar-menu>li:hover a span, .sidebar-menu>li:hover a .chevronmenu{
 	display: inline-block;
 }



 .thinside .treeview-menu,  .thinside .treeview-menu .treeview-menu{
 	padding-left: 0;
 }

 .closession{
 	width: 100%;
 	background-color: #e6e6e6;
 	padding: 10px 20px;
 	border: none;
 	color: #999999;
 	font-size: 14px;
 	font-weight: lighter;
 	border-style: none;
 	text-align: left;
 	margin-bottom: 100px;
 }

 .closession i{
 	font-size: 15px;
 	color: #4d4d4d;
 	margin-right: 10px;
 }

 .dslogo{ 	
 	text-align: center;
 	padding: 20px;
 	border-top: 1px solid #ccc; 	
 }

  .dslogo p{
	font-size: 11px;
	color: #666;
	font-weight: lighter;
	margin-bottom: 0;
 }

 .dslogobig{
 	width: 130px;
 }

 .dslogosmall{
 	display: none;
 	width: 100%;
 }

 .dslogosmall img{
 	width: 50%;
 }

.titleheader{
 	position: absolute;
 	top: 25px;
 	left: 60px;
 	width: 60%;
 }
 
 .titleheader h1{
 	font-size: 16px;
 	line-height: 16px;
 	color: #fff;
 	margin: 0;
 	margin-bottom: 4px;
 	margin-top: 7px;
 }

 .titleheader h2{
 	font-size: 14px;
 	line-height: 14px;
 	color: #777;
 	font-weight: lighter;
 	margin: 0;
 }
 .dashboard{
 	width: 83%;
 	background: #f2f2f2;
 	z-index: 8;
 }

 .overdash{
 	display: none;
 	position: absolute;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	width: 100%;
 	background-color: rgba(51, 51, 51, .8);
 	z-index: 8;
 }

 header{
 	position: relative;
 	background-color: #4e7380;
 	padding: 20px;
 	height: 80px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	border-bottom: 1px solid #e6e6e6;
 }

 .headertoogle{
	padding-top: 6px;
 }

 .headertoogle i{
 	color:  white;
 	font-size: 24px;
 	cursor: pointer;
 }

.headertools{
	width: 250px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.notifications{	
	position: relative;
	padding-top: 7px;
	width: 15%;
	margin-right: 10px;
}

.notifications i{
	color: white;
	font-size: 24px;
	cursor: pointer;	
}

.bubble{
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.notifbox{
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	width: 240px;
	padding: 0;
	background-color: white;
	border-radius: 2px;
	z-index: 9;
	-webkit-box-shadow: 1px 0px 2px 0px rgba(204,204,204,0.49);
	-moz-box-shadow: 1px 0px 2px 0px rgba(204,204,204,0.49);
	box-shadow: 1px 0px 2px 0px rgba(204,204,204,0.49);

}

.notifbox ul{
	padding: 0;
	list-style: none;
	max-height: 200px;
	overflow-y: scroll;
}

.notifbox ul li{
	border-bottom: 1px solid #999;
	font-size: 12px;
	line-height: 10px;
	padding: 15px 10px;
}

.notifbox ul li a{
	color: #666;
}

.notifbox ul li a i{
	font-size: 12px;
	color: rgb(33,150,243);
	margin-right: 10px;
}

.headnotif{
	background-color: #eee;
	text-align: center;
	font-weight: 600;
}

.headertools .searchwrap{
	width: 85%;
	display: inline-block;
} 

 .dashboard-content{
 	position: relative;
 	padding: 20px;
 	min-height: 600px;
 }

 .dashpanel{
 	position: relative;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
 }

 .levelfade{
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	width: 100%;
 }

.paneles{
	width: 33.333%;
	padding: 10px 20px;
	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	color: white;
 }

 .labelpanel{
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	padding-top: 7px;
 }

 .labelpanel , .infopanel{
 	width: 50%;
 }

 .labelpanel i{
 	color: rgba(255, 255, 255, .4);
 	font-size: 40px;
 	margin-right: 20px;
 }

 .labelpanel p{
 	font-size: 17px;
 	line-height: 16px;
 	margin-top: 3px;
 }

 .infopanel{
 	text-align: right;
 }

 .infopanel p{
 	font-size: 34px;
 	font-weight: bold;
 	margin-bottom: 0;
 	margin-top: 14px;
 }

 .colorpanel-3{
 	background-color: #333333;
 }

 .tablas, .formularios{
 	padding: 20px;
 	margin-top: 20px;
 	background-color: white;
 }

 .formularios{
 	display: none;
 }

 .formularios h3{
 	font-size: 16px;
 	color: #333;
 	text-align: center;
 }

 .rowforms{
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 }

 .sideform{
 	width: 49%;
 }

 .getmdl-select .icon-chevron-down{
 	font-size: 18px !important;;
 }
 	

 .botones{
 	text-align: right;
 	margin-top: 20px;
 }

#additem{
	background-color: #05456d;
	color: white;
	text-transform: uppercase;
	border-style: none;
	padding: 0 16px;
	font-size: 14px;
}

.additem{
	background-color: #05456d;
	color: white;
	text-transform: uppercase;
	border-style: none;
	padding: 0 16px;
	font-size: 14px;
}

.mdl-button{
	border-radius: 0 !important;
}

.mdl-button--raised{
	box-shadow: none !important;
}

 .tablas table{
 	width: 100%;
 }

 .tablas button{
 	border-radius: 0;
 }

 .tablashead{
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	justify-content: space-between;
 	margin-bottom: 20px;
 }

 .titleform{
 	font-size: 16px;
 	color: #333;
 }

 .addnew{
 	font-size: 12px;
 }

 .addnew i{
 	margin-right: 5px;
 }

 .dataTables_wrapper .dataTables_filter input {
    border-style: none;
    background: #e6e6e6;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #ccc;
}

table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px;
    border-bottom: 2px solid #ccc;
    border-top: 1px solid #ccc;
}

.dataTables_length label, .users_filter label{
	font-size: 14px;
	color: #333;
	font-weight: lighter !important;
}

select[name='users_length']{
	background-color: #ccc;
	border: 0;
	font-size: 12px;
	padding: 3px;
}

table.dataTable thead th, table.dataTable tfoot th{
	font-weight: normal;
	color: #4d4d4d;
	font-size: 14px;
}

tr{
 color: #808080;
 font-size: 14px; 
}

.dataTables_info{
	color: #333;
	font-size: 12px;
	font-weight: lighter;
}

.options-icon{
	margin-right: 20px;
	cursor: pointer;
}

.mobilabel{
	display: none;
	color: #4d4d4d;	
	float: left;
}

.on{
	color: #5cb85c;
}

.off{
	color: #cc6257;
}

.edit{
	color: #4d4d4d;
}

.mainbg{
	position: relative;
}

.mainbg img{
	width: 100%;
}

.overlay-login{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
}

.brandlogin{
	position: absolute;
	width: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	padding: 0 80px 40px 80px;
}

.logobox-login{
	width: 270px;
	height: auto;
	margin: 0 auto;
	text-align: center;
	padding: 20px;
	background-color: white;
}

.logobox-login img{
	width: 80%;
}

.slogan{
	font-size: 46px;
	line-height: 48px;
	color: white;
	font-weight: 300;
	margin-top: 200px;
	padding-left: 100px;
	margin-bottom: 200px;
}

.copylogin{
	text-align: center;
	color: white;
	font-size: 13px;
	font-weight: 300;
}

.login-section{
	position: absolute;
	width: 50%;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #f2f2f2;	
	padding: 100px 80px 40px 80px;
}

.login-section h3{
	font-size: 24px;
	color: #333;
	text-align: center;
	font-weight: 300;
}	

.mdl-textfield{
	width: 100%;
}

.mdl-textfield__label{
	margin-bottom: 0;
}

.mdl-button{
	font-family: 'Neue' !important;
}

.labelswitch{
	margin-right: 10px;
    margin-top: 20px;
}

.mdl-checkbox, .mdl-switch{
	width: 66px;
}

.filewrap{
	position: relative;
}

.filewrap input{
	margin-bottom: 39px;
	width: 100%;
	outline: none;
}

.filewrap .labelwrap{
	position: absolute;
	top: -7px;	
}

.filewrap .labelwrap .btnlabel{
   display: inline-block;
   background-color: #ccc;
   color: #333;
   padding: 10px;
   text-align: center;
   cursor: pointer;
   width: 139px;
}

#loginform button{
	width: 100%;
	text-align: center;
	padding: 10px;
	font-size: 16px;
	font-weight: 300;
	border-style: none;
}

.loginform button{
	width: 100%;
	text-align: center;
	padding: 10px;
	font-size: 16px;
	font-weight: 300;
	border-style: none;
}

.logingoogle{
	border: 1px solid #999 !important;
	background-color: transparent;
	color: #333333;
	margin-top: 10px;
}

.logingoogle img{
	width: 17px;
	display: inline-block;
	margin-right: 10px;
}

.radiogroup .mdl-radio{
	display: block;
}

.checkgroup .mdl-checkbox{
	display: block;
	width: 100%;
}