html {
    width: 100%;
    height: 100%;
}

@font-face {
  font-family: 'ArialN';
  src: url('ARIALN.woff2') format('woff2'),
       url('ARIALN.woff') format('woff'),
       url('ARIALN.ttf') format('truetype');
}
@font-face {
    font-family: 'TelstraDisplay';
    src: url('../Fonts/TelstraDisplay-Regular.woff2') format('woff2'), url('../Fonts/TelstraDisplay-Regular.woff') format('woff'), url('../Fonts/TelstraDisplay-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'TelstraDisplayBold';
    src: url('../Fonts/TelstraDisplay-Bold.woff2') format('woff2'), url('../Fonts/TelstraDisplay-Bold.woff') format('woff'), url('../Fonts/TelstraDisplay-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'TelstraBody';
    src: url('../Fonts/TelstraText-Regular.woff2') format('woff2'), url('../Fonts/TelstraText-Regular.woff') format('woff'), url('../Fonts/TelstraText-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'TelstraBody1';
    src: url('../Fonts/telstra-text-1.ttf') format('truetype');
}

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    /*font-family: 'Arial Narrow', 'ArialN', sans-serif;*/
    font-family: 'TelstraBody', Arial;
    font-stretch: extra-condensed;
    font-size: 0.8vw;
    background-color: #f96449;
    line-height: 120%;
    /*letter-spacing: -1px;*/
}
@media (max-width: 1100px) {
    body {
        font-size: 8px;
    }
}
/*@media (max-width: 960px) and (max-height: 480px)  {
    body {
        font-size: 0.8vw;
    }
}*/

table {
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
}
th, td {
    padding: 0px;
    text-align: left;
    vertical-align: top;
}

    th:hover, #tbl-header td:hover {
        opacity: 0.7;
    }

.table {
    display: table;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
}
.tr {
    display: table-row;
}
.th, .td {
    display: table-cell;
    padding: 0px;
    text-align: left;
    vertical-align: top;
}


/*CONT*/
#block {
    z-index: 99999;
    opacity: 0.8;
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

/*CONT*/
#cont {
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    min-width: 1000px;
    min-height: 45vw; /*EDIT*/
    height: 100%;
    max-height: 76vw;
    background-color: #f96449;
    overflow: hidden;
}
    #cont .header {
        /*background-color: #f96449;*/
    }

@media (max-width: 1005px) {
    #cont {
        min-height: 750px;
        max-height: 760px;
    }
}

@media (max-width: 990px) {
    #cont {
        min-width: 990px;
        min-height: 495px;
        max-height: 600px;
    }
}

/*@media (min-aspect-ratio: 2.3) and (min-width: 1700px) {
    body {
        font-size: 0.8vw;
    }

    #cont {
        min-height: 31vw;
    }
}*/


/*No data*/
.no-data {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 50px;
    margin-top: -25px;
    line-height: 50px;
    text-align: center;
    font-size: 100%;
}

/*Warning*/
.warning {
    z-index: 999;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background-position: right center;
    background-size: 40px;
    background-repeat: no-repeat;
}
    .warning.yellow {
        background-image: url(../Graphics/warning-yellow.svg?211025-1-1241120-1);
    }
    .warning.red {
        background-image: url(../Graphics/warning-red.svg?211025-1-1241120-1);
    }



/*LOGO*/
#cont-logo {
    margin-left: 1vw;
    margin-bottom: 2vw;
    width: auto;
    height: 14%;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-align-items: start;
    -webkit-justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    font-family: TelstraDisplayBold;
    font-size: 160%;
    color: #ffffff;
}
    #cont-logo span {
        display: block;
        height: 1vw;
    }
    #cont-logo div {
        height: 1.2vh;
        min-height: 0.552vw;
    }
#logo {
    width: 65%;
    height: auto;
}




/*TITLE*/
#cont-title {
    display: block;
    position: absolute;
    top: 0px;
    left: 15%;
    width: 65%;
    height: 14%;
    overflow: hidden;
    font-size: 280%;
    font-weight: bold;
    color: #ffffff;
    background-color: #f5ede2;
    /*background-image: url(../Graphics/bg-header.png?211025-1-1290721-3);
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;*/
}
    #cont-title .table {
        width: 100%;
        height: 100%;
    }
    #cont-title .td {
        vertical-align: middle;
        line-height: 0px;
        padding-left: 1vw;
    }
    #cont-title h1 {
        font-family: TelstraDisplayBold;
        font-size: 135%;
        font-weight: normal;
    }
    #cont-title.header {
        background-color: transparent;
    }



/*ICO*/
/*#cont-ico {
    z-index: 50;
    position: absolute;
    top: 0px;
    right: 2.5%;
    width: auto;
    height: 14%;
}*/
#cont-ico {
    z-index: 50;
    /*position: absolute;
    bottom: 0px;
    left: 0px;*/
    /*width: 14%;
    height: 14%;*/

    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    margin-left: 1vw;
    margin-right: 1vw;
    white-space: nowrap;
}
.cont-ico {
    display: inline-block;
    height: 100%;
}
    .cont-ico.disabled {
        cursor: default;
        opacity: 0.2;
    }
    .cont-ico.disabled .td div:not(.txt){
        cursor: default;
    }

    .cont-ico .table {
        height: 100%;
    }
    .cont-ico .td {
        text-align: center;
        vertical-align: middle;
        line-height: 0px;
        white-space: nowrap;
    }
        .cont-ico .td a, .cont-ico .td a:link {
            text-decoration: none;
            color: inherit;
        }
        .cont-ico .td div:not(.txt), .cont-ico .td a:not(.txt) {
            cursor: pointer;
            display: inline-block;
            width: 100%;
            margin: 0px;
            vertical-align: middle;
        }
        .cont-ico div.txt {
            display: block;
            text-align: center;
            margin-top: 24%;
            font-weight: 700;
            color: #ffffff;
            font-size: 80%;
        }
    .cont-ico img {
        vertical-align: middle;
        border: none;
        width: 2.8vw;
        height: auto;
    }

/*NEW*/
#cont-ico-new {
    z-index: 50;
    position: absolute;
    top: 0px;
    right: 2.5%;
    width: auto;
    height: 14%;
}

.cont-ico-new {
    display: inline-block;
    height: 100%;
    margin-left: 1.5vw;
}

    .cont-ico-new.disabled {
        cursor: default;
        opacity: 0.2;
    }

        .cont-ico-new.disabled .td div:not(.txt) {
            cursor: default;
        }

    .cont-ico-new .table {
        height: 100%;
    }

    .cont-ico-new .td {
        text-align: center;
        vertical-align: middle;
        line-height: 0px;
        white-space: nowrap;
    }

        .cont-ico-new .td a, .cont-ico-new .td a:link {
            text-decoration: none;
            color: inherit;
        }

            .cont-ico-new .td div:not(.txt), .cont-ico-new .td a:not(.txt) {
                cursor: pointer;
                display: inline-block;
                width: 100%;
                margin: 0px;
                vertical-align: middle;
            }

    .cont-ico-new div.txt {
        display: block;
        text-align: center;
        margin-top: 24%;
        font-weight: 700;
        color: #ffffff;
        font-size: 80%;
    }

    .cont-ico-new img {
        vertical-align: middle;
        border: none;
        width: 3.3vw;
        height: auto;
    }






/*LEFT CONT (OPTIONS + TIPS)*/
#cont-options {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 14%;
    height: 100%;
    background-color: transparent;
    /*background-image: url(../Graphics/bg-left.svg);
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;*/
}






/*CHARTS*/
#curved-bg{
    position: absolute;
    top: 14%;
    left: 14%;
    width: 86%;
    height: 86%;
    background-color: #e8e8e8;
    border-radius: 2vw 0px 0px 0px;
    z-index: 51;
}
#cont-charts {
    position: absolute;
    top: 14%;
    margin-top: 1vw;
    left: 15%;
    width: 84%;
    height: 74%;
    z-index: 52;
}
.cont-chart {
    border-radius: 1vw;
    box-shadow: 0px 0px 30px -25px #000000;
}
    .cont-chart:hover {
        border-radius: 1vw;
        box-shadow: 0px 0px 30px -18px #000000;
    }
#cont-charts-1 {
    position: relative;
    width: 100%;
    height: 100%;
    z-index:2;
    /*max-height: 56vw;*/ /*EDIT*/
}
    #cont-charts-1 img.asc.imgZoom {
        transform: scale(2) rotate(-180deg);
        margin-right: 0.4vw;
    }
    #cont-charts-1 img.desc.imgZoom {
        transform: scale(2);
        margin-right: 0.4vw;
    }
    #cont-charts-1 table th, #cont-charts-1 table td {
        border-radius: 0.4vw;
    }


/*Insights*/
#cont-charts-1 .insights {
    font-size: 105%;
    overflow: auto;
}
#cont-charts-1 .insights:not(.cont-chart) h2 {
    font-size: 100%;
    font-weight: bold;
    margin: 0px;
}
#cont-charts-1 .insights:not(.cont-chart) p {
    font-size: 100%;
    margin: 0px 1vw 0.8vw 0px;
}

/*dropdown*/
    #cont-charts-1 .dropdown {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        color: #505050;
        border-color: #f96449;
    }
    #cont-charts-1 .dropdown .text {
        left: 5%;
        width: 80%;
    }
    #cont-charts-1 .dropdown .arrow {
        right: 5%;
        width: 10%;
        background-image: url(../Graphics/dd-arr-t.svg?211025-1-1241120-1);
        background-size: 80% auto;
    }
        #cont-charts-1 .dropdown .list {
            background-color: #ffffff;
            color: #505050;
            margin-top: 2px;
            border: 2px solid #f96449;
            /*min-height: 120px;*/
        }
        #cont-charts-1 .dropdown:hover {
            border-color: rgba(249, 100, 73, 0.7);
        }
            #cont-charts-1 .dropdown:hover .text, #cont-charts-1  .dropdown:hover .arrow {
                opacity: 0.7;
            }

/*FOOTER*/
#cont-footer {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 1vw;
    left: 15%;
    width: 84%;
    z-index: 52;
    /*height: korekcije.js*/
}
    #cont-footer .table {
        width: 100%;
        height: 100%;
        /*table-layout: fixed;*/
    }
#footer-desc {
    /*width: 70%;*/
    padding-left: 8vw;
    position: relative;
    text-align: left;
    vertical-align: middle;
    font-size: 100%;
    line-height: 120%;
    overflow: visible;
    font-size: 90%;
    font-weight: bold;
    border-radius: 1vw;
    background-color: #ffffff;
}
#filter-ind {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1vw;
    top: 50%;
    height: 1.8vw;
    margin-top: -0.9vw;
    width: 6vw;
    border-radius: 50px;
    color: #000000;
    background-color: #f66862;
}
    #filter-ind.ON {
        background-color: #37bd37;
    }
#footer-warning img {
    width: auto;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
}

#footer-raz {
    width: 1vw;
}

#footer-psa {
    white-space: nowrap;
    padding-right: 1vw;
    width: 25%;
    overflow: visible;
    height: 100%;
    text-align: right;
    vertical-align: middle;
    line-height: 160%;
    border-radius: 1vw;
    background-color: #ffffff;
}
    #footer-psa img {
        width: auto;
        height: 20px; /*korekcije js*/
        vertical-align: middle;
        margin-left: 1vw;
    }
        /*#footer-psa img.partner-1 {
            width: 12.9%;
        }
        #footer-psa img.partner-2 {
            width: 14.82%;
        }
        #footer-psa img.partner-3 {
            width: 16.907%;
        }
        #footer-psa img.partner-5 {
            width: 12.43%;
        }
        #footer-psa img.partner-4 {
            width: 5.213%;
        }*/
    #footer-psa a {
        color: black;
        text-decoration: none;
    }
        #footer-psa a:hover {
            text-decoration: underline;
        }



.legend {
    font-size: 80%;
    font-weight: 700;
    overflow: hidden;
}
    .legend .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%;
    }
    .legend .legend-item {
        cursor: pointer;
        display: -webkit-flex;
        -webkit-flex-direction: column;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        height: 18%;
        text-align: center;
        margin-top: 0.6vw;
        border: 1px solid transparent;
        border-radius: 0.5vw;
        padding: 0.3vw;
        line-height: 105%;
    }
        .legend .legend-item:hover{
            opacity: 0.6;
        }
        .legend .legend-item:first-child {
            margin-top: 0px;
        }
        .legend .legend-item.dashed-background {
            background-image: radial-gradient(circle at center, rgba(255,255,255,0.5) 1px, transparent 0);
            background-size: 6px 6px;
            background-repeat: round; /* Ensures dots are not clipped at edges */
        }
.paginator {
    visibility: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    font-size: 0.72vw;
    font-weight: 700;
    line-height: 0px;
    white-space: nowrap;
    position: absolute;
    bottom: 0.3vw;
    right: 3vw;
    width: 4vw;
    height: 0.9vw;
}
    .paginator div {
        display: inline-block;
        margin-right: 0.15vw;
    }
        .paginator div._prev, .paginator div._next {
            cursor: pointer;
            margin-right: 0px;
        }
            .paginator div._prev.hidden, .paginator div._next.hidden {
                opacity: 0.3;
            }
            .paginator div._prev:not(.hidden):hover, .paginator div._next:not(.hidden):hover {
                opacity: 0.6;
            }
        .paginator div._prev img, .paginator div._next img {
            width: auto;
            height: 0.9vw;
            vertical-align: middle;
        }
        .paginator div._prev img{
            margin-right: 1px;
        }
        .paginator div._next img {
        }
        .paginator span._2 {
            margin-left: 3px;
            margin-right: 3px;
        }
        .paginator span._3 {
            margin-right: 3px;
        } 




#msg_agree {
    z-index: 999999;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    font-size: 18px;
    overflow: auto;
}
    #msg_agree .table {
        display: table;
        width: 100%;
        height: 100%;
    }
    #msg_agree .td {
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
    }
    #msg_agree .sep {
        height: 10px;
        visibility: hidden;
    }
    #msg_agree .txt {
        display: inline-block;
        width: 70%;
        margin: 0px auto 4% auto;
        text-align: justify;
    }
        #msg_agree .txt p {
            margin-top: 0px;
            margin-bottom: 2%
        }
            #msg_agree .txt p.names {
                padding-left: 5%;
            }
            #msg_agree .txt p.last {
                margin-bottom: 0px;
            }
    #msg_agree .butt-cont {
        display: inline-block;
        width: 70%;
        margin: 0px auto 0px auto;
        text-align: right;
        line-height: 0px;
    }
    #msg_agree a, #msg_agree a:link, #msg_agree a:visited {
        color: #f96449;
        text-decoration: underline;
    }
        #msg_agree a:hover, #msg_agree a:visited:hover {
            text-decoration: none;
        }
    #msg_agree a.agree {
        padding: 0.3vw 4vw 0.3vw 4vw;
        border: 1px solid #f96449;
        color: #f96449;
        font-size: 120%;
        text-decoration: none;
        line-height: 0px;
        background-color: white;
        transition: background-color 0.2s, color 0.2s;
    }
        #msg_agree a.agree:link, #msg_agree a.agree:visited {
            color: #f96449;
            text-decoration: none;
            background-color: white;
        }
        #msg_agree a.agree:hover, #msg_agree a.agree:visited:hover {
            text-decoration: none;
            background-color: #f96449;
            color: white;
        }
@media (max-width: 1200px) {
    #msg_agree {
    }

        #msg_agree .txt {
            width: 80%;
            margin: 0px auto 8% auto;
        }
        #msg_agree .butt-cont {
            width: 80%;
        }
}
@media screen and (orientation : portrait) {
    #msg_agree {
        font-size: 38px;
    }
        #msg_agree .sep {
            height: 20px;
        }
        #msg_agree .txt {
            width: 80%;
            margin: 0px auto 15% auto;
            text-align: left;
        }
            #msg_agree .txt p {
                margin-bottom: 8%;
            }
            #msg_agree .txt p.names {
                padding-left: 10%;
            }
        #msg_agree .butt-cont {
            width: 80%;
        }
        #msg_agree a.agree {
            padding: 0.3vw 6vw 0.3vw 6vw;
        }
}

#msg-portrait {
    z-index: 9999;
    display: none;
    border-collapse: collapse;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    font-size: 42px;
}
    #msg-portrait div {
        display: table-cell;
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
    }
@media screen and (orientation : portrait) {
    #msg-portrait {
        display: table;
    }
    #msg_agree .txt img {
        width: 50%;
        height: auto;
    }
}


/* tooltip */
#ToolTipDiv {
  z-index: 9999;
  position: absolute;
  left: 0px;
  top: 0px;
  max-width: 30vw;
  border: 0px solid black; 
  border-radius: 5px;
  background-color: rgba(0,0,0,0.85);

-webkit-box-shadow: 0px 0px 50px -6px rgba(0,0,0,0.6); 
box-shadow: 0px 0px 50px -6px rgba(0,0,0,0.6);

  display: none;
  padding: 10px;
  margin: 10px;
  color: white;
}


/*Zoom*/
.aZoomIn, .aZoomOut {
    /*position: relative;
    top: 2px;*/
    position: absolute;
    bottom: 0.3vw;
    right: 0.3vw;
    z-index: 190;
    line-height: 0px;
}
    .aZoomIn:not(.disabled):hover, .aZoomOut:not(.disabled):hover {
        opacity: 0.6;
    }
.aZoomIn.disabled, .aZoomOut.disabled {
    display: none;
}
img.zoom {
    height: 0.9vw;
    width: auto;
    border: none;
    transition: all linear 200ms;
}
    img.zoom.hover {
        height: 1.4vw;
    }
img.zoom.imgZoom {
    /*height: 1.4vw;
    width: auto;
    margin-right: 0.1vw;
    margin-bottom: 0.1vw;*/
}


/*table paging*/
.tbl-paging {
    position: absolute;
    bottom: 0.3vw;
    right: 3vw;
    width: 4vw;
    height: 0.9vw;
    font-size: 0.72vw;
    font-weight: 700;
}

    .tbl-paging table {
        border-collapse: collapse;
        position: absolute;
        top: 0%;
        left: 0%;
        height: 100%;
    }

        .tbl-paging table td {
            text-align: center;
            vertical-align: middle;
            color: #555555;
        }

    .tbl-paging img {
        border: none;
        position: absolute;
        bottom: 0%;
        height: 100%;
        width: auto;
    }

        .tbl-paging img.prev {
            right: 1.08vw;
        }
            .tbl-paging img.prev:not(.hidden):hover {
                opacity: 0.6;
            }

        .tbl-paging img.next {
            right: 0%;
        }
            .tbl-paging img.next:not(.hidden):hover {
                opacity: 0.6;
            }
        .tbl-paging .prev.hidden, .tbl-paging .next.hidden {
            opacity: 0.3;
        }
/*--------------*/


.chart-title {
    font-family: 'TelstraDisplay';
}
.chart-title div {
    display: inline-block;
}

/*Loading*/
.loading {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
    .loading .table {
        width: 100%;
        height: 100%;
    }
    .loading .td {
        vertical-align: middle;
        text-align: center;
    }

/*Watermark*/
#watermark {
    display: none;
    z-index: 53;
    position: absolute;
    top: 14%;
    left: 15%;
    width: 84%;
    bottom: 1vw;
    margin-top: 1vw;
    overflow: hidden;
}
#watermark-1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url(../Graphics/watermark.svg);
    background-position: center center;
    background-size: auto 50%;
    background-repeat: no-repeat;
    -webkit-transform: rotate(-25deg);
    -webkit-transform-origin: center;
    transform: rotate(-25deg);
    transform-origin: center;
    opacity: 0.08;
}

/*DIMS*/
#dims {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 900;
    background-color: #000000;
    opacity: 0;
    display: none;
}

#aFN {
    position: relative;
}
#aFN  {
    opacity: 0.4;
}
#FN-dis-cov {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
}