html, body
{
	font-family: "Open Sans";
	margin: 0;
	width: 100%;
	/*height: 100%;*/
}

html
{
	height: 100%;
}

body
{
	overflow-y: scroll;
	background-size: cover;
	/*background-image: url("../img/bg.jpg");*/
    background-attachment: fixed;
}

a
{
	/*color: #66CDAA;*/
	text-decoration: none;
	cursor: pointer;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

::-webkit-scrollbar
{
 	width: 12px;  /* for vertical scrollbars */
 	height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
	/*background: rgba(0, 0, 0, 0.1);*/
}

::-webkit-scrollbar-thumb
{
	/*background: rgba(0, 0, 0, 0.5);*/
}

/*::selection
{
  background: rgba(102, 205, 170, 0.5);
}

::-moz-selection
{
  background: #66CDAA;
}*/

.navbar
{
	width: 100%;
	height: 45px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	/*background-color: #66CDAA;*/
	/*background-image: url("../img/bg/2.jpg");
	background-color: rgba(255, 255, 255, 0.9);*/
}

.navbar ul
{
    list-style: none;
   /* background-color: #444;*/
    text-align: center;
    padding: 0;
	margin: 0;
}

.navbar li
{
	width: 150px;
	height: 45px;
	line-height: 45px;
	display: inline-block;
}

.navbar a
{
	display: block;
	height: 100%;
    text-decoration: none;
    color: #fff;
  	line-height: 45px;
    /*color: #000;*/
    font-weight: bold;
    transition: .3s background-color;
}

.navbar a:hover
{
	background-color: rgba(0, 0, 0, 0.1);
}

.left
{
	float: left;
	margin-left: 15%;
}

.center
{
	display: inline-block;
}

.right
{
	float: right;
	margin-right: 15%;
}

.content
{
	overflow:auto;
	margin-top: 45px;
}

.cardwide
{
	margin-top: 15px;
	margin-left: 2%;
	margin-right: 2%;	
	width: 96%;
	border: 1px solid #eeeeee;
	border-radius: 3px;
	background-color: #ffffff;
	/*background-color: rgba(255, 255, 255, 0.9);*/
}

.card
{
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;	
	width: 70%;
	border: 1px solid #eeeeee;
	/*border-radius: 3px;*/
	background-color: #ffffff;
	/*background-color: rgba(255, 255, 255, 0.9)*/
	position: relative;
}

.card:last-child
{
	margin-bottom: 15px;
}

.card h1
{
	font-size: 32px;
	font-weight: bold;

	margin: 0;
	padding: 15px;
	padding-bottom: 0;
}

.card p
{
    margin: 0px;
    padding: 15px;
    /*padding-bottom: 5px;*/
    text-align: justify;
   	text-decoration: none;
}

.tabs
{
	margin-top: 15px;

	height: 40px;

	margin-left: auto;
	margin-right: auto;	
	width: calc(70% + 2px);

	font-size: 0;
}

.tabs i
{
	font-size: 16px;
	line-height: 40px;
}

h3.tabtext
{
	margin: 0;
}

.tabs .tab:first-child
{
	border-left: 1px solid #eeeeee;
}

.tabs .tab
{
	line-height: 40px;
	height: 40px;
	width: auto;
	display: inline-block;

	border: 1px solid #eeeeee;
	border-left: none;

	color: #000000;

	padding-left: 10px;
	padding-right: 10px;

	font-size: 18px;
}

#maintab
{
	margin-top: 0;
}

#vies .tab
{
	position: absolute;
	
	width: 40px;
	height: 40px;

	top: -42px;
	left: -1px;

	border: 1px solid #eeeeee;

	line-height: 40px;
	text-align: center;

	color: #ffffff;
}

#vies .tab.second
{
	left: 40px;
	color: #000000;
}

#vies .selected
{

}

.noticerecalculate
{
	padding-top: 0 !important;
}

.card p + p
{
	padding-top: 0px;
}

.card h3, .logincard h3, .card h4, .card h2
{
	margin: 0;
	padding: 15px;
	padding-bottom: 0;
	color: #000000;
	text-decoration: none !important;
	border:0!important;
}

.card h3 + p
{
	padding-top: 0;
}

.card .header
{
	width: 100%;
	height: auto;
	margin: 0;
	/*background-color: #66CDAA;*/
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.card .header.period
{
	background-color: #8851A4;
}

.card .header h3
{
	padding: 2px;
	padding-left: 15px;
	color: #fff;
}

.card .header h3.periodevolutiondiv
{
	float: right;
	text-align: right;

	padding-left: 0;
	padding-right: 15px;
}

.periodselect a
{
	/*color: #000000;*/
}

h3.period
{
	color: #2b2b2b;
}

h3.date
{
	padding-top: 0;
	color: #2b2b2b;
}

h1.point
{
	display: inline;
}

p.average
{
	color: #838B8B;
	padding-bottom: 0;
}

p.average.center
{
	margin-left: auto;
	margin-right: auto;

	margin-bottom: 15px;
}

p.average.center.block
{
	display: block;
}

sup
{
	vertical-align: top;
}

.divider 
{
	height:1px;
	
	background: #eeeeee;

	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.doomscore
{
	font-size: 72px;
	font-weight: bold;

	margin-left: auto;
	margin-right: auto;

	text-align: center !important;
}

.doomscore.paddinglimited
{
	padding-bottom: 0;
}

.large
{
	font-size: 120px;
}

.result
{
	text-align: center;
}

.colour
{
	background-color: #eeeeee;
	height: auto;
}

.fail
{
	color: #cd392f;
}

.card h1
{
	color: #000000;
	text-decoration: none !important;
	border:0!important;
}

.card form
{
	margin: 0px;
	padding: 15px;
	padding-top: 0;
}

.card textarea
{
	width: 100%;
	height: 100px;
	resize: none;
}

.card input
{
	margin-top: 5px;
}

table.grades
{
	width: 100%;
	padding: 15px;
	padding-top: 15px;
	border: 0;
}

h3 + table.grades
{
	padding-top: 0;
}

td
{
	padding: 0;
}

td.title
{
	width: 40%;
}

td.comment
{
	width: 36%;
	padding-left: 2%;
	padding-right: 2%:;
}

td.point
{
	width: 10%;
	text-align: right;
}

.failed
{
	color: #b91d47;
}

td.average
{
	width: 10%;
	text-align: right;
}

td.icon
{
	width: 2%;
	display: none;
	text-align: center;
}

td.icon.persist
{
	display: table-cell;
	text-align: left;
}

td.no
{
	width: 5%;
	display: table-cell;
}

td.emoji
{
	width: 2%;
	display: table-cell;
}

td.count
{
	width: 10%;
	text-align: center;
}

td.course
{
	width: 90%;
}

.spreadheader
{
	background-color: #8851A4;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	width: 100%;
}

tr
{
	border: 0;
	cursor: pointer;
}

tr.period
{
	color: #838b8b;
}

.noticemobile
{
	display: none;
}

#typeswitcher
{
	text-align: center;
	/*background-image: url('/img/pie.png');*/
	background-repeat: no-repeat;
	background-position: 0 20%;
}

#typeswitcher p
{
	display: inline-block;
	color: #ffffff;
}

#push
{
	display: none;
}

#pushbutton
{
	background:none!important;
    border:none; 
    padding:0!important;
    font: inherit;
    /*border is optional*/
    cursor: pointer;
}

#pushstate
{
	padding-top: 0;
}

.promo
{
	width: 75%;
	height: auto;
}


.icon
{
	font-family: Arial;
}

.card .menu
{
    list-style: none;
   /* background-color: #444;*/
    text-align: center;
    padding: 0;
	margin: 0;
}

.card .menuitem
{
	padding: 2px;
	height: auto;
	line-height: auto;
	display: inline-block;
}

.edit
{
	/*padding: 15px;*/
	padding-bottom: 0;
	float: right;
}

.edit h3
{
	display: inline;
}

.anchor
{
	height: 45px;
	margin-top: -45px;
	display: block;
	visibility: none;
}

.circle
{
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: 0px 0px 15px 15px;
	overflow: auto;
	display: inline-block;
	/* width and height can be anything, as long as they're equal */
}

.statsoverflow
{
	min-height: 145px;
	float: left;
	overflow: auto;
}

.chart
{
	height: 100%;
}

.uniquechart
{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

.chartcontainer
{
	margin: 2% 2% 0% 2%;
}

.piecontainer
{
	margin: 2% 0 2% 2%;
	width: 46%;
	display: inline-block;
	text-align: center;
}

.piecontainer.wide
{
	width: 96%;
	padding: 10px 0 0 0;
}

.legendcontainer
{
	float: right;
	margin: 2% 2% 2% 0;
	width: 46%;
	display: inline-block;
}

.legendcontainer table
{
	width: 100%;
}

h3 a
{
	color: #000000;
	text-decoration: none;
}

h1 a
{
	color: #000000;
	text-decoration: none;
}

/* LOG IN CSS */
.logincard
{
	margin-top: 15px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	top:0;
    bottom: 0;
    left: 0;
    right: 0;
	height: 200px;
	width: 300px;
	border: 1px solid #eeeeee;
	/*border-radius: 3px;*/
	background-color: #ffffff;
	/*background-color: rgba(255, 255, 255, 0.5);*/
}

.logincard.extra
{
	top: auto;
	margin-bottom: 15px;
}

.loginbg
{
	overflow-y: scroll;
	background-size: cover;
	background-image: url("../img/bg_post.jpg");
    background-attachment: fixed;
}

.logincard p
{
	margin: 0;
}

.logincontent
{
	margin-top: 230px;
}

.logincard h3
{
	padding: 0;
}

.newlogin
{
	text-align: center;
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #eeeeee;
	background-color: #ffffff;
	border: 1px solid #65cca9;
	border-top: none;

	font-size: 0;
}

.newloginboard
{
	background-color: #65cca9;
	margin-top: 15px;
	padding-bottom: 10px;
}

.newloginboard.smartschool
{
	background-color: #FF6600;
}

#newloginstatusboard
{
	display: block;
	height: auto;
	font-size: 16px;
	line-height: 22px;

	transition: height 0.5s;

	color: #65cca9;

	overflow: hidden;
}

#licence
{
	bottom: 0;
	right: 0;

	position: fixed;
	padding: 5px;
	padding-left: 8px;
	padding-right: 8px;

	color: #ffffff;
	background-color: #65cca9;
}

#licence a
{
	text-decoration: none;
	color: #ffffff;
}

.newloginrememberboard
{
	margin-top: 8px;
	font-size: 14px;
	color: #ffffff;
}

#rememberplaceholder
{
	font-size: 18px;
}

#status
{
	padding: 5px;
	overflow: hidden;
}

.newlogo
{
	margin-top: 10px;
	width: 75%;
	max-width: 180px;
	height: auto;
	font-size: 14px;

	font-family: "Open Sans";
}

input.newlogo
{
	margin-top: 10px;
	height: 28px;
	max-width: 250px;
	border: 1px solid #65cca9;
	text-align: center;
}

input.newlogo.password
{
	width: calc(75% - 30px);
	max-width: 220px;
}

input.newlogo.check
{
	height: 14px;
}

button.newlogo
{
	height: 30px;
	max-width: 25px;
	margin: 0;
	margin-left: 5px;
	border: 1px solid #ffffff;
	background-color: #65cca9;
	color: #ffffff;
	text-align: center;
}

button.newlogo.smartschool, .newloginboard.smartschool button
{
	background-color: #FF6600;
}

a.newlogo
{
	vertical-align: bottom;
	line-height: 30px;
	font-size: 25px;
	max-width: 25px;
	margin: 0;
	margin-left: 5px;
	color: #ffffff;
	text-align: center;
}

#accountchoose h3
{
	color: #ffffff;
	padding-top: 0.5em;

	margin-top: 0;
	margin-bottom: 0.5em;

	font-size: 18px;
}

#accountchoose p
{
	font-size: 1rem;

	color: white;
}

#accountchoose button.newlogo
{
	width: calc(70% / 2);
	max-width: none;
}

/*.verticalalign
{
	margin-top: 10px;
}*/

.verticalalign
{
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
}

/* flipping code */



@media (max-width : 768px) {
/*.navbar
{
	height: auto;
	display: block;
	top: auto;
	left: auto;
}

.content
{
	margin-top: 0;
}
*/

#licence
{
	display: none;
}

.loginbg
{
	background-image: url("../img/bg_post.jpg");
}

.chart
{
	width: 100%;
	height: 1500%;
}

body
{
	background-position: center; 
}

.navbar li, .navbar a
{
	width: 45px;
	/*padding-left: 3px;
	padding-right: 3px;*/
}

.full
{
	width: 100px;
}

.left
{
	margin-left: 2%;
}

.right
{
	margin-right: 2%;
}

.navbar .text
{
	display: none;
}

.logout
{
	display: none;
}

.card
{
	margin-left: auto;
	margin-right: auto;
	width: 96%;
}

.tabs
{
	width: calc(96% + 2px);
}

.card p
{
	padding-top: 5px;
}

td.title
{
	width: 70%;

}

td.comment
{
	width: 45%;
	display: none;
}

td.point
{
	width: 25%;
	text-align: right;
}

td.point.deux
{
	padding-left: 15px;
}

td.average
{
	width: 10%;
	text-align: right;
	display: none;
}

td.icon
{
	width: 6%;
	display: table-cell;

	text-align: left;
}

td.icon.persist
{
	padding-right: 5px;
}

.noticemobile
{
	display: inline-block;
}

.doomscore.small
{
	/*font-size: 40px;*/
}

/* LOG IN CSS */
/*.logincard, .errorcard
{
	padding: 2%;
	margin: auto;
	margin-left: 2%;
	margin-right: 2%;
	position: absolute;
	top: auto;
    bottom: 2%;
    left: auto;
    right: auto;
	height: 175px;
	width: 92%;
	border: 1px solid #eeeeee;
	border-radius: 3px;
}*/

.logincard
{
	margin-top: auto;
	margin-bottom: 15px;
}

.newlogin
{
	width: 80%;
}

.errorcard
{
	top: 2%;
	bottom: auto;
}

/* PLUS CSS */
.courseselect
{
	width: 100%;
}

.acceptbutton
{
	width: 10%;
	float: right;
	margin-top: 2px;
}

.promo
{
	width: 96%;
}

.twitterfield
{
	width: 50%;
}

.uniquechart
{
	width: 100%;
}

.piecontainer
{
	/*margin: 5% 0 2% 2%;*/
	width: 100%;
}

.piecontainer.wide
{
}

.legendcontainer
{
	float: none;
	width: 100%;
	margin: 0;
}

.legendcontainer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

}

@media (min-width: 768px) and (max-width : 1280px) {
.card
{
	width: 80%;
	height: 100%;
}

.tabs
{
	width: calc(80% + 2px);
}

.left
{
	margin-left: 10%;
}

.right
{
	margin-right: 10%;
}

.newlogin
{
	width: 40%;
}
}