/*
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}
*/

/*html {
  font-size: 62.5%;
}*/

#jscalendar {
    position: absolute;
    overflow: hidden;
/*    font-family: Verdana,Arial,Helvetica,sans-serif;*/
/*    background-color: white;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 0;
    padding: 0;
    font-family: "Quicksand", sans-serif;
    /*font-size: 62.5%;*/
}

#rentcalendar-container, #rescalendar-container {
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: auto;
    padding: 0;
    font-family: "Quicksand", sans-serif;
    width: 70%
    
}
/*#rescalendar, #jscalendar, #rentcalendar {position: relative;}*/

.container {
  width: 100%;
  height: 100vh;
  background-color: #12121f;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*#rescalendar.jscalendar {height: 16.5rem;}*/
 
.jscalendar {    
    width: 17.4rem;
    height: 18.0rem;
    background-color: white;
    box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
}

.month, .resmonth, .rentmonth {
  width: 100%;
  height: 3.1rem;
  background-color: rgb(7,142,142);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.125rem;
  text-align: center;
  text-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.5);
}

.month i, .resmonth i, .rentmonth i {
  font-size: 1.5625em;
  cursor: pointer;
    margin-right: 8px;
    color: aliceblue;
}

.month h1, .resmonth h1, .rentmonth h1 {
  font-size: 1.0em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  margin-bottom: 0.125rem;
    color: aliceblue;
    padding: 0;
}

.month p, .resmonth p, .rentmonth p {
  font-size: 0.875em;
    margin: 0.07rem;
    color: aliceblue;
}

.weekdays, .resweekdays, .rentweekdays{
  width: 100%;
  height: 2.2rem;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
    color:black;
}

.weekdays div, .resweekdays div, .rentweekdays div {
  font-size: 0.85em;
  font-weight: 400;
  letter-spacing: 0.0625em;
  width: calc(16.875rem / 7);
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
}

.days, .resdays, .rentdays {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem;
    color:black;
}

.days div, .resdays div, .rentdays div {
    font-size: 0.85em;
    margin: 0.1875rem;
    width: calc(14.25rem / 7);
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 0.01875rem 0.03125rem rgba(0, 0, 0, 0.5);
    background-color: aquamarine;
    transition: background-color 0.2s;
}

.days div:hover:not, .resdays div:hover:not, .rentdays div:hover:not(.today, .satsun, .occupied) {
    background-color: rgb(1, 101, 101);
    border-radius: 10px;
    color: white;
    cursor: pointer
        
  /*background-color: #262626;*/
  /*border: 0.0275rem solid #777;*/
  /*cursor: pointer;*/
}

.prev-date,
.next-date {
  opacity: 0.6;
}

.today {
  /*background-color: #167e56;*/
    background-color: rgb(1, 101, 101)!important;
    border-radius: 10px;
    color: white;
}

.satsun {opacity: 0.6}
.occupied {background-color: red!important}

.date-selected {background-color: rgb(14, 255, 4)!important}