/* layout */

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main {
    flex: 1;
  }

/* layout */

/* login */

.dual{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 100px;
    width:100%;
}

@media(min-height: 900px) {
    .dual{
        margin-top:15vh;
        margin-bottom: 15vh;
    }
  } 

  
.left_half{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

@media(max-width: 800px) {
  .left_half{
    display:none; 
}
} 

.devices_field{
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction:column;
}

.devices{
    width: 500px;
    height: auto;
}


@media(max-width: 1000px) {
.devices{
    width: 400px;
}
.dual{
    gap:50px
}
}


.right_half{
    display: flex;
    flex-direction:column;
    align-items: center;
    min-width: 300px;
}

.popup_field{
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    flex-direction:column;
    min-height: 100px;
}


.form_field_create_pass{
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction:column;
}

.form_field{
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction:column;
}

.input-size {
    width: 300px;
    height: 60px;
}

@media(max-width: 400px) {
.input-size {
    width: 100%;
}
}

.submit_button{
    width: 300px;
    height: 40px;
}

.submit_button_red {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: white;
    background-color: #f1133f;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease-in-out;
    border-width:0px;
    width: 300px;
    height: 40px;
  }
  
.submit_button_red:hover {
    background-color: #d41238;
}
  
.submit_button_red:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(241, 19, 63, 0.5);
}

.secondary_button{
    border-style:solid;
    border-color: #0d6efd;
    border-width:1px;
    color: #0d6efd;
    width: 300px;
    height: 40px;
}

.nowrap {
    white-space: nowrap;
  }

.no-underline {
    text-decoration: none;
}

/* login */

/* navbar */

@media(max-width: 400px) {
    .nav-item.dropdown .dropdown-menu{
        font-size: 13px;
}
}

.navbar {
    transition: background-color 0.3s ease;
  }


.navbar::after {
    content: "";
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #2455c6;
}

.alt_navbar_after::after{
    background-color: white!important;
}

.navbar_layout{
    padding-left: 60px;
    padding-right: 60px;
    display: flex;
    align-items: center;
    flex-direction:column;
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    z-index: 100;
}

.navy_font{
    color:#2455c6 !important;
}

.navy_font:hover{
    color:black !important;
}

.nav-link{
    color:white;
    margin:10px;
}

.nav-link:hover{
    color:black!important;
}

.bg-navy{
    background-color: #2455c6;
}

.font-navy{
    color:#2455c6!important
}

.navy_button_border{
    border-color: #2455c6;
}

#logo {
    width: 140px;
    margin-left: 25px;
}

@media(max-width: 400px) {
    #logo {
        width: 80px;
        margin-left: 0px;
    }
}

.semi-transparent{
    background-color: rgb(255, 255, 255, 0.5);
}

.custom-font{
    font-size: 16px !important;
}

.dropdown{
    cursor: pointer;
}

.dropdown-menu{
    width:fit-content;
}

/* navbar */

/* email_for_recovery */

.custom_error_field{
    height:10vh
}

@media(min-height: 900px) {
    .custom_error_field{
        height:20vh
    }
}

/* email_for_recovery */

/* register */

.register_image{
    width: 396px;
    height: 200px;
    background: 
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 40%,
            rgba(13, 110, 253, 0.2) 60%,
            rgba(13, 110, 253, 0.6) 80%,
            rgba(13, 110, 253, 0.9) 100%
        ),
        url("../images/register/voting_1920_1080.jpg");
    background-size: cover;
    background-position: center;
}

.register_tutorial{
    font-family: "Open Sans", sans-serif;
    margin-top:15%;
    color:white;
}

.tutorial_collapse{
    border-style: solid;
    border-width: 1px;
    border-color: #dee2e6;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa;
}

.tutorial_gotop{
width:396px
}

@media(max-width: 400px) {
.tutorial_gotop, .tutorial_collapse, .register_image{
    width:100%
}
}

@media(max-width: 800px) {
    .tutorial_collapse {
        flex-direction: column;
    }
}

.custom_warning_size{
    width:300px
}

@media(min-height: 1100px) {
    .big-screen-adaptation{
        height: 5vh;
    }
}


/* register */

/* delete_account */

.tutorial-field{
    font-family: "Open Sans", sans-serif;
    color:white;
}

.delete-image-field{
    height:769px;
    width:396px;
    background-color: #d41238;
}

.delete_image{
    width: 396px;
    height: 200px;
    background: 
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 40%,
            rgba(212, 18, 56, 0.2) 60%,
            rgba(212, 18, 56, 0.6) 80%,
            rgba(212, 18, 56, 0.9) 100%
        ),
        url("../images/delete_account/leaving.jpg");
    background-size: cover;
    background-position: center;
}

@media(max-width: 400px) {
.delete_image, .delete-image-field{
    width:100%;
}
}

/* delete_account */

/* index */

.ongoing-ballot-bg{
    background-color: #edeff3;
}

.ballot-field{
    width:70%;
    border-style:solid;
    border-color:#c1c3c5;
    border-width: 1px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}


@media(max-width: 1200px) {
    .ballot-field{
    width:80%;
    }
}

@media(max-width: 768px) {
    .ballot-field{
    width:90%;
    }
}

@media(max-width: 576px) {
    .ballot-field{
    width:95%;
    padding-left:10%!important;
    padding-right:10%!important;
    }
}

.voting-field{
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    height:150px;
    background-color: white;
    border-color: gray;
}

.voting-field:hover{
    background-color: rgb(233, 233, 233);
}

@media (max-width: 1200px) and (min-width:992px) {
.voting-field{
    height:125px;
}
}
@media (max-width: 992px) and (min-width:576px) {
.voting-field{
    height:100px;
}
}


@media (max-width: 992px) and (min-width:576px) {
.custom-padding h4{
    font-size: 150%!important;
}
}

@media (max-width: 768px) and (min-width:576px) {
   .custom-padding{
    padding-left: 2%!important;
    padding-right: 2%!important;
}
}

@media(max-width: 575px) {
   .custom-padding{
    padding-left: 15%!important;
    padding-right: 15%!important;
}
}

@media(max-width: 530px) {
   .custom-padding{
    padding-left: 10%!important;
    padding-right: 10%!important;
}
}

@media(max-width: 500px) {
   .custom-padding{
    padding-left: 5%!important;
    padding-right: 5%!important;
}
}

@media(max-width: 400px) {
   .custom-padding{
    padding-left: 0%!important;
    padding-right: 0%!important;
}
}

@media(max-width: 992px) {
.candidate-field{
    height: 175px;
}
}

@media(max-width: 575px) {
.drop-second-line{
    display: none;
}
}

.show_stamp:hover {
  cursor: url('../icons/index/bg_rubber_stamp.png') 24 24, pointer!important;
}
.yes-button:hover,
.no-button:hover,
.candidate-button:hover{
    cursor:pointer;
}

@media (max-width: 992px) and (min-width:576px) {
.yes-button:hover,
.no-button:hover {
    cursor: url('../icons/index/sm_rubber_stamp.png') 24 24, pointer!important;
}
}

.purple-pink-fade {
  background: linear-gradient(to right, #6f42c1, #e83e8c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#logoSvg{
    width:90%;
    min-width: 300px;
}

.blank_vote_checkbox{
    width: 100px;
    height: 100px;
    border-style: solid;
    border-color:black;
    border-width: 2px;
}

.blank_vote_checkbox:hover{
    background-color: rgb(233, 233, 233);
    cursor: pointer;
}

@media(max-width: 400px) {
.blank_vote_area{
    gap: 5px!important;
}
}

@keyframes stampAppear {
    0% { 
        opacity: 0;
        transform: scale(1.05);
    }
    40% {
        opacity: 0.7;
        transform: scale(1.02);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

.stamp-animation {
    animation: stampAppear 0.4s ease-out forwards;
}

.no-vote{
    margin-bottom: 25px;
}

.no-vote:hover{
    text-decoration-line: underline;
    color:#0c63d4;
    cursor:pointer;
}

.ignored-ballot {
    position: relative;
}

.ignored-ballot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(12,99,212, 0.98);
    pointer-events: auto;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.ignored-ballot.show-overlay::before {
    opacity: 1;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    color: white;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.overlay-text.show {
    opacity: 1;
    pointer-events: auto;
}

.revert-no-vote:hover{
    cursor:pointer;
    color:rgb(43, 43, 43);
    transition: 0.1s ease-in-out;
    width:fit-content;
}

.blank-icon{
    width:80px;
    margin-right: 15px;
}

.blank-text{
    font-size: 30px;
}

@media(max-width: 1400px) {
.blank-icon{
    width:65px;
    margin-right: 10px;
}
.blank-text{
    font-size: 30px;
}
}

@media(max-width: 1200px) {
.blank-icon{
    width:60px;
    
}
.blank-text{
    font-size: 25px;
}
}

@media(max-width: 991px) {
.blank-icon{
    width:40px;
    margin-right: 8px;
}
.blank-text{
    font-size: 15px;
}
}

@media(max-width: 767px) {
.blank-icon{
    width:60px;
    margin-right: 15px;
}
.blank-text{
    font-size: 20px;
}
}

@media(max-width: 575px) {
.blank-icon{
    width:80px;
    margin-right: 30px;
}
.blank-text{
    font-size: 30px;
}
}

@media(max-width: 400px) {
.blank-icon{
    width:70px;
    margin-right: 20px;
}
}

@media(max-width: 350px) {
.blank-icon{
    margin-right: 10px;
}
}
/* submit art */

.vote-ballot-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 400px;
      perspective: 800px;
    }

    .vote-ballot-container:hover {
        cursor:pointer;
    }
    
    .vote-ballot-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .vote-ballot-device {
      position: relative;
      width: 180px;
      height: 220px;
      background-color: #2b2b2f;
      border-radius: 12px;
      overflow: visible;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
      transform: rotateX(5deg);
      border: 1px solid #3a3a42;
    }
    
    .vote-ballot-slot {
      position: absolute;
      top: 8%;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      height: 8px;
      background-color: #1a1a1e;
      border-radius: 4px;
      box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
      border: 1px solid #3a3a42;
    }
    
    .vote-ballot-shine {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 35%;
      background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.18), 
        rgba(255, 255, 255, 0.04)
      );
      border-radius: 12px 12px 0 0;
    }
    
    .vote-ballot-details {
      position: absolute;
      bottom: 15%;
      left: 10%;
      right: 10%;
      height: 40%;
      background: linear-gradient(to bottom, 
        rgba(60, 60, 68, 0.9), 
        rgba(48, 48, 54, 0.9)
      );
      border-radius: 8px;
      box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
    }
    
    .vote-ballot-details:before {
      content: "";
      position: absolute;
      top: 20%;
      left: 15%;
      width: 70%;
      height: 4px;
      background-color: #4a4a52;
      border-radius: 2px;
      box-shadow: 0 12px 0 #4a4a52, 0 24px 0 #4a4a52;
    }
    
    .vote-ballot-engraved-text {
      position: absolute;
      bottom: 16%;
      left: 0;
      right: 0;
      text-align: center;
      font-family: Arial, sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 1px;
      text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
    }
    
    .vote-ballot-paper {
      position: absolute;
      width: 85px;
      height: 110px;
      background-color: white;
      border-radius: 4px;
      top: -150px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
      z-index: 2;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .vote-ballot-wrapper:hover .vote-ballot-paper {
      opacity: 1;
      animation: vote-drop-paper-vertical 3s infinite;
    }
    
    .vote-paper-content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .vote-paper-content:before {
      content: "";
      position: absolute;
      top: 25%;
      left: 20%;
      width: 60%;
      height: 6px;
      background-color: #e0e0e0;
      border-radius: 2px;
      box-shadow: 0 18px 0 #e0e0e0, 0 36px 0 #e0e0e0;
    }
    
    .vote-paper-check {
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid #4CAF50;
      border-radius: 50%;
      top: 45%;
      right: 20%;
    }
    
    .vote-paper-check:before {
      content: "";
      position: absolute;
      top: 45%;
      left: 25%;
      width: 10px;
      height: 5px;
      border-left: 2px solid #4CAF50;
      border-bottom: 2px solid #4CAF50;
      transform: rotate(-45deg);
    }
    
    @keyframes vote-drop-paper-vertical {
      0% {
        top: -150px;
        transform: translateX(-50%);
        opacity: 1;
      }
      40% {
        top: -50px;
        transform: translateX(-50%);
        opacity: 1;
      }
      75% {
        top: 20px;
        transform: translateX(-50%);
        opacity: 0.8;
      }
      100% {
        top: 40px;
        transform: translateX(-50%) scale(0.8);
        opacity: 0;
      }
    }

/* submit art */

/* index */

/* profile */

.hero-image-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 43%;
}

.background{
    height:30vh;
    min-height: 250px;
}

.profile_headline{
    display: flex;
    flex-direction:row;
    justify-content: start;
    width:100%;
    padding-bottom:10px
}
@media(max-width: 920px) {
    .profile_headline{
        flex-direction:column;
        align-items: center;
        width:auto
    }
}

.profilepic_field{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 20vw;
    margin-top: -100px
}

.profilepic {
    aspect-ratio: 1/1 !important;
    width: 300px;
    border: clamp(4px, 0.3vw, 7px) solid white;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.online {
    margin-top: -50px;
    margin-left:180px;
    width: 35px;
    margin-bottom: 30px;
}

@media (max-width: 1920px) {
    .profilepic {
        width: 275px;        
    }
}

@media (max-width: 1600px) {
    .profilepic {
        width: 250px;        
    }  
}

@media (max-width: 1224px) {
    .profilepic {
        width:225px;
    }
    .online {
        margin-left:160px;
        width: 30px;
    }
    .profilepic_field{
        margin-top: -70px;
    }
}

@media (max-width: 920px) {
    .profilepic {
        width:225px;
    }
    .profilepic_field{
        margin-top: -90px;
        margin-left: 0px;
    }
}

@media (max-width: 620px) {
    .profilepic {
        width:200px;
    }
    .online {
    margin-left:145px;
    }
}

@media (max-width: 460px) {
    .profilepic {
        width:175px;
    }
    .online {
    margin-left:140px;
    }
}

.owner_presentation{
    display:flex;
    flex-direction: column;
    align-items: start;
}

@media(max-width: 920px) {
.owner_presentation{
    align-items: center;
}
}

.profile_owner{
    font-size: 50px;
}

@media(max-width: 1920px) {
    .profile_owner{
    margin-top: 15px!important;
    font-size: 40px;
}
}

@media(max-width: 1400px) {
.profile_owner{
    margin-left:35px!important;
}
}

@media(max-width: 1224px) {
.profile_owner{
    font-size: 32px;
    margin-left: 25px!important;
}
}

@media(max-width: 920px) {
    .profile_owner{
    margin-top: 0px!important;
    margin-left: 0px!important;
    font-size: 35px;
    }
}

@media(max-width: 400px) {
    .profile_owner{
    font-size: 27px;
    }
}

@media(max-width: 1920px) {
.owner_title{
    font-size: 20px;
}
}

@media(max-width: 1400px) {
.owner_title{
    margin-left:35px!important;
}
}

@media(max-width: 1224px) {
.owner_title{
    font-size: 17px;
    margin-left: 25px!important;
}
}

@media(max-width: 920px) {
    .owner_title{
    margin-top: 0px!important;
    margin-left: 0px!important;
    font-size: 23px;
    }
}

@media(max-width: 400px) {
    .owner_title{
    font-size: 18px;
    }
}

.info_area{
    color:#7f7f7f;
    letter-spacing: 1px;
    font-size: 25px;
    margin-top: 15px;
    font-weight: 500;
}

@media(max-width: 1920px) {
.info_area{
    font-size: 19px;
}
}

@media(max-width: 1600px) {
.info_area{
    font-size: 18px;
    letter-spacing: 0px;
}
}

@media(max-width: 1400px) {
.info_area{
    margin-left: 35px!important;
    margin-top: 10px!important;
}
}

@media(max-width: 1225px) {
.info_area{
    display: none!important;
}
}

.alt_info{
    display: none!important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 15px;
    height:fit-content;
    padding:20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    width:100%;
    min-width: 260px;
}

@media(max-width: 1225px) {
.alt_info{
    display: block!important;
}
}

@media(max-width: 1310px) {
.alt_info{
    width:500px;
}
}

@media(max-width: 500px) {
.alt_info{
    width:100%;
}
}
.big_screen_button_field{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    gap:30px;
    border-radius: 15px;
    height:fit-content;
    padding:20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    width:100%;
    max-width: 500px;
}

@media(max-width: 1225px) {
.big_screen_button_field{
    display: none!important;
}
}

.profile_button_big{
    width: 100%;
    height:40px;
    border-radius: 10px;
}

.profile_button_big:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.profile_button_small{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:150px;
    height:40px;
    border-radius: 10px;
}

.profile_button_small:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.chat_button{
    width:80px
}

@media(max-width: 420px) {
.profile_button_small{
    width:250px;
    font-size:16px!important
}
.chat_button{
    width:250px;
}
}

.small_screen_button_field{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: none!important;
    margin-left:20px;
    margin-top:15px
}

@media(max-width: 1225px) {
.small_screen_button_field{
    display: flex !important;
}
}

@media(max-width: 992px) {
.small_screen_button_field{
    margin-left:10px
}
}

@media(max-width: 920px) {
.small_screen_button_field{
    margin-top: 10px!important;
}
}

@media(max-width: 420px) {
.small_screen_button_field{
    flex-direction: column;
    gap:10px
}
}

.under_picture_invitation{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.invitation_answer_field {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}

@media(max-width: 920px) {
    .under_picture_invitation{
    display: none;
    }
}

@media(max-width: 920px) {
    .under_name_invitation{
    display: block!important;
    margin-top: -14px;
    margin-bottom: 10px;
    }
}

.profile_secondary{
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding-left: 20vw;
    padding-right: 20vw;
    background-color: #f6f6f6;
    border-top: solid 1px #dbdbdb;
    flex:1;
    gap:25px;
}

@media(max-width: 1310px) {
    .profile_secondary{
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap:30px;
    padding:0px
}
}

.profile_initiative_field{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width:500px;
    gap:20px;
}

@media(max-width: 500px) {
.profile_initiative_field{
    width:100%;
}
}
.profile_footer{
    background-color: #f6f6f6;
}

.no_interactions{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0px;
}

.no_interactions_top{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0px;
    margin-left:5px;
}

@media(max-width: 992px) {
    .no_interactions_top{
        margin-left:13px;
    }
}

@media(max-width: 920px) {
    .no_interactions_top{
        margin-left:-10px;
    }
}

.friend_request_notification{
   font-size: 25px;
}

@media(max-width: 1919px) {
.friend_request_notification{
   font-size: initial;
}
}

.friend_list_button{
    position:fixed;
    right:0;
    top:30vh;
    display:none;
    border-style: solid;
    border-color: #ddd;
    border-width:1px 0px 1px 1px;
    border-radius: 5px 0px 0px 5px;
    background: linear-gradient(135deg, #2a3bf5 0%, #654ba2 100%);
    border-radius: 8px 0px 0px 8px;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

@media(max-width: 1950px) {
.friend_list_button{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
}

@media(max-width: 1950px) {
.friend_list_icon{
    width: clamp(40px, calc(40px + (60 - 40) * (100vw - 768px) / (1920 - 768)), 60px);
}
}

@media(max-width: 768px) {
.friend_list_icon{
    width:40px
}
}


.offcanvas{
    width: 300px !important;
}

@media(max-width: 1919px) {
.friends_icon_text{
    display: none;
}
}

.search-connections-input, .search-initiatives-input, .search-messages-input {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    width:275px!important;
    padding-left:10px!important;
}

.search-connections-input:focus, .search-initiatives-input:focus, .search-messages-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.search-connections-input::placeholder, .search-initiatives-input:focus::placeholder, .search-messages-input::placeholder {
  color: #a5a4a4;
}

.search-messages-input{
    width:250px!important;
}

.user_item, .domain_item, .filter_item{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    font-weight: 500;
    padding:13px;
}

.filter_item{
    cursor:pointer
}

.user_item:hover{
    cursor:pointer;
    background-color: lightgray;
}

.domain_item:hover{
    cursor:pointer;
}

.active_filter{
    color:#3b82f6;
    cursor:pointer;
    fill:#3b82f6!important;
    stroke:#3b82f6!important;
}

.friendpic{
    width:40px;
    height:40px;
    border-radius: 20px;
}

.friendpic_border {
    border: solid 1px lightgrey;
    border-radius: 20px;
}

.friend_online{
    width:13px;
    height:13px;
    margin-left:-11px;
    margin-top:25px;
}

.friend_name{
    margin-left:6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bell_notification_background{
    background-color: red;
    width:20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    animation: notificationPulse 10s infinite;
}

.bi-bell-fill{
    color: white;
    font-size: 13px;
}

.bi-envelope-arrow-down-fill{
    color: white;
    font-size: 10px;
}

.message_notification_background{
    background-color: red;
    width:18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: notificationPulse 10s infinite;  
    position: absolute;
    top: 40px;
    left: 12px;
}

.chat_notification_background{
    background-color: red;
    width:22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: notificationPulse 10s infinite;  
}

@keyframes notificationPulse {
    0% {
        transform: scale(1);
    }
    5% {
        transform: scale(1.3);
    }
    10% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

/* profile */

/* home */

.election-background,
.referendum-background,
.dual-background {
  display: block;
}

.alt-election,
.alt-referendum,
.alt-dual {
  display: none;
}

@media (max-width: 550px) {
  .election-background,
  .referendum-background,
  .dual-background {
    display: none;
  }
  
  .alt-election,
  .alt-referendum,
  .alt-dual {
    display: block;
  }
}

.animated_smartphone_content{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: fit-content;
    animation: infiniteSmartphoneScroll 80s linear infinite;
}

@keyframes infiniteSmartphoneScroll {
    0% { transform: translateY(); }
    100% { transform: translateY(calc(-50%)); }
}

.smartphone_carousel_image{
    width:196px
}
        
#finalC {
    transform-style: preserve-3d;
    backface-visibility: visible;
}

@keyframes rotateFullTurn {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}

    .rotating {
    animation: rotateFullTurn 3s cubic-bezier(0.4, 0.0, 0.6, 1);
    animation-iteration-count: 3;
}

@keyframes flashEffect {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(2) drop-shadow(0 0 15px #2455c6); }
}

.flash {
    animation: flashEffect 0.8s ease-in-out;
}

.over-hero{
    position:relative;
    margin-bottom:-114px;
}

.under-nav{
    position:relative;
    z-index: 1;
}

.hero-container {
    width: 100%;
    
}

.carousel-item img {
    height: 55vh;
    object-fit: cover;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.my-custom-caption {
    margin-top: -55vh;
    position: relative;
    padding-top:150px;
    left: 5%;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    height:55vh;
}


.my-custom-caption h1{
    font-size: calc(2vh + 2vw);
    font-family: "Open Sans", sans-serif;
}

.my-custom-caption p{
    font-size: calc(1.1vh + 1.1vw);
    font-family: "Open Sans", sans-serif;
}

@media(max-height: 600px) {
    .my-custom-caption p{
        margin-top: 10px !important;
    }
}

.my-custom-ballot-caption {
    margin-top: -55vh;
    position: relative;
    padding-top:35vh;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    height:55vh;
    padding-bottom: 3vh;
}

@media(max-height: 900px) {
    .my-custom-ballot-caption {
        padding-bottom: 2vh!important;
    }
}

@media(max-height: 700px) {
    .my-custom-ballot-caption {
        padding-bottom: 1vh!important;
    }
}

.carousel-caption h1{
    font-family: "Open Sans", sans-serif;
}

.carousel-caption p{
    font-family: "Open Sans", sans-serif;
    font-size: 17px;
}

.effect-active {
    background-color: white;
  }

/* features */

.position-relative {
    background-color: #f8f9fa;
    height: 325px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
.ballot-device {
    position: absolute;
    right: 20%;
    width: 225px;
    height: 275px;
    background-color: #222;
    border-radius: 15px;
    transform: rotate(10deg);
    z-index: 1;
    overflow: visible;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
  
.ballot-slot {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 10px;
    background-color: #111;
    border-radius: 5px;
}
  
.ballot-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0));
    border-radius: 15px 15px 0 0;
}
  
.ballot-paper {
    position: absolute;
    width: 100px;
    height: 120px;
    background-color: white;
    border-radius: 5px;
    top: -150px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    animation: dropPaper 3s infinite;
    z-index: 0;
  }
  
.ballot-paper:before {
    content: "";
    position: absolute;
    top: 25%;
    left: 20%;
    width: 60%;
    height: 10px;
    background-color: #ddd;
    border-radius: 2px;
    box-shadow: 0 15px 0 #ddd, 0 30px 0 #ddd, 0 45px 0 #ddd;
}
  
@keyframes dropPaper {
    0% {
      top: -150px;
      transform: translateX(-50%) rotate(-5deg);
    }
    40% {
      top: -50px;
      transform: translateX(-50%) rotate(5deg);
    }
    60% {
      top: -20px;
      transform: translateX(-50%) rotate(-5deg);
    }
    75% {
      top: 25px;
      transform: translateX(-50%) rotate(0deg);
    }
    100% {
      top: 25px;
      transform: translateX(-50%) scale(0.8);
      opacity: 0;
    }
}
  
.graph-device {
    position: absolute;
    left: 18%;
    width: 250px;
    height: 200px;
    background-color: #fff;
    border-radius: 15px;
    transform: rotate(-8deg);
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
   padding: 15px 30px 10px 15px;
}

.features-content {
    position: relative;
    z-index: 2;
    width: auto;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 60px;
    color:#2455c6;
} 
  
@media (max-width: 1400px) {

    .ballot-device {
      right: 15%;
    }
    
    .graph-device {
      left: 13%;
    }
}

@media (max-width: 1200px) {

    .position-relative {
        height: 240px;
      }

    .ballot-device {
      width: 160px;
      height: 200px;
      right:12%
    }
    
    .graph-device {
      width: 200px;
      height: 160px;
      left:11%
    }
}
  
@media (max-width: 992px) {
    .ballot-device {
        width: 150px;
        height: 190px;
        right: 8%;
    }
    
    .graph-device {
      width: 180px;
      height: 140px;
      left: 8%;
    }

    .features-content {
        font-size: 40px;
    } 
  }
  
@media (max-width: 768px) {

    .position-relative {
        height: 200px;
      }

    .ballot-device {
        width: 130px;
        height: 160px;
        right:6%;
    }
    
    .graph-device {
      width: 140px;
      height: 100px;
      left:4%
    }
    
}

@media (max-width: 578px) {
    .ballot-device {
      width: 120px;
      height: 150px;
    }
    
    .ballot-paper {
        width: 80px;
        height: 100px;
      }

      .graph-device {
        width: 130px;
        height: 95px;
        left:5%;
      }
}

@media (max-width: 475px) {
    .features-content {
        font-size: 25px;
    }
}

@media (max-width: 440px) {
    .ballot-device {
        width: 120px;
        height: 150px;
      }
      
      .graph-device {
        width: 130px;
        height: 95px;
        left:3%;
      }
}

@media (max-width: 375px) {
    
    .ballot-device {
        display: none;
      }

      .ballot-paper {
        display: none;
      }

      .graph-device {
        display: none;
      }

}

.highlighted-text{
    color:#2455c6
}

.featurette-heading{
    font-size: 30px;
    font-weight: 600;
}
.featurette-content{
    font-size: 23px;
}

@media (max-width: 992px) and (min-width:768px) {

    .featurette-heading{
    font-size: 25px;
    }

    .featurette-content{
    font-size: 15px;
    }
}

@media (max-width: 768px){
    .featurette{
        max-width: 500px;
    }
}

.thumbnail{
    background-size: cover;
    background-position: center;
    aspect-ratio: 2/1;
}

.play_button{
     font-size: 120px;
}

.video-field{
    border-style: solid;
    border-radius: 10px;
    border-width: 1px;
    border-color: #000000;
    overflow: hidden;
    cursor: pointer;
}

.video-field:hover{
    filter: brightness(90%);
}

/* features */

/* home */

/* applicants */

.searchbar-field {
    border-radius: 5px;           
    overflow: hidden;            
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width:50%;
    min-width:260px;
}

@media (max-width: 1000px){
    .searchbar-field {
        width:60%;
    }
}

@media (max-width: 768px){
    .searchbar-field {
        width:70%;
    }
}

input.applicant-search, input.result-search {
    border: none;                 
    height: 44px;                 
    padding: 10px 15px;            
}

input.applicant-search:focus, input.result-search:focus {
    box-shadow: none;              
    outline: none;                 
}

.form-control{
    padding-left:6px;
    width:100%;
}
/* make x disappear */
.form-control::-webkit-search-cancel-button,
.form-control::-webkit-clear-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.form-control::-ms-clear,
.form-control::-ms-reveal {
  width: 0;
  height: 0;
}
/* make x disappear */

/* make color disappear */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  transition: background-color 5000s ease-in-out 0s;
}
/* make color disappear */

/* from adaptation for small screens */

@media (max-width: 400px){
    .form-floating, .form_sm_screen, .submit_button, .submit_button_red{
        width:100%;
    }
}

/* from adaptation for small screens */

.toggle-text {
    width:100px;
    height:44px;
    background-color: #2455c6;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);               
    margin-top: 30px;
    transition: width 0.2s ease;             
}

.toggle-text.expand{
    width:233px
}

.sort-field {
    max-height: 0;                 
    overflow: hidden;              
    transition: max-height 0.7s ease;
    width: 233px;                  
    background-color: white;      
    border-radius: 0 0 5px 5px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

.sort-field.active-field {
    max-height: 500px;
  }

.sort-item {
    transition: background-color 0.2s ease; 
}

.sort-item:hover{
    background-color: #f0f4ff;
}

.sort-option {
    cursor: pointer;         
}

.accordion{
    width:100%;
}

.accordion-button:focus {
    box-shadow: none;
  }

.accordion-button {
    padding: 0;
    height:50px;
    overflow: hidden;
}

.file_label{
    width:50px;
    height:100%;
    border-color:#252728;
    border-width: 1px;
    border-style:solid;
    border-radius: 5px 0px 0px 5px;
}

.date_font{
    font-size: 14px;
}

.applicant_font{
    font-size: 18px;
    font-weight: 600;
    margin-left: 15px;
}

@media (max-width: 450px) {

    .date_font{
        font-size: 11px;
    }

    .applicant_font{
        font-size: 16px;
        font-weight: 600;
        margin-left: 7px;
    }

}

.action_item{
    border:transparent;
    color:white;
    width:100%;
    background-color: transparent;
    height: 30px;
}

/* applicants */

/* schedule */

.choice_field {
    width: 100%;
    height: 10vh;
    display: flex;
    border-radius: 10px;
    border-style:solid;
    overflow:hidden;
    border-width: 1px;
    border-color:#2455c6;
  }
  
  .choice_field .choice_1 {
    width: 51%;  
    height: 100%;
    background-color: #2455c6;
    color:white;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  }
  
  .choice_field .choice_2 {
    width: 51%;  
    margin-left: -2%;  
    height: 100%;
    color:#2455c6;
    background-color: white;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  }

  .choice_field .choice_1:hover {
    filter: brightness(90%);
  }
  
  .choice_field .choice_2:hover {
    filter: brightness(90%);
  }

  @media (max-width: 400px) {
 #add-question{
    width:40%;
 }

 #remove-question{
    width:40%;
 }

 #add-option{
    width:40%;
 }

 #remove-option{
    width:40%;
 }
}
/* schedule */

/* upcoming */

.card {
    width: 50%;
    min-width: 300px;
    margin: 0 auto;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  @media (max-width: 1000px){
    .card {
        width:80%;
    }
}

@media (max-width: 500px){
    .card {
        width:100%;
    }
}
  
  .card-header {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .card-title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  .tabs {
    display: flex;
  }
  
  .tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
  }
  
  .tab-button:hover {
    color: #374151;
  }
  
  .tab-button.active {
    color: #2563eb;
    border-bottom: 2px solid #2563eb;
  }

  .tab-content {
    padding: 1rem;
  }
  
  .tab-panel {
    display: none;
  }
  
  .tab-panel.active {
    display: block;
  }
  
  .info-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
  }
  
  .info-label {
    color: #4b5563;
  }
  
  .info-value {
    font-weight: 500;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .date-time-container {
    text-align: right;
  }
  
  .date {
    font-weight: 500;
  }
  
  .time {
    font-size: 0.875rem;
    color: #6b7280;
  }
  
 
  .ballot-title {
    font-weight: 500;
    margin-bottom: 0.5rem;
  }
  
  .ballot-options {
    background-color: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.25rem;
  }
  
  .ballot-option {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  
  .ballot-option:last-child {
    margin-bottom: 0;
  }
  
  .ballot-number {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2563eb;
    color: white;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 0.5rem;
  }
  
  .ballot-number-2 {
    background-color: #3b82f6;
  }
  
  .ballot-number-3 {
    background-color: #60a5fa;
  }
  
  .ballot-number-4 {
    background-color: #93c5fd;
  }
  
  .ballot-number-5 {
    background-color: #bfdbfe;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }

  .incoming_shortly{
 
    color:dark;
    padding: 0px 5px 0px 5px;
  }

  .bg-about{
    background-color: #2455c6;
  }

  .bg-24h{
    background-color: #8b9dc9;
  }

  .glow-text {
    background: linear-gradient(90deg, #fc4b4b, #9e9a9a, #2a3bf5);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    animation: glow 3s ease-in-out infinite;
  }

  .attention-text {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    font-size: 18px;
    overflow: hidden;
    border-style:solid;
    border-width: 2px;
    border-color: transparent;
  }
  @keyframes glow {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
  }
  .rotating-border {
    position: relative;
    z-index: 0;
    border-radius: 10px;
    overflow: hidden;
    padding: 2px;
    height:35px;
    width:150px
  }
  
  .rotating-border::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#ff6b6b, #ff6b6b), 
                      linear-gradient(#ffffff, #ffffff), 
                      linear-gradient(#4d5dff, #4d5dff), 
                      linear-gradient(#ff6b6b, #ff6b6b);
    animation: rotate 6s linear infinite;
  }
  
  .rotating-border::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: inherit;
    border-radius: 8px;
  }
  
  @keyframes rotate {
    100% { transform: rotate(1turn); }
  }


    .rotating-border-slow::before {
        animation: rotate 6s linear infinite; 
      }
      
    
      .rotating-border-fast::before {
        animation: rotate 3s linear infinite;
      }

    .pre-question, .pre-candidate{
        background-color: #2455c6;
        border-style: solid;
        border-color: transparent;
        border-radius: 15px;
        color:white;
        font-size: 16px;
        height:30px;
        width:30px
    }

.notification_button{
    width:150px;
    font-weight:500;
}

.upcoming_card_item_field, .result_card_item_field{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:20px;
    margin-left:15px
}

@media (max-width: 650px) {
.upcoming_card_item_field, .result_card_item_field{
    flex-direction: column-reverse;
}
}

.custom_container{
    margin-left: 10px;
    margin-right: 10px;
}
/* upcoming */

/* initiatives */

.initiative_card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid #e4e6ea;
}

.presentation_pic{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    background-color: black;
    width:500px;
    aspect-ratio: 1/1.5;
    position: relative;
}

@media (max-width: 500px) {
.presentation_pic{
    width: 100vw;
  }
}

.image_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to bottom, 
        transparent 0%, 
        rgba(0,0,0,0.5) 30%,
        rgba(0,0,0,0.8) 60%,
        rgba(0,0,0,0.9) 100%
    );
    pointer-events: none;
    z-index: 1; 
}

.administration_pic{
    background-image: url("../images/initiatives/administration_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.advocacy_pic{
    background-image: url("../images/initiatives/advocacy_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.civil_rights_pic{
    background-image: url("../images/initiatives/civil_rights_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.community_service_pic{
    background-image: url("../images/initiatives/community_service_initiative.jpg");
    background-size: cover;
    background-position: center;
}


.culture_pic{
    background-image: url("../images/initiatives/culture_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.economy_pic{
    background-image: url("../images/initiatives/economy_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.education_pic{
    background-image: url("../images/initiatives/education_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.environment_pic{
    background-image: url("../images/initiatives/environment_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.healthcare_pic{
    background-image: url("../images/initiatives/healthcare_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.housing_pic{
    background-image: url("../images/initiatives/housing_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.infrastructure_pic{
    background-image: url("../images/initiatives/infrastructure_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.online_space_pic{
    background-image: url("../images/initiatives/online_space_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.parks_recreation_pic{
    background-image: url("../images/initiatives/parks_recreation_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.public_safety_pic{
    background-image: url("../images/initiatives/public_safety_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.transportation_pic{
    background-image: url("../images/initiatives/transportation_initiative.jpg");
    background-size: cover;
    background-position: center;
}

.urbanism_pic{
    background-image: url("../images/initiatives/urbanism_initiative.jpg");
    background-size: cover;
    background-position: center;
}


.domain {
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    animation: textFlow 3s ease-in-out infinite;
    font-size: 16px;
    font-weight: 500;
    margin-left: auto;
    margin-top: -25px;
}

@media(max-width: 400px) {
    .domain{
        font-size: 14px;
    }
}

.small_domain{
    font-size: 11px;
    margin-top: -21px;
}

.administration_domain {
    background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa, #3b82f6, #1e3a8a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.advocacy_domain {
    background: linear-gradient(90deg, #dc2626, #ef4444, #f87171, #ef4444, #dc2626);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.civil_rights_domain {
    background: linear-gradient(90deg, #7c2d12, #ea580c, #fb923c, #ea580c, #7c2d12);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.community_service_domain {
    background: linear-gradient(90deg, #ad1457, #e91e63, #f06292, #e91e63, #ad1457);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.culture_domain {
    background: linear-gradient(90deg, #8349e7, #8b5cf6, #a78bfa, #a480fa, #7c3aed);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.economy_domain {
    background: linear-gradient(90deg, #0d47a1, #1565c0, #42a5f5, #1565c0, #0d47a1);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.education_domain {
    background: linear-gradient(90deg, #b45309, #f59e0b, #fbbf24, #f59e0b, #b45309);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.environment_domain {
    background: linear-gradient(90deg, #4b8525, #4caf50, #6ac46e, #4caf50, #4d8825);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.healthcare_domain {
    background: linear-gradient(90deg, #be185d, #ec4899, #f9a8d4, #ec4899, #be185d);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.housing_domain {
    background: linear-gradient(90deg, #7c2d12, #ea580c, #fb923c, #ea580c, #7c2d12);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.infrastructure_domain {
    background: linear-gradient(90deg, #374151, #6b7280, #9ca3af, #6b7280, #374151);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.online_space_domain {
    background: linear-gradient(90deg, #0891b2, #06b6d4, #67e8f9, #06b6d4, #0891b2);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.parks_recreation_domain {
    background: linear-gradient(90deg, #166534, #22c55e, #86efac, #22c55e, #166534);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.public_safety_domain {
    background: linear-gradient(90deg, #991b1b, #dc2626, #f87171, #dc2626, #991b1b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.transportation_domain {
    background: linear-gradient(90deg, #374151, #6b7280, #9ca3af, #6b7280, #374151);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.urbanism_domain {
    background: linear-gradient(90deg, #451a03, #92400e, #d97706, #92400e, #451a03);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@keyframes textFlow {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.initiative_title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 45px;
    line-height: 1.3;
    margin-bottom:17%;
    height:20%;
    letter-spacing: 1px;
    font-weight: 700;
    color:white;
    padding-left:10%;
    padding-right:10%;
    position: relative;
    z-index: 2;
}

@media(max-width: 500px) {
    .initiative_title{
        font-size: 35px;
    }
}

.initiative_subtitle{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 0px 12px 9px 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media(max-width: 400px) {
    .initiative_subtitle{
        font-size: 14px;
    }
}

.interactive_initiative_field{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap:5px;
    align-items: center;
    width:100%;

    padding-left:clamp(5px, 1.7%, 10px);
    padding-right: clamp(5px, 1.7%, 10px);
}

 .authorpic, .interlocutorpic{
    width:44px;
    height:44px;
    border-radius: 22px;
    cursor:pointer;
 }

.authorpic_border, .interlocutorpic_border{
    border: solid 1px lightgrey;
    border-radius: 22px;
    min-width: 44px;
    min-height: 44px;
}

@media(max-width: 400px) {
 .authorpic{
    width:40px;
    height:40px;
    border-radius: 20px;
 }
 .authorpic_border{
    border-radius: 20px;
    min-width: 40px;
    min-height: 40px;
}
}

.author_online{
    width:16px;
    height:16px;
    margin-left:-14px;
    margin-top:30px;
}

@media(max-width: 400px) {
    .author_online{
        width:14px;
        height:14px;
        margin-left:-13px;
        margin-top:26px;
    }
}

.author_name{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    margin-left:6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 18px;
    font-weight: 700;
}

@media(max-width: 400px) {
    .author_name{
        font-size: 16px;
    }
}

.time_since_post{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    margin-left:8px;
    font-size: 12px;
    font-weight: 700;
}

.reaction-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #f6f6f6;
    border-style: none;
    border-radius: 5px;
    aspect-ratio: 2.5/1;
    flex:1;
    max-height: 40px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #65676b;
    position: relative;
    user-select: none;
}

@media (max-width: 400px){
.phone_disappear{
    display: none;
}
}
.reaction-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.like-btn:hover {
    color: #1877f2;
    background: #f0f8ff;
}

.dislike-btn:hover {
    color: #e74c3c;
    background: #fef5f5;
}

.comment-btn:hover {
    color: #228b22;
    background: #f6fff6;
}

.unlike-btn {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.unlike-btn:hover {
    background: #0c63d4;
    border-color: #0c63d4;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.3);
}

.undislike-btn {
    background: #e74c3c;
    border-color: #e74c3c;
    color: white;
}

.undislike-btn:hover {
    background: #c0392b;
    border-color: #c0392b;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3);
}

.unpin-btn {
    background-color: #ffd145;
    color:rgb(53, 53, 53);
}

.unpin-btn:hover {
    color: black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.pin-btn:hover {
    border-color: #ffa500;
    color: #ffa500;
    background: #fffaf0;
}

.settings-btn {
    color: gray;
    border-style: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent;
}

.settings-btn:hover {
    color: black;
}

.promote-btn:hover{
    color: #893cd6;
    background: #f2edfa;
    box-shadow: none;
}

.promoted-btn, .unpromote-btn{
    background-color: #9241e4;
    color:rgb(241, 241, 241)
}

.promoted-btn, .unpromote-btn:hover{
    background-color: #7a36be;
    box-shadow: 0 4px 16px #672ea1(24, 119, 242, 0.3);
    color:white
}
@media(max-width: 576px) {
.modal-dialog-centered{
    margin:auto;
}
}

.likes_count, .dislikes_count, .comments_count_initiative, .promotions{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
}

@media(max-width: 500px) {
.icon-replacement{
    display: block !important;
}
.be_replaced_by_icon{
    display: none;
}
}

.create_initiative_container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

@media(max-width: 1200px) {
.create_initiative_container{
    justify-content: center;
    gap:50px;
}
}

@media(max-width: 1000px) {
.create_initiative_container{
    flex-direction: column;
    gap:10px
}
}

.modal_option{
    border-style: none;
    background-color: white;
    border-radius: 10px 0px 0px 10px;
    padding-left: 10px;
}

.modal_option:hover{
    filter:brightness(93%)
}

.modal_option_title{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.modal_option_subtitle{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 12px;
}

.comment_modal{
    width:700px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid #e4e6ea;
}

@media(max-width: 700px) {
.comment_modal{
    width:100%;
}
}

.comment_section_title_field{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    height:60px;
    border-bottom: solid 1px #d1d1d1;
    padding-right: 15px;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
}

.comment_section_title{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-left: auto;
    margin-right: auto;
}

@media(max-width: 400px) {
.comment_section_title{
    font-size: 18px;
}
}

.comment_scrollable{
    height:70vh;
    overflow-y: auto;
    padding: 10px 25px 10px 5px;
    width:100%;
    min-height: 35%;
}

.comment_field{
    background-color: #f0f2f5;
    border-radius:15px;
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding:10px;
    max-width:100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.comment_interactive_field{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

.insert_comment_section{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    width:100%;
    padding:10px;
    border-top: solid 1px #d1d1d1;
    box-shadow: 0 -1px 2px 1px rgba(0, 0, 0, 0.1);
}

.comment_insert_section{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: end;
    background-color: #f0f2f5;
    border-radius:15px;
    padding:5px;
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 14px;
    width:100%;
}

.insert_comment_form{
    background-color: #f0f2f5;
    border-style: none;
    width:100%;
    resize: none; /* Removes resize handle */
    overflow-y: hidden;
    min-height: 44px;          
    max-height: calc(35% + 54px);            
}

.insert_comment_form.scrollable {
    overflow-y: auto; /* Enables scrolling when max height reached */
}

.insert_comment_form:focus{
    box-shadow: none;
    outline: none;
}

.like_comment_button{
    border-style: none;
    background-color:white;
    color: #8f8f8f;
}

.like_comment_button:hover{
    color: #1877f2;
}

.unlike_comment_button{
    border-style: none;
    background-color:white;
    color: #1877f2;
}

.unlike_comment_button:hover{
    color: #1258b4;
}

.delete_comment_button{
    border-style: none;
    background-color: white;
    color: #8f8f8f;
}

.delete_comment_button:hover{
    color: black;
}

.comment_actions_button{
    border-style: none;
    background-color: white;
    color: #8f8f8f;
    cursor: pointer;
}

.comment_actions_button:hover{
    color: #1258b4;
}

.comment_author{
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cursor-default {
    cursor: default;
}

.initiative_field{
    gap:20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.filter_list_button{
    position:fixed;
    right:0;
    top:30vh;
    display:none;
    border-style: solid;
    border-color: #ddd;
    border-width:1px 0px 1px 1px;
    padding:10px;
    border-radius: 5px 0px 0px 5px;
    background: linear-gradient(135deg, #2a3bf5 0%, #654ba2 100%);
    border-radius: 8px 0px 0px 8px;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

@media(max-width: 1950px) {
.filter_list_button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
}

@media(max-width: 1950px) {
.filter_list_icon{
    width: clamp(50px, calc(50px + (50 - 25) * (100vw - 768px) / (1920 - 768)), 70px);
}
}

@media(max-width: 768px) {
.filter_list_icon{
    width:50px
}
}

.filter_section_title{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.filter_initiatives_submit{
    border-style: none;
    width:40px;
}

.filter_initiatives_submit:hover{
    color: #0d6efd;
}

.domain_filter_button{
    color:white;
    background-color: #0d6efd;
    border-style: none;
    border-radius: 13px;
    width:fit-content;
    padding:2px 15px;
    font-size: 15px;
    font-weight: 500;
    margin: 1px;
}

.civil_rights_text{
    color:#ea580c;
}

.community_service_text{
     color:#e91e63;
}

.culture_text{
     color: #7c3aed;
}

.environment_text {
    color: #4caf50;
}

.healthcare_text {
    color:#ec4899;
}

.infrastructure_text{
    color:#686e7c
}

.modal .btn-close:focus {
    outline: none;
    box-shadow: none;
}

.filter-items-field{
    width:100%;
}

@media(max-height: 720px) {
.filter-items-field{
    height: 400px;
    overflow-y: auto;
}
}

/* initiatives */

/* chat */

.interlocutor_name{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.chat_field {
    overflow-y: auto;
    height: 100%;
    width:100%;
}

.chat_field::-webkit-scrollbar {
    width: 5px;
}

.chat_field::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px;
}

.beach {
    background-image: url("../images/chat/beach.jpg");
    background-size: cover;
    background-position: center;
}

.classic {
    background-image: url("../images/chat/classic.jpg");
    background-size: cover;
    background-position: center;
}

.coffee {
    background-image: url("../images/chat/coffee.jpg");
    background-size: cover;
    background-position: center;
}

.comet {
    background-image: url("../images/chat/comet.jpg");
    background-size: cover;
    background-position: center;
}

.conference_room {
    background-image: url("../images/chat/conference_room.jpg");
    background-size: cover;
    background-position: 47% center;
}

.dust {
    background-image: url("../images/chat/dust.jpg");
    background-size: cover;
    background-position: center;
}

.evening {
    background-image: url("../images/chat/evening.jpg");
    background-size: cover;
    background-position: center;
}

.lake {
    background-image: url("../images/chat/lake.jpg");
    background-size: cover;
    background-position: 95% center;
}

.mountains {
    background-image: url("../images/chat/mountains.jpg");
    background-size: cover;
    background-position: 42% center;
}

.pastel {
    background-image: url("../images/chat/pastel.jpg");
    background-size: cover;
    background-position: center;
}

.pebbles {
    background-image: url("../images/chat/pebbles.jpg");
    background-size: cover;
    background-position: center;
}

.sea_view {
    background-image: url("../images/chat/sea_view.jpg");
    background-size: cover;
    background-position: center;
    background-position: 60% center;
}

.stripes {
    background-image: url("../images/chat/stripes.jpg");
    background-size: cover;
    background-position: center;
}

.wall {
    background-image: url("../images/chat/wall.jpg");
    background-size: cover;
    background-position: center;
}

.water {
    background-image: url("../images/chat/water.jpg");
    background-size: cover;
    background-position: center;
}

.chat_background{
    width:1100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height:90vh;
    margin-bottom: 100px;
    border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid #e4e6ea;
    overflow: hidden;
}

@media(max-width: 1100px) {
.chat_background{
    width:100vw;
}
}

.no-arrow.dropdown-toggle::after {
    display: none !important;
}

.dropdown-menu.x_-2{
    margin-left: -9px!important;
}

@media(max-width: 1100px) {
.dropdown-menu.x_-2{
    margin-left: -2px!important;
}
}

@media(max-width: 1024px) {
.dropdown-menu.x_-2{
    margin-left: -10px!important;
}
}

.dropdown-menu.xy_12-13{
    margin-left: 12px!important;
    margin-top: -13px!important;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1), 0px 10px 5px rgba(0, 0, 0, 0.1);
}

.dropdown-menu.xy_12-4{
    margin-left: 12px!important;
    margin-top: -4px!important;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1), 0px 10px 5px rgba(0, 0, 0, 0.1);
}

@media(max-width: 575px) {
.dropdown-menu.xy_12-4{
    margin-left: -162px!important;
    margin-top: 35px!important;
    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1), 0px 10px 5px rgba(0, 0, 0, 0.1);
}
.search-messages-input{
    width:50vw!important;
}
}

@media(max-width: 450px) {
.dropdown-menu.xy_12-13{
    margin-left: -162px!important;
    margin-top: 67px!important;
    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1), 0px 10px 5px rgba(0, 0, 0, 0.1);
}
}

.message_container_left {
    text-align: left;
    padding: 4px;
    margin: 10px;
    background-color: lightgreen;
    border-radius: 6px;
    border: 1px solid black;
    float: left;
    clear: both;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    display: flex;
    flex-direction: column;
}

.message_container_right {
    text-align: left;
    padding: 4px;
    margin: 10px;
    background-color: white;
    border-radius: 6px;
    border: 1px solid black;
    float: right;
    clear: both;
    overflow-wrap: break-word;
    word-break: break-all;
    display: flex;
    flex-direction: column;
}

.message_image {
    width: 200px;
    height:150px;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 3px;
}


.date_container {
    padding: 1px 4px 4px 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    font-size: 12px;
}

.search_connections_submit{
    border-style: none;
    width:40px;
}

/*prevent unwanted background effect on click */
.dropdown-item:active,
.dropdown-item:focus {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    color:black!important
}
/*prevent unwanted background effect on click */

.insert_message_section{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    width: 100%;
    padding: 10px 15px;
    box-shadow: 0 -5px 5px 1px rgba(0, 0, 0, 0.1);
    background-color: #f0f2f5;
    height: 100%;
}

.insert_message_form{
    background-color: #f0f2f5;
    border-style: none;
    width:100%;
    resize: none; /* Removes resize handle */
    overflow-y: hidden;  
    border-style: none;
    height:7vh;
    min-height: 70px;
}

.insert_message_form:focus{
    border:none;
    outline:none;
}

.attach_button:hover{
    filter: brightness(90%);
}

.send_button {
    background: none;
    border: none;
    padding: 0;
    outline: none;
}

.send_button:hover {
    filter: brightness(90%);
}

.chat_file_field{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 150px;
    width:fit-content;
    background-color: #f0f2f5;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 100;
    margin-bottom: -2px;
    padding:20px;
    max-width: 300px;
}

.close_file_field{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:26px;
    height:26px;
    border-radius: 13px;
    cursor:pointer;
    margin-bottom: -25px;
    z-index: 200;
}

.close_pdf_file_field, .close_profilepic_file_field, .close_background_file_field{
    cursor:pointer;
}

.pdf_link{
    background-color: transparent;
    border-color: transparent;
    text-decoration-line: underline;
    color:#0c63d4
}

.seen-indicator{
    margin-bottom: 5px;
    margin-right:3px
}

#searchUp, #searchDown{
    cursor:pointer;
}

.search-highlight {
    background-color: #ffeb3b;
    color: #000;
    padding: 1px 2px;
    border-radius: 2px;
}

.search-highlight.current {
    background-color: #ff9800;
    font-weight: bold;
    box-shadow: 0 0 3px rgba(255, 152, 0, 0.5);
}

.search-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
}

.search-navigation button {
    background: none;
    border: 1px solid #6c757d;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
}

.search-navigation button:hover:not(:disabled) {
    background-color: #e9ecef;
}

.search-navigation button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#searchCounter {
    font-weight: 500;
    color: #495057;
    min-width: 30px;
    text-align: center;
}

.message{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0px;
}

.discrete_scroll::-webkit-scrollbar {
    width: 5px;
}

.discrete_scroll::-webkit-scrollbar-thumb {
    background-color: #5c5c5c;
    border-radius: 10px;
}

textarea::-webkit-scrollbar {
    width: 5px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px;
}
/* chat */

/* results */

.result-card {
    width: 50%;
    min-width: 280px;
    margin: 0 auto;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

.ballot-report-btn{
    background: white;
    color: #0c63d4;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.ballot-report-btn:hover{
    filter:brightness(90%)
}

.info-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(229, 231, 235);
    border-radius: 8px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.question-body{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media(max-width: 400px) {
.question-body{
    flex-direction: column;
}
}

.pro_majority_percentage{
    background-color: rgb(212, 255, 209);
}

.against_majority_percentage{
    background-color: rgb(255, 198, 198);
}

.undecided_percentage{
    background-color: rgb(255, 255, 191);
}

.invalidated_result{
    background-color: rgb(214, 214, 214);
}

.bg-electorate{
    background-color: #0c63d4;
}

.bg-turnout-bar-validated{
    background-color: #fbbf24;
}

.bg-turnout-bar-invalidated{
    background-color: #ef4444;
}

.report-title{
    font-size: 40px;
    font-weight: 500;
    text-align: start;
}

.report-turnout{
    font-size: 20px;
    font-weight: 500;
    color: #3f3f3f
}

.report-margin{
    margin-left:25px;
    margin-right: 25px;
}

.pie-chart-margin{
    margin-left: -350px;
}

@media(max-width: 1200px) {
.pie-chart-margin{
    margin-left: -250px;
}
}

@media(max-width: 950px) {
.pie-chart-margin{
    margin-left: 0px;
}
}

.custom-margin-bottom{
    margin-bottom: 50px;
}

@media(max-width: 525px) {
.custom-margin-bottom{
    margin-bottom: 30px;
}
}

.custom-margin-bottom-validity{
    margin-bottom: -13px;
}

@media(max-width: 525px) {
.custom-margin-bottom-validity{
    margin-bottom: 30px;
}
}

.pie-chart-field{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:150px;
}

@media(max-width: 950px) {
.pie-chart-field{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:50px;
}
}

.candidate-pie-percentages, .option-pie-percentages{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width:80%
}

.bg-candidate-1 {
    background-color: #e53e3e;
}

.bg-candidate-2 {
    background-color: #38b2ac;
}

.bg-candidate-3 {
    background-color: #dd6b20;
}

.bg-candidate-4 {
    background-color: #3182ce;
}

.bg-candidate-5 {
    background-color: #38a169;
}

.bg-candidate-6 {
    background-color: #805ad5;
}

.bg-candidate-7 {
    background-color: #d69e2e;
}

.bg-candidate-8 {
    background-color: #e53e8c;
}

.bg-candidate-9 {
    background-color: #00b5d8;
}

.bg-candidate-10 {
    background-color: #68d391;
}

.bg-candidate-11 {
    background-color: #9f7aea;
}

.bg-candidate-12 {
    background-color: #f56500;
}

.bg-candidate-13 {
    background-color: #2b6cb0;
}

.bg-candidate-14 {
    background-color: #48bb78;
}

.bg-candidate-15 {
    background-color: #ed64a6;
}

.bg-candidate-16 {
    background-color: #00a3c4;
}

.bg-candidate-17 {
    background-color: #ecc94b;
}

.bg-candidate-18 {
    background-color: #744210;
}

.bg-candidate-19 {
    background-color: #4a5568;
}

.bg-candidate-20 {
    background-color: #fc8181; 
}

.report-section{
    border-style: solid;
    border-width: 1px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.donut-pyramid-field{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:50px;
}

@media(max-width: 1450px) {
.donut-pyramid-field{
    flex-direction: column;
}
}

.bg-valid-votes {
    background-color: #25884e; 
}

.bg-invalid-votes {
    background-color: #ef4444; 
}

.halved-report-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 1px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    width: 50%;
    gap:50px;
    min-width: fit-content;
}

@media(max-width: 1450px) {
.halved-report-section{
    width: 100%;
}
}

.bg-male-votes{
    background-color: #3b82f6;
}

.bg-female-votes{
    background-color: #ec4899;
}

.custom-inner-space{
    margin-right: 50px;
    margin-bottom: 0px;
}

@media(max-width: 625px) {
.custom-inner-space{
    margin-right: 0px;
    margin-bottom: 20px;
}
}

.donut-percentages, .age-percentages{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media(max-width: 625px) {
.donut-percentages, .age-percentages{
    flex-direction: column;
    align-items: start;
}
}

.chart-scrollable{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    overflow-x: auto;
}

.custom-margin-bottom-age{
    margin-bottom: -13px;
}

.bg-pro{
    background-color: #10b981;
}

.bg-against{
    background-color: #ef4444;
}

.question-report {
    transition: opacity 1s ease-in-out;
}

.question-report.d-none {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

.question-report:not(.d-none) {
    opacity: 1;
    visibility: visible;
    position: relative;
    left: auto;
}

.referendum-title-field{
    display: flex;
    flex-wrap: wrap;
}

/* results */

/* preference_algorithms */

.preference-algorithms-field{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:75px;
    padding-top: 15px;
    margin-bottom: 30px;
    margin-top: 10px;
}

.algorithms_image_half{
    position: relative;
    width:50%;
    height: calc(100vh - 258px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    overflow: hidden;
    min-height: 581px;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.0) 10%, rgba(255,255,255,0.0) 90%, rgba(255,255,255,0.97) 100%);
    pointer-events: none;
    z-index: 2;
}

.animated-initiative-content {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: fit-content;
    animation: infiniteScroll 40s linear infinite;
}

@keyframes infiniteScroll {
    0% { transform: translateY(500px); }
    100% { transform: translateY(calc(-50% + 500px)); }
}

.position-relative img{
    max-width: 466px;
}

.algorithms_information_half{
    width: 50%;
}

.algorithms_information_field{
    width:466px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.algorithms_title_block{
    text-align: start;
    border-style: solid;
    border-width: 1px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 35px;
    font-weight: 700;
}

.algorithms_block{
    color:black;
    width:100%;
    padding:15px;
    border-width: 1px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.initiative-carousel-image{
    width:466px
}

@media(max-width: 1200px) {
    .preference-algorithms-field{
        flex-direction: column-reverse;
        height: fit-content;
        gap:40px;
    }
    .algorithms_image_half{
        width: 500px;
        align-items: center;
        height: 90vh
    }
    .algorithms_information_half{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: fit-content;
    }
    .algorithms_information_field{
        width:466px
    }
    .position-relative img{
        max-width: none;
    }
}

@media(max-width: 600px) {
    .algorithms_image_half{
        min-width: 320px;
        width: 80%;
    }
    .algorithms_information_half{
        min-width: 300px;
        width:75%
    }
    .algorithms_information_field{
        width:100%;
        min-width:300px
    }
    .algorithms_title_block{
        text-align: center;
    }
    .initiative-carousel-image{
        width: 100%
    }
}

.concepts-title {
    background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa, #3b82f6, #1e3a8a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradient-shift 8s ease-in-out infinite;
  }

  @keyframes gradient-shift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

/* preference_algorithms */

/* electoral_projections */

.electoral_projection{
    min-width: 1000px;
}

.projections_title_block{
    text-align: start;
    border-style: solid;
    border-width: 1px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 35px;
    font-weight: 700;
    margin-top: 30px;
}

.projections_half{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    gap:70px;
    margin-bottom: 30px;
}

.projections_block{
    color:black;
    width:100%;
    padding:15px;
    border-width: 1px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.projections_information_field{
    width:466px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.projections_title_block{
    text-align: start;
    border-style: solid;
    border-width: 1px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 35px;
    font-weight: 700;
}

.poll_animation_container {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            border: 1px solid #e5e7eb;
            width: 400px;
            position: relative;
        }

        @media(max-width: 1000px) {
        .projections_half{
            flex-direction: column;
            width:100%;
            gap:40px;
        }
        .poll_animation_container {
            width: 466px;
        }
        }

        @media(max-width: 500px) {
        .projections_title_block{
            text-align: center;
            min-width:300px
        }
        .projections_information_field{
            min-width:300px;
            width:75%;
        }
        .poll_animation_container {
            width:75%;
            min-width: 300px;
        }
        }

        .poll_animation_header {
            margin-bottom: 20px;
        }

        .poll_animation_title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .poll_animation_subtitle {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        .poll_animation_options_container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .poll_animation_option {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #ffffff;
            position: relative;
            overflow: hidden;
        }

        .poll_animation_option:hover {
            border-color: #3b82f6;
            background: #f8faff;
        }

        .poll_animation_option.poll_animation_selected {
            border-color: #3b82f6;
            background: linear-gradient(90deg, #3b82f6 0%, #3b82f6 var(--progress, 0%), #f8faff var(--progress, 0%), #f8faff 100%);
            color: white;
        }

        .poll_animation_option.poll_animation_selected .poll_animation_candidate_name {
            color: white;
            font-weight: 600;
        }

        .poll_animation_option.poll_animation_selected .poll_animation_candidate_party {
            color: rgba(255, 255, 255, 0.9);
        }

        .poll_animation_radio_button {
            width: 18px;
            height: 18px;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            margin-right: 12px;
            position: relative;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .poll_animation_option:hover .poll_animation_radio_button {
            border-color: #3b82f6;
        }

        .poll_animation_option.poll_animation_selected .poll_animation_radio_button {
            border-color: white;
            background: white;
        }

        .poll_animation_radio_button::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            color: #3b82f6;
            font-size: 12px;
            font-weight: bold;
            transition: transform 0.2s ease;
        }

        .poll_animation_option.poll_animation_selected .poll_animation_radio_button::after {
            transform: translate(-50%, -50%) scale(1);
            background: #3b82f6;
        }

        .poll_animation_candidate_info {
            flex: 1;
        }

        .poll_animation_candidate_name {
            font-size: 16px;
            font-weight: 500;
            color: #1f2937;
            margin: 0;
            transition: color 0.3s ease;
        }

        .poll_animation_candidate_party {
            font-size: 14px;
            color: #6b7280;
            margin: 2px 0 0 0;
            transition: color 0.3s ease;
        }

        .poll_animation_vote_percentage {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
            opacity: 0;
            transition: opacity 0.3s ease;
            display: none;
        }

        .poll_animation_option.poll_animation_selected .poll_animation_vote_percentage {
            opacity: 1;
            color: white;
        }

        .poll_animation_cursor {
            position: absolute;
            width: 24px;
            height: 24px;
            pointer-events: none;
            z-index: 10;
            opacity: 0;
        }

        .poll_animation_cursor svg {
            width: 100%;
            height: 100%;
            filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
        }

        .poll_animation_container {
            animation: poll_animation_sequence 8s infinite;
        }

        @keyframes poll_animation_sequence {
            0%, 15% {
                
            }
            16% {
                
            }
            20%, 35% {
                
            }
            40%, 50% {
                
            }
            55%, 70% {
                
            }
            75%, 85% {
                
            }
            90%, 100% {
                
            }
        }

        .poll_animation_cursor {
            animation: poll_animation_cursor_move 8s ease-in-out infinite;
        }

        @keyframes poll_animation_cursor_move {
            0% {
                opacity: 0;
                top: 165px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            2% {
                opacity: 1;
                top: 165px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            3.75% {
                opacity: 1;
                top: 165px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            11.25% {
                opacity: 1;
                top: 165px;
                left: 60px;
                transform: translate(-50%, -50%);
            }
            21.25% {
                opacity: 1;
                top: 165px;
                left: 60px;
                transform: translate(-50%, -50%);
            }
            21.5% {
                opacity: 1;
                top: 165px;
                left: 62px;
                transform: translate(-50%, -50%) scale(0.9);
            }
            21.75% {
                opacity: 1;
                top: 165px;
                left: 60px;
                transform: translate(-50%, -50%) scale(1);
            }
            25% {
                opacity: 1;
                top: 165px;
                left: 60px;
                transform: translate(-50%, -50%) scale(1);
            }
            32.5% {
                opacity: 1;
                top: 165px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            34.5% {
                opacity: 1;
                top: 165px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            36.25% {
                opacity: 0;
                top: 165px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            100% {
                opacity: 0;
                top: 165px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
        }

        @media(max-width: 500px) {
        @keyframes poll_animation_cursor_move {
            0% {
                opacity: 0;
                top: 189px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            2% {
                opacity: 1;
                top: 189px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            3.75% {
                opacity: 1;
                top: 189px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            11.25% {
                opacity: 1;
                top: 189px;
                left: 60px;
                transform: translate(-50%, -50%);
            }
            21.25% {
                opacity: 1;
                top: 189px;
                left: 60px;
                transform: translate(-50%, -50%);
            }
            21.5% {
                opacity: 1;
                top: 189px;
                left: 62px;
                transform: translate(-50%, -50%) scale(0.9);
            }
            21.75% {
                opacity: 1;
                top: 189px;
                left: 60px;
                transform: translate(-50%, -50%) scale(1);
            }
            25% {
                opacity: 1;
                top: 189px;
                left: 60px;
                transform: translate(-50%, -50%) scale(1);
            }
            32.5% {
                opacity: 1;
                top: 189px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            34.5% {
                opacity: 1;
                top: 189px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            36.25% {
                opacity: 0;
                top: 189px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
            100% {
                opacity: 0;
                top: 189px;
                left: -20px;
                transform: translate(-50%, -50%);
            }
        }
        }

        .poll_animation_option_1 {
            animation: poll_animation_option1_animation 8s infinite;
        }

        .poll_animation_option_2 {
            animation: poll_animation_option2_animation 8s infinite;
        }

        .poll_animation_option_3 {
            animation: poll_animation_option3_animation 8s infinite;
        }

        @keyframes poll_animation_option1_animation {
            0%, 8.624% {
                border-color: #e5e7eb;
                background: #ffffff;
            }
            8.625%, 21.24% {
                border-color: #3b82f6;
                background: #f8faff;
            }
            21.25%, 21.74% {
                border-color: #3b82f6;
                background: #f8faff;
            }
            21.75%, 32.49% {
                border-color: #3b82f6;
                background: #3b82f6;
            }
            40.5%, 42.49% {
                border-color: #e5e7eb;
                background: #ffffff;
            }
            42.5%, 100% {
                border-color: #e5e7eb;
                background: #ffffff;
            }
        }

        @keyframes poll_animation_option2_animation {
            0%, 100% {
                background: #ffffff;
            }
        }

        @keyframes poll_animation_option3_animation {
            0%, 100% {
                background: #ffffff;
            }
        }

        .poll_animation_candidate_name, .poll_animation_candidate_party {
            animation: poll_animation_text_color_animation 8s infinite;
        }

        .poll_animation_option_1 .poll_animation_candidate_name, .poll_animation_option_1 .poll_animation_candidate_party {
            animation: poll_animation_selected_text_animation 8s infinite;
        }

        @keyframes poll_animation_selected_text_animation {
            0%, 21.24% {
                color: #1f2937;
            }
            21.25%, 21.74% {
                color: #1f2937;
            }
            21.75%, 32.49% {
                color: white;
            }
            40.5%, 42.49% {
                color: #1f2937;
            }
            42.5%, 100% {
                color: #1f2937;
            }
        }

        .poll_animation_option_1 .poll_animation_candidate_party {
            animation: poll_animation_selected_subtext_animation 8s infinite;
        }

        @keyframes poll_animation_selected_subtext_animation {
            0%, 21.24% {
                color: #6b7280;
            }
            21.25%, 21.74% {
                color: #6b7280;
            }
            21.75%, 32.49% {
                color: rgba(255, 255, 255, 0.9);
            }
            40.5%, 42.49% {
                color: #6b7280;
            }
            42.5%, 100% {
                color: #6b7280;
            }
        }

        .poll_animation_vote_percentage {
            animation: poll_animation_percentage_animation 8s infinite;
        }

        @keyframes poll_animation_percentage_animation {
            0%, 39% {
                opacity: 0;
            }
            40%, 70% {
                opacity: 1;
            }
            71%, 100% {
                opacity: 0;
            }
        }

        .poll_animation_option_1 .poll_animation_vote_percentage {
            animation: poll_animation_selected_percentage_animation 8s infinite;
        }

        @keyframes poll_animation_selected_percentage_animation {
            0%, 39% {
                opacity: 0;
                color: #1f2937;
            }
            40%, 70% {
                opacity: 1;
                color: white;
            }
            71%, 100% {
                opacity: 0;
                color: #1f2937;
            }
        }

        .poll_animation_option_1 .poll_animation_radio_button {
            animation: poll_animation_selected_radio_animation 8s infinite;
        }

        @keyframes poll_animation_selected_radio_animation {
            0%, 21.24% {
                border-color: #d1d5db;
                background: transparent;
            }
            21.25%, 21.74% {
                border-color: #d1d5db;
                background: transparent;
            }
            21.75%, 32.49% {
                border-color: white;
                background: white;
            }
            32.5%, 37.49% {
                border-color: #d1d5db;
                background: transparent;
            }
            37.5%, 100% {
                border-color: #d1d5db;
                background: transparent;
            }
        }

        .poll_animation_option_1 .poll_animation_radio_button::after {
            animation: poll_animation_radio_inner_animation 8s infinite;
        }

        @keyframes poll_animation_radio_inner_animation {
            0%, 21.24% {
                transform: translate(-50%, -50%) scale(0);
            }
            21.25%, 21.74% {
                transform: translate(-50%, -50%) scale(0);
            }
            21.75%, 26.74% {
                transform: translate(-50%, -50%) scale(1);
            }
            26.75%, 33.5% {
                transform: translate(-50%, -50%) scale(1);
            }
            33.8%, 100% {
                transform: translate(-50%, -50%) scale(0);
            }
        }

/* electoral_projections */

/* admin_tools_showcase */

.admin-tools-showcase-video{
    width:50%;
    position: relative;
    min-width: 300px;
}

.video-title{
    width:50%; 
}

@media (max-width: 991px){
.admin-tools-showcase-video{
    width:80%;
}
.video-title{
    width:80%; 
}
}

@media (max-width: 575px){
.admin-tools-showcase-video{
    width:90%;
}
.video-title{
    width:90%; 
}
}

/* admin_tools_showcase */

/* demo-regiser */

@media (max-width: 991px) and (min-width:768px) {
.verified-access{
    height:250px
}
}

@media (max-width: 768px){
.instant-access-field{
margin-bottom: 20px;
}
}

.linkedin-link, .github-link{
    color:#3b82f6;
    text-decoration: none;
}

.linkedin-link:hover, .github-link:hover{
    text-decoration: underline;
}
/* demo-regiser */