/* CSS Reset
   http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ================== Animation ================== */

.project-description .progressbar .progressbar-inner
{

    -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;

}

.cta,
input[type=submit]
{

    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;

}

/* ================== Regular ================== */

html,
body { width:100%; height:100%; }
body { background-color: #F8F8F8; font-family: 'Noto Sans', Arial, sans-serif; font-size:14px; line-height:22px; color:#202020; font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

p { margin-bottom:25px; }
b, strong { font-weight:700; }
a { text-decoration: none; color:inherit; }
i { font-style:italic; }

.content ul { }
.content ul li { margin-left:20px; list-style-type: disc; }

.admin-bar { position:fixed; width:100%; line-height:40px; color:#fff; text-align:center;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    background:#2ecc71;

}
.admin-bar-placeholder { position:relative; height:40px; width:100%; display: block;  }

.container { display:flex; width:100%; min-height:100%;}
.container aside { position:relative; width:250px; flex-grow:0; flex-shrink: 0; min-height:100%; z-index:200; }
.container .content { position:relative; box-sizing:border-box; padding:40px; width:100%; z-index:150; }



@media only screen and (max-width: 900px) {
    .container .content { padding:10px; }
}

/* ================== Login ================== */
.loginContainer { position:relative; background:#fff; width:400px; margin:100px auto auto; border-radius: 2px; box-sizing: border-box; padding:40px; z-index:100;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
}

.loginContainer h1 { font-size:24px; font-weight:700; padding:10px 0px; }

.loginContainer label { display:block; margin-bottom:5px; }

.loginContainer input[type=email],
.loginContainer input[type=password] {
    display:block;
    width:100%;
    border: 1px solid #BDC3C7;
    border-radius:5px;
    padding:5px;
    min-height:45px;
    box-sizing:border-box;
    margin-bottom:20px;
    font-family: 'Noto Sans', sans-serif;
}

.loginContainer input[type=submit] {
    display:block; padding:10px 20px; background: #4A90E2; color:#fff; border-radius:5px; font-weight:700; font-size:12px; margin-right:10px; border:none; cursor:pointer; width:100%; box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif; font-weight:700;
}

.loginContainer input[type=submit]:hover { background: #396FAD; }

/* ================== Menu ================== */


.container aside { box-sizing:border-box;padding-top:0px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    background: #2E3551;
    color:#CCD0E9;
}

.container aside .profile { display:block; background:#36425D; padding:20px 25px; box-sizing: border-box; margin-bottom:10px;}

.container aside .profile h5 { position:relative; font-weight: bold; font-size:1.1em; margin-bottom:5px; }
.container aside .profile h5 span.more { position:absolute; right:0px; cursor:pointer; display:block; width:30px; height: 30px; text-align:center; line-height:30px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.container aside .profile h5 span.more.moreActive { transform: rotate(-180deg); }


.container aside .profile .userinfo {  }

.container aside .profile .usermenu { display:none; padding-top:20px;}
.container aside .profile .usermenu ul {  }
.container aside .profile .usermenu ul li { padding:0px; }
.container aside .profile .usermenu ul li a { padding: 10px 10px; }

.container aside h6 { padding:0px 25px; line-height:40px; color: rgba(255,255,255,0.6); text-transform: uppercase; font-weight: 700; font-size:12px; }
.container aside ul { width:100%; /*margin-bottom:20px;*/ }
.container aside ul li { padding:0px 10px; }
.container aside ul li a { display:block; padding:10px 25px; min-height:40px; color:inherit; box-sizing:border-box; border-radius:4px;}
.container aside ul li.active > a { background-color: #36425D; }
.container aside ul li:hover > a { background-color: #36425D;  color:#fff;}
.container aside ul li a i { display:inline-block; width:25px;}
.container aside ul li.add a { color:#27AE60; }
.container aside ul li.disabled a { cursor:not-allowed; color: rgba(255,255,255,0.5);}

.container aside ul li ul { border-left:1px solid rgba(32,32,32,0.2); margin-left:40px; padding-left:0px; width:calc( 100% - 40px);}
.container aside ul li ul li { }
.container aside ul li ul li a { padding:13px 20px; color: rgba(32,32,32,0.5);}

.container aside hr { border:none; border-bottom: 1px solid rgba(32,32,32,0.2); }
@media only screen and (max-width: 900px) {
    .container aside { display:none; }
}
/* ================== Content ================== */

.container .content { }

.container .content .headerRow { margin:-40px -40px 40px -40px; padding:40px; /*background: rgba(74,144,226,0.2);*/
    background:#fff;
    box-sizing:border-box;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);

}
.container .content .headerRow h1 { font-size:20px; font-weight:700; margin-bottom:20px;}
.container .content hr { display:block; margin:40px 0px; border:none; border-bottom: 1px solid rgba(32,32,32,0.2);  }

.content .row { display: flex; width: calc(100% + 40px); margin-left:-20px; margin-right:-20px; justify-content: space-between; }
.content .row .col { margin:0 20px;}

.content .row .col1-3 { width: calc(100%/3); }
.content .row .col2-3 { width: calc(100%/3 * 2); }
.content .row .col3-3 { width: 100%; }

.content .row .col1-2 { width: calc(100%/2); }
.content .row .col2-2 { width: 100%; }

.content .row article { background:#fff; border-radius:5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    box-sizing:border-box;
    padding:0px 30px 30px;
    margin-bottom:40px;
}

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

    .content .row { flex-direction: column; margin-right:0px; margin-left:0px; width:100%;}

    .content .row .col1-2,
    .content .row .col2-2,
    .content .row .col1-3,
    .content .row .col2-3,
    .content .row .col3-3
    { width:100%; margin:0 0 20px;}
}

/* ================== Article ================== */

article h2 { font-weight:700; color: #4A90E2; display:block; line-height:60px; margin-left:-30px; margin-right:-30px; padding:0px 30px; border-bottom: 1px solid rgba(32,32,32,0.1); margin-bottom:15px; position:relative; }

article h2 .cta-small { position:absolute; right:0px; width:90px; text-align:center; }
article h2 .cta-small:hover { color: #202020; }
article h2 .optionMenuTrigger { cursor:pointer;}
article h2 .optionMenu { position:absolute; display:none; min-width:120px; background:#fff; right:20px; top:55px; border-radius:5px; border:1px solid rgba(32,32,32,0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);

}
article h2 .optionMenu a { display:block; border-bottom: 1px solid rgba(32,32,32,0.1); padding:10px; line-height:22px; font-weight: 400; }
article h2 .optionMenu a i { margin-right:10px; }
article h2 .optionMenu a:last-child { border-bottom:none;}
article h2 .optionMenu a:hover { color:#202020; }


/* ================== Placeholder ================== */
.content .row article.placeholder { background:none; border:2px dashed rgba(32,32,32,0.1); text-align:center; box-shadow:none; color:rgba(32,32,32,0.4); padding-bottom:20px;}
.content .row article.placeholder h2 { border-bottom:none; color:rgba(32,32,32,0.4); margin-bottom:0px; }
.content .row article.placeholder .cta { display:inline-block; border:1px solid rgba(32,32,32,0.4); padding:5px 10px; border-radius:5px; font-size:12px; background:none; color:rgba(32,32,32,0.4);}
.content .row article.placeholder .cta i { margin-right:5px;}
.content .row article.placeholder .cta:hover { border:1px solid rgba(32,32,32,0.7); color: rgba(32,32,32,0.7); }


/* ================== Project ================== */

.project-rij { display:flex; width:100%; position:relative; border-bottom:1px solid rgba(32,32,32,0.1); flex-direction: row; padding:15px 30px; margin-left:-30px; margin-right:-30px; }
.project-rij.break { border-bottom:1px dashed rgba(74,144,226,1); }
.project-rij:hover { background: #f8f8f8; }
.project-rij:first-of-type { margin-top:-15px; }
.project-rij:last-child { margin-bottom:-30px; border-bottom:none;}

.project-rij > div { box-sizing:border-box; }
.project-progress { width:30px; }
.project-description { width:auto; flex-basis:100%;}
.project-description .arrow { position:absolute; right:30px; text-align:right; }

/*.progressbar { margin-top:15px; display:block; width:100%; height:5px; border-radius:5px; background: rgba(74,144,226,0.3); }*/
/*.progressbar .progressbar-inner { display:block; width:0px; height:5px; border-radius:5px; background: rgba(74,144,226,1); }*/

.progressbar { margin-top:15px; display:block; width:100%; height:5px; border-radius:5px; background: rgba(32,32,32,0.1) }
.progressbar .progressbar-inner { display:block; width:0px; height:5px; border-radius:5px; background: rgba(46, 204, 113,1.0); }

.project-rij.toevoegen { display:block; color:#27AE60; font-weight:700; }
.project-rij.toevoegen i { width:30px; }


/* ================== Notes ================== */
.content .row article.notes { display:flex; background: rgba(74,144,226,1); color:#fff; font-weight:700; text-align:center; padding:20px 0px;}
.notes .note { flex: 1;}
/*.notes .note { width: calc(100%/3);  }*/
.notes .note-number { display:block; font-size:70px; line-height:96px; }
.notes .note-description { display:block; font-size: 14px;}


/* ================== Call to Action ================== */

.cta { display:inline-block; padding:10px 20px; background: #4A90E2; color:#fff; border-radius:5px; font-weight:700; font-size:12px; margin-right:10px;}
.cta i { margin-right:15px; }

.cta:hover { background: #396FAD;  }
.cta.red { background:rgba(231, 76, 60, 1.0); }
.cta.red:hover { background:#c0392b; }



/* ================== Form ================== */

.alert { padding:20px; font-size:14px; line-height:26px; margin-bottom:20px; background: rgba(39, 174, 96,0.2); border:1px solid rgba(39, 174, 96,1.0); border-radius:5px;}
.alert.error { background: rgba(231, 76, 60,0.2); border-color:rgba(231, 76, 60, 1.0);}

/*.alert { background:#2ecc71; color:#fff; font-size:14px; font-weight:700;}*/
/*.alert.error { background:#e74c3c; color:#fff; }*/

.alert a { text-decoration: underline; }


form {  }

form label { display:block; margin-bottom:5px; }

form input {  }
form input[type=text],
form input[type=password],
form input[type=tel],
form input[type=search],
form input[type=number],
form input[type=date],
form input[type=email] {
    -webkit-appearance: none;
    border:1px solid #BDC3C7;
    border-radius:5px;
    /*display:block;*/
    display:inline-block;
    margin-bottom:10px;
    padding:10px 5px;
    width:100%;
    max-width:300px;
    box-sizing:border-box;
    font-size:12px;
}

form .select {
    width:100%;
}

form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border:1px solid #BDC3C7;
    border-radius:5px;

    display:block;
    margin-bottom:10px;
    padding:10px 5px;
    width:100%;
    max-width:300px;

    box-sizing:border-box;
    font-size:12px;
    position:relative;
    background: #fff url('../images/select_bg.png') no-repeat right 0px top 50%;
    background-size:37px 50px;
}

/*form .select::after {*/
    /*display:block;*/
    /*position:absolute;*/
    /*right:0px;*/
    /*top:0px;*/
    /*line-height:37px;*/
    /*width:36px;*/
    /*border-left: 1px solid #BDC3C7;*/
    /*content: "\f078";*/
    /*font-family: 'Font Awesome 5 Free';*/
    /*font-weight:900;*/
    /*text-align:center;*/
    /*color:#BDC3C7;*/

/*}*/

form input[type=submit] {
    -webkit-appearance: none;
    display:inline-block; padding:10px 20px; background: #4A90E2; color:#fff; border-radius:5px; font-weight:700; font-size:12px; margin-right:10px; border:none; cursor:pointer; box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif; font-weight:700;
}

form input[type=submit]:hover { background: #396FAD; }

form textarea {
    -webkit-appearance: none;
    border:1px solid #BDC3C7;
    border-radius:5px;
    display:block;
    margin-bottom:10px;
    padding:5px 5px;
    width:100%;
    max-width:300px;
    box-sizing:border-box;
    font-family: 'Noto Sans', sans-serif;
    font-size:12px;
}


form input.error { border:1px solid rgba(231, 76, 60,1.0);}

form .ck.ck-editor { width:400px; }

.competentieRij { display:flex; width:100%; justify-content: space-between; border-bottom: 1px solid rgba(32,32,32,0.2); padding:10px 0px 0px;}
.competentieRij > div { flex: 1 1 100%; margin:0px 10px;}
.competentieRij div:first-child { margin-left:0px;}
.competentieRij div:last-child { margin-right:0px;}

.annuleer { font-size:12px; text-decoration:underline; margin-left:10px; }

.errorText { display:inline-block; color:rgba(231, 76, 60,1.0); margin-left:20px; }


/* ================== Order ================== */


/*#sortable { margin: 0; padding: 0; }*/
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; /*padding-left: 1.5em;*/ font-size: 1em; height: 18px; background: rgba(55, 115, 185, 0.1); cursor:grab;}
#sortable li span { position: absolute; margin-left: -1.3em; }

span { display: inline-block; }

.newline { position: absolute; right: 20px; }

ul.ui-sortable li { list-style-type: none; margin-left:0px; position:relative; }

#sortable li.ui-state-default { border:0px; }
#sortable li.ui-sortable-placeholder {  }
#sortable li.ui-sortable-helper { background:rgba(55, 115, 185, 1.0); cursor: grabbing; border:1px dashed #27AE60; color:#fff;}
#sortable li.ui-sortable-helper .newline { display:none; }

i.statusGroen {
    color: #2ECC71;
}

i.statusOranje {
    color: #f1c40f;
}

i.statusRood {
    color: #E74C3C;
}





/* ================== Footer ================== */
footer { position:fixed; left:50%; transform: translateX(-50%); bottom:20px; opacity: 0.5; z-index:10; font-size:12px;}
footer .wrapper { width:600px; text-align:center; }
footer .wrapper a { font-weight:700; color:inherit; text-decoration: none; }

@media only screen and (max-width: 900px) {
    footer .wrapper { width:100%; }
}