@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Raleway:500,700,900|Material+Icons);

@import url('https://fonts.googleapis.com/css2?family=Inconsolata');

@import "../../globals.css";


html {
 scroll-behavior: smooth;
}

body {

font-family: 'Inconsolata', sans-serif;
font-weight:400;
font-size:16px;
margin:0;
position:relative;
box-sizing:border-box;
display: flex;
min-height: 100vh;
flex-direction: column;
padding-bottom:120px;
}

h1 {
text-align:center;
font-weight:900;
font-size:3rem;	
margin:20px 0;
}

h2 {
text-align:center;
font-weight:700;
font-size:2.0rem;	
}


h3 {
text-align:center;
font-weight:600;
font-size:1.7rem;	
margin-bottom:10px;
}

h4 {
text-align:left;
font-weight:700;
font-size:1.5rem;	
margin-bottom:10px;
}


h5 {
text-align:left;
font-weight:600;
font-size:1.2rem;	
margin:3px 0;
padding:0;
}

p {
text-align:justify;
font-weight:400;
margin:0 0 20px 0;
line-height:1.5em;
}

table {
width:100%;
}

tr th {
background-color:#212a31;
color:#fff;	
position:relative;
text-align:center;
}

td {
border-bottom:solid thin #ccc;
padding:3px;
text-align:center;
position:relative;
}

[type=checkbox] {
position:relative;
width:22px;
height:22px;
opacity:0.8;
}

/*common classes*/

.smalltext {
font-size:0.8em;
}

.bold {
font-weight:700;	
}

.butdiv {
text-align:center;
}

/* PRELOADER*/
#loader {
position: fixed;
top: 0;
left: 0;
z-index:9990;
width: 100%;	
height: 100%;
box-sizing:border-box;
display:none;
background-color:#000;
opacity:0.2;
text-align:center;
}

#loader div {
position: relative;
top: 25%;
width: 40px;
height: 40px;
padding: 0;
margin:auto;
border-top: 6px solid rgba(255, 255, 255, 0.1);
border-right: 6px solid rgba(255, 255, 255, 0.1);
border-bottom: 6px solid rgba(255, 255, 255, 0.1);
border-left: 6px solid white;
border-radius: 50%;
display:block;
animation: spinny 1.1s infinite linear;
}

@keyframes spinny {

  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*Preloader*/

.header {
color:#aaa;
position:relative;
top:0;
left:0;
margin:0;
transition: all 250ms ease-in-out;
padding:0px;
box-sizing:border-box;
width:100%;
display:flex;
border-bottom:solid thin #ccc;
height:40px;
}

.header div {	
position:relative;
display:flex;
justify-content:center;
align-items:center;
flex:1;
height:100%;
width:100%;
box-sizing:border-box;
padding:3px 0;
}

.header div:not(.disabled):hover {
background-color:#444;
cursor:pointer;
transition: all 250ms ease-in-out;	
}

.header i {
font-size:20px;
transition: all 250ms ease-in-out;
margin:0 2px;
}

.header div:hover i:not(.disabled) {
 transform: scale(1.20) rotate(360deg);
}

.header i.disabled {
color:#ddd;	
}


.header div img {
height:100%;
width:auto;
}

.header #myinits {
border:solid 2px #ccc;
position:relative;
width:24px;
height:24px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:4px;
font-weight:700;
font-size:0.9em;
}

.footer1{
font-weight:400;
font-size:0.8em;
position:absolute;
bottom:0;
padding:5px;
text-align:center;
height:50px;
color:#999;
display:none;
align-items:center;
justify-content:center;
border-top:1px solid #ccc;
}

.footer {
border-top: solid thin #ccc;	
position:absolute;
display:none;
align-items:center;
justify-content:center;
width:100%;
bottom:0;
height:75px;
text-align:center;
padding:0 10px;
box-sizing:border-box;
}

.footer div {
flex:1;
}

.regsymbol {
font-size:12px;
position:relative;
top:-3px;
}

.subtitle {
text-align:center;
font-size:2em;
color:#aaa;
margin-bottom:10px;
}


/*NOTES BOX */
.mynotes {
border:solid thin #ccc;
max-width:400px;
width:95%;	
position:fixed;
left:50%;
transform:translateX(-50%);
z-index:999;
background-color:#222;
color:#fff;
border-radius:10px;
padding:10px;
text-align:center;
top:-400px;
transition:ease-in-out top 500ms;
box-sizing:border-box;
}

.mynotes textarea {
color:#222;
padding:10px;
max-height:250px;	
height:120px;
width:100%;
max-width:100%;
min-width:100%;
box-sizing:border-box;

}

.mynotes h3 {
margin:5px 0;
color:#666 !important;	
}

.mynotes.show {
top:100px;
transition:ease-in-out top 500ms;	
}

.mynotes .msg {
color:gold;	
font-size:0.8em;
margin-top:10px;
}

.mynotes .closenotes {
position:absolute;
right:10px;	
bottom:5px;
font-weight:700;
font-size:2em;
color:#999;
}

.mynotes .closenotes:hover, #mynotes:hover, #subtitles:hover {
opacity:0.5;	
cursor:pointer;
}

/*NAVBOX*/

.navbox {
position:absolute;
border:solid 1px #ccc;
box-sizing:border-box;
top:-1000px;
left:20px;
width:90%;
max-width:600px;
transition:all ease 300ms;
background-color:#fff;
z-index:9999;
list-style: none;
padding:0;
margin:0 auto;

}

.navbox.show {
top:50px;
}

.navbox li {
position:relative;
min-height:40px;
overflow:hidden;
margin:0;
width:100%;
}

.navbox li a {
line-height:30px;
border-bottom:solid thin #ddd;
position:relative;
padding: 10px 10px; 
display:block;
width:100%;
left:0;
transition:0.3s left ease-in-out;
}



.navbox li a span{
margin-left:30px;
}

.navbox li a:hover {
background-color:#ddd;
left:10px;
transition:0.3s left ease-in-out;
border-radius:4px;
font-weight:700!important;
color:#444 !important;
}


/* HOME PAGE */

.clink {
position:relative;
text-align:center;
color:#aaa;	
font-size:14px;
}

.clink i {
position:relative;
font-size:inherit;
top:3px;
}

.container {
margin:20px auto;
width:90%;
max-width:1000px;
position:relative;
}


.homewrap, .platformwrap {
width:100%;
position:relative;
margin:20px auto;
box-sizing:border-box;
}

.homewrap {
text-align:left;
}

.platformwrap {
text-align:center;
}


.cbinfo {
display:none;	
}

.coursebox {
display:inline-block;
position:relative;
width:100%;
max-width:200px;
height:200px;
background-color:#fff;
border-radius:5px;
box-sizing: border-box;
padding:0;
margin:10px;
text-align:left;
cursor:pointer;
border:solid thin #ccc;
}


.coursebox:hover {
animation:pulsate 2s infinite;
opacity:0.7;
border:solid thin #666;
}

.coursebox .inf, .clickbox .inf {
position:absolute;
right:3px;
top:3px;
z-index:990;	
font-size:24px;
color:#444;
}
	
.coursebox .inf:hover, .clickbox .inf:hover {
color:lightblue;	
}


.csimage {
position:relative;
top:0;
left:0;	
width:100%;
height:90px;
border-radius:5px;
overflow:hidden;
border:solid thin #ccc;
}

.csimage img{
width:100%;
height:100%;	
background-color:#fff;	
border-radius:5px 5px 0 0;
}

.cstr {
display:block;
overflow:hidden;
padding:5px 10px;
}


.csintro {
color:#444;	
font-size:10px;
position:relative;
text-transform:uppercase;	
font-weight:700;
}

.cstext {
color:#000;
font-weight:700;	
font-size:14px;
line-height:normal;
margin-top:5px;
max-height:35px;
}

.cslevel {
position:relative;
font-size:9px;
color:#069;
font-weight:400;
}


.cstime {
position:relative;
text-align:right;
font-size:9px;
color:#222;
}

.cstime i {
font-size:12px;
position:relative;
top:3px;
}

.ccompleted {
position:relative;
border:solid thin #ccc;
border-radius:3px;
width:100%;
height:7px;
margin-top:5px;
}

.ccounter {
position:relative;
background-color:lightgreen;
height:100%;
}

.sbox {
position:absolute;
width:95%;
max-width:400px;
height:auto;
background-color:#111;	
color:#fff;
border:solid thin #ccc;
border-radius:5px;
z-index:99999;
text-align:center;
padding:5px;
display:none;
left:50%;
transform:translateX(-50%);
}

/* ribbon for completed */

.ribbon {
width: 120px;
height: 120px;
overflow: hidden;
position: absolute;
display:flex;
align-items:center;
justify-content:center;
top: -10px;
left: -10px;
}

      
.ribbon::before,
.ribbon::after {
position: absolute;
content: '';
display: block;
border: 5px solid lightgreen; /*#2980b9;*/
border-top-color: transparent;
border-left-color: transparent;
opacity:0.6;
}

.ribbon::before {
top: 0;
right: 0;
}
.ribbon::after {
bottom: 0;
left: 0;
}

.ribbon span {
position: absolute;
display: block;
white-space: nowrap; 
padding: 5px 0;
background-color: lightgreen;/*#3498db;*/
color: #222;
font-weight:700;
font-size:14px;
text-align: center;
transform: rotate(-45deg) translateY(-50%);
width: calc(100% * 1.414213); /*square of 2*/
}

/* end ribbon */




/* clickbox*/

.clickbox {
display:inline-flex;
flex-direction:column;
position:relative;
width:100%;
max-width:120px;
height:120px;
background-color:#aaa;
border-radius:5px;
box-shadow: 5px 5px 5px #aaa;
box-sizing: border-box;
padding:5px;
margin:10px auto;
text-align:center;
cursor:pointer;
background-image: linear-gradient(rgba(0,0,0,0), rgba(20,20,20,1));
}

.clickbox:hover {
opacity:0.7;
animation:pulsate 2s infinite;	
}

.cbicon {
height:40%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.cbicon i {
font-size:22px;		
}

.cbtext {
position:relative;
height:60%;
border-top: solid thin #ccc;
font-size:13px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-weight:400;
}


.jconfirm-box {
max-width:600px;	
}

.alertmessages {
display:none;
}


/*PAGES*/

.panhead {
margin:20px 0;
display:flex;
background-color:#ccc;
border-radius:15px;
border:solid thin #ccc;
}

.panhead h1 {
text-align:center;	
}

.panhead div {
display:flex;
align-items: center;
justify-content: center;
text-align:center;
}

.panhead div:first-child {
flex:1;
}

.panhead div:last-child {
flex:0 0 30%;
}

.panhead img {
width:auto;
max-width:400px;
height:100%;
border-radius:0 15px 15px 0;
}

.ulink {
margin-bottom:10px;
}

.ulink:first-child {
padding:5px 0px;
}

.ulink a {
font-size:1.5em;
word-break:break-all;
}

.ulink img {
position:relative;
width:20px;
height:auto;
top:3px;
margin-right:10px;
}

.ulink:last-child {
padding:0px 5px 5px 30px;
color:#999;
}

.mytable {
border:solid thin #ccc;
border-spacing: 3px;
border-collapse:separate;

}

.mytable th{
background-color:#ccc;	
border-radius:5px;
}


.mytable td  {
background-color:#000;
color:#fff;	
border-radius:5px;
text-align:center;

line-height: 1.2em;
font-weight:normal;
}

.mytable td p, .mytable th {
font-size:1.0em;	
}


.hugebtn {
position:relative;
height:100px;
width:80%;
font-size:2.6em;
box-shadow:3px 3px 3px #ccc;
padding:10px 20px;
}

.smallbtn {
position:relative;
font-size:1.0em;
padding:5px 8px;
}


/*Customized table*/

.ntable {
border-collapse:separate;	
width:100%;
border-spacing:0 3px;
}

.ntable tr {
position:relative;
width:100%;
display:table-row;	
}

.ntable th {
text-align:center;
}

.ntable td {
text-align:center;
font-weight:700;
color:#222;	
font-size:0.8em !important;
}

.ntable td div:first-child {
color:#666;
display:none;	
}

/*end table*/


/*my account*/

.emsg, .smsg {
color:#fff;
text-align:center;
border-radius:5px;
margin: 10px 20px;
padding:5px;
}

.emsg {
background-color:red;		
}

.smsg {
background-color:green;		
}

/*Classes pages*/

.classnotcharged td div, .divclass.classnotcharged{
color:#999;
}

.classcharged td div, .divclass.classcharged{
color:green;
}

.classcharged.cxld td div, .divclass.classcharged{
color:darkred;
}


/*securx files*/

.classwrapper {
border:solid thin #ccc;
max-width:600px;
margin:auto;
background-color:#222;
color:#fff;
border-radius:15px;
padding:15px;
}

.pagelinks {
text-align:center;
line-height:1.6em;
}

/*pagination*/

.pagination {
text-align:center;
}

.pagination ul {
display:flex;
justify-content:center;
align-items:center;
}

.pagination ul li, .pagination ul li a{
display:inline-flex;
width:30px;
justify-content:center;
align-items:center;
}

.pagination ul li.active {
background-color:#ccc;
font-weight:700;
}

.ico-fix {
position:relative;
top:7px;
}

/*lgpd*/

.lgpd {
text-align:center;
position:fixed;
bottom:-300px;
min-height:60px;
font-size:14px;
line-height:20px;
color:#fff;
background-color:#222;	
width:100%;
display:flex;
z-index:9999;
border-top:solid thin #ccc;
transition:ease bottom 500ms;
}

.lgpd.show {
bottom:0px;
transition: bottom ease 500ms;
}

.lgpd div {
padding:10px;
position:relative;
margin:auto;
display:flex;
align-items: center;
}

.lgpd a {
margin-left:20px;	
}



@media only screen and (max-width: 900px) {

.panhead div  {
flex:1 !important;
}

.panhead div img  {
width:100%;
height:auto;
}

.panhead h1 {
font-size:2.5em;
}

}


@media only screen and (max-width: 640px) {
	


.ntable {
border-collapse:collapse;

}

.ntable th {
display:none;	
}

.ntable div{
display:block !important;	
}

.ntable tbody tr {
margin:10px 0;
display:block;
border:solid thin #999;
border-radius:4px;
}

.ntable td {
position:relative;
display:block;	
padding:5px 10px;
white-space:normal;
}

.ntable td:last-child {
border:none;
}

.header div span {
font-size:0.7em !important;
}

}


@media only screen and (max-width: 550px) {

.panhead {
display:block;
background-color:transparent;
border:none;
}

.panhead img {
border-radius:15px;
}


.mytable td p, .mytable th {
font-size:0.8em !important;	
}

.hugebtn {
font-size:2em;
}





}

@media only screen and (max-width: 450px) {
	
h1 {
font-size:2.2em !Important;
}

h2 {
font-size:1.8em !Important;
}

h3 {
font-size:1.6em !Important;
}

h4 {
font-size:1.2em !Important;
}

.mytable td p, .mytable th {
font-size:0.7em !important;	
}

.header div span {
font-size:0.5em !important;
}

}

@media only screen and (max-width: 350px) {
h1 {
font-size:1.8em !Important;
}

h2 {
font-size:1.4em !Important;
}

h3 {
font-size:1.2em !Important;
}

.mytable td p, .mytable th {
font-size:0.6em !important;	
}

.header div span {
display:none;
}

/*my account*/


.pwbox td{
width:100% !important;

}
	
}

/*ANIMATIONs*/


@keyframes pulsate {
  0% {
    transform: scale(1.1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  }
  
  70% {
    transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  
  100% {
    transform: scale(1.1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}