.notInMonth {
    background-color: rgb(221, 142, 168) !important;
    color: white !important;
    opacity: 0.3;
}

.calHeaderRow{
  border-radius: 25px 25px 0px 0px !important;
    background-color: rgba(154, 187, 236, 0.726);
    height: 50px;
}

.calHeaderRow th{
    text-align: center;
}
.calTab td {
    width: 100px !important;
    height: 100px;
    /* background-color: rgba(6, 164, 255, 0.452) !important; */
    /* border: solid 1px rgba(153, 153, 153, 0.692); */
    padding: 0 !important;
}

.cellGrid {
  display: grid;
  height: 78px;

  grid-template-rows: 33% 33%  33%;
}
.dateNumber {
    padding-left: 7px;
    padding-top: 7px;
}

.calTab td:hover {
    box-shadow: 3px 3px 3px rgb(139, 137, 137) !important;
}

.calHeader {
    display: grid;
    /* grid-template-columns: auto auto auto; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.selected {
    background-color: rgba(117, 135, 235, 0.534) !important;
}

.bookingSpan {
    text-align: center;
    height: 26px;
    width: 100%;
    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.244);
}



.deleteX { 
    transition: all .2s ease-in-out; 
    }
    
.deleteX:hover { 
    font-size: 25px;
    color: orange;
    }

.dateSelectorFrame{
    border: 1px solid #80808057;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    margin: 5px;
}

.bookingDescArea {
  border: solid 1px rgba(71, 75, 95, 0.692);

}

div[class^='bookingId'], div[class*=' bookingId']:hover{
  color: #F00;
  transform:scale(1,1.2);
}

.cal-dateselector {
  display: flex;
  flex-direction: row;
  align-items: center;
}
/* 
 Home Screen
*/

.homeIcon {
    width: 100%;
    color: rgb(98, 96, 221);
    font-size: 100px;
    text-align: center;
}

.card {
    /* height: 350px !important; */
    /* width: 200 !important;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.24);
    margin: 20px; */
}


/*  Posts */

.createPostSpace {
    display: flex;
    flex-direction: row;
}

.postsBox {
    border: solid 1px rgba(0, 0, 0, 0.24);
    border-radius: 10px;
    width: 20vw;
    top: 20vh;
    right: 2vw;
    height: 70vh;
    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.244);

}

.postHeader {
    border-bottom: solid 1px rgba(0, 0, 0, 0.137);
    height: 25px;
    background-color: rgb(88, 77, 240);
    border-radius: 10px;
}

.postBody {
    padding-left: 10px;
    padding-right: 10px;
}
.postReverse {
    background-color: orange;
    height: 50vh;
    display:flex; 
    flex-direction:column-reverse;
    overflow:auto; 
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
} 

.messageTextbox {
    width: 19.8vw;
    border-top: solid 1px rgba(0, 0, 0, 0.247);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: rgba(255, 255, 255, 0.644);
    padding: 10px;
    padding-right: 100px;
    outline: none;
    }
.sendButton {
    margin-left: -105px;
    width:100px;
    height: 40px;
    margin-top: 145px;
    padding-right: 5px;
}

.postBlock {
    margin: 10px;
    padding: 5px;
    border-radius: 25px;
    padding-top: 0;
}
.obfuscator {
    width: 400px;
    height: 50px;
    background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.014));
    position: sticky;
    top: 0;
}


.postReverse::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .messageTextbox::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .messageTextbox {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }


  /* TODO */
  .todoComponent {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap:5%;
  }

  .todoCreator {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    border: solid 1px rgba(0, 0, 0, 0.233);
    width: 350px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.247);
  }

  .todoList {
    background-color: rgba(199, 199, 199, 0.267);
    display: flex;
    flex-direction: column;
    width: 40vw;
    /* border: solid 1px rgba(128, 128, 128, 0.247); */
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.247);
    margin-top: 0px;
  }


  .todoItem {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    background-color: white;
    width: 100%;
    border-radius: 10px;
    justify-content: space-around;
    align-items: center;
    padding: 5px;
    border: solid 1px rgba(0, 0, 0, 0.233);
    margin-bottom: 3px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.247);
    transition: all .2s ease-in-out; 
  }

  .todoItem:hover {
    background-color: rgba(153, 169, 241, 0.534);
  }

  .hiddenTodo {
    display: none;
  }

  .shownTodo {
    display: grid;
  }

  .todoDesc{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-template-columns: 80% 20%;
    grid-template-rows: 100%;
  }

  .todoHeader {
    text-align: center;
    display: flex;
    justify-content: center;
  }

.descHover {
    transition: all .2s ease-in-out; 

  }
  .descHover:hover{
    font-size: 20px;
    background-color: rgba(153, 169, 241, 0.534);
  }
  .todoListHeader{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 5px;
    background-color: rgba(129, 221, 228, 0.39);
    margin-bottom: 2px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.233);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.247);
  }
  .todoListHeader h5{
    margin-bottom: 0;
  }

  .testList {
    background-color: rgba(129, 221, 228, 0.39);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.247);

    width: 120px;
    margin-bottom: 0px;
  }

  .doneListHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 5px;
    background-color: rgba(84, 230, 157, 0.39);
    margin-bottom: 2px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.233);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.247);
    transition: all .2s ease-in-out;
  }
  
  .doneListHeader h5{
    margin-bottom: 0;
  }

  .doneListHeader:hover{
    color: white;
  }

  .circularBtn{
    width: 19px;
    font-size: 12px !important;
    background-color: rgba(255, 0, 0, 0.589);
    border-radius: 100px;
    margin: 0;
    margin-left: 20px;
    border: solid 1px rgba(0, 0, 0, 0.233);
    color: white;

  }

  .todoTitleUpdateInput {
    width: 100%;
    border: solid 1px rgba(0, 0, 0, 0.233);
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 10px;
    padding-left: 3px; 
    padding-right: 3px;
  }

  .todoDescUpdateInput {
    width: 100%;
    border: solid 1px rgba(0, 0, 0, 0.233);
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 10px;
    padding-left: 5px; 
    padding-right: 5px;
    padding-top: 5px;
  }


  /* MobilFix */


  @media only screen and (max-width: 600px) {

    /* Home */
    .mobileCenter {
      display: grid !important;
      grid-template-columns: 95vw;
      justify-content: center;
      justify-items: center;
    }

    .postsMobile {
      width: 95vw;
    }

    .createPostSpace {

    }

    .messageTextbox {
      width: 100%;
    }

    /* Calfix */

    .calMain {
      width: 98vw;
    }

    .calMain tr {
      max-width: 90vw;
    }

    .calHeader tbody {
      display:none !important;
    }

    .calMain td {
      width: 14% !important;
      height: 10vh !important;
      margin: 0;
    }
    .calMain td p{

      margin: 0 !important;
    }

    .calMain th {
      width: 14%;
      padding: 0 !important;
      font-size: 13px;
      height: 10px;
    }
    .calHeaderRow{
      height: 20px;
    }

    #calBottom {
      display: grid !important;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto auto;
    }

    .bottomRowCal{
      grid-column-start: 1;
      grid-column-end: 4;
      display: grid;
      width: 100%;
      grid-template-columns: auto auto auto ;
      justify-content: space-between;
      align-items: center;
    }

    .bookingSpan {
      font-size: 10px;
    }

    .todoComponent{
      display: grid;
      grid-template-columns: 98vw;
    }
    
    .todoList {
      margin: 0;
      width: 98vw;
    }

    .todoCreator {
      margin: 0;
      width: 98vw;
      margin-bottom: 20px;
    }
  }

  .parentheader {
    width: 100%;
    height: 5px;<
    display: block;
    border: solid 1px rgba(0, 0, 0, 0.233);  
    opacity: 0.7;
  }

  .uploadForm .form-group{
    margin-bottom: 5px;
  }

  .gridPosition2 {
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .gridPosition3 {
    grid-row-start: 3;
    grid-row-end: 4;
  }


  #alterBookingDiv {
    display:none;
  }

  /* #inputFile::-webkit-file-upload-button {
    visibility: hidden;
  } */

  #inputFile::before {
    content: 'Velg fil';
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 17px;
    background-color: rgb(116, 116, 116);
    margin-right: 10px;
  }


  #inputFile:hover::before {
    background-color: rgb(73, 73, 73);
  }

   #inputFile::after {
    /* content: 'Ingen fil valgt';
    color: rgb(95, 95, 95);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 17px; */
  } 

  #inputFile{
    /* font-size: 0px; */
    
    height: 2.5rem;
  }

  #inputFile::file-selector-button{
    display: none;
  }



  /* For calendar */
  #new-calendar {
    width: 75vw;
    margin-left:12.5vw;
  }