@CHARSET "ISO-8859-1";
:root{
	--attendance-status-attendant: #C4C8AA;
	--attendance-status-absent: #E0BCA6;
	--success-color: #839345;
	--warning-color: #FFB005;
	--error-color: #EB7DB3;
	--arpa-pink: #E6398C;
	--creamy-blue: #87B5E2;
	--buap-blue: #00395E;
	--highlight-color: #5E93B4;
	--placeholder-color: #c0c0c0;
	--text-color: #8B8B8B;
	--max-content-width: 960px;
	--max-content-wide: 1600px;
	--odd-color: #ECECEC;
	--coco: #c0c0c0;	
	
}

@font-face {
  font-family: SourceSansPro;
  src: url('/static-media/font/SourceSansPro-Regular.ttf');
}

@font-face {
  font-family: SourceSansPro;
  src: url('/static-media/font/SourceSansPro-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: SourceSansPro;
  src: url('/static-media/font/SourceSansPro-Italic.ttf');
  font-style: italic;
}

@font-face {
  font-family: SourceSansPro;
  src: url('/static-media/font/SourceSansPro-BoldItalic.ttf');
  font-weight: bold;
  font-style: italic;
}

::-webkit-input-placeholder { 
  color: var(--placeholder-color);
}

:-ms-input-placeholder { 
  color: var(--placeholder-color);
}

::placeholder {
  color: var(--placeholder-color);
}

.importantText{
	color: var(--arpa-pink);
}

BODY{
	font-family: SourceSansPro,sans-serif;
	font-size: 16px;
	background-color: white;
	color: var(--text-color);
	margin: 0px;
	margin-top: 60px;
	margin-bottom: 200px;
	background-image: url('/apps/images/gui/dots_bg.png');
}

.monsterBg{
	background-image: url('/apps/images/bg/monster-eyes.jpg');
	background-repeat: no-repeat;
	background-position: bottom center;
}

A:ACTIVE{
	text-decoration: none;
	color: #878787;
}

A:LINK{
	text-decoration: none;
	color: #878787;
}

a:HOVER{
	text-decoration: underline;
}

a:VISITED{
	text-decoration: none;
	color: #878787;
}

#pageNavBar{
	text-align: left;
	max-width: var(--max-content-width);
	margin: 0px auto; 
	color: var(--creamy-blue);
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	font-size: 0.9em;
}

.bold{
	font-weight: bold;
}

.unselectableText{
	-webkit-user-select: none; /* Safari */
 	-ms-user-select: none; /* IE 10 and IE 11 */
 	user-select: none; /* Standard syntax */
}


.warningBg, .warningBg a{
	background-color: var(--warning-color);
	color: white;
}

.warningColor{
	color: var(--warning-color) !important;
}

.warningBorder{
	border-color: var(--warning-color) !important;
}

.positiveBg, .positiveBg a{
	background-color: var(--success-color) !important; 
	color: white !important;
}

.positiveColor{
	color: var(--success-color) !important;
}

.positiveBorder{
	border-color: var(--success-color) !important;
}

.negativeBg, .negativeBg a{
	background-color: var(--error-color);
	color: white;
}

.negativeColor{
	color: var(--error-color) !important;
}

.negativeBorder{
	border-color: var(--error-color) !important;
}

#headerContainer{
	min-height: 50px;
}

#header{
	height: 50px;
	overflow: hidden;
	box-sizing: border-box;
	text-align: center;
	margin: 0px 0px 0px 0px;
	background: linear-gradient(rgba(255, 255, 255, 1) , rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.splitFixedPane{
	position: fixed;
	top: 80px;
	bottom: 0px;
	overflow-y: scroll;
	overflow-x: hidden;  
}

.splitFixedPane[side="left"]{
	left: 0px;
	width: 67%;
	border-right: 1px solid #c0c0c0;
}
	 
.splitFixedPane[side="right"]{
	right: 0px;
	width: 33%;
}


#headerLogo{
	height: 35px;
	width: 32px;
	margin-top: 5px;
	position: absolute;
	top: 0px;
	left: 5px;
	background-image: url('/apps/images/gui/logo_arpa_100.png');
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}

#header .titleTable{
	width: 60%;
	height: 40px;
	text-align: center;
	display: inline-table;
}

.celebrationCoverIcon{
	position: fixed;
	bottom: 0px;
	right: 0px;
	height: 250px;
	width: 250px;
}

@media (min-width : 800px)
{
	#header .titleTable{	
		min-width: 400px;
	}
}

#header .title{
	border-bottom: 1px solid #87B5E2;
	font-size: 1em;
	color: #87B5E2;
	font-weight: bold;
}

#header .button{
	cursor: pointer;
	float: right;
}

#header .menuButton{
	height: 30px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#header .sectionButton{
	height: 25px;
	margin: 7px 5px 5px 5px;
}

#header .userName{
	font-size: 0.75em;
}

#headerMenu{
	position: fixed;
	top: 40px;
	right: 18px;
	min-width: 220px;
	background-color: #687988;
	box-shadow: 3px 3px 5px gray;
	border-radius: 3px;
	display: none;
	color: #F2F2F2;
	z-index: 2000;
	font-size: 0.7em;
}

#headerMenu .menuTitle{
	background-color: #334453;
	border-radius: 3px 3px 0 0; 
	padding: 2px 4px 2px 4px;
	text-align: center;
	margin-bottom: 5px;
	font-size: 1.1em;
}

#headerMenu A:LINK{
	color: #F2F2F2;
}
#headerMenu A:VISITED{
	color: #F2F2F2;
}

#headerMenu .menuItem{
	margin: 2px 5px 5px 5px;
	text-align: center;	
	padding-bottom: 2px;
	border-bottom: 1px solid #334453;
	font-size: 1.2em;
}

#headerMenu .menuUser{
	margin-top: 10px;
	text-align: center;
	font-size: 1.1em;
	border-radius: 0px 0px 3px 3px;
	background-color: #334453;
	padding: 3px;
}


#headerMenuBg{
	background-color: rgba(255,255,255,0.8);
	position: fixed;
	left: 0;
	right: 0;
	top: 42px;
	bottom: 0;
	z-index: 1999;
	display: none;
}


#pageFooter{
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

#pageFooter table{
	border-collapse: collapse;	
	height: 2px;
	width: 100%;
}

#pageFooter td{
	width: 33%;
}


.mainPane960{
	max-width: var(--max-content-width);
	margin: 0px auto;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
	min-height: 80vh;
}

.mainPaneWide{
	max-width: var(--max-content-wide);
	margin: 0px auto;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
	min-height: 80vh;
}

.headerFixed{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 40px;
	z-index: 1000;
}


.fixedFullPage{
	position: fixed;
	top: 40px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
}

.formPanel{
	border: 1px solid #8B8B8B;
	border-bottom: 2px solid #8B8B8B;
	border-right:  2px solid #8B8B8B;
	border-radius: 5px;
	padding: 10px;
	background-color: #E7E7E7;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: left;
	position: relative;
}

.formPanel H1{
	font-size: 1em;
	color: gray;
	padding: 0px;
	margin: 0px 15px 10px 15px;
	text-align: center;
	border-bottom: 1px solid;
	font-weight: bold;
	padding-bottom: 2px;
}

.formPanel P{
	text-align: center;
	margin: 5px 10px 10px 10px;
	font-size: 0.9em;
}

p{
	margin: 0px;
	padding: 0 0 10px 0; 
}

label{
	font-size: 0.9em;
	font-weight: bold;
	margin-bottom: 2px;
	text-align: left;
	display: block;
}

input[type="text"], 
input[type="date"], 
input[type="password"], 
input[type="email"], 
input[type="number"], 
input[type="search"], 
select, textarea{
	width: 100%;
	max-width: 100%;
	margin: 2px;
	font-size: 1em;	
	color: #5B5B5B;	 
	border: 1px solid gray;
	border-bottom: 1px solid gray; 
	border-right: 1px solid gray; 
	margin-bottom: 10px;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px;
    box-sizing: border-box;
    height: 28px;
    font-family: SourceSansPro-Regular,sans-serif;
    border-radius: 4px;
}

textarea{
	height: 66px;
}


input[type="submit"], input[type="button"], button{
	padding: 5px 10px 5px 10px;
	min-width: 200px;
	box-sizing: border-box;
	margin: 2px;
	margin-bottom: 10px;
}

input[type="submit"].importantAction, 
input[type="button"].importantAction{
	background-color: var(--highlight-color);
	color: white;
	border: 1px solid #375B71;
}

input[type="button"]:hover.importantAction,
input[type="button"]:focus.importantAction,
input[type="button"]:active.importantAction{
	background-color: #375B71;
}

input[type="button"]:active.importantAction{
	background-color: var(--highlight-color);
}

.pressHere a:link{
	text-decoration: underline;
}

.pressHere a:VISITED{
	text-decoration: underline;
}

.pressHere a:active{
	text-decoration: underline;
}


h1{
	font-style: normal;
	font-weight: normal;
	font-size: 1.5em;
	padding: 0px;
	margin: 0px;
	color: #00B5E2;
	padding: 0px 5px 2px 5px;
	margin: 0px 5px 10px 5px;
	border-bottom: 2px solid #00B5E2;
	text-align: left;
}

h2{
	font-style: normal;
	font-weight: normal;
	font-size: 1.2em;
	margin: 0px;
	color: #00B5E2;
	padding: 0px 5px 5px 0px;	
}

h3{
	font-style: normal;
	font-weight: bold;
	font-size: 1em;
	padding: 0px;
	margin: 3px 0 5px 0;
	color: #8B8B8B;
	text-align: left;
}

TABLE{
	width: 100%;
/*border: 1px solid #C0C0C0;*/
}

TR[even]{
	background-color: #FAD7E8;
}

TD[center]
{
	text-align: center;
}

.buttons{
	text-align: center;
	padding: 5px;
}

.floatWindow{
	margin: 0 auto;
	margin-top: 70px;
	max-width: 850px;
	max-height: 80vh;
	background-color: #FAFAFA;
	border: 1px solid gray;
	border-radius: 5px;
	box-shadow: 5px 5px 10px #C0C0C0;
	cursor: auto;
	z-index: 1000;
}

.floatWindow h1{
	font-size: 1.2em;
	color: white;
	padding: 5px;
	background-color: #6A8596;
	border-radius: 4px 4px 0px 0px;
	border: none;
	margin: 0;
	text-align: center;
	padding: 2px;
}

.floatWindow .content{
	font-size: 1em;
	color: #404040;
	padding: 5px;
}

.buttonHolder{
	text-align: center;
	margin: 10px;
	position: relative;
}

.buttonHolder input[type="button"]{
	margin-right: 10px;
}

.floatWindow table{
	border: none;
}
.floatWindow th{
	border: none;
}
.floatWindowBg{
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(255, 255, 255, 0.6);
	display: none;
	z-index: 999;
}
/*end of floating window*/

.centeredPane{   
	border: 1px solid gray;
	border-radius: 5px;
	padding: 20px;
	position: absolute;
	width: 400px;
	top: calc(100% / 3);
	left: calc(100% / 2 - 200px); 
	text-align: center;
}

#modulesHolder{
	text-align: center;
	margin: 10px 10px 10px 20px;
}

.appModule{
	width: 170px;
	height: 30px;
	border: 1px solid #c0c0c0;
	margin: 0px 20px 20px 0px;
	display: inline-table;
	padding: 10px 60px 10px 10px;
	position: relative;
	color: #3E586D;
	border-radius: 3px;
	background: linear-gradient(to left, #FFFFFF, #FFFFFF, #E0E0E0);
}

.appModuleSeparator{
	font-size: 0.8em;
	padding-bottom: 1px;
	color: gray;
	text-align: center;
	border-bottom: 1px solid gray;
	margin: 0 auto;
	margin-bottom: 10px;
	max-width: 70%;
}

.appModule a:link{
	color: gray;
}

.appModule a:visited{
	color: gray;
}

.appModule a:active{
	color: gray;
}

.appModule H1{
	font-size: 1.05em;
	text-align: left;
	margin: 0 auto;
	border-bottom: 1px solid #C0C0C0;
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: calc(100% - 55px);
	font-weight: bold;
}

.appModule img{
	position: absolute;
	top: -1px;
	right: -4px;
	width: 40px;
	height: 40px;
	background-color: white;
	border: 1px solid white;
}

.appModule .uselessBar{
	position: absolute;
	left: -2px;
	top: 10%;
	bottom: 10%;
	width: 4px;
	background-color: #E6398C;
}

.birthDateFields{
	position: relative;
	height: 22px; 
}

.birthDateFields SELECT{
	position: absolute;
	width: 30%;
}
.birthDateFields [field="day"]{ 
	left: 0px;
}

.birthDateFields [field="month"]{
	left: 33%;
}

.birthDateFields [field="year"]{
	left: 66%;
}

.imageHolder{
	padding: 10px;
	text-align: center;	
}

.imageHolder IMG{
	max-width: 100%;
} 
.center{
	text-align: center;
}

@media screen and (max-width : 400px)
{
	.appModule{
		min-width: 150px;
		width: 70%
	}
	
	.celebrationCoverIcon{
		height: 150px;
		width: 150px;
	}
}
.instructions{
	font-size: 1em;
	text-align: justify;
	margin-bottom: 20px;
}

.moduleInstructions{
	font-size: 1em;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 20px;
	border: 1px solid #c0c0c0;
	border-radius: 10px 0px 10px 0px;
	padding: 10px;
}

/*
NO MODIFICAR EL ESTILO DE DATA TABLE AQUI,
EN VEZ DE ESO, MIGRAR TODO A /apps/modules/DataTable
*/
.dataTable{
	width: 100%;
	font-size: 0.9em;
	border-collapse: collapse;	
	color: gray;
	border-bottom: 2px solid #5E93B4;
}

.dataTable th a:LINK{
	color: white;
}

.dataTable .rowGroup{
	background-color: #F2F2F2;
}

.dataTable .rowGroupSeparator td{
	height: 10px; 
}

.dataTable .rowGroupBottom{
	border-bottom: 2px solid #c0c0c0;
}

.dataTable th[class="index"]{
	width: 1%;
}

.dataTable td{
	vertical-align: middle;
}

.dataTable td[class="index"]{
	width: 1%;
	text-align: center;
	font-weight: bold;
}


.dataTable th label{
	display: inline;
}

.dataTableHeaderBg{
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}

.dataTable .dataTableHeaderMenu{
	position: absolute;
	z-index: 2;	
	background-color: white;
	box-shadow: 2px 2px 5px gray;
	border: 1px solid #c0c0c0;
}


.dataTable .dtMenuItem{
	min-width: 160px;
	background-color: #63A3BD;
	padding: 5px;
	margin-bottom: 1px;
	cursor: pointer;
	z-index: 3;
	text-align: left;
}

.dataTable td{
	margin: 0px;
	padding: 2px;
	border-top: 1px solid white;
	border-left: 1px solid white;
}

.dataTable th{
	margin: 0px;
	padding: 2px;
	border-bottom: 2px solid white;
	border-left: 1px solid white;
	background-color: #5E93B4;
	color: white;
	font-weight: normal;
	cursor: pointer;
	position: relative;
}


.centered{
	text-align: center;
}

.centered td{
	text-align: center;
}

.borderedModule{
	border: 1px solid #c0c0c0;
	border-right: 2px solid #c0c0c0;
	border-bottom: 2px solid #c0c0c0;
}

.imageLoaderPane{
	background-color: white;
	background-image: url('/apps/images/gui/upload_50.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	width: 500px;
	height: 500px; 
	border: 1px solid gray;
	border-bottom: 2px solid gray; 
	border-right: 2px solid gray; 
}

.imageLoaderPane .uploadProgressPane{
	position: absolute;
	left: 0xp;
	right: 0px;
	bottom: 0px;
	height: 20px;
}

.shady{
	background-color: #F1F1F1;
}

#contactInfo{
	text-align: center;
	font-size: 0.8em;
	margin: 20px 5px 2px 5px; 

}

.bold{
	font-weight: bold;
}

.helpMe{
	color: #87B5E2;
	float: right;
}

.dualColumn{
	columns: 2;
}

.unbreakableColumn{
	-webkit-column-break-inside: avoid;
     page-break-inside: avoid;
     break-inside: avoid;
}
.appCredits{
	text-align: center;
	padding: 10px;
}

.actionsBar{
	padding-top: 5px;
	padding-bottom: 5px;
}

.actionsBar img{
	position: relative;
	top: 3px;
}

.actionsBar span{
	color: var(--highlight-color); 
}

.systemPet{
	background-image: url("/apps/images/pets/kind-pet-1.png");
	background-repeat: no-repeat;
	background-size: 300px;
	background-position:  center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


.notificationsPane{
	height: 32px;
	margin-bottom: 10px;
	text-align: right;
	background-size: 16px;
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 30px;
}

.notificationIcon{
	height: 32px;
	width: 32px;
	margin-left: 10px;
	border-radius: 5px;
	background-color: white
}




/* starts jquery theme */
.ui-widget-header {
	
}

/*ends jquery theme */