/* Layout */
.important-deadlines-wrapper {
  display: flex;
  gap: 20px;
  padding: 40px 0;
}

.deadlines-left {
  width: 60%;
}

.calendar-right {
  width: 40%;
  /*border: 2px solid #4c6fff;
  border-radius: 12px;
  padding: 20px;
  height: 50%;*/
  margin-top: -26px !important;
  /*  margin: auto 0;*/
}
.calendar-section{
  border: 2px solid #4c6fff;
    border-radius: 12px;
    padding: 20px;
}

/* Calendar */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: 400;
  color: #888;
  margin: 15px 0 5px;
  font-size: 16px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day {
  cursor: pointer;
    font-size: 21px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  /*padding: 10px;
    text-align: center;
    border-radius: 999px;
    cursor: pointer;
    */
}

.calendar-day:not(.other-month):hover {
  background: #eef2ff;
  color: #061a60;
}

.calendar-day.other-month {
  color: #ccc;
  cursor: default;
}

.calendar-day.highlight {
  background: #e6f0ff;
  color: #0040ff;
}

.calendar-day.active {
  background: #2d5bff;
  color: #fff;
}

/* Deadline Section */
.deadline-subtitle {
  color: #777;
  margin-bottom: 20px;
}

/* Deadline Cards (Row Style Version) */
.deadline-card {
  padding: 20px;
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
  display: flex;
    justify-content: space-between;
    align-items: center;
}
#calendar-title p {
  color: #1A63FC;
  font: normal normal bold 20px / 35px Roboto;
  display: inline-block;
}
/* Row Background Colors (Rotating) */
.row-green {
  background: #F0FDF4;
}
.row-orange {
  background: #FFF7ED;
}
.row-red {
  background: #FEF2F2;
}
.row-green .tile-left {
  background: #01A76F;
}
.row-orange .tile-left { 
  background: #FE6400;
}
.row-red .tile-left {
  background: #EC0C16;
}
/* Text Styling */
.deadline-content h4 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 500;
}

.deadline-content p {
  font-size: 16px;
    color: #4A5565;
}
.itr-date-icon{
  color: #64748b;
}
.deadline-date {
  font-size: 14px;
  color: #364153;
}

/* Remove Badge Completely */
.deadline-badge {
  display: none;
}
@media screen and (min-width: 900px) {
.days-remaining.red{
  background:#EC0C16;
}

.days-remaining.amber{
  background:#FE6400; 
}

.days-remaining.green{
  background:#01A76F;
}
.days-remaining {
  text-transform: none !important;
}
.days-remaining.deadline-card.tile-left {
  font-size: 12px !important;
  padding-top: 16px !important;
}
.deadline-card.row-green.bg-off-Black { 
  margin-top: -26px !important;
}
/*.deadline-card.row-orange.bg-off-Black{
  width: 652px !important;
  height: 148px !important;
}
.deadline-card.row-red.bg-off-Black{
  width: 652px !important;
  height: 156px !important;
}

.important-deadlines-wrapper .deadlines-left .view-all-wrapper {
  width: 652px !important;
  height: 60px !important;
}*/


/* View All */

}
.view-all-wrapper {
  margin-top: 20px;
  text-align: center;
}

.view-all-link {
  display: inline-block;
  padding: 10px 20px;
  background: #2d5bff;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  width: 100%;
  text-align: center;
  font-size: 16px;
}

.view-all-link:hover {
  background: #1f45d6;
}
.deadline-card {
    display: flex;
}
.deadline-card.tile-left {
    display: block;
}
.itr-date-icon img {
  width: 13px;
    margin-right: 3px;
    height: 13px;
    margin-bottom: 3px;
}
.view-all-wrapper a svg{
  display: none;
}
.view-all-wrapper .view-all-link:hover,
.view-all-wrapper .view-all-link:focus {
    border: 3px solid #29398d;
    color: white;
}
.calendar-header button:focus,
.calendar-header button:hover {
  border: 3px solid #2d5bff;
}
.calendar-day.current-month:focus,
.calendar-day.current-month:hover {
    border: 3px solid #2d5bff;
    padding: 7px;
} 
.contrast .calendar-day.current-month:focus,
.contrast .calendar-day.current-month:hover,
.contrast .calendar-header button:focus,
.contrast .calendar-header button:hover,
.contrast .calendar-right .calendar-section {
    border: 3px solid #FFFF42;
    
} 
.contrast .calendar-day.current-month:focus, .contrast .calendar-day.current-month:hover{
  color: white;
}
.contrast .view-all-link:focus,
.contrast .view-all-link:hover {
  border: 3px solid white;
}
body:not(.contrast) .view-all-wrapper a.view-all-link:hover {
    background: #2d5bff;
    color: white;
    text-decoration: none !important;
}
/*.deadline-card:nth-child(1),
.deadline-card:nth-child(2),
.deadline-card:nth-child(3) {
    display: flex;
}*/
.contrast .view-all-link{
  background: #FFFF42;
    color: #171717 !important;
}
.contrast .calendar-day{
  color: white;
}
.contrast .calendar-day.other-month{
  color: #484848;
}
.contrast #calendar-title p{
  color: #FFFF42;
}
#calendar-title{
  font: normal normal bold 26px/35px Roboto;
  color: #1A63FC;
  display:flex;
  width:80% !important;
}
.calendar-month{
  margin-left:auto !important;
}

.contrast .calendar-day:not(.other-month):hover {
    background: #6F6F6F;
}
.contrast .calendar-day.highlight {
    background: #6F6F6F;
    color: #FFFF42;
}
.contrast .calendar-day.active {
    background: #FFFF42;
    color: black;
}
.font-white{
  font: normal normal medium 24px/32px Roboto;
}
.font-ash{
  font: normal normal normal 16px/21px Roboto;
}
@media screen and (max-width: 767px) { 
    .important-deadlines-wrapper {
      flex-direction: column;
    }
    .deadlines-left{
      order: 2;
      width: auto;
    }
    .calendar-right {
      order: 1;
      width: auto;
    }
    .show-only-desktop{
      display: none;
    }
}
@media screen and (min-width: 768px) {  
  .show-only-mobile {
    display: none;
  }
}
@media screen and (max-width: 1024px) { 
  .calendar-day{
    padding: 4px;
    font-size: 14px;
  }
}
@media screen and (min-width: 850px)  and (max-width: 1024px) {
  .calendar-grid{
    gap: 2px;
  }
  .calendar-right .calendar-section{
    padding: 20px 8px;
  }
}
#prev-month{
  padding: 0;
    background: transparent;
    border: none;
    border-top: 3px solid black;
    border-right: 3px solid black;
    transform: rotate(-135deg);
    width: 10px;
    height: 10px;
}
#next-month {
  padding: 0;
    background: transparent;
    border: none;
    border-top: 3px solid black;
    border-right: 3px solid black;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
}
.arrow-month:has(button:focus) {
    outline: 3px solid #076bcf !important;
    outline-offset: 5px;
}
.contrast .arrow-month:has(button:focus) {
    outline: 3px solid #FFFF42 !important;
}
.contrast #prev-month , .contrast #next-month { 
  border-top: 3px solid white;
  border-right: 3px solid white;
}