html, body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    background: #e0e0e0;
}

table tr td {
    font-size: 13px;
}

header {
    position: relative;
    float: left;
    width: 100%;
    height: 150px;
    background: #ffffff;
}

.box {
    position: relative;
    float: left;
}

.box form, .boxWhite, .boxWhite2 {
    margin-top: 20px;
    padding: 30px;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
}

.boxWhite2 {
    float: left;
}

.boxWhite3 form {
    margin: 0 !important;
    padding: 10px 0 !important;
}

h1 {
    margin-bottom: 10px;
    font-size: 22px;
    color: #0c4950;
}

h2 {
    margin-bottom: -20px;
    font-size: 15px;
    color: #0c4950;
}

input[type="text"], input[type="password"], input[type="email"], select, textarea, input[type="date"], input[type="file"], input[type="time"] {
    padding: 5px;
    margin-bottom: 10px;
    width: 100%;
    color: #0c4950;
    border-radius: 3px;
    border: 1px solid #d5e8ea;
    background: #f3f8f9;
}

input::placeholder {
    color: #b7d1d4;
}

input[type="checkbox"] {
    margin-left: 5px;
    margin-right: 5px;
}

input[type="submit"], a.button {
    padding: 5px;
    margin-bottom: 0;
    width: 100%;
    color: #ffffff;
    border-radius: 3px;
    border: 1px solid #74b729;
    background: #74b729;
    transition: 0.3s;
}

input[type="submit"]:hover, a.button:hover {
    color: #ffffff;
    border-radius: 3px;
    border: 1px solid #015b25;
    background: #015b25;
}

img.logoLogin {
    display: block;
    margin: 0 auto 0 auto;
}

#menu {
    position: relative;
    float: left;
    padding-top: 55px;
    height: 100%;
}

label {
    font-size: 11px;
    text-align: left !important;
}

.export label {
    font-size: 14px;
    font-weight: normal;
}

.formGroup, .form-group {
    margin: 0 !important;
    padding: 0 !important;        
}

.form-group {
    clear: both; 
}

.form-group input[type="submit"] {
    margin-top: 10px !important;
}

#content table {
    margin-top: 30px;
    padding: 0;
    border-collapse: collapse;
}

#content table th {
    color: #0c4950;
    font-weight: 500;
    border-bottom: 1px solid #d5e8ea;
    background: #f3f8f9;
}

#content table tr {
    margin-top: 20px;
    padding: 30px;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
}

#content table td {
    vertical-align: middle;
}

#content table form {
    margin-bottom: 0 !important;
}

.menuItem {
    float: right;
    margin: 0 30px 0 0;
    padding: 10px 20px;
    font-size: 16px;
    color: #ffffff;
    text-align: left;
    border-radius: 10px;
    background: #3d62ad;
}

.menuItem a {
    color: #ffffff;
}

.menuItem:hover {
    background: #74b729;
}

.menuItem:hover a {
    text-decoration: none;
    color: #ffffff;
}

.menuItem img {
    margin-right: 10px;
}

.menuItem:hover img {
}

.progressItem {
    margin-top: 20px;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
}

.progressItem img {
    margin-right: 5px;
    margin-left: -15px;
}

.progressItem .date {
    font-size: 11px;
}

.progressItem .user {
    padding-top: 5px;
    font-size: 11px;
    text-align: right;
}

.progressItem .comments {
    clear: both;
    padding-top: 10px;
    padding-left: 40px;
}

.reply {
    margin-left: 50px;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    background: #ededed;
}

.no-padding {
    padding-left: 15px !important;
}

.hidden {
    display: none;
}

.addButton {
    height: 20px;
}

.addButton img {
    float: right;
}

.headerLogo {
    padding: 20px;
}

.headerBar {
    margin: 0;
    padding: 10px;
    height: 80px;
    color: #ffffff;
    text-align: right;
    background: #f5be5a;
}

.headerBar img {
    margin-left: 10px;
}

.creationUser {
    padding-top: 10px;
    font-size: 11px;
    background: #c0c0c0;
}

#submenu {
    position: relative;
    float: left;
    width: 100%;
    padding: 0 0 0 20px;
}

#submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#submenu ul li {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    padding: 10px 20px;
    width: auto;
    border-radius: 10px;
    background: #3d62ad;
}

#submenu ul li a {
    color: #ffffff;
}

#submenu ul li:hover {
    background: #74b729;
}

#submenu ul li a:hover {
    text-decoration: none;
}

td.small {
    width: 150px;
}

tr.red td {
    color: #d82222;
}

tr.grey td {
    color: #c4c4c4;
}

.dashboard {
    float: left;
    padding: 0 20px 20px 20px;
    background: #f7fcfd;
}

.dashboard .boxWhite, .dashboard .boxWhite2 {
    padding: 10px;
}

.dashboard .boxWhite h2, .boxWhite2 h2 {
    margin: 0 0 10px 0;
    padding: 0;
}

.task .company, .task .due_date {
    font-size: 11px;
}

.task {
    padding: 5px;
    margin-bottom: 10px;
    background: #ebebeb;
}

.task:hover {
    color: #ffffff;
    background: #0c4950;
}

.taskRed {
    color: #d82222;
    background: #fbe0e0;
}

.taskRed:hover {
    color: #ffffff;
    background: #d82222;
}   

.boxWhite2 .box {
    float: left;
    padding: 10px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    line-height: 30px;
    background: #fbf5ea;
}

.boxWhite2 img {
    margin-bottom: 5px;
}

.textRight {
    text-align: right;
}

.boxWhite table {
    margin-top: 0px !important;
    width: 100%;
}

.boxWhite table tr {
    border: 0 !important;
}

.boxWhite table tr td {
    padding-bottom: 10px;
}

.filterSubmit {
    margin-top: 19px;
}

#breadcrumb {
    height: 30px;
    background: #74b729;
}

.btn-default {
    color: #ffffff;
    background: #3d62ad;
}

.btn-default:hover {
    color: #ffffff;
    background: #005c25;
}

form.small {
    padding: 0;
    width: 200px;
    border: 0;
}

.question {
    position: relative;
    float: left;
    padding: 10px 0 5px 10px;
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid #000000;
    background: #ffffff;
}

.box form table tr {
    border: 0 !important;
}

.box form table tr td {
    padding-right: 20px !important;
}

table#overview {
    width: 100%;
}

table#overview tr.title {    
    font-weight: bold;
    color: #ffffff;
    background: #74b729;
}

table#overview tr.title td {
    padding: 10px 10px;
}

table#overview tr td {
    padding: 10px 10px;  
}

table#overview tr td form {
    margin: 0;
    padding: 0;
    border: 0;
}

.question {
position: relative;
clear: both;
margin: 0 10px 5px 0;
padding: 5px 0 0 10px;
width: 720px;
height: 22px;
font-size: 14px;
text-align: left;
-moz-border-radius: 10px;
border-radius: 10px;
background: #f2f6d9;
}

.question:hover {
background: #74b729;
}      

.question:hover a {
color: #ffffff;
}

.question_report {
position: relative;
float: left;
margin: 0 10px 5px 0;
padding: 5px 0 0 10px;
width: 100%;
font-size: 14px;
text-align: left;
-moz-border-radius: 10px;
border-radius: 10px;
background: #f2f6d9;
}

.question_report:hover {
background: #74b729;
}      

.question_report:hover a {
color: #ffffff;
}

.comments {
/*height: 210px;*/
padding-bottom: 10px;
}

.comments textarea {
width: 600px;
}

.question_report .answer {
margin-top: 5px;
}

.question_report .answer_box {
position: relative;
float: left;
width: 180px;
}

.question_report .answer_text {
position: relative;
float: left;
margin-left: 20px;
}

.question_report .answer_pic {
position: absolute;
top: 10px;
right: 10px;
}

.question_report .answer_pic2 {
position: absolute;
top: 90px;
right: 10px;
}

.hidden {
display: none;
}

.report_products {
position: relative;
float: left;
width: 100%;
}

.report_product {
position: relative;
float: left;
width: 100%;
}

.report_product_col {
position: relative;
float: left;
width: 25%;
}

.report_product_col input[type="text"] {
width: 150px;
border: 1px solid #74b729;
background: #fefff9;
}

.tabs {
padding-top: 55px;
}

.tab {
margin-bottom: 10px;
padding: 10px;
width: 100%;
max-width: 100%;
color: #ffffff;
text-align: center;
border-radius: 10px;
background: #74b729;
}

.tab:hover {
background: #3d62ad;
}

.tabLink:hover {
text-decoration: none;
}

.active {
    background: #005a25;
}

th.small, td.small {
    width: 20px !important;
}

td.p20 {
    padding-left: 20px !important;
}

td.p40 {
    padding-left: 40px !important;
}

td.p60 {
    padding-left: 60px !important;
}

td.p80 {
    padding-left: 80px !important;
}

td.p60 {
    padding-left: 60px !important;
}

img.candidate_pic { margin-left: 5px; width: 20px; height: 20px; border-radius: 50%; }
img.candidate_pic_large { float: right; margin-top: 20px; width: 150px; height: 150px; border-radius: 50%; }

@media only screen and (max-width: 767px) {
    header {
        height: auto;
    }
    
    #menu {
        display: block;
        position: relative;
        float: left;
        margin-top: -70px;
        z-index: 100;
        height: auto;
    }
    
    .menuItem {
        float: left;
        margin: 0 30px 10px 0;
        padding: 10px 20px;
        font-size: 14px;
        color: #ffffff;
        text-align: left;
        border-radius: 10px;
        background: #3d62ad;
        width: 100%;
    }
    
    #content {
        margin-top: 10px;
        padding-bottom: 20px;
    }   
}

input.btn-edit {
    background-image: url(../images/btn-edit.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    width: 0px;
}

input.btn-edit:hover {
    background-image: url(../images/btn-edit2.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    border: 0;
    width: 0px;
}

input.btn-delete {
    background-image: url(../images/btn-delete.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    width: 0px;
}

input.btn-delete:hover {
    background-image: url(../images/btn-delete2.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    border: 0;
    width: 0px;
}

input.btn-check {
    background-image: url(../images/btn-check.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    width: 0px;
}

input.btn-check:hover {
    background-image: url(../images/btn-check2.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    border: 0;
    width: 0px;
}

#content table form {
}

.clear {
    clear: both;
    width: 100%;
}

input.hours {
    width: 50px;
}

span.hours {
    font-size: 11px;
}

tr.notify td, tr.notify td a {
    color: #ff0000 !important;
}

div.urgent {
    padding-top: 10px;
    background: #ff0000;
}

td.p40 {
    padding-left: 40px;
}

input[type="submit"].buttonSmall {
    float: right;
    max-width: 200px;
}

img.logoLogin {
    max-height: 140px;
}    

.headerLogo img {
    max-height: 120px;
}

th.center, td.center {
    text-align: center;
}

input.inputSmall {
    margin-left: 10px;
    width: 45px;
    text-align: center;
}

td.w150 {
    width: 150px !important;
}

tr.noBorder2 td {
    border: 0 !important;
}

span.large {
    font-size: 20px;
}

.candidateImage img {
    max-width: 100%;
}

.totalCandidatesConcept {
    display: block;
    padding: 5px;
    font-size: 10px;
    width: 23px;
    height: 23px;
    color: #ffffff;
    border-radius: 50%;
    background: #db350f;
}

.totalCandidatesConcept:hover {
    background: #000000;
}

tr.opgehaald td {
    background: #f1f1f1;
}

.faq-item {
    padding: 15px 50px;
    border-bottom: dashed 3px var(--color-gray);
    cursor: pointer;
}

.faq-item:last-of-type {
    border-bottom: none;
}

.faq-item-question {
    margin-bottom: 5px;
}

.faq-item-answer {
    height: 0;            
    overflow: hidden;
    opacity: 0;
    transition-duration: 0.25s;
}

.faq-item-answer.active {
    opacity: 1;
    background: #fff;
}

.faq-item-datetime {
    float: right;
}

.due {
    color: #a12323;    
}

.actions-overview td {
    vertical-align: top !important;
}

@media only screen and (max-width: 767px) {
    header {
        height: auto;
    }
    
    #menu {
        display: block;
        position: relative;
        float: left;
        margin-top: -70px;
        z-index: 100;
        height: auto;
    }
    
    .menuItem {
        float: left;
        margin: 0 30px 10px 0;
        padding: 10px 20px;
        font-size: 14px;
        color: #ffffff;
        text-align: left;
        border-radius: 10px;
        background: #3d62ad;
        width: 100%;
    }
    
    #content {
        margin-top: 10px;
        padding-bottom: 20px;
    }   
}