@import url("../../ressources/fonts/fonts.css");

#settingsTitle{
  padding: 30px;
  font-size: 72px;
  text-align: center;
}

.grid-container {
    display: grid;
    grid-template-columns:  auto auto;
    padding: 10px;
}

.grid-itemL {
  text-align: left;
  margin-right: 30px;
}

.grid-itemR {
    width: fit-content;
    margin-left: auto;
    text-align: right;
    align-items: right;
    padding-bottom: 15px;
    font-size: 16px;
}

.grid-R-spacer{
  padding-bottom: 10px;
}

.grid-itemR-S {
  width: 50%;
}

.grid-sub{
    margin-left: 25px;
}

.colorLabel{
  text-align: right;
  padding-left: auto;
}

#v-pills-tab{
  border-style:  none solid none none ;
  border-width: 2px;
  padding-right: 20px;
  font-size: 26px;
  font-weight: bold;
}

 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 30px;
}


/*Pill color*/
.nav-pills .nav-link.active {
  background-color: #212121 
}

/*Font Color*/
.nav-link{
  color: black;
}



/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) 
.active, .collapsible:hover {
}*/

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  position: absolute;
} 

#v-pills-tabContent{
  width: 65%;
}

#return{
  font-size: max(1.8vh, 15px);
  margin: 0px 10px 10px auto;
}

.container{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: auto;
}

.image{
  height: 50px;
}

/*Pill color*/
.light-pills .light-link.active {
  background-color: #212121 
}

/*Font Color*/
.light-link{
  color: black;
}

/*Pill color*/
.dark-pills .dark-link.active {
  background-color: #adb5bd;
  color: #212121 
}

/*Font Color*/
.dark-link{
  color: white;
}

/*Hover color
.nav-link:hover {
  color: pink;
}*/

.btn-light, .btn-light:hover{
  color: #212121;
}

#citation{
  text-align: center;
  margin:auto 10% auto 10%
}

footer{
  flex-direction: row;
  display: flex;
  align-items: center;
}

.shortInput{
  width: 100px;
  margin-left: auto;
}

.hiddenFile {
  display: none;
}

#qibla{
  margin: auto 0 5px 50%;
  transform: translateX(-50%);
}

.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #212121;
  border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #161616;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: #161616 !important;
  color: #ffffff;
}
