/* Calendar */
.cal-bg-img {
  background-position: center right;
  background-image: url('../svg/calendar.svg');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 20px 35px;
  cursor: pointer;
  box-sizing: border-box;
}
.calendar-floating-container {
  position: absolute;
  z-index: 1001;
}
.calendar_box {
    background-color: #fff;
/*    box-shadow: 3px 3px 7px #021f7d; */
    /*
    border-top-right-radius: 17px;
    border-top-left-radius: 17px;
    */
    width: 250px; height: 320px;
    margin-bottom: 20px;
    }
.mini-calendar-box {
    min-width: 250px;
/*    min-height: 294px; */
/*    box-shadow: 3px 3px 7px #989898; */
    /*
    border-top-right-radius: 17px;
    border-top-left-radius: 17px;
    */
    }
.mini-calendar-container {
    position: absolute;
    display: block;
}
.ci-co-box {
  height: 200px;
}

@media only screen and (max-width: 607px) {
  .mini-calendar-container {
    display: block;
  }
  .ci-co-label {
    padding-top: 10px;
    width: 100px;
  }
  .ci-co-div {
    margin: 5px 0;
 }
  .ci-co-box {
    height: 200px;
 }
}
.mini-calendar-container >  div {
    padding: 3px 8px 3px 0;

}
.float-background {
    width: 100%; 
    height: 100%; 
    z-index: 20; 
    position: fixed; 
    top: 0; 
    left: 0;
 }
.calendar_top_row_name >  a {
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
   }
.calendar_top_row_name >  a:visited {
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
   }
.calendar_top_row_name {
    /*
    border-top-left-radius: 17px;
    border-top-right-radius: 17px; 
    */
    background-color: #021f7d; 
    color: #ffffff;
    font: 25px bold; 
    padding: 10px 0 10px 0; 
    text-align: center;
    font-family: arial, san-serif; 
    letter-spacing: 2px;
    }
.mini-calendar-top-row-name {
    /*
    border-top-left-radius: 17px;
    border-top-right-radius: 17px; 
    */
    background-color: #005151; 
    color: #ffffff;
    font: 20px bold; 
    padding: 10px 0 10px 0; 
    text-align: center;
    font-family: arial, san-serif; 
    letter-spacing: 2px;
    }
.mini-calendar-top-row-name >  a {
        color: #fff;
        text-decoration: none;
        font: 25px bold;
   }
.mini-calendar-top-row-name >  a:visited {
        color: #fff;
        text-decoration: none;
        font: 25px bold;
   }	
.calendar_top_row {
      display: flex;
      flex-wrap: nowrap;
    }
.calendar_top_row > div {
    padding: 10px 0 10px 0;
    width: 100%;
    font: 12pt bold; text-align: center;
    font-family:  arial, san-serif;
    background-color: #dedede; color: #222;
    }
.calendar_row {
    display: flex;
    flex-wrap: nowrap;
    min-height: 45px;
    }
.calendar_row > span {
    width: 100%;
    font-size: 10pt; text-align: right; color: #222;
    border: 1px solid #dedede;
    background-color: #fff;
}
.calendar_row > i {
    width: 100%;
    font-size: 10pt; text-align: right; color: #222;
    border: 1px solid #dedede;
}
.calendar_row > b {
    width: 100%;
    font-size: 10pt; text-align: right; color: #222;
    border: 1px solid #c1c1c1;
    background-color: #dedede;
}
.mini-calendar-top-row {
      display: flex;
      flex-wrap: nowrap;
    }
.mini-calendar-top-row > div {
    padding: 10px 0 10px 0;
    width: 100%;
    font: 10pt bold; text-align: center;
    font-family:  arial, san-serif;
    background-color: #dedede; color: #222;
    }
.mini-calendar-row {
    display: flex;
    flex-wrap: nowrap;
    min-height: 40px;
    }
.mini-calendar-row > span {
    width: 100%;
    font-size: 10pt; text-align: right; color: #222;
    border: 1px solid #dedede;
    background-color: #fff;
    padding: 2px;
}
.mini-calendar-row > i {
    width: 100%;
    font-size: 10pt; text-align: right; color: #222;
    border: 1px solid #dedede;
    padding: 2px;
}
.mini-calendar-row > b {
    width: 100%;
    font-size: 10pt; text-align: right; color: #222;
    border: 1px solid #c1c1c1;
    background-color: #dedede;
    padding: 2px;
}
.mini-calendar-row i:hover {
    background-color: #dedede;
    }
.cal_day {
	background-color: #fff;
    }
.calendar_row i:hover {
    background-color: #dedede;
    }
.cal_day:hover {
    background-color: #dedede;
    }
.today {
	background-color:  #abcafd;
    }
.calendar-popup {

  }
.calendar-popup-body {	
        padding: 20px; 
        position: absolute; top: 50%; left: 50%;  margin-right: -50%;
        transform: translate(-50%, -50%);
        font-size: 24pt; color: #000; text-align: center; 
    }
  .popup-message a {
        text-decoration: none; color: #000; font-weight: bold;
        }
  .popup-message a:visited {
        text-decoration: none; color: #000; font-weight: bold;
        }