/*
*   collumns
*/
.download-button-blue {
    background-image: url(../images/icon-download-blue.svg);
    cursor: pointer;
    width: 26px;
    height: 26px;
}

.show-operatinghours-button-blue{
    background-image: url(../images/icon-clock-blue.svg);
    cursor: pointer;
    width: 22px;
    height: 22px;
    top: 5px;
    position: relative;
}

.info-button-blue {
    background-image: url(../images/edit-solid.svg);
    cursor: pointer;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    margin-top: 3px;
}

.nen-columns {
    /*display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -o-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;*/ /* fit height */
    position: unset;
    z-index: 6;
    flex-wrap: wrap;
    /*max-width: 1690px;*/
    min-width: 1520px;
}

.nen-column {
    /*min-height: calc(100vh - 72px);
    max-height: calc(100vh - 72px);*/
    float: none;
    z-index: 6;
    position: relative;
    -webkit-flex: 1 1 0;
    -moz-flex: 1 1 0;
    -o-flex: 1 1 0;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

    .nen-column:nth-child(1) {
        z-index: 6;
    }

    .nen-column:nth-child(2) {
        z-index: 5;
    }

    .nen-column:nth-child(3) {
        z-index: 4;
    }

    .nen-column:nth-child(4) {
        z-index: 3;
    }

    .nen-column:nth-child(5) {
        z-index: 2;
    }

    .nen-column:nth-child(6) {
        z-index: 1;
    }


    .nen-column.nen-column-sidebar.nen-column-small {
        flex: 0 0 188px; /* normaal - 100px */
        width: 188px;
    }

    .nen-column.nen-column-sidebar.nen-column-large {
        flex: 0 0 348px; /* normaal + 60px */
        width: 348px;
    }

    .nen-column.sidebar-home {
        flex: 0 0 auto;
        min-width: 16px;
        width: 16px;
    }

    .nen-column.sidebar-menu {
        flex: 0 0 auto;
        min-width: 44px;
        width: auto;
    }

    .nen-column.nen-column-content {
        max-height: none;
    }



.nen-column-fixer {
    position: relative;
    width: auto;
    height: calc(100% - 72px);
    overflow: hidden;
    margin-right: -16px;
    margin-left: 0px;
    padding-right: 16px;
}

.nen-column-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/*.nen-column-inside {
    width: 98%;
    height: 100%;
    position: relative;
}

    .nen-column-inside > * {
        opacity: 1;
    }*/

/*
*   closing columns
*/


.nen-column-closer {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0px;
    right: 16px;
    z-index: 1;
    cursor: pointer;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../images/icon-arrow-double-black.svg');
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 0.6;
}

    .nen-column-closer:hover {
        opacity: 1;
    }

        .nen-column-closer:hover:before {
            background-color: #4fb8cf;
            opacity: 0.4;
        }

.nen-column.close .nen-column-closer {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.nen-column.close .nen-column-inside > *:not(.header):not(.nen-column-menu-target),
.nen-column.close .nen-column-inside > .header > *:not(.title),
.nen-column.close .nen-column-inside > .nen-column-menu-target > *:not(.header) {
    opacity: 0;
    pointer-events: none;
}

.nen-column.close .nen-column-inside > .header,
.nen-column.close .nen-column-inside > .nen-column-menu-target > .header {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 0px;
    left: 26px;
    top: 16px;
    position: absolute;
    transform-origin: top left;
    pointer-events: none;
    white-space: nowrap;
    word-break: keep-all;
}

.nen-column.close,
.nen-column.close * {
    max-width: 48px !important;
}

    .nen-column.close .nen-column-fixer {
        max-width: 64px !important;
    }



.nen-column-sidebar .sidebar-inner {
    padding: 32px 12px;
    padding-bottom: 0px;
}

.nen-column-menu-target {
    display: none;
}

    .nen-column-menu-target.active {
        display: block;
    }





/*
*   arrow
*/


[class*='box-arrow-right']:before,
[class*='boxarrow-right'] {
    content: '';
    border: 16px solid transparent;
    border-right-width: 0px;
    width: 16px;
    height: 32px;
    right: 0px;
    top: 32px;
    position: absolute;
    border-left-color: #4fb8cf;
}

.box-arrow-right-blue:before {
    border-left-color: #4fb8cf;
}

.box-arrow-right-darkblue:before {
    border-left-color: #48819b;
}

.box-arrow-right-yellow:before {
    border-left-color: #fec10d;
}

.box-arrow-right-orange:before {
    border-left-color: #ef792b;
}

.box-arrow-right-lightgray:before {
    border-left-color: #f4f4f4;
}

.box-arrow-right-gray:before {
    border-left-color: #e6e6e6;
}

.box-arrow-right-darkgray:before {
    border-left-color: #ababab;
}

.box-arrow-right-green:before {
    border-left-color: #33aa44;
}

.box-arrow-right-red:before {
    border-left-color: #f44040;
}

.box-arrow-right-white:before {
    border-left-color: #ffffff;
}





/*
*   scroll-box
*/

.v-scroll-box {
    width: 100%;
    overflow: visible;
    overflow-x: scroll;
    display: block;
}

.h-scroll-box {
    width: 100%;
    overflow: visible;
    overflow-y: scroll;
    display: block;
}

.scroll-box {
    min-width: 100%;
    overflow: visible;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 100vh;
}

.scroll-box {
    direction: rtl;
    margin-left: -12px;
}

    .scroll-box .scroll-box-inner {
        direction: ltr;
        margin-left: 4px;
        padding-bottom: 16px;
    }

    .scroll-box::-webkit-scrollbar {
        width: 0px;
    }

    .scroll-box:hover::-webkit-scrollbar {
        width: 8px;
    }

    .scroll-box::-webkit-scrollbar-track {
        background-color: transparent;
        box-shadow: none;
    }

    .scroll-box::-webkit-scrollbar-thumb {
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        background-clip: content-box;
        background-color: rgba(0,0,0,0.2);
    }

    .scroll-box:hover::-webkit-scrollbar-thumb {
        display: block;
        background-color: rgba(0,0,0,0.8);
    }

    /* correction on visible bar */
    .scroll-box .scroll-bar-reverse {
        position: relative;
        margin-left: 8px;
    }

    .scroll-box:hover .scroll-bar-reverse {
        margin-left: 0px;
    }


    .scroll-box.list {
        margin-right: -28px;
        padding-right: 0px;
    }

        .scroll-box.list .scroll-box-inner {
            margin-left: 0px;
        }

#buildinglistStructure .scroll-box.list {
    margin: 0;
}

.nen-column-fixer .scroll-box.list .scroll-box-inner {
    padding-right: 16px;
}

    .nen-column-fixer .scroll-box.list .scroll-box-inner > * {
        padding-left: 12px;
        padding-right: 12px;
    }

#buildinglistStructure .nen-column-fixer .scroll-box.list .scroll-box-inner > * {
    padding-left: 0;
    padding-right: 0;
}

.nen-column-fixer .scroll-box.list:hover .scroll-box-inner > * {
    padding-left: 12px;
}


.scroll-box.show-bar::-webkit-scrollbar {
    width: 8px;
}

.scroll-box.show-bar::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
}

.scroll-box.show-bar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.8);
}

.scroll-box.show-bar .scroll-bar-reverse {
    margin-left: 0px;
}


/*
.nen-column-fixer .scroll-box::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera 
}
.nen-column-fixer .scroll-box  {
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge 
}
*/





/*
*   buttons
*/

.btn-box {
    position: relative;
    display: block;
    padding: 0px 0px;
    text-align: left;
}

    .btn-box-center,
    .btn-box.align-center {
        text-align: center;
    }

    .btn-box-right,
    .btn-box.align-right {
        text-align: right;
    }

.btn {
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

    .btn + .btn {
        margin-left: 4px;
    }

    .btn.primary,
    .btn.secondary {
        font-size: 15px;
        line-height: 1;
        font-weight: 500;
        letter-spacing: 0.5px;
        position: relative;
        display: inline-block;
        background-color: #4fb8cf;
        border: 1px solid #48819b;
        color: #fff;
        padding: 6px 12px;
        margin: 4px 0px;
        border-radius: 4px;
        overflow: hidden;
        text-decoration: none;
        background-position: 8px 2px !important;
        background-size: 24px 24px !important;
        z-index: 0;
        cursor: pointer;
        min-width: 32px;
        min-height: 20px;
    }

        .btn.primary:not(:empty)[class*='icon-'] {
            padding-left: 40px;
        }

        .btn.primary[class*='icon-'] {
            background-position: 8px 2px !important;
        }

            .btn.primary[class*='icon-']:empty {
                background-position: 3px 2px !important;
            }

    .btn.secondary {
        font-size: 13px;
        padding: 4px 8px;
        background-position: 4px 0px !important;
        background-size: 20px 20px !important;
        background-color: transparent;
        border-color: #48819b;
        color: #48819b;
        min-width: 24px;
        min-height: 23px;
    }

        .btn.secondary:not(:empty)[class*='icon-'] {
            padding-left: 28px;
        }

        .btn.secondary:empty[class*='icon-'] {
            background-position: 1px 0px !important;
        }


    .btn.primary.icon-right:not(:empty)[class*='icon-'] {
        padding-left: 12px;
        padding-right: 40px;
        background-position: right 3px top 2px !important;
    }

    .btn.secondary.icon-right:not(:empty)[class*='icon-'] {
        padding-left: 8px;
        padding-right: 28px;
        background-position: right 4px top 0px !important;
    }

    .btn span {
        position: relative;
        z-index: 3;
    }

.min-width-150 {
    min-width: 150px !important;
}

.app-dbefactuur .btn.primary {
    background-color: #57a9d4;
}




/* 
*   column-menu 
*/

.nen-column-menu {
    padding: 32px 0px;
    min-width: 28px;
}

    .nen-column-menu .item {
        padding: 0;
        margin: 0 8px;
        margin-bottom: 8px;
        margin-left: 8px;
        position: relative;
        cursor: pointer;
        color: #fff;
        border-radius: 6px;
        overflow: hidden;
    }

    .nen-column-menu .item-icon {
        display: inline-block;
        position: relative;
        width: 28px;
        height: 28px;
        margin-left: 0px;
        top: -0px;
        left: 0px;
        border: 2px solid #4fb8cf;
        border-radius: 6px;
        padding: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 2;
    }

.app-dbefactuur .nen-column-menu .item-icon {
    border-color: #57a9d4;
}

.nen-column-menu .item-txt {
    display: inline-block;
    max-width: 0px;
    line-height: 28px;
    margin-left: -4px;
    overflow: hidden;
    padding: 0px;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.nen-column-menu .item.active .item-icon {
    background-color: #4fb8cf;
    border-color: #fff !important;
}

.app-dbefactuur .nen-column-menu .item.active .item-icon {
    background-color: #57a9d4;
}

.nen-column-menu:hover .item-txt {
    max-width: 480px;
    padding: 0px 12px;
}

.nen-column-menu .item:not(.active):hover .item-icon {
    border-color: #fff !important;
}





/*
*   sidebar form-elements
*/

.nen-column input:not([type='checkbox']),
.nen-column .filter-menu-item,
.nen-column textarea,
.nen-column select {
    color: #000;
    background-color: #fff;
    border: 1px solid rgba( 000, 000, 000, 0.10 );
    border-bottom: 1px solid #aaa;
    box-shadow: none;
    display: block;
    width: 100%;
}

.nen-column select,
.nen-column .filter-menu-item,
.nen-column input[type='text'],
.nen-column input[type='password'],
.nen-column input[type='date'],
.nen-column input[type='datetime'],
.nen-column input[type='email'] {
    /*padding: 5px 4px;*/
}

.nen-column input {
    border-radius: 2px;
}

.nen-column textarea {
    padding: 6px;
    border-radius: 2px;
    resize: vertical;
    line-height: 1.4;
    box-shadow: 0 0 6px 0 #ddd inset;
}

.nen-column select {
    font-size: inherit;
    border-radius: 2px;
}

    .nen-column select option {
        padding: 3px;
    }

    /*.nen-column input[type='checkbox']{
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #57a9d4;
    margin: 0 5px 0 15px;
}
.nen-column input[type='checkbox']:checked{ }

.nen-column input[type='checkbox']:checked:after {
    content: '\2713';*/ /* alt char: \2714 */
    /*font-size: 20px;
    line-height: 0px;
    position: absolute;
    width: 18px;
    height: 18px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-left: -6px;
    margin-top: -3px;
    color: inherit;
}*/

    .nen-column input:focus:not(.adminsearch):not(#searchText),
    .nen-column textarea:focus,
    .nen-column select:focus {
        border-color: #48819b;
    }


.nen-column input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    position: relative;
    display: inline-block;
    cursor: pointer;
    background-color: #fff;
    border: none;
    margin: 0px;
    margin-bottom: 0px;
    box-shadow: 0 0 0 1px #57a9d4;
}

    .nen-column input[type='radio']:checked {
    }

    .nen-column input[type='radio']:after {
        content: "";
        border-radius: 100%;
        font-size: 20px;
        line-height: 0px;
        position: absolute;
        width: 8px;
        height: 8px;
        text-align: center;
        top: 50%;
        left: 50%;
        margin-left: -5px;
        margin-top: -5px;
        background-color: transparent;
    }

    .nen-column input[type='radio']:checked:after {
        content: "";
        border-radius: 100%;
        font-size: 20px;
        line-height: 0px;
        position: absolute;
        width: 8px;
        height: 8px;
        text-align: center;
        top: 50%;
        left: 50%;
        margin-left: -4px;
        margin-top: -4px;
        box-shadow: 0 0 0 0px #000;
        background-color: #57a9d4;
    }

.nen-column label {
    line-height: inherit;
}




/*
*   switch 
*
*   <label class="switch large">
        <input type="checkbox" name="checkfield" id="checkfield" value="on" class="checkfield" />
        <span class="slider"></span>
    </label> 
*/


.nen-column .switch { /* the box around the slider */
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.nen-column label.switch {
    padding: 0px;
}


.nen-column .switch input {
    display: none;
}
/* Hide default HTML checkbox */


.nen-column .switch span { /* The slider */
    position: absolute;
    cursor: pointer;
    box-sizing: border-box;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #aaa;
    pointer-events: none;
    border-radius: 20px;
}

    .nen-column .switch span:before {
        position: absolute;
        content: "";
        background-color: #aaa;
        -webkit-transition: .2s;
        transition: .2s;
        border: 2px solid #fff;
        border-radius: 50%;
    }

    .nen-column .switch span:after {
        position: absolute;
        content: "UIT";
        color: #888;
        font-size: 9px;
        letter-spacing: 0.5px;
        right: 4px;
        left: auto;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity: 1;
        -webkit-transition: .2s;
        transition: .2s;
        -webkit-transition-delay: 2s;
        transition-delay: 2s;
    }

.nen-column .switch:hover span:after,
.nen-column .switch:hover input:checked + span:after {
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.nen-column .switch input:checked + span:after,
.nen-column .switch.normal input:checked + span:after {
    content: "AAN";
    color: #fff;
    right: auto;
    letter-spacing: 0px;
    left: 4px;
    display: none;
}


/* normal btn */
.nen-column .switch,
.nen-column .switch.normal {
    width: 40px;
    height: 16px;
    margin-top: -4px;
}

    .nen-column .switch,
    .nen-column .switch * {
        box-sizing: border-box;
    }

        .nen-column .switch span:before,
        .nen-column .switch.normal span:before {
            box-sizing: border-box;
            height: 16px;
            width: 16px;
            left: -2px;
            bottom: -2px;
        }

        .nen-column .switch input:checked + span:before,
        .nen-column .switch.normal input:checked + span:before {
            -webkit-transform: translateX(24px);
            -ms-transform: translateX(24px);
            transform: translateX(24px);
            background-color: #000;
        }

        .nen-column .switch input:checked + span:after,
        .nen-column .switch.normal input:checked + span:after {
            opacity: 1;
        }


        /* large btn */
        .nen-column .switch.large {
            width: 48px;
            height: 24px;
        }

            .nen-column .switch.large span:before {
                height: 24px;
                width: 24px;
            }

            .nen-column .switch.large input:checked + span:before {
                -webkit-transform: translateX(24px);
                -ms-transform: translateX(24px);
                transform: translateX(24px);
            }

        /* small btn */
        .nen-column .switch.small {
            width: 32px;
            height: 12px;
        }

            .nen-column .switch.small span:after {
                display: none;
            }

            .nen-column .switch.small span:before {
                height: 12px;
                width: 12px;
            }

            .nen-column .switch.small input:checked + span:before {
                -webkit-transform: translateX(20px);
                -ms-transform: translateX(20px);
                transform: translateX(20px);
            }


        /* default / blue */
        .nen-column .switch input:checked + span,
        .nen-column .switch.blue input:checked + span,
        .nen-column .switch.on-blue input:checked + span,
        .nen-column .switch.off-blue input:not(:checked) + span {
            background-color: #4fb8cf;
            box-shadow: 0 0 0 1px #48819b;
        }

            .nen-column .switch.off-blue input:not(:checked) + span:before {
                background-color: #48819b;
            }

        .nen-column .switch.off-blue span:after {
            color: #fff;
        }


        /* blue-dot */
        .nen-column .switch.on-blue-dot input:checked + span:before,
        .nen-column .switch.off-blue-dot input:not(:checked) + span:before {
            background-color: #4fb8cf;
        }

        .nen-column .switch.on-blue-dot input:checked + span,
        .nen-column .switch.off-rblue-dot input:not(:checked) + span {
            background-color: #fff;
        }

        .nen-column .switch.on-blue-dot input:checked + span {
            box-shadow: 0 0 0 1px #48819b;
        }


        /* red */
        .nen-column .switch.red input:checked + span,
        .nen-column .switch.on-red input:checked + span,
        .nen-column .switch.off-red input:not(:checked) + span {
            background-color: #ff4040;
            box-shadow: 0 0 0 1px #A64040;
        }

            .nen-column .switch.off-red input:not(:checked) + span:before {
                background-color: #A64040;
            }

        .nen-column .switch.off-red span:after {
            color: #fff;
        }

        /* red-dot */
        .nen-column .switch.on-red-dot input:checked + span:before,
        .nen-column .switch.off-red-dot input:not(:checked) + span:before {
            background-color: #ff4040;
        }

        .nen-column .switch.on-red-dot input:checked + span,
        .nen-column .switch.off-red-dot input:not(:checked) + span {
            background-color: #fff;
        }

        .nen-column .switch.on-red-dot input:checked + span {
            box-shadow: 0 0 0 1px #A64040;
        }

        /* green */
        .nen-column .switch.green input:checked + span,
        .nen-column .switch.on-green input:checked + span,
        .nen-column .switch.off-green input:not(:checked) + span {
            background-color: #3b4;
            box-shadow: 0 0 0 1px #336633;
        }

            .nen-column .switch.off-green input:not(:checked) + span:before {
                background-color: #336633;
            }

        .nen-column .switch.off-green span:after {
            color: #fff;
        }

        /* green-dot */
        .nen-column .switch.on-green-dot input:checked + span:before,
        .nen-column .switch.off-green-dot input:not(:checked) + span:before {
            background-color: #3b4;
        }

        .nen-column .switch.on-green-dot input:checked + span,
        .nen-column .switch.off-green-dot input:not(:checked) + span {
            background-color: #fff;
        }

        .nen-column .switch.on-green-dot input:checked + span {
            box-shadow: 0 0 0 1px #336633;
        }




/* 
*   sidebar-list 
*/

.sidebar .list-item {
    font-size: 14px;
    margin: 0px -12px;
    display: block;
    position: relative;
}

    .sidebar .list-item.active:before { /* right-border of active item */
        content: '';
        border-right: 2px solid #999;
        width: 0px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }

    .sidebar .list-item.active:after { /* arrow of active item */
        content: '';
        border: 16px solid transparent;
        border-right-width: 0px;
        border-left-color: #999;
        width: 16px;
        height: 32px;
        right: -16px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 10;
    }

.sidebar .list-item-inner {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8px;
    position: relative;
}

    .sidebar .list-item-inner * {
        position: relative;
        z-index: 2;
    }

    .sidebar .list-item-inner:before {
        opacity: .1;
    }

    .sidebar .list-item-inner:after {
        content: '';
        border: 1px solid #000;
        border-left: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: .2;
    }

.sidebar .list-item:not(:last-child) .list-item-inner:after {
    border-bottom: none;
}

.sidebar .list-item.active .list-item-inner:before { /* background-color of active item */
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #4fb8cf;
    opacity: .2;
}

.sidebar .list-item.active .list-item-inner:after { /* border of active item */
    border: 1px solid #000;
    border-left: none;
    opacity: .5;
}

.sidebar .list-item.active + .list-item .list-item-inner:after {
    border-top: none;
}

.sidebar .list-item .info {
    max-width: 232px;
    opacity: .7;
}

    .sidebar .list-item .info span:not(:first-child):before {
        content: ' | ';
    }


/*
*   list-item DBeFactuur
*/
.app-dbefactuur .sidebar .list-item.active:before {
    border-color: #57a9d4;
}

.app-dbefactuur .sidebar .list-item.active:after {
    border-left-color: #57a9d4;
}

.app-dbefactuur .sidebar .list-item.active .list-item-inner:after {
    border-color: #57a9d4;
    opacity: 1;
}

.app-dbefactuur .sidebar .list-item.active .list-item-inner:before {
    background-color: #57a9d4;
}


/*
*   sidebar-list > sec-supplier 
*/
.sidebar .list-item-inner {
    padding-left: 20px;
    font-size: inherit !important;
}

.sidebar div:not(.scroll-box-inner) > .list-items .list-item-inner {
    padding-left: 28px;
}

.sec-supplier .sidebar .list-item-inner {
    padding-left: 36px;
    font-size: inherit !important;
}

.sidebar .list-item-inner * {
    font-size: inherit !important;
}

.sidebar .list-item .state {
    content: '';
    width: 22px;
    height: 22px;
    position: absolute;
    top: 10px;
    left: -32px;
    border-radius: 100%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(000,000,000,0.2);
    background-color: #fec10d;
}

.sidebar .list-item.checked .state {
    background-color: transparent;
}

    .sidebar .list-item.checked .state:before {
        content: '';
        width: inherit;
        height: inherit;
        position: absolute;
        top: -5px;
        left: 2px;
        background-image: url(../images/icon-checkmark.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }

.sec-supplier .sidebar .code-box {
    padding-bottom: 4px;
}

.sidebar .list-item .notice-move-in,
.sidebar .list-item .notice-move-out,
.sidebar .list-item .notice-wait-for-customer,
.sidebar .list-item .notice-urgent {
    float: right;
    padding: 0px 3px;
    margin-left: 4px;
    font-size: 11px !important;
    letter-spacing: 1px;
    font-weight: 400;
    color: #fff;
    display: none;
}

.sidebar .list-item .notice-move-in {
    background-color: #4fb8cf;
}

.sidebar .list-item .notice-move-out {
    background-color: #48819b;
}

.sidebar .list-item .notice-wait-for-customer {
    background-color: #fec10d;
}

.sidebar .list-item .notice-urgent {
    background-color: #ef792b;
}

.sidebar .list-item .notice-move-in:before {
    content: 'IN';
}

.sidebar .list-item .notice-move-out:before {
    content: 'UIT';
}

.sidebar .list-item .notice-wait-for-customer:before {
    content: 'WACHT';
}


.sidebar .list-item .notice-urgent:before {
    content: 'S';
}

.sidebar .list-item.move-in .notice-move-in,
.sidebar .list-item.move-out .notice-move-out,
.sidebar .list-item.wait-for-customer .notice-wait-for-customer,
.sidebar .list-item.urgent .notice-urgent {
    display: inline-block;
}

.sidebar .list-item .indicator {
    position: absolute;
    top: 11px;
    left: -18px;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border: 2px solid #fff;
}




/*
*   Sidebar tabs
*/

.sidebar-tabs {
    position: relative;
    border-bottom: 1px solid #4fb8cf;
    margin: 0px -12px;
    padding: 0 12px;
    padding-left: 28px;
    z-index: 3;
    margin-bottom: -1px;
}

.sidebar-tab {
    position: relative;
    display: inline-block;
    border: 1px solid #aaa;
    color: #aaa;
    border-bottom: none;
    padding: 4px 8px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
}

    .sidebar-tab.report-tap {
        bottom: 25px;
    }

    .sidebar-tab.active {
        border-color: #4fb8cf;
        background-color: #4fb8cf;
        color: #fff;
    }

    .sidebar-tab.disabled, .sidebar-tab.disabled:before {
        background: #cccccc;
        color: #ffffff;
        cursor: not-allowed !important;
    }

.sidebar-tab-target {
    display: none;
}

    .sidebar-tab-target.active {
        display: block;
    }

#buildinglistStructure .sidebar-tab-target.active {
    display: inline;
}

.app-dbefactuur .sidebar-tabs {
    border-color: #57a9d4;
}

.app-dbefactuur .sidebar-tab.active {
    border-color: #57a9d4;
    background-color: #57a9d4;
    color: #fff;
}




/*
*   Sidebar elements
*/

.sidebar,
.sidebar input {
    font-size: 13px;
}

    .sidebar .header {
        padding-bottom: 16px;
        font-size: 125%;
    }

        .sidebar .header .title {
            font-weight: 700;
            padding-top: 4px;
        }

        .sidebar .header .ean {
            font-style: italic;
            font-weight: 300;
        }

    .sidebar .section {
        position: relative;
        margin-bottom: 0px;
        padding-left: 16px;
        padding-bottom: 4px;
    }

        .sidebar .section.no-indent {
            padding-left: 0px;
        }

        .sidebar .section.open {
            max-height: 1000px;
        }

        .sidebar .section.close {
            max-height: 34px;
            overflow: hidden;
            padding-bottom: 0px;
            width: 100%;
        }

        .sidebar .section .title {
            position: relative;
            color: #4fb8cf;
            font-size: 100%;
            letter-spacing: 0.5px;
            font-weight: 600;
            margin-left: -16px;
            margin-top: 2px;
            padding: 4px 0px;
            z-index: 1;
        }

        .sidebar .section.no-indent .title {
            margin-left: 0px;
        }

        .sidebar .section:not(.close) .title:first-child {
            border-bottom: 1px solid #4fb8cf;
            margin-bottom: 4px;
        }

        .sidebar .section.close {
            margin-top: 8px;
            margin-bottom: 0px;
            border: 1px solid #4fb8cf;
        }

            .sidebar .section.close .title {
                padding: 6px 2px;
            }

            .sidebar .section.close *:not(:first-child) {
                display: none;
            }

            .sidebar .section.close + .section.close,
            .sidebar .section.close + .section:not(.close) {
                margin-top: 8px;
            }

            .sidebar .section.close .title * {
                z-index: 2;
                position: relative;
                padding-left: 4px;
            }

            .sidebar .section.close:before {
                content: '';
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                position: absolute;
                background-color: #48819b;
                opacity: 0.1;
                z-index: 0;
            }

            .sidebar .section.close:hover:before {
                opacity: 0.2;
            }

        .sidebar .section > .title:first-child {
            cursor: pointer;
        }

        .sidebar .section:after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 6px;
            right: 4px;
            background-repeat: no-repeat;
            background-position: center -1px;
            background-size: 16px;
            background-image: url(../images/icon-arrow-up-blue.svg);
            display: none;
            z-index: 3;
            opacity: 1;
            pointer-events: none;
        }

        .sidebar .section.close:after {
            top: 10px;
            background-position: center -2px;
            background-image: url(../images/icon-arrow-down-blue.svg);
            display: block;
        }

        .sidebar .section:hover:after {
            display: block;
        }

.app-dbefactuur .sidebar .section .title {
    color: #57a9d4;
}

.app-dbefactuur .sidebar .section.close .title {
    border-color: #57a9d4;
}

    .app-dbefactuur .sidebar .section.close .title:before {
        background-color: #57a9d4;
    }



.mod-reports .label,
.info-box .label,
.contract-details .label,
.sidebar .section .label {
    font-style: italic;
    padding-top: 3px;
    padding-bottom: 2px;
    letter-spacing: 0.5px;
    color: #777;
}

.sidebar .section .cell.label {
    padding: 0px;
}



.sidebar .radio-group .cell {
    padding-bottom: 2px;
}

    .sidebar .radio-group .cell:first-child {
        width: 28px;
    }

.sidebar .switch-group {
    margin-top: 8px;
}

    .sidebar .switch-group .cell {
        padding-bottom: 8px;
    }

        .sidebar .switch-group .cell:first-child {
            width: 56px;
        }

.sidebar .devider {
    border-bottom: 1px solid #4fb8cf;
    margin-left: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
}




/*
*   report-home
*/

.report-home {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

    .report-home .group {
        font-size: 18px;
        font-style: italic;
        font-weight: 300;
        color: #fff;
        letter-spacing: 0.5px;
        display: inline-block;
        padding: 4px 16px;
        background-color: #fec10d;
        margin-top: 64px;
    }

    .report-home.right .group {
        background-color: #63ba52;
    }

    .report-home .group:first-child {
        margin-top: 32px;
    }

    .report-home.right .icon-download-yellow {
        background-image: url(../images/icon-download-green.svg);
    }

    .report-home.right .icon-listing-yellow {
        background-image: url(../images/icon-listing-green.svg);
    }

    .report-home.right .icon-graph-yellow {
        background-image: url(../images/icon-graph-green.svg);
    }

    .report-home.right .icon-sync-yellow {
        background-image: url(../images/icon-sync-green.svg);
    }

    .report-home .item {
        position: relative;
        display: block;
        cursor: pointer;
        background-position: 8px 28px;
        background-size: 48px;
        padding: 16px 0px;
        padding-left: 72px;
        padding-right: 48px;
        border-bottom: 1px solid #fec10d;
    }

    .report-home.right .item {
        border-bottom: 1px solid #63ba52;
    }

    .report-home .item:before {
        opacity: 0.05;
    }

    .report-home .item * {
        position: relative;
        z-index: 2;
    }

    .report-home .group + .item {
        border-top: 1px solid #fec10d;
    }

    .report-home.right .group + .item {
        border-top: 1px solid #63ba52;
    }

    .report-home .item .title {
        font-size: 26px;
        font-weight: 600;
        margin-top: 8px;
        padding-bottom: 4px;
    }

    .report-home .item .description {
        font-size: 18px;
        font-weight: 300;
        font-style: italic;
        color: #4fb8cf;
    }

    .report-home .item .functions {
        position: absolute;
        top: 4px;
        right: 0;
    }

        .report-home .item .functions .function {
            width: 24px;
            height: 24px;
            display: inline-block;
            background-position: center center;
            background-size: contain;
            background-repeat: no-repeat;
        }

.report-history .item {
    display: block;
    font-size: 105%;
    padding: 8px 0px;
    padding-left: 32px;
    background-position: 0px 2px;
    background-size: 28px;
    min-height: 24px;
    cursor: pointer;
}

    .report-history .item:hover {
        text-decoration: underline;
    }

.promo-box {
    display: block;
    position: relative;
    margin-left: 8px;
    padding: 12px;
    padding-top: 96px;
    font-size: 110%;
    line-height: 1.4;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #48819b;
    background-position: 0px 2px;
    background-size: 28px;
    min-height: 24px;
}

    .promo-box * {
        z-index: 2;
        position: relative;
    }

.promo-icon {
    position: absolute;
    left: 50%;
    top: 12px;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.promo-box:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #4fb8cf;
    opacity: .1;
}

.promo-box .title {
    color: #4fb8cf;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

.promo-box .btn {
    margin-top: 16px;
    margin-bottom: 8px;
}

.promo-box .striped-box {
    width: 100%;
    height: 12px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: repeating-linear-gradient( 45deg, #4fb8cf, #4fb8cf 6px, #48819b 6px, #48819b 12px );
}

.promo-box.vertical {
    max-width: 600px;
    padding-top: 32px;
    padding-left: 96px;
    margin-left: auto;
    margin-right: auto;
}

    .promo-box.vertical .promo-icon {
        left: 8px;
        top: 32px;
        margin-left: 0px;
    }

    .promo-box.vertical .btn-box {
        text-align: left;
    }



/*
*   Connections-supplier
*/
.counter-box {
    position: absolute;
    left: 32px;
    top: 32px;
    background-color: #fec10d;
    border: 1px solid #48819b;
    padding: 8px 16px;
    font-size: 110%;
    line-height: 1;
}

    .counter-box * {
        display: inline-block;
        position: relative;
    }

    .counter-box .name {
        color: #fff;
        top: -2px;
    }

    .counter-box .counter {
        font-size: 140%;
        background-color: #fff;
        margin: -8px -16px;
        margin-left: 16px;
        padding: 8px 24px;
    }

.info-box {
    position: relative;
    float: left;
    width: 400px;
}

    .info-box.block {
        display: block;
        float: none;
        margin-top: 38px;
    }

        .info-box.block:first-child {
            margin-top: 0px;
        }

    .info-box[class*='box-arrow-right-']:before {
        left: -40px;
        right: auto;
        top: 4px;
    }

    .info-box.block {
        margin-left: 72px;
    }

    .info-box .info-box-inner {
        position: relative;
        border: 1px solid #4fb8cf;
        border-radius: 18px;
        overflow: hidden;
        width: 100%;
        padding: 16px;
        box-shadow: 0 0 8px -4px #000;
    }

    .info-box .cell {
        padding: 3px 0px;
    }

    .info-box .cell {
        padding: 3px 0px;
    }

        .info-box .cell input,
        .info-box .cell .filter-menu-item,
        .info-box .cell textarea,
        .info-box .cell select {
            margin-top: -4px;
        }

    .info-box div:not(.table).left-header,
    .info-box .table.left-header .cell:first-child {
        color: #4fb8cf;
    }

    .info-box .header {
        font-size: 120%;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: #fff;
        margin: -16px;
        margin-bottom: 16px;
        padding: 8px 16px;
        background-color: #4fb8cf;
        min-height: 38px;
        background-position: 4px 4px;
        background-size: 32px;
    }

        .info-box .header[class*='icon-'] {
            padding-left: 40px
        }

.info-box-green .info-box-inner,
.info-box-green .btn {
    border-color: #336633;
}

.info-box-green .header,
.info-box-green .btn {
    background-color: #33aa44;
}

.info-box-red .info-box-inner,
.info-box-red .btn {
    border-color: #A64040;
}

.info-box-red .header,
.info-box-red .btn {
    background-color: #f44040;
}

.info-box-darkblue .info-box-inner {
    border-color: #48819b;
}

.info-box-darkblue .header {
    background-color: #48819b;
}

.info-box-inner .notice-move-in,
.info-box-inner .notice-move-out,
.info-box-inner .notice-wait-for-customer,
.info-box-inner .notice-urgent {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 4px;
    letter-spacing: 1px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
}

.info-box-inner .notice-box {
    margin-top: 12px;
    margin-bottom: 8px;
}

.info-box-inner .notice-move-in {
    background-color: #4fb8cf;
}

.info-box-inner .notice-move-out {
    background-color: #48819b;
}

.info-box-inner .notice-wait-for-customer {
    background-color: #fec10d;
}

.info-box-inner .notice-urgent {
    background-color: #ef792b;
}

.info-box-inner input[class*='icon-days-'] {
    background-position: right center;
}

    .info-box-inner input[class*='icon-days-']:focus,
    .info-box-inner input[class*='icon-days-']:hover {
        background-image: none;
    }

.info-box .note {
    font-size: 95%;
    font-style: italic;
    opacity: 0.4;
    margin-top: 8px;
}

.info-box.info {
    margin-left: 32px;
}

.info-box.allow {
    /* margin-top: 38px !important; */
}

.info-box.decline {
    margin-top: 24px !important;
}

.info-box.result .title {
    color: #333;
    border: none;
}

.info-box.result .header {
    margin-bottom: 32px;
}

.info-box.result .center-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 100%;
    border: 3px solid #fff;
    top: 12px;
    left: 50%;
    margin-left: -24px;
}


.info-table {
    display: block;
}

    .info-table th,
    .info-table td {
        padding: 8px 10px;
        text-align: center;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .info-table tr th {
        font-style: italic;
        word-break: keep-all;
        color: #4fb8cf;
    }

        .info-table tr th:first-child,
        .info-table tr td:first-child {
            padding-left: 0px;
            color: #878787;
            text-align: left;
            min-width: 110px;
            font-style: italic;
        }


.info-box .title,
.contract-details .title {
    color: #4fb8cf;
    font-size: 110%;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-bottom: 1px solid #4fb8cf;
    margin-top: 24px;
    margin-bottom: 6px;
}

.contract-details .title {
    margin-top: 12px;
    margin-bottom: 6px;
}



/*
*   mod-report > sec-contract 
*/

.sec-contract .list {
    margin: auto;
}

.sec-contract .list-header tr:last-child .row-cell {
    padding-bottom: 4px;
}

.upgrade .upgrade-color {
    background-color: #fff;
}

    .upgrade .upgrade-color:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: #fec10d;
        z-index: -1;
        opacity: .4;
    }

.list-row.upgrade:not(.open):nth-child(even) .upgrade-color:after {
    opacity: .6;
}

.upgrade.open .upgrade-color:after {
    opacity: 1;
}

upgrade .upgrade-color-green, upgrade .upgrade-color-red {
    background-color: #fff;
}

.upgrade .upgrade-color-green:after, .upgrade .upgrade-color-red:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #47d420;
    z-index: -1;
    opacity: .35;
}

.upgrade .upgrade-color-red:after {
    background-color: #d14b4b;
}

.list-row:nth-child(even) .list-row-visible div table td.row-cell.width-70.align-right.line-left.upgrade-color-green,
.list-row:nth-child(even) .list-row-visible div table td.row-cell.width-70.align-right.line-left.red-color-green {
    opacity: .8;
}

.upgrade.open .upgrade-color-green:after, .upgrade.open .upgrade-color-red:after {
    opacity: 1;
}

.sec-contract .list-row .hovercover:before {
    opacity: 0.1;
}

.contract-details table.calculation-total th:last-child,
.contract-details table.calculation-total th,
.contract-details table.calculation th:last-child,
.contract-details table.calculation th {
    font-style: italic;
    font-weight: 600;
    letter-spacing: .5px;
    font-size: 105%;
    padding: 6px 4px;
    padding-top: 12px;
}

.contract-details table.calculation td:last-child,
.contract-details table.calculation td {
    border: 1px solid #4fb8cf;
    padding: 6px 4px;
}

.contract-details table.calculation .total td {
    border-top: 2px solid #333333;
}

.contract-details table.calculation .total td {
    font-weight: 600;
}

.contract-details table.calculation .other td:first-child:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 0px;
    left: -32px;
    top: 16px;
    border-top: 1px solid #4fb8cf;
    z-index: -1;
}

.contract-details table.calculation .other td:first-child:after {
    content: '';
    border: 8px solid transparent;
    border-right-width: 0px;
    border-left-color: #4fb8cf;
    width: 8px;
    height: 16px;
    left: -16px;
    position: absolute;
    top: 16px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.contract-details table.calculation .total td:first-child {
    background-color: #4fb8cf;
    color: #333;
}

.contract-details table.calculation .result td:first-child {
}

    .contract-details table.calculation .result td:first-child:after {
        content: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: #4fb8cf;
        z-index: -1;
        opacity: .5;
    }

.contract-details .euro {
    float: left;
    margin-left: 4px;
}

.contract-details .calculation-total .euro {
    margin-left: 8px;
}

.contract-details .graph {
}

.contract-details .calculation-total {
    color: #666;
}

table.calculation-total > tbody > tr:nth-child(2) > td {
    padding: 8px;
    border: 1px solid #4fb8cf;
}

.contract-details .calculation-total table th:last-child,
.contract-details .calculation-total table th {
    padding: 0px;
    margin: 0px;
    padding-bottom: 4px;
}

.contract-details .calculation-total table td {
    padding: 2px 0px;
    border-top: 1px solid rgba( 0,0,0,.1);
}

.contract-details .calculation-total table tr:last-child td {
    border-top: 1px solid rgba( 0,0,0,.3);
}

.contract-details .calculation-total .total td {
    font-weight: 600;
}

.sec-contract .list-row.open [class*='row-switch']:after {
    background-image: url(../images/icon-arrow-up-white.svg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.total-box {
    position: relative;
    display: inline-table;
    width: auto;
    float: right;
    right: 9.3%;
    border: 1px solid #48819b;
    font-size: 110%;
    line-height: 1;
}

    .total-box * {
        position: relative;
    }

    .total-box .name {
        padding: 8px 16px;
        background-color: #fec10d;
        color: #fff;
    }

    .total-box .total:last-child,
    .total-box .total {
        font-size: 140%;
        background-color: #fff;
        padding: 8px 24px;
        vertical-align: middle;
    }



/*
*   mod-report > sec-consumption
*/
.sec-consumption .body-box-center {
    padding-bottom: 0px;
    padding: 0 32px;
}

.graph-title {
    font-size: 24px;
    padding-bottom: 4px;
}

    .graph-title span:before {
        content: ' ';
    }

    .graph-title span.period-graph:before {
        content: ' - ';
    }

    .graph-title span:first-child:before {
        content: none;
    }

.nav-graph {
    border-bottom: 1px solid #4fb8cf;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    height: 300px;
    max-height: 300px;
    box-sizing: border-box;
    overflow: hidden;
}

    .nav-graph.small {
        max-height: 75px;
    }

    .nav-graph.smaller {
        max-height: 50px;
    }

    .nav-graph.close {
        max-height: 0px;
    }

.graph-crums .graph-crum {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

    .graph-crums .graph-crum.seperator {
        position: relative;
        display: inline-block;
        background-image: url(../images/icon-arrow-right-gray.svg);
        font-size: 13px;
        padding: 4px 10px;
        background-position: 0px;
        background-size: 20px;
        background-color: transparent;
        min-height: 23px;
    }

    .graph-crums .graph-crum:first-child {
        margin-left: 0px;
    }

.graph-full-screen .body-box {
    height: 100vh;
    padding-top: 20px;
}

.graph-full-screen .body-box-center {
    min-height: 0;
    height: auto;
    padding-bottom: 0;
    max-width: none;
    width: auto;
    margin-left: 32px;
    margin-right: 64px;
}

.graph-full-screen .hide-on-graph-full-screen,
.graph-full-screen .menu-box,
.graph-full-screen #pnlUserLogin {
    display: none;
}

.btn.secondary.graph-full-screen-switch[class*="icon-explode"] {
    background-size: 23px !important;
    background-position: center center !important;
}

.graph-full-screen .btn.secondary.graph-full-screen-switch[class*="icon-explode"] {
    background-image: url(../images/icon-implode-blue.svg);
}

.graph-full-screen-close {
    display: none;
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    top: 8px;
    right: 8px;
    background-size: 32px 32px !important;
    background-position: center center !important;
}

.graph-full-screen .graph-full-screen-close {
    display: block;
}

/* legend */
.legend {
    margin-top: 4px;
}

.legend-item .cell {
    padding-bottom: 8px;
}

.legend-item:last-child .cell {
    padding-bottom: 0px;
}

.legend-element-column {
    width: 24px;
}

.legend-element.box {
    position: relative;
    width: 16px;
    height: 16px;
    display: block;
    top: 2px;
    border: 1px solid #333;
    cursor: pointer;
    box-sizing: border-box;
    z-index: 0;
    box-shadow: none;
}

.legend-element.line {
    position: relative;
    width: 16px;
    height: 0px;
    display: block;
    margin-top: 8px;
    border-top: 3px solid #333;
    cursor: pointer;
    z-index: 0;
}

.legend-element.box.off:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 16px;
    height: 16px;
    margin-left: -1px;
    margin-top: -1px;
    display: block;
    background-color: #fff;
    opacity: .6;
    z-index: 2;
}

.legend-element.off:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 27px;
    height: 27px;
    margin-left: -1px;
    margin-top: -1px;
    display: block;
    z-index: 2;
    border-left: 2px solid #f00;
    rotation-point: bottom left;
    transform: rotate(45deg);
}

.legend-element.line.off:after {
    margin-top: -9px;
}

.legend-column-descriptions {
    padding-top: 8px;
}

.legend-column-description {
    position: relative;
    margin-left: 16px;
    cursor: pointer
}

    .legend-column-description[data-legend-column="2"] {
        position: relative;
        margin-left: 40px;
    }

    .legend-column-description:before {
        content: '';
        position: absolute;
        top: 4px;
        left: -8px;
        width: 4px;
        height: 16px;
        margin-top: -10px;
        display: block;
        border-left: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .legend-column-description:nth-child(2):before {
        height: 32px;
        margin-top: -26px;
    }

    .legend-column-description.label {
        padding: 0px !important;
    }


.blur {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    background-color: #ccc;
}