:root {
    --primary-color: #2d4576;
    --secondary-color: #0494d9;
    --support-color1: #da0083;
    --support-color2: #ebf5fa;
    --question-color: #f2f2f2;
    --header-text: #e6d4d5;

    --btn-primary-bg : #2d4576;
    --btn-primary-txt : #ffffff;
    --btn-primary-border : #2d4576;
    --btn-primary-bg-hover : #4d6494;
    --btn-primary-txt-hover : #ffffff;
    --btn-primary-border-hover : #4d6494;
    
    --btn-secondary-bg : #ffffff;
    --btn-secondary-txt : #2d4576;
    --btn-secondary-border : #b0c0e0;
    --btn-secondary-bg-hover : #ffffff;
    --btn-secondary-txt-hover : #2d4576;
    --btn-secondary-border-hover : #4d6494;

    --scrollbar : #0494d9 !important;
    --link-color: #2d4576;
}

html.scroll-smooth {
    scroll-behavior: smooth; 
    height:100%
}

body { background: #ebf5fa; font-family: 'Roboto', 'Helvetica', Arial, sans-serif;}

body.empty { background: url('/images/platform/bg-grid.jpg') center center no-repeat;  background-attachment: fixed; background-size: cover;  }

aside {
    width: 380px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -400px;
    background: #fff;
    z-index: 5;
}

body.side-menu-show aside              { left: 0px; }
body.side-menu-show.xs-editmode aside  { left: 45px; }

.aside-header           { min-height: 90px; }
aside .site-title       { font-size: 1.3rem; line-height: 1.4rem; color: var(--secondary-color); font-weight: 700; margin: 0; }
aside .site-title span  { display: block; }
aside .course-cover     { max-width: 50px; display: flex; align-items: center; padding-right: 12px; }
aside .course-cover img { -webkit-box-shadow: 1px 1px 4px 1px rgba(138,149,176,0.5); transform: rotate(-2deg); }
.aside-header:hover     { cursor: pointer; }


.menu-toggle-layer      { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: #000; z-index: 4; opacity: 0.2; display:none; cursor: pointer;}  


header  { height: 240px; background: var(--secondary-color); background: linear-gradient(90deg,var(--secondary-color) 0%, var(--support-color1) 100%); color: #fff; }

main {
    margin-left: 0px;
}

@media only screen and (min-width:991px) {
    body.side-menu-show main    { margin-left: 380px; }
    body.course-homepage main   { margin-left: 0px };
    body.side-menu-show aside   { left: 0px; }
    body.side-menu-show #XSmenu-page-wrapper.XSmenu-expanded  aside     {left: 230px;} 
}

@media only screen and (min-width: 991px) {
    .menu-toggle-layer          { display:none !important; }  
}

@media only screen and (max-width: 990.9px) {
    body.side-menu-show main    { margin-left: 0px; }
    body.explicit-open aside   { left: 0px; }   
}

h1,.h1 { font-weight: 900; font-size: 2.0rem; color: var(--primary-color); }
h2,.h2 { font-weight: 900; font-size: 1.4rem; color: var(--primary-color); }
h3,.h3 { font-weight: 900; font-size: 1.2rem; color: var(--primary-color); }
h4,.h4 { font-weight: 900; font-size: 1.0rem; color: var(--primary-color); }
h5,.h5 { font-weight: 700; font-size: 1.0rem; }
h6,.h6 { font-weight: 600; font-size: 1.0rem; color: var(--secondary-color); }

/* ---------- scrolling header -------------- */
body.scrolling main    { padding-top: 240px; }
body.scrolling header  { position: fixed; z-index:3; top: 0px; left:380px; width: CALC(100% - 380px); height: auto; min-height:60px; -webkit-box-shadow: 2px 2px 15px 2px rgba(138,149,176,0.1); box-shadow: 2px 2px 15px 2px rgba(138,149,176,0.1); }

body.scrolling header h1     { font-size: 1rem; order: 2; }
body.scrolling header nav    { width: 60%; white-space: nowrap; overflow: hidden; height: 1.6rem; }
body.scrolling header .page-title-scroll button.btn-menu-toggle { display: inline-block; }
body:NOT(.scrolling) header .page-title-scroll button.btn-menu-toggle { display: none; }

body.scrolling:NOT(.side-menu-show) header { left: 0px; width: 100%;  }
body.scrolling.side-menu-show #XSmenu-page-wrapper.XSmenu-expanded header     { left: 610px; width: CALC(100% - 610px); }
body.scrolling.side-menu-show #XSmenu-page-wrapper.XSmenu-collapsed header     { left: 425px; width: CALC(100% - 425px); }
body.scrolling:NOT(.side-menu-show) #XSmenu-page-wrapper.XSmenu-expanded header     { left: 225px; width: CALC(100% - 225px); }
body.scrolling:NOT(.side-menu-show) #XSmenu-page-wrapper.XSmenu-collapsed header     { left: 45px; width: CALC(100% - 45px); }

body.scrolling header .page-title-scroll    { display: flex; }
body.scrolling header .header-nav  { display: none !important; }
body.scrolling header .page-nav     { margin-top: 10px; order: 3; }
body.scrolling header .breadcrumb   { padding-top: 5px; padding-bottom: 0px; }

body:NOT(.scrolling) .btn-scroll-toggle    { display: none; }
body.scrolling .btn-scroll-toggle    { display: block; float: left; margin-top: 10px; margin-right: 10px; }

.display-switch label                       { font-weight: 400; line-height: 24px; cursor: pointer; }
.display-switch .icon                       { height: 14px; }
body.scrolling header .display-switch       { margin: 0 0 0 12px; }

/* body.scrolling:NOT(.side-menu-show) header { left: 0px; width: 100%;  } */
/* body .header-scroll           { position: fixed; top: 0px; width: 100%;  } */

/* website colors */
.text-color-primary         { color: var(--primary-color) !important; }        
.text-color-secondary       { color: var(--secondary-color) !important; }
.bg-color-primary           { background: var(--primary-color); }
.bg-color-secondary         { background: var(--secondary-color); }

/* basic stuff */
.whitespace                 { margin-bottom: 0.8rem; }
.whitespace.pe--artikel     { margin-bottom: 2.4rem; }
body.course .pe--artikel.container      {padding-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; max-width: 100% !important; }
.shadow                     { -webkit-box-shadow: 2px 2px 15px 2px rgba(138,149,176,0.1); box-shadow: 2px 2px 15px 2px rgba(138,149,176,0.1);}
.animation                  { transition: margin-left .3s ease-in-out, left .3s ease-in-out;; }
input                       { cursor: pointer; }
.font-weight-300            { font-weight: 300; }
.font-weight-400            { font-weight: 400; }
.font-weight-500            { font-weight: 500; }
.font-weight-700            { font-weight: 700; }
.font-weight-900            { font-weight: 900; }
a.anchor                    { display: block; position: relative; top: -40px; visibility: hidden; }

/* text links */
a                           { color: var(--link-color); }

/* menu knop */
.collapse-menu              { width: 16px; height: 16px; }

/* pagina titel */
.page-title                 { position: relative; }
.page-title h1              { font-size: 1.4rem; color: #ffffff; font-weight: 500; }

/* breadcrumb */
.breadcrumb                 { padding: 0; margin-bottom: 5px; background: none; font-size: 0.8rem; }
.breadcrumb a,
.breadcrumb-item.active,
.breadcrumb-item+.breadcrumb-item::before       { color: var(--header-text) }

.account                                    { height: 38px; }
.account .btn-text                          { color: #fff; }
.account .btn img.icon-user                 { position: relative; top: -3px; }
.account button.show-badge img.icon-user    { left: -9px; }
.account button.btn.show-badge .badge       { position: absolute; top: 4px; left: 14px; border-radius: 15px; }

.badge                      { border-radius: 15px; color: var(--primary-color); }

.content                    { position: relative; /* width: CALC(80% - 60px); */ background: #fff; padding: 40px; }

.page                       { margin-top: -70px; padding: 0 30px; }
.page p                     { margin: 0; }


/* Course homepage */
.pe--cursus_homepage .cover3d   { max-width:200px; width: 100%; }


/* Sidebar */
.pe--boek_verwijzing.vluchtkolom 

.pe--boek_verwijzing.vluchtkolom .boek-verwijzing               { position: relative; margin: 20px 0; font-style:italic; color: var(--primary-color);  }
.pe--boek_verwijzing.vluchtkolom .boek-verwijzing .boek-verwijzing-icon  {margin-top: 47px; }

.pe--boek_verwijzing.vluchtkolom .boek-verwijzing .btn.btn-external-book         { padding: .375rem .5rem; }
.pe--boek_verwijzing.vluchtkolom .boek-verwijzing .btn.btn-external-book img     { width: 22px; }

@media (min-width: 768px) {
    .pe--boek_verwijzing.vluchtkolom .boek-verwijzing           { position: absolute; width: CALC(30%); margin-left: CALC(100% - 20px); }
}

.pe--boek_verwijzing.hoofdvlak      { position: relative; padding: 2rem; margin-bottom: 20px;
                                      padding: 2rem; background: #f2f2f2; }
.pe--boek_verwijzing.hoofdvlak .boek-verwijzing     { display: flex; }
.pe--boek_verwijzing.hoofdvlak .boek-verwijzing .boek-verwijzing-icon   { margin-right: 1rem; }
.pe--boek_verwijzing.hoofdvlak .boek-verwijzing .boek-verwijzing-text   { flex-grow: 1; }
  






/* Hoofd items accordion van menu */
a.accordion-item             { position: relative; display: block; padding: 10px 0px 10px 22px; color: var(--primary-color); font-weight: 700; cursor: pointer; font-size: 0.9rem; }
a.accordion-item:hover       { text-decoration: underline; }
a.accordion-item::before     { position: absolute; left: 0px; width: 16px; height: 16px; content: ' '; }
.accordion-chevron           { position: absolute; top: 12px; right: 0; width: 20px; height: 20px; z-index: 1; 
                               background: url('/images/chevron-right-light.svg') center center / 13px 13px no-repeat; cursor: pointer; 
                               transition: transform .3s ease-in-out;
                               opacity:0.5;
                             }
.accordion-chevron:hover     { opacity: 1; }
.accordion-chevron                 { transform: rotate(90deg); }
.accordion-item[aria-expanded="true"] .accordion-chevron   { transform: rotate(-90deg); }
.accordion-content            { font-size:0.9rem; padding-left: 22px; }

/* Hoofd items accordion van menu */
.pe--openklap_sectie *       { position: relative; }
.collapse-chevron            { position: absolute; top: 11px; right: 10px; width: 20px; height: 20px; z-index: 1; 
                               background: url('/images/chevron-right-light.svg') center center / 13px 13px no-repeat; cursor: pointer; 
                               transition: transform .3s ease-in-out;
                               opacity:0.5;
                             }
.collapse-chevron:hover     { opacity: 1; }
.collapse-chevron                 { transform: rotate(90deg); }
.collapse-handler[aria-expanded="true"] .collapse-chevron   { transform: rotate(-90deg); }




/* Submenu in accordion voor cursus  */
.side-menu-wrapper                      { overflow-y: auto; height: CALC(100vh - 90px); padding-top: 20px; padding-bottom: 20px; }
ul.side-menu                            { font-size: 0.92rem; line-height: 1.2rem; list-style-type: none; padding-left: 0rem; }
ul.side-menu li.side-menu-item,
ul.side-menu li.side-submenu-item       { position: relative; }
ul.side-menu li.side-menu-item a        { display: block; color: var(--primary-color); padding: 5px 25px 5px 0; }
ul.side-menu li.active-page > a    { color: var(--secondary-color); font-weight: 600; }
.side-menu-handler                      { position: absolute; top: 7px; right: 0; width: 20px; height: 20px; z-index: 1; 
                                          background: url('/images/chevron-right-light.svg') center center / 13px 13px no-repeat; cursor: pointer; 
                                          transition: transform .3s ease-in-out;
                                          opacity:0.5;
                                        }
.side-menu-handler:hover                { opacity: 1; }                                         
.side-menu-handler.closed               { transform: rotate(90deg); }
.side-menu-handler.open                 { transform: rotate(-90deg); }

ul.side-submenu.level2                  { list-style-type: none; padding-left: 1.2rem;  }
ul.side-submenu.level3                  { list-style-type: none; padding-left: 1.2rem;  }

div.side-menu-tools                     { height: 20px; font-size: 0.9rem; color: var(--primary-color); }

/* custom padding */
.p-course                   { padding-left: 30px; padding-right: 30px; }
.p-course.header-nav        { padding-left: 18px; }


/* menu icons */
.accordion-item.icon-welkom::before      { background: url('/images/home-regular.svg') center center no-repeat; height: 20px; width: 16px; left: -3px; }
.accordion-item.icon-cursus::before      { background: url('/images/clipboard-list-check-light.svg') center center no-repeat; height: 20px; width: 13px; left: -3px; }
.accordion-item.icon-klassen::before     { background: url('/images/users-class-regular.svg') center center no-repeat; height: 20px; width: 15px; left: -3px; }
.accordion-item.icon-voortgang::before   { background: url('/images/tachometer-alt-fast-regular.svg') center center no-repeat; height: 20px; width: 15px; left: -3px; }
.accordion-item.icon-docentcode::before  { background: url('/images/house-user-regular.svg') center center no-repeat; height: 20px; width: 15px; left: -3px; }
.accordion-item.icon-lmc::before         { background: url('/images/computer-classic-light.svg') center center no-repeat; height: 20px; width: 13px; left: -3px; }



/* Buttons */
.btn                                { white-space: nowrap; }
.btn img                            { width: 16px; opacity: 1; } /* default size iconen */
.btn:hover img                      { opacity: 1; } 

.btn-primary                        { background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-border) !important; color: var(--btn-primary-txt) !important; font-weight: 500; }
.btn-primary.hover,
.btn-primary:hover                  { background-color: var(--btn-primary-bg-hover) !important; border-color: var(--btn-primary-border-hover) !important; color: var(--btn-primary-txt-hover) !important; }
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus                  { background-color: var(--btn-primary-bg-hover) !important; border-color: var(--btn-primary-border-hover) !important; }
.btn-primary.disabled			    { background-color: #cacaca !important; border-color: #cacaca !important; }
.btn-primary.disabled:focus		    { box-shadow: none; }

.btn-secondary                      { background: var(--btn-secondary-bg) !important; border-color: var(--btn-secondary-border) !important; color: var(--btn-secondary-txt) !important; font-weight: 500; }
.btn-secondary.hover,
.btn-secondary:hover                { background-color: var(--btn-secondary-bg-hover) !important; border-color: var(--btn-secondary-border-hover) !important;  color: var(--btn-secondary-txt-hover) !important;}
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle,
.btn-secondary.focus,
.btn-secondary:focus                { background-color: var(--btn-secondary-bg-hover) !important; border-color: var(--btn-secondary-border-hover) !important;  color: var(--btn-secondary-txt-hover) !important; }
.btn-secondary.disabled			    { background-color: #cacaca !important; border-color: #cacaca !important; color: var(--btn-secondary-txt-hover) !important; }
.btn-secondary.disabled:focus		{ box-shadow: none; }

.btn:focus,.btn:active              { outline: none !important; box-shadow: none !important; }
.btn.disabled, .btn:disabled        { opacity: .8 !important; }

/* Page nav */
.page-nav                       { display: flex; float: right; }
.page-nav .btn img              { opacity: 1; }
.page-nav .btn.btn-prev         { margin-right: 8px; }
.page-nav .btn.btn-prev img     { transform: rotate(180deg); }
.page-nav .btn.btn-next,
.page-nav .btn.btn-prev         { padding: .5rem .75rem; }
.page-nav .btn.btn-next img,
.page-nav .btn.btn-prev img     { margin-top: -2px; }




/* Back to top */
.btn-back-to-top                { position: fixed; right: 20px; bottom: 20px; z-index:5; opacity: 0; transition: opacity .5s ease-in-out; }
.btn-back-to-top img            { transform: rotate(-90deg); }
body.scrolling .btn-back-to-top { opacity: 1; }

/* Klassenbeheer */
.pe--klassenbeheer table th            { background-color: var(--support-color2);  }
.pe--klassenbeheer table td            { vertical-align: middle;  }

.pe--klassenbeheer .card:hover         { box-shadow: 0 4px 15px rgb(153 153 153 / 30%); }
.pe--klassenbeheer .card .card-body    { padding: 1rem 1.25rem; }
.pe--klassenbeheer .card .card-footer  { padding: .5rem 1.25rem; }
.pe--klassenbeheer .trash              { display: inline-flex; padding: 0.4rem 0.6rem !important; }
.pe--klassenbeheer .trash img          { width: 12px; }
.pe--docent_klas_details #show_settings:hover img      { transform: rotate(90deg); transition: transform 0.5s ease-in-out; }

.pe--docent_student_antwoorden .print-question  { margin-top: 40px; padding-top: 0px; border-top: 2px solid #2aaecc; }
.pe--docent_student_antwoorden .print-question-section-header { font-size: 0.9rem; font-weight: 600; margin-top: 23px; display: block; }
.pe--docent_student_antwoorden .print-question-answer  { padding: 1rem; background-color: #f3f3f3; }
.pe--docent_student_antwoorden .print-question-answer .fout_beantwoord  { color: #bb4b4b; font-weight: 700; }
.pe--docent_student_antwoorden .print-question-answer .goed_beantwoord  { color: #40ad2a; font-weight: 700; }
.pe--docent_student_antwoorden h2.section-header                    { margin-top: 3rem; }
.pe--docent_student_antwoorden .docent-student-voortgang-questions a:first-child h2.section-header        { margin-top: 0rem; }

/* Producten op homepage */

.prod                   { position: relative; border: 0px solid #e4e4e4; overflow: hidden; padding: 0px; }

.card.card-product-grid { border: 0; border-radius: 0;  background-color: #f3f3f3; cursor: pointer; height: 100%;  }

.card-product-grid .img-wrap {
    border-radius: 0.2rem 0.2rem 0 0;
    height: 240px;
    padding: 20px 10px 10px;
    display: flex;
    justify-content: center;
}

.card-product-grid .info-wrap {
    overflow: hidden;
    padding: 18px 20px;
    text-align: center;
}

.card-product-grid .bottom-wrap {
    padding: 18px;
    border-top: 1px solid #e4e4e4;
}

.card-product-grid:hover {
    background: #FFFFFF;
    box-shadow: 0 4px 15px rgb(153 153 153 / 30%);
    transition: 0.3s;
}

p.title {
    margin-bottom: 0;
}

[class*=card-product] .img-wrap img {
    height: 100%;
    max-width: 100%;
    width: auto;
    display: inline-block;
    -o-object-fit: cover;
    object-fit: cover;
    box-shadow: 0 1px 7px rgb(0 0 0 / 30%);
}

.card.card-product-grid::before            { content: ''; height: 8px; width: 100%; background: var(--secondary-color); background: linear-gradient(90deg,#b8d4d7 40%, #d7e3e4 100%); opacity: 0.5; }
.card.card-product-grid.blauw::before      { content: ''; height: 8px; width: 100%; background: var(--secondary-color); background: linear-gradient(90deg,#284091 40%, #2bc4d8 100%); opacity: 0.5; }
.card.card-product-grid.geel::before       { content: ''; height: 8px; width: 100%; background: var(--secondary-color); background: linear-gradient(90deg,#f88600 40%, #f89d00 100%); opacity: 0.5; }
.card.card-product-grid.groen::before      { content: ''; height: 8px; width: 100%; background: var(--secondary-color); background: linear-gradient(90deg,#025c4e 40%, #b9c100 100%); opacity: 0.5; }
.card.card-product-grid.rood::before       { content: ''; height: 8px; width: 100%; background: var(--secondary-color); background: linear-gradient(90deg,#ce1840 40%, #ec34a6 100%); opacity: 0.5; }



/*------scroll bar---------------------*/

::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
  }
  ::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border: 0px none #ffffff;
    border-radius: 0px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar);
  }
  ::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar);
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
  }
  ::-webkit-scrollbar-track:hover {
    background: transparent;
  }
  ::-webkit-scrollbar-track:active {
    background: transparent;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }

/* --------- dropdowns --------------*/
.dropdown-menu  { padding: 0; }
.dropdown-item  { padding: .5rem 1.0rem; }
.dropdown-item:focus, .dropdown-item:hover, 
.dropdown-item.active, .dropdown-item:active {
    background: var(--support-color2);
    color: var(--primary-color);
    
}
.dropdown-divider { margin: 0 0; }


/*------------ flipcards ---------------- */
.flipcards-container	{ min-height:340px; display: flex; justify-content: center; }
.flip-container {
	width: 100%; max-width:680px; height:325px;
	transform:perspective(1000px);
	-webkit-transform:perspective(1000px);
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
}

.flip-container.hover .back,
.flip-container.hover .back-definitions	{
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
}


.flip-container.hover .front,
.flip-container.hover .front-definitions
 { 
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.flipper {
	transition:0.6s;
	-webkit-transition:0.6s;			
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
	position:relative; cursor:pointer;
}

.front-definitions,
.back-definitions,
.flipper .front,
.flipper .back		{
	position:relative; top:0; left:0; position:absolute; height:285px;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transition:0.6s;
	-webkit-transition:0.6s;
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
}

.flipper .front	{ 
	width:100%; height:320px; padding:20px 20px 20px 20px; 
    background:url('/images/flipcard_background.jpg') center center no-repeat; background-size: cover; 
    color:#fff; font-family: Georgia,Times,Sans-serif; 
    font-size:1.5rem; line-height:2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	z-index:2;
}

.flipper .back {
	width:100%; height:320px; padding:20px 20px 20px 90px; 
    background:url('/images/flipcard_bg.gif') 0 0 no-repeat; background-size: cover; 
    font-size:1.1rem; line-height:1.8vw;
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);

	z-index:1;
}

.front-definitions {
	width:100%; height:320px; padding:20px 20px 20px 90px; 
    background:url('/images/flipcard_bg.gif') 0 0 no-repeat; background-size: cover; 
    font-size:18px; line-height:34px;
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);

	z-index:2;

}

.back-definitions {
	 width:100%; height:320px; padding:20px 20px 20px 20px; 
     background:url('/images/flipcard_background.jpg') center center no-repeat; background-size: cover; 
     color:#fff; font-family: Georgia,Times,Sans-serif; 
     font-size:1.5rem; line-height:2.2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
	 transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	z-index:1;
}

.flipcard-nav       { display:flex; justify-content: center; }

.flip-button		{ position:absolute; bottom:20px; left:225px; height:35px; width:74px; background:url('/images/shared/turn.png') top center no-repeat; cursor:pointer; display:none; }

.flipcards-intro    { width: 100%; max-width: 680px; 
                        margin: 0 auto; height:320px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center; 
                        padding:20px; 
                        background: url('/images/flipcard_background.jpg') center center no-repeat; 
                        background-size: cover; 
                    }
.flipcard-count				{ text-align: center; padding: 10px 0;}



/*------------ ACCOUNT / LOGIN FLOW ----------------*/
/* .header-top-wrapper         { background-color: var(--btn-primary-bg); color: var(--btn-primary-txt); font-weight: 300; padding: 20px 0px; font-size: 2rem; } */
.account-screen .card .card-header          { background-color: #567e82; color: #fff; font-size: 1.5rem; font-weight: 300; margin-bottom: 10px; }
.account-screen .card                       { border: 0; }
/* .form-group                                 { margin-bottom: 2rem; }
.invalid-feedback                           { position: absolute; } */
#activeren-succes                           { position: absolute;
                                              width: 40px;
                                              height: 40px;
                                              background: url(/images/check-succes.svg) center center / 26px no-repeat;
                                              right: 13px;
                                              top: 10px; 
                                            }

/*------------ DOCENTCODE ----------------*/
label                                       { display: inline-block;
                                              margin-bottom: .3rem;
                                              font-size: 0.9rem;
                                              font-weight: 500;
                                            }



/* ----------- Quote -------------*/
.product-page-quote                     { font-size: 1.7rem; font-style: italic; font-weight: 300; padding: 0.5rem 1rem 0.5rem 2rem; border-left: 1px solid var(--secondary-color); color: var(--secondary-color); }


/*------------ QUESTIONS ---------------*/

.pe--artikel img {max-width:100%;}

.image-container			            {  }
    .image-container img	            { width:100%; }

.video-container			            { position:relative; padding:0 0 56.25%; height:0; margin-top: 6px; overflow:hidden; background:#000; }
    .video-container iframe             { position:absolute; top:0; left:0; width:100%; height:100%; }

.question-container			            { position: relative; margin-bottom: 20px; padding: 2rem; background:#f2f2f2; }
.leesopdracht-container		            { background:#f2f2f2; }
    .leesopdracht-container-inner	    { padding: 15px 25px; }
    .question-title 			        { font-weight:bold; }

    .question-options-container		    { border-top: 1px solid #e8e8e8; }
        .question-option				{ padding:7px 10px 5px 37px; border-bottom: 1px solid #e8e8e8; cursor:pointer; }

        .question-option.radio			{ background:#fff url('/images/question-bg-radio_desktop.png') 10px -491px no-repeat; }
        .question-option.radio.checked			{ background-position: 10px 9px; }

        .question-option.checkbox		{ background:#fff url('/images/question-bg-checkbox_desktop.png') 10px -491px no-repeat; }
        .question-option.checkbox.checked		{ background-position: 10px 9px; }

            .question-option-input	    { display:none; }
        
        .question-open-container		{  }
            .question-open-multi		{ margin:0 0 10px; font-style:italic; }
        
        .question-open-container .print-question-answer {font-weight: bold;}

        .question-feedback		        { background:#fff; font-size:13px; box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.30); }
        .question-feedback.correct		{ padding:15px 20px; border-left:15px solid #36ba21; }
        .question-feedback.incorrect	{ padding:15px 20px; border-left:15px solid #fca316; }

        .question-feedback.question-feedback-grid 		{ background:#fff; font-size:13px; box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.30); }
        .question-feedback.question-feedback-grid.correct { padding: 0px; border-left: 0px;  border-top:15px solid #36ba21; }
        .question-feedback.question-feedback-grid .question-feedback-grid-answer		{ padding: 15px 20px; }
        .question-feedback .grid-data-field.user-answer				{ color: #000; background: #e3f5fc; }
        .question-feedback .grid-data-field							{ color: #666; }

        .custom-grid-table                          { font-size: 0.7rem;  }
        .custom-grid-table th,
        .custom-grid-table td                        { border: 1px solid #888; }
        .custom-grid-table th.header-level-1        { vertical-align: bottom; background-color: #1f4e78; color: #FFF; text-align: center;}
        .custom-grid-table th.header-level-2		{ background: #fff; text-align: center; }
        .custom-grid-table input                    { width: 100%; border: 0 !important }

        .grid-data-field							{ width: 10%; background: #b4c6e7; text-align: right; }
        .grid-data-field.studentinput				{ background: #fff; }
        .grid-data-field.studentinput.answered		{ background: #e7f4ff; }





	/* TL@FB: GRID STYLES */
	.grid-parameter-settings-container { width:100%; padding:10px 0; margin:0 0 10px; }
	.grid-update-controls-container { width:100%; padding:10px 0; margin:0 0 10px; }
	table.custom-grid-table ,
	table.custom-grid-table td,
	table.custom-grid-table th { border:1px solid #a0a0a0; }
	table.custom-grid-table input[type=text] { 
		outline-color: transparent;
		outline-style: none;
		text-align: right;
	}
	.grid-container { max-width:800px; margin: 0 auto;}
		.custom-grid-table { width:100%; border-collapse: collapse; background-color: #FFF;}                                                                   
			.header-level-1 { 
				min-height:35px; 
				padding:5px; 
				vertical-align:bottom; 
				/*background-color:rgb(23, 151, 255); */
				background-color: #1f4e78;
				color:#FFF; 
				font-weight:normal;
				font-size: 12px;
				line-height: 14px;
			}
			.header-level-2 { 
				height:auto; 
				padding:5px; 
				vertical-align:bottom; 
				background-color:#FFF; 
				color:#333; 
				font-weight:normal; 
				font-size: 12px;
			}
			.grid-input-field-header-level-1 {
				width:80%;
				color:#FFF; 
				background-color: transparent;
				border:0px solid #ccc;
			}
			.grid-input-field-header-level-2 {
				width:80%;
				background-color: transparent;
				border:0px solid #ccc;
			}
			.grid-data-input-field {
				width:80%;
				background-color: transparent;
				border:0px solid #ccc;
			}
			td.grid-data-field {
				font-size: 12px;
				padding:4px 8px; 
			}





        .question-feedback-title	{ font-weight:bold; }

        .question-button.flipcard		{ display:inline-block; width:20%; padding:10px 2%; }
        .question-button.turn						{ background:#fff url('/images/shared/turn-small.png') center center no-repeat; cursor:pointer; }
        .question-button.turn:hover			{ background:#ebf8e8 url('/images/shared/turn-small.png') center center no-repeat; }

        input[type="button"].question-button	{ width:100%; }

    .question-option.correct-answer-highlight		{ background-color:#e9f9e5; }

    .question-open-modelanswer                      { background-color:#e9f9e5; border: 1px solid #c6dbc2; border-radius: 3px; display: none; }


    .question-upload-buttons	{ height:43px; background:url('/images/shared/bestand_insturen_indicator.png') -355px 32px no-repeat; }
        .question-upload-button		{ float:left; width:25%; margin:0 10px 0 0; padding:5px 0 5px 20px; background:url('/images/shared/bestand_insturen.gif') 0 0 no-repeat; color:#777; font-weight:bold; cursor:pointer; }
        .question-upload-button.selected	{ color:#000; }
        .question-upload-button.bestand		{ background-position:0 8px; }
        .question-upload-button.url				{ background-position:0 -24px; }
        .question-upload-indicator				{ float:right; padding:5px 0; font-size:12px; }
        
    .question-upload-container	{  width:100%; border:#bcbcbc solid 1px; background:#fff; }
        .question-upload-feedback-succes	{ padding:2%; display:none; }
        .question-upload-text							{ width:96%; padding:2%; height:135px; border:0; resize:none; }
        .question-upload-options					{ padding:2%; background:#f7f7f7; }
            .question-upload-button-upload		{ float:left; padding:2px 15px; border:1px solid #bcbcbc; background:#fff; }
            .question-upload-button-label			{ float:left; padding:8px 0 0 1px; color: red; }
            .question-upload-url							{ float:left; height:20px; width:75%; padding:3px 7px; }
            .file_selected                              { margin-left: 10px; }
    
    .question-uploaded-files-container		{  }
        .question-uploaded-file		{ margin:0 0 1px; padding:5px 10px; background:#fff; }
            .question-uploaded-file-filename		{ float:left; width:70%; }
            .question-uploaded-file-datetime		{ float:right; width:30%; text-align:right; }
            
    
    .educaplay iframe				{ max-width: 100%; margin: 10px 0 0; }


    .article-fold                   { position: relative; }
.article-fold::after				{ content: ' '; position: absolute; top: 16px; left: 20px; width: 30px; height: 30px; z-index: 1; background: url(/images/chevron-right-light.svg) center center / 16px 16px no-repeat; cursor: pointer;  transition: transform .3s ease-in-out;}
.article-fold:hover::after			{ transform: rotate(90deg); }

.article-fold.open::after	                { background:none; }
    .article-fold-title							{ padding:20px 0 20px 50px; border-width: 1px; border-style: dashed solid solid; border-color: #c4c4c4 #f2f2f2 #f2f2f2 #f2f2f2; font:bold 16px/24px arial,sans-serif; cursor:pointer; }
    .article-fold-title:hover			{ border:1px solid #c4c4c4; }
    .article-fold-textcontainer			{ padding:20px 30px 30px; display:none; }
        .article-fold-foldback						{ float:right; width:40px; height:40px; background: url('/images/shared/article-fold-open.png') 13px 13px no-repeat; border:1px solid #ddd; cursor:pointer; }
        .article-fold-foldback:hover			{ border:1px solid #c4c4c4; }


.gridvraag-container			{ border-bottom:1px solid #bcbcbc; }
    .gridvraag-row						{ display:flex; border-right:1px solid #bcbcbc; }
        .gridvraag-cell		{ display:inline-block; flex:1; height:32px; vertical-align:middle; border-color:#e2e2e2; border-style:solid; border-width:1px 0 0 1px; background:#fff; font-size:16px; overflow:hidden; }
        .gridvraag-cell.top				{ height:auto; text-align:center; line-height: 26px; text-align: 13px; color: #fff; font-size: 14px; }
            .gridvraag-cell input			{ width:92%; height:87%; padding:2% 4%; border:0; }


.question-mobilewarning-container		{ margin:0 0 15px; padding:10px; font-size:12px; line-height:16px; text-align:center; background:#2065a8; color:#fff; }

.question-feedback-button               { position: absolute; top: 10px; right: 12px; cursor: pointer; }
.question-feedback-button img           { height: 18px; }


.pe--readiant_embed iframe  { width: 100%; height: 600px; border: 1px solid #f2f2f2; }

/*----------- voortgang ---------------*/
.voortgang-chapter .card-body  { text-align: center; padding: 1.5rem 0.5rem; }
.voortgang-text     { padding: 20px 0px; text-align: center; font-size: 0.9rem;}

.pe--voortgang .progress                    { width:100%; height:24px; border-radius: 0; padding: 0 0; }
.pe--voortgang .progress .progress-bar      { height:24px; }
.progress-bar {
    background-color: #ffbc0a;
    color: #000000;
}
.voortgang-chapter input[type="text"] {color: #000000 !important;}


/*------------ boekverwijzing -----------*/
.pe--boek_verwijzing .btn img        { width: 20px; }


/* --------------- extra kleuren ---------------*/
/* ACHTERGRONDKLEUREN */
.bgcolor-red					        { border-top: 9px solid #ee1c25; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(238,28,37,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-red-dark					    { border-top: 9px solid #c1103c; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(193,16,60,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-yellow-dark					{ border-top: 9px solid #ffc800; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(255,200,0,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-yellow-light					{ border-top: 9px solid #ffe000; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(255,224,0,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-blue-dark						{ border-top: 9px solid #3588de; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(53,136,222,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-blue-light						{ border-top: 9px solid #6ebfef; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(110,191,239,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-orange-light					{ border-top: 9px solid #ff9a43; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(255,154,67,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-green-light					{ border-top: 9px solid #8bde77; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(139,222,119,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-green-dark					    { border-top: 9px solid #005447; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(0,84,71,0.4) 0%, rgba(242,242,242,1) 5%); }
.bgcolor-purple-light					{ border-top: 9px solid #c69ed0; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(198,158,208,0.4) 0%, rgba(242,242,242,1) 5%); }


.pe--boek_verwijzing.hoofdvlak.bgcolor-red              { border-top: 9px solid #ee1c25; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(238,28,37,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-red-dark         { border-top: 9px solid #c1103c; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(193,16,60,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-yellow-dark      { border-top: 9px solid #ffc800; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(255,200,0,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-yellow-light     { border-top: 9px solid #ffe000; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(255,224,0,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-blue-dark        { border-top: 9px solid #3588de; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(53,136,222,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-blue-light       { border-top: 9px solid #6ebfef; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(110,191,239,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-orange-light     { border-top: 9px solid #ff9a43; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(255,154,67,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-green-light      { border-top: 9px solid #8bde77; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(139,222,119,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-green-dark       { border-top: 9px solid #005447; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(0,84,71,0.4) 0%, rgba(242,242,242,1) 15%); }
.pe--boek_verwijzing.hoofdvlak.bgcolor-purple-light     { border-top: 9px solid #c69ed0; padding-top: 1.4rem !important; background: linear-gradient(179deg, rgba(198,158,208,0.4) 0%, rgba(242,242,242,1) 15%); }





/* ------------- Berichten box ----------------*/

.pe--account_berichtenbox ul li a .message-title { color:var(--primary-color)}
.pe--account_berichtenbox ul li a:hover       { text-decoration: none !important; }
.pe--account_berichtenbox ul li a:hover .message-title       { color: var(--support-color1); }
li.message-read .message-title                { position: relative; padding-left: 26px; } 
li.message-unread .message-title              { position: relative; padding-left: 26px; font-weight: bold; } 
li.message-unread .message-title::before      { position: absolute; content: ''; top: 1px; left: 0px; width: 20px; height: 20px; z-index: 5; background: url('/images/envelope-light.svg') center / 15px no-repeat; }
li.message-read .message-title::before        { position: absolute; content: ''; top: 1px; left: 0px; width: 20px; height: 20px; z-index: 5; background: url('/images/envelope-open-light.svg') center / 15px no-repeat; }
li .message-body                              { padding: 0.5rem 1rem 1rem 26px; }


/* ------------ Toasts ----------------------- */
.toast-box          { position: absolute; right: 15px; top: 50px; z-index: 100; }
.toast-header       { background: url('/images/comment-alt-smile-regular.svg') 13px 11px / 15px no-repeat; padding-left: 35px; }


/* ------------ Downloads ----------------------- */
.download-item              { margin: 0 0 1px; }
    .download-title             {  }
        .download-logo          { opacity: .3; }
        .download-info          { font-size: 11px; }