@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
* { 
	margin:0;
	padding:0;
	box-sizing: border-box;
} 
#header {
    background-color: #033a8d;
    display: flex;
    justify-content: flex-end;
}
.navBtn {
    color: white;
    display: inline-flex;
    padding-right: 20px;
    font-family: "Akaya Telivigala";
    font-size: medium;
}
.home {
    background-color: #587cf5;
    display: flex;
    height: 100vh;
    width: 100%;
    color:white;
    justify-content: center;
    align-items: center;
    font-family: "Akaya Telivigala";
    font-size: xx-large;
}
.editFeild-inactive{
    display: none;
}
.editFeild-active{
    display: active;
}
.activity {
    background-color: #587cf5;
}
.allActAside {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 5px double black;
    width: 50%;
}
.activityContainer {
    display: grid;
    grid-template-columns: 15% 1fr 15% ;
}
.activityBody {
    border: solid black 2px;
    margin:5px 5px 5px 5px;
    grid-column: 2/3;
    background-color: #7ecce6;
    padding-top: 2px;
    padding-bottom: 2px;
    color:black
}
.activityHeader {
    display: grid;
    font-size: larger;
    grid-column: 1/3;
    grid-template-columns: 1fr 1fr 1fr;
    padding-right: 2px;
}
.activityDescription{
    border: 2px solid black;
    display: flex;
    grid-column: 1/4;
    flex-direction: column;
    margin-left: 2px;
}
.activityLink {
    color: black;
    text-decoration: none;
}
.individualContainer {
    background-color: #587cf5;
    display: flex;
    height: 100vh;
    width: 100%;
    position: fixed;
    justify-content: center;
    align-items: center;
}
.showbox{
    height: 50%;
    width: 50%;
    background-color: #7ecce6;
    border: 10px double black;
    padding:10px;
}
.iaText {
    padding-top: 10px;
}
.featuredList{
    padding-top: 40px;
}
.makeActAside {
    border: double black 6px;
    margin:5px 5px 5px 5px;
    grid-column: 2/3;
    background-color: #7ecce6;
    padding-top: 2px;
    padding-bottom: 2px;
    color:black;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.makeActInput {
    align-self: flex-end;
}
.RoutineHeader{
    display: grid;
    font-size: larger;
    grid-column: 1/3;
    grid-template-columns: 1fr 1fr 1fr 15%;
}
.RoutineDescription{
    border: 2px solid black;
    display: flex;
    grid-column: 1/4;
    flex-direction: column;
    margin-left: 2px;
}
.RoutineButtons{
    grid-column: 4/5;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    padding-right: 1px;
}
.innerText{
    justify-content: center;
    margin-left: 5px;
}
.innerbox{
    display: flex;
    flex-direction: column;
}
.innerboxText{
    margin-left: 5px;
}
.inputs{
    display: grid;
    grid-template-columns: max-content  max-content;
    grid-gap: 5px;
}
.inputs label{
    text-align: right;
}
#activitiesselect{
    width: 200px;
    text-overflow: ellipsis;
}
.activityButtons{
    grid-template-columns: 1fr 1fr 1fr 15%;
    display: grid;
    margin-left: 2px;
    padding-top: 1px;
}
.activityUpdates{
    display: flex;
    flex-direction: row;
    margin-left: auto;
}
.activityposts{
    display: flex;
    grid-column: 1/4;
    border: black 1px solid;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1px;
    padding-top: 1px;
    margin-top: 2px;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.activitytext{
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 1px;
}
.routineContainer{
    display: grid;
    grid-template-columns: 15% 1fr 15% ;
}
.routinebody{
    border: solid black 2px;
    margin:5px 5px 5px 5px;
    grid-column: 2/3;
    background-color: #7ecce6;
    padding-top: 2px;
    padding-bottom: 2px;
    color:black
}
.loggedinMessage{
    font-family: "Akaya Telivigala";
}
.pagination{
   display: flex;
  align-items: center;
  justify-content: center;
}
.paginationItem {
  background: #fff;
  border: 2px solid #666;
  padding: 10px 15px;
  border-radius: 50%;
  height: 45px;
  width: 45px;
  position: relative;
  margin: 0 5px;
  cursor: pointer;
}
.prev,
.next {
  background: #fff;
  border: none;
  padding: 10px;
  color: blue;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  margin: 0 10px;
  cursor: pointer;
}
.paginationItem.active {
  border: 1px solid #888;
  color: #888;
  pointer-events: none;
}
.backdrop{
    height: 100vh;
    background-color: #587cf5;
}