/*                          */
/* Navileren CSS specials.  */
/*                          */
/* RC 20160312 added for new UI masterpage. */
/*                          */
/* Bemplanner colours       */
/*                          */
/*                          */
/* New UI Idyia colors      */
/*                          */
/* Blue       RGB 000 00 255 CMYK 70-16-00-00 */
/* Blue       RGB 038 169 225 CMYK 70-16-00-00 */
/* Lightgreen RGB 201 201 045 CMYK 25-10-99-00 */
/* Orange     RGB 252 176 060 CMYK 00-35-86-00 */
/* Purple     RGB 237 035 124 CMYK 00-96-18-00 */
/* Green      RGB 141 198 063 CMYK 50-01-99-00 */
/* DGreen    */
/* Lightgrey with matching color*/
/* Dark Green for header text instead of blue */
/* 0.7 Transparent colors for background */
/* Lightgrey with matching color*/
/* Grid colors */
/* Colors for judgement */
/*                          */
/* Navileren CSS specials.  */
/*                          */
/*@ClrBgColNavHdr : #BFCFFF;
@ClrBgColPupNav : #D0DBE6;
@ClrBgColNav 	: #FFFFE0;*/
/* Colors for Navileren Educational */
/* General CSS for pupil part of Idyia              */
/* Start Classes for the new ui in the pupil portal */
body {
  margin: 0;
  top: 0;
  left: 0;
  font-size: 1em;
  /* Take care because if this is changed all kinds of sizes change. */
  font-family: Arial, Verdana, Calibri, sans-serif;
}
/*                                                            */
/* Start of the classes for determining the base screenlayout */
/*                                                            */
/*                                                            */
/* Sets the background image for the footer of the page */
.ClsAutMargin {
  margin-left: auto;
  margin-right: auto;
}
/* Set background for all pupil portal pages. */
#AppDivPage_backGround {
  height: inherit;
  top: 0;
  font-size: 75%;
  background: transparent url("/css/images/IdyiaUI/achtergrond_1920x1080.jpg") no-repeat;
  background-size: cover;
}
/* Start of CSS for all headers in the pupil portal pages. */
#AppDivHeaderBox {
  position: absolute;
  left: 0;
  width: 100%;
  height: 14em;
  min-height: 7.5em;
  border-width: 0;
  background-color: transparent;
  opacity: 1;
  z-index: 0;
  /*  -moz-background-clip: @x;    */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* CSS for goddess Idyia */
#divGdsIdyiaCnt {
  position: absolute;
  left: 1.5em;
  top: 1.5em;
  width: 7.083em;
  /*74px;*/
  height: 15em;
  z-index: 10;
  background: transparent url("/css/images/Idyiasvg/GoddessIdyiaRght.svg") no-repeat;
  background-size: cover;
  /* sizes background img to this size */
}
/* End CSS for goddess Idyia */
/* CSS for name balloon */
#divPupNameBln .ClsPName {
  margin-top: 0.25em;
}
#divPupNameBln .ClsFnt200 {
  font-size: 200%;
  font-weight: bold;
  margin: 0;
}
#divPupNameBln {
  position: absolute;
  margin: 1.5em 0 0 10em;
  left: 7.1em;
  width: auto;
  min-width: 10em;
  max-width: 50em;
  height: 60%;
  background-color: transparent;
  z-index: 10;
  opacity: 1;
  /*float: left;*/
}
/* End CSS for name balloon */
/* End of Classes for the new ui in the pupil portal */
/* Colors for days Fluvium type */
.ClsActive {
  border: 2px solid #333;
}
.ClsMenuBlnCntr .ClsClrMonday {
  float: left;
  background-color: #FCB040;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  padding-top: 25%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ClsMenuBlnCntr .ClsClrTuesday {
  float: left;
  background-color: #60B09F;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  padding-top: 25%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ClsMenuBlnCntr .ClsClrWednesday {
  float: left;
  background-color: #D2B48C;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  padding-top: 25%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ClsMenuBlnCntr .ClsClrThursday {
  float: left;
  background-color: #2DA1F0;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  padding-top: 25%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ClsMenuBlnCntr .ClsClrFriday {
  float: left;
  background-color: #ED237C;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  padding-top: 25%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ClsMenuBlnCntr .ClsClrWeekNo {
  float: left;
  background-color: #FF8000;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ClsMenuDays {
  width: 60%;
  height: 30%;
  float: right;
}
/* Start CSS for menu balloons                                              */
/* CSS of the menu balloons  in the headerbox on the frmPupFrstPageUI, the  */
/* frmPupWeekProgramUI and the frmPupDayTasksUI page.                       */
/* Some texts will be alternated between these programs.                    */
.ClsMenuBlnOutCnt {
  width: 60%;
  height: 65%;
  float: right;
}
.ClsMenuBlnCntr {
  width: 10em;
  height: 85%;
  color: white;
  float: right;
  margin-right: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ClsMenuBlnCntr .ClsUpper {
  float: left;
  background-color: transparent;
  width: 20%;
  height: 20%;
  border-right: solid 2px #29728E;
}
.ClsMenuBlnCntr .ClsMenuBlnFllr {
  width: 50%;
  height: 20%;
  border-right: solid 2px #29728E;
  float: left;
}
.ClsMenuBlnCntr .ClsRRed {
  float: left;
  background-color: #902A1C;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
.ClsMenuBlnCntr .ClsRGreen {
  float: left;
  background-color: #5B933F;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}
.ClsMenuBlnCntr .ClsRBlue {
  float: left;
  background-color: #077797;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}
.ClsMenuBlnCntr .ClsR2 {
  background-color: #5B933F;
  text-align: center;
}
.ClsMenuBlnCntr .ClsPSingle {
  /* Values based on font-size 150%*/
  margin-top: 1.113em;
  margin-bottom: 1.056em;
}
.ClsMenuBlnCntr .ClsPDoubleU {
  /* Values based on font-size 125%*/
  margin-top: 0.357em;
  margin-bottom: 0.4285em;
  float: left;
  width: 100%;
}
.ClsMenuBlnCntr .ClsPDoubleD {
  /* Values based on font-size 150%*/
  margin-top: 0;
  margin-bottom: 0.4285em;
  float: left;
  width: 100%;
}
.ClsMenuBlnCntr .ClsGenericRect {
  overflow: hidden;
}
/* End CSS for menu balloons                                             */
/* CSS of the Greeting part in the headerbox on the 1st page.       */
/* It will be alternated with divPupNameBln in frmPupWeekProgramUI  */
.ClsDivFPGreeting {
  position: absolute;
  color: white;
  background-color: transparent;
  left: 8.6em;
  width: 40em;
  top: 15%;
  height: 60%;
  padding-top: 0.5em;
  padding-left: 0;
  font-family: 'Lilita One', Arial;
  background: url('/css/images/IdyiaSvg/tekstwolkje_wit_up.svg') no-repeat;
  background-size: 100% 100%;
}
.ClsDivPupRemark {
  position: absolute;
  color: white;
  background-color: transparent;
  left: 13.6em;
  width: 36em;
  top: 78%;
  height: 15%;
  padding-left: 0;
  font-family: 'Lilita One', Arial;
}
#Cloud {
  position: absolute;
  left: 12.5%;
  width: 85%;
  top: 7%;
  height: 80%;
  padding-left: 0;
}
.ClsDivFPGreeting #SpanFPGreeting1,
.ClsDivFPGreeting #SpanFPGreeting2 {
  width: auto;
  padding-top: 0.3em;
  font-family: 'Lilita One', Arial;
}
.ClsDivFPGreeting #SpanFPGreeting3 {
  width: 100%;
  padding-top: 0.2em;
  font-family: 'Lilita One', Arial;
}
/* End of CSS of the Greeting part in the headerbox on the 1st page.     */
/* Start of style for the container, containing the data content.        */
/* The height, width, left and top are set in screenpars_xxx.js and are  */
/*  dependent on the viewport.                                           */
#AppDivContentPage {
  position: absolute;
  overflow: hidden;
  left: 0;
  width: 100%;
  height: 92%;
  border-width: 0;
  background-color: transparent;
  opacity: 1;
  z-index: 0;
  /*  -moz-background-clip: @x;    */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.DpgClsRectangles {
  width: 100%;
  height: 100%;
  /*  -moz-background-clip: @x;    */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* End of style for the container, containing the data content.        */
/* Start of style for the container, containing the copyright.        */
#AppdivCopyrightBox {
  position: absolute;
  background-color: transparent;
  left: 0;
  width: 100%;
  height: 3em;
  font-size: inherit;
}
span {
  display: inline-block;
  padding-top: 0.2em;
}
.ClsTitleText {
  color: #333;
}
/* initialise variables which we do not use in these pages */
/*#AppUserNameContainer {margin-top:0.5em;}
#AppDivContentPageLeft {width: 0;}
#AppDivContentPageFiller {width:0;}
#AppDivContentPageMiddle {width: 0;}
#AppDivContentPageSheet {width: 100%;}
#AppDivContentPageRight {width: 0;}
#AppdivFooter {width: 100%;}*/
.ClsGroupDiv {
  left: 50%;
  width: 13em;
  height: 100%;
  position: absolute;
  font-size: 130%;
  font-weight: bold;
}
.ClsClrAB4B9C {
  background-color: #AB4B9C;
}
.ClsClrF0472C {
  background-color: #EF462D;
}
.ClsClr06BBB1 {
  background-color: #06BBB1;
}
.ClsClrFCC955 {
  background-color: #FBC955;
}
.ClsClrMonday {
  background-color: #E4B84D;
}
.ClsClrTuesDay {
  background-color: #AF1C29;
}
.ClsClrWedDay {
  background-color: #D71F70;
}
.ClsClrThursDay {
  background-color: #8323B2;
}
.ClsClrFriDay {
  background-color: #3BB1C3;
}
.ClsClrPPTasks,
.ClsClrPPDisc {
  background-color: #F0E9E1;
}
/* In frmWeekProgram we have pause blocks with border-bottom in the color of the day */
.ClsClrMondayWB {
  border-bottom: 1px SOLID #E4B84D;
}
.ClsClrTuesDayWB {
  border-bottom: 1px SOLID #AF1C29;
}
.ClsClrWedDayWB {
  border-bottom: 1px SOLID #D71F70;
}
.ClsClrThursDayWB {
  border-bottom: 1px SOLID #8323B2;
}
.ClsClrFriDayWB {
  border-bottom: 1px SOLID #3BB1C3;
}
.ClsClrPPTasksWB,
.ClsClrPPDiscWB {
  border-bottom: 1px SOLID #F0E9E1;
}
/* Light text versions for the above */
.ClsClrAB4B9CLt {
  color: #AB4B9C;
}
/*.ClsClrF0472CLt { color:#EF462D}*/
.ClsClr06BBB1Lt {
  color: #06BBB1;
}
.ClsClrFCC955Lt {
  color: #7D642A;
}
.ClsClrMondayLt {
  color: #725C26;
}
.ClsClrTuesDayLt {
  color: #AF1C29;
}
.ClsClrWedDayLt {
  color: #D71F70;
}
.ClsClrThursDayLt {
  color: #8323B2;
}
.ClsClrFriDayLt {
  color: #3BB1C3;
}
.ClsClrPPTasksLt,
.ClsClrPPDiscLt {
  color: #555555;
}
/* Default color for headers in the pupip firstPage and weekprogram. */
.ClsClrDefaultDay {
  color: #333;
}
.ClsClrBodyLessonPartColumn {
  background-color: #e0e0e0;
}
.ClsClrBodyLessonPartColumnTr {
  background-color: rgba(240, 240, 240, 0.7);
}
/* Default color for lesson is white, only tasks gets another color */
.ClsClrDefaultLesson {
  color: #333;
}
.ClsClrDefaultTasks {
  color: #333;
}
/* Start CSS settings specific for PupFrstPage       */
#PP6701001_PupPortalTitle_Container {
  font-family: 'Lilita One', LilyUPC;
}
.ClsPP6701001ContainerSize {
  padding-left: 2%;
  border-width: 0;
  margin: 0;
  border-style: solid;
  /*margin: 0 2%;*/
  /*background-color:#E7E7CE;*/
}
#PP6701001_PupPortalScndContainer,
#PP6701001_PupPortalScndTitle_Rect {
  color: #8E196A;
}
#PP6701001_PupPortalThrdContainer,
#PP6701001_PupPortalThrdTitle_Rect {
  color: #338CBC;
}
#PP6701001_PupPortalFrthContainer,
#PP6701001_PupPortalFrthTitle_Rect {
  color: #4A852B;
}
.PPFrstDayBgCol {
  background-color: #ED237C;
}
.ClsPP6701001-Menu {
  color: white;
  margin-left: 10%;
}
.PP6702001_TimeContainer {
  opacity: 0;
}
.ClsFillerCss {
  opacity: 0;
  background-color: transparent;
  width: 7%;
  height: 1em;
}
/* Start of CSS settings specific for Master-PPLogin.            */
.ClsDivSubPinCode input {
  padding-top: 1.2em;
}
.ClsDivSubPinCode,
.ClsDivGreeting {
  float: left;
  background-color: transparent;
  width: 80%;
  height: 100%;
  padding-top: 4.5em;
  padding-left: 15em;
  opacity: 0.8;
  color: #DEE719;
}
.ClsDivGreeting {
  padding-top: 1em;
  padding-left: 10%;
  color: white;
}
.ClsDivGreeting #SpanGreeting1,
.ClsDivGreeting #SpanGreeting2 {
  padding-top: 1.4em;
  font-family: 'Lilita One', Arial;
  opacity: 1;
}
.ClsDivGreeting #SpanGreeting2 {
  padding-top: 0.2em;
}
.ClsFntLilitaOne {
  font-family: 'Lilita One', Arial;
}
/* End of CSS settings specific for Master-PPLogin.            */
/* Start CSS settings specific for PupWeekProgramUI       */
#PP6702001_PupDayProg_Container {
  background-color: white;
}
.ClsPupDayWeekTtl {
  width: 100%;
  height: 100%;
}
/* Set the padding and border for the day columns in the pupWeekProgram */
/*.ClsPadWeekProgramDayColumn { 
        margin: 0 2%;
        border-style: solid;
        border-width:1px;
    }*/
#PP6702001_PupDayProg1Container {
  border-color: #B19B66;
}
#PP6702001_PupDayProg2Container {
  border-color: #974D54;
}
#PP6702001_PupDayProg3Container {
  border-color: #6B0F38;
}
#PP6702001_PupDayProg4Container {
  border-color: #40284C;
}
#PP6702001_PupDayProg5Container {
  border-color: #1D5861;
}
#PP6702001_PupDayProgTasksContainer {
  border-color: #787470;
}
.ClsPadWeekProgramDayColumn {
  border-width: 0;
  margin: 0;
}
.ClsClrBodyLessonPartColumn {
  opacity: 0.7;
  background-color: #b0e0e6;
}
/* for new ui */
.PupDayMonTitle,
.PupDayTueTitle,
.PupDayWedTitle,
.PupDayThuTitle,
.PupDayFriTitle {
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  padding-top: 0.8em;
}
.PupDayTimeTitle {
  width: 7%;
}
.PupDayTasksTitle,
.PupDayMonTitle {
  background-image: url('/css/images/IdyiaSvg/KartelRand_Mon.svg');
  background-size: cover;
}
.PupDayTueTitle {
  background-image: url('/css/images/IdyiaSvg/KartelRand_Tue.svg');
  background-size: cover;
}
.PupDayWedTitle {
  background-image: url('/css/images/IdyiaSvg/KartelRand_Wed.svg');
  background-size: cover;
}
.PupDayThuTitle {
  background-image: url('/css/images/IdyiaSvg/KartelRand_Thu.svg');
  background-size: cover;
}
.PupDayFriTitle {
  background-image: url('/css/images/IdyiaSvg/KartelRand_Fri.svg');
  background-size: cover;
}
.ClsPupTimeCntnr {
  float: left;
  width: 7%;
}
.ClsPupDayTtl,
.ClsPupDayCntnr {
  float: left;
  width: 17.8%;
}
.ClsPupDayTtl {
  height: 100%;
  overflow: hidden;
}
.ClsPupDayCntnr,
.ClsPupTimeCntnr {
  padding-left: 0;
  overflow: hidden;
}
/* End of CSS settings specific for PupWeekProgramUI        */
/*                                                          */
/* Start CSS settings specific for PupDayTasksUI            */
.ClsOP7117-Hrx_InnerDiv1 {
  width: 30%;
  height: 50%;
  float: right;
}
.ClsOP7117-Hrx_InnerDiv2 {
  width: 50%;
  height: 50%;
  float: right;
}
/* End of CSS settings specific for PupDayTasksUI           */
/*                                                          */
/* Start CSS settings specific for frmPupFrstPageUi         */
#PP6701001_PupPortal_Container {
  padding-top: 2em;
  margin-left: 2%;
  width: 100%;
  height: 100%;
  float: left;
  /*  -moz-background-clip: @x;    */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#PP6701001_PupPortal_Container h4 {
  margin-top: 0.3125em;
  margin-bottom: 0.3125em;
}
#PP6701001_ScndContainer,
#PP6701001_ThrdContainer,
#PP6701001_FrthContainer {
  position: relative;
  float: left;
  height: 100%;
  width: 31.1%;
  background: url('/css/images/IdyiaSvg/blaadjes.svg') no-repeat;
  background-size: cover;
}
#PP6701001_PupPortalScndContainer,
#PP6701001_PupPortalThrdContainer,
#PP6701001_PupPortalFrthContainer {
  padding-right: 0;
  position: relative;
  /* for scrollbar }*/
  /*  -moz-background-clip: @x;    */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ClsDialButton {
  border: 1px solid;
  border-radius: 0.667em;
  height: 1.875em;
  margin-left: 1em;
  padding-left: 1em;
  padding-top: 0.375em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*  -moz-background-clip: @x;    */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.ClsDialogTopHdr h1 {
  margin-bottom: 0;
  margin-top: 0;
}
.AppClsSubPadding {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 2.5em;
}
/*.ClsNewDialogOutside {
    z-index:500;
    display:none;
    box-shadow: -1px 1px 10px 10px rgba(8,8,8,0.15);
    font-family: 'Alegreya Sans', sans-serif;
}


.ClsDialogTopHdr {
    border-bottom: 1px solid lightslategray;
    float: left;
    height: 3.5em;
    padding-top: 0.714em;
    padding-bottom: 0.79em;
    margin-bottom:1em;
    width: 100%;
    .box-sizing;
}*/
/* End of CSS settings specific for frmPupFrstPageUi        */
/* This CSS comes from BMPlanCss.less */
/* Hour display CSS */
.OP7117_HourBox {
  width: auto;
  height: 12.5%;
}