/*
Gebruikte kleuren

oranje #ff6e17      -headers
blauw #0078ff;      -headers
lichtbruin #dec9a3  -border
rood: #db1b36       - headers, validatie

*/


#submenu-layout .page-title {
    text-align: left;
    font-size: 2rem;
}

.visible {
    display: block;
}

.visible-flex {
    display: flex;
}

.hidden {
    display: none;
}

.italic {
    font-style: italic;
}

.flex-item {
    flex: 1 1 auto;
}

/*region Wizard*/

#wizard-menu {
    background-color: #F1E8D8;
}

    #wizard-menu .btn-link {
        text-decoration: none;
        font-size: 1em;
        text-align: left;
        font-family: "Merriweather Sans", "Trebuchet Ms", "Helvetica", "Arial", sans-serif;
    }

        #wizard-menu .btn-link.active-link {
            color: #231f20;
            cursor: initial;
            font-weight: 200;
        }



.navbar.wizard-step {
    border: 1px solid #dec9a3;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}

    .navbar.wizard-step .navbar-brand {
        color: #ff6e17;
    }

ul.step-overview li {
    display: block;
}

    ul.step-overview li:before {
        font-family: 'Font Awesome 5 Free';
        font-size: 12px;
        float: left;
        margin-top: 0;
        margin-left: -17px;
    }

    ul.step-overview li .btn-link {
        text-decoration: none;
        font-size: 1em;
    }

        ul.step-overview li .btn-link.active-link {
            color: #231f20;
            cursor: initial;
            font-weight: 200;
        }

    ul.step-overview li.step-not-required {
        color: Gray;
    }

ul li.step-complete.step-required:before {
    content: "\f058";
    color: green;
}

ul li.step-complete.step-not-required:before,
ul li.step-incomplete.step-not-required:before {
    /*    content: "\e067";
    color: lightgray;*/
}

ul li.step-incomplete.step-required:before {
    content: "\f057";
    color: #db1b36;
}

ul li.step-last:before {
    content: "\f35a" !important;
}



/*end region Wizard*/

/*Picture*/

.preview-image {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

img {
    max-width: 100%;
}

    img.deleted {
        opacity: 0.2;
    }

/* End Picture*/


/*Lists*/

dt {
    /*font-style: italic;*/
}

dd {
    font-weight: 600;
}


table td.indent {
    padding-left: 15px;
}

/*table td.indent:before {
        content: "- "
    }*/



table.option-list {
    font-size: 0.9em;
}

    table.option-list tr td:nth-child(even),
    table.option-list tr td.dd {
        background: #f9f5ee;
        font-weight: 600;
    }

        table.option-list tr td:nth-child(even):not(:empty),
        table.option-list tr td.dd:not(:empty) {
            min-width: 80px;
        }

    table.option-list tr td:nth-child(odd),
    table.option-list tr td.dt {
        /* font-style: italic;*/
    }

/*End Lists*/

/*Progess modal*/

.modal-content {
    background: #f9f5ee;
}

.modal-title {
    color: #0078ff;
}

.progress-message {
    padding-top: 1em;
    padding-bottom: 1em;
}

    .progress-message i {
        margin-right: 0.5em;
        color: #dec9a3;
    }

/*End Progess modal*/

.editor {
    height: 300px;
}

.ck-editor__editable_inline {
    min-height: 250px !important;
}

.not-bold {
    font-weight: normal;
}

.open-folder {
    font-style: italic;
    font-weight: bold;
}


.documentBrowser tbody[data-content] {
    display: block;
    max-height: 300px;
    overflow: auto;
}

.documentBrowser thead, .documentBrowser tbody tr {
    display: table;
    width: 100%;
}

.documentBrowser thead {
    width: calc( 100% - 1em ) /* scrollbar is average 1em/16px width, remove it from thead width */
}

.browser-icon {
    width: 22px;
}

tbody[data-folder] tr {
    cursor: pointer;
}

.documentBrowser .action-column {
    width: 84px;
}

.sortable-highlight {
    background-color: #f2eadb;
    border: 1px dotted #dec9a3;
    /*cursor: move*/
}

    .sortable-highlight.ui-sortable-helper {
        max-height: 30px;
    }

[data-sortable] .handle, [data-sortable] .handle label {
    cursor: move;
}

.multiline {
    white-space: pre-line;
}

.input-suffix {
    position: absolute;
    right: 15px;
    background-color: #fff;
    padding: 0 6px;
    top: 15px;
    text-align: right;
    pointer-events: none;
}

@keyframes spinning {
    from {
        transform: rotate3d(1, 1, 1, 0deg);
    }

    to {
        transform: rotate3d(1.5, 0.3, 1, 360deg);
    }
}



.spinning {
    animation-name: spinning;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


.input-group-text-button {
    cursor: pointer;
}

a.link {
    color: #0078ff;
    text-decoration: none;
    outline: none;
}


.year-own-risk-progress-container {
    /*padding: 20px !important;*/
    font-size: .9em;
}

    .year-own-risk-progress-container .row {
        padding: 10px 0;
    }

    .year-own-risk-progress-container .progress {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 1.5rem;
        overflow: hidden;
        font-size: .75rem;
        background-color: #E9F2E0;
        padding: 0;
        margin: 0;
    }

    .year-own-risk-progress-container .progress-bar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: #fff;
        text-align: center;
        background-color: #007bff;
        transition: width .6s ease;
    }

    .year-own-risk-progress-container .bg-success {
        background-color: #28a745 !important;
    }

    .year-own-risk-progress-container .bg-danger {
        background-color: #dc3545 !important;
    }


div.explanation {
    white-space: pre-wrap;
    font-size: .9em;
    font-style: italic;
    color: darkgrey;
}