/* your_app/static/your_app/css/styles.css */

/* General body styles */
html, body {
    font-family: "futura-pt", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333 ;
    box-sizing: border-box;
    max-width: 100%;
    height: 100%;
}

body{
    overflow-x: hidden;
}


header {
  /* display: flex; */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* width: 100%; */
  max-width: 80%;
  /* padding: 1rem; */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  margin: 0 auto;
  border-radius: 2px;
  box-sizing: border-box;
}

.navbar-main {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid #9b9b9b;

}






.surah-verse-selection-form{
  
    display: flex;


}
 
.surah-verse-selection-form div {


  display: flex;
  flex-direction: row;

  
     
}




.navbar-links {
  display: flex;
  align-items: center;
  flex-flow: row;
}




.verse-number-input-bigscreen{

max-width: 60px;

}
.email-first-letter {
  font-family: 'futura-pt', sans-serif;
  display: inline-block;
  width: 29px;
  height: 29px;
  background-color: #ce2524;
  color: white;
  text-align: center;
  line-height: 29px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: lighter;
  margin: 3px;
}
  
.authentication {
  display: flex;
  flex-flow: row;
  align-items: end;
}
.container{

    max-width: 80%;
    margin: 0 auto;
    min-height: 80vh;
}




  
.home-logo {
  font-family: "p22-constructivist-pro", sans-serif;
font-weight: 400;
font-style: normal;
  font-size: 3rem;
  text-decoration: none;
  color: black;
  transition: color 0.3s ease, color 0.3s ease;
  /* margin-left: 0; */
  /* margin-top: 10px; */
  top: 5px;
  position: relative;
  /* padding-top: 10px; */
  line-height: 55px;
}
.home-logo:hover{

    color: #ce2524;  /* Change the color on hover */
    
  }


  
  .contact {
    font-family: 'futura-pt', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-decoration: none;
    color: black;
    transition: color 0.3s ease, color 0.3s ease;
    margin-left: 1rem;
    top: 14px;
    position: relative;
}
  




  .contact:hover{

    color: #ce2524;  /* Change the color on hover */
  }

.verse{

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    direction: rtl;
 
}

.display-main {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto;
}


.surah-verse-display-main {

 
   
    margin-top: 5px;
    margin-bottom: 0px;
    
 
}

.surah-verse-dropdown {
  padding: 0px 15px;
  display: none;
  gap: 4px;
  background-color: #007bff;
  border-radius: 5px;
  color: white;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  /* margin-top: 3px; */
}

.dropdown-icon {
  font-family: "sedgwick", sans-serif;
  font-weight: 400;
  font-style: normal;
  transform: rotate(90deg);
  font-size: 23px;
  margin-left: 10px;
}

.word {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
   
}

.words-container-for-safari {
    color: #000000;
    display: flex;
    flex-wrap: wrap;
    font-size: 3.3rem;
    font-family: "Scheherazade New", serif;
    font-weight: 400;
    font-style: normal;
    column-gap: 19px;
}



.words-container {
    
    display: flex;
    flex-wrap: wrap;
    direction: rtl;
    unicode-bidi: embed;
    font-size: 3.3rem;
    font-family: "Scheherazade New", serif;
    font-weight: 400;
    font-style: normal;
    white-space: normal;
}




.words-container .word-char-container {
    margin-left: 19px; /* Default margin for all .word-char-container items */
}

/* Remove margin for the last item */
.words-container .word-char-container:last-child {
    margin-left: 0;
}



/* Remove margin for items with delete_gap attribute */
.words-container .word-char-container[delete-gap] {
    margin-left: 0;
}


.words-container .word-char-container[delete-gap-at-the-beginning] {
    margin-left: -14px;
}





.character-dot.hovered {
    visibility: visible; /* Dots become visible when hovered */
}







/* Styling and hover effects for the word-container */
.word-container {
    color: #000000;
    display: inline;
    font-weight: 400;
    font-style: normal;
    transition: background-color 0.3s ease;
    position: relative; /* Ensure the container can hold a pseudo-element */
}

/* Default hover effect for all word containers */
.word-container:hover {
    background-color: #99d6a4; /* Change background on hover for the entire container */
    cursor: pointer;
}

/* Special case for word containers with hover-effect-cut="true" */
.word-container[hover-effect-cut-for-safari="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 73%; /* Cover 80% of the width */
    height: 100%;
    background-color: transparent; /* Default background is transparent */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    z-index: -1; /* Ensure the pseudo-element stays behind the content */
}

/* Hover effect that only applies to 80% of the container with hover-effect-cut="true" */
.word-container[hover-effect-cut-for-safari="true"]:hover::before {
    background-color: rgba(153, 214, 164, 0.7); /* Change background on hover for 80% of the container */
    z-index: 0; /* Ensure it covers the content */
}

/* Remove the full-container hover effect for elements with hover-effect-cut="true" */
.word-container[hover-effect-cut-for-safari="true"]:hover {
    background-color: transparent; /* Prevent full container background color change */
    cursor: pointer; /* Keep the pointer cursor */
}







/* Base style for word-container */
.word-container[hover-effect-cut="true"] {
    position: relative;
    display: inline-block;
    width: 79%;
    pointer-events: none;
    direction: ltr;
    left: -12px;
}

/* Create an interactive (clickable + hoverable) area that covers 80% of the container from the right */
.word-container[hover-effect-cut="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0; /* Start from the right side */
    width: 80%; /* Cover 80% of the width, starting from the right */
    height: 100%;
    background-color: transparent; /* Default background is transparent */
    pointer-events: auto; /* Enable pointer events (click + hover) only on this area */
    z-index: 2; /* Ensure it stays on top of the container content */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Apply the hover effect only to the 80% width from the right */
.word-container[hover-effect-cut="true"]::before:hover {
    background-color: rgba(153, 214, 164, 0.7); /* Change background color on hover for 80% */
    cursor: pointer; /* Show pointer cursor when hovering */
}










.word-container[push-to-left-for-safari="true"]:hover {
    background-color: rgba(153, 214, 164, 0.7); /* Adjust the alpha value for transparency */
    cursor: pointer;
    z-index: 1000;   
}
.word-container[push-to-left-for-safari="true"] {
    position: relative;  /* Ensure the element can be moved */
    left: -37px;         /* Push the element to the left by 37px */
    z-index: 1000;       /* Set the z-index to 1000 */
}




.word-container[push-to-left="true" ] [delete-gap-at-the-beginning] {
    position: relative;  /* Ensure the element can be moved */
    z-index: 1000;       /* Set the z-index to 1000 */
   
    opacity: .75;
}





.character-word[push-to-left="true"]:hover {
    background-color: rgba(153, 214, 164, 0.7); /* Adjust the alpha value for transparency */
    cursor: pointer;
    z-index: 1000;   
}
.character-word[push-to-left="true"] {
    
    
    z-index: 1000;       /* Set the z-index to 1000 */
    
}



/* Styling and hover effects for the char-container */



.character:hover {
    background-color: #706d69; /* Change background on hover */
    cursor: pointer;
}


.char-container {
    direction: rtl;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0px;
    width: 100%;
    justify-items: stretch;
    align-items: center;
}




.character {
    font-size: 1rem;
    text-align: center;
    border: 0.3px solid #d6d6d6;
    background-color: #ecebeb;
    transition: background-color 0.3s ease;
    color: #eae8e8;
}



.character-word {
    transition: color 0.3s ease;  /* Smooth transition for color change */
    display: inline;  /* Simplify the display property */

}




.exegesis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    background-color: #f2fdf6;
}


.exegesis-grid h2{
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
}


.exegesis {
font-size: 1.3rem;
}



.pagination {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.interpretation {
    font-size: 2.1rem;
    font-family: sans-serif;
  
}








    .modal {
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-style: normal;
        display: none;
        position: fixed;
        z-index: 3000;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 1rem;
        border-radius: 0.25rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
   
    .modal-header{
        font-family: sans-serif;
            text-align: center;
           
            border-radius: 7;
            border-top-right-radius: 0.25rem;
            border-top-left-radius: 0.25rem;
            background-color: #5db3e1;
            margin-top: -38px;
            margin-right: -16px;
            margin-left: -16px;
            box-sizing: border-box;
        
    }

    .modal-header{
        font-size: larger;
    }
    .verse-modal-header {
        padding: 17px 15px;
    }

    .surah-modal-header {
        padding: 15px 20px;
    }

    .login-signup-modal-header {
      padding: 6px 21px;
      font-size: 15px;
      color: antiquewhite;
      /* border-radius: 1px; */
      background-color: darkgoldenrod;
  }
    .word-modal-header {
        
        padding: 17px 29px;
    }

    .hidden {
        
            display: none !important;  /* Ensure hidden class hides the modal */
        }
    
    
    .visible {
        display: block;
    }

    
/* char-modal, modal for characters */
#char-modal {
    position: fixed;
    bottom: 5px;
    max-width: 80%;
    background-color: white;
    z-index: 1000;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    display: flex; /* Use flexbox */
    flex-wrap: wrap; /* Allow items to wrap onto new lines */
    justify-content: space-between; /* Space between items */
    gap: 10px; /* Space between items */
    font-size: 0.7rem;

    left: 0; /* Stretch to the left */
    right: 0; /* Stretch to the right */
    margin: 0 auto; /* Center horizontally */
}


.char-info {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Prevent text wrapping */
}

.char-label {
    font-weight: bold;
    margin-right: 5px; /* Space between label and value */
}

/* Adjust the width of each info item to match the grid proportions */
.info-1 {
    flex: 0 0 10%; /* Take up 10% of the width */
}

.info-2 {
    flex: 0 0 15%; /* Take up 15% of the width */
}

.info-3 {
    flex: 0 0 10%; /* Take up 10% of the width */
}

.info-4 {
    flex: 0 0 15%; /* Take up 15% of the width */
}

.info-5 {
    flex: 0 0 20%; /* Take up 20% of the width */
}

.info-6 {
    flex: 0 0 30%; /* Take up 30% of the width */
}

.char-value {

    width: 30px;
}





.characters-of-words-container-for-safari {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto;
    direction: rtl;
    unicode-bidi: embed;
    font-size: 3.3rem;
    font-family: "Scheherazade New", serif;
    font-weight: 400;
    font-style: normal;
    white-space: nowrap;
}


/* Position the dots container within its parent using Grid */
.dots-container {
    grid-auto-flow: column;
    display: grid;
    place-items: center;
    position: relative;
    top: -86px;
    height: 0;
}

/* Style for individual dots */
.character-dot {
    display: grid; /* Use Grid for centering the dot itself */
    place-items: center; /* Center the dot both horizontally and vertically */
    visibility: hidden; /* Dots are hidden by default */
    opacity: 0; /* Start with fully transparent */
    color: rgb(101, 229, 101); /* Default green color */
    font-size: 3.5rem; /* Adjust size as needed */
    transition: opacity 0.3s ease, color 0.3s ease, visibility 0.3s; /* Smooth transition for fade-in, color change, and visibility */
    position: relative;
    z-index: 2000;
    width: 100%; /* Ensure the width fills the container */
    height: 100%; /* Ensure the height fills the container */
    pointer-events: none; /* Prevent dots from interfering with mouse events */
}

/* Make the dots visible when they have the hovered class */
.character-dot.hovered {
    visibility: visible;
    opacity: 1;
}





/* Position the dots container within its parent using Grid */
.harakah-up-container {
    grid-auto-flow: column;
    display: grid;
    place-items: center;
    position: relative;
    top: -86px;
    left: -8px;
    height: 0;
}

/* Style for individual dots */
.harakah-up {
    font-family: futura-pt, sans-serif;
    display: grid;
    place-items: center;
    /* visibility: hidden; */
    /* opacity: 0; */
    font-size: 3rem;
    transition: opacity 0.3s ease, color 0.3s ease, visibility 0.3s;
    position: relative;
    z-index: 2000;
    width: 100%;
    height: 100%;
    pointer-events: none;
    }



    /* Position the dots container within its parent using Grid */
.harakah-down-container {
    grid-auto-flow: column;
    display: grid;
    place-items: center;
    position: relative;
    top: -75px;
    left: -8px;
    height: 0;
}

/* Style for individual dots */
.harakah-down {
    font-family: futura-pt, sans-serif;
    display: grid;
    place-items: center;
    /* visibility: hidden; */
    /* opacity: 0; */
    font-size: 3rem;
    transition: opacity 0.3s ease, color 0.3s ease, visibility 0.3s;
    position: relative;
    z-index: 2000;
    width: 100%;
    height: 100%;
    pointer-events: none;
}







/* Position the dots container within its parent using Grid */
.harakah-up-extra-container {
    grid-auto-flow: column;
    display: grid;
    place-items: center;
    position: relative;
    top: -76px;
    left: -8px;
    height: 0;
}

/* Style for individual dots */
.harakah-up-extra {
    font-family: futura-pt, sans-serif;
    display: grid;
    place-items: center;
    /* visibility: hidden; */
    /* opacity: 0; */
    font-size: 3rem;
    transition: opacity 0.3s ease, color 0.3s ease, visibility 0.3s;
    position: relative;
    z-index: 2000;
    width: 100%;
    height: 100%;
    pointer-events: none;
}








.exegesis-content{
    font-size: 1.1rem;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    margin-top: 17px;
}

.highlight{
    background-color: yellow;
    font-weight: bold;
}


.search-result-surah-and-verse{
    font-weight: 500;
    color: rgb(170, 10, 10);
    margin-top: 10px;
}




#exegesis-text {
    min-height: 265px;  /* Ensure there's enough height */
    overflow-y: auto;  /* Make sure the element can scroll */
    /* border: 1px solid #e7e7e7;  /* Optional: Add a border to see the element */
    /* padding: 10px 10px 0px 10px; */
}



/* General footnote styling */
.mobile-footer {
    margin-top: 21px;
    /* position: fixed; */
    bottom: 0;
    max-width: 100%;
    background-color: #f8f9fa;
    padding: 3px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    display: none;
}
  
  /* Contact mail link styling */
  .mobile-footer.contact-mail {
    color: #007bff;
    text-decoration: none;
  }
  
  .mobile-footer .contact-mail:hover {
    text-decoration: underline;
  }
  
 

  .pagination-verse-main {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    /* margin: 20px 0; */
    max-width: 230px;
}
  
.pagination-btn {
    display: inline-block;
    background-color: #5db3e1;
    color: white;
    text-decoration: none;
    padding: 7px 13px;
    font-size: 16px;
    border-radius: 3px;
    text-align: center;
    transition: background-color 0.3s;
    min-width: 85.9844px;
}

  .pagination-btn:hover {
    background-color: #ce2524;
  }
  
  .pagination-btn.disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    pointer-events: none; /* Prevents clicks on the disabled link */
  }
  



  .messages {
    
    list-style: none; /* Remove list item bullets */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Center the warning message */
  }
  
  .warning {
    font-size: 1.5rem;
    background-color: #ea3c3c82;
    color: #000000;
    padding: 10px;
    width: 78.2%;
    border-radius: 7px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 9px;
  
    /* Fade-in animation */
    animation: fadeIn 1.5s ease-in forwards;
  }

  .close-warning {
    position: relative;
    /* top: 5px; */
    display: flex;
    align-self: flex-start;
    top: 11px;
    right: 17px;
}

.close-warning {
    cursor: pointer;
    /* background-color: #f44336; */
    color: #383838;
    /* padding: 10px; */
    /* border-radius: 5px; */
    animation: fadeIn 1.5s ease-in forwards;
    position: relative;
    /* top: 5px; */
    display: flex;
    align-self: flex-start;
    top: 11px;
    right: 17px;
}



  
  /* Keyframes for fade-in */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  




  
  .not-safari-harakah-up-container {
    background-color: coral;
    grid-auto-flow: column;
    display: grid;
    /* place-items: baseline; */
    position: relative;
    top: 24px;
    left: -7px;
    height: 0;
    justify-content: end;
    pointer-events: none;
}

.not-safari-harakah-up {
    font-family: futura-pt, sans-serif;
    display: grid;
    place-items: center;
    /* visibility: hidden; */
    /* opacity: 0; */
    font-size: 3rem;
    /* transition: opacity 0.3s ease, color 0.3s ease, visibility 0.3s; */
    /* position: relative; */
    z-index: 2000;
    /* width: 100%; */
    /* height: 100%; */
    /* pointer-events: none; */
    /* justify-items: end; */
    pointer-events: none;
}



.not-safari-harakah-up-extra-container {
    background-color: coral;
    grid-auto-flow: column;
    display: grid;
    /* place-items: baseline; */
    position: relative;
    top: 32px;
    left: -6px;
    height: 0;
    justify-content: end;
    pointer-events: none;
}

.not-safari-harakah-up-extra {
    font-family: futura-pt, sans-serif;
    display: grid;
    place-items: center;
    /* visibility: hidden; */
    /* opacity: 0; */
    font-size: 3rem;
    /* transition: opacity 0.3s ease, color 0.3s ease, visibility 0.3s; */
    /* position: relative; */
    z-index: 2000;
    /* width: 100%; */
    /* height: 100%; */
    /* pointer-events: none; */
    /* justify-items: end; */
    pointer-events: none;
}




.not-safari-harakah-down-container {
    background-color: coral;
    grid-auto-flow: column;
    display: grid;
    place-items: baseline;
    position: relative;
    top: 29px;
    left: -6px;
    height: 0;
    justify-content: end;
    pointer-events: none;
  }

.not-safari-harakah-down {
    font-family: futura-pt, sans-serif;
    display: grid;
    place-items: center;
    /* visibility: hidden; */
    /* opacity: 0; */
    font-size: 3rem;
    /* transition: opacity 0.3s ease, color 0.3s ease, visibility 0.3s; */
    /* position: relative; */
    z-index: 2000;
    /* width: 100%; */
    /* height: 100%; */
    /* pointer-events: none; */
    /* justify-items: end; */
    pointer-events: none;
}









.not-loggedin-user-icon {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}


.not-loggedin-user-icon:hover {
  background-color: #e8e8e8;
  border: solid 1px #cdcdcd;
}














.current-verse {
    cursor: pointer;
    color: #333; /* Default text color */
    background-color: transparent; /* Default background color */
    padding: 5px;
    border-radius: 4px;
    transition:  color 0.3s ease; /* Smooth transition */
}

.current-verse:hover {
    
    color: #ce2524; /* Change text color on hover */
}


.current-surah {
    cursor: pointer;
    color: #333; /* Default text color */
    background-color: transparent; /* Default background color */
    padding: 5px;
    border-radius: 4px;
    transition:  color 0.3s ease; /* Smooth transition */
}

.current-surah:hover {
   
    color: #ce2524; /* Change text color on hover */
}






.swiper-container {
    width: 100%;
    height: 100%; /* Make sure it fully fills its parent */
    overflow: hidden; /* Ensure no extra part of slides is visible */
    margin-top: 30px;
  }


  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #000000;
    background-color: #f5f5f5;
    font-family: "Open Sans", sans-serif;
    /* font-family: opensans; */
    font-size: 1rem;
  }

 

  .swiper-pagination {
    position: relative  !important;
    margin-bottom: 10px; /* Add margin to give space between slides and pagination */
    text-align: center; /* Optional: Center the pagination below the slides */
    z-index: auto; /* Reset z-index so it behaves normally in the flow */
    
  }


  .section-page-button {
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    /* width: 339px; */
    /* margin-bottom: 10px; */
    /* justify-content: space-between; */
    /* margin: 0 auto; */
}
  .exegesis-page-buttons{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 3px;
    margin-right: 7px;
  
  }
  .exegesis-section-buttons{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
   
  
  }
 

  .exegesis-page-section-control{
    margin-left: 1px;
    width: 97px;
    height: 26px;
    background-color: #5db3e1;
    color: white;
    font-size: 11px;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.3s;
    text-align: center;
    border: none;
}


#current-page{
  font-weight: 600;
  text-align: center;
  margin: 3px;
}
#current-section{
  font-weight: 600;
  text-align: center;
  margin: 3px;
}

.exegesis-page-section-control:hover {
    background-color: #ce2524;
  }
  
  .exegesis-page-section-control:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    pointer-events: none;
  }


.search-select-forms{
  display: flex;
  /* align-content: flex-end; */
  flex-flow: row;
flex-wrap: wrap;



}

#id_surah {
  /* width: 100%; */
  /* padding: 0px 2px; */
  border: none;
  border-radius: 3px;
  background-color: #5db3e1;
  color: rgb(0, 0, 0);
  position: relative;
  /* bottom: 1px; */
  height: 21px;
  margin-right: 4px;
}

#id_password{
  background-color: #f5f5f5;
  color: rgb(0, 0, 0);
  /* border: none; */
  border: 1px solid #7e7e7e;
  padding: 2px;
  border-radius: 2px;
  margin-left: 25px;
}

#id_password:focus{
  border: 1px solid #373737;
}
#id_password1{
  background-color: #f5f5f5;
  color: rgb(0, 0, 0);
  /* border: none; */
  border: 1px solid #7e7e7e;
  padding: 2px;
  border-radius: 2px;
  margin-left: 25px;
}

#id_password1:focus{
  border: 1px solid #373737;
}




#id_username{
  background-color: #f5f5f5;
  color: rgb(0, 0, 0);
  /* border: none; */
  border: 1px solid #7e7e7e;
  padding: 2px;
  border-radius: 2px;
  margin-bottom: 17px;
}

#id_username:focus{
  border: 1px solid #373737;
}
#id_email{
  background-color: #f5f5f5;
  color: rgb(0, 0, 0);
  /* border: none; */
  border: 1px solid #7e7e7e;
  padding: 2px;
  border-radius: 2px;
}

#id_email:focus{
  border: 1px solid #373737;
}


#id_new_password1{
  margin-left: 81px;
}


.search-btn-bigscreen {
  margin-left: 1px;
  /* width: 108px; */
  background-color: #5db3e1;
  color: rgb(0, 0, 0);
  font-size: 11px;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.3s;
  text-align: center;
  border: none;
  padding: 4px 9px;
  position: relative;
  bottom: 1px;
  margin-right: 39px;
}





.search-btn-bigscreen:hover {
  background-color: #ce2524;
}
.logout-button {
  margin-right: 11px;
  /* width: 108px; */
  background-color: #000000 ;
  color: white;
  font-size: 11px;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.3s;
  text-align: center;
  border: none;
  padding: 3px 9px;
  position: relative;
  bottom: 1px;
}



#logout-button:hover {
  background-color: darkgoldenrod
}





.login-button {
  display: inline-block;
  padding: 2px 8px;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  background-color: #ce2524;
  color: white;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  bottom: 2px;
}

.login-button:hover {
  background-color: darkgoldenrod; /* Darker color on hover */
}

.signup-button {
  display: inline-block;
  padding: 2px 8px;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  background-color: #000000;
  color: white;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  bottom: 2px;
}




.signup-button:hover {
  background-color: darkgoldenrod /* Secondary button color */
}






/* Base styles for footnote-reference and footnote */
.footnote-reference,
.footnote {
    font-weight: normal; /* Default weight */
    color: #333; /* Default text color */
    text-decoration: none; /* Remove underline for footnote links */
    cursor: pointer; /* Make them look clickable */
}

/* Hover effect for both footnote-reference and footnote */
.footnote-reference:hover,
.footnote:hover {
    font-weight: bold; /* Make text bold on hover */
    color: #000; /* Change text color to black for better visibility */
    text-decoration: underline; /* Optional: underline on hover to highlight */
}









  
.surah-verse-submit-btn-bigscreen {
  margin-left: 1px;
  /* width: 108px; */
  background-color: #5db3e1;
  color: rgb(0, 0, 0);
  font-size: 11px;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.3s;
  text-align: center;
  border: none;
  padding: 0px 9px;
  position: relative;
  /* bottom: 0.3px; */
  margin-left: 4px;
  margin-right: 41px;
  height: 21px;
}



.surah-verse-submit-btn-bigscreen:hover {
  background-color: #ce2524;
}

  

  


.search-input-bigscreen {
  background-color: #f5f5f5;
  color: rgb(0, 0, 0);
  /* border: none; */
  border: 1px solid #7e7e7e;
  padding: 2px;
  border-radius: 2px;
  margin-left: 4px;
}

.search-input-bigscreen:focus{
  border: 1px solid #373737;
}
.verse-number-input-bigscreen{
  background-color: #f5f5f5;
  color: rgb(0, 0, 0);
  /* border: none; */
  border: 1px solid #7e7e7e;
  padding: 0;
  border-radius: 2px;
  height: 19px;
  
}

.verse-number-input-bigscreen:focus{
  border: 1px solid #373737;
}

label {
   font-weight: 500; 
  color: #222222;
  /* position: relative; */
  /* top: 2px; */
  margin-right: 5px;
  /* margin-left: 5px; */
}
  







.user-mail{
  align-self: center;
}

.navbar-right {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: end;
  /* align-content: baseline; */
  flex-wrap: wrap;
  position: relative;
  bottom: 5px;
}

.mobile-center{
  display: none;
}

.surah-verse-selection-form-mobile{

  display: flex;
    flex-wrap: wrap;
    max-width: 181px;
}


#not-loggedin-part{

  display: flex;
    flex-flow: column;
    text-align: center;
}




.search-icon {
  display: none;

}
  
.search-icon-img{
  width: 33px;
}











/* Search input when active */
.search-active .search-input {
  max-width: 200px;
  opacity: 1;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: flex;
  position: relative;
}

/* Search container styles */
.search-container {
  position: relative;
  display: none;
  margin-left: 5px;
}

.search-container-600px-660px{
  display: none;
}





.search-form {
  margin-right: 3px;
  display: flex;

}

/* Hide search button on mobile if desired */
@media (max-width: 600px) {
  .search-btn {
    display: none;
  }
}

@media (max-width: 600px) {
  .search-icon {
      display: inline-block;
      position: relative;
      /* font-size: 33px; */
      /* font-family: "p22-constructivist-pro", sans-serif; */
      /* font-weight: 400; */
      /* font-style: normal; */
      bottom: 6px;
      right: 3px;
      margin-left: 5px;
      padding: 3px;
  }
}

@media (max-width: 600px) {
  .search-input {
    max-width: 0;
    opacity: 0;
    padding: 0;
    margin-left: 0;
    border: none;
    transition: max-width 0.5s ease-in-out, opacity 1s ease-in-out, margin-left 0.5s ease-in-out;
    overflow: hidden;
    max-height: 25px;
    position: relative;
  }
}































/*  MEDIA QUERIES   */




  /* warning message framework message in samll secreens */
  @media only screen and (max-width: 600px) {
    .warning {
      font-size: 1.2rem;
      padding: 5px;
      width: 78.2%;
      border-radius: 4px;
    }
  }
  @media only screen and (max-width: 600px) {
    .exegesis-page-buttons {
      margin-right: 0;
    }
  }




  @media only screen and (max-width: 600px) {
    .section-page-button {
      justify-content: center;
  }


  @media only screen and (max-width: 600px) {
    .surah-verse-selection-form {
      display: none;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .search-container {
        
        display: flex;
        top: 6px;    }
}


  @media only screen and (max-width: 600px) {
    .authentication {
        
        flex-flow:row;
}
  }

  @media only screen and (max-width: 660px) {
    .search-container-bigscreen {
        
        display: none;
    }
}
  
  @media only screen and (max-width: 600px) {
    .display-main {
      max-width: 95%;
      margin-top: 5px;
    }
  }



  
  @media only screen and (max-width: 600px) {
    .surah-verse-dropdown {
        display: flex;

    }
  }

  









  



   /* Show the footer only on small screens */
   @media only screen and (max-width: 768px) {
    .mobile-footer {
      display: block;
    }
  }
  




/* Show  contact on footer on the bottom not on top in small screens */
@media only screen and (max-width: 600px) {
  .contact {
      /* display: flex; */
      position: relative;
      top: 5px;
      right: 4px;
  }
}
  
  @media only screen and (max-width: 600px) {
    .home-logo {
        font-size: 33px;
        margin-left: 12px;
        font-weight: 100;
        top: 0;
        line-height: normal;
    }
}
 
@media only screen and (max-width: 600px) {
  .email-first-letter {
      font-family: sans-serif;
      display: inline-block;
      width: 26px;
      height: 26px;
      background-color: #ce2524;
      color: white;
      text-align: center;
      line-height: 27px;
      border-radius: 50%;
      font-size: 18px;
      /* font-weight: 500; */
      /* margin: 3px; */
      font-weight: 300;
  }
}

  @media only screen and (max-width: 600px) {
    .navbar-main {
      padding-bottom: 0;
    }
}
  
  @media only screen and (max-width: 600px) {
    .navbar-right {
      flex-flow: row;
    }
}
  

  
  @media only screen and (max-width: 600px) {
    .mobile-center {
      display: none;
    }
}
  

    

  @media only screen and (max-width: 600px) {
    header {
      max-width: 100%;
    }
  }

 
  @media only screen and (max-width: 600px) {
    
    .login-signup-buttons{
        display: none;
        
    }

  }







  @media only screen and (max-width: 600px) {
    .not-loggedin-user-icon {
        display: block;
        position: relative;
        right: 15px;
        bottom: -1px;
    }
}





@media only screen and (max-width: 600px) {
  .login-signup-logo {
      width: 37px;
      height: auto;
      position: relative;
      top: -5px;
      left: -3px;
  }
}
  

  
/* we add a samll margin top to distance inpterpreation from verse itself.   */

  @media only screen and (max-width: 600px) {
    .interpretation {
      margin-top: 49px;
    }
  }


  /* PAGINAYION BUTTONS WILL TAKE 50% WIDTH OF ITS CONTAINER   */

  @media only screen and (max-width: 600px) {
    .pagination-btn {
        width: 50%;
    }
  }
  
/* PAGINAYION BUTTONS WILL TAKE 50% WIDTH OF ITS CONTAINER  , the cintainer does not have to have limit  */
  @media only screen and (max-width: 600px) {
    .pagination-verse-main {
      max-width: none; /* Cancels the max-width on small screens */
      gap: 2px;
    }
  }






  /* ///////////////////////////////// Media queries for tablets ////////////////////////////////////////////////////////////////////*/



  @media (min-width: 600px) and (max-width: 1024px) {
    header {
      max-width: 97%;
  }
  
  
  }
  @media (min-width: 600px) and (max-width: 1024px) {
    .container {
      max-width: 95%;
  }
  
  
  }

 
  
  @media (min-width: 600px) and (max-width: 1024px) {
    .search-input-bigscreen {
    margin-left: 0px;
  }
  
  
  }
  @media (min-width: 600px) and (max-width: 1024px) {
    .search-btn-bigscreen {
      margin-right: 3px;
  }
  
  
  }
  @media (min-width: 600px) and (max-width: 1024px) {
    .surah-verse-submit-btn-bigscreen{
      margin-right: 3px;
  }
  
  
  }
  @media (min-width: 600px) and (max-width: 660px) {
    .search-container-600px-660px{
      display: inline-block;
  }
  
  
  }
  
  
  
  
  @media (min-width: 600px) and (max-width: 768px) {
    .contact{
      display: none;
  }
  
  
  }
  @media (min-width: 600px) and (max-width: 660px) {
    .search-select-forms{
      flex-flow: column;
  }
  
  
  }
  @media (min-width: 600px) and (max-width: 660px) {
    #logout-button{
      margin-left: 63px;
  }
  
  
  }
  @media (min-width: 600px) and (max-width: 660px) {
    .search-input-bigscreen{
      width: 205px;
  
  
  }
}