@font-face {
    font-family: 'Inter-Bold';
    src: url('../Fonts/Inter_18pt-Bold.woff2') format('woff2'), url('../Fonts/Inter_18pt-Bold.woff') format('woff'), url('../Fonts/Inter_18pt-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter-Medium';
    src: url('../Fonts/Inter_18pt-Medium.woff2') format('woff2'), url('../Fonts/Inter_18pt-Medium.woff') format('woff'), url('../Fonts/Inter_18pt-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter-SemiBold';
    src: url('../Fonts/Inter_18pt-SemiBold.woff2') format('woff2'), url('../Fonts/Inter_18pt-SemiBold.woff') format('woff'), url('../Fonts/Inter_18pt-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    src: url('../Fonts/Inter_18pt-Regular.woff2') format('woff2'), url('../Fonts/Inter_18pt-Regular.woff') format('woff'), url('../Fonts/Inter_18pt-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Tooltip';
    src: url('../Fonts/Inter_18pt-Regular.woff2') format('woff2'), url('../Fonts/Inter_18pt-Regular.woff') format('woff'), url('../Fonts/Inter_18pt-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Tooltip';
    font-weight: bold;
    src: url('../Fonts/Inter_18pt-Bold.woff2') format('woff2'), url('../Fonts/Inter_18pt-Bold.woff') format('woff'), url('../Fonts/Inter_18pt-Bold.ttf') format('truetype');
}


@font-face {
    font-family: 'Nunito-Bold';
    src: url('../Fonts/Nunito-Bold.woff2') format('woff2'), url('../Fonts/Nunito-Bold.woff') format('woff'), url('../Fonts/Nunito-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Nunito-SemiBold';
    src: url('../Fonts/Nunito-Bold.woff2') format('woff2'), url('../Fonts/Nunito-Bold.woff') format('woff'), url('../Fonts/Nunito-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Nunito-ExtraBold';
    src: url('../Fonts/Nunito-ExtraBold.woff2') format('woff2'), url('../Fonts/Nunito-ExtraBold.woff') format('woff'), url('../Fonts/Nunito-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Nunito-Black';
    src: url('../Fonts/Nunito-Black.woff2') format('woff2'), url('../Fonts/Nunito-Black.woff') format('woff'), url('../Fonts/Nunito-Black.ttf') format('truetype');
}


body {
    font-family: 'Inter-Bold';
    background-color: #c64646;
}


#cont-notes {
    z-index: -100;
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 20%;
    top: 13.7%;
    right: 9.05%;
    padding: 2vw;
    background-color: #ffffff;
    color: #000000;
    font-family: Tooltip;
    font-size: 100%;
    border-radius: 2vw;
}
    #cont-notes h3 {
        margin: 1vw 0px 1vw 0px;
        font-size: 120%;
    }
        #cont-notes h3:first-of-type{
            margin: 0px 0px 1vw 0px;
        }
    #cont-notes .bubble {
        position: absolute;
        top: -0.7vw;
        right: 20%;
        margin-top: 2px;
        height: 0.7vw;
        width: auto;
    }
    #cont-notes a, #cont-notes a:link, #cont-notes a:visited {
        color: #c64646;
        text-decoration: underline;
    }
        #cont-notes a:hover, #cont-notes a:visited:hover {
            text-decoration: none;
        }


    #ToolTipDiv {
        max-width: 20vw;
        font-family: Tooltip, Arial;
    }
#ToolTipDiv li {
    margin-bottom: 0.5vw;
}

#tips-icon div {
    color: #c64646;
}

#tips p {
    font-family: Inter;
}

#filter-refresh-apply a {
    background-color: #c64646;
}

#welcome {
    z-index: 600;
    position: absolute;
    top: 0.5vw;
    margin-top: -1px;
    left: 0.5vw;
    margin-left: -1px;
    right: 0.5vw;
    margin-right: -1px;
    bottom: 0.5vw;
    margin-bottom: -1px;
    border-radius: 1vw;
    background-color: #ffffff;
    padding: 3%;
    color: #000000;
    /*display: flex;*/
    display: none;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity linear 200ms;
}
    #welcome.hidden {
        opacity: 0;
    }
    #welcome ._text {
        margin: 0px;
        width: 80%;
    }
        #welcome ._text h2 {
            margin: 0px 0px 5vh 0px;
            font-family: 'Nunito-ExtraBold';
            font-size: 350%;
            color: #c64646;
        }
        #welcome ._text ul {
            font-family: Tooltip;
            margin-top: 0.5vh;
        }
        #welcome ._text p, #welcome ._text ._p {
            margin: 1vh 0px 0px 0px;
            line-height: 130%;
            font-size: 110%;
            font-family: Tooltip;
        }
    #welcome a, #welcome a:link, #welcome a:visited {
        color: #c64646;
        text-decoration: underline;
    }
        #welcome a:hover, #welcome a:visited:hover {
            text-decoration: none;
        }

@media (max-aspect-ratio: 2) {
    #welcome ._text p, #welcome ._text ._p {
        margin: 1.9vh 0px 0px 0px;
        line-height: 130%;
        font-size: 110%;
    }
}
@media (max-aspect-ratio: 1.9) {
    #welcome ._text p, #welcome ._text ._p {
        margin: 2vh 0px 0px 0px;
        line-height: 130%;
        font-size: 110%;
    }
}
@media (max-aspect-ratio: 1.8) {
    #welcome ._text p, #welcome ._text ._p {
        margin: 1.5vh 0px 0px 0px;
        line-height: 135%;
        font-size: 115%;
    }
}
@media (max-aspect-ratio: 1.6) {
    #welcome ._text p, #welcome ._text ._p {
        margin: 1.5vh 0px 0px 0px;
        line-height: 137%;
        font-size: 117%;
    }
}
@media (max-aspect-ratio: 1.55) {
    #welcome ._text p, #welcome ._text ._p {
        margin: 1.5vh 0px 0px 0px;
        line-height: 135%;
        font-size: 115%;
    }
}
@media (max-width: 1050px) {
    #welcome ._text p, #welcome ._text ._p {
        margin: 1.5vh 0px 0px 0px;
        line-height: 140%;
        font-size: 120%;
    }
}
@media (max-width: 1002px) {
    #welcome ._text p, #welcome ._text ._p {
        margin: 1.5vh 0px 0px 0px;
        line-height: 130%;
        font-size: 100%;
    }
}


            #welcome ._text p:first-child {
                margin: 0px 0px 0px 0px;
            }
    #welcome ._buttons {
        display: block;
        height: 3vw;
        margin-top: 2vw;
        font-size: 100%;
    }
        #welcome ._buttons button {
            cursor: pointer;
            display: inline-flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            height: 100%;
            border: 2px solid #51bbaf;
            border-radius: 50px;
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 1.5vw;
            padding-right: 1.5vw;
            margin: 0px;
            background-color: #51bbaf;
            color: inherit;
            font-family: inherit;
            font-size: inherit;
            width: 10vw;
            background-image: url(../Graphics/get-started.svg?111125-3);
            background-position: right 1vw center;
            background-repeat: no-repeat;
            background-size: auto 30%;
        }
@media (max-width: 1100px) {
    #welcome ._buttons button {
        width: 14vw;
    }
}
            #welcome ._buttons button:hover {
                background-color: transparent;
            }
        #welcome ._buttons a {
            display: inline-flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            margin: 0px 0px 0px 2vw;
            height: 100%;
            border: 2px solid #f78939;
            border-radius: 50px;
            padding-left: 1.5vw;
            padding-right: 1.5vw;
            background-color: #f78939;
            color: inherit;
            text-decoration: none;
        }
            #welcome ._buttons a:hover {
                background-color: transparent;
            }

            #export-ico .td a:link, #export-ico .td a:visited {
                color: #c64646;
            }

#cont-charts-1 .dropdown {
    border-color: #c64646;
}
    #cont-charts-1 .dropdown:hover {
        border-color: rgba(198, 70, 70, 0.7);
    }
    #cont-charts-1 .dropdown .arrow {
        background-image: url(../../FirstNations/Graphics/dd-arr-t.svg?111125-3-1241120-1);
    }
#cont {
    background-color: #c64646;
    background-image: url(../Graphics/bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

#curved-bg {
    background-color: #FCF9EB;
}

#options {
    background-color: rgba(255, 128, 128, 0.5);
}

#cont-logo {
    -webkit-align-items: center;
    align-items: center;
}

#logo {
    width: 80%;
}

#cont-title {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 100%;
}
#cont-title h1 {
    font-size: 110%;
    margin: 0px;
    font-family: Nunito-ExtraBold;
    margin-left: 1vw;
    margin-bottom: 0.6vh;
}
    #cont-title h2 {
        margin: 0px;
        font-size: 65%;
        font-family: Nunito-SemiBold;
        margin-left: 1vw;
    }

#cont-charts-1 .dropdown .list {
    border: 2px solid #c64646;
}

    .cont-chart .dropdown .list .head {
        padding: 6% 1% 1% 2%;
        color: #c64646;
    }
        .cont-chart .dropdown .list .head:first-child {
            padding: 0% 1% 1% 2%;
        }

#options {
    font-family: Inter-Bold;
    position: relative;
    font-weight: normal;
}

#options_cut .list {
    padding: 1vw 0.5vw 1vw 0.5vw;
}
#options .bubble {
    opacity: 0;
    position: absolute;
    top: 10px;
    left: 0px;
    width: 1.2vw;
    height: auto;
    border: none;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    z-index: 202;
}
#options .dropdown .list {
    border: 2px solid #c64646;
}
    #options .dropdown .list .head {
        padding: 8% 1% 4% 2%;
        color: #c64646;
    }
        #options .dropdown .list .head:first-child {
            padding: 0% 1% 4% 2%;
        }
    #options .dropdown .list .no-border {
        border-bottom: none;
    }

#options-title {
    font-family: Nunito-ExtraBold;
    font-weight: normal;
}

#options .dropdown {
    font-family: Inter-Bold;
}

#export-title, #filter-title {
    font-family: Nunito-ExtraBold;
    font-weight: normal;
}

#cont-filter {
    font-family: Inter-Bold;
    font-weight: normal;
}

#filterGroup .dropdown .text {
    font-weight: normal;
}

#cont-export {
    font-family: Inter-Bold;
    font-weight: normal;
}


.chart-title {
    font-family: Nunito-ExtraBold;
    z-index: 100;
    position: absolute;
    top: 1vw;
    left: 1vw;
    font-size: 120%;
    /*font-weight: bold;*/
    color: #c64646;
}

.cont-chart .help {
    cursor: help;
    position: absolute;
    top: 1vw;
    right: 1vw;
    width: auto;
    height: 1.1vw;
    z-index: 120;
}

    .cont-chart .help.zoom {
        height: 1.7vw;
    }

#cont-charts .cutfoot, #cont-charts .measure {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 1vw;
    bottom: 0.5vw;
    height: 1.2vw;
    min-width: 5vw;
    white-space: nowrap;
    padding: 0px 0.6vw 0px 0.6vw;
    background-color: #51bbaf;
    font-size: 80%;
    border-radius: 50px;
}
#cont-charts .zoom .cutfoot, #cont-charts .zoom .measure {
    height: 1.6vw;
    font-size: 70%;
}


#remote_switch {
    z-index: 500;
    position: absolute;
    top: 1.4vw;
    right: 3vw;
    width: 22%;
    height: 1.3vw;
    margin-top: -0.6vw;
    font-size: 85%;
}
    #remote_switch .btn {
        position: relative; /*edit*/
        width: auto; /*edit*/
        height: 100%; /*edit*/
        margin-bottom: 0px;
        font-weight: 500;
        border-radius: 0.6vw;
        line-height: 100%;
        border: 2px solid #000000;
    }
        #remote_switch .btn .text {
            width: 66%;
            color: #000000;
        }
        #remote_switch .btn .slider {
            width: 17%;
            right: 17%;
            background-color: #000000;
            border: 2px solid #000000;
            top: 2px;
            bottom: 2px;
        }
        #remote_switch .btn.active .slider {
            right: 0px;
            top: 2px;
            bottom: 2px;
        }
        #remote_switch .btn .switch {
            width: 34%;
            border: 2px solid #000000;
            top: 0.1vw;
            bottom: 0.1vw;
        }
        #remote_switch .btn .switch .td._left {
            color: #ffffff;
        }
            #remote_switch .btn .switch .td._right {
                color: #000000;
            }
        #remote_switch .btn.active .switch .td._left {
            color: #000000;
        }

        #remote_switch .btn.active .switch .td._right {
            color: #ffffff;
        }


#cont-charts .zoom .chart {
    bottom: 4vw;
}

/*block chart*/
.page-chart {
    overflow: hidden;
}

    .page-chart .page {
        position: relative;
        display: -webkit-flex;
        -webkit-flex-direction: column;
        -webkit-justify-content: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .page-chart .page-item {
        cursor: default;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 18%;
        text-align: center;
        margin-top: 0.6vw;
        border: 1px solid transparent;
        border-radius: 50px;
        padding: 0px;
        line-height: 105%;
    }

    .page-chart .page-item:first-child {
        margin-top: 0px;
    }

        .page-chart .page-item span {
            display: -webkit-flex;
            -webkit-align-items: center;
            -webkit-justify-content: start;
            display: flex;
            align-items: center;
            justify-content: start;
            text-align: left;
            position: absolute;
            top: 0px;
            left: 30%;
            width: 70%;
            height: 100%;
        }
        .page-chart .page-item div {
            display: inline-block;
        }
            .page-chart .page-item div:first-child {
                margin-right: 0.3vw;
            }
            .page-chart .page-item span:first-child {
                -webkit-justify-content: center;
                justify-content: center;
                left: 0px;
                width: 26%;
                border-radius: 50px;
                font-size: 140%;
            }

         /*ikone*/
        .page-chart .page-item.ikone{
            height: 22%;
            margin-top: 0.3vw;
        }
        .page-chart .page-item.ikone span {
            display: -webkit-flex;
            -webkit-align-items: center;
            -webkit-justify-content: start;
            display: flex;
            align-items: center;
            justify-content: start;
            position: absolute;
            top: 0px;
            left: 40%;
            width: auto;
            right: 0px;
            margin-right: 0.5vw;
            height: 100%;
            font-size: 90%;
            line-height: 110%;
            text-align: left;
        }
            .page-chart .page-item.ikone div {
                display: inline-block;
            }
            .page-chart .page-item.ikone div:first-child {
                margin-right: 0.3vw;
            }

            .page-chart .page-item.ikone span:first-child {
                -webkit-justify-content: center;
                justify-content: center;
                left: 0.5vw;
                right: auto;
                margin-right: 0px;
                right: 85%;
                border-radius: 0px;
                font-size: inherit;
                padding-right: 0px;
                text-align: center;
            }
            .page-chart .page-item.ikone span:first-child img {
                max-height: 70%;
                max-width: 70%;
            }
            .page-chart .page-item.ikone span._vrijednost {
                -webkit-justify-content: center;
                justify-content: center;
                left: 15%;
                right: auto;
                margin-right: 0px;
                width: 25%;
                border-radius: 50px;
                font-size: 140%;
                padding-right: 0px;
                text-align: center;
            }

.btn:not(.active) .switch .td._left {
    color: #c64646;
}
.btn.active .switch ._right {
    color: #c64646;
}


.paginator {
    font-family: Inter, Arial;
    font-size: 0.68vw;
}

.legend {
    font-size: 80%;
    font-weight: normal;
    overflow: hidden;
}

.dropdown .text {
    font-weight: normal;
}

#footer-desc {
    font-weight: normal;
}

.cont-ico div.txt, .cont-ico-new div.txt {
    font-weight: normal;
}