@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);

	@font-face {
	  font-family: 'Titillium Web';
	  font-style: normal;
	  font-weight: 300;
	  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(https://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
	}

body {background-color:#efefef; margin : 20px 20px 20px 80px; font-family:sans-serif, 'Lucida Sans', Arial;}
.bkg-index {background: url('../img/quarup-sis-bkg.jpg'); background-color: #ededed; background-position: center center; background-repeat: no-repeat;  background-size: cover; background-attachment: fixed;  overflow: hidden;  height: 800px;  margin:0;}
#trapezoid {border-bottom: 100px solid red; border-left: 25px solid transparent;border-right: 25px solid transparent; height: 0; width: 100px;}


/*/ // upgrade /*/
	.updSis {absolute; top: 30px; left: 100px; text-align: left; border-left: 6px solid #e7bb3a; padding:6px 20px;}
	.updSisI {color: #3d557e; font-size: 52px!important;}
	.updSisP1 {font-size: 18px; color: #3d557e; padding: 0; margin: 0;}
	.updSisP2 {font-size: 22px; padding: 0; margin: 4px 0; font-weight: bold; color: #929297;}
	.updSisP3 {font-size: 12px; padding: 0; margin: 0; color: #333;}


/*/ // LOADING /*/
	.loadingMask {width: 100%; height: 100%; margin:auto; position: absolute; top:0; left:0; background-color: rgba(58, 79, 121, 0.5); z-index:99999; text-align:center; display: none;}
	.loadingFrm {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}
	.loadingCont {width: 330px; height: 330px;  border-radius: 100%; padding: 8px 0px 0px 8px; border: 7px solid rgba(58, 79, 121, 0.4);}
	.loadingCont figure {width: 300px; height: 300px; margin: 0; border-radius: 100%; background:url('../img/loading-study.gif'); background-size: 150%; background-repeat: no-repeat; background-position: center -28px; border: 1px solid rgba(58, 79, 121, 0.7);}
	.loadingCont #msgLoading {font-family:Arial, Helvetica, sans-serif; font-size:0.90em; color:#5a7077; background-color:#E2F2F7; margin: -78px auto 0 auto; padding:6px 0; width:210px; text-align:center;}
	.loadingCont p.spc {border-bottom: 10px solid #a3c6d8; width: 20px; margin: -17px auto 0 auto; padding: 0;}

	/* ScrolBar  */
	.scrollbar {height: 90%;width: 100%;overflow-y:hidden;overflow-x: hidden;}
	.scrollbar:hover {height: 90%;width: 100%;overflow-y: scroll;overflow-x: hidden;}

	/* Scrollbar Style */ 
	#menuShow::-webkit-scrollbar-track{border-radius: 2px;}
	#menuShow::-webkit-scrollbar{width: 5px;background-color: #F7F7F7;}
	#menuShow::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #BFBFBF;}
	/* Scrollbar End */ 

	.main-menu:hover, nav.main-menu.expanded {width:230px; overflow:hidden; opacity:1;}
	.main-menu {background:#F7F7F7;position:fixed;top:0;bottom:0;height:100%;left:0;width:55px;overflow:hidden;-webkit-transition:width .2s linear;transition:width .2s linear;-webkit-transform:translateZ(0) scale(1,1);box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);opacity:1;z-index:999;}
	.main-menu>ul {margin:7px 0;}
	.main-menu li {position:relative; display:block; width:250px; border-bottom: 1px solid #e8e8e8;}
	.main-menu li>a {position:relative; width:250px; padding: 3px 0; display:table; border-collapse:collapse; border-spacing:0; color:#8a8a8a; font-size: 13px;text-decoration:none; border-top:0px solid #f2f2f2;}
	.main-menu li>a i {font-size: 24px; margin: 0 0 0 14px; padding: 6px 0;}

	.main-menu .userMenu {margin:16px auto 20px auto; font-family: 'Titillium Web', sans-serif; border: none;}
	.main-menu .userMenu figure {margin: 0; padding: 0; text-align: left; display: inline-block; height: 40px;}
	.main-menu .userMenu p {padding: 0 0 0 10px; margin: 0; display: inline-block;}
	.main-menu .userMenu p span {padding: 0; margin: 0; display: block; font-size: 0.75em;}

	.main-menu .nav-icon {position:relative;display:table-cell;width:55px;height:36px;text-align:center;vertical-align:middle;font-size:18px;}
	.main-menu .nav-text  {position:relative;display:table-cell; vertical-align:middle; width:190px; font-family: 'Titillium Web', sans-serif;}
	.main-menu>ul.logout {position:absolute;left:0;bottom:0;}
	.no-touch .scrollable.hover {overflow-y:hidden;}
	.no-touch .scrollable.hover:hover {overflow-y:auto; overflow:visible;}

	a:hover,a:focus {text-decoration:none; border-left:0px solid #F7F7F7;}
	nav {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none; }
	nav ul,nav li {outline:0;margin:0;padding:0;text-transform: uppercase;}

	/* Darker element side menu End*/
	.main-menu li:hover>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a {
	color:#fff;background-color:#7287ad; /*00bbbb*/;text-shadow: 0px 0px 0px;}

	nav.main-menu li.active>a, .dashboard-page nav.dashboard-menu ul li.active a {
	color:#fff;background-color:#273F60; /*00bbbb*/;text-shadow: 0px 0px 0px;}


	.area {float: left;background: #e2e2e2;width: 100%;height: 100%;}

	.msgEOF {display: block; text-align: left; margin: 10px 0; padding: 10px; width: auto; height: 26px; clear: both;}
	.msgEOF i {font-size: 1.6em; color: #cf9800; float: left;}
	.msgEOF p {font-size: 0.85em; font-weight: 500; color: #273F60; margin: 5px 0 0 5px; float: left;}

	.iconTop {text-decoration: none; margin: 0; padding: 0 12px; cursor: pointer;}
	.iconTop i {font-size: 2.2em; color: #efb61a; display: inline-block;}
	.iconTop i:hover {opacity: 0.7;}
/*.addNew p {font-size: 0.85em; color: #3A4F79; font-weight: 600; vertical-align: top; margin: 0; padding: 12px 0 0 2px; display: inline-block;}*/

	.frmCalen {border:1px solid #DAE4EF; padding:10px; margin: 0px; width: 352px; border-radius:6px; background-color: #DAE4EF;}
	.dvDiaCalen {margin: 2px; padding:0px; border: 1px solid #CCC; border-radius: 4px; width:38px; display: inline-block; text-align:center;}
	.diaLegCalen {font-size: 0.70em; margin: 0; padding: 2px 4px; text-align:center; color: #4d627c;}
	.diaCalen {margin: 2px; padding:0px; border: 1px solid #CCC; border-radius: 4px; width:38px; height: 30px; display: inline-block; text-align:center; color: #4d627c;}
	.diaCalen:hover {border-color: #92b9cc;}
	.spDiaCalen {margin: 2px; padding:0px; border: 1px solid #edeaea; border-radius: 4px; width:38px; height: 30px; display: inline-block; text-align:center;}
	.sppDiaCalen {margin: auto; padding: 5px 0; font-size: 14px;}

	.tooltip {position: relative; display: inline-block; border-bottom: 1px dotted #ced4e0; cursor:help; /* If you want dots under the hoverable text */ }
	.tooltip .tooltiptext {visibility: hidden; width: 100px; background-color: #c7d0e1; color: #223456; text-align: center; border-radius: 4px; padding:12px 6px; position: absolute; z-index: 1;   top: -10px; left: 110%; font-size: 13px;}
	/*.tooltip .tooltiptext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #c7d0e1 transparent transparent transparent; }*/
	.tooltip:hover .tooltiptext {visibility: visible;}

	.tooltip .tooltiptext h4 {border-bottom: 1px solid #223456; font-size: 12px; margin: 0 0 10px 0; padding: 5px; color: #223456!important;}
	.tooltip .tooltiptext p {margin:0; padding:  2px 0 2px 10px; font-size: 12px;}
	.tooltip .tooltiptext p span {font-weight: 600; background-color: #D7E0E2; width: 30px; font-size: 11px; padding: 2px 0; display: inline-block; text-align: center;}

	.btn {height:36px; display: flex; padding:5px 16px; margin:16px auto; cursor:pointer; font-weight:normal; font-size:0.90em; border-radius:6px; outline: none; border:none;}
	.btn span {display: inline-block; vertical-align: top; margin: 6px 0 0 4px;}
	.btnBlue {background-color:#3a4f79; color:#FFF;}
	.btnBlue:hover {background-color:#4e6aa0;}
	.btnRed {background-color:#dd2827; color:#FFF;}
	.btnRed:hover {background-color:#dd4646;}
	.btnGrey {background-color:#c6cad1; color:#333;}
	.btnGrey:hover {background-color:#d7dbe2;}

	.btnOran {background-color:#D39F2A; color:#FFF;}
	.btnOran:hover {background-color:#e8b03a;}

	.btnRed {background-color:#AF4F4F; color:#FFF;}
	.btnRed:hover {background-color:#ce6565;}

	.lnkIcon {text-decoration: none; background-color: #d3dded; min-width: 120px; font-weight: 600; display: inline-block; padding:3px 16px; margin:16px 0 6px 0; cursor:pointer; font-weight:normal; font-size:0.90em; border-radius:6px; outline: none; border:none;}
	.lnkIcon span {display: inline-block; vertical-align: top; margin: 6px 0 0 4px;}
	.lnkIconBlu {color:#3a4f79;}
	.lnkIconYel {color:#e8464a;}
	.lnkIcon:hover {background-color: #c2d0e8;}

	.lnkDesc {font-size: 11px; color: #8898ad; margin: 0; padding: 1px 0 5px 32px;}
	.lnkDesc span {display: inline-block; vertical-align: top; margin: 6px 0 0 4px;}
	.titSub {display: inline-block; color: #3a4f79; font-size: 0.96em; text-align: left; margin: 0px auto; padding:3px 6px;}
	.titDesc {font-size: 12px; color: #8898ad; margin: 0 0 10px 0; padding: 0 6px;}

	tr {height: 36px;}
	tr:nth-child(even) {background-color: #f5f3f3;}
	.trHover:hover {background-color: #eaf0f2!important;}

	.trDv {height: 36px;}
	.trDv:nth-child(even) {background-color: #f5f3f3;}

	.iconInt {font-size: 18px!important; color: #efb61a; cursor: pointer;}
	.iconInt:hover {color: #E7BA3A;}

	.iconIntRed {font-size: 18px!important; color: #db2c4b;}
	.iconIntRed:hover {color: #e86379;}

	.dvFrmInt {margin:auto; padding: 20px; border-radius: 10px; display:table-cell; background-color:#FFF; min-width: 100%; max-width: max-content;}
	.ntFullMob {width:100%; text-align: left; margin:auto;}

	.lnkEdtAlu {text-decoration: none; color: #2f394f;}
	.lnkEdtAlu:hover {color: #2c3e69;  text-decoration: underline;}

/* Calender */
#scwHeadLeft {background-color:transparent!IMPORTANT;}
#scwHeadRight {background-color:transparent!IMPORTANT;margin: 0 3px 0 -3px;}
#scwMonths, #scwYears {border-radius:3px; margin:0 3px; padding:3px; height:28px}

/* width */::-webkit-scrollbar {width: 12px;}
/* Track */::-webkit-scrollbar-track {box-shadow: inset 0 0 1px #FFF;  border-radius: 8px;} 
/* Handle */::-webkit-scrollbar-thumb {background: #CCC; border-radius: 8px;}
/* Handle on hover */::-webkit-scrollbar-thumb:hover {background: #e1e1e1;}

/* Login */
	.dvMain {padding:16px 30px; margin:-5% 0 0 -14%; text-align:center; box-shadow: 4px 4px 12px #333; background: rgba(255, 255, 255, 100); width: 640px;height: 540px; transform: skew(20deg);border-radius: 80px; transform: rotate(-62deg);}
	.dvSec {width:62%; transform: skew(20deg); transform: rotate(62deg); padding:8% 0 0 36%}
    .inputTlog {width:56%; height:35px; border:1px solid #63c6ff; padding:3px 16px; margin:4px auto; background-color:transparent; color:#787878; font-weight:normal; font-size:1.2em; border-radius:6px; text-align:center;}
    .inputBlog {width:65%; height:35px; border:0px solid #63c6ff; padding:3px 16px; margin:10px auto; background-color:#009DE0; color:#FFF; cursor:pointer; font-weight:normal; border-radius:6px; font-size:0.80em;}
    .inputBlog:hover {background-color:#8D8D92; color:#FFF;}
    
    #fgtPass {width:35%; height:16px; border:0px solid #63c6ff; padding:3px 16px; border-radius:6px; margin:10px auto; text-underline-offset: 4px; text-decoration:underline; background-color:transparent; color:#336699; cursor:pointer; font-weight:normal; font-size:0.80em;}
    #lgnBack {max-width:65px; height:16px; border:0px solid #63c6ff; padding:3px 16px; border-radius:6px;  margin:10px auto; background-color:#009DE0; color:#FFF; cursor:pointer; font-weight:normal; font-size:0.80em;}
 
	@media only screen and (max-width: 1024px) {
		.dvSec {width:70%; padding:22px;}
	}
	
/* -------------------- */
/* Img Rezise */
	.main {border:0px solid #CCC; padding:10px; margin:auto; display:block; width:360px; text-align: center;}
	.selectFile {background-color:transparent; padding:6px;}
	/*#uploadButton {padding:3px 10px; margin:10px auto; border:none; color:#FFF; text-align:center; cursor:pointer;}*/
	#preview img {height:130px; margin:auto; border-radius:6px; border:1px dotted #CCC; padding:4px; margin:10px auto 0 auto; text-align:center;}
	#msgErr {font-family:Arial, Helvetica, sans-serif; color:#CC3300; font-size:0.75em;  padding:3px 10px;  display:block; margin:20px 10px;}
	#msgErr span {color:#555; display:block;}
	
/* ................... */

	.h1-side {color:#3a4f80; font-weight:bold; font-size:1em;}
	.p-side {color:#333; font-size:0.85em;}

	.inputT {width:86%; height:35px; border:0px solid #63c6ff; padding:3px 16px; margin:4px 0; background-color:#dae4ef; color:#2d3e4f; font-weight:normal; font-size:1em; border-radius:6px; text-align:center;}
	.inputB {height:36px; max-width:150px; border:0px solid #63c6ff; padding:3px 16px; margin:4px auto; background-color:#3a4f80; color:#FFF; cursor:pointer; font-weight:normal; font-size:0.90em; border-radius:6px; outline: 2px solid #009DE0;}
	.inputB:hover {background-color:#63c6ff; color:#BBCAD9;}
	.inputBd {height:36px; max-width:50px; min-width:30px; border:0px solid #63c6ff; padding:3px 16px; margin:4px auto; background-color:#3a4f80; color:#FFF; cursor:pointer; font-weight:normal; font-size:0.90em; border-radius:6px;}
	.inputBd:hover {background-color:#63c6ff; color:#2d3e4f;}
	.inputB span {font-family:sans-serif, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;}
	.inputBdelH {width:16px; height:16px; border:0px solid #63c6ff; font-weight:bold; text-align:center; padding:1px; margin:0; background-color:transparent; color:#A21B26; cursor:pointer; font-size:0.70em; border-radius:6px;}
	.inputBdel {width:130px; height:22px; border:0px solid #63c6ff; text-align:center; padding:3px 16px; margin:4px auto; background-color:#A21B26; color:#FFF; cursor:pointer; font-weight:normal; font-size:0.70em; border-radius:6px;}
	.inputBdel:hover {background-color:#FF6633; color:#2d3e4f;}
	.inputCancel {height:40px; border:0px solid #63c6ff; padding:3px 16px; margin:4px auto; background-color:#e9e9e9; color:#777; cursor:pointer; font-weight:normal; font-size:0.90em; border-radius:6px;}
	.inputCancel:hover {background-color:#e1e1e1; color:#CCC;}
	.inputEdit {width:130px; height:20px; border-bottom:2px solid #e3ecf4; padding:3px 10px; margin:6px 0; border-radius: 0; background-color:transparent; color:#2d3e4f; font-weight:normal; font-size:16px; text-align:left; outline: transparent;}
	.txtDeclara {font-size: 15px; font-weight: normal; color: #777; text-transform: none; display: inline-block; vertical-align: text-top; width: 80%; margin: -10px 0 26px 10px;}
	.txtDeclaraPrt {font-size: 15px; font-weight: normal; color: #555; text-transform: none; display: block; margin: 0; padding:3px 0;}
	.labDeclara {font-size:inherit; color:inherit; margin:0 0 30px 0; padding:0; border-bottom:0px; display: inherit; border-bottom: 1px solid #d1e6fb;}

	.labCalend {font-size:inherit; width: 192px; color:inherit; margin:0 4px; padding: 6px 0; text-align: left; border-bottom:0px; display: inline-block; border-bottom: 1px solid #d1e6fb;}
	.labCalend input {height:auto;}
	.txtCalend {font-size: 13.5px; font-weight: normal; color: #777; text-transform: none; display: inline-block; vertical-align: text-top; width:auto; margin: 3px 0 0 6px;}

	.dvBtnAddNt {text-align: right; width: 93%; margin: 20px 0 30px 0; padding: 0;}
	.btnAddNt {height:36px; width:160px; padding:3px 16px; margin: auto; background-color:#3a4f80; color:#FFF; cursor:pointer; font-weight:normal; font-size:0.90em; border-radius:6px; outline: none; border:none;}
	.btnAddNt:hover {background-color:#63c6ff; color:#3a4f80;}
	.btnAddNt span {font-family: 'sans-serif';}

	.btnDelIco {font-size:0.90em; cursor:pointer;color:#999966; background: transparent; border:none;}
	.btnDelIco:hover {color:#FF6633;}
	.btnEyeIco {font-size:0.90em; cursor:pointer;color:#6c7c54;}
	.btnEyeIco:hover {color:#afc9a3;}

	.mainTitleSob {font-family:'Titillium Web','sans-serif', sans-serif; font-size: 1em; font-weight:bold; padding:0; margin:10px 0 0 10px; color:#78a1b5;}
	.mainTitle {font-family:'Titillium Web','sans-serif', sans-serif; font-size: 1.6em; font-weight:bold; padding:0; margin:0 0 0 10px; color:#3a4f79;}
	.mainTitleSub {font-family:'Titillium Web','sans-serif', sans-serif; font-size: 1.2em; color:#cf9800; font-weight:bold; padding:0; margin:2px 0 0 10px;}

	.titForm {color: #2c5273; margin: 16px 0 15px 0; padding: 5px; border-bottom: 3px solid #b3c8db; text-transform: uppercase;}
	.sTitForm {margin: 10px 16px; padding: 4px; font-size: 12px; color: #5078af; text-transform: uppercase; border-bottom: 2px solid #e3ecf4; font-weight: 600; display: block;}
	.sTitForm strong {font-size: 13px; width: 32px; display: inline-block; text-align: center; padding: 2px 0; font-weight: 600; border-right: 3px solid #dae4ef; margin-right: 4px;}
	.sTitForm span {color: #e8464a; font-weight: normal; font-size: 10px; padding-top: 2px; display: block;}
	.titTab {font-size: 0.70em; font-weight: bold; color:#323C3D; text-transform: uppercase; padding: 2px 4px;}
	.txtTab {font-size: 0.75em; font-weight: normal; color: #333; text-transform: none; padding: 2px 4px; margin:0;}
	.txtTabS {font-size: 0.70em; font-weight: normal; color: #333; text-transform: uppercase; padding: 2px 4px; margin:0;}
	.txtDesc  {font-size: 0.75em; font-weight: normal; color: #777; text-transform: uppercase; padding: 2px 4px;}
	.txtDescL  {font-size: 0.75em; font-weight: normal; color: #555; text-transform: none; padding: 2px 4px; line-height:1.2em;}
	.txtList {font-size: 0.75em; font-weight: normal; color: #444; text-transform: uppercase; padding: 2px 4px;}
	.txtDescLBd  {font-size: 0.75em; font-weight: normal; color: #555; text-transform: none; padding:4px; line-height:1.2em; border-bottom: 2px dotted #CCC; border-radius: 0 0 10px 10px;}
	.txtDescFmed  {font-size: 0.85em; font-weight: normal; color: #555; text-transform: none; padding: 4px; line-height: 1.2em; border-bottom: 2px dotted #CCC; margin: 2px;}
	.txtDescInt {font-size: 0.80em; font-weight: normal; color: #555; text-transform: none; padding: 2px 4px; line-height:16px; padding: 6px 10px; display: inline-block;}
	.numFmed {font-size: 13px; width: 32px; display: inline-block; text-align: center; padding: 2px 0; font-weight: 600; border-right: 3px solid #dae4ef; margin-right: 4px;}
	.respFmed-prt {font-size: 0.80em; font-weight: normal; color: #333; text-transform: uppercase; padding: 2px 8px 16px 8px; margin-bottom: 10px; border-bottom: 1px solid #CCC}

	.logoIni {margin:5% 0 0 5%; text-align:left;}
	.logoIni img {max-width:50%;}

/* button on/off */
	.txtAtv {vertical-align: bottom; height: 30px; margin-left: 6px; font-size: 0.85em; font-weight: bold; display: inline-block;}

	.switch { position: relative; display: inline-block;  width: 44px; height: 24px;}
	.switch input { opacity: 0; width: 0;  height: 0;}
	.slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;  -webkit-transition: .4s;  transition: .4s;}
	.slider:before {  position: absolute;  content: "";  height: 16px;  width: 16px;  left: 4px;  bottom: 4px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
	input:checked + .slider {  background-color:#0B69AF;}
	input:focus + .slider {  box-shadow: 0 0 1px #0B69AF;}
	input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px);  transform: translateX(26px);}
	
	/* Rounded sliders */
	.slider.round { border-radius: 34px;}
	.slider.round:before { border-radius: 50%;}
/*/ button on/off */

/* AluDoc  */
	.lnkAluDoc {text-decoration: none;}
	.lnkAluDoc span {display: inline-block; width: 86%;}
	.lnkAluDoc span:hover {border-bottom: 3px solid #dae4ef;}

/* ------- */

/* SELECTS */
select, input, textarea {outline-color:#7C9294; display:inline-block; border:0px solid #63c6ff; padding:6px; margin:2px; background-color:#dae4ef; color:#2d3e4f; font-weight:normal; font-size:0.90em; border-radius:6px; text-align:left;}
select, input {width:100%; height:35px;}

/* SELECTS SCROLL BAR | width *//* Track *//* Handle *//* Handle on hover */
select::-webkit-scrollbar {width: 22px;}
select::-webkit-scrollbar-track {/*box-shadow: inset 0 0 5px #999;*/ border-radius: 2px;background:#C0D1E4;}
select::-webkit-scrollbar-thumb { background: #658EBC; border-radius: 6px;}
select::-webkit-scrollbar-thumb:hover {background: #658EBC;}

textarea {height:80px; text-align:left; padding-top:16px; font-family:'sans-serif', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial;}
label {font-size:0.70em; color:#6993C0; margin:1px 0 0 0; padding:0 5px; border-bottom:0px solid #C8D7E8; display: block;}
.checkBox {width: 22px; height: 22px;}

.lblDesc {background-color:#6591BC; color:#DAE4EF; padding:2px 4px;}

/* side bar */
.sidenav {height: 100%; width: 0; position: fixed; z-index: 999; top: 0;right: 0; background-color: rgba(245, 245, 245, 0.96); overflow-x: hidden; transition: 0.5s; padding-top: 60px;}
.sidenav a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;}
.sidenav a:hover {color: #f1f1f1;}
.sidenav .closebtn {position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}  
}

/* Dropdown menu */

.dropbtn {background-color:transparent; color:#333; padding:6px; font-size: 0.75em; border: none; cursor:pointer;}
.dropdown {position:relative; display: inline-block;}

.dropdown-content {display:none; position:absolute; background-color: #f1f1f1; min-width:22px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a {color:black; padding:4px; text-decoration:none; display:block; text-align:left; cursor:pointer; width:100px;}
.dropdown-content a:hover {background-color:#90b9f8;}

.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color:#90b9f8!IMPORTANT;}

/* /Modal */
#popup, #ntFormAdd, #legNotas, #msgTimeout, #modalAluFal, #planoBimAdd, #diarioAdd, #diarioDel, #aluAddFt, #aluDelFt, #aluDel, #docAddFt, #docDelFt, #turDelGrd, #addTurDis, #delTurDis, #delFile, #updTurDis, #planoAnualAdd, #delPlanAnual, #formRefle, #formAta, #eventoAdd, #eventoDel, #modalAddAsaCad, #modalDelAsaCad, #modalNotAsa, #acessoAdd, #acessoDel, #cobDel, #modalFinTransf, #conPag, #discEdt {
	position: absolute;  background-color: rgba(58, 79, 121, 0.7); display: none; top: 0%; left: 0%; width: 100%; /*height:100%;*/ min-height: max-content; margin: 0; padding: 6% 0; z-index:9999;
}
.popup {color:#777; text-align:center; font-family:sans-serif; padding: 10px;  height: 100vh;}
.modalWindow {clear:both; width:640px; padding:0 20px; height:auto; background-color: #fbfbfb; border-top:5px solid #e1e1e1; border-bottom:2px solid #e1e1e1; border-radius: 10px; margin:auto;}
.modalIcon {border-radius: 50%; padding: 10px; color: #666666; background-color: #fbfbfb; margin-top: -28px; font-size: 32px!important; border: 0px solid #e1e1e1;}
.modalWindow h1 {color: #777; font-size: 1em; text-align: center; margin: 0 auto 10px auto; padding: 6px; text-transform: uppercase; border-bottom: 1px dotted #CCC;}

.popupFrm {clear: both; width: 32%; padding: 0 20px; height: 180px; background-color: rgba(111, 126, 156, 0.4); border-top: 5px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; margin: auto; border-radius: 10px; color: #FFF;}

.titTurma {display: inline-block; color: #3a4f79; font-size: 1.2em; text-align: left; margin: 0px auto; padding: 6px;}
.titSub2 {display: inline-block; color: #6e7f99; font-size: 0.95em; text-align: left; margin: 0px auto; padding: 10px; border-left: 1px solid #92B9CC;}

.titSubFal {display: block; vertical-align: middle; color: #6e7f99; font-size: 0.95em; text-align: left; margin: 16px 0 0 0; padding: 10px; border-left: 1px solid #92B9CC; vertical-align: middle;}
.titSubFal i, span {vertical-align: middle;}

.disFal {margin: 3px 0; padding: 0; display: block; vertical-align: middle;}
.disFal p {margin: 0 0 0 15px; padding: 0; font-size: 12px; color: #272c37; vertical-align: middle;}
.disFal p i {font-size:18px; vertical-align: middle;}
.disFal p span {vertical-align: middle;}


.formAddNota {overflow-y: scroll; margin: 0; padding: 0; height: 100%;}
.btnClose {cursor: pointer; float: inline-end; margin: 10px 0 0 0;}

@media screen and (max-width: 520px) {
  .modalWindow {width:90%!important;}
  /*.popup div {width:90%;}*/
}

/*
#loading {position: absolute; background-color: rgba(245, 245, 245, 0.90); display: none; top: 0%; left: 0%; width: 100%; height: 90%; margin: 0; padding-top: 20%; z-index:999999;}
.loading {color:#777;text-align:center;font-family:sans-serif;font-size:1em;padding: 10px;}
*/

.collapse {padding:0; 	margin:0; 	/*width: 800px;*/	/*background: #F8FEFE;*/	/*border: 2px dotted #99CCFF;*/	display:none}

.nPage {vertical-align: middle; display:inline-block;background:#e1e1e1;width:28px;height:24px;text-align: center;text-decoration: none;font-weight: bold;font-family: arial;font-size: 0.70em;color: #273f60;padding:4px 6px 6px 6px; margin: 0;border-radius:6px;}
.nPage:hover {background: #828fa0;color: #e1e1e1;}
.nPageAct {vertical-align: middle; display:inline-block;background:#273f60;width:28px;height:24px;text-align: center;text-decoration: none;font-weight: bold;font-family: arial;font-size: 0.80em;color: #f1f1f1;padding:4px 6px 6px 6px; margin: 0;border-radius:6px;}
.nPageIcon {vertical-align: middle; color: #273f60;}
.aPage {vertical-align: middle; font-size: 0.75em; font-family: sans-serif;color: #555;}
.aPage strong {color:#333;}
.aBack {font-size: 0.85em; font-family: sans-serif; color: #21295E; text-decoration:none;}


/* input switch */
.switch {display: inline-block; height: 24px;position: relative; width: 50px;}
.switch input {display:none;}
.slider {background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s;}
.slider:before {background-color: #fff;  bottom: 4px;  content: "";  height: 16px;  left: 4px;  position: absolute;  transition: .4s;  width: 16px;}
input:checked + .slider {background-color: #3a4f80;}
input:checked + .slider:before {transform: translateX(26px);}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}


.mobStl {display: none;}

@media only screen and (max-width: 1024px) {
	
	label {font-size:0.70em;}
	.inputB {font-size:0.80em;}
	.btnInsAu {text-align:center;}
	.titBarTurLst, .profsTurLst, #icoNovaTurma, #subMenuTurEdt, .titTabAluTur, .mobNone {display:none;}
	.iconAulTurLst {display:inherit; float:right; margin:-10px 16px -10px 0; background-color:#FFF; padding:2px 6px}
	.colIconsTurLst {width: 5%;}
	
	.dvAulTxt label {border-left:6px solid #B6CAE0; margin-left:5px;}
	.dvAulTxt .fa-folder-open {font-size:1.6em;}	
	.aulaBxTxt {margin:-2px 0 0 6px; border-bottom:1px solid #B6CAE0; border-left:1px solid #6993C0; padding:6px 0 6px 10px; background-color:transparent; border-radius:0 8px 8px 8px;}
	.titAluMob {display:inline-block; border-bottom:1px dotted #B6CAE0; border-left:6px solid #B6CAE0; margin:16px 0 0 0; border-radius:0;}
	.btnTitAulas {font-size:0.90em; font-weight:bold; color:#3a4f80; text-decoration:none; display:inline-block; margin-bottom:10px;}

	.dvSec {width:62%; transform: skew(20deg); transform: rotate(62deg); padding:4% 0 0 -26%}

	.frms {background-color:rgba(255, 255, 255, 1); border:0px solid #e1e1e1; margin:2px; padding:2px;}
	#modalDelAul .popup .modalWindow {width: 90%;}
	.modAluTur {width:98%;}

	#icoTurLstAul {margin: 0;}
	.tabAluTurDesk {display:none;}
	.tabAluTurMob {display:inline-block;}
	#tab4 {margin: 0;}
	.tab {margin-left:0;}
	#lstHor {display:none;}
	.edtMob {display: block; margin: 10px 10px 0 0;}
   
	.mobStl {display: inherit;}
	.logoIni {margin:30px 0; text-align:left;}
	.logoIni img {max-width:66%;}
}

@media only screen and (min-width: 1440px) {
	.dvSec {width:62%; transform: skew(20deg); transform: rotate(62deg); padding:12% 0 0 46%}
}


.legBolPrt {display: none;}

.dvContLeg {height:42px; width: max-content; display:flex; margin: 0; padding:0;}
.dvNotaLeg {width: auto; height: 32px; text-align: center; background-color: #d9e8ef; padding: 6px 2px; margin: 8px 6.5px; border-radius: 6px;}
.dvNotaLeg .pLnk {text-decoration: none; cursor: pointer;}
.dvNotaLeg .pLnk:hover {background-color: #92b9cc;}
.dvNotaLeg .pLnk span {border-bottom:1px solid #2f637c;font-weight: 600; color: #18439b;}

.ntLeg {min-width: 32px; color: #84929f; font-size: 0.70em; display: table-cell; text-align: center; padding: 2px; border-left: 1px solid #adb9c3;}
.ntLeg:nth-child(1) {border: none;}
.mfItif {width: 60px;}

.dvAluLeg {width: 280px; text-align: left; background-color: #d9e8ef; display: inline-block; border-radius: 6px; margin: 8px 9px 0 0;}
.dvAluLegItif {background-color: transparent; width: 283px;}
.dvBimLeg {display:inline-block;border-left: 1px solid #CCC; height: 42px;}
.dvBimLegFn {display:inline-block;border-left: 1px solid #CCC; height: 42px;}
/*.ntBim {color: #2d3e4f; font-size: 0.70em; text-align: center; padding: 4px 6px; display: table; background-color: #acbcc3; width: 82%; border-radius: 10px 10px 0 0; margin: -26px auto 7px auto;}*/
.ntBim {color: #3f76ad; background-color: #e5eced; font-size: 0.75em; text-align: center; padding: 4px 6px; display: table; text-transform: uppercase; width: 96%; border-radius: 6px 6px 0 0; margin: -28px auto 5px auto; font-weight: 600; border: 0px solid #acbcc3; border-bottom: 0; }}

.dvCont {width:auto; height:42px; display:flex!important; border-top: 1px dotted #CCC; padding:0;}
.dvBim {display:inline-block; border-left: 1px solid #CCC; height:32px; padding:0 5px; width: auto;}
.dvBimBol {display:inline-block; border-left: 1px solid #CCC; height:32px; padding:0 0px 0 5.4px; width: auto;}
.dvBimBolFn {display: inline-block; border-left: 1px solid #CCC; height: 32px; padding: 0 0px 0 5.4px; width: auto;}
.dvNota {width: auto; height: 32px; text-align: center; background-color: #e9f1f5; display: inline-block; padding: 6px; margin: 4px 1px 0 0; border-radius: 6px;}
.dvNotaFn {width: auto; height: 32px; text-align: center; background-color: #e9f1f5; display: inline-block; padding: 6px; margin: 4px 1px 0 0; border-radius: 6px;}
.dvNotaBol {width: auto; height: 32px; text-align: center; background-color: #e9f1f5; display: inline-block; padding: 6px; margin: 4px 6px 0 0; border-radius: 6px;}
.dvNotaBolFn {width: auto; height: 32px; text-align: center; background-color: #e9f1f5; display: inline-block; padding: 6px; margin: 4px 6px 0 0; border-radius: 6px;}
.nt {min-width: 32px; height: 16px; color: #2d3e4f; font-size: 0.80em; display: table-cell; text-align: center; padding: 2px; border-left: 1px solid #CCC; vertical-align: middle;}
.nt:nth-child(1) {border: none;}
.ntMe {color:#0077bd; font-weight: 300;}
.ntMeV {color:#de405c; font-weight: 300;}
.ntC {color:#5c7d9d;}
 
.ntMf {color:#0077bd; border: 1px solid rgba(0, 119, 189, 0.3); font-weight: 600; border-radius: 5px; padding: 0px 2px 2px 2px; font-size: 15px;}
.ntMfV {color:#de405c; border: 1px solid rgba(222, 64, 92, 0.3); font-weight: 600; border-radius: 5px; padding: 0px 2px 2px 2px; font-size: 15px;}
.ntMfS {color:#668; border: 1px solid #999; font-weight: 600; border-radius: 5px;  padding: 1px 2px 2px 2px;}
.ntMe {color:#7f7f7f; border: 1px solid #d2d2d2; font-weight: 600; border-radius: 5px;  padding: 1px 2px 2px 2px;}

.dvAlu {min-width: 280px; text-align: left; background-color: #e9f1f5; display: inline-block; border-radius: 6px; margin: 4px 5px 0 0;}
.dvAluBol {min-width: 280px; height: 32px; text-align: left; background-color: #e9f1f5; display: inline-block; border-radius: 6px; margin: 4px 5px 0 0;}
.numAlu {color: #5d747f; font-size: 0.70em; background-color: #d9e8ef; padding: 10px 4px; border-radius: 6px 0 0 6px; width: 24px; display: table-cell; margin-right: 5px; text-align: center;}
.nomeAlu {color: #3f5871; font-size: 0.76em; font-weight: 600; display: table-cell; padding: 0 0 0 6px; width: 260px;}
.sitAlu {font-size: 0.80em; display: block; padding: 0 6px; margin: 0; border-radius: 20px; width: fit-content;}

.dvContForm {width:auto; height:42px; display:flex!important; border-top: 1px dotted #CCC; padding:0 0 3px 0;}
.dvAluForm {min-width: 280px; text-align: left; background-color: #e9f1f5; display: inline-block; border-radius: 6px; margin: 4px 9px 0 0;}
.dvNotaForm {width: auto; text-align: center; background-color: transparent; display: inline-block;border-radius: 6px;}
.dvBimForm {display:inline-block; border-left: 1px solid #CCC; height:42px; padding-left: 5px;}
.dvBimLegForm {display:inline-block;border-left: 1px solid #CCC; height: 42px; padding-left: 5px;}
.ntLegForm {width: 67px; height: 16px; color: #2d3e4f; font-size: 0.75em; display: table-cell; text-align: center; padding: 2px; border-left: 0px solid #a5a6b5;}
.ntLegForm:nth-child(1) {border: none;}
.dvNtForm {width: 26px; height: 16px; color: #2d3e4f; font-size: 0.75em; display: table-cell; text-align: center; padding: 2px; border-left: 0px solid #CCC;}
.dvNtForm:nth-child(1) {border: none;}
.dvNtForm input {text-align: center; font-size: 1.2em; width: 75px; height: 35px;}

.SubDisCorLeg {background-color: #e8e6e1;}
.SubDisCor {background-color: #f4f2ee;}
.SubDisIco {margin: 0; padding: 0; color: #b9c8dd; vertical-align: middle;}
.SubDisTxt {color: #607890; font-size: 11px; margin: 4px 0 0 0; display: inline-block;}
.dvNotaCor {width: auto; height: 32px; text-align: center; background-color: #e5eced; display: inline-block; padding: 6px; margin: 0 1px 0 0; border-radius: 6px;}
.dvNotaCorBol {width: auto; height: 32px; text-align: center; background-color: #f4f2ee; display: inline-block; padding: 6px; margin: 4px 6px 0 0; border-radius: 6px;}

.lnkBim {text-decoration: none; width: 67px; padding: 6px 12px; border-radius: 4px; color: #2d3e4f; font-size: 0.75em; display: inline-block; margin: 0 1px; text-align: center; padding: 2px; border: 1px solid #D4E3EB; cursor: pointer;}
.lnkBim:hover {background-color: #D4E3EB;}
.lnkBimAct {background-color: #92B9CC;}

.dvContBol {width:100%; height:38px; display:flex!important; border-top: 1px dotted #CCC; padding:0; margin: 0 0 4px 0;}
.nomeAluBol {border-top: 1px solid #bacfd9; padding: 10px 0 0 6px; color: #273f60; margin: 16px 0 0 0; width: 100%; display: inline-block;}
.nomeAluBol span {border-left: 9px solid #BACFD9; padding: 10px; border-radius: 6px; max-width: 260px; display: inline-block; margin: 6px;}
.nomeAluMapa {border-bottom: 1px solid #bacfd9; padding: 10px 0 0 6px; color: #273f60; margin: 0; width: 300px; display: inline-block;}
.dvNotaCorMapa {width: auto; height: 32px; text-align: center; background-color: #e5eced; display: inline-block; padding: 6px; margin: 4px 0 0 0; border-radius: 6px;}
.legMapa {padding: 8px 5px; position: absolute; margin: -30px 5px 0px -1px; width: 48px; border-left: 6px solid #d4e3eb; /* border-radius: 4px; */ font-size: 13px; font-weight: 600; color: #273f60;}
.dvBimMapa {display: inline-block; border-left: 1px solid #CCC; height: 42px; padding-left: 5px; width: auto; border-bottom: 1px solid #CCC;}

/* style from  turmas_new_up old */

	.msgContainer {position:fixed;top:0;left:0;right:0;bottom:0;background-color:#ffffff8c; text-align:center; font-family:sans-serif, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;}
	.msgCentered {padding:5px;background:#eee;border-radius:5px;display:inline-block;vertical-align:middle;max-width:300px;margin:10px;}
	.msgContainer:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle;}	
	#msgClose {background-color:#336699; color:#f9f9f9; padding:5px 8px; border:0; margin:-12px -12px 0 0; font-size:0.75em; float:right; border-radius:50px; font-weight:bold; text-align:center; cursor:pointer;}
	
	.titleTab {border-bottom:3px dotted #CCC; width:98%; font-family:'sans-serif'; font-size: 1.3em; font-weight:bold; padding:6px 10px; margin:10px; color:#3a4f79;}
	.titleTurma {font-family:'sans-serif'; font-size: 1em; color:#0f3b48; font-weight:bold; padding:0 0 6px 10px; margin:0 0 0 16px;}
	.titleTurma strong {font-size:1.1em;}
	.btn_delGrade {padding: 0; margin: -46px 0 0 0; font-size: 0.70em; font-weight: bold; text-align: center; height: 12px; background-color: transparent; color: #a94f4f; border: 0; border-radius: 3px; float: right; cursor: pointer;}
	.btn_insGrade {width:60px; height:24px; padding:2px; margin:0; font-size:0.70em; font-weight:bold; text-align:center; background-color:#006699; color:#FFF; border:0; border-radius:3px;}
	.modalDialog {position:absolute;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,0.8);z-index:1;opacity:0;	-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;	transition: opacity 400ms ease-in;pointer-events: none;}
	.modalDialog:target {opacity:1;	pointer-events: auto;}
	.modalDialog > div {width: 400px;position: relative;margin: 10% auto;padding: 5px 20px 13px 20px;border-radius: 10px;background: #fff;background: -moz-linear-gradient(#fff, #999);background: -webkit-linear-gradient(#fff, #999);background: -o-linear-gradient(#fff, #999);	}
	.close {background: #606061;color: #FFFFFF;	line-height: 25px;position: absolute;	right: -12px;text-align: center;top: -10px;	width: 24px;text-decoration: none;	font-weight: bold;	-webkit-border-radius: 12px;	-moz-border-radius: 12px;	border-radius: 12px;	-moz-box-shadow: 1px 1px 3px #000;	-webkit-box-shadow: 1px 1px 3px #000;	box-shadow: 1px 1px 3px #000;}
	.close:hover { background: #00d9ff; }
	
	.tab { overflow: hidden; background-color: transparent; margin-left:10px; font-family: arial, sans-serif;}
	.tab a { background-color: #e1e1e1; float: left;border-bottom:none; border-top:1px solid #CCC; border-left:1px solid #CCC;border-right:1px solid #CCC; outline: none; border-radius:6px 6px 0 0; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 15px; color:#3a4f79; text-decoration: none;}
	.tab a:hover { background-color: inherit;}
	.tab a.active { background-color: #FFF; font-weight:bold;}
	.tabcontent { display: inherit;  padding: 6px 12px;  border: 0px solid #ccc;  border-top: none; background-color:#FFF; border-radius:10px;}
	
	.container {position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
	.responsive-iframe {position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0; width: 100%;  height: 100%;  border: none;}

	.btnInt {border: 0; background-color: #d5e0f2; color: #3a4f79; width: 120px; padding: 6px 10px; margin: 5px; font-size: 0.75em; font-weight: bold; text-align: center; font-family: 'sans-serif', arial, sans-serif; float: right; text-decoration: none; border-radius: 3px; cursor: pointer;}
	.btnInt i {margin-right: 6px; background-color: #bac5d6; padding: 8px 6px 5px 6px; width: 16px; height: 16px; border-radius: 3px;}
	.btnInt select {width: 20px!important; background: #d5e0f2; border: none; color: #3a4f79; height: 14px; padding: 0; margin: 0;}
	.btnInt:hover {background-color: #bacfd9; color: #3a4f79;}
	.btnInt.active {background-color: #273f60; color: #dae1ef;}

	.disTur {font-size: 0.75em; color: #555; font-weight: 600; border: 1px solid #CCC; padding: 4px 10px; border-radius: 4px; min-width:190px; display: inline-block; background-color: #d7e3f4; margin: 0;}
	.disTurSub {background-color:#e8edf4; margin: 0 0 0 10px;}
	.docDis {font-family:Arial, Helvetica, sans-serif; font-size:0.70em; color:#669999; margin-left:6px; text-transform:uppercase; border: 1px solid #CCC; border-left: 0; padding: 5px 12px; border-radius: 4px; width: auto; display: inline-block; margin: 0 4px 0 -10px;}
	.turTit {font-size: 1.2em; text-decoration: none; color: #009DE0;}
	.disTit {border: 1px solid #BACFD9; padding: 4px 10px; border-radius: 6px; color: #206687; display: inline;}

	.periTur {font-family:Arial, Helvetica, sans-serif; font-size:0.75em; color:#669999; text-transform:uppercase; border: 1px solid #CCC; padding: 5px 12px; border-radius: 4px; width: auto; display: inline-block; margin: 0 4px 0 6px;}

	.titPrt, .titSrc, .logoInt {display: none;}

	.tablinks {width: 120px;}

	.assPrt {text-align: center; border-top:1px solid #CCC; padding:6px 0; width: 80%; margin: 20px auto 10px auto;}
	.falAluNome {display: none;}

	.rowTop {margin: 10px 0; background: #f7f7f7; padding: 16px; border-radius: 10px;}

	.prt-v {display: none;}

@media print {
	body {background-color: #FFF; margin: 0; padding: 0;}
	.main-menu, .iconTop, .prt {display: none!important;}
	.titPrt {margin: 12px 0 0 12px; display: inline-block; font-size: 12px;}
	.titSrc {width:100%; display:inline-block;}
	.assPrt { position: absolute; bottom:0; left: 0; right:0; width: 80%;}
	.disFal, .logoInt {display: inline-block;}
	.falAluNome {display: inline-block; color:#303d52;}

	.numFmed {color: #555;}
	.respFmed-prt {color: #111; margin-bottom: 10px;  padding-bottom: 10px;}
	.mainFMprt label {color: #333;}
	.txtDescFmed {color: #222; border: none;}

	.prt-v {display: inherit;}
}

/*from old style sys */
.media {font-size: 0.80em; font-family: 'sans-serif'; font-weight: bold; color: #333333; padding: 1px; }
.mf {float:left; width:24px; font-size: 0.90em; font-family: 'sans-serif'; font-weight: bold; color: #333333; padding:4px 1px 0 1px; }
.mfI {float:left; width:30px; font-family: 'sans-serif'; font-weight:bold; padding:0 3px; font-size:1em; border:1px solid #CCC; border-radius:50px;}

.labChk {font-size:inherit; color:inherit; margin:0; padding:0; height: 30px; border-bottom:0px; display: inherit; font-size: 0.80em;}

/* seleciona alunos  ChkBox ........................................................ */
/* Hide the default checkbox */
.chkBx {/*position: absolute;*/ opacity: 0; cursor: pointer; width: auto; }
/* Create a custom checkbox */
.custom-checkbox {position: relative; display: inline-block; width: 26px; height: 26px; background-color: transparent; border: 1px solid #CCC; border-radius: 4px; }
/* Style the checked state with a pseudo-element */
.chkBx:checked ~ .custom-checkbox::after {content: ""; position: absolute; left: 8px; top: 3px; width: 8px; height: 16px; border: solid #3A4F79; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Change background on hover */
.custom-checkbox:hover {background-color: #aaa; }

/* APP FALTAS ..................................................... */
#bodyAppFal {margin: 0; padding: 0; background: url('../img/quarup-sis-bkg.jpg'); background-position: center center; background-repeat: no-repeat;  background-size: cover; background-attachment: fixed;}


/* APP ALU ........................................................ */
#bodyAppAlu {margin: 0; padding: 0; background: url('../img/quarup-sis-bkg.jpg'); background-position: center center; background-repeat: no-repeat;  background-size: cover; background-attachment: fixed;}
#bodyFull {width: 560px; height: 100%; background-color: #FFF; margin: 0;}

#mainMenu {position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 560px; height: 56px; padding: 10px 0; background-color: #313E53; color: #FFF; text-align: center; border-radius:16px 16px 0 0;}
#mainMenu i {font-size: 22px;}
#mainMenu p {font-size: 10px; margin: 0; padding: 3px 0; text-align: center;}
#mainMenu a {text-decoration: none; color: inherit;}
#mainMenu a:hover {color:#84a4d6;}

#appHeader {background-image: linear-gradient(to bottom, #000000, #163164);}
.lnRadius {border-radius: 20px 20px 0 0; background-color: #FFF;}
.btnSair {background-color:#313E53; color: #E7BB3A; margin:13px 0 0 0; text-decoration: none; padding:6px 12px; font-size: 11px; display: inline-block; border-bottom: 1px solid #3d557e; border-radius:50px;}
.btnSair i {font-size: 15px;}

.btnHome {background-color:transparent; color: #E7BB3A; margin:13px 0 0 0; text-decoration: none; padding:6px 12px; font-size: 11px; display: inline-block; border-bottom: 1px solid #3d557e; border-radius:50px;}
.btnHome i {font-size: 22px;}

.titSerie {color: #3d557e; display: block; font-size:0.90em; font-weight:bold; padding:6px 0 0 0; margin:6px 26px 0 0;}


.lnkInt {position: relative; width: 100%; background: linear-gradient(to right, #3D557E , #3162b9); color: #FFF; text-align: center; padding: 8px 0; margin: 10px auto; border-radius: 6px; text-align: center; }
.lnkInt a {text-decoration: none; color:#FFF; font-weight: bold; font-size: 0.75em;}

.dvRespInt {background-color:#d7e7f4; padding:0 6px 16px 6px; margin: 16px 0; border-radius:6px;}
.labInt {color: #555; display: inline-block; border-radius:10px 10px 0 0; width:100%; border-top: 2px dotted #a9d0f2; font-size:0.70em; font-weight:normal; padding:0; margin:0 0 6px 0;}
.labInt span {background-color: #a9d0f2; border-radius: 6px; padding: 2px 12px; margin: 0 0 0 -8px;}

.sTitleInt {background-color:#a4c9ea;  color: #143c67; font-size:0.70em; font-weight:bold; border-radius:6px; padding:4px 12px; margin:16px 0 6px 0;}

/* calendário */
.calDvAll {max-width:510px; min-width:400px; margin:6px auto; padding:16px 2px; border-radius: 0 10px 10px 10px; border-top:1px solid #3d557e; border-bottom:1px solid #3d557e;}
.calMes {width:80px; padding:0; margin:0; }
.calDiaSem {padding:0px 6px 1px 6px; border-radius:4px; margin:1px 2px 3px 2px; border-bottom:1px solid #f1f1f1; text-align:center; float:left; background-color:#FFF;}
.calDiaSemNull {padding:2px 6px; margin:2px; border-radius:4px; border:1px solid #f3f3f3; text-align:center; float:left; background-color:transparent;}
.calDias {padding:2px 6px; margin:2px; text-align:left; float:left; border-radius:4px;}

.calDiaSem, .calDiaSemNull, .calDias {width:66px;}
.calDiaSemNull, .calDias {height:62px;}

/* grade aulas */
.graDvAll {max-width:510px; min-width:400px; margin:6px 6px 80px 6px; padding:6px; border-radius: 0 10px 10px 10px; border-top:1px solid #3d557e; border-bottom:1px solid #3d557e;}

/* docentes e disciplinas */
.DocDis {font-family:Arial, Helvetica, sans-serif; font-size:0.75em; background-color:#3d557e; color:#FFF; font-weight:bold; width:auto; padding:9px 12px; margin:3px 0px -6px 6px; border-radius: 6px 6px 0 0; border: none;  display: inline-block;}
.docDvAll {max-width:510px; min-width:400px; margin:6px 6px 80px 6px; padding:6px; border-radius: 0 10px 10px 10px; border-top:1px solid #3d557e; border-bottom:1px solid #3d557e;}
.dvDocInt {background-color:#d7e7f4; padding:6px; margin: 16px 0; border-radius:6px;}

.dvMenuHome {background-color: #cde3f7; padding: 10px; margin: 16px 0; text-align: left; border-radius: 10px;}
.dvMenuHome i {font-size: 32px; color: #183e65}
.dvMenuHome h5 {font-size: 13px; font-weight: bold; color: #3d557e; margin: 16px 0 6px 0; padding: 0; text-transform: uppercase;}
.dvMenuHome p {font-size: 12px; margin:3px 0 10px 0; padding: 0; color:#3d557e;}
.lnkMenuHome {text-decoration: none;}
.lnkMenuHome:hover .dvMenuHome {background-color: #e8f4ff;}

.msgHome {font-size: 13px; width: 94%; margin:20px auto; font-weight: bold; color: #2e6699; border: 1px solid #2e6699; padding: 8px 0; display:block; border-radius: 20px;}
.msgHome i {font-size: 32px; margin:-26px auto 0 auto; display:block; position: relative; background-color: #FFF; width:40px;}


/* calendário de provas */
.calPro {width:80px; padding:0; margin:0; }

/* dropdown */
.dropdown-btn {font-family:Arial, Helvetica, sans-serif; font-size:0.75em; background-color:#3d557e; color:#FFF; font-weight:bold; width:auto; padding:9px; margin:3px 0px -6px 6px; border-radius: 6px 6px 0 0; border: none; cursor: pointer; }
.dropdown-btn:hover, .dropdown-btn:focus {background-color: #3162b9; }
.dropdown-content {display: none; position: absolute; background-color: #e0e7ed; border-radius: 6px; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a {color: black; padding: 10px 12px; margin: 0 6px; font-size: 0.80em; border-bottom: 1px dotted #CCC; width: 92%; text-align: left; text-decoration: none; display: block; }
.dropdown-content a:hover {background-color: #f1f1f1; }
.dropdown:hover .dropdown-content {display: block; }
.arrow-down {float: right; border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; }
.down {transform: rotate(45deg); -webkit-transform: rotate(45deg); }


@media only screen and (max-width: 460px) {
	html,body {background-image: none;}
	#bodyFull, #footerLogin {width: 100%;}
	#mainMenu {position: fixed; left: 0;  width: 100%; transform: translateX(0);}
	#footerLogin {position: fixed; left: 0;  width: 100%; transform: translateX(0);}
	.modal-content {width: 90%;}

	.calDvAll, .graDvAll, .docDvAll, .bolDvAll {min-width:auto;}
	.calDiaSem, .calDiaSemNull, .calDias {width:46px;}
	.calDiaSemNull, .calDias {height:42px;}

	.dvNota {width: 8.8%;}

	/*Boletim Alu mob */
	.lnkBim {padding: 6px 0; width: 58px;}
	.dvFrmInt {padding: 0; margin: 0;}
	.docDvAll {padding: 0; margin:6px auto 80px auto;}
	.ntFullMob {width:100%; text-align: left; margin:auto;}
	.numAlu {color: #5d747f; font-size: 0.70em; background-color: #d9e8ef; padding: 0; border-radius: 2px 0 0 2px!important; width: 40px; display: table-cell; margin: 0; text-align: center;}
	.ntLeg {min-width: 32px; color: #a2aab3; font-size: 0.65em; display: table-cell; text-align: center; padding: 2px; border-left: 1px solid #d3d8dd;}

}

/* /APP ALU ........................................................ */

/* Memu mobile ........................ */

@keyframes bugfix { from {padding:0;} to {padding:0;}}
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;}}

#overlay-button {position: absolute; right: 2em; top: 0; padding: 26px 11px; z-index: 5; cursor: pointer; user-select: none;
  span {
  	height: 4px; width: 35px; border-radius: 2px; background-color: white; position: relative; display: block; transition: all .2s ease-in-out;
      &:before {top: -10px; visibility: visible;}
      &:after {top: 10px;}
      &:before, &:after {height: 4px; width: 35px; border-radius: 2px; background-color: white; position: absolute; content: ""; transition: all .2s ease-in-out;}
    }
    &:hover span, &:hover span:before, &:hover span:after {
      background: #e8464a;
    }
}

input#overlay-input {
  display: none;
  
  &:checked ~ #overlay {
    visibility: visible;
  }
  
  &:checked ~ #overlay-button {
    &:hover span, span{
      background: transparent;
    }
    span {
      &:before {
        transform: rotate(45deg) translate(7px, 7px);
        opacity: 1;
      }
      &:after {
        transform: rotate(-45deg) translate(7px, -7px);
      }
    }
  }
}

#overlay {
  height: 100vh; width: 560px; background: #303D52; z-index: 2; left: 0; visibility: hidden; position: fixed;
  &.active {visibility: visible; }
  ul {display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: left; height: auto; padding: 60px 0 0 0; list-style-type: none;
    li {padding: 1em; border-bottom: 1px solid #f1f1f1;width: 94%;
      a {color: white; text-decoration: none; font-size: 15px; text-transform: uppercase; display: inline-block; width: 100%;
      	  i {float: left; padding: 0 12px 0px 0;}
      	&:hover {color: #e8464a;
        }
      }
    }
  }
}

.ulDicas {margin:6px 0 6px 32px;; padding:0;}
.ulDicas li {font-size: 0.75em; font-weight: normal; color: #555; text-transform: none; padding: 2px 4px; line-height:1.2em; margin: 5px 0;}

.txtLegNt {margin: 6px; padding: 6px;font-weight: bold; font-size: 15px; background: #dae4ef; border-radius: 6px; text-align: center; width: 46px; display: inline-block;}

.classNone {display: none!important;}