@media all and (min-width:400px) {
    #myChart3 {
        height: 340px !important;
        /* width: 340px !important; */
    }
    .tableDiv > p {
        padding-top: 705px;
    }
    
    .tableDiv > .display_flex_col {
        padding-top: 1725px;
    }

}
@media all and (min-width:600px) {
    #myChart3 {
        height: 370px !important;
        /* width: 340px !important; */

    } .tableDiv > p {
        padding-top: 605px;
    }
    
    .tableDiv > .display_flex_col {
        padding-top: 1585px;
    }
}
@media all and (min-width:700px) {
    #myChart3 {
        /* height: 300px !important; */
    }
    .resources {
        /* min-height: 78vh; */
    }
}

@media all and (min-width:1000px) {
    .contentDiv{
       
        /* margin: 0 auto; */
    }
    .resources .cards{
        /* margin: 0 25px; */
    }
    .csslocator{
        top: 20px !important;
    }
    .resourcesPage{
    }
    .resources{
        /* height: 100%; */
        /* justify-content: space-between;
        min-height: 71.4vh; */
    }
    .togglebuttonsDiv {
        max-width: 340px;
    }
    .your-class{
    height: calc(100vh - 138px);

    }
    .slick-arrow {
        height: 36px;
        display: block !important ;
        width: 36px;
    }
    
    .desktop-menu{
        justify-content: center;
    }
    .logo {
        width: 110px;
        position: absolute;
        left: 20px;
        top: -30px;
    }
    .mapsvg{
        width: 80%;
    }
    #myBtn2 {
        padding: 10px;
        top: 0px;
        position: absolute;
        right: 20px;
    }
    .tableDiv > p {
        padding-top:612px;
    }
    .tableDiv>.display_flex_col {
        padding-top: 1665px;
    }

    .dashboardPage {
        top: 40px !important;
        /* margin: 40px 20px; */
    }

    .accordionOuter {
        width: 50%;
        margin-top: 0;
    }

    .bar>.display_flex:nth-child(2)>div:nth-child(2) {
        width: 24%;
        display: flex;
    }

    .bar>.display_flex:nth-child(2)>div:nth-child(1) {
        width:75%;
    }

    .bar>div:nth-child(1) {
        width: 45%;

    }

    .bar>.display_flex:nth-child(2) {
        width: 50%;
        height: 100%;
    }

    #myChart3 {
        height: 340px !important;  
        /* width: 400px !important;     */

    }

    .bar>div:nth-child(1) canvas {
        /* height: 350px !important; */
    }

    .accordionOuter:nth-child(1) {
        border-right: 1px dotted;
    }

    .accordionOuter h4 {
        font-size: 30px;
    }

    .dashboardPage>.display_flex>.display_flex>.display_flex_col:nth-child(2)>div:nth-child(3),.dashboardPage>.display_flex>.display_flex>.display_flex_col:nth-child(2)>div:nth-child(4) {
        padding: 20px;
    }
    

    #myChart {
        width: 320px !important;
        height: 180px !important;
    }

    #myChart4 {
        width: 120px !important;
    }

    /* .scrollDiv> .display_flex_col, .scrollDiv >.display_flex{
        padding: 0px  ;
    } */
    #myChart4+p {
        font-size: 28px;
    }

    #google_translate_element {

        top: 35px;
    }

    .close {
        /* top: -10px; */
    }
.map_parent {
    width: 50%;
    position: sticky;
    top: 15%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    .mapsection {
        /* position: fixed; */
        /* right: 0%; */
        /* top: 20vh; */
        /* width: 50%; */
        max-width: 604.3px;
        max-height: 671.7px;
        /* margin: 0 auto; */
    }

    .mapsection .display_flex_col {
        bottom: 70%;
        max-width: 250px;
    }

    .map {
        height: 510px;
        width: 460px;
    }

    .doughnut>div:nth-child(1) {
        width: 47%;
    }

    .doughnut>.display_flex:nth-child(2) {
        width: 40%;
    }

    .toggleBtn {
        padding: 20px;
    }

    .togglebuttons {
        padding: 10px 50px;
    }

    .width {
        width: 46%;
    }

    .callBtn {
        display: none;
    }

    #callBtn {
        display: flex;
    }

    .scrollDiv>.display_flex:nth-child(2)>.display_flex_col:nth-child(2) {

        width: 29%;
        height: 300px;
        justify-content: space-between;
        padding: 20px;
    }

    .scrollDiv>.display_flex:nth-child(2)>.display_flex_col:nth-child(2) .display_flex {
        justify-content: unset;
    }

    .scrollDiv>.display_flex:nth-child(2)>.display_flex_col:nth-child(1) {
        width: 69%;
        height: 300px;
        justify-content: space-between;
        padding: 20px;
    margin:0;

    }

    ;

    .dashboardPage .display_flex {
        flex-direction: row;
    }

    .dashboardPage>.display_flex {
        flex-direction: row;
        height: 100%;
        /* height: unset; */
    }

    .lg {
        font-size: 55px;
    }

    /* .mapsection{
        height: 100%;
        height: 604px;
       width: 50%;
    } */

    .dashboardPage>.display_flex>.display_flex {
        width: 50%;
        height: 100%;
        ;
        /* border-bottom: 1px solid #9d9d9d; */
    }

    .banner {
        height: calc(100vh - 138px);
    }



    .mobile-menu {
        display: none;
    }

    .desktop-menu {
        display: flex;
    }

    .header {
        height: 100px;
        padding: 5px;
    }

    .header ul {
        width: 79%;
        max-width: 630px;

    }

    .footer {
        padding: 50px 40px 0px 40px;
    }

    .footer .display_flex {
        /* padding: 20px; */
    }

    #callBtn {
        position: absolute;
        right: 5%;
        bottom: 15%;
    }

    #callBtn img {
        width: 14px;
    }

    .centerElement {
        position: absolute;
        top: 49%;
        left: 11%;
    }

    .centerElement #callBtn {
        display: none;
    }

    .centerElement h1 {
        font-size: 50px;
    }

    .centerElement h1 p {
        font-size: 32px;

    }

    .centerSection h2 {
        font-size: 50px;
    }

    .centerSection p {
        font-size: 24px;
    }

    .centerSection img {
        width: 240px;
    }

    .copyright {
        display: flex;
    }

    #callBtn {
        font-size: 32px;
        padding: 20px 10px;
        width: 100%;
        max-width: 350px;
        justify-content: center;
        border-radius: 10px;
    }

    #callBtn .display_flex {
        width: 76%;
    }

    #callBtn .display_flex img {
        width: 30px;
    }

    .form label {
        font-size: 24px;
    }

    .form2 label {
        font-size: 14px;
    }

    .form input {
        width: 100%;
        padding: 5px 0;
        width: 90%;
        font-size: 27px;

    }

    .form img {
        width: 34px;
    }

    .loginBtn {
        padding: 20px !important;
    }

    .accordionDiv .display_flex_col span:nth-child(1) {

        font-size: 20px;
    }

    .ui-accordion-header {
        font-size: 20px;
    }

    .accordionDiv p {

        font-size: 28px;
    }

}

@media all and (min-width:1280px) {
    .your-class{
        height: calc(100vh - 158px);
    
    }
    .resources{
        /* min-height: 68.7vh; */
    }
    
    .banner {
        height: calc(100vh - 158px);
    }
    #myBtn2 {
        /* top: 40px; */
    }
    .dropbtn {
        font-size: 18px;
    }
    .tableDiv > p {
        padding-top: 562px;
    }
    
    .tableDiv > .display_flex_col {
        padding-top: 1595px;
    }

    .mapsection .display_flex_col p {
        width: 70%;
        font-size: 16px;
    }

    .legend {
        width: 40px;
        height: 17px;
    }

    #myChart {
        width: 410px !important;
        height: 210px !important;
    }

    #myChart4 {
        height: 160px !important;
        width: 160px !important;
    }

    .close {
        top: 70px;
        font-size: 54px;
    }

    .yellow,
    .red,
    .green {
        height: 180px;
    }

    .logo {
        width: 130px;
    }

    .footerlogo {
        width: 100px;
    }

    .form input {
        font-size: 27px;
    }

    .btn {
        padding: 10px 20px;
    }

    .desktop-menu ul li svg {
        margin-right: 2px;
        vertical-align: sub;
    }

    .header {
        padding: 10px;
        height: 120px;
    }

    .desktop-menu ul li,
    .register {
        font-size: 18px;
    }

    .desktop-menu ul li {
        padding: 6px 2px;
    }
    .header ul {
        width: 79%;
        max-width: 730px;

    }
}

@media all and (min-width:1440px) {
    .resources{
        /* min-height: 65.5vh; */
    }
    .your-class{
        height: calc(100vh - 188px);
    
        }
    .mapsvg{
        width: 100%;
        max-width: 611.3px;max-height: 695.7px;
    }
    .mapsection .display_flex_col p {
        font-size: 20px;
    }
    #myChart3 {
        height: 370px !important;
    }
    .legend {
        width: 47px;
        height: 22px;
    }

    .close {
        right: 22vw;
    }

    .mapsection {
        right: 0%;
    }

    .lg {
        font-size: 75px;
    }

    .header {
        padding: 10px;
    }

    .header ul {
        width: 79%;
        max-width: 830px;

    }
    
    .desktop-menu ul li {
        padding: 10px 12px;

    }

    .banner {
        height: calc(100vh - 188px);
    }

    .copyright p {
        padding: 10px;
    }

    .copyright p {
        font-size: 28px;
    }
}

@media all and (min-width:1500px) {
    #myChart3 {
        height: 340px !important;
    }
}
@media all and (min-width:1620px) {

    .desktop-menu ul li,
    .register {
        font-size: 20px;
    }
    .dropbtn {
        font-size: 20px;
    }
}