.input_navigation_img, .menu_navigation_img {
    background-position: bottom 0 left;
    width: 1em;
    height: 1em;
    display: inline-block;
    background-repeat: no-repeat;
    border-bottom: 0;
    background-size: 1em;
}

.menu_navigation_img {
    margin-right: 0.5em;
    filter: invert(60%) sepia(27%) saturate(380%) hue-rotate(170deg) brightness(94%) contrast(85%);
}

.input_navigation_img_white {
    filter: brightness(0) invert(1);
}

li.active > a > .menu_navigation_img {
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(176deg) brightness(102%) contrast(101%);

}

#filter_references .dropdown-menu {
    max-height: 300px;
    width: 300px;
    overflow: scroll;
}

.subNavigation {
    width: 100%;
    margin-bottom: 45px;
    background-color: #f4f5f7;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #548dc6;
}

.gwoeOverviewResults {
    font-size: xx-large;
}

.columnSum {
    font-weight: bold;
}

#updaterights {
    margin-left: 30px;
}

.sdgImpact textarea {
    height: 110px !important;
}

.sdgClusterball {
    display: block;
    background: #666;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin: 0;
}

.sdgClusterballSmall {
    height: 10px;
    width: 10px;
}

.sdgClusterballMedium {
    height: 25px;
    width: 25px;
}

.sdgClusterballLarge {

}

.blue {
    color: #5b7e9f !important;
}

.grey {
    color: #666;
}

.node p {
    margin: 0px;
}

.invisible {
    visibility: collapse;
}

.margintop5 {
    margin-top: 5px;
}

.margintop10 {
    margin-top: 10px;
}

.margintop20 {
    margin-top: 20px;
}

.margintop30 {
    margin-top: 30px;
}

.marginbottom3 {
    margin-bottom: 3px;
}

.marginbottom5 {
    margin-bottom: 5px;
}

.marginbottom10 {
    margin-bottom: 10px;
}

.marginbottom20 {
    margin-bottom: 20px;
}

.marginbottom30 {
    margin-bottom: 30px;
}

.marginright3 {
    margin-right: 3px;
}

.marginright10 {
    margin-right: 10px;
}

.marginright20 {
    margin-right: 20px;
}

.marginright30 {
    margin-right: 30px;
}


.marginleft10 {
    margin-left: 10px;
}

.marginleft20 {
    margin-right: 20px;
}

.marginleftt30 {
    margin-right: 30px;
}

.margintop18 {
    margin-top: 18px;
}

.margintop40 {
    margin-top: 40px;
}

.alert {
    clear: both;
}

.alert > p, .alert > ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.flexTwoColSpaceBetween h3 {
    padding: 0px;
    margin: 0px;
}

input.error, select.error, textarea.error {
    border-color: #B94A48;
}

span.required {
    color: #B94A48;
}

.muted {
    color: #999999;
}

li.r_crumb {
    float: right;
    font-weight: bold;
}

.breadcrumb li {
    font-size: 90%;
}

.breadcrumb li.r_crumb {
    font-size: 100%;
}

.breadcrumb > li + li::before {
    content: "»";
}

.tooltip-inner {
    max-width: 300px;
    text-align: left;
}

.img-polaroid {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 5px;
}

.taxonomyProgress {
    width: 180px;
}

#input_nav .progress, #input_nav .bar, .themaNav .progress, .themaNav .bar, .taxonomyProgress, .list-group-item .progress {
    height: 7px;
    margin-bottom: 0;
    border: none;
}

#input_nav > li > a {
    height: 45px;
}

.co2figurem, .co2figurew {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 80px;
}

.co2figurem {
    background-image: url('../images/maennchen.png');
}

.co2figurew {
    background-image: url('../images/weibchen.png');
}

.co2figurehalf {
    width: 20px;
}

.bold {
    font-weight: bold;
}

#substances fieldset {
    margin-bottom: 25px;
}

#substances legend {
    margin-bottom: 10px;
}

td.missing_translation, tr.even td.missing_translation, tr.odd td.missing_translation {
    background-color: #fdffea;
}

div.hastranslation {
    display: none;
}

#search_box {
    position: relative;
}

#search_result {
    background-color: #fff;
    width: 100%;
    z-index: 900;
    max-height: 400px;
    overflow-y: auto;

    display: none;
    padding: 10px;
    border: 1px solid #ccc;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    position: relative;
    top: -5px;
}

.tooltip {
    z-index: 3000;
}

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

.blockUI {
    z-index: 4000 !important;
}

#search_result li {
    display: block;
    margin: 0;
    margin-top: 3px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
}

#search_result li.no-border-top {
    border-top: none;
}

#search_result li:hover {
    background-color: #f6f6f6;
}

.jOrgChart .nodeContainer.disabled, #search_result .nodeContainer.disabled {
    background-color: #f6f6f6;
}

.jOrgChart .nodeContainer.warning, #search_result .nodeContainer.warning {
    color: #8a6d3b;
    background-color: #fdeec5;
    border-color: #fcd9ac;
}

table tr.warning {
    color: #8a6d3b;
}


.jOrgChart td.left {
    width: 75px;
}

.jOrgChart td.right {
    width: 74px;
}

div.FixedHeader_Cloned th,
div.FixedHeader_Cloned td {
    background-color: white !important;
}

.evaluation-menu-row div {
    opacity: 1;
}

.evaluation-menu-row.disabled div {
    opacity: 0.5;
}

.evaluation-menu-row div.overlay {
    display: none;
}

.evaluation-menu-row.disabled div.overlay {
    display: block;
    opacity: 1;
    position: absolute;
    height: 40px;
    width: 100%;
    z-index: 10;
}

.evaluationColumnReferenceInfos {
    margin-top: 8px;
    font-size: 1em;
    color: #999;
    white-space: nowrap;
}

th .nodeProperties {
    max-width: 200px;
}

/* checkbox form style fixes */
input[type="checkbox"] {
    margin: 5px;
    float: left;
}

/* fix to make info icons the same color as the label color */
label a {
    color: inherit;
}

label.required:after {
    content: ' *';
    color: #B94A48;
}

.jOrgChart input[type="checkbox"] {
    float: none;
}

label {
    line-height: 24px;
    margin-bottom: 0px;
}

span.indicator, .nowrap {
    white-space: nowrap;
}

span.indicator:not(:last-child)::after {
    content: ",";
}

.inputdisabled {
    pointer-events: none;
    opacity: 0.5;
}

.buttondisabled {
    pointer-events: none;
}

.FixedHeader_Cloned input {
    margin: 0px;
    font-size: 10px;
}

.popover {
    max-width: 900px;
}

.nodeComparisonColumn {
    max-width: 100px;
}

.nodeComparisonColumn .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nodeComparisonColumn .badge {
    margin-bottom: 3px;
}


h2 {
    font-size: 24px;
    line-height: 36px;
}

h3 {
    font-size: 18px;
    line-height: 27px;
}

/*
 Use flexbox for btn groups for multiple reasons:
 - prevents linebreaks in table-action buttons
 - keeps buttons within a group the same height (see export/visibility buttons #21191)
 - but do not use flexbox for justified groups see #21938
 - changed to inline-flex because a btn-group is usually an inline-block
 */
.btn-group:not(.btn-group-justified) {
    display: inline-flex;
}

/* CSS Hack for button dropdowns in button groups in bootstrap 2.x  see: http://stackoverflow.com/a/37409024/2424814 */
.btn-group > *:not(:first-child),
.btn-group > *:not(:first-child) .btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

#data_form input {
    min-width: 50px;
}

.chosen-container {
    min-width: 150px;
    max-width: 100% !important;
}

.form-group .chosen-container {
    display: block;
}

.input-table .chosen-container, .inputcontrolTable .chosen-container {
    width: 100% !important;
    max-width: 500px !important;
}

select[name='time'], select[name='timeline_id'], select[name='company'], select[name='period'] {
    min-width: 200px;
}

.input-group-addon-select {
    padding: 0;
}

.input-group-addon-select select {
    background-color: transparent;
    border: 0;
    padding: 6px 6px;
}

.input-table .co2factor {
    display: none;
}

.input-table.co2factorenabled .co2factor {
    display: table-cell;
}

.zoomViewportOuter {
    margin-top: 10px;
    width: 100%;
    height: 60vh;
    position: relative;
    border: 1px solid #f4f5f7;
    background-color: #f4f5f7;
}

.zoomViewportInner {
    height: 100%;
    overflow: scroll !important;
}

.zoomViewportOuter .btn-group {
    position: absolute;
    z-index: 900;
    right: 30px;
    top: 10px;
}

.blockUI.blockMsg {
    padding: 0;
    margin: 0;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 50px;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    color: #fff;
    background-color: #000;
    cursor: wait;
    font-size: 50px;
    text-align: center;
}

.link {
    cursor: pointer;
}

.next-step-nextstep {
    padding-top: 30px;
}

.blockUI.blockMsg .fa {
    color: #fff;
    font-size: 70px;
    line-height: 100px;
}

#result-table {
    clear: both;
}

#evaluation_table {
    width: 100%;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-right-md {
        text-align: right;
    }
}

.dt-button-collection {
    max-height: 40vh;
    overflow: auto;
}

.zoomInactive {
    background-color: #ccc;
    cursor: not-allowed;
}

/* prevent line breaks in evaluation debug tree views */
.webui-popover .treeview li {
    white-space: nowrap;
}

.webui-popover .treeview {
    max-height: 500px;
    overflow: auto;
}

.result-table-wrapper-addon {
    overflow: scroll !important;
    max-height: 90vh !important;
}

@media print {
    .result-table-wrapper-addon {
        overflow: visible !important;
        max-height: none !important;
    }

    a[href]:after {
        content: none !important;
    }
}

.subNavigation li.active {
    background-color: #d4e2f1;
    border-radius: 3px;
}

/* push modal backdrop a little back so notifications will be shown on top */
.modal-backdrop {
    z-index: 1000;
}

.webui-popover {
    z-index: 990 !important;
}

/* intro js custom css */

div.introjs-tooltip.hideNextClass .introjs-prevbutton, div.introjs-tooltip.hideNextClass .introjs-nextbutton {
    display: none;
}

.introjs-showElement {
    pointer-events: none !important;
}

div.introjs-tooltip {
    opacity: 1 !important;
}

.introjs-helperLayer {
    background-color: rgba(255, 255, 255, .6);
}

.intro.active .intro-inactive {
    display: none !important;
}

.intro:not(.active) .intro-active {
    display: none !important;
}

.intro .progress {
    margin: 0;
    width: 200px;
    display: inline-block;
}

.intro .progress-bar {
    min-width: 5em;
}

.intro .btn {
    vertical-align: top;
}

a.introjs-skipbutton:not(.introjs-donebutton) {
    display: none !important;
}

.compareRow {
    background-color: #eee;
    color: #999;
}

/* primarily for column visibility buttons */
.dt-buttons .btn .badge {
    background-color: #fff;
    border: 1px solid #999;
    color: #999;
}

.dt-buttons .badge.badge-warning {
    color: #fff;
    background-color: #fad162;
    border-color: #f9ca4a;
}

.dt-button.danger:not(.disabled) {
    background-color: #f38f5e;
}
.dt-button.danger:not(.disabled) a {
    color: #fff;
}
.dt-button.danger:not(.disabled):hover, .dt-button.danger:not(.disabled) a:hover {
    color: #fff;
    background-color: #ef6e2f;
}

.mono {
    font-family: monospace;
}

.pickList_list {
    height: 220px !important;
}

.nav-pills {
    display: inline-block;
}

.nav-pills > li > a {
    padding: 0px;
}

.nav-pills li img {
    border-radius: 4px;
}

.draggable {
    cursor: move;
}

.radio label, .checkbox label {
    padding-left: 0px !important;
}

.horizontal-radio .radio {
    display: inline-block;
    margin-left: 3em;
}

/* custom styled list numbers as seen here: https://css-tricks.com/style-list-markers-css/ */

ol.blue-circles {
    list-style: none;
    counter-reset: my-list-counter;
}

ol.blue-circles li {
    counter-increment: my-list-counter;
    margin: 0.25rem;
}

ol.blue-circles li::before {
    content: counter(my-list-counter);
    background: #548dc6;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    display: inline-block;
    line-height: 1.5em;
    color: white;
    text-align: center;
    margin-right: 0.5em;
}

@media screen and (max-width: 991px) {
    .columns {
        height: 200px;
        overflow-y: scroll;
    }
}

@media screen and (min-width: 992px) {
    .columns {
        -moz-column-count: 2; /* Firefox */
        -webkit-column-count: 2; /* Safari and Chrome */
        column-count: 2;
        width: 500px;
        height: 400px;
    }
}

.dontBreakInside {
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}

.editable-container.editable-inline,
.editable-container.editable-inline .control-group.form-group,
.editable-container.editable-inline .control-group.form-group .editable-input,
.editable-container.editable-inline .control-group.form-group .editable-input textarea,
.editable-container.editable-inline .control-group.form-group .editable-input select,
.editable-container.editable-inline .control-group.form-group .editable-input input:not([type=radio]):not([type=checkbox]):not([type=submit]) {
    width: 100% !important;
}

.editable-inline .editable-buttons {
    margin-top: 7px;
    display: block;
    margin-left: 0px;
}

.editable-inline .form-inline .form-control {
    display: block;
}

.awarenessMarker {
    position: fixed;
    top: 20%;
    left: 85%;
    z-index: 900;
}

.awarenessMarker .panel-heading {
    cursor: grabbing;
}

.awarenessMarker .panel-body {
    cursor: pointer;
}

.mega-dropdown {
    position: static !important;
}

.mega-dropdown-menu {
    width: 90%;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.mega-dropdown-menu > li > ul {
    padding: 0;
    margin: 0;
}

.mega-dropdown-menu > li > ul > li {
    list-style: none;
    border-radius: 6px;
}

/*
.mega-dropdown-menu > li > ul > li:nth-child(even) {
    background-color: #fafafa;
}
*/

.mega-dropdown-menu > li > ul > li > a {
    display: block;;
    padding: 3px 3px;
    margin: 3px 3px;
    text-decoration: none;
}

.mega-dropdown-menu > li ul > li:hover:not(.dropdown-header),
.mega-dropdown-menu > li ul > li:focus:not(.dropdown-header) {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

.mega-dropdown-menu .dropdown-header {
    font-size: 16px;
    padding: 5px 60px 5px 5px;
    line-height: 30px;
}

.mega-dropdown-menu > li ul > li.active > a {
    color: #fff !important;
    text-decoration: none;
    background-color: #516982;
    border-radius: 6px;
    outline: 0;
}

.breadcrumb {
    margin-bottom: 3px;
    margin-top: 5px;
}

.compassTimeline {
    font-size: larger;
    font-weight: bold;
}

.compassDiff {
    font-size: xx-large;
    color: #337ab7;
    font-weight: bolder;
}

.compassTable td {
    padding: 10px;
    text-align: center;
}

.compassTable tr:first-child td {
    color: #AAAAAA;
}

.workflow-marker {
    color: #ccc;
}

.workflow-marker.markable {
    cursor: pointer;
}

.workflow-marker.active, .workflow-marker:hover {
    color: #f0ad4e;
}

/* override .label styles in navbar to fix workflow status indicator labels */
.navbar-nav .label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    padding: 0.2em 0.5em 0.3em;
}

.tablePill {
    border-radius: 3px;
    margin: 3px;
    padding: 3px;
    text-align: center;
    border: 4px solid #EEE;
}

/****************************************************************
 *
 * CSS Percentage Circle
 * Author: Andre Firchow
 *
*****************************************************************/
.rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
    clip: rect(auto, auto, auto, auto);
}

.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
    position: absolute;
    border: 0.08em solid #337ab7;
    width: 0.84em;
    height: 0.84em;
    clip: rect(0em, 0.5em, 1em, 0em);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.c100 {
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    float: left;
    margin: 0 0.1em 0.1em 0;
    background-color: #cccccc;
}

.c100 *, .c100 *:before, .c100 *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.c100.center {
    float: none;
    margin: 0 auto;
}

.c100.big {
    font-size: 240px;
}

.c100.small {
    font-size: 80px;
}

.c100 > span {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    width: 6.8em;
    line-height: 6.8em;
    font-size: 0.15em;
    color: #cccccc;
    display: block;
    text-align: center;
    white-space: nowrap;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.c100:after {
    position: absolute;
    top: 0.08em;
    left: 0.08em;
    display: block;
    content: " ";
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: whitesmoke;
    width: 0.84em;
    height: 0.84em;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.c100 .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
}

.c100.p1 .bar {
    -webkit-transform: rotate(3.6deg);
    -moz-transform: rotate(3.6deg);
    -ms-transform: rotate(3.6deg);
    -o-transform: rotate(3.6deg);
    transform: rotate(3.6deg);
}

.c100.p2 .bar {
    -webkit-transform: rotate(7.2deg);
    -moz-transform: rotate(7.2deg);
    -ms-transform: rotate(7.2deg);
    -o-transform: rotate(7.2deg);
    transform: rotate(7.2deg);
}

.c100.p3 .bar {
    -webkit-transform: rotate(10.8deg);
    -moz-transform: rotate(10.8deg);
    -ms-transform: rotate(10.8deg);
    -o-transform: rotate(10.8deg);
    transform: rotate(10.8deg);
}

.c100.p4 .bar {
    -webkit-transform: rotate(14.4deg);
    -moz-transform: rotate(14.4deg);
    -ms-transform: rotate(14.4deg);
    -o-transform: rotate(14.4deg);
    transform: rotate(14.4deg);
}

.c100.p5 .bar {
    -webkit-transform: rotate(18deg);
    -moz-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    -o-transform: rotate(18deg);
    transform: rotate(18deg);
}

.c100.p6 .bar {
    -webkit-transform: rotate(21.6deg);
    -moz-transform: rotate(21.6deg);
    -ms-transform: rotate(21.6deg);
    -o-transform: rotate(21.6deg);
    transform: rotate(21.6deg);
}

.c100.p7 .bar {
    -webkit-transform: rotate(25.2deg);
    -moz-transform: rotate(25.2deg);
    -ms-transform: rotate(25.2deg);
    -o-transform: rotate(25.2deg);
    transform: rotate(25.2deg);
}

.c100.p8 .bar {
    -webkit-transform: rotate(28.8deg);
    -moz-transform: rotate(28.8deg);
    -ms-transform: rotate(28.8deg);
    -o-transform: rotate(28.8deg);
    transform: rotate(28.8deg);
}

.c100.p9 .bar {
    -webkit-transform: rotate(32.4deg);
    -moz-transform: rotate(32.4deg);
    -ms-transform: rotate(32.4deg);
    -o-transform: rotate(32.4deg);
    transform: rotate(32.4deg);
}

.c100.p10 .bar {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
}

.c100.p11 .bar {
    -webkit-transform: rotate(39.6deg);
    -moz-transform: rotate(39.6deg);
    -ms-transform: rotate(39.6deg);
    -o-transform: rotate(39.6deg);
    transform: rotate(39.6deg);
}

.c100.p12 .bar {
    -webkit-transform: rotate(43.2deg);
    -moz-transform: rotate(43.2deg);
    -ms-transform: rotate(43.2deg);
    -o-transform: rotate(43.2deg);
    transform: rotate(43.2deg);
}

.c100.p13 .bar {
    -webkit-transform: rotate(46.8deg);
    -moz-transform: rotate(46.8deg);
    -ms-transform: rotate(46.8deg);
    -o-transform: rotate(46.8deg);
    transform: rotate(46.8deg);
}

.c100.p14 .bar {
    -webkit-transform: rotate(50.4deg);
    -moz-transform: rotate(50.4deg);
    -ms-transform: rotate(50.4deg);
    -o-transform: rotate(50.4deg);
    transform: rotate(50.4deg);
}

.c100.p15 .bar {
    -webkit-transform: rotate(54deg);
    -moz-transform: rotate(54deg);
    -ms-transform: rotate(54deg);
    -o-transform: rotate(54deg);
    transform: rotate(54deg);
}

.c100.p16 .bar {
    -webkit-transform: rotate(57.6deg);
    -moz-transform: rotate(57.6deg);
    -ms-transform: rotate(57.6deg);
    -o-transform: rotate(57.6deg);
    transform: rotate(57.6deg);
}

.c100.p17 .bar {
    -webkit-transform: rotate(61.2deg);
    -moz-transform: rotate(61.2deg);
    -ms-transform: rotate(61.2deg);
    -o-transform: rotate(61.2deg);
    transform: rotate(61.2deg);
}

.c100.p18 .bar {
    -webkit-transform: rotate(64.8deg);
    -moz-transform: rotate(64.8deg);
    -ms-transform: rotate(64.8deg);
    -o-transform: rotate(64.8deg);
    transform: rotate(64.8deg);
}

.c100.p19 .bar {
    -webkit-transform: rotate(68.4deg);
    -moz-transform: rotate(68.4deg);
    -ms-transform: rotate(68.4deg);
    -o-transform: rotate(68.4deg);
    transform: rotate(68.4deg);
}

.c100.p20 .bar {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
}

.c100.p21 .bar {
    -webkit-transform: rotate(75.6deg);
    -moz-transform: rotate(75.6deg);
    -ms-transform: rotate(75.6deg);
    -o-transform: rotate(75.6deg);
    transform: rotate(75.6deg);
}

.c100.p22 .bar {
    -webkit-transform: rotate(79.2deg);
    -moz-transform: rotate(79.2deg);
    -ms-transform: rotate(79.2deg);
    -o-transform: rotate(79.2deg);
    transform: rotate(79.2deg);
}

.c100.p23 .bar {
    -webkit-transform: rotate(82.8deg);
    -moz-transform: rotate(82.8deg);
    -ms-transform: rotate(82.8deg);
    -o-transform: rotate(82.8deg);
    transform: rotate(82.8deg);
}

.c100.p24 .bar {
    -webkit-transform: rotate(86.4deg);
    -moz-transform: rotate(86.4deg);
    -ms-transform: rotate(86.4deg);
    -o-transform: rotate(86.4deg);
    transform: rotate(86.4deg);
}

.c100.p25 .bar {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.c100.p26 .bar {
    -webkit-transform: rotate(93.6deg);
    -moz-transform: rotate(93.6deg);
    -ms-transform: rotate(93.6deg);
    -o-transform: rotate(93.6deg);
    transform: rotate(93.6deg);
}

.c100.p27 .bar {
    -webkit-transform: rotate(97.2deg);
    -moz-transform: rotate(97.2deg);
    -ms-transform: rotate(97.2deg);
    -o-transform: rotate(97.2deg);
    transform: rotate(97.2deg);
}

.c100.p28 .bar {
    -webkit-transform: rotate(100.8deg);
    -moz-transform: rotate(100.8deg);
    -ms-transform: rotate(100.8deg);
    -o-transform: rotate(100.8deg);
    transform: rotate(100.8deg);
}

.c100.p29 .bar {
    -webkit-transform: rotate(104.4deg);
    -moz-transform: rotate(104.4deg);
    -ms-transform: rotate(104.4deg);
    -o-transform: rotate(104.4deg);
    transform: rotate(104.4deg);
}

.c100.p30 .bar {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    transform: rotate(108deg);
}

.c100.p31 .bar {
    -webkit-transform: rotate(111.6deg);
    -moz-transform: rotate(111.6deg);
    -ms-transform: rotate(111.6deg);
    -o-transform: rotate(111.6deg);
    transform: rotate(111.6deg);
}

.c100.p32 .bar {
    -webkit-transform: rotate(115.2deg);
    -moz-transform: rotate(115.2deg);
    -ms-transform: rotate(115.2deg);
    -o-transform: rotate(115.2deg);
    transform: rotate(115.2deg);
}

.c100.p33 .bar {
    -webkit-transform: rotate(118.8deg);
    -moz-transform: rotate(118.8deg);
    -ms-transform: rotate(118.8deg);
    -o-transform: rotate(118.8deg);
    transform: rotate(118.8deg);
}

.c100.p34 .bar {
    -webkit-transform: rotate(122.4deg);
    -moz-transform: rotate(122.4deg);
    -ms-transform: rotate(122.4deg);
    -o-transform: rotate(122.4deg);
    transform: rotate(122.4deg);
}

.c100.p35 .bar {
    -webkit-transform: rotate(126deg);
    -moz-transform: rotate(126deg);
    -ms-transform: rotate(126deg);
    -o-transform: rotate(126deg);
    transform: rotate(126deg);
}

.c100.p36 .bar {
    -webkit-transform: rotate(129.6deg);
    -moz-transform: rotate(129.6deg);
    -ms-transform: rotate(129.6deg);
    -o-transform: rotate(129.6deg);
    transform: rotate(129.6deg);
}

.c100.p37 .bar {
    -webkit-transform: rotate(133.2deg);
    -moz-transform: rotate(133.2deg);
    -ms-transform: rotate(133.2deg);
    -o-transform: rotate(133.2deg);
    transform: rotate(133.2deg);
}

.c100.p38 .bar {
    -webkit-transform: rotate(136.8deg);
    -moz-transform: rotate(136.8deg);
    -ms-transform: rotate(136.8deg);
    -o-transform: rotate(136.8deg);
    transform: rotate(136.8deg);
}

.c100.p39 .bar {
    -webkit-transform: rotate(140.4deg);
    -moz-transform: rotate(140.4deg);
    -ms-transform: rotate(140.4deg);
    -o-transform: rotate(140.4deg);
    transform: rotate(140.4deg);
}

.c100.p40 .bar {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
}

.c100.p41 .bar {
    -webkit-transform: rotate(147.6deg);
    -moz-transform: rotate(147.6deg);
    -ms-transform: rotate(147.6deg);
    -o-transform: rotate(147.6deg);
    transform: rotate(147.6deg);
}

.c100.p42 .bar {
    -webkit-transform: rotate(151.2deg);
    -moz-transform: rotate(151.2deg);
    -ms-transform: rotate(151.2deg);
    -o-transform: rotate(151.2deg);
    transform: rotate(151.2deg);
}

.c100.p43 .bar {
    -webkit-transform: rotate(154.8deg);
    -moz-transform: rotate(154.8deg);
    -ms-transform: rotate(154.8deg);
    -o-transform: rotate(154.8deg);
    transform: rotate(154.8deg);
}

.c100.p44 .bar {
    -webkit-transform: rotate(158.4deg);
    -moz-transform: rotate(158.4deg);
    -ms-transform: rotate(158.4deg);
    -o-transform: rotate(158.4deg);
    transform: rotate(158.4deg);
}

.c100.p45 .bar {
    -webkit-transform: rotate(162deg);
    -moz-transform: rotate(162deg);
    -ms-transform: rotate(162deg);
    -o-transform: rotate(162deg);
    transform: rotate(162deg);
}

.c100.p46 .bar {
    -webkit-transform: rotate(165.6deg);
    -moz-transform: rotate(165.6deg);
    -ms-transform: rotate(165.6deg);
    -o-transform: rotate(165.6deg);
    transform: rotate(165.6deg);
}

.c100.p47 .bar {
    -webkit-transform: rotate(169.2deg);
    -moz-transform: rotate(169.2deg);
    -ms-transform: rotate(169.2deg);
    -o-transform: rotate(169.2deg);
    transform: rotate(169.2deg);
}

.c100.p48 .bar {
    -webkit-transform: rotate(172.8deg);
    -moz-transform: rotate(172.8deg);
    -ms-transform: rotate(172.8deg);
    -o-transform: rotate(172.8deg);
    transform: rotate(172.8deg);
}

.c100.p49 .bar {
    -webkit-transform: rotate(176.4deg);
    -moz-transform: rotate(176.4deg);
    -ms-transform: rotate(176.4deg);
    -o-transform: rotate(176.4deg);
    transform: rotate(176.4deg);
}

.c100.p50 .bar {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.c100.p51 .bar {
    -webkit-transform: rotate(183.6deg);
    -moz-transform: rotate(183.6deg);
    -ms-transform: rotate(183.6deg);
    -o-transform: rotate(183.6deg);
    transform: rotate(183.6deg);
}

.c100.p52 .bar {
    -webkit-transform: rotate(187.2deg);
    -moz-transform: rotate(187.2deg);
    -ms-transform: rotate(187.2deg);
    -o-transform: rotate(187.2deg);
    transform: rotate(187.2deg);
}

.c100.p53 .bar {
    -webkit-transform: rotate(190.8deg);
    -moz-transform: rotate(190.8deg);
    -ms-transform: rotate(190.8deg);
    -o-transform: rotate(190.8deg);
    transform: rotate(190.8deg);
}

.c100.p54 .bar {
    -webkit-transform: rotate(194.4deg);
    -moz-transform: rotate(194.4deg);
    -ms-transform: rotate(194.4deg);
    -o-transform: rotate(194.4deg);
    transform: rotate(194.4deg);
}

.c100.p55 .bar {
    -webkit-transform: rotate(198deg);
    -moz-transform: rotate(198deg);
    -ms-transform: rotate(198deg);
    -o-transform: rotate(198deg);
    transform: rotate(198deg);
}

.c100.p56 .bar {
    -webkit-transform: rotate(201.6deg);
    -moz-transform: rotate(201.6deg);
    -ms-transform: rotate(201.6deg);
    -o-transform: rotate(201.6deg);
    transform: rotate(201.6deg);
}

.c100.p57 .bar {
    -webkit-transform: rotate(205.2deg);
    -moz-transform: rotate(205.2deg);
    -ms-transform: rotate(205.2deg);
    -o-transform: rotate(205.2deg);
    transform: rotate(205.2deg);
}

.c100.p58 .bar {
    -webkit-transform: rotate(208.8deg);
    -moz-transform: rotate(208.8deg);
    -ms-transform: rotate(208.8deg);
    -o-transform: rotate(208.8deg);
    transform: rotate(208.8deg);
}

.c100.p59 .bar {
    -webkit-transform: rotate(212.4deg);
    -moz-transform: rotate(212.4deg);
    -ms-transform: rotate(212.4deg);
    -o-transform: rotate(212.4deg);
    transform: rotate(212.4deg);
}

.c100.p60 .bar {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
}

.c100.p61 .bar {
    -webkit-transform: rotate(219.6deg);
    -moz-transform: rotate(219.6deg);
    -ms-transform: rotate(219.6deg);
    -o-transform: rotate(219.6deg);
    transform: rotate(219.6deg);
}

.c100.p62 .bar {
    -webkit-transform: rotate(223.2deg);
    -moz-transform: rotate(223.2deg);
    -ms-transform: rotate(223.2deg);
    -o-transform: rotate(223.2deg);
    transform: rotate(223.2deg);
}

.c100.p63 .bar {
    -webkit-transform: rotate(226.8deg);
    -moz-transform: rotate(226.8deg);
    -ms-transform: rotate(226.8deg);
    -o-transform: rotate(226.8deg);
    transform: rotate(226.8deg);
}

.c100.p64 .bar {
    -webkit-transform: rotate(230.4deg);
    -moz-transform: rotate(230.4deg);
    -ms-transform: rotate(230.4deg);
    -o-transform: rotate(230.4deg);
    transform: rotate(230.4deg);
}

.c100.p65 .bar {
    -webkit-transform: rotate(234deg);
    -moz-transform: rotate(234deg);
    -ms-transform: rotate(234deg);
    -o-transform: rotate(234deg);
    transform: rotate(234deg);
}

.c100.p66 .bar {
    -webkit-transform: rotate(237.6deg);
    -moz-transform: rotate(237.6deg);
    -ms-transform: rotate(237.6deg);
    -o-transform: rotate(237.6deg);
    transform: rotate(237.6deg);
}

.c100.p67 .bar {
    -webkit-transform: rotate(241.2deg);
    -moz-transform: rotate(241.2deg);
    -ms-transform: rotate(241.2deg);
    -o-transform: rotate(241.2deg);
    transform: rotate(241.2deg);
}

.c100.p68 .bar {
    -webkit-transform: rotate(244.8deg);
    -moz-transform: rotate(244.8deg);
    -ms-transform: rotate(244.8deg);
    -o-transform: rotate(244.8deg);
    transform: rotate(244.8deg);
}

.c100.p69 .bar {
    -webkit-transform: rotate(248.4deg);
    -moz-transform: rotate(248.4deg);
    -ms-transform: rotate(248.4deg);
    -o-transform: rotate(248.4deg);
    transform: rotate(248.4deg);
}

.c100.p70 .bar {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
}

.c100.p71 .bar {
    -webkit-transform: rotate(255.6deg);
    -moz-transform: rotate(255.6deg);
    -ms-transform: rotate(255.6deg);
    -o-transform: rotate(255.6deg);
    transform: rotate(255.6deg);
}

.c100.p72 .bar {
    -webkit-transform: rotate(259.2deg);
    -moz-transform: rotate(259.2deg);
    -ms-transform: rotate(259.2deg);
    -o-transform: rotate(259.2deg);
    transform: rotate(259.2deg);
}

.c100.p73 .bar {
    -webkit-transform: rotate(262.8deg);
    -moz-transform: rotate(262.8deg);
    -ms-transform: rotate(262.8deg);
    -o-transform: rotate(262.8deg);
    transform: rotate(262.8deg);
}

.c100.p74 .bar {
    -webkit-transform: rotate(266.4deg);
    -moz-transform: rotate(266.4deg);
    -ms-transform: rotate(266.4deg);
    -o-transform: rotate(266.4deg);
    transform: rotate(266.4deg);
}

.c100.p75 .bar {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

.c100.p76 .bar {
    -webkit-transform: rotate(273.6deg);
    -moz-transform: rotate(273.6deg);
    -ms-transform: rotate(273.6deg);
    -o-transform: rotate(273.6deg);
    transform: rotate(273.6deg);
}

.c100.p77 .bar {
    -webkit-transform: rotate(277.2deg);
    -moz-transform: rotate(277.2deg);
    -ms-transform: rotate(277.2deg);
    -o-transform: rotate(277.2deg);
    transform: rotate(277.2deg);
}

.c100.p78 .bar {
    -webkit-transform: rotate(280.8deg);
    -moz-transform: rotate(280.8deg);
    -ms-transform: rotate(280.8deg);
    -o-transform: rotate(280.8deg);
    transform: rotate(280.8deg);
}

.c100.p79 .bar {
    -webkit-transform: rotate(284.4deg);
    -moz-transform: rotate(284.4deg);
    -ms-transform: rotate(284.4deg);
    -o-transform: rotate(284.4deg);
    transform: rotate(284.4deg);
}

.c100.p80 .bar {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
}

.c100.p81 .bar {
    -webkit-transform: rotate(291.6deg);
    -moz-transform: rotate(291.6deg);
    -ms-transform: rotate(291.6deg);
    -o-transform: rotate(291.6deg);
    transform: rotate(291.6deg);
}

.c100.p82 .bar {
    -webkit-transform: rotate(295.2deg);
    -moz-transform: rotate(295.2deg);
    -ms-transform: rotate(295.2deg);
    -o-transform: rotate(295.2deg);
    transform: rotate(295.2deg);
}

.c100.p83 .bar {
    -webkit-transform: rotate(298.8deg);
    -moz-transform: rotate(298.8deg);
    -ms-transform: rotate(298.8deg);
    -o-transform: rotate(298.8deg);
    transform: rotate(298.8deg);
}

.c100.p84 .bar {
    -webkit-transform: rotate(302.4deg);
    -moz-transform: rotate(302.4deg);
    -ms-transform: rotate(302.4deg);
    -o-transform: rotate(302.4deg);
    transform: rotate(302.4deg);
}

.c100.p85 .bar {
    -webkit-transform: rotate(306deg);
    -moz-transform: rotate(306deg);
    -ms-transform: rotate(306deg);
    -o-transform: rotate(306deg);
    transform: rotate(306deg);
}

.c100.p86 .bar {
    -webkit-transform: rotate(309.6deg);
    -moz-transform: rotate(309.6deg);
    -ms-transform: rotate(309.6deg);
    -o-transform: rotate(309.6deg);
    transform: rotate(309.6deg);
}

.c100.p87 .bar {
    -webkit-transform: rotate(313.2deg);
    -moz-transform: rotate(313.2deg);
    -ms-transform: rotate(313.2deg);
    -o-transform: rotate(313.2deg);
    transform: rotate(313.2deg);
}

.c100.p88 .bar {
    -webkit-transform: rotate(316.8deg);
    -moz-transform: rotate(316.8deg);
    -ms-transform: rotate(316.8deg);
    -o-transform: rotate(316.8deg);
    transform: rotate(316.8deg);
}

.c100.p89 .bar {
    -webkit-transform: rotate(320.4deg);
    -moz-transform: rotate(320.4deg);
    -ms-transform: rotate(320.4deg);
    -o-transform: rotate(320.4deg);
    transform: rotate(320.4deg);
}

.c100.p90 .bar {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
}

.c100.p91 .bar {
    -webkit-transform: rotate(327.6deg);
    -moz-transform: rotate(327.6deg);
    -ms-transform: rotate(327.6deg);
    -o-transform: rotate(327.6deg);
    transform: rotate(327.6deg);
}

.c100.p92 .bar {
    -webkit-transform: rotate(331.2deg);
    -moz-transform: rotate(331.2deg);
    -ms-transform: rotate(331.2deg);
    -o-transform: rotate(331.2deg);
    transform: rotate(331.2deg);
}

.c100.p93 .bar {
    -webkit-transform: rotate(334.8deg);
    -moz-transform: rotate(334.8deg);
    -ms-transform: rotate(334.8deg);
    -o-transform: rotate(334.8deg);
    transform: rotate(334.8deg);
}

.c100.p94 .bar {
    -webkit-transform: rotate(338.4deg);
    -moz-transform: rotate(338.4deg);
    -ms-transform: rotate(338.4deg);
    -o-transform: rotate(338.4deg);
    transform: rotate(338.4deg);
}

.c100.p95 .bar {
    -webkit-transform: rotate(342deg);
    -moz-transform: rotate(342deg);
    -ms-transform: rotate(342deg);
    -o-transform: rotate(342deg);
    transform: rotate(342deg);
}

.c100.p96 .bar {
    -webkit-transform: rotate(345.6deg);
    -moz-transform: rotate(345.6deg);
    -ms-transform: rotate(345.6deg);
    -o-transform: rotate(345.6deg);
    transform: rotate(345.6deg);
}

.c100.p97 .bar {
    -webkit-transform: rotate(349.2deg);
    -moz-transform: rotate(349.2deg);
    -ms-transform: rotate(349.2deg);
    -o-transform: rotate(349.2deg);
    transform: rotate(349.2deg);
}

.c100.p98 .bar {
    -webkit-transform: rotate(352.8deg);
    -moz-transform: rotate(352.8deg);
    -ms-transform: rotate(352.8deg);
    -o-transform: rotate(352.8deg);
    transform: rotate(352.8deg);
}

.c100.p99 .bar {
    -webkit-transform: rotate(356.4deg);
    -moz-transform: rotate(356.4deg);
    -ms-transform: rotate(356.4deg);
    -o-transform: rotate(356.4deg);
    transform: rotate(356.4deg);
}

.c100.p100 .bar {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.c100:hover {
    cursor: default;
}

.c100:hover > span {
    color: #337ab7;
}

.c100:hover:after {
    top: 0.04em;
    left: 0.04em;
    width: 0.92em;
    height: 0.92em;
}

.c100.dark {
    background-color: #777777;
}

.c100.dark .bar,
.c100.dark .fill {
    border-color: #c6ff00 !important;
}

.c100.dark > span {
    color: #777777;
}

.c100.dark:after {
    background-color: #666666;
}

.c100.dark:hover > span {
    color: #c6ff00;
}

.c100.green .bar, .c100.green .fill {
    border-color: #4db53c !important;
}

.c100.green:hover > span {
    color: #4db53c;
}

.c100.green.dark .bar, .c100.green.dark .fill {
    border-color: #5fd400 !important;
}

.c100.green.dark:hover > span {
    color: #5fd400;
}

.c100.orange .bar, .c100.orange .fill {
    border-color: #666 !important;
}

.c100.orange:hover > span {
    color: #666;
}

.c100.orange.dark .bar, .c100.orange.dark .fill {
    border-color: #e08833 !important;
}

.c100.orange.dark:hover > span {
    color: #e08833;
}

/* to hide button if whole field is deactivated */
tr.danger .openModal {
    display: none;
}

.highlightTd {
    background-color: #B0BED9;
}

/****************************************************************
 *
 * CSS Percentage Circle END
 * Author: Andre Firchow
 *
*****************************************************************/


.break-word {
    word-break: break-word;
}


.inputElementsHidden .inputValue,
.inputElementsHidden .unit,
.inputElementsHidden .field_quality,
.inputElementsHidden .co2factorInput,
.inputElementsHidden .show_modal_energy,
.inputElementsHidden .show_modal_nebenrechner,
.inputElementsHidden:not(.onlyCommentShown) .input-comment {
    visibility: hidden;
    height: 0px;
}

.field-container {
    padding-bottom: 0px;
}

.deleted .btn {
    text-decoration: line-through;
    opacity: 0.65;
    cursor: not-allowed;
}
.deleted .delete-file {
    display: none;
}
.file-download {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jOrgChart table {
    background-color: transparent;
    border: none;
}

a.btn {
    text-decoration: none;
}

.r_crumb {
    color: #777777;
}

/* in submenus the padding of the right of icons should be equal */
li span.fa {
    width: 1.5em;
}

.jOrgChart .node {
    width: 180px !important;
    padding: 5px;
    color: #548dc6;
    font-size: 1em;
}

.jOrgChart .node hr {
    margin: 5px;
}

table {
    border-radius: 5px;
}

.mainNavbar {
    border-radius: 0px;
    margin-bottom: 0px;
}

.headerLogo {
    padding: 10px;
}

.headerLogo a:hover {
    text-decoration: none;
}

.headerLogo img {
    max-width: 200px;
    max-height: 75px;
}

.header {
    padding: 10px 15px 10px 15px;
}

.headerContent {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    padding-top: 10px;
}

.headerContent h2 {
    margin: 0;
    padding: 0;
    line-height: normal;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background-color: #548dc6;
}

.bootstrap-switch {
    border-width: 0 1px 4px 1px;
    font-size: 12px;
    border-color: #bbb;
}

.bootstrap-switch .bootstrap-switch-handle-on {
    border-radius: 0px;
}

/* fixes: https://github.com/Bttstrp/bootstrap-switch/issues/624#issuecomment-319625864 */
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
    vertical-align: baseline;
}

.well-xs {
    padding: 3px;
    margin-bottom: 3px;
}

.node-cell .organigramIconset {
    justify-content: space-evenly;
    align-items: center;
}

.organigramIconset {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}


/* CSS filter generator to convert from black to target hex color https:// codepen.io / sosuke / pen/Pjoqqp */
/* icons from https:// www . flaticon . com/ */
.organigramIconset img {
    max-width: 1.5em;
    padding: 0.1em;
    filter: invert(47%) sepia(1%) saturate(0%) hue-rotate(136deg) brightness(98%) contrast(84%);
}

.organigramIconset img.oiBeige {
    filter: invert(79%) sepia(18%) saturate(502%) hue-rotate(354deg) brightness(104%) contrast(104%);
}

.organigramIconset img.oiBlue {
    filter: invert(67%) sepia(4%) saturate(2641%) hue-rotate(168deg) brightness(88%) contrast(82%);
}

.organigramIconset img.oiGreen {
    filter: invert(43%) sepia(19%) saturate(729%) hue-rotate(57deg) brightness(91%) contrast(86%);
}

.organigramIconset img.oiViolet {
    filter: invert(33%) sepia(8%) saturate(2207%) hue-rotate(249deg) brightness(95%) contrast(88%);
}

.organigramIconset img.oiWhite {
    filter: brightness(0) invert(1) !important;
}


.nodeLogo {
    margin-bottom: 6px;
}

.organigram_search_result .organigramIconset {
    justify-content: flex-start;
}

.organigram_search_result .nodeLogo {
    display: none;
}

.organigram_search_result hr {
    visibility: hidden;
    margin: 3px;
}

.organigram_search_result {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.organigram_search_result li {
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 1;
}

.panel-heading-lg {
    font-size: 18px;
}

.data_extrainfo th {
    vertical-align: top !important;
}

.evaluationFinished {
    color: #aaca4c !important;
}

.newColumnCell {
    border-left: 1px solid #eeeeee !important;
}

#present-overlay {
    z-index: 800;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 5px;
    max-width: 35%;
}

#present-overlay .alert {
    padding: 10px;
}

#present-overlay > div {
    margin: 5px;
}

.present-overlay-position {
    font-size: 8px;
}

.consistency-overlay {
    display: inline-block;
    z-index: 10;
    position: fixed;
    top: 10px;
    right: 175px;
}

/** customized  **/
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
    background-color: transparent;
    color: #ccc;
}

/* fixes select2 search text to be cut off when initialized hidden (e.g. in collapsed panel) */
.select2-container li:only-child, .select2-container li:only-child input:placeholder-shown {
    width: 100% !important;
}

/* fixes .label overlapping x in select2 */
.select2-container .label {
    display: inline-block;
}

/* fixes muted/grey text unreadable in highlighted select2/chosen */
.select2-container--bootstrap .select2-results__option--highlighted .text-muted,
.chosen-container .chosen-results li.highlighted .text-muted {
    color: #CCC;
}

.error-cell, .has-error .selec2-container, .has-error .select2-container--bootstrap .select2-selection {
    border-color: #a94442;
    background-color: #fad1bd;
}

/*
    Override the static px width select2 sets on init, always keep on 100% to be responsive
    https://stackoverflow.com/questions/45276778/select2-not-responsive-width-larger-than-container
*/
.select2 {
    width: 100% !important;
}

.panel-heading .checkbox {
    margin: 0 !important;
}

.listBlock {
    max-height: 100px;
    overflow-y: auto;
}

.tableFlexContainer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

/** Highlight an element by pulsating the background color */
.pulseHighlight {
    background-color: initial;
    animation-name: pulseHighlight;
    animation-duration: 500ms;
    animation-iteration-count: 5;
}

.pulseHighlight input {
    background: transparent;
}

@keyframes pulseHighlight {
    0% {
        background-color: initial;
    }
    50% {
        background-color: rgba(255, 202, 10, 0.3);
    }
    100% {
        background-color: initial;
    }
}

.row.row-grid [class*="col-"] + [class*="col-"] {
    margin-top: 15px;
}

@media (min-width: 1200px) {
    .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0;
    }
}

.copyRbiData, .copyRbiDatas {
    cursor: pointer;
}

.copyRbiData:before, .copyRbiDatas:before {
    content: "\f0c5";
}

.user-avatar {
    border-radius: 50%;
    background-color: #ccd6e2;
    border: 1px solid #b5c9d5;
    color: #31708f;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    display: inline-block;
    margin: 0 0.5em;
    cursor: default;
    flex-shrink: 0;
}

.user-avatar.deleted {
    background-color: #eee;
    border: 1px solid #eeeeee;
    color: #aaa;
}

.addParenthesis:before {
    content: '(';
}

.addParenthesis:after {
    content: ')';
}

.evaluationInfoIcon {
    filter: invert(100%) sepia(0%) saturate(7476%) hue-rotate(110deg) brightness(98%) contrast(108%);
    width: 1em;
}

/* coloris.js full color input type field */
.clr-field button {
    width: 100% !important;
    height: 100% !important;
}

.highcharts-drillup-button {
    display: none;
}

/* hides specific input elements when not-relevant checkbox is ticked */
.not-relevant .hidden-not-relevant {
    display: none;
}

input[type="file"] {
    width: 100%;
}

/* datatables stuff */
table {
    width: 100%;
}
/* do not pull organigram table to full width */
.jOrgChart table {
    width: auto;
}

.dataTables_paginate {
    float: right;
}
.dtfc-right-top-blocker{
    display:none!important;
}
.hide_column, #commentsTable_wrapper .dataTables_empty, .FixedHeader_Left .dataTables_empty {
    display: none;
}

.dataTables_scrollHeadInner .table {
    margin-bottom: 0;
}

#footerImgContainer {
    display: flex;
    column-gap: 60px;
    row-gap: 30px;
    justify-content: space-evenly;
    flex-flow: row wrap;
    align-items: center;
}

#footerImgContainer img {
    opacity: 70%
}

#footerImgContainer img:hover {
    opacity: 100%
}

.fixedWidthText {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* overwrite datatable select color */
table.dataTable tbody>tr.selected>td, table.dataTable tbody>tr>.selected>td {
    background-color: #6385a6 !important;
    box-shadow: none !important;
}

/* fix button text/icon color on selected rows in datatable */
table.dataTable > tbody > tr.selected a.btn {
    color: #fff;
}
table.dataTable > tbody > tr.selected a.btn-default {
    color: #666;
}

/* fix positioning of selected datatable row checkbox */
table.dataTable > tbody > tr.selected > td.select-checkbox:after,
table.dataTable > tbody > tr.selected > th.select-checkbox:after {
    margin-top: -23px;
    margin-left: -7px;
}

/*
  To prevent the text from turning white when the row is highlighted.
  This would be a problem because tables have a light background color
  and if the text turns white, it would be illegible.
  */
table.dataTable > tbody > tr.selected table {
    color: #333;
}

/* allow labels to break text to prevent tables from overflowing page width */
.dataTable .label {
    white-space: normal;
    display: inline-block;
    text-align: left;
    margin-bottom: 3px;
}

.esgBackground {
    background-size: cover;
    background-image: url('../images/esgBackground.jpg');
}

.highlighted {
    background-color: #c6e0b4 !important;
}

.flashy {
    background-color: #B94A48;
    transition: background-color 500ms linear;
}

.table > thead > tr > th {
    vertical-align: top;
}

/* fix position of sort icons to be always aligned top */
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:before {
    top: 8px;
}
/* fix position of sort icons to be always aligned top */
table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:after {
    top: 17px
}

/* fix scaling of login buttons in Safari */
#login_login, #reset-password {
    white-space: normal;
}

#reset-password {
    height: fit-content !important
}

.gridItem {
    background-color: #fff;
    padding: 5px;
}

.gridContainer {
    display: grid;
    background-color: #eeeeee;
    grid-gap: 1px;
    border: 1px solid #eeeeee;
    overflow: auto;
}

.gridGroup {
    display: contents;
}

/**
used in gwoe testpoints in data input - Umwelt - Emissionen und Schafstoffe table
 */
.gridSticky {
    position: sticky; left: 0; z-index: 300;
}

.gridContainer.gridContainerStriped .gridGroup:nth-child(even) .gridItem {
    background-color: #f5f4f4;
}

.has-warning-custom.input-group-addon {
    border-color: #ffb400;
    background-color: #fdeab6;
}

.has-success-custom.input-group-addon {
    border-color: #82b857;
    background-color: #e1edd5;
}

/* overwrite autosize.js behaviour of blocking horizontal resizing */
/* max-width and max-height makes textareas dont overlap its parent https://stackoverflow.com/questions/3899463 */
textarea {
    resize: both !important;
    max-width: 100%;
    max-height: 100%;
}

.internalComment {
    border: solid 1px #eeeeee;
    background-color: #f5f5f5;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 5px;
}

.small {
    font-size: 0.85em;
}

.collectionItemFlex {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    align-items: flex-start;
}

.bigtooltip {
    max-width: 850px;
}

.showMonaCalculator {
    position: absolute;
}

.monaCalculator {
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    z-index: 500;
    border: 1px solid #eeeeee;
    border-top: 0px;
    padding: 5px;
    width: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.monaCalculatorCurrentInput {
    text-align: right;
    font-size: larger;
    word-wrap: break-word;
    margin: 5px;
    width: 100%;
    min-height: 1.25em;
    line-height: 1.25;
    padding-bottom: 3px;
    border-bottom: 1px #eeeeee solid;
}

.monaCalculatorKeypad {
    display: grid;
    grid: repeat(5, 25px) / repeat(4, 25px);
    grid-row-gap: 5px;
    grid-column-gap: 5px;
}

.with-95 {
    width: 95%;
}

.display-flex {
    display: flex;
}

.overflow-break-word{
    overflow-wrap: break-word;
}

table th.selectColumn {
    width: 10px;
}

table th.selectColumn {
    width: 10px;
}

.flexTwoColSpaceBetween {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
}

.flexStandardGap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
}

.flexOneColLeft {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.flexOneColRight {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: right;
}

.edit-organigram-options .checkbox {
    margin: 0;
    display: inline-block;
}

.edit-organigram-options .checkbox input {
    position: relative;
    margin: 0;

}

.input-collection > div:last-child > hr, .input-collection > div:last-child > div:last-child > hr, .input-collection > div:last-child > div > div > div:last-child > hr {
    margin-bottom: 0;
}

.no-style-hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

.panel[class*="massnahmeItem"] > .panel-body > .row {
    padding-bottom: 15px;
}

div[id^="generic_node_input_heading"] > .panel > .panel-body {
    padding-bottom: 0;
}

.noUi-value-large {
    transform: translate(-50%,70%) !important;
}

.esrs-sm-slider-container, .esrs-sm-likelihood-slider-container {
    margin: 5px 15px 40px;
    width: 130px;
    min-width: 130px;
}

.esrs-sm-detail-graph-container {
    display: block;
    overflow-x: auto;
}

.esrs-sm-analysis-badge, .esrs-sm-analysis-badge-row {
    display: inline-block;
}

.esrs-sm-detail-graph-cell {
    min-width: 120px;
}

.esrs-sm-detail-graph-cell .label {
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

tbody tr:not(:first-child) td.esrs-sm-detail-graph-cell {
    border-top: 2px solid #858585;
}

tbody td:not(:last-child).esrs-sm-detail-graph-cell {
    border-right: 2px solid #858585;
}

.sticky-tab-menu {
    position: sticky;
    top: 0px;
    z-index: 400;
    background-color: #f5f4f4;
}

.sticky-save-button-container {
    position: sticky;
    bottom: 0;
    padding: 0.2em 1em;
    border-radius: 5px;
    background-color: #eee;
    z-index: 400;
}

.info-container {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.5;
    transition: opacity 1s; /* Adjust the timing here */
}

.info-container:hover {
    -webkit-line-clamp: unset;
    opacity: 1; /* Adjust the opacity level when hovered */
}

.noUi-value-sub, .noUi-value-large {
    color: #666 !important;
}

div[class^='overviewResult'] .modal-content, h3.overviewHeader .modal-content {
    color: #000000;
    line-height: 1.5em;
}

.black {
    color: #000000;
}

.field-and-substance-val-text {
    padding-top: 5px;
    padding-left: 10px;
}

.externalUpload img {
    max-width: 100px;
    max-height: 100px;
}

.externalUploadButton input[type='file'] {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    opacity: 0;
}

.externalUploadButton {
    position: relative;
    cursor: pointer;
}
/* https://stackoverflow.com/questions/7554845/the-cursorpointer-property-doesnt-apply-to-file-upload-buttons-in-webkit-brows */
.externalUploadButton ::-webkit-file-upload-button {
    cursor: pointer;
}

.fa-language-esg-cockpit:before {
    content: "\f1ab"; }

.bootstrap-switch .bootstrap-switch-label {
    background: #ddd;
}

#welcome-page div.information {
    display:flex;
    justify-content:space-between;
}

#welcome-page div.information a {
    padding-top: 6px;
}

.organigramIconset .btn {
    height: 30px;
    width: 30px;
    padding: 5px 7px;
}

.bootstrap-switch {
    border: none;
    border-radius: 0;
}

.bootstrap-switch .boootstrap-switch-handle-on.bootstrap-switch-primary {
    background-color: #337ab7 !important;
}

.bootstrap-dialog .modal-header {
    border-radius: 0;
}

.bootstrap-switch.bootstrap-switch-focused {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.collection-add:hover {
    background-color: #82b857;
    border-color: #82b857;
}

#generic_node_input_heading164_field_group_0_products .col-md-1 {
    width: auto;
}

.input-group {
    border-right: none;
}

.form-group .panel-heading,
.form-group .panel-heading a {
    background-color: white;
    color: black;
}

div.dt-button-collection {
    padding: .5rem 2.25rem .5rem .5rem;
}

.header,
.navbar-collapse,
.breadCrumbContainer,
.container-fluid {
    width: 90%;
    margin: auto;
}

.headerNavbar {
    width: 300px;
}


.gwoe_matrix {
    right: 3px;
    position: relative;
}

a {
    text-decoration: underline;
    text-underline-offset: 1.5px;
}

.small-label {
    color: #548dc6;
    font-size: 10px;
}

.breadcrumb li:first-child a {
    text-decoration: underline;
}

.breadcrumb li.active,
.breadcrumb > li + li:before {
    color: #548dc6
}


/* fix to make info icons the same color as the label color */
.label a {
    text-underline-offset: 1.5px;
}

.zoomViewportOuter .btn-group > .btn {
    height: 36px !important;
    border: 3px solid #f4f5f7 !important;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .field-container.input-collection .substance-container, .input-comment {
        width: 26%;
    }

    .field-container.input-collection .inputValue {
        width: 30% !important;
    }
}

.dropdown-menu {
    padding: 20px 5px;
}

.dropdown-menu li {
    padding: 2px 0;
}

.panel > .panel-heading + .panel-body {
    color: black;
}

.panel-success > .panel-body {
    color: #336633;
}

.panel-info > .panel-body {
    color: #756d96;
}

.panel-primary > .panel-body {
    color: #2e5d8c;
}

.panel-danger > .panel-body {
    color: #bd1018;
}

.panel-warning > .panel-body {
    color: #e67302;
}




.mega-dropdown-menu > li ul > li:hover:not(.dropdown-header),
.mega-dropdown-menu > li ul > li:focus:not(.dropdown-header),
.mega-dropdown-menu > li ul > li:not(.dropdown-header) a:hover {
    color: black !important;
    background-color: #f4f5f7;
}

.mega-dropdown-menu > li ul > li.active a,
.mega-dropdown-menu > li ul > li.active {
    color: #000 !important;
    background-color: #f4f5f7;

}





/* vertically center panel-heading text when adding a button on the right */
.panel-heading.with-button {
    line-height: 36px;
}


/* overwrite datatable select color */
table.dataTable tbody > tr.selected > td, table.dataTable tbody > tr > .selected > td {
    background-color: #2e5d8c !important;
}

table.dataTable > tbody > tr.selected .noUi-value-sub,
table.dataTable > tbody > tr.selected .noUi-value-large {
    color: #fff !important;
}







.noUi-value-large {
    transform: translate(-50%, 70%) !important;
}

.sticky-save-button-container {
    background-color: #f4f5f7;
}

.input-field-comment .btn,
.input-collection .btn {
    width: 30px;
    padding: 6px 8px !important;
}

.noUi-value-sub, .noUi-value-large {
    color: #666;
}

.statisticsItem {
    box-shadow: 0 0 5px rgba(193, 193, 193, 0.5);
    margin-top: 1rem;
    border-radius: 15px;
}

.highcharts-label > text {
    font-weight: normal !important;
}

.highcharts-series-inactive {
    opacity: 0.5 !important;
}

.checkbox > label {
    display: contents;
}

table.dataTable>tbody>tr>td.select-checkbox:before,table.dataTable>tbody>tr>td.select-checkbox:after,table.dataTable>tbody>tr>th.select-checkbox:before,table.dataTable>tbody>tr>th.select-checkbox:after {
    left: 70%;
}

/** Override default boostrap dialog colors */
.bootstrap-dialog.type-info .modal-header {
    background-color: #548dc6;
}

.label-esrs-sm-pos {
    background-color: #aaca4c;
}

.label-esrs-sm-pos-light {
    background-color: #e2edc2;
}

.label-esrs-sm-neg {
    background-color: #ef6e2f;
}

.label-esrs-sm-neg-light {
    background-color: #fad1bd;
}

.panel-heading > .btn.pull-right{
    background-color: #2e5d8c;
    border-color: #2e5d8c;
}

/* Sidebar Styles */
.esrs-sidebar {
    position: fixed;
    right: -266px;
    top: 20%;
    width: 300px;
    display: flex;
    transition: 0.3s;
    z-index: 1010;
    background-color: inherit;
}

/* Sidebar body */
.esrs-sidebar .esrs-sidebar-body {
    width: 266px;
    padding-left: 0.25em;
    background-color: #efefef;
}

/* Sidebar links */
.esrs-sidebar a {
    text-decoration: none;
}

/* Sidebar hover effect */
.esrs-sidebar:hover {
    right: 0;
}

.esrs-sidebar:hover .esrs-sidebar-icon {
    transform: rotate(180deg);
}

/* Sidebar toggle button */
.esrs-sidebar .esrs-sidebar-toggle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 15px;
    padding: 15px 0;
    width: 34px;
    cursor: pointer;
}

/* Sidebar panel label */
.esrs-sidebar .esrs-panel-label {
    writing-mode: vertical-rl;
    font-size: 1.5em;
    white-space: nowrap;
}

/* List styles for the sidebar */
.esrs-sidebar ol {
    padding-left: 0;
    list-style: none;
    counter-reset: item; /* Initialize counter for list numbering */
    margin: 0;
}

/* List item styles */
.esrs-sidebar li {
    position: relative;
    padding: 0.5em 0.5em 0.5em 2.5em; /* Space for custom marker */
}

/* Custom list marker styles */
.esrs-sidebar li::before {
    content: counter(item) ". "; /* Add number */
    counter-increment: item; /* Increment the counter */
    position: absolute;
    left: 0.5em; /* Positioning the marker */
}

/* Marker styles for specific items */
.esrs-sidebar .esrs-sidebar-marker-3, .esrs-sidebar .esrs-sidebar-marker-3 a {
    color: #2e5d8c;
    background-color: #d4e2f1;
    font-weight: bold;
}

.esrs-sidebar .esrs-sidebar-marker-2, .esrs-sidebar .esrs-sidebar-marker-2 a {
    color: #666;
    background-color: #ddd;
}

.esrs-sidebar .esrs-sidebar-marker-1, .esrs-sidebar .esrs-sidebar-marker-1 a {
    color: #fff;
    background-color: #548dc6;
    font-weight: bold;
}

.esrs-sidebar .esrs-sidebar-timeline {
    padding: 0.5em;
}

.w-70-percent {
    width: 70% !important;
}

.w-100-percent {
    width: 100% !important;
}

.lead-column {
    background-color: #d4e2f1 !important;
    color: #2e5d8c !important;
}