@font-face {
    font-family: "opensans";
    src: url("./../fonts/OpenSans/OpenSans-Light.ttf");
    /* IE9 Compat Modes */
    /* src: url("/fonts/OpenSans/OpenSans-Bold.ttf") format("truetype"),
    url("/fonts/OpenSans/OpenSans-SemiBold.ttf") format("truetype"),
    url("/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf") format("truetype"); */
    /* Safari, Android, iOS */
}

@font-face {
    font-family: "corbelbold";
    src: url("./../fonts/OpenSans/corbelbold.ttf");
}

@font-face {
    font-family: "bebasBold2";
    src: url("./../fonts/bebas/bebas400.ttf");
}

@font-face {
    font-family: "bebasBold";
    src: url("./../fonts/bebas/Bebas-bold-700.otf");
}


@font-face {
    font-family: "bebasLight";
    src: url("./../fonts/bebas/bebasThin200.otf");
}

@font-face {
    font-family: "bebasLight2";
    src: url("./../fonts/bebas/bebaslight200.otf");
}


@font-face {
    font-family: "nexaBold";
    src: url("./../fonts/bebas/NexaBold.otf");
}


@font-face {
    font-family: "nexaLight";
    src: url("./../fonts/bebas/NexaLight.otf");
}

@font-face {
    font-family: "nexaReg";
    src: url("./../fonts/bebas/NexaRegular.otf");
}

body {
    margin: 0px auto;
    height: 100%;
}

.page {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

    .page div {
        /* border: solid 1px rgb(8 8 8); */
    }

.loadingsvg {
    position: fixed;
    z-index: 1000000;
    margin-left: -30px;
    margin-top: -30px;
    left: 50%;
    top: 50%;
}

.header {
    height: 130px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #05885E; /* #FFF;  #043E2A; */
}

    .header .lbox {
        min-width: 527px;
        background-image: url(../imgs/lbar2.jpg); /**/
        background-repeat: no-repeat;
    }

.headTp {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 15px 0 0px;
    font-family: corbel;
}

    .headTp h1 {
        font-size: 18px;
        text-transform: uppercase;
    }


.lbox .logo {
    margin: 30px 0px 0px 104px;
}

.slogo{
    width:100%;
    border: solid 1px #fff;
    text-align:center;
    padding:35px 0;
    position:absolute;
}

.header .rbox {
    background-image: url(../imgs/rbar2.jpg); /**/
    background-repeat: no-repeat;
    background-position: top right;
    display: flex;
    justify-content: right;
    padding: 0px 50px 0px 0px;
}

.page > .main {
    height: 60px;
    flex: 1;
}

.rbox, .rbox > div {
    /* border:solid 1px #ccc !important; */
}

    .rbox .stats {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* border:solid 1px red; */
        height: 160px;
        display: table;
        margin-right: 47px;
    }

        .rbox .stats > div {
            display: table-cell;
            min-width: 50%;
            align-items: stretch;
        }

        .rbox .stats span {
            display: block;
            COLOR: #fdec00fa;
        }

        .rbox .stats > div:nth-child(1) {
            text-align: right !important;
            /* background-color: blue; */
            padding-right: 25px;
        }

        .rbox .stats > div:nth-child(2) span:nth-of-type(1) {
            text-align: left !important;
            color: #ffffff;
        }


        /* .rbox .stats > div:nth-child(1) > .tp{
  text-align: left !important;
  color:#fff
} */


        .rbox .stats > div:nth-of-type(1) .tp {
            text-align: left !important;
            padding-left: 5px;
        }


        .rbox .stats > div .tp {
            /* width:200px; */
            font-size: 12px;
            position: relative;
            top: -10px;
            font-family: nexabold;
        }

        .rbox .stats > div .big {
            font-family: bebasBold2;
            font-weight: bolder;
            font-size: 70px;
            color: #43e811;
            padding-top: 0px !important;
        }

        .rbox .stats > div span {
            text-shadow: black 2px 2px 2px;
        }



            .rbox .stats > div span:nth-of-type(2) .big {
                color: #fff !important;
            }

            .rbox .stats > div span:nth-of-type(2) {
                text-transform: uppercase !important;
                font-size: 13px;
            }

        .rbox .stats > div:nth-of-type(1) {
            margin-right: 20px;
        }

.sshow > div {
    width: 100%;
    /* border:solid 3px #f00; */
}

.owl-stage-outer {
    min-height: 69vh;
}

.sshow {
    width: 85% !important;
    height: 75vh;
    margin: 5px auto;
    /*border: solid 1px #000;  solid 1px rgba(204, 204, 204, 0.253); */
    box-shadow: #cccccc50 1px 1px 19px 1px;
}

.mainbodychartbody {
    overflow-y: hidden !important;
}

.timestampshow {
    width: 92.5% !important;
    text-align: end;
    font-family: Corbel;
    font-size: 13px;
    color: #cbc6c6;
}

.main .ctrls {
    width: 100px;
    /* border:solid 1px red; */
    margin: 0px auto;
    position: relative;
    z-index: 10000;
}

    .main.ctrls a {
        display: block;
    }

.clr {
    display: block;
    clear: both;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.midctrls {
    position: absolute;
    margin-top: 25vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .midctrls > a {
        display: block;
        margin: 60px;
    }

        .midctrls > a:hover {
            opacity: 0.5;
        }


/*----------------------------------------------*/
.xtra10 {
    padding-right: 20px !important;
    /*border:solid 1px;*/
}


.chcard {
    width: 100%;
    border-color: red;
    display: flex;
    /* border:solid 3px #000; */
    height: 70vh;
}

.b20 {
    width: 20%;
    margin: 3px;
    display: flex;
    flex-direction: column;
}

    .b20 > div {
        flex: 1;
        border-color: red;
        align-self: stretch;
        border-radius: 20px;
        margin: 3px;
        padding: 10px;
    }

.b80 {
    flex-grow: 1;
    margin: 3px;
    background-color: aquamarine;
}

.tpnum, .tptxt {
    /* border:solid 1px #000; */
}

.tpnum {
    font-size: 60px;
    padding-top: 35px;
    color: #fff;
    text-align: center;
    padding-bottom: 0px !important;
}

.tptxt {
    position: relative;
    top: -15px;
    padding-top: 0px !important;
    text-align: center;
    font-size: 20px;
    color: #fff;
}


/*    -----------------expanding the percentage circles... --------------------------   */


.pcent > div, .pcent {
    /* border:solid 1px #000; */
}

    .pcent > div > div > span {
        /*font-family: bebasBold;*/
        /*font-size:30px;*/
    }

/*.pcent > span {
    font-family: bebasBold;
}*/

.pcent {
    padding-right: 20px !important;
    width: 800px;
    margin: 150px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .pcent > .tile {
        height: 370px;
        position: relative;
    }


.clr {
    display: block;
    clear: both;
}

.pcent > .tile > .active {
    opacity: 1;
}

.pcent .big {
    z-index: 0;
}

.pcent > .tile:not(.active) {
    opacity: 0.4;
    filter: grayscale(100%);
}

.tile > .title {
    /* border:solid 1px; */
    height: 100px;
    position: absolute;
    z-index: 100;
    bottom: 0px;
    text-align: center;
    width: 90%;
    left: 10px;
    font-weight: bolder;
    text-transform: uppercase;
    padding: 3px;
}