@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

.buta 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
#mody
{
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh; 
   background: linear-gradient(#0f4675,#0f4675 50%, #fff 50%, #fff 100%);
}
.fontain
{
    width: 1100px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}
.fontain .box
{
   position: relative;
   width: 100%;
   background: #fff;
   padding: 41px 40px 60px;
   box-shadow: 0 15px 45px rgba(0, 0, 0, .1); 
}
.fontain .box:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff226d;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s;
}
.fontain .box:hover:before
{
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.5s;
}
.fontain .box h2
{
    position: absolute;
    left: 40px;
    top: 10px;
    font-size: 2.5em;
    font-weight: 800;
    z-index: 1;
    transition: 0.5s;
    color: #636966;
    opacity: 0.2;
}
.fontain .box:hover h2
{
    opacity: 1;
    color: #fff;
    transform: translateY(-40px);
}
.fontain .box h3
{
   position: relative;
   font-size: 1.5em;
   z-index: 2;
   color: #333;
   transition: 0.5s; 
}
.fontain .box p
{
   position: relative;
   z-index: 2;
   color: #555;
   transition: 0.5s; 
}
.fontain .box ul
{
   position: relative;
   z-index: 2;
   color: darkblue;
   transition: 0.5s; 
}
.fontain .box:hover h3,
.fontain .box:hover p
{
    color: #fff;
}
.fontain .box h3 span
{
    position: relative;
    z-index: 2;
    
}
.fontain .box:hover h3 span
{
    color: darkblue;
}
.fontain .box:hover ul
{
    color: black;
}
.wrapper {
    height: 100%;
}
#nano_1 {
    font-size: 14px;
     margin-right: 2px;
     margin-left: 16px;
}
#nano_2 {
    font-size: 14px;
    margin-bottom: -1px;
}
#regionSelection {
    border-style: solid;
    border-radius: 3px;
    padding: 4px;
    font-size: 13px;
}
#yearSelection {
    border-style: solid;
    border-radius: 3px;
    padding: 6px;
    font-size: 13px;
}
#title_1 {
    border-left-style: inset;
    border-left-width: 5px;
    border-right-style: outset;
    border-right-width: 5px;
    padding-left: 49px;
    padding-right: 51px;
    margin-left: -3px;
    height: 31px;
    margin-bottom: -3px
}
.title_1A {
    margin-top: -24px
}
.title_1B {
    font-size: 17px;
}
.title_1C {
    margin-left: 10px;
    margin-right: 10px;
}
.title_1D {
    font-size: 12px;
    font-style: italic;
}
#map-container {
    width: 24.1vw;
    margin-left: -1.2vw;
    height: 57vh;
    padding: 0px;
}
#map-container2 {
    width: 24.1vw;
    margin-left: -1.7vw;
    height: 56.8vh;
    padding: 0px;
    margin-top: -12px;
}
#container1 {
    margin-left: -1vw;
    width: 23vw;
    height: 57vh;
    border-radius: 15px;
}
/*#container4 {
    margin-left: -0.8vw;
    width: 22vw;
    height: 57vh;
    border-radius: 15px;
}*/
#container1b {
    margin-left: -0vw;
    width: 23vw;
    height: 57vh;
    border-radius: 15px;
}
#container2 {
    margin-left: -1vw;
    width: 23vw;
    height: 57vh;
    border-radius: 15px;
}
#container3 {
    margin-left: -0.8vw;
    width: 22vw;
    height: 57vh;
    border-radius: 15px;
}
#container3b {
    width: 23.1vw;
    margin-left: -1.2vw;
    height: 57vh;
    border-radius: 15px;
}
#container2b {
    margin-left: -0vw;
    width: 23vw;
    height: 57vh;
    border-radius: 15px;
}
.bt2 {
    font-size: 12px;
    border-style: solid;
    border-radius: 4px;
}
#censusSelection {
  /*  border-style: solid;
    border-radius: 3px;*/
    padding: 4px;
    font-size: 8 px;
    margin-left: -24px;
}
.bt1 {
    font-size: 12px;
    border-style: solid;
    border-radius: 4px;
    margin-left: 153px
}
#md1 {
    margin-left: -1086px;
    margin-top: 229px;
    width:1185px
}
.pp1 {
    font-size: x-small;
}
#hh2a {
    font-weight: bold;
    font-size: Small;
    color: black;
}
#hh2 {
    font-size: small;
    font-style: italic;
}
#but1 {
    font-size: 10px; 
    margin-left: 18px;
    border-style: solid;
    border-radius: 20px;
    background-color: #445063;
    border-width: 1px;
    padding: 8px;
    margin-top: 8px;
}
#bar1 {
    min-height: 37px;
}
#bar2 {
    height: 24px;
}
#map_name_1 {
    width: 100%;
    height: 431px
}
#presidentialTotal {
    font-size: 23px;
    font-weight: bold;
    color: #d68d33;
}
#parliamentTotal {
    font-size: 23px;
    font-weight: bold;
    color: #d68d33;
}
#reset-map2 .hover-text3_reset {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the button */
    left: 160%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the text when hovering over the button */
#reset-map2:hover .hover-text3_reset {
    visibility: visible;
    opacity: 1;
}
#ps_routing .hover-text_ps {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the button */
    left: 160%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the text when hovering over the button */
#ps_routing:hover .hover-text_ps {
    visibility: visible;
    opacity: 1;
}

#refetchButton .hover-text3_reset {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 125%; /* Position below the button */
    left: 160%; /* Center horizontally with respect to button */
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

#refetchButton:hover .hover-text3_reset {
    visibility: visible;
    opacity: 1;
}

.form1 div{
    display: flex;
    justify-content: space-between;
    gap: 5px;
}
.span1a .input1{
    width: 100%;
    padding: 10px;
    margin: 5px 0 20px 0;
    background-color: #eee;
    border: none;
    outline: none;
}
textarea{
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    background-color: #eee;
    border: none;
    outline: none;
}
.button1aa {
    background-color: #e53653;
    padding: 10px 30px;
    border-radius: 5px;
    color: white;
    border: none;
    margin-top: 20px;
}
.button1aa:hover {
    background-color: #a20d26;
    cursor: pointer;
}
#chart-container {
    background-color: #e9ecef
}
#chart-containerCard {
    background-color: #e9ecef

}
#chart-containerA {
    left: 7px
}
#chart-containerB {
    left: 16px
}
#chart-container1b {
    background-color: #e9ecef;
    left: -6px
}
#chart-container1cc {
    background-color: #e9ecef;
/*    left: 16px;*/
    margin-top: 10px
}
#chart-container1dd {
    background-color: #e9ecef;
    left: -6px;
    margin-top: 10px
}
#watermark-container {
    position: absolute; 
    top: 50vh; 
    left: 130px; 
    z-index: 1000;
}
#watermark-container2 {
    position: absolute; 
    top: 50vh; 
    left: 133px; 
    z-index: 1000;
}
.watermark {
    font-size: small;
    opacity: 1; 
    color: #d68d33;
}

.leaflet-pane {
    margin-top: 22px;
}

#but11 {
    position: absolute; 
    z-index: 1000; 
    font-size: xx-small; 
    top: 50vh; 
    left: 12px;
}
#but22 {
    position: absolute; 
    z-index: 1000; 
    font-size: xx-small; 
    top: 50vh; 
    left: 52px;
}
#but33 {
    position: absolute;
    z-index: 1000;
    font-size: xx-small;
    top: 50vh;
    left: 92px;
}
#card-content {
    max-height: 411px;       /* Limits height of the list */
    overflow-y: auto;        /* Enables vertical scrolling */
    width: 24vw;
}

#card-content .list-group-item {
    background-color: aliceblue;  /* Blue background color */
    border-bottom: 1px solid black;  /* Bottom border to separate items */
}

#card-content .list-group-item:last-child {
    border-bottom: none;      /* Removes bottom border from last item */
}

/* Optional styling for the scrollbar (for WebKit browsers like Chrome, Safari) */
#card-content::-webkit-scrollbar {
    width: 8px;               /* Width of the scrollbar */
}

#card-content::-webkit-scrollbar-track {
    background: #f1f1f1;      /* Scrollbar track color */
}

#card-content::-webkit-scrollbar-thumb {
    background: #888;         /* Scrollbar thumb color */
    border-radius: 10px;      /* Rounded corners */
}

#card-content::-webkit-scrollbar-thumb:hover {
    background: #555;         /* Color on hover */
}

#chart-containerCensus {
    background-color: #e9ecef
}

/*.popup-content {
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
  }

  .close-btn {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    margin-bottom: 10px;
  }

  #popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }*/

@media screen and (max-width: 600px)
{
    #nano_1 {
        display: none;
    }
    #nano_2 {
        display: none;
    }
    #bar1 {
        left: 1vw;
    }
    #cfluid {
        position: relative;
        left: 1vw;
    }
    #regionSelection {
        font-size: 2vw;
        margin-left: 7.7vw;
        margin-top: -1.2vh;
    }
    #yearSelection {
        font-size: 1.5vw;
        margin-right: 1vw;
        margin-left: -25vw;
        margin-top: -1.2vh;
    }
    #title_1 {
        border-left-style: inset;
        border-left-width: 2px;
        border-right-style: outset;
        border-right-width: 2px;
        padding-left: 2vw;
        padding-right: 2vw;
        margin-right: 24vw;
        height: 3vh;
        margin-bottom: 1vh;
        margin-top: -0.5vh;
    }
    .title_1A {
        margin-top: -3.5vh;
    }
    .title_1B {
    font-size: 3vw;
    }
    .title_1C {
        display: none;
    }
    .title_1D {
        display: none;
    }
    #chart-container {
        left: -1.5vw;
    }
    #chart-containerA {
        left: -1.5vw;
        top: 62vh;
    }
    #chart-containerB {
        left: -2.5vw;
        top: 0vh;
    }
    /*#chart-container1b {
        left: -1.5vw;
        margin-top: 3vh;
    }*/
    #chart-container1b {
        left: -1.5vw;
        bottom: 120vh;
        margin-top: 3vh;
    }
    #map-container {
        width: 100vw;
        margin-left: 0px;
    }
    #container1 {
        margin-left: 0px;
        width: 100vw;
    }
    #map-container2 {
        margin-left: 0px;
        width: 100vw;
    }
    #container1b {
        margin-left: 0px;
        width: 100vw;
    }
    #container2 {
        margin-left: 0px;
        width: 100vw;
    }
    #container3 {
        margin-left: 0px;
        width: 100vw;
    }
    #container3b {
        margin-left: 0px;
        width: 100vw;
    }
    #container2b {
        margin-left: 0px;
        width: 100vw;
    }
    .bt2 {
        margin-left: -6px;
    }
    #electoralSelection1 {
        margin-left: 3vw;

    }
    #electoralSelection2 {
        margin-left: 3vw;

    }
    #electoralSelection3 {
        margin-left: 10px;

    }
    #electoralSelection4 {
        margin-left: 10px;

    }
    #electoralSelection5 {
        margin-left: 10px;

    }
    #messa {
        margin-left: 10px;

    }
    #canter {
        margin-left: 3vw;

    }
    #censusSelection {
        margin-left: 10px;
        font-size: 3vw;
    }
    .bt1 {
        margin-left: -5px;
    }
    #md1 {
        margin-left: -1vw;
        margin-top: 86vh;
        width:96vw;
    }
    #about2 {
        font-size: large;
    }
    .pp1 {
        font-size: xx-small;
    }
    #hh2a {
        font-size: smaller;
    }
    #hh2 {
        font-size: smaller;
    }
    #hh1 {
        font-size: small;
    }
    #but1 {
        font-size: 1vw;
        margin-left: -11vw;
        margin-top: -3vh;
        margin-right: -128vw;
        margin-bottom: -11vh;
    }
    #bar2 {
        height: 3vh;
    }
    #presidentialTotal {
        font-size: 3.5vw;
    }
    #parliamentTotal {
        font-size: 3.5vw;
    
    }
    #md1 {
        margin-left: 10.8vw;
        margin-top: 82vh;
        width: 73vw;
    }
    #canta {
        width: 26vw !important;
    }
    .pp2 {
        width: 24vw;
    }
    #watermark-container {
        top: 326px;
        left: 145px;
    }
    #watermark-container2 {
        top: 294px;
        left: 17px;
    }
    .watermark2 {
    position: relative;
    left: 112px;
    margin-bottom: 19px;
    }
    #but11 {
        top: 50vh;
    }
    #but22 {
        top: 50vh;
    }
    #but33 {
        top: 50vh;
    }
    #refetchButton {
        position: absolute;
        font-size: xx-small;
        left: 53vw;
        top: 5.5vh;
        }
    #logout1 {
        position: absolute;
        font-size: 5px;
        top: 5.5vh;
        left: 66vw;
    }
    #chart-containerCard {
        top: 62vh;
        margin-top: 0px;
        left: -2.2vw;

    }
    #chart-container1cc {
        left: -7px;
    /* margin-top: 10px; */
    }
    #chart-containerCensus {
        margin-top: 10px; 
        margin-left: 0.2vw;
        left: -2.5vw;
    }
    #chart-container1dd {
        background-color: #e9ecef;
        left: -8px;
        margin-top: 10px;
    }
    #default-item {
        position: absolute;
        height: 51vh;
        width: 99vw;
        left: 0vw;
    }
    #default-image {
        position: absolute;
        height: 48vh;
        left: 12vw;
    }
    #card-content {
        width: 100%;
    }

    

}

@media screen and (max-width: 900px) and (min-width: 600px) {
    #nano_1 {
        display: none;
    }
    #nano_2 {
        display: none;
    }
    #regionSelection {
        font-size: 2vw;
        margin-left: 1vw;
        margin-top: -0.2vh;
    }
    #yearSelection {
        font-size: 1.5vw;
        margin-left: -6vw;
        margin-top: -0.5vh;
    }
    #title_1 {
        border-left-style: inset;
        border-left-width: 2px;
        border-right-style: outset;
        border-right-width: 2px;
        padding-left: 2vw;
        padding-right: 2vw;
        margin-left: -4vw;
        height: 3vh;
        margin-bottom: 2vh;
        margin-top: 1.5vh;
    }
    .title_1A {
        margin-top: -2vh;
    }
    .title_1B {
    font-size: 2vw;
    }
    .title_1C {
        
    }
    .title_1D {
        
    }
    #map-container {
        width: 50vw;
        margin-left: -3vw;
        margin-top: 42vh;
    }
    #container1 {
        margin-left: -8px;
        width: 50vw;
        height: 40vh;
    }
    #map-container2 {
        margin-left: -27vw;
        width: 50vw;
        margin-top: 44vh;
    }
    #container1b {
        margin-left: -27.5vw;
        width: 50vw;
        height: 40vh;
    }
    #container2 {
        margin-left: -15px;
        width: 50vw;
        height: 40vh;
    }
    #container3 {
        margin-left: -27vw;
        width: 50vw;
        margin-top: 40vh;
    }
    #container3b {
        margin-left: -3vw;
        width: 50vw;
        margin-top: 40vh;
    }
    #container2b {
        margin-left: -28.5vw;
        width: 50vw;
        height: 40vh;
    }
    .bt2 {
        margin-left: -6px;
    }
    #censusSelection {
        position: absolute;
        margin-left: -26vw;
        margin-top: 42vh;
        font-size: 1.5vw;
    }
    .bt1 {
        margin-left: -5vw;
    }
    #md1 {
        margin-left: -43vw;
        margin-top: 37vh;
        width: 44vw;
    }
    #about2 {
        font-size: large;
    }
    .pp1 {
        font-size: xx-small;
    }
    #hh2a {
        font-size: smaller;
    }
    #hh2 {
        font-size: smaller;
    }
    #hh1 {
        font-size: small;
    }
    #but1 {
        font-size: 1vw;
        margin-left: -5vw;
        margin-top: 0vh;
    }
    #bar2 {
        height: 3vh;
        width: 100vw;
    }
    .navbar {
        width: 98vw;
    }
    #presidentialTotal {
        font-size: 1.5vw;
    }
    #parliamentTotal {
        font-size: 1.5vw;
    
    }
    #canter {
        position: absolute;
        margin-left: -21vw;

    }
    #canta {
        width: 13vw;
    }
    .pp2 {
        width: 8vw;
    }
    #refetchButton {
        position: absolute;
        font-size: x-small;
        left: 69.5vw;
        top: 0.5vh;
        }
    #logout1 {
        position: relative;
        font-size: 5px;
        top: 0.5vh;
        left: 0vw;
    }
    #card-content {
        max-height: 703px;
        overflow-y: auto;
    }
    #default-image {
        position: absolute;
        width: 225px;
        height: 671px;
        left: 1vw;
    }


}
@media screen and (min-width: 900px) {
    #nano_1 {
        font-size: 0.8vw;
        margin-right: 0.2vw;
        margin-left: 1vw;
    }
    #nano_2 {
        position: relative;
        left: 2vw;
        font-size: 0.8vw;
        margin-bottom: -0.3vh;
    }
    #regionSelection {
        font-size: 0.7vw;
    }
    #yearSelection {
        position: relative;
        font-size: 0.7vw;
        left: 4vw;
    }
    #title_1 {
        margin-left: -1vw;
        height: 1vh;
        margin-bottom: 0vh;
    }
    #but1 {
        font-size: 0.6vw;
        margin-left: 2.5vw;
        margin-top: 1.2vh;
    }
    .bt2 {
        font-size: 0.8vw;
        margin-left: 3vw;
    }
    .bt1 {
        font-size: 0.8vw;
        margin-left: 8vw;
    }
    #censusSelection {
        font-size: 0.7vw;
        margin-left: 2vw;
        
    }
    #container1 {
        margin-left: -0.4vw;
        width: 24vw;
        height: 57vh;
    }
    #container2 {
        margin-left: -0.4vw;
        width: 24vw;
        height: 57vh;
    }
    #container1b {
        margin-left: -0.5vw;
        width: 24vw;
        height: 57vh;
    }
    #container2b {
        margin-left: -0.5vw;
        width: 24vw;
        height: 57vh;
    }
    #map-container2 {
        margin-left: -2.8vw;
        width: 25vw;
        height: 56.5vh;
    }
    #container3 {
        margin-left: -1.3vw;
        width: 24.5vw;
        height: 57vh;
    }
    #map-container {
        width: 26vw;
        margin-left: -1.6vw;
        height: 57vh;
    }
    #container3b {
        margin-left: -1.6vw;
        width: 34vw;
        height: 57vh;
    }
    #map_name_1 {
        height: 55.8vh;
    }
    #presidentialTotal {
        font-size: 1.5vw;
    }
    #parliamentTotal {
        font-size: 1.5vw;
    
    }
    #md1 {
        margin-left: -40vw;
        margin-top: 4vh;
        width: 27vw;
        margin-bottom: 0vh;
        margin-right: 0vw;
        height: 19vh;
    }
    #canta {
        width: 6.5vw;
    }
    .pp2 {
        width: 4vw;
    }
    #but11 {
        top: 50vh;
    }
    #but22 {
        top: 50vh;
    }
    #but33 {
        top: 50vh;
    }
    #refetchButton {
        position: absolute;
        font-size: x-small;
        left: 68.5vw;
        top: 1.5vh;
        }
    #logout1 {
        position: relative;
        font-size: xx-small;
        top: 0.5vh;
    }
    #chart-containerB {
        margin-top: 1.3vh;
    }
    #chart-container1dd {
        margin-left: -0.2vw;
    }
    #chart-containerCard {
        margin-top: 9px; 
        left: 1.8vw;

    }
    #chart-containerCensus {
        margin-top: 10px; 
        margin-left: 0.2vw;
    }
    #default-item{
        height: 51vh;
    }
    #default-image {
        position: absolute;
        width: 193px;
        height: 260px;
        left: 3.5vw;
    }


}