/* background-color: #2D79B3; */

body {
  background-color: ghostwhite;

}

#header i{
  font-size:2rem
}


.card-body .card-title {

  text-align: center;
}




.btn-outline-info {
  color: #0A3150;
  border-color: #0A3150;
}

.btn-outline-primary {
  background-color: #0A3150;
  color: white;
}

.btn:hover {
  background-color: #0A3150 ;
  color: white;
}

.d-flex {
  justify-content: center;
}

.card-title {
  color: #2D79B3;
}




/* #dashboard h2{
  font-size: 5rem;
}
 */


/*   
  li {
    float: left;
  }
  
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover, .dropdown:hover .dropbtn {
    background-color:bg-light;
  }
  
  li.dropdown {
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1;}
  
  .dropdown:hover .dropdown-content {
    display: block;
  } */



/* style for members */

/* .team-text {
  padding-top: 0.25rem;

} */




/* For online badge */
/* .team {
  position: relative;

} */

.topright {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 18px;
}

/* img {
  width: 100%;
  height: auto;
  } */


/* 

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
 */


/* #members .b {
      background: #599fd9;
      background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
      background: linear-gradient(to right, #599fd9, #c2e59c);
      min-height: 100vh;
      overflow-x: hidden;
    } */





/* for dashboard */
/* #dash .row {
  /* display: grid; */
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
/* margin: 37px auto 0; */
/* width: calc(280px * 4); */

/* } */

#dash .card {
  border-radius: 20px;
  box-shadow: 0 1px 3px 0 gray;
  /* #aaa */
  cursor: pointer;
  height: 7rem;
  /*position: relative;*/
  width: 24rem;
  /* width: 16rem; */
  background-color: ghostwhite;
  border: 0
}

#dash .card-body {
  border-radius: 25px;
}

#dash p {
  padding-top: 0;
  margin-top: 0;
}



#dash .card h2 {
  font-size: 20px;
  font-weight: bold;
  /* margin-top: 0; */
}

#dash .card p {
  text-align: center;
  padding: 0;
  margin: 0;


}

/* #dash .card.visited {
  box-shadow: 0 3px 10px 2px #444;
} */


#dash .material-icons {

  text-align: center;
}


.form-control {
  border: 0px;
}



/* #home p {
  margin: 0;
} */

/* #home .card-body .card-title {
  text-align: left;

} */

#home .card-body {
  padding-left: 0;
  padding-right: 0;
}




#home .card {
  background-color: white;
  border: 0;


}

/* 
#home .cardhead {
  display: inline-block;
  margin: 0 30px;


  display: flex;

  bottom: 0;
  left: 0;

  justify-content: space-evenly;
  align-items: left;
  width: 100%;
  padding: 10px;

}

#home .portion {
  align-items: center;

} */

#home .row p {
  font-size: .8rem;
  margin: 0;
  padding: 0;
}


#home .row h6 {
  margin: 0;
}

#home i {
  font-size: 1.5rem;
}

#home .calendar {
  padding-top: 9px
}

#home .date {
  padding-left: .3rem;
  padding-top: .8rem;
}

#home img {
  border-radius: 0;
  background-size: cover;
  width: 100%;
  height: 280px;
}

#home .btn{
  
  color:#D31E3D;
  border-color: #D31E3D;
  
}

#home .btn-outline-info:hover{
  background-color:  #D31E3D ;
  color:white;

}

#home .btn-outline:hover{
  background-color:white ;
  color:#D31E3D;
}

#organize-break img {
  border-radius: 1%;
  background-size: cover;
  width: 100%;
  height: 280px;
}

#organize-break img {
  border-radius: 1%;
  background-size: cover;
  width: 100%;
  height: 280px;
}

/* 
p {font-size:.9rem;} 
h6 {font-size: .9rem; }
@media (min-width: 544px) {  
  p {font-size:1rem;} 
}
@media (min-width: 544px) {  
  h6 {font-size:1rem; } 
}
 
@media (min-width: 768px) {  
  p {font-size:1rem;} 
}
 
@media (min-width: 992px) { 
  p {font-size:1rem;} 
}
 
@media (min-width: 1200px) {  
  p {font-size:1rem;}     
}
 
 
@media (min-width: 950px) and (max-width:1100px) { 
  p {font-size:1rem;color:red;} 
} */



/* navbar design */
#header * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#header a {
  text-decoration: none;

}

#header .navbar {
  /* padding: 10px 20px; */
  display: flex;
  width: 100%;
  z-index: 100;
  background-color: ghostwhite;
  /* overflow: hidden; */
  /* position: fixed; */
}

#header .navbar ul {
  flex: 1;

}

#header .desktop-list {
  text-align: end;
  padding: 10px 0;


}

#header .navbar .desktop-list li {
  display: inline-block;
  margin: 0 0px;
  padding: 10px 25px 10px 25px;
  color: #0A3150
}

#header .navbar .desktop-list li:hover {
  border-radius: 8px;
  background-color: #BABCB7;
  color: #2D79B3;
  cursor: pointer;
}



#header .navbar .desktop-list .pro:hover {

  background-color: ghostwhite;
  cursor: auto;


}

#header .navbar .mobile-list li {
  display: inline-block;
  margin: 0 10px;



}

#header .mobile-list {
  display: none;
}

/* for mobile and tab */
@media (max-width:992px) {
  /* #header header{
    padding-bottom:40px;
  } */

  #header .desktop-list {
    display: none;
  }

  #header .mobile-list {
    background-color: ghostwhite;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    /* overflow: hidden; */
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 10px;
  }

  #header .mobile-list i {
    cursor: pointer;
    align-items: center;
    /* font-size: 7vmin; */
  }

  #header .mobile-list li:hover i {
    color: #0A3150
  }

  #header .logo h2 {
    display: none;
  }

  /* #header .mobile-list i{
    font-size: 1rem;
  } */

  #break-details img{
    height:280px
  }

  #manage-break img{
    height:280px
  }

  #break-details table tr{
    height:3rem;
  }

}

/* for  desktop and big screens */
@media (min-width:992px) {
  /* #header header{
    padding-bottom:50px;
  } */

  #header .transparent img {
    display: none;
  }

  .navbar {
    overflow: hidden;

    position: fixed;
    top: 0;
    width: 100%;
  }

  #break-details img{
    height:450px
  }

  #manage-break img{
    height:450px
  }

  #header .ab p{
    display:none;
  }

  #break-details table tr{
    height:3rem;
  }

 


}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blinking {
   animation: blink 1s step-start infinite;
}



#break-details p{
  font-size:1rem;
}


#deta p{
  font-size:1rem;
  margin-bottom: 0;
}

#deta-prayer p{
  font-size:18px;
  margin-bottom: 0;
  font-weight:600;
  text-align: center;
  color:#0A3150;

}

#deta-prayer tr{
 /* border:1px solid black */
 border-top:thin solid lightgray;
  
}

.detailsT tr{
  height:3.5rem;
}





/* .navbar a.active {
  background-color: #04AA6D;
  color: white;
} */




/* for fixing the navbar */

/* .navbar {
    overflow: hidden;
    
    position: fixed; 
    top: 0;
    width: 100%; 
  } */

/* end of fixing the navbar */


.column {
  float: left;
}

.left,
.right {
  width: 25%;
}

.middle {
  width: 50%;
}



/* Tooltip container */
.material-icons {
  position: relative;
  display: inline-block;

}

/* Tooltip text */
.material-icons .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: rgb(13, 106, 143);
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: x-small;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.material-icons:hover .tooltiptext {
  visibility: visible;
}

.material-icons .tooltiptext {
  top: -5px;
  right: 105%;
}


.material-icons .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%;
  /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent rgb(51, 121, 201);
}

/* * {
  background-color: ghostwhite;
} */

/* for like comment info in members */

/* #members .column {
  float: left;
  width: 25%;
} */

/* Clear floats after the columns */
/* #members .row:after {
  content: "";
  display: table;
  clear: both;
} */



#members img {
  width: 12rem
}

@media (max-width: 768px) {
  #members img {
    width: 7rem;
  }
}

#members .card {
  border: 0;
}


#invite img {
  width: 12rem
}

@media (max-width: 768px) {
  #invite img {
    width: 7rem;
  }
}

#invite .card {
  border: 0;
}


/* for profile page*/

#profile .col-sm-3 img {
  float: left;
  width: 100%;
}

/*Clear floats after the columns */
/* #profile .row:after {
  content: "";
  display: table;
  clear: both;
} */

.form-control:disabled,
.form-control[readonly] {
  background-color: ghostwhite;
  /* opacity: 1; */
}

#profile .card {
  border: 0;
  background-color: ghostwhite;
}

/* #add-profile .card {
  border: 0;
  background-color: ghostwhite;
} */

#signup .card {
  border: 0;
  background-color: ghostwhite;
}

#edit-profile .card {
  border: 0;
  background-color: ghostwhite;
}

/* 
#profile .btn {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  color: ghostwhite;
  border-color: ghostwhite;

} */

#profile .btn:hover {
  background-color: #0A3150 ;
  color: white;

}

#profile .form-control:disabled {
  background-color: #2D79B3;
  color: white;
  font-weight: 700;


}



/* 
p {font-size:.9rem;} 
h6 {font-size: .9rem; }
@media (min-width: 544px) {  
  p {font-size:1rem;} 
}
@media (min-width: 544px) {  
  h6 {font-size:1rem; } 
}
 
@media (min-width: 768px) {  
  p {font-size:1rem;} 
}
 
@media (min-width: 992px) { 
  p {font-size:1rem;} 
}
 
@media (min-width: 1200px) {  
  p {font-size:1rem;}     
}
 
 
@media (min-width: 950px) and (max-width:1100px) { 
  p {font-size:1rem;color:red;} 
} 
 */




#messages .card {
  border: 0;
  background-color: ghostwhite;
}

#notifications .card {
  border: 0;
  background-color: ghostwhite;
}


/* #blog */

#blog .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
#blog .column {
  flex: 50%;
  padding: 0 4px;
}

#blog .column img {
  margin-top: 8px;
  vertical-align: middle;
}




#profile-visitors .card {
  border: 0;
}



#profile-visitors img {
  width: 12rem
}

#profile-visitors .card {
  width: 12rem;
}

@media (max-width: 768px) {
  #profile-visitors img {
    width: 7rem;
  }

  #profile-visitors .card {
    width: 7rem;
  }
}

#chat .card {
  border: 0;
  background-color: ghostwhite;
}

#member-details .card {
  border: 0;
  background-color: ghostwhite;

}


#break-details .form-control:disabled {
  background-color: #2D79B3;
  color: white;

}




#break-details .btn-outline-info{
  background-color:#D31E3D;
  color:white;
}

#break-details .btn-outline-info:hover{
  background-color: #0A3150 ;
  border-color:#0A3150;
  color:white;
}



#organize-break .card {
  border: 0;
  background-color: ghostwhite;
}



#manage-break .card {
  border: 0;
  background-color: ghostwhite;
}

#manage-break .card-title{
  color:#0A3150
}

#manage-break .form-control:disabled {
  background-color: ghostwhite;
  color:#0A3150;
  font-weight: bold;
  
}



#manage-break .card-new {
  border-radius: 10px;
  box-shadow: 0 1px 3px 0 black;
  /* #aaa */
  cursor: pointer;
  height: 3rem;
  /*position: relative;*/
  width: 12rem;
  /* width: 16rem; */
  background-color: ghostwhite;
  border: 0;
  text-align: center;
  padding-top: .8rem;



}


#manage-break .card-new h2 {
  font-size: 20px;
  font-weight: bold;
  /* margin-top: 0; */
}

#login .card {
  box-shadow: 0 1px 3px 0 #aaa;
  border: 0;

}

#login .form-control {
  border: solid thin #eee;

}

#login .btn {
  color: #D31E3D;
}

#login .btn:focus {
  box-shadow: 0 0 0 0;
  outline: 0;
}


#login .btn:hover {
  background-color: #D31E3D;
  color: rgb(255, 255, 255);
}



#join-requests .card {
  border: 0;
  background-color: ghostwhite;
}

#my-breaks .btn {
  color:white;
  border-color:white;
  background-color:#D31E3D 
}

#my-breaks .btn:hover {
  background-color: #0A3150 ;
  color: white;
  
}

#my-breaks .btn-outline-info {
  color: #D31E3D;
  border-color: #D31E3D;
  background-color:ghostwhite;
}

#my-breaks .btn-outline-info:hover {
  color: white;
  border-color: #D31E3D;
  background-color:#D31E3D;
}


 
  /* The grid: Four equal columns that floats next to each other */
  #organize-next .column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
#organize-next .col-md-3 img {
  opacity: 0.8;
  cursor: pointer;
  width:100%;
  height:15rem;
  padding:4px
}

#organize-next .column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
#organize-next .row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
#organize-next .card {
  position: relative;
  display: none;
  border-radius:0;
  
}

/* Expanding image text */
#organize-next #imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color:#0A3150;
  font-size: 10px;
}

/* Closable button inside the image */
#organize-next .closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #D31E3D;
  font-size: 35px;
  cursor: pointer;
}

/* ***************************** */


/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 80px;
  right: 28px;
  width: 140px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}



#organize-break .input-wrapper {
  position: relative;
}

input {
  border: 1px solid gray;
  border-radius: 6px;
  position: relative;
  width: 200px;
  margin: 10px;
  line-height: 6ex;
  background-color: ghostwhite
}

#organize-break label {
  position: absolute;
  top: -.8rem;
  z-index: 1;
  left: 2em;
  background-color: ghostwhite;
  padding: 0 5px;
}

#organize-break .form-control {
  background-color: ghostwhite;
  border: 1px solid gray;
  border-radius: 6px;
  /* text-align: center; */

}

#organize-break input::placeholder {
  font-size: .65rem;
}

#organize-break textarea::placeholder{
  font-size: .65rem;
  padding-top:.4rem
}

#home .totalTable th{
  padding:5px;
  /* width:50%; */
  border:thin solid lightgray;
  text-align:center;

}

#home .totalTable td{
  padding:2px;
  font-size:.8rem;
  /* width:50%; */
  border:thin solid lightgray;
  text-align:center;
}

#home .second td{
  border:thin solid lightgray;
  font-size:.8rem;
}



#home .aTag a,p{
  font-size:.65rem;
}

#home .aTag{
  text-align:center
}

.btStandard{
  background-color: green;
  cursor:pointer;
  border-radius: 5px;
  border:thin solid green;
  color:white;
  padding:5px 15px
}



/* FOR STATUS PAGE */


#gallery img{
  width: 100% !important;
  height: auto !important;
  margin-bottom:5px; /* to match column gap */
  /* filter: grayscale(100%); */
  transition: filter 2s;
}

#gallery video{
  width: 100% !important;
  height: auto !important;
  margin-bottom:5px; /* to match column gap */
  /* filter: grayscale(100%); */
  /* transition: filter 2s; */
}

/* #gallery img:hover {
  filter:none;
} */
/* 
@media (max-width: 1200px) {
  #gallery {
   -moz-column-count:    4;
   -webkit-column-count: 4;
   column-count:         4;
  }
}

@media (max-width: 1000px) {
  #gallery {
   -moz-column-count:    3;
   -webkit-column-count: 3;
   column-count:         3;
  }
}

@media (max-width: 800px) {
  #gallery {
   -moz-column-count:    2;
   -webkit-column-count: 2;
   column-count:         2;
  }
}

@media (max-width: 400px) {
  #gallery {
   -moz-column-count:    1;
   -webkit-column-count: 1;
   column-count:         1;
  }
} */

.table-wrapper {
  max-height: 300px;
  overflow-y: auto;
}

.horizontal-scroll-wrapper {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.horizontal-scroll-wrapper::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}




.horizontal-scroll-item {
  display: inline-block;
  text-align: center;
  /* border: 1px solid lightgray; */
  margin-right: 1rem;
  min-width: 85px;
}

.hori-text{
  margin-top: 8px;
  font-size: 12px;
  margin-bottom: 0;
}


.hori-image{
  width: 60px;
  height: 60px;
}

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



.se {
  background-image: url('../images/bg-thumb.jpg');
  background-size: 100%; /* Ensures the image covers the entire area while maintaining its aspect ratio */
  background-position: cover; /* Positions the image at the top */
  background-repeat: no-repeat; /* Prevents repeating the background image */
  background-attachment: fixed; /* Fixes the background image in place while scrolling */
  height: 180px; /* Example height */
  width: 100%; /* Example width */
  background-color:#EBF8CD;
  
}

.pointer{
  cursor:pointer
}