html, body {
    padding: 0;
    margin: 0;
}

body {
    font-family: Montserrat-Regular, Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    /*background: #333;*/
    min-width: 1024px;
}

h1 {
    margin: 0;
    padding: 0;
}

a {
    color: #283583;
    text-decoration: none;
}
a:hover,
span.link:hover
{
    text-decoration: underline;
}

table a, #GroupSelectionList a, #NestorList a {
	color: gray;
}

select {
    font-size: 12px;
}

button {
    height: 24px;
}

#version-info {
    position: absolute;
    top: 0px;
    left: 0px;
    color: rgba(0,0,0,0);
}

/*D3 Graph styling*/

.visualisation-wrapper {
    /*display: inline-block;*/
    border: 1px solid #888888;
    padding: 10px;
    margin-bottom: 20px;
    /*box-shadow: 2px 2px 5px #888888;*/
    width: 1280px;
	text-align: left;
}

.GroupOverview .visualisation-wrapper
{
    width: 500px;
    height: 220px;
}

.GroupOverview .visualisation-legend
{
	display: none;
}

.GroupOverview #visualisation1-average,
.GroupOverview #visualisation1,
.GroupOverview #visualisation2-average,
.GroupOverview #visualisation2,
.GroupOverview #visualisation3-average,
.GroupOverview #visualisation3
{
	-webkit-transform: scale(0.39, 0.39);
	-webkit-transform-origin: 0 0;
	-moz-transform: scale(0.39, 0.39);
	-moz-transform-origin: 0 0;
	-ms-transform: scale(0.39, 0.39);
	-ms-transform-origin: 0 0;
	-o-transform: scale(0.39, 0.39);
	-o-transform-origin: 0 0;
	transform: scale(0.39, 0.39);
	transform-origin: 0 0;
	cursor: pointer;
}

.visualisation-title {
    font-size: 20px;
    margin-right: 20px;
    float: left;
}

.visualisation-controls, .visualisation-controls input, .visualisation-controls button {
    font-size: 11px;
	overflow: hidden;
}

.GroupOverview .visualisation-controls {
    float: right;
    margin-right: 3px;
}

.BenchmarkPanel .visualisation-controls {
    float: right;
}

.BenchmarkPanel .visualisation-controls button {
    margin-right:5px;
}

.visualisation-controls select:nth-child(1) {
	width: 90px;
}

.visualisation-controls select:nth-child(2) {
	width: 120px;
}

.visualisation-controls select {
    height: 24px;
}

.visualisation-legend {
	border: 1px solid #888888;
	float: right;
	padding: 5px;
}

[id$=-average] .user-point {
	cursor: pointer;
}

.axis path, .axis line {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: Montserrat-Regular, Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.y.axis text {
	display: none;
}

.tick {
    stroke-dasharray: 1, 2;
}

.bar {
    fill: FireBrick;
}

#x-label, #y-label {
    font-weight: bold;
}

#d3tip {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    border: 1px solid #eee;
    padding: 10px;
    box-shadow: 2px 2px 5px #888888;
}

#ui-datepicker-div {
    font-size: 11px;
}

.ClickSpan {
    cursor: pointer;
    text-decoration: underline;
}

#Footer {
    padding: 0 15px 0 15px;
}

#Main {
    padding: 60px 15px 0 15px;
}

#TopBar {
    background-image: url(../images/IconID.svg);
    background-repeat: no-repeat;
    background-position: 20px center;
    background-color: #502181;
    color: #fff;
    padding: 6px 5px 6px 54px;
    text-align: left;
    white-space: nowrap;
    overflow:hidden;
}

#HeaderInfo button, 
.MessageButton, 
.NestorButton,  
.HelpdeskButton,
.DomainButton, 
.DocumentItem a {
    display: inline-block;
    background-color: #502181;
    text-decoration: none !important;
    padding: 2px 10px;
    border-radius: 16px;
    border: 1px solid #502181;
    color: #FFF;
	cursor: pointer;
}

.ExportButton {
    display: inline-block;
    text-decoration: underline;
    background:none;
    border:none;
    color: gray;
    position: relative;
    top: 0px;
    left: 0px;
}

.ExportButton span {
    position: relative;
    top: -5px;
    left: 8px;
    cursor: pointer;
}

.ExportButton img {
    cursor: pointer;
}

#TopBar a {
    color: #ffffff;
    padding: 22px;
    margin: 0px;
    border-radius: 0px;
    line-height: 25px;
    margin-left: 20px;
    border: 1px solid #ffffff;
}

#TopBar a.logout {
    background-image: url(../images/IconLogout.svg);
    background-repeat: no-repeat;
    background-position: 8px center;
}

#TopBar a[disabled], 
#HeaderInfo button[disabled], 
.MessageButton[disabled], 
.NestorButton[disabled], 
.ExportButton[disabled], 
.HelpdeskButton[disabled],
.DomainButton[disabled], 
.DocumentItem a[disabled] {
    cursor: default;
    opacity: .7;
}

.InfoButton_g, .InfoButton_m, .InfoButton_d {
    width: 100%;
    display: inline-block;
    text-decoration: none;
    padding: 10px 0px;
    color: #FFF;
}

.InfoButton_g {
    background-color: #63960B;
}

.InfoButton_m {
    background-color: #D79910;
}

.InfoButton_d {
    background-color: #14BCC5;
}



.MessageButton {
    padding-left: 30px;
    background-image: url(../images/ikoon_mail.svg);
    background-repeat: no-repeat;
    background-position: 5px center;
    text-decoration: none;
}

#Header {
    height: 90px;
    color: #FFF;
    line-height: 200%;
    padding: 25px 0 0 0;
    position: relative;
    border: 0px solid #ccc;
    border-bottom-width: 2px;
}

#Header .Logo {
    position: absolute;
    left: 30px;
    top: 30px;
}

#HeaderInfo {
    background: #FFF;
    color: gray;
    padding: 0px 10px 10px 80px;
    margin: 0 0 0 200px;
    min-height: 50px;
    line-height: 34px;
}

#Menu,
#Menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: rgba(255,255,255,0.7); /*transparent;*/
}

#Menu {
    margin-top: 12px;
    margin-bottom: 20px;
    margin-left: 20px;
}

#Menu > li {
    display: inline;
}

#Menu li {
    position: relative;
    float: left;
    cursor: pointer;
    width: 160px;
}
#Menu li:last-child {
    margin-right: 0;
}

#Menu li span,
#Menu li a
{
    display: block;
    height: 30px;
    padding: 14px 10px 6px 40px;
    color: gray;
    border: 1px solid #ccc;
    text-decoration: none;
    text-align: center;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}

#Menu li span
{
    z-index: 100;
    background-repeat: no-repeat;
    font-weight: bold;
}

li span.part1 {
    color: #ff6500 !important;
    background-image: url(../images/IconLanguage.svg);
    background-position: 19px center;

}

li span.part2 {
    color: #3ab54a !important;
    background-image: url(../images/IconRead.svg);
    background-position: 13px center;

}

li span.part3 {
    color: #009ee3 !important;
    background-image: url(../images/IconCalculator.svg);
    background-position: 43px center;
    
}

li a.accounts {
    color: #dd175e !important;
    background-image: url(../images/IconAccount.svg);
    background-position: 13px center;
    background-repeat: no-repeat;
    font-weight: bold;
}

li.overzicht {
    width: 220px !important;
}
li span[class^='overzicht_'] {
    font-size: 20px;
    text-align: left !important;
    width: 220px !important;
    padding: 14px 10px 6px 4px !important;
}

li span.overzicht_1 {
    color: #ff6500 !important;
}

li span.overzicht_2 {
    color: #3ab54a !important;
}

li span.overzicht_3 {
    color: #009ee3 !important;
}

li span.overzicht_accounts {
    color: #dd175e !important;
}

#Menu li ul
{
    position: absolute;
    top: 45px;
    left: 4px;
    border: 0;
    display: none;
    z-index: 99;
    width: 152px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    
}

#Menu li ul li
{
    display: inline;
    float: none;
}

#Menu li ul li a
{
    margin: 0 0 0 0px;
    background: #fff;
    color: gray;
    text-align: left;
    display: block;
    height: 20px;
    padding: 14px 4px 6px 12px;
    color: gray;
    border: 1px solid #ccc;
    text-decoration: none;
    text-align: left;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
}

#Menu li ul li:last-child a
{
    margin-bottom: 0;
}

#Menu li.part1 ul li a:hover
{
    background-color: #ff6500 !important;
    color: #fff;
}

#Menu li.part2 ul li a:hover
{
    background-color: #3ab54a !important;
    color: #fff;
}

#Menu li.part3 ul li a:hover
{
    background-color: #009ee3 !important;
    color: #fff;
}

#Menu li a[class$="_Selected"],
#Menu li span[class$="_Selected"]
{
    background-color: #fff;
    border-bottom-width: 0px;
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#Menu li span.part1_Selected {
    color: #ff6500;
    background-image: url(../images/IconLanguage.svg);
    background-position: 19px center;
    background-repeat: no-repeat;
}

#Menu li span.part2_Selected {
    color: #3ab54a;
    background-image: url(../images/IconRead.svg);
    background-position: 13px center;
    background-repeat: no-repeat;
}

#Menu li span.part3_Selected {
    color: #009ee3;
    background-image: url(../images/IconCalculator.svg);
    background-position: 43px center;
    background-repeat: no-repeat;
}

#Menu li a.accounts_Selected {
    color: #dd175e;
    background-image: url(../images/IconAccount.svg);
    background-position: 13px center;
    background-repeat: no-repeat;
    font-weight: bold;
}



#Main {
    background: #FFF;
    /*padding-top: 60px;*/
}

#Footer {
    height: 90px;
    text-align: center;
    color: gray;
    padding: 15px;
}

#start-table .headerRow {
    height: 40px;
    border: 1px solid #ffffff;
}

#start-table .Row {
    height: 30px;
}

table {
    border-collapse: collapse;
    margin: 0 0 10px 0px;
    font-size: 12px;
}

th {
   cursor: pointer; 
}

#start-table,
#details-table,
#errorcategory-table,
div.visualisation-wrapper,
#SupportDocs,
{
    color: gray;
    border: 1px solid lightgray;
}

#LessonResults .BigBorder {
    color: #000;
    border: 1px solid lightgray;
}

.BigBorder {
    border: 1px solid lightgray;
}
.nosort {
    cursor: default;
}

#start-table {
    float: left;
}

#details-table
{
    border-top-color: #fff;
}


#details-table thead td h1.InfoButton
{
    margin-top: 3px;
    margin-bottom: 4px;
}
#details-table thead td button.ExportButton
{
	position: absolute;
    bottom: 2px;
	right: 0;
}

#details-table tr
{
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}
#details-table tbody tr td:first-child
{
    border-left: 1px solid gray;
}
#details-table tbody tr:last-child
{
    border-right: 1px solid gray;
}

.border_white {
    border: 2px solid #fff;
}

.border_white_gwwg {
    border-top: 2px solid gray;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-left: 2px solid gray;
}

.border_white_wwwg {
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-left: 2px solid gray;
}

.border_white_wwgg {
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid gray;
    border-left: 2px solid gray;
}

.border_white_ww_w {
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-left: 2px solid white;
}

.border_black {
    border: 2px solid #000;
}

.border-t_white {
    border-top: 2px solid #fff;
}

.border-lr_white {
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}

.border-lr_wg {
    border-left: 2px solid #fff;
    border-right: 2px solid gray;
}

.border-lr_gw {
    border-left: 2px solid gray;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
}

.border-trl_w {
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
}

.border-trl_wgw {
    border-left: 2px solid #fff;
    border-right: 2px solid gray;
    border-top: 2px solid #fff;
}

.border-b_white {
    border-bottom: 2px solid #fff;
}

.border-l_white {
    border-left: 2px solid #fff;
}

.border-r_white {
    border-right: 2px solid #fff;
}

.border-r_black {
    border-right: 2px solid #000;
}

.border-l_black {
    border-left: 2px solid #000;
}

.border-bottom {
    border-bottom: 1px solid #000;
}

.bold {
    font-weight: 700;
}

thead td {
    text-align: center;
    text-indent: 2px;
    background: #def;
    vertical-align: middle;
}


tbody {
    border: 1.1px solid gray;
}

thead th, thead td, thead tr {
    vertical-align: middle;
    border: 1.1px solid white;
}

tbody td {
    line-height: 20px;
    text-align: center;
    color: gray;
    background: #EFEFEF;
    border: 1px solid gray;
    border-top-width: 0px;
    border-bottom-width: 0px;
    padding: 0px 4px 0px 4px;
}

tbody td.percentage {
    color: #fff;
}

tbody tr.Row:nth-child(odd) td
{
    background-color: #fff;
}

tfoot td {
    background: #def;
}

.leerling-naam {
    text-align: left;
    white-space: nowrap;
}

.klas-info {
    white-space: nowrap;
}
.klas-info.border-bottom {
	padding-bottom: 12px;
}

.Taalverzorging thead td,
.Taalverzorging thead th,
.Taalverzorging,
.part1 .klas-info
{
    background-color: gray;
    color: #ffffff;
    min-width: 40px;
}

.Lezen thead td,
.Lezen thead th,
.Lezen,
.part2 .klas-info
{
    background-color: gray;
    color: #ffffff;
    min-width: 40px;
}

.Rekenen thead td,
.Rekenen thead th,
.Rekenen,
.part3 .klas-info
{
    background-color: gray;
    color: #ffffff;
    min-width: 40px;
}

thead tr.Row th,
thead tr.Row td 
{
    background-color: #fff;
    border: 1.1px solid gray !important;
    color: gray;
    height: 30px;
}

.time {
    text-align: center;
}

.rotate {
    width: 25px;
    height: 20px;
    white-space: nowrap;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -moz-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    position: relative;
    left: 20px;
    bottom: -72px;
    line-height: 20px;
    text-align: left;
}

.rotateCenter {
    left: 50%;
    transform: rotate(-90deg) translateY(50%);
}

.rotateCorrection32 {
    width: 32px;
    left: 25px; 
}

.rotateCorrection40 {
    width: 40px;
    left: 29px; 
}

.rotateCorrection50 {
    width: 50px;
    left: 35px; 
}

.rotateCorrection60 {
    width: 60px;
    left: 40px; 
}

.rotateCorrection90 {
    width: 90px;
    left: 55px;
}

.rotateCorrection100 {
    width: 100px;
    left: 60px;
}

.rotateCorrection110 {
    width: 100px;
    left: 65px;
}

.rotateCorrectionOverflowTD
{
	text-indent: 0;
}
.rotateCorrectionOverflow
{
	bottom: 10px;
}

.tick {
    left: 50px;
}

.level {
    background-image: url(../images/level-equal.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

.level.up {
    background-image: url(../images/level-up.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

.level.down {
    background-image: url(../images/level-down.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

.EnableLesson
{
	height: 18px;
    width: 24px;
    border: none;
	border-color: #fff;
    background-image: url(../images/IconUnlockLesson.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0;
}

.EnableLesson20
{
	height: 18px;
    width: 24px;
    border: none;
	border-color: #fff;
    background-image: url(../images/IconUnlockTest.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0;
}

.DisableLesson20
{
	height: 18px;
    width: 24px;
    border: none;
	border-color: #fff;
    background-image: url(../images/IconLockTest.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0;
}

.EnableLesson21
{
	height: 18px;
    width: 24px;
    border: none;
	border-color: #fff;
    background-image: url(../images/IconUnlockTestE.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0;
}

.DisableLesson21
{
	height: 18px;
    width: 24px;
    border: none;
	border-color: #fff;
    background-image: url(../images/IconLockTestE.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0;
}

.ModuleRepeat {
    height: 18px;
    width: 30px;
    border: none;
	border-color: #fff;
    background-image: url(../images/IconLevelSame.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0;
    border-right: 1px solid #502181;
}

.ModuleUp {
    height: 18px;
    width: 24px;
    border: none;
	border-color: #fff;
    background-image: url(../images/IconLevelNext.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0;
}


.AccountPanel h1.InfoButton, .InfoPanel h1.InfoButton
{
    min-width: 110px;
    background-color: #502181;
    color: #fff;
    font-size: 100%;
    text-align: center;
    font-weight: bold;
    padding: 4px;
}

.AccountPanel div.BigBorder,
.DomainPanel div.BigBorder,
.InfoPanel div.Border.message
{
    overflow: auto;
    text-align: left;
    padding: 10px 10px 15px 10px;
    margin-bottom: 20px;
}

.AccountInfo,
.AccountResults
{
    width: 500px;
    /*
	height: 300px;
	overflow-y: scroll;
	*/
}

.Border.message {
    width: 300px;
    border: 1px solid gray;
}



#AccountTable th, #LessonResults th, .LessonDetail th {
    background-color: #502181;
    color: #fff;
    font-size: 100%;
    text-align: center;
    font-weight: normal;
}

#AccountTable td, #AccountTable th {
    text-align: left;
    padding: 4px;
}

#AccountTable td.Password,
#AccountTable td.Login {
    font-family: Montserrat-Regular, Verdana, Arial, Helvetica, sans-serif;
}

#UserOverview {
    width: 950px;
}

.button-bar-row {
	margin-top: 5px;
}

.display-mode-select-wrapper {
	float: right;
}

.cat-results-wrapper {
	padding-top: 22px;
}

.cat-results-wrapper .LessonInfo td,
.cat-results-wrapper .LessonDetail td {
	background-color: #f9e3d2;
}

#LessonResults, .LessonDetail {
    font-family: Montserrat-Regular, Verdana, Arial, Helvetica, sans-serif;
    margin: 0 0 10px 0;
}

#LessonResults, .LessonDetail, .LessonInfo {
    border-collapse: collapse;
    width: 100%;
}

#LessonResults td, #LessonResults th, .LessonDetail td, .LessonDetail th {
    padding: 2px;
}

#LessonResults th.Module, #LessonResults th.Level {
    width: 8%;
}

#LessonResults th.Lesson {
    width: 4%;
}
#LessonResults th.LessonExtra {
    font-size:110%;
}

#LessonResults td.Score span {
    display: block;
    float: left;
    font-size: 5px;
    line-height: 5px;
}

#LessonResults td.Score span.Wrong {
    background: #ED4747;
}

#LessonResults td.Score span.Correct {
    background: #50A852;
}

#LessonResults td.Score span.NotDone {
    background: Silver;
}

.LessonDetail .Normal {
    width: 17.5%;
}

.LessonDetail .Tiny {
    width: 7%;
}

.LessonDetail .Small {
    width: 12%;
}

.LessonDetail .Type {
    text-align: left;
}

.LessonDetail .Type .link {
    /*text-decoration: underline;*/
    cursor: pointer;
}

.LessonInfo
{
    border-bottom-width: 0;
    margin: 0;
}

.LessonInfo td
{
    padding-left: 5px;
    text-align: left;
}

.PercentageBar {
    overflow: hidden;
    /*width: 100%;*/
}

.PercentageBar span {
    display: inline-block;
    float: left;
    text-align: center;
    font-weight: bold;
    line-height: 25px;
}

#IndexPage {
    width: 100%;
    overflow: hidden;
}

.IndexList {
    width: 48%;
    float: left;
    margin-right: 2%;
}

.IndexList33 {
    width: 32%;
    float: left;
    text-align: center;
    margin-right: 2%;
}

.IndexList33Last {
    margin-right: 0;
    float: right;
}

.IndexList > div, .IndexList33 > div {
    padding: 3px 3px 3px 10px;
    height: 400px;
    overflow: auto;
    background: #ffffff;
    text-align: left;
}

h1.InfoButton_g, h1.InfoButton_m, h1.InfoButton_d {
    font-size: 100%;
    text-align: center;
    font-weight: bold;
    min-width: 220px;
}


.IndexList h3, .IndexList33 h3 {
	margin: 15px 0 2px 0;
}

.IndexList h3.First, .IndexList33 h3.First {
	margin-top: 0;
}

#GroupSelectionList a,
#NestorList a
{
    line-height: 200%;
}

#MessageDialog, #NestorAddDialog, #NestorRemoveDialog {
     position: fixed; 
     padding: 10px; 
     left: 35%; 
     top: 25%; 
     background-color: #F1F1F1; 
     z-index: 100;  
     width: 500px; 
     height: 250px; 
     border: 3px solid #502181;;
}

#MessageDialog h1, #NestorAddDialog h1, #NestorRemoveDialog h1 {
    padding: 0;
    margin: 0;
}

#NestorAddDialog select {
	font-size: 1em;
}

#SubButtonBar {
    margin: 20px auto;
}

#SubButtonBar a {
    display: inline-block;
    padding-left: 35px;
    background-position: top left;
    background-repeat: no-repeat;
    line-height: 32px;
    margin-right: 2em;
}

#SubButtonBar a:hover {
    background-position: bottom left;
    color: #AB364B;
}

#SubButtonBar a.ButtonTaalverzorging {
    background-image: url(../images/IconLanguage.svg);
    color: #ff6500;
}

#SubButtonBar a.ButtonLezen {
    background-image: url(../images/IconRead.svg);
    color: #3ab54a;
}

#SubButtonBar a.ButtonRekenen {
    background-image: url(../images/IconCalculator.svg);
    color: #009ee3;
}

.SmallText {
    font-size: 75%;
}

/* documenten */
#docs1,#docs2,#docs3,#docs4,#docs5,#docs6,#docs7,
#docs6a,#docs6b,#docs6c,#docs6d,#docs6e,#docs6f
{
	margin-left:10px;
}


/* footer */
#FooterNew
{
    position: relative;
    width: 100%;
    text-align: right;
    clear: both;
}

#FooterNew div
{
    position: relative;
    margin-top: 30px;
    height: 80px;
    color: gray;
    font-size: 12px;
}

#FooterNew p
{
    width: 200px;
    padding: 6px 130px 0 0;
    float: right;
    text-align: right;
}

#FooterNew a img
{
    position: absolute;
    right: 40px;
    top: 0px;
}

.DocumentItem
{
    margin-bottom: 30px;
    margin-top: 5px;
    padding-left: 60px;
    padding-right: 22px;
    background-repeat: no-repeat;
    background-position: 10px 3px;
    background-size: 38px 40px;
    min-height: 55px;
}

.DocumentItem.Last
{
    margin-bottom: 0;
}

.DocumentItem a
{
    margin-top: 4px;
}

.DocumentItem.PDF
{
    background-image: url(../images/document_pdf.svg);
}
.DocumentItem.PPT
{
    background-image: url(../images/document_ppt.svg);
}
.DocumentItem.TECH
{
    background-image: url(../images/document_tech.svg);
}
.DocumentItem.SCORE
{
    background-image: url(../images/IconDocXLS.svg);
}

.GroupOverview,
.BenchmarkPanel,
.ErrorCategoryPanel,
.AccountPanel,
.DomainPanel
{
    display: inline-block;
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    margin-left: 20px;
    color: #502181;
}

.InfoPanel {
    display: inline-block;
    position: absolute;
    margin-right: 20px;
    margin-top: 42px;
    margin-left: 20px;
    color: #502181;
}

.AccountPanelEmpty {
    display: inline-block;
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    margin-left: 20px;
    color: #502181;
}

.Docs
{
    display: inline-block;
    margin-left: 20px;
    color: #502181;
    margin-right: 80px;
    margin-top: 26px;
}


.GroupName {
    margin-left: 10px;
}

.GroupOverview .ajaxresult,
.GroupOverview .note
{
    margin-bottom: 10px;
    text-align: left;
    width: 650px;
}


.ErrorCategoryPanel
{
    display: inline-block;
}

#SupportDocs
{
    width: 510px;
    height: 200px;
    overflow: auto;
    text-align: left;
    padding: 5px;
    color: gray;
    border: 1px solid lightgray;
}

.ExportButton,
.HelpdeskButton
{
    position: relative;
    margin-top: 5px;
    margin-bottom: 3px;
}

#Helpdeskfile {
    cursor: pointer;
}
.ExportButton
{
    
	z-index: 9;

}
.ExportSmallButton
{
    position: relative;
    display: inline-block;
    text-decoration: underline;
    background:none;
    border:none;
    color: gray;
    position: relative;
    top: 0px;
    left: 0px;
    cursor: pointer;
}


.ExportSmallButton img
{
    top: 0px;
}

.HelpdeskButton[name="CmdHelpdesk"]
{
	position: absolute;
	right: 10px;
}

.AccountPanel.Helpdesk
{
    margin-top: 20px;
    margin-bottom: 20px;
}

.AccountPanel div.HelpdeskForm
{
    width: 500px;
    overflow: hidden;
	position: relative;
	padding-bottom: 35px;
}

.HelpdeskForm input, .HelpdeskForm textarea 
{
    width: 490px; 
    border: 1px solid gray;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
}

.HelpdeskForm textarea
{
    width: 490px;
    height: 70px;
}

#MessageDialog textarea,
.HelpdeskForm textarea
{
    resize: none;
}

#UploadFile
{
    display: inline-block;
}
#UploadFile button
{
    position: absolute;
    width: 200px;
}
#UploadFile input
{
    filter: alpha(opacity=0);
    opacity: 0;
}

.DomainPanel
{
	position: relative;
}

.DomainPanel.Wide
{
    text-align: center;
    width: 100%;
}

.sortable-list
{
    list-style: none;
    margin: 0;
    text-align: center;
    width: 100%;
}

.sortable-list div
{
    width: 13%;
    padding: 10px 3px;
    margin: 5px 0 5px 1%;
    display: block;
    float: left;
    background-color: #283583;
    border: 1px solid #283583;
    border-radius: 4px;
    color: white;
    text-align: center;
}
.sortable-list div:first-child
{
    margin-left: 0;
}
.sortable-list div.sortable-item
{
    cursor: move;
}

.sortable-list .placeholder {
    background-color: #04baee;
    border: 1px dashed #283583;
}

.DomainPanel.Choice
{
}

.DomainPanel.Choice.User
{
    width: 600px;
}
.DomainPanel.Choice.Menu
{
    width: 400px;
}

.Choice table
{
        margin-bottom: 10px;
}

.Choice table,
.Choice table td
{
    border-color: #fff;
    background-color: #fff;
    vertical-align: top;
    text-align: left;
}

.Choice.User table td
{
    padding-right: 10px;
}
.Choice.User table td:last-child
{
    padding-right: 0;
}

.DomainPanel .Message
{
	position: absolute;
	bottom: 3px;
	right: 5px;
	text-align: center;
}
.DomainPanel .Message.Error
{
	color: red;
}

.errorCategoryLabel {
	font-weight: normal;
}

.NotPracticingThisSection td,
.NotPracticingThisSection a
{
	color: gray;
}

.ActiveDomainUsersList {
	padding-left: 0px;
	margin-left: 0px;
}

.ActiveDomainUsersList li {
	float:left;
    margin-left: 30px;
    width: 200px;
	height: 20px;
}

.ActiveDomainUsersList li div {
	width: 150px;
    height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.lesson-link-wrapper {
	text-align: right;
}

.top-link {
	font-size: 22px;
	color: #00adee;
}

.button-bar {
	position: relative;
	width: 950px;
}

.group-users-wrapper {
	margin-top: 3px;
	float: right;
}

.lesson-link {
	display: inline-block;
	width: 100%;
    color: #fff;
}

.lesson-link:hover {
	text-decoration: none;
}

/******** Domain ********/


.DomainPanel
{
	position: relative;
}

.DomainPanel.Wide
{
    width: 100%;
}

.DomainPanel .Message
{
	display: none;
	margin-bottom: 12px;
}

.DomainPanel .Message.Error
{
	color: red;
}

.DomainPanel .add-panel,
.DomainPanel .overview-panel {
	padding: 12px;
}

.DomainPanel .add-panel.buttons {
	margin-left: 23px;
}

.DomainPanel .students-list,
.DomainPanel .domains-list {
	overflow: hidden;
	margin-left: 23px;
}

.DomainPanel .add-panel.students input {
	position: relative;
	top: 2px;
	margin: 0 0 6px 0;
}

.DomainPanel .add-panel.students #all-users {
	margin-top: 6px;
	margin-bottom: 12px;
}

.DomainPanel .add-panel.students .col {
	display: inline-block;
	width: 32%;
	vertical-align: top;
}

.DomainPanel .add-heading .label {
	position: relative;
	top: -5px;
}

.DomainPanel .add-heading .bullet {
	position: relative;
	display: inline-block;
	background-color: #502181;
	width: 20px;
	height: 20px;
	border-radius: 10px;
}

.DomainPanel .add-heading .bullet .label {
	position: absolute;
	top: 2.5px;
	left: 5px;
	color: #fff;
}

.domain-wrapper
{
	text-align: left;
    /*max-width: 1300px;*/
    width: 90%;
}

.domain-table {
	margin: 0px;
	border: 0px;
	width: 100%;
    color: gray;
}

.domain-table thead tr td {
	padding: 6px 0;
}

#errorcategory-table {
	min-width: 600px;
    max-width: 984px;
}

#errorcategory-table thead,
#errorcategory-table thead tr td,
thead tr th,
.rekenen thead th,
.rekenen thead td,  
{
    border: 2px solid #ffffff;
    min-width: 36px;
}

tr.gray td {
    background-color: gray;
    border: 2px solid #fff;
    color: #fff;
}

tr.gray td div {
    background-color: gray;
    color: #fff;
}

tr.white td {
    background-color: #fff;
    border: 1.1px solid gray;
    color: gray;
}

tr.white td div{
    background-color: #fff;
    color: gray;
}

.domain-table td:first-child {
	border: 0px;
}

.domain-table tbody td {
	padding: 0 6px;
}

.domain-table tbody td:first-child {
	text-align: left;
}

.DomainPanel .sortable-list {
    list-style: none;
    margin: 0;
    text-align: center;
    width: 100%;
}

.DomainPanel .sortable-list div {
    padding: 3px 6px;
    margin: 5px 0 5px 1%;
    display: block;
    float: left;
    border: 1px solid #502181;
    border-radius: 4px;
    text-align: center;
    background-color: #502181;
    color: white;
	line-height: 20px;
}

.DomainPanel .sortable-list div:first-child {
	margin-left: 0px;
}

.DomainPanel .sortable-list div.sortable-item {
    cursor: move;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.DomainPanel .sortable-list .placeholder {
    background-color: gray;
    border: 1px dashed gray;
}


.settings {
    border: 0px solid #fff;
}
.settings tbody {
    border: 0px solid #fff;
}

.settings tr {
    height: 32px;
    border: 0px solid #fff;
}

.settings td {
    
    text-align: left;
    border: 0px solid #fff;
    background-color: #fff;
}



.lesson-link-wrapper {
	text-align: right;
}

.top-link {
	font-size: 22px;
	color: #00adee;
}

.button-bar {
	position: relative;
	width: 950px;
}

.lesson-link {
	display: inline-block;
	width: 100%;
}

.lesson-link:hover {
	text-decoration: none;
}

/******** Tabs ********/

.tabbar {
    overflow: hidden;
    position: relative;
    top: 0px;
}

.tab {
    float: left;
    margin: 10px 5px 0 0;
    background-color: #ffffff;
    border-radius: 6px 6px 0 0;
    border: 1px solid #888888;
    border-bottom: 0px solid #888888;
}

.tab.active {
    background-color: #502181;
}

.tab.active a {
    color: #ffffff;
}

.tab a {
	color: #502181;
    margin: 5px;
    display: inline-block;
}

.tab a:hover {
	text-decoration: none;
}

.Details .tabbar {
	top: 1px;
    left: -4px;
}

.Reset {
    background-color: #502181;
    padding: 2px 10px;
    margin: 4px 0px;
    border-radius: 16px;
    border: 1px solid #502181;
    color: #fff;
    cursor: pointer;
}

.fa.fa-angle-double-up {
    color: #3a1f56;
}

.locked {
    height: 18px;
    width: 20px;
    display: inline-block;
    background-image: url(../images/locked.gif);
}

.delete {
    height: 18px;
    width: 24px;
    border: none;
	border-color: #fff;
    background-image: url(../images/IconDelete.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0;
}