﻿
.sustainabilityPanel {
    margin-bottom: 20px;
    background-color: #fff;
}
.wrapper {
    display: inline-block;
    margin-right: 25px;
}

.accordion {
    margin-left: 10px;
}

.item {
    height: 106px;
    width: 106px;
    margin-bottom: 2px;
    padding: 2px 2px 2px 1.5px;
    box-sizing: unset;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.title {
    color: white;
    display: inline-block;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .title img {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
        will-change: opacity, transform !important;
        transition: all .3s ease-out !important;
    }

        .title img:hover {
            box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.5), 0 4px 15px 0 rgba(0, 0, 0, 0.5) !important;
        }

.sdgContent {
    max-height: 0px;
    margin-left: 2px;
    overflow: hidden;
    transition: all 0.1s cubic-bezier(1,0,1,0);
}

    .sdgContent.expand {
        height: auto;
        max-height: 9999px;
        transition: all .3s ease-out !important;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .sdgContent p {
        color: white;
        margin-left: 10px;
        margin-bottom: 10px;
    }

    .sdgContent h2 {
        color: white;
        padding: 10px 0px 0px 10px;
        font-weight: bold;
    }

.title.opacity {
    opacity: 0.5;
}

.sdgTitle {
    display: flex;
    justify-content: space-between;
}

    .sdgTitle label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
    }

    .sdgTitle a {
        cursor: pointer;
        margin-right: 10px;
    }

.h2 {
    font-size: 30px;
}

.openPanelButton {
    display: flex;
    justify-content: end;
}

/*.header-main {
    margin-right: 95px;
}*/

.sdgDescription {
    margin-top: 20px;
    margin-bottom: 100px;
}

    .sdgDescription p {
        margin-bottom: 10px;
    }

/*	Slider - */
.ui-slider.ui-widget-content {
    background: #ebebeb;
    border: none;
}

/*	Sliders - Horizontal */
.ui-slider-horizontal {
    height: 6px;
}

    .ui-slider-horizontal .ui-slider-handle {
        top: -7px;
    }

/*	Sliders - Vertical */
.ui-slider-vertical {
    display: inline-block;
    width: 6px;
}

    .ui-slider-vertical .ui-slider-handle {
        left: -7px;
    }

/*	Sliders - UI Handle */
.ui-slider .ui-slider-handle {
    background: #d9d9d9;
    border: 6px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
    cursor: pointer;
    height: 20px;
    width: 20px;
}

    .ui-slider .ui-slider-handle:hover {
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
    }

/*	Sliders - UI Handle (Fix Windows Mobile Devices) */
.ui-slider .ui-slider-handle {
    -ms-touch-action: none;
    touch-action: none;
}

/*	Sliders - Range */
.ui-slider .ui-slider-range {
    background: #d9d9d9;
}

/*	Sliders - Contextual */
.slider-primary .ui-slider-range,
.slider-primary .ui-slider-handle {
    background: #CCC;
}

.slider-gradient.slider-primary .ui-slider-range,
.slider-gradient.slider-primary .ui-slider-handle {
    background-image: -webkit-linear-gradient(#e6e6e6 0, #CCC 50%, #b3b3b3 100%);
    background-image: linear-gradient(to, #CCC 50%, #b3b3b3 100%);
}

.slider-gradient.ui-slider-vertical.slider-primary .ui-slider-range,
.slider-gradient.ui-slider-vertical.slider-primary .ui-slider-handle {
    background-image: -webkit-linear-gradient( left, #e6e6e6 0, #CCC 50%, #b3b3b3 100%);
    background-image: linear-gradient(to right, #e6e6e6 0, #CCC 50%, #b3b3b3 100%);
}

.slider-success .ui-slider-range,
.slider-success .ui-slider-handle {
    background: #47a447;
}

.slider-gradient.slider-success .ui-slider-range,
.slider-gradient.slider-success .ui-slider-handle {
    background-image: -webkit-linear-gradient(#63bb63 0, #47a447 50%, #388038 100%);
    background-image: linear-gradient(to, #47a447 50%, #388038 100%);
}

.slider-gradient.ui-slider-vertical.slider-success .ui-slider-range,
.slider-gradient.ui-slider-vertical.slider-success .ui-slider-handle {
    background-image: -webkit-linear-gradient( left, #63bb63 0, #47a447 50%, #388038 100%);
    background-image: linear-gradient(to right, #63bb63 0, #47a447 50%, #388038 100%);
}

.slider-warning .ui-slider-range,
.slider-warning .ui-slider-handle {
    background: #ed9c28;
}

.slider-gradient.slider-warning .ui-slider-range,
.slider-gradient.slider-warning .ui-slider-handle {
    background-image: -webkit-linear-gradient(#f1b257 0, #ed9c28 50%, #d18211 100%);
    background-image: linear-gradient(to, #ed9c28 50%, #d18211 100%);
}

.slider-gradient.ui-slider-vertical.slider-warning .ui-slider-range,
.slider-gradient.ui-slider-vertical.slider-warning .ui-slider-handle {
    background-image: -webkit-linear-gradient( left, #f1b257 0, #ed9c28 50%, #d18211 100%);
    background-image: linear-gradient(to right, #f1b257 0, #ed9c28 50%, #d18211 100%);
}

.slider-danger .ui-slider-range,
.slider-danger .ui-slider-handle {
    background: #d2322d;
}

.slider-gradient.slider-danger .ui-slider-range,
.slider-gradient.slider-danger .ui-slider-handle {
    background-image: -webkit-linear-gradient(#db5b57 0, #d2322d 50%, #a82824 100%);
    background-image: linear-gradient(to, #d2322d 50%, #a82824 100%);
}

.slider-gradient.ui-slider-vertical.slider-danger .ui-slider-range,
.slider-gradient.ui-slider-vertical.slider-danger .ui-slider-handle {
    background-image: -webkit-linear-gradient( left, #db5b57 0, #d2322d 50%, #a82824 100%);
    background-image: linear-gradient(to right, #db5b57 0, #d2322d 50%, #a82824 100%);
}

.slider-info .ui-slider-range,
.slider-info .ui-slider-handle {
    background: #5bc0de;
}

.slider-gradient.slider-info .ui-slider-range,
.slider-gradient.slider-info .ui-slider-handle {
    background-image: -webkit-linear-gradient(#85d0e7 0, #5bc0de 50%, #31b0d5 100%);
    background-image: linear-gradient(to, #5bc0de 50%, #31b0d5 100%);
}

.slider-gradient.ui-slider-vertical.slider-info .ui-slider-range,
.slider-gradient.ui-slider-vertical.slider-info .ui-slider-handle {
    background-image: -webkit-linear-gradient( left, #85d0e7 0, #5bc0de 50%, #31b0d5 100%);
    background-image: linear-gradient(to right, #85d0e7 0, #5bc0de 50%, #31b0d5 100%);
}

.slider-dark .ui-slider-range,
.slider-dark .ui-slider-handle {
    background: #171717;
}

.slider-gradient.slider-dark .ui-slider-range,
.slider-gradient.slider-dark .ui-slider-handle {
    background-image: -webkit-linear-gradient(#313131 0, #171717 50%, black 100%);
    background-image: linear-gradient(to, #171717 50%, black 100%);
}

.slider-gradient.ui-slider-vertical.slider-dark .ui-slider-range,
.slider-gradient.ui-slider-vertical.slider-dark .ui-slider-handle {
    background-image: -webkit-linear-gradient( left, #313131 0, #171717 50%, black 100%);
    background-image: linear-gradient(to right, #313131 0, #171717 50%, black 100%);
}

html.dark .ui-slider.ui-widget-content {
    background: #21262d;
}

.reference-card {
    border-bottom: 1px solid #dedede;
    margin-bottom: 20px;
}

.reference-card-title {
    font-size: 14px;
    color: #636363;
    margin-bottom: 10px;
    font-weight: bold;
    font-weight: 700;
}

    .reference-card-title a {
        color: #636363;
        cursor: pointer;
    }

        .reference-card-title a:hover {
            color: #636363;
        }

        .reference-card-title a:active {
            color: #636363;
        }

        .reference-card-title a:focus {
            color: #636363;
        }

.reference-card .description {
    font-size: 12px;
}

    .reference-card .description .reference-card-item {
        margin-bottom: 5px;
        color: #9d9d9d;
        max-width: 70%;
    }

.sustainability-search-card {
    margin-top: 40px;
}

.actvty-srch-pnl {
    margin: 0px;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}

.srch-page-rght-cntr {
    min-height: 100%;
}

.actvty-srch-cntnr {
    min-height: 100%;
}

.loader {
    border-radius: 50%;
    width: 4em;
    height: 4em;
    margin: 60px auto;
    position: relative;
    border-top: 0.5em solid rgba(38,101,217, 0.2);
    border-right: 0.5em solid rgba(38,101,217, 0.2);
    border-bottom: 0.5em solid rgba(38,101,217, 0.2);
    border-left: 0.5em solid #2665d9;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 1.5s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
