span.required {color: #ff0000;}
.error { border-color: #ff0000;}
label.error { color: #ff0000;}
.main-body {min-height: 35rem;}
.top10 { margin-top:10px; }
.top30 { margin-top:30px; }
div.file_input_div {height:27px;width:120px;border-color:#a6a6a6;}
div.file_input_div * {cursor:pointer;}
div.file_input_div:after {
    background: url('/images/icons/folder_magnify.png') no-repeat 10px 4px #f2f2f2; content: "Kies Bestand"; display: block; height: 27px; left: 0; position: relative; text-align: center; top: 0; width: 100%; text-indent:22px;
    webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

a.button_small.icon_only {width:16px;height:22px;line-height:22px;}
i.button_small.icon_only,
a.button_small.icon_only { display:inline-block; margin:0; background-position: center center; padding:4px 0px; background-color:transparent; }

.radioInline label{
    margin-left:0.4rem
}
.hrdiv {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
}

.hrdiv span {
    position: absolute;
    top: -11px;
    background: #fff;
    padding: 0 20px;
    font-weight: bold;
}

.callingcard { display:inline-block; line-height: 22px; }
.callingcard div.icon_address { position:relative; display:inline-block; font-weight:normal; }
.callingcard div.icon_address span { display: none; position: absolute; top: 20px; left: 25px; border: 2px solid #346cb0; background: #F4FCE3; z-index: 2; padding: 5px 10px; text-indent: 0; min-width: 250px; }
.callingcard div.icon_address:hover span, .callingcard div.icon_address.active span { display: block; }


.group_title { position:relative; z-index:1;font-size: 1rem; }
/* .group_title:before { border-top: 1px solid #346cb0; content:""; margin: 0 auto; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; width: 95%; z-index: -1; } */
.group_title span {
    /* color: #346cb0; */
    /* background: #fff; */
    /* padding: 0 15px; */
    /* margin-left: 100px; */
    color: #346cb0;
    /* font-size: 1.5em; */
    border-bottom: 1px solid #346cb0;
    /* width: 100%; */
    display: block;
    padding-right: 3em;
    margin-top: 0.3rem;
}

.title_row {
    border-bottom: 1px solid #000;
    display: block;
    background: #346cb0;
    font-weight: bold;
    color: #FFF;
    text-indent: 15px;
    text-align: left;
}


th.rotate, th.rotate_alt {
    /* Something you can count on */
    height: 150px;
    white-space: nowrap;
}

th.rotate > div {
    transform:
        /* Magic Numbers */
            translate(19px, 74px)
                /* 45 is really 360 - 45 */
            rotate(300deg);
    width: 40px;
    max-width: 40px;
    margin-bottom: 5rem;
}
th.rotate_alt > div {
    transform: /* Magic Numbers */ translate(13px, 64px) /* 45 is really 360 - 45 */ rotate(300deg);
    width: 40px;
    max-width: 40px;
}

th.rotate > div > span, th.rotate_alt > div > span {
    border-bottom: 1px solid #000;
    padding: 5px;
    width: 150px;
    max-width: 150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display: block;
    /* margin-top: 0rem; */
    text-align:left;
    /*box-shadow:1px 1px 2px -1px #333;*/
}

span {}
th.rotate:last-child > div > span, th.rotate_alt:last-child > div > span { border-bottom: 0px solid #000; }


/**********************************************************************************************************************
 * Document Module Styling
 *********************************************************************************************************************/
.own_document { background-color: rgba(210, 255, 247, 0.100); }
.shared_document { background-color: rgba(255, 213, 183, 0.100); }

/**********************************************************************************************************************
 * Module Status Styling
 *********************************************************************************************************************/
.student_modules { width: 65%; max-width: 800px; margin-left: 20px; display: inline-block; }

/* Styling an indeterminate progress bar */

progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
    /* Get rid of the default appearance */
    appearance: none;

    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
    border: none;

    /* Add dimensions */
    width: 100%; height: 20px;

    /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
    color: royalblue;

    position: relative;
    margin: 6px 0 0;
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
    position: relative;

    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;

    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;

    width:5px; height:5px;
    top:7px; right:7px;

    background-color: white;
    border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-color:#33CC66;
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;

    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Dimensions should be similar to the parent progress element. */
    width: 100%; height:20px;
}

.progress-bar span {
    background-color: royalblue;
    border-radius: 3px;

    display: block;
    text-indent: -9999px;
}


/**********************************************************************************************************************
 * Widget Styling
 *********************************************************************************************************************/
a.widget-button, a.widget-button:link, a.widget-button:visited, a.widget-button:active {
    min-width:200px; width: calc(25% - 16px);padding: 8px;display:block;float:left;color: #333;text-decoration: none;
}
a.widget-button > div {
    min-height: 150px;height:150px;border:2px solid #346cb0;background-color:rgba(146,208,80,.6);border-radius: 15px;text-align:center; line-height:150px;font-size:1.5em;
    position:relative;
}

.widget-button > div.red { border-color: #D00; background-color: #FAA; }
.widget-button > div.blue { border-color: #006B8B; background-color: #bef0ff; }
.widget-button > div.purple { border-color: #530053; background-color: #ffb9ff; }
.widget-button > div.green { border-color: #AEC100; background-color: #f9ffc1; }
.widget-button > div.orange { border-color: #F19200; background-color: #ffeccf; }

.widget-button > div > span {
    position:absolute; right: -10px; top:-10px; border:2px solid; border-color:inherit; background-color:white;
    border-radius:30px; width:60px;height:40px; display:block; font-weight:bold;line-height:1.75em;
    -webkit-box-shadow: 7px 7px 21px -5px rgba(0,0,0,0.8);
    -moz-box-shadow: 7px 7px 21px -5px rgba(0,0,0,0.8);
    box-shadow: 7px 7px 21px -5px rgba(0,0,0,0.8);
    box-sizing: border-box;
    transform: translatey(0px);
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
    50% {
        box-shadow: 0 8px 15px 0px rgba(0,0,0,0.2);
        transform: translatey(-5px);
    }
    100% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
        transform: translatey(0px);
    }
}

/**********************************************************************************************************************
 * Colors
 *********************************************************************************************************************/
.cf-green { color: #6BA232; }
.cf-red { color: red; }
.cf-blue { color: #55AAFF; }
.cf-gray { color: #888; }
.cf-black { color: #000; }
.bg-red-faded { background-color: rgba(255,0,0,.1); }

/**********************************************************************************************************************
 * Evaluation form styling
 *********************************************************************************************************************/
div.goal_block { width:100%; /* padding: 5px 20px; */ display:none; }
.print div.goal_block { display:block; table-layout:fixed; }
div.questions { margin-bottom: 25px; }
div.questions .goals { display:block; width: 100%; }
div.questions .additional_info { display:block; line-height: 2em; padding:10px; text-indent:50px; color:#333333; }
div.questions table.goal_table { /* width: calc(100% - 20px); */ table-layout: auto; }
div.questions table.goal_table .type_name{ max-width: 150px; width: 150px; word-wrap: break-spaces; }
div.questions table.goal_table .goal_name{ max-width: 300px; width: 200px; }
div.questions table.goal_table .goal_scale{ width: 180px; }
div.questions table.goal_table tbody tr td { padding: 20px; border:1px solid #EDE; }
div.questions table.goal_table tbody tr td:first-of-type:not(.goal_answer) { background-color:rgba(125,125,125,0.1); }
div.questions table.goal_table tbody tr.ignore-line td { background-color:rgba(125,125,125,0.1); }
div.questions table.goal_table tbody tr.answered td:first-of-type { background-color:rgba(126,255,191,0.25); }
div.questions table.goal_table tbody tr.comment td { padding: 0; }
div.questions table.goal_table tbody tr.comment td textarea.comment_block { bottom: 0; top: 0; left: 0; right: 0; margin: 0; }
div.questions table.goal_table tbody tr td.goal_answer { cursor:pointer; padding:15px; line-height:1.25em; }
div.questions table.goal_table tbody tr td.goal_answer.active { background-color:#7EFFBF; }
div.questions table.goal_table tbody tr td .add_comment,
div.questions table.goal_table tbody tr td .remove_comment { position:absolute; bottom: 0; left: 12px; }
div.progress_bar { position:relative; bottom: 0; left:0; right:0; border-top:2px solid #333; padding: 10px 0px; height: 50px;}
div.progress_bar a.btn {margin-left:5px}
div.progress_bar div.navigation { margin: 2px 10px; }
div.progress_bar div.page_status { margin: 2px 10px; }
div.progress_bar div.page_status span.done,
div.progress_bar div.page_status span.all_done { color:green; }
div.progress_bar div.page_status span.not_done { color:red; }
div.progress_bar div.page_status span.percentage_complete { color:green; margin-right:15px; font-weight:bold; }

/**********************************************************************************************************************
 * Evaluation result styling
 *********************************************************************************************************************/
/*.evaluation_result { width: 90%; margin: 5px auto; }*/
.evaluation_result div.row { width: 100%; text-align:center; display:table; }
.evaluation_result div.row div.cell { display:table-cell; }
.evaluation_result div.row { width: 100%; text-align:center; }
.evaluation_result div.row div.first { float:left; text-align:left; }
.evaluation_result div.row .assignment_column,
.evaluation_result div.row .assignment_column_small { width: 150px; overflow:hidden; display:inline-block; float:right; border-left:1px solid #aaa; }
.evaluation_result div.row .assignment_column_small { width: 90px; }
.evaluation_result div.row div.title.school_mentor_score { background: #EDA96A; /*border-color: #EDA96A;*/ }
.evaluation_result div.row div.school_mentor_score { background: #fff7e2; /*border-color: #EDA96A;*/ }
.evaluation_result div.row div.title.company_mentor_score { background: #a0d16c; /*border-color: #a0d16c;*/ }
.evaluation_result div.row div.company_mentor_score { background: #DBF7BE; /*border-color: #a0d16c;*/ }
.evaluation_result div.row div.title.student_score { background: #6BBBF4; /*border-color: #6BBBF4;*/ }
.evaluation_result div.row div.student_score { background: #eaf5fd; /*border-color: #6BBBF4;*/ }
.evaluation_result div.row div.title.teacher_score { background: #ff8989; /*border-color: #6BBBF4;*/ }
.evaluation_result div.row div.teacher_score { background: #fee1e1; /*border-color: #6BBBF4;*/ }

.evaluation_result div.row:hover,
.evaluation_result div.row:hover div { background-color: #EAEAEA; }

.evaluation_assignment div:first-child,
.evaluation_category div:first-child,
.evaluation_type div:first-child { background: url('/images/icons/collapsed.png') no-repeat 0 center scroll transparent; text-align:left; cursor:pointer; }
.evaluation_assignment.expanded div:first-child,
.evaluation_category.expanded div:first-child,
.evaluation_type.expanded div:first-child { background-image: url('/images/icons/expanded.png'); }
.evaluation_assignment div:first-child { padding-left: 20px; }
.evaluation_category div:first-child { padding-left: 40px; background-position: 20px center; }
.evaluation_type div:first-child { padding-left: 60px; background-position: 40px center; }
.evaluation_goal div:first-child { padding-left: 70px; text-align: left; }
.grand_total,
.student_result { border-top: 2px solid #346cb0; padding-top: 10px; display:block; }
.grand_total span { float:right; }
.other_assignments h2 { background: url('/images/icons/collapsed.png') no-repeat 0 center scroll transparent; text-align:left; cursor:pointer; }
.other_assignments.open h2 { background-image: url('/images/icons/expanded.png'); }

.other_assignments .group_content { display:none; }
.other_assignments.open .group_content { display:block; }

.student_result div.subtext { color:#666666; font-size:10px; font-style: italic; float:left; }
.student_result div.score { font-weight: bold; float:right; margin-right: 60px; }


/**********************************************************************************************************************
 * Evaluation Styling
 *********************************************************************************************************************/
.category_group { border-left: 18px solid #c77405;padding-left:1px;margin-bottom:2px; position:relative; }
.category_group .type_group { border-left: 18px solid #fbd850;padding-left:1px;margin-bottom:2px; position:relative; }
.category_group .type_group .goal_group {border-left: 18px solid #00e0ff;padding-left:1px;margin-bottom:2px;position:relative;min-height: 73px;margin-bottom: 1em;margin-left: 0.2em;}

.column_action { position:absolute; left: -18px; }
.column_action.delete_category,
.column_action.delete_type,
.column_action.delete_goal { top: 25px; }
.column_action.move_up { top: 0; }
.column_action.move_down { top: 50px; }

.category_group .goal_group .attribute_block { min-width: 185px; }
.category_group .goal_group .attribute_block label,
.category_group .goal_group .attribute_block input,
.category_group .goal_group .attribute_block textarea { width: auto; }
.category_group .goal_group { margin-bottom:2px;}
.category_group .goal_group .goal_column,
.category_group .type_goal .goal_column { min-width: 300px; max-width: 300px; margin:0; text-indent: 15px;}
.category_group .goal_group .points_column .attribute_block input { width: 122px; float:right;}
.category_group .goal_group .points_column,
.category_group .type_goal .points_column { min-width: 250px; max-width: 250px; margin:0; text-indent: 15px; }
.category_group .goal_group .points_column label,
.category_group .type_goal .points_column label{ min-width: 80px; max-width: 80px; margin:0; }
.category_group .type_group .question_column,
.category_group .type_goal .question_column { /* min-width: 555px; max-width: 555px; margin:0; */ }
.category_group .goal_group .scenario_column,
.category_group .type_goal .scenario_column { min-width: calc(100% - 550px); max-width: calc(100% - 550px); margin:0; text-indent: 15px; }
.category_group .goal_group .attribute_block .value { width: 100%; }
.category_group .goal_group .attribute_block input,
.category_group .goal_group .attribute_block textarea { margin: 0 3px; width: calc(100% - 28px); }

.category_group .type_goal > div.goal_group a.move_up,
.category_types > div.type_group a.move_up,
td > div.category_group a.move_up { visibility: hidden; }

.category_group .type_goal > div.goal_group ~ div.goal_group a.move_up,
.category_types > div.type_group ~ div.type_group a.move_up,
td > div.category_group ~ div.category_group a.move_up { visibility: visible; }

.category_group .type_goal > div.goal_group:nth-last-child(2) a.move_down,
.category_group > div.type_group:nth-last-child(2) a.move_down,
> div.category_group:nth-last-child(2) a.move_down { visibility: hidden; }

table.evaluation_period_table { width:100%; }
table.evaluation_period_table thead tr th { background-color:#346cb0; }
table.evaluation_period_table thead tr.filters th { line-height:16px; }
table.evaluation_period_table .button_text { color: inherit; }
table.evaluation_period_table tbody tr td { border:1px solid #346cb0; }
table.evaluation_period_table tbody tr:last-of-type { border-right:0 solid inherit; }
table tbody td.center_column, table tbody td.center_column * { float:none; text-align: center; }
table.evaluation_period_table div.assigned_evaluation,
table.evaluation_period_table div.assign_evaluation { display:flex; width: 100%; }
table.evaluation_period_table div.assigned_evaluation { border: 1px solid #346cb0; border-radius: 5px; margin: 2px 10px; padding: 2px 5px 2px 25px; width: auto; background: #FFF; }
table.evaluation_period_table div.assigned_evaluation label,
table.evaluation_period_table div.assigned_evaluation input { width: 80px; }
table.evaluation_period_table div.assigned_evaluation span { display: inline-block; }
table.evaluation_period_table div.assigned_evaluation div.assignment_container { display: block; width:100%; height: 100%; }
table.evaluation_period_table div.assigned_evaluation div.assignment_person { max-width:165px; }

table.scale_options td {padding-top: 10px; padding-bottom:10px; padding-left:10px;}
table.scale_options tbody tr:first-of-type a.move_up,
table.scale_options tbody tr:last-of-type a.move_down { visibility: hidden; }
table.scale_options .scale_name{ /*width: 31rem;*/ }
table.scale_options .scale_score{ /*width: 6rem;*/ }


/**********************************************************************************************************************
 * Stageperiod styling
 *********************************************************************************************************************/
table.stage_period_table {width:100%;}
table.stage_period_table .hide_student,
table.stage_period_table .hide_period,
table.stage_period_table .hide_days,
table.stage_period_table .hide_school_mentor,
table.stage_period_table .hide_company,
table.stage_period_table .hide_company_mentor { display:none; }

table.stage_period_table thead tr th { background-color:#346cb0; }
table.stage_period_table thead tr.filters th { line-height:16px; }
table.stage_period_table thead tr th input { margin-bottom: 0px; width: calc(100% - 22px); }
table.stage_period_table thead tr th select,
table.stage_period_table thead tr th div.select_wrapper { width: 100%; }
table.stage_period_table tbody tr td { padding:2px 5px; border-bottom:1px solid #346cb0; }
table.stage_period_table tbody tr td.student_column { border-right:2px solid #346cb0; }
table.stage_period_table tbody tr td.days_column { text-align: center; }
table.stage_period_table tbody tr.student_row { border-top:2px solid #346cb0; }

table.stage_period_table tbody tr td.company_column span,
table.stage_period_table tbody tr td span.school_mentor,
table.stage_period_table tbody tr td span.company_mentor { display:block; }
table.stage_period_table tbody tr td span.school_mentor a.button_small,
table.stage_period_table tbody tr td span.company_mentor a.button_small { float:right; }

table.stage_period_table tbody tr.locked { position:relative; color:lightgray; }
table.stage_period_table tbody tr.locked:after {
    background:rgba(50,50,50,.2); content:'Bezig met opslaan...'; text-align:center; vertical-align: middle; color:#333333; font-size:28px;
    position:absolute; top:0; left:0; right:0; bottom: 0; padding-top: 18px;
    display: inline-block;
}

div.add_apply { background: url('/images/icons/collapsed.png') no-repeat left top scroll transparent; padding-left: 50px; }
div.add_apply.open { background-image: url('/images/icons/expanded.png'); }
div.add_apply div.details { display:none;  }
div.add_apply.open div.details { display:block; }


/**********************************************************************************************************************
 * Information Catalogue Styling
 *********************************************************************************************************************/
.group_content { display: block; }
.group_content .attribute_block {display: inline-block;min-width: 400px;width: calc(49% - 20px);}
.group_content .attribute_block.small { display: inline-block; min-width: unset; width: 200px; }
.group_content .attribute_block.full_line { display: block; min-width: 100%; }

.group_content .attribute_block input,
.group_content .attribute_block textarea { max-width: 300px; }
.group_content .attribute_block select { max-width: 322px; }
.group_content .attribute_block.small label { width: 100%; text-align:center; }
.group_content .attribute_block.small select { width: 100%; }

.news_block { margin-bottom: 25px; }
.group_content .news_wrapper { margin-left: 100px; }
.group_content .news_wrapper ul { margin-left: 25px; }

.stagedetails { line-height: 1.6em; }
.stagedetails .group_content .attribute_block { width: 48%; float:left; display: block; min-height: 36px;}


/**********************************************************************************************************************
 * Tooltip
 *********************************************************************************************************************/
.tooltipp { position: relative; display:inline-block; float:left; width: 20px; margin: 4px 5px; background: url('/images/icons/help.png') no-repeat center center transparent; height: 20px; }
.tooltipp.no_icon { background-image: none; }
.tooltipp span { display:none; position:absolute; z-index:5; line-height: 17px; width:auto;min-width:450px;top:20px; border:1px solid #346cb0; padding:5px 5px; background:#FAFAFA; color: #5699ec; }
.tooltipp:hover span, .tooltip span:hover { display:block; }

table.mceLayout, textarea.tinyMCE {
    width: 100% !important;
}
.errorMessage{
    color: red;
}

/**********************************************************************************************************************
 * Page Loader
 *********************************************************************************************************************/
html body div.loading_panel {position: fixed;/* width: 160px; */padding: 27px 50px;top:0px;left: 50%;margin-left: -140px;z-index: 2000;border: 2px solid #346cb0;border-top:0px;border-radius: 0 0 15px 15px;background: #ffffff;min-height: 20px;}
html body div.loading_panel img { max-height: 20px; margin: 2px 10px -5px; }
html body div.loading_panel span { color: black; }

/**********************************************************************************************************************
 * Quickstage Search
 *********************************************************************************************************************/
#quickstage_search span.search_cat { position: absolute; left: 14px; top: 12px; font-size: 1.2em; font-weight: bold; }
#quickstage_search div.search_result { z-index: 5; position: absolute; top: 44px; right: 14px;width: 100%;background: #fff; border: 1px solid #000; top: 36px !important; left: 24px !important; overflow-y: auto; max-height: 90vh;     border: 2px white;}
#quickstage_search div.search_result div.row_title { color: #FFF; background: #346cb0; text-indent: 15px; font-weight:bold;    padding: 0.5em; }
#quickstage_search div.search_result div.row { display:table; width: 100%; color: #333; list-style: none inside none;     padding: 0.5em;     margin: 0px; }
#quickstage_search div.search_result div.row span { text-indent: 15px; }
#quickstage_search div.search_result div.row:nth-child(even) { background: rgba(125,125,125,0.2); }
#quickstage_search div.search_result a.icon_only { display:inline-block; width: 16px; vertical-align:middle; }

/**********************************************************************************************************************
 * Icons - On top so position can be easily overwritten
 *********************************************************************************************************************/
.icon_history        { background: url('/images/icons/time.png') no-repeat center center scroll transparent; }
.icon_status         { background: url('/images/icons/chart_line.png') no-repeat center center scroll transparent; }
.icon_mail           { background: url('/images/icons/email.png') no-repeat center center scroll transparent; }
.icon_unread_mail    { background: url('/images/icons/email_unread.png') no-repeat center center scroll transparent; }
.icon_mail_open      { background: url('/images/icons/email_open.png') no-repeat center center scroll transparent; }
.icon_mail_add       { background: url('/images/icons/email_add.png') no-repeat center center scroll transparent; }
.icon_user           { background: url('/images/icons/user.png') no-repeat center center scroll transparent; }
.icon_settings       { background: url('/images/icons/cog.png') no-repeat center center scroll transparent; }
.icon_logout         { background: url('/images/icons/door_out.png') no-repeat center center scroll transparent; }
.icon_arrow_pink     { background: url('/images/icons/arrow_pink.png') no-repeat center center scroll transparent; }
.icon_arrow_orange   { background: url('/images/icons/arrow_orange.png') no-repeat center center scroll transparent; }
.icon_arrow_red      { background: url('/images/icons/arrow_red.png') no-repeat center center scroll transparent; }
.icon_arrow_blue     { background: url('/images/icons/arrow_blue.png') no-repeat center center scroll transparent; }
.icon_arrow_purple   { background: url('/images/icons/arrow_purple.png') no-repeat center center scroll transparent; }
.icon_arrow_yellow   { background: url('/images/icons/arrow_yellow.png') no-repeat center center scroll transparent; }
.icon_arrow_brown    { background: url('/images/icons/arrow_brown.png') no-repeat center center scroll transparent; }
.icon_arrow_black    { background: url('/images/icons/arrow_black.png') no-repeat center center scroll transparent; }
.icon_arrow_up       { background: url("/images/icons/arrow_up.png") no-repeat scroll center center transparent; }
.icon_arrow_down     { background: url("/images/icons/arrow_down.png") no-repeat scroll center center transparent; }
.icon_arrow_left     { background: url("/images/icons/arrow_left.png") no-repeat scroll center center transparent; }
.icon_arrow_right    { background: url("/images/icons/arrow_right.png") no-repeat scroll center center transparent; }
.icon_arrow_move     { background: url("/images/icons/arrow_out.png") no-repeat scroll center center transparent; }
.icon_address        { background: url("/images/icons/vcard.png") no-repeat scroll center center transparent; }
.icon_help           { background: url('/images/icons/help.png') no-repeat center center scroll transparent; }
.icon_create         {background: url('/images/icons/add.png') no-repeat center center scroll transparent;color: #28a745;font-weight: bold;}
.icon_create_folder  { background: url('/images/icons/folder_add.png') no-repeat center center scroll transparent; }
.icon_edit           { background: url('/images/icons/pencil.png') no-repeat center center scroll transparent; }
.icon_copy           { background: url('/images/icons/table_multiple.png') no-repeat center center scroll transparent; }
.icon_save           { background: url('/images/icons/disk.png') no-repeat center center scroll transparent; }
.icon_cancel         { background: url('/images/icons/cross.png') no-repeat center center scroll transparent; }
.icon_delete         { background: url('/images/icons/bin.png') no-repeat center center scroll transparent; }
.icon_recycle        { background: url('/images/icons/restore.png') no-repeat center center scroll transparent; }
.icon_revert         { background: url('/images/icons/arrow_undo.png') no-repeat center center scroll transparent; }
.icon_excel          { background: url('/images/icons/page_white_excel.png') no-repeat center center scroll transparent; }
.icon_word           { background: url('/images/icons/page_white_word.png') no-repeat center center scroll transparent; }
.icon_pdf            { background: url('/images/icons/pdf.png') no-repeat center center scroll transparent; }
.icon_image          { background: url('/images/icons/image.png') no-repeat center center scroll transparent; }
.icon_activate       { background: url('/images/icons/lightbulb.png') no-repeat center center scroll transparent; }
.icon_deactivate     { background: url('/images/icons/lightbulb_off.png') no-repeat center center scroll transparent; }
.icon_auth           { background: url('/images/icons/key.png') no-repeat center center scroll transparent; }
.icon_book           { background: url('/images/icons/book.png') no-repeat center center scroll transparent; }
.icon_open_book      { background: url('/images/icons/book_open.png') no-repeat center center scroll transparent; }
.icon_book_add       { background: url('/images/icons/book_add.png') no-repeat center center scroll transparent; }
.icon_view           { background: url('/images/icons/view.png') no-repeat center center scroll transparent; }
.icon_youtube        { background: url('/images/icons/youtube.png') no-repeat center center scroll transparent; }
.icon_move           { background: url('/images/icons/group_go.png') no-repeat center center scroll transparent; }
.icon_users          { background: url('/images/icons/group.png') no-repeat center center scroll transparent; }
.icon_import         { background: url('/images/icons/script_add.png') no-repeat center center scroll transparent; }
.icon_accept         { background: url('/images/icons/tick.png') no-repeat center center scroll transparent; }
.icon_emulate        { background: url('/images/icons/computer.png') no-repeat center center scroll transparent; }
.icon_deleted        { background: url('/images/icons/folder_delete.png') no-repeat center center scroll transparent; }
.icon_folder         { background: url('/images/icons/folder_magnify.png') no-repeat center center scroll transparent; }
.icon_itemlist       { background: url('/images/icons/folder_table.png') no-repeat center center scroll transparent; }
.icon_calendar       { background: url('/images/icons/calendar.png') no-repeat center center scroll transparent; }
.icon_comment        { background: url('/images/icons/comment.png') no-repeat center center scroll transparent; }
.icon_no_comment     { background: url('/images/icons/no_comment.png') no-repeat center center scroll transparent; }
.icon_create_comment { background: url('/images/icons/comment_add.png') no-repeat center center scroll transparent; }
.icon_delete_comment { background: url('/images/icons/comment_delete.png') no-repeat center center scroll transparent; }
.icon_generate_doc   { background: url('/images/icons/page_white_gear.png') no-repeat center center scroll transparent; }
.icon_export         { background: url('/images/icons/script_go.png') no-repeat center center scroll transparent; }
.icon_flag_red       { background: url('/images/icons/flag_red.png') no-repeat center center scroll transparent; }
.icon_flag_blue      { background: url('/images/icons/flag_blue.png') no-repeat center center scroll transparent; }
.icon_flag_green     { background: url('/images/icons/flag_green.png') no-repeat center center scroll transparent; }
.icon_loading        { background: url('/images/icons/ajax_loader_green.gif') no-repeat center center scroll transparent; background-size: 20px 20px; }
.icon_unknown        { background: url('/images/icons/page_white_text.png') no-repeat center center scroll transparent; }
.icon_share          { background: url('/images/icons/share_this.png') no-repeat center center scroll transparent; }
.icon_layout         { background: url('/images/icons/layout_content.png') no-repeat center center scroll transparent; }
.icon_ticket         { background: url('/images/icons/tag_blue_add.png') no-repeat center center scroll transparent; }
.icon_mark_up        { background: url('/images/icons/star.png') no-repeat center center scroll transparent; }
.icon_mark_down      { background: url('/images/icons/no_star.png') no-repeat center center scroll transparent; }
.icon_activity       { background: url('/images/icons/bell.png') no-repeat center center scroll transparent; }
.icon_report_act     { background: url('/images/icons/bell_add.png') no-repeat center center scroll transparent; }
.icon_visit          { background: url('/images/report_user.png') no-repeat center center scroll transparent; }
.icon_report         { background: url('/images/icons/report.png') no-repeat center center scroll transparent; }
.icon_evaluation_add { background: url('/images/icons/table_add.png') no-repeat center center scroll transparent; }
.icon_evaluation     { background: url('/images/icons/table.png') no-repeat center center scroll transparent; }
.icon_attachment     { background: url('/images/icons/attach.png') no-repeat center center scroll transparent; }
.icon_company        { background: url('/images/icons/building.png') no-repeat center center scroll transparent; }
.icon_company_edit   { background: url('/images/icons/building_edit.png') no-repeat center center scroll transparent; }
.icon_expand         { background: url('/images/icons/expanded.png') no-repeat center center scroll transparent; }
.icon_collapse       { background: url('/images/icons/collapsed.png') no-repeat center center scroll transparent; }
.icon_bar_progress   { background: url('/images/icons/textfield_rename.png') no-repeat center center scroll transparent; }


/**********************************************************************************************************************
 * Icon Styling
 *********************************************************************************************************************/
.text_icon { padding-left: 20px; background-position: center left; }
i.icon { display:inline-block; height:16px; min-width: 16px; padding:0; vertical-align: middle; }

/**********************************************************************************************************************
 * Class Definitions
 *********************************************************************************************************************/
.vertical_navigation li { float:left; display:block; height:100%; }
.icon_only li,.icon_only li a { text-indent: 500px; overflow:hidden; width:25px; height:25px; }
.left_float { float: left !important; }
.right_float { float: right !important; }
.float_none { float: unset; }
.icon_only { text-indent:-5000px; overflow:hidden; min-width:18px; line-height:20px; margin:2px; text-align: left; }
.block_content { display:block; width: auto;}
.clipped { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pointer { cursor:pointer; }
.hidden { display:none !important; }
.centered { text-align: center; }
.invisible { visibility: hidden; }
.column50 { width: 50px; display:inline-block; }
.column100 { width: 100px; display:inline-block; }
.column150 { width: 150px; display:inline-block; }
.column250 { width: 250px; display:inline-block; }
.column300 { width: 300px; display:inline-block; }
.column450 { width: 450px; display:inline-block; }
ul.added_attachments li { margin-left: 10px; }
.unmarked-list-item { list-style:none inside none; }
.qq-uploader .upload-button { line-height: 22px; }
.qq-uploader .upload-button input { height: 100%; }
div.dragClone { border: 2px solid #55AAFF; color: #333; padding: 4px; font-weight: bold; font-size: 12px; white-space: nowrap; background: #C0D6ED; z-index: 1006;
}
/*.disabled { font-style: italic; color:#666666; cursor:not-allowed; background-color: rgba(0,0,0,0.15); }*/
table tbody tr.unread td { font-weight: bold; }

.quote-box {
    margin: 10px 2px;
    width: calc(100% - 34px);
    border: 2px solid #333;
    background: #EFEFEF;
    box-shadow: 5px 5px 5px #888;
    position:relative;
}

.quote-box .title { border-bottom:1px solid #333; font-weight: bold; padding-left: 15px; background: #6BA232; color: #FFF; }
.quote-box .body { padding: 15px; }
.quote-box .body div.content { line-height: 22px; }
.quote-box .body div.content a { float: left; margin-right: 15px; }
.quote-box .body ul { padding-left: 15px; }

.quote-box .footer { font-size:0.8em; font-style: italic; color:#333; bottom:0; border-top:1px solid #333; padding-left: 15px; }

.errorMessage { color: red; font-style: italic; }

/**********************************************************************************************************************
 * dialog panel
 *********************************************************************************************************************/
div.dialog_wrapper { display:none; position:fixed; top: 0; left: 0; bottom: 0; right:0; z-index:1050;background:rgba(50,50,50,0.7); }
div.dialog_wrapper.active { display:block; }
div.dialog_wrapper div.dialog { position:absolute; top:50%; left: 50%; margin: -225px -450px; height: 450px; width: 900px; background:#ffffff; overflow:hidden; overflow-y:auto; }
div.dialog_wrapper div.dialog.medium { position:absolute; top:50%; left: 50%; margin: -125px -225px; height: 250px; width: 450px; background:#ffffff; overflow:hidden; overflow-y:auto; }
div.dialog_wrapper div.dialog .dialog_title{top: 5px;left: 0;right: 0;font-size: 1.2em;padding: 15px;}
div.dialog_wrapper div.dialog .dialog_title span { margin-left: 25px; }
div.dialog_wrapper div.dialog div.dialog_body {padding: 10px 25px;}
div.dialog_wrapper div.dialog div.dialog_body label { width:100px; }
div.dialog_wrapper div.dialog div.dialog_footer {bottom: 5px;left: 0;right: 0;position: absolute;text-align: center;margin-left: 50px;}in_wrapper div.dialog_wrapper div.dialog div.dialog_footer { bottom: 0; left: 0; right: 0; position: absolute; text-align: center; margin-left: 50px; }

/**********************************************************************************************************************
 * Education Flow
 *********************************************************************************************************************/
.module_flow { padding: 5px; display: inline-flex; }
.module_flow > div { display: inline-block; margin: 5px; flex: 1; position: relative; min-width: unset; }
.module_flow > div > div { margin: 5px; }
.module_flow .education_name { position: absolute; top: 50%; left: 50px; font-size: 1.5em; margin-top: -1em; }
.module_flow > .rotate90 {  margin-left:30px; min-width: calc(100% - 110px); }
.arrow_box {
    position: relative;
    border: 4px solid;
}
.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #ffffff;
    border-width: 30px;
    margin-top: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: inherit;
    border-width: 36px;
    margin-top: -36px;
}
.boxed { display: flex; }
.boxed > div {
    float: left;
    margin: 5px 25px 5px 5px;
}
.boxed > div:last-child {
    float: right;
}
.bordered { border: 4px solid; }
.module_block {
    width: 250px;
    max-width: 250px;
    margin: 5px;
}
.module_report th { text-align: left; }
.module_report td { border: 1px solid #ccc; /*min-width: 50px;*/ }
.module_report td.completed { background-color: #00AA00; }


/**********************************************************************************************************************
* Activity Styling
*********************************************************************************************************************/
.activity_block,
.competence_block{border-left: 20px solid #333;background: rgba(100,100,100,0.08);padding:5px 0 0 5px;margin-top:5px;position:relative;min-height: 71px;}
.activity_block .delete_activity,
.competence_block .delete_competence { position:absolute; left: -19px; top:3px; }
.activity_block .move_activity,
.competence_block .move_competence { position:absolute; left: -19px; top:25px; width:18px; height: 18px; }
.activity_block .move_up,
.competence_list .competence_block .move_up,
.children .competence_block .move_up { position:absolute; left: -19px; top:23px; width:18px; height: 18px; }
.activity_block .move_down,
.competence_list .competence_block .move_down,
.children .competence_block .move_down { position:absolute; left: -19px; top:46px; width:18px; height: 18px; }
.activity_block input[type='text'],
.competence_block input[type='text'] { width: 100%; }
.activity_block a.mark_up { margin-left: 5px; }

.activity_block .new_child,
.competence_block .new_child { font-size:0.8em; color:#4C4C4C; padding:2px;margin:2px; }
.activity_report { margin-bottom: 5px; }
ul.report_stats { list-style:none inside none; }
ul.report_stats li { display:block; }
ul.report_stats li span:first-of-type { width: 200px; display:inline-block; }
.activity_container .activity_row.contains_new td { background-color: rgb(52 108 176 / 50%); /*font-weight:bold;*/ }
.activity_container .icon { margin-bottom:-3px; }
.activity_block label, .competence_block label {text-align: left; text-indent: 5px; margin-right: 5px; }

.activity_block input[type='text'] {width: 300px;}
.competence_block input[type='text'] { width: 500px;}
@media (min-width:1367px) {
    .activity_block input[type='text'] {width: 550px;}
    .activity_block label, .competence_block label {text-align: left; text-indent: 5px; margin-right: 10px; }
}

/**********************************************************************************************************************
 * Move To Class
 *********************************************************************************************************************/
#move_to_class_selector{
    background: none repeat scroll 0 0 #EFEFEF; border: 1px solid #86AB3A; color: #9ABE41; font-size: 12px; left: 50%;
    margin-left: -250px; padding: 15px; position: absolute; top: 150px; width: 500px; z-index: 1000;
}
#move_to_class_selector h1{ margin:-15px -15px 10px -15px; background:#86AB3A; color:white; padding:5px; }
#move_to_class_selector div{ display: block; margin: 5px auto; }

@media (min-width: 768px) {/* starting from sm */

    .text-right-except-sm { text-align: right !important;}

}

.dropdown-arrow.search-dd {
    top: 46px;
    /* color: green; */
    /* background-color: green; */
    /* border-color: green; */
}

div.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable{
    position: fixed !important;
    bottom: 0px;
    background-color: #346cb0;
    padding: 1em;
    color: white;
    border-radius: 1em 1em 0em 0em;
    max-height: 5em;
    top: initial !important;
    text-align: center;
}

div.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable button{
    position: absolute;
    right: 0em;
    top: 0em;
    border-radius: 0em 1em 0em 0em;
}


p.close-agenda {
    position: relative;
    top: 6px;
}

span.category_title {
    padding-left: 0em;
}

span.type_title {
    margin-left: 2em;
}

span.goal_title {
    margin-left: 4em;
}

div#popup_overlay {
    opacity: 0.7 !important
}

div.activity_div table tbody tr { border-bottom:1px solid #346cb0; }
div.activity_div table tbody tr:nth-child(odd) td, table tbody tr.odd td{background-color: #346cb014;}
div.activity_div table tr td a { font-weight: inherit; color: inherit; text-decoration: none; display:inline-block; margin:0 2px;}

.grid-view .filters_search input
{
    width: 100%;
}

.wrapper .inactive { text-decoration: line-through !important; }

/**********************************************************************************************************************
 * Tooltip
 *********************************************************************************************************************/
.tooltip { position: relative; display:inline-block; float:left; width: 20px; margin: 4px 5px; background: url('/images/icons/help.png') no-repeat center center transparent; height: 20px; }
.tooltip.no_icon { background-image: none; }
.tooltip span { display:none; position:absolute; z-index:5; line-height: 17px; width: 400px;top:20px; border:1px solid #356db1; padding:5px 5px; background:#FAFAFA; color: #356db1; }
.tooltip:hover span, .tooltip span:hover { display:block; }

/* Datatables */
/*
table.dt-responsive {
    font-size: 0.8rem !important;
}*/

.scale_selector option[disabled] {
    color: #999;
    background-color: #f5f5f5;
}

/* calendar */
.add_holiday.tooltip span,
.add_holiday_class.tooltip span {
    position: static !important;
    z-index: auto !important;
    line-height: inherit !important;
    width: auto !important;
    top: auto !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
}