/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Globals
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
#ContentPlaceHolder1_ltlCalDays_list {display: none;}
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #dbdce0;
}
 table#ctl00_ContentPlaceHolder1_chkListCategories, #ctl00_ContentPlaceHolder1_chkListCategories td {  border: none; font-size:1.045em; margin:10px 0; font-weight:normal; line-height:1.8em; color:#444; }
td {
    font-size: 0.75em;

	padding:5px 3px 5px 5px;
    margin: 0.3em 0 ;
	vertical-align:top;

	
}


td p{ line-height:1.1em; font-size:14px; margin:5px 0; color:#83868d;}
td h4{ text-transform:capitalize; font-size:15px; line-height:18px; color:#5f626a; margin:0; }
td a{ line-height:1.1em; font-size:14px; margin:5px 0; }
 /* =========================================
   DATE NUMBER
   ========================================= */

.calendar-page table.calendarEvent td.weekDayToday p.calendarDay {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 0 12px 0;

    background: #038B6D;
    color: #fff;

    border-radius: 50%;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 21px;
    font-weight: 600;

    line-height: 1;
}

.weekDayToday h4 {color:#111;}
.weekDayToday {color:#222;}
p.calendarDay {margin:0; padding:0;   color: #444;    font-size: 1.3em;    line-height: 2em;     }
p.StudentsClosed{padding:0; margin:0 0 5px 0;font-size:1.6em; line-height:26px; text-align: center; width:26px;  height:25px;  -moz-border-radius: 50%;-webkit-border-radius: 50%; border-radius: 50%;background-color: #e77802;color: #fff;}
p.McpsClosed{padding:9px 0; margin:0 0 5px 0;font-size:1.3em; line-height:1.3em; text-align: center; width:40px;  height:40px;  -moz-border-radius: 50%;-webkit-border-radius: 50%; border-radius: 50%;background-color:#5395ea ;color: #fff;}
p.StudentsClosed{padding:9px 0; margin:0 0 5px 0;font-size:1.3em; line-height:1.3em; text-align: center; width:40px;  height:40px;  -moz-border-radius: 50%;-webkit-border-radius: 50%; border-radius: 50%;background-color: #ef8407;color: #fff;}
p.SchoolsClosed{padding:9px 0; margin:0 0 5px 0;font-size:1.3em; line-height:1.3em; text-align: center; width:40px;  height:40px;  -moz-border-radius: 50%;-webkit-border-radius: 50%; border-radius: 50%;background-color:#a05d95;color: #fff;}
.calWeekDayHeader, .calWeekendHeader{    background: #4A6FA5 ;  padding:8px; color:#fff; font-weight:normal; text-transform:uppercase; font-size:15px; text-align: center;}
.weekend{background-color:#f1f1f1;}

.calendarNav a {font-weight:normal ;  font-size:1.2em; line-height:2em;      font-weight: 600; color:#087eaf;}
 h4.current{ font-size:2em; text-align:center;    margin:20px  0px ;  }
.calendarNav h4.current{     margin: 0px ;  }

h4.close-category{text-align:center; font-size:13px; margin:0 ; display:inline-block; vertical-align: top;  color:#797979}
h4 .categroy-desc{display:none;}
.singleEvent{ margin:5px 0px 15px 0px; }
.view-type { font-size:1.3em; color:#bdbfc2; line-height:1.6em; position: relative;
    top: 5px;}
	
.icon-radio-unchecked {font-size:12px;}
.category-close { font-size:1.0em; color:#797979; margin:0px 10px 0 5px ; line-height:1.3em; }


#category-wrapper{}
#calendar-wrapper {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.print-ical{margin-bottom:20px; font-size:16px; font-family: archivonarrow;}

#view-by{color:#344f66; font-size:16px; font-family:Arial, Helvetica, sans-serif; margin:0px 0 20px 0;}


  #ctl00_ContentPlaceHolder1_drpMonthShows::after {
    border-color: #fff;
    border-style: solid;
   border-width: 6px 0 6px 6px;
    content: "";



}

 
 #ctl00_ContentPlaceHolder1_drpMonthShows option{	font-size:14px;
	line-height:30px; padding:0 0 5px 10px; margin:5px 0; height: 1.8em;  white-space: pre;
 }

 #ctl00_ContentPlaceHolder1_drpMonthShows option:hover{background-color:red;}
 a#ctl00_ContentPlaceHolder1_lnkBtnList:hover, a#ctl00_ContentPlaceHolder1_lnkBtnMonth:hover{text-decoration:none; }
 a span.view-type:hover{color:#ccc;}
  a span:hover{text-decoration:none; }
  a.active span.view-type{color:#7c8691;}

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Calendar LIst View only
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */



.date-wrapper{ margin:10px 0px ;  padding-bottom:10px; position:relative;  border-bottom: 5px solid #f4f4f4;  z-index:99; }

.singleEvent-list{  padding:10px; margin:0 0 10px 0; color:#4f6e8d;border:1px solid #f4f5f7; background-color:#f9f9f9; box-shadow: 0 0 0 1px #fff inset;}
.singleEvent-list  h4{ text-transform:capitalize;  margin:0 ; color:#344f66;font-size: 1.2em;   }


.date-content .icon-radio-unchecked {color:#ccc; margin-right:5px;}
.singleEvent-list ul {margin:0px; padding:0px;}
.singleEvent-list ul li{ list-style-type:none; display:inline-block; padding: 0;  vertical-align:top; color:#4d6b89;}
li.event_time { margin:0 20px  20px 0 ; width:23%}
li.event_time span{ padding-right:3px;}
li.event_notes { margin:0 30px 8px 0 ; width:40%}
li.event_location{ margin:0  ; width:29%}
/*.date-content {display:inline-block; width:75%; padding:10px 0px 0px 20px; border-left:5px solid #f4f4f4;}*/
#calendar-wrapper {  position: relative; z-index: 10;  top: 0;   left: 0;}
.cal-date{display:inline-block; width:20%;}

.cal-date p {
    background:#757983;
    color: #fff;
    font-family: archivonarrow;
    font-size: 16px;
    display: block;
    left: 0;
    margin-bottom: 1.5em;
    padding: 0.2em 0.55em;
    position: absolute;
    text-align: center;
    top: 0em;
    width: 16%;
}
.ical-print {width:230px; float:right;   background-color: #f4f4f4;
    border-bottom: 1px solid #cfd0d4;
    border-top: 1px solid #cfd0d4;
color:#1561c0;
    margin: 10px 0 ;
    padding: 5px 0 5px 20px; line-height:20px;}
.ical-print a{font-size:12px;}

.SchoolsClosed p::after{  border-bottom: 16px solid transparent;
    border-left: 11px solid #aa4991;
    border-top: 16px solid transparent;
   }
.SchoolsClosed p {
    background:#aa4991;
    color: #fff;
  }
  .McpsClosed p::after{  border-bottom: 16px solid transparent;
    border-left: 11px solid #5395ea ;
    border-top: 16px solid transparent;
   }
.McpsClosed p {
    background:#5395ea ;
    color: #fff;
  }
  
.StudentsClosed p::after{  border-bottom: 16px solid transparent;
    border-left: 11px solid #e69221;
    border-top: 16px solid transparent;
   }
.StudentsClosed p {
    background:#e69221;
    color: #fff;
  }


.addthis_sharing_toolbox{float:right; width:100px; }


/*
|* Toggle Buttons 
.buttons{  float:left;	width:65%;}
.buttons button {

    margin:10px 0 5px 0;

    padding: 8px 30px;
    color: #fff;
      background-color: #5395ea;

}
.buttons button:hover,
.buttons button.active {
    background-color: #5395ea;
}
.buttons button:focus {
    outline: none
}*/




.howToSubscript {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #176b8f;
    font-size: 14px;

    text-decoration: none;

    padding: 7px 10px;
    border-radius: 4px;

    cursor: pointer;
    transition: background-color 0.2s ease,
                color 0.2s ease;
}

.category-container  td {
    border:0px!important;
}

.howToSubscript:hover,
.howToSubscript:focus {
    color: #124f6a;
    background-color: #eef6f9;
    text-decoration: none;
}


        #howToModal .modal-header {
            position: relative;
        }

        #howToModal .modal-header .close {
            position: absolute;
            top: 15px;
            right: 15px;
            margin: 0;
            float: none;
            font-size: 30px;
            line-height: 1;
        }

     

.btnDownload:hover,
.btnDownload:focus {

    background-color: #f4f4f4;
    text-decoration: none;
}

.btnDownload {
 /*   display: inline-flex;*/
    align-items: center;
    gap: 8px;
    color: #65686c;
	background: #fff;
    text-decoration: none;
    border: 1px solid #65686c;
    font-size: 11px;
	margin-left:10px;
    padding: 3px ;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btnDownload::before {

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    content: "\f019";

    margin-right:3px;

		}
		.btnSubscribe {
 /*   display: inline-flex;*/
    align-items: center;
    gap: 6px;



			margin-left:10px;

    color: #0285B6!important;
    background-color: #fff;
    border: 1px solid #0285B6;
    border-radius: 4px;

    font-size: 11px;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;
			font-style: normal!important;

    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease;
}

.btnSubscribe:hover,
.btnSubscribe:focus {

    background-color: #f4f4f4;
    text-decoration: none;
}

.btnSubscribe i {
    font-size: 12px;
}


.btnSubscribe::before {

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    content: "\f271";

    margin-right: 3px;

		}
		#howToModal .modal-content {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.22);
}


#howToModal .modal-header {
    position: relative;
    padding: 22px 28px;
    background-color: #f4f9fb;
    border-bottom: 1px solid #d9e7ed;
}


#howToModal .modal-title {
    color: #176b8f;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

#howToModal .modal-title::before {
    content: "\f073";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
    font-size: 20px;
    color: #176b8f;
}


#howToModal .close {
    position: absolute;
    right: 22px;
    top: 20px;
    color: #425b66;
    font-size: 28px;
    opacity: 0.7;
    text-shadow: none;
}

#howToModal .close:hover,
#howToModal .close:focus {
    color: #176b8f;
    opacity: 1;
}


#howToModal .modal-header-body {
    padding: 25px 30px !important;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}


#howToModal .modal-header-body > p:first-child {
    margin-bottom: 20px;
    font-size: 16px;
}

#howToModal .modal-header-body ol {
    margin: 0;
    padding-left: 25px;
}

#howToModal .modal-header-body ol > li {
    margin-bottom: 18px;
    padding-left: 4px;
}

#howToModal .modal-header-body ol > li > strong {
    color: #263f4a;
    font-weight: 700;
}

#howToModal .modal-header-body ul {
    margin-top: 6px;
    padding-left: 25px;
}

#howToModal .modal-header-body ul li {
    margin-bottom: 4px;
}


#howToModal .modal-footer {
    padding: 12px 28px;
    border-top: 1px solid #e5e5e5;
    background-color: #fafafa;
}

/*@media (max-width: 767px) {
    #howToModal .modal-header {
        padding: 18px 20px;
    }

    #howToModal .modal-title {
        font-size: 20px;
        padding-right: 35px;
    }

    #howToModal .modal-header-body {
        padding: 20px !important;
    }
}*/

/* =========================================
    MCPS CALENDAR 2026
   ========================================= */

.calendar-page {
    background: #f6f8fa;
    padding-bottom: 50px;
}

/* -----------------------------------------
   General Typography
   ----------------------------------------- */

.calendar-page h1,
.calendar-page h2,
.calendar-page h3,
.calendar-page h4,
.calendar-page h5 {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: #163b5c;
}

.calendar-page p,
.calendar-page td,
.calendar-page label {
    font-family: "Poppins", sans-serif;
}


/* -----------------------------------------
   Left Sidebar
   ----------------------------------------- */

.calendar-page .calendar-sidebar {
    padding-right: 25px;
}



.calendarNav {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    width: 100%;
    align-items: center;
	  background: #fff;
    border: 1px solid #e4e9ed;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    padding: 20px 50px;
    margin: 10px 0 15px 0;
}

.calendarNav .hypPrevious {
    grid-column: 1;
	   margin: 0;
    padding: 0;
    display: flex;
}

.calendarNav .hypCurrent {
    grid-column: 2;
	    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendarNav .hypNext {
    grid-column: 3;
	   margin: 0;
    padding: 0;
    display: flex;
	text-align: end;
	
}
/* Download / Print box */

.calendar-page .calendar-sidebar h3 {
    font-size: 20px;
    line-height: 1.35;
    color: #087eaf;
    margin: 0 0 15px;
}

.calendar-page .calendar-sidebar hr {
    border: 0;
    border-top: 1px solid #d8dee3;
    margin: 12px 0 18px;
}

.calendar-page .calendar-sidebar a {
    color: #087eaf;
    text-decoration: none;
}

.calendar-page .calendar-sidebar a:hover {
    text-decoration: underline;
}


/* Step numbers */

.calendar-page .calendar-sidebar strong,
.calendar-page .step-number {
    color: #087eaf;
}


/* -----------------------------------------
   Category Card
   ----------------------------------------- */

.calendar-page .category-card {
    background: #fff;
    border: 1px solid #e4e9ed;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.calendar-page .category-card h2,
.calendar-page .category-card h3 {
    font-size: 22px;
    margin: 0;
    padding: 22px 24px 14px;
    color: #263f52;
}


.calendar-page .category-item {
    border-bottom: 1px solid #e8ecef;
    padding: 16px 0;
}

.calendar-page .category-item:last-child {
    border-bottom: 0;
}

.calendar-page .category-item label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.45;
    color: #34495a;
}


/* Checkbox */

.calendar-page input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #087eaf;
    flex-shrink: 0;
}

.calendar-page .category-description {
    display: block;
    color: #788894;
    font-size: 12px;
    margin-top: 4px;
}


/* -----------------------------------------
   Top Controls
   ----------------------------------------- */

.calendar-page .calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.calendar-page select {
    background: #fff;
    border: 1px solid #cfd8de;
    border-radius: 6px;
    color: #34495a;
    padding: 9px 35px 9px 12px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

.calendar-page select:focus {
    outline: 2px solid rgba(8, 126, 175, .2);
    border-color: #087eaf;
}


/* -----------------------------------------
   Calendar Title
   ----------------------------------------- */

.calendar-page .calendar-title {
    margin-bottom: 18px;
}

.calendar-page .calendar-title h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #34495a;
}

.calendar-page .calendar-title a {
    color: #087eaf;
}


/* -----------------------------------------
   Month Navigation
   ----------------------------------------- */


.calendar-month-navigation {
    display: grid;

    grid-template-columns: 50px 1fr 1.5fr 1fr 50px;

    align-items: center;

    min-height: 92px;

    background: #fff;

    border: 1px solid #dfe5e9;
    border-radius: 8px;

    box-shadow: 0 2px 7px rgba(0, 0, 0, .04);

    margin-bottom: 26px;

    overflow: hidden;
}


/* Month arrows */

.month-arrow {
    width: 42px;
    height: 42px;

    margin: auto;

    border: 1px solid #dce4e9;
    border-radius: 6px;

    background: #fff;

    color: #087eaf;

    font-size: 36px;
    font-weight: 300;

    line-height: 30px;

    cursor: pointer;
}

.month-arrow:hover {
    background: #f2f8fb;
    border-color: #087eaf;
}


/* Month links */

.month {
    text-align: center;
}

.month a {
    color: #163b5c;

    font-size: 17px;

    text-decoration: none;
}

.month a:hover {
    color: #087eaf;
}


/* Current month */

.month.current h2 {
    margin: 0;

    color: #087eaf;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 500;
}





/* -----------------------------------------
   Calendar Table
   ----------------------------------------- */

.calendar-page table.calendarEvent {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    background: #fff;

    border: 1px solid #dfe5e9;
    border-radius: 8px;
    overflow: hidden;
}


/* Day headings */

.calendar-page table.calendarEvent th {
    background: #4A6FA5;
    color: #fff;

    border-right: 1px solid rgba(255,255,255,.25);

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;

    padding: 12px 8px;
    text-align: center;
}

.calendar-page table.calendarEvent th:last-child {
    border-right: 0;
}


/* Calendar cells */

.calendar-page table.calendarEvent td {
    vertical-align: top;

    min-height: 90px;

    background: #fff;

    border-right: 1px solid #e2e7ea;
    border-bottom: 1px solid #e2e7ea;

    padding: 10px;

    font-size: 13px;
    line-height: 1.35;

    color: #405261;
}

.calendar-page table.calendarEvent td:last-child {
    border-right: 0;
}

.calendar-page table.calendarEvent tr:last-child td {
    border-bottom: 0;
}


/* Weekend cells */

.calendar-page table.calendarEvent td:first-child,
.calendar-page table.calendarEvent td:last-child {
    background: #cbdde7;
}


/* -----------------------------------------
   Date Number
   ----------------------------------------- */

.calendar-page .calendarDay {
    display: block;

    font-size: 16px;
    font-weight: 500;

    color: #334b5d;

    margin-bottom: 8px;
}


/* Today */

.calendar-page .today .calendarDay,
.calendar-page td.today .calendarDay {
    display: inline-flex;

    width: 30px;
    height: 30px;

    align-items: center;
    justify-content: center;

    background: #6b737a;
    color: #fff;

    border-radius: 50%;

    margin-bottom: 7px;
}
.today-link{


	 
    border: 1px solid #cfd8de;
    border-radius: 6px;
    color: #087eaf;
        padding: 8px 15px;
      
          font-size: 14px;

        box-shadow: 0 3px 10px rgba(0, 0, 0, .12);

        display: flex;
        align-items: center;
        justify-content: center;
    }

/* -----------------------------------------
   Events
   ----------------------------------------- */

.calendar-page .singleEvent {
    margin-top: 5px;
}

.calendar-page .singleEvent h4 {
    font-size: 13px;
    line-height: 1.25;

    color: #263f52;

    font-weight: 600;

    margin: 0 0 5px;
}

.calendar-page .singleEvent p {
    font-size: 13px;
    line-height: 1.35;

    color: #778691;

    margin: 0;
}


/* Multiple events */

.calendar-page .event {
    margin-bottom: 10px;
}

.calendar-page .event:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------
   Event Category Indicators
   ----------------------------------------- */

.calendar-page .event-school {
    border-left: 3px solid #f39a22;
    padding-left: 7px;
}

.calendar-page .event-teacher {
    border-left: 3px solid #a94b8f;
    padding-left: 7px;
}

.calendar-page .event-closed {
    border-left: 3px solid #5c91d6;
    padding-left: 7px;
}


/* -----------------------------------------
   Subscribe Button
   ----------------------------------------- */

.calendar-page .subscribe,
.calendar-page .btn-subscribe {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    background: #087eaf;
    color: #fff;

    border: 0;
    border-radius: 5px;

    padding: 7px 12px;

    font-size: 12px;
    font-family: "Poppins", sans-serif;

    text-decoration: none;

    transition: background .2s ease;
}

.calendar-page .subscribe:hover,
.calendar-page .btn-subscribe:hover {
    background: #066b94;
    color: #fff;
    text-decoration: none;
}
.categroy-desc{ flex: 1; gap:10px;}
.cartegory-container label{display:flex;}



/*
/* =========================================
   CALENDAR OPTIONS
   ========================================= */

.calendar-options-container {
    background: #fff;
    border: 1px solid #e1e7eb;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.calendar-option {
    display: flex;
    align-items: center;
    gap: 15px;
}
.calendar-option .option-text {
    flex: 1;
    margin: 0;
    padding: 0;
}

.calendar-option .option-text a {
    display: block;
    margin: 0;
    padding: 0;

    color: #1d2f3f;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.calendar-option .option-text small {
    display: block;
    margin-top: 3px;

    color: #667783;
    font-size: 12px;
}
/* Heading */

.calendar-options h4 {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 18px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e5eaee;

    color: #163b5c;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;

    text-transform: uppercase;
}


/* Calendar icon in heading */

.calendar-options-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background: #edf6fa;

    border-radius: 50%;

    color: #087eaf;

    font-size: 20px;
}


/* Individual option */

.calendar-option {
    padding: 17px 0;

    border-bottom: 1px solid #e5eaee;
}

.calendar-option:last-child {
    border-bottom: none;
    padding-bottom: 0;
}


/* Option link */

.calendar-option a {
    display: flex;
    align-items: center;
    gap: 16px;

    color: #23384d;

    text-decoration: none;
}

.calendar-option a:hover {
    color: #087eaf;
}


/* Option icon */

.option-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    min-width: 32px;

    color: #087eaf;

    font-size: 21px;
}


/* Text */

.option-text {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.option-text strong {
    color: #1d2f3f;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.option-text small {
    color: #667783;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
}


/* Hover */

.calendar-option a:hover .option-icon {
    color: #066b94;
}

.calendar-option a:hover .option-text strong {
    color: #087eaf;
}


/* =========================================================
   VIEW TOGGLE
   ========================================================= */

.view-toggle {
    display: flex;

    width:180px;

    height: 48px;
}

.view-button {
    flex: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 12px;

    background: #fff;

    border: 1px solid #cfd9e0;

    color: #263746;

    font-family: "Poppins", Arial, sans-serif;

    font-size: 14px;

    cursor: pointer;
}

.view-button:first-child {
    border-radius: 6px 0 0 6px;
}

.view-button:last-child {
    border-left: 0;

    border-radius: 0 6px 6px 0;
}


/* Selected */
.view-button:has(a.active) {
    background-color: #087eaf;
    border-color: #087eaf;

}

.view-button a.active {

    color: #fff!important;
}

.view-button:hover:not(.active) {
    background: #f3f8fa;
}

.view-button span:first-child {
    font-size: 18px;
}



/* =========================================
   CATEGORY FILTER
   ========================================= */

.category-filter {
    width: 100%;
}

.category-filter > label, .calendar-control > label {
    display: block;
    color: #163b5c;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 13px;
	padding-bottom:0px;
	line-heighT:20px;
	
    font-weight:600;
	text-transform:uppercase
}


/* =========================================
   DROPDOWN
   ========================================= */

.category-dropdown {
    position: relative;

    width: 100%;
	max-width:550px;
	margin:0 auto;
	
}


/* Button */

.category-dropdown-button {
    width: 100%;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 15px;

    background: #fff;

    border: 1px solid #cfd9e0;
    border-radius: 6px;

    color: #263746;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 14px;

    cursor: pointer;

    text-align: left;
}

.category-dropdown-button:hover {
    border-color: #087eaf;
}

.category-dropdown-button:focus {
    outline: none;

    border-color: #087eaf;

    box-shadow: 0 0 0 3px rgba(8, 126, 175, .12);
}

.category-dropdown-button i {
    color: #163b5c;

    font-size: 12px;
}
.calendar-control-filter{width:50%; }


/* =========================================
   DROPDOWN MENU
   ========================================= */

.category-dropdown-menu {
    display: none;

    position: absolute;

    top: calc(100% + 6px);
    left: 0;Fselect category
	min-width:100%;

    width: 100%;

    max-height: 450px;

    overflow-y: auto;

    padding: 10px 10px 10px 20px;

    background: #fff;

    border: 1px solid #d9e1e6;
    border-radius: 7px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);

    z-index:999999;
}


/* Open dropdown */

.category-dropdown.open .category-dropdown-menu {
    display: block;
}


/* =========================================
   CHECK ALL
   ========================================= */

.category-check-all {
    padding: 8px 16px 12px;

    border-bottom: 1px solid #e5eaee;
}

.category-check-all label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #163b5c;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


/* =========================================
   CATEGORY LIST
   ========================================= */

.category-list {
    padding: 5px 0;
}
.category-list td{border:0px!important;     padding: 15px 0;}

/* ASP.NET CheckBoxList */

.category-list table {
    width: 100%;
    border-collapse: collapse;
	border:0px!important;
}






/* Checkboxes */

.category-list input[type="checkbox"] {
    margin-right: 9px;

    accent-color: #087eaf;
}

.category-list h3{display:none!important;}

/* =========================================
   CALENDAR COLOR CODES
   ========================================= */


/* Heading */

.calendar-legend-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 16px;
    padding-bottom: 14px;

    border-bottom: 1px solid #e1e7eb;

    color: #163b5c;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
}


/* Key icon */

.legend-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background: #edf6fa;
    border-radius: 50%;

    color: #087eaf;
    font-size: 18px;
}


/* Legend item */

.legend-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 8px 0;

    color: #263746;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}


/* Color rectangle */

.legend-color {
    display: block;

    width:40px;
    min-width:40px;
    height: 20px;

    margin-top: 5px;

    border-radius: 3px;
}


/* Colors */

.legend-orange {
    background-color: #ff9800;
}

.legend-purple {
    background-color: #a944a4;
}

.legend-blue {
    background-color: #4f91e8;
}




/* -----------------------------------------
   Responsive
   ----------------------------------------- */




@media (max-width: 991px) {

    .calendar-page .calendar-sidebar {
        padding-right: 0;
        margin-bottom: 25px;
    }

    .calendar-page .month-navigation h1 {
        font-size: 24px;
    }

    .calendar-page table.calendarEvent td {
        padding: 8px;
        font-size: 12px;
    }

    .calendar-page .singleEvent h4 {
        font-size: 12px;
    }
}
/* =========================================
   TODAY'S DATE
   ========================================= */

.calendar-page table.calendarEvent td.weekDayToday {
    position: relative;

    background: #f1f7fb;

    border: 1px solid #c8ddea !important;
    border-radius: 10px;
  transform: scale(1.115);
    transform-origin: center;
    box-shadow: 0 4px 14px rgba(20, 60, 90, 0.12);

    vertical-align: top;

    z-index: 2;
}


/* =========================================
   TODAY LABEL
   ========================================= */

.calendar-page table.calendarEvent td.weekDayToday::after {
    content: "TODAY";

    position: absolute;
    top: 14px;
    right: 14px;

    color: #1769a5;

    font-family: "Poppins", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
}




/* =========================================
   EVENTS INSIDE TODAY
   ========================================= */

.calendar-page table.calendarEvent td.weekDayToday .singleEvent {
    margin-top: 4px;
}


/* Event title */

.calendar-page table.calendarEvent td.weekDayToday .singleEvent a,
.calendar-page table.calendarEvent td.weekDayToday .singleEvent {
    color: #163b5c;
}


/* =========================================
   EVENT SEPARATION
   ========================================= */

.calendar-page table.calendarEvent td.weekDayToday .singleEvent + .singleEvent {
    margin-top: 14px;
    padding-top: 14px;

    border-top: 1px solid #d7e3eb;
}


/* =========================================
   EVENT TIME
   ========================================= */

.calendar-page table.calendarEvent td.weekDayToday .eventTime {
    color: #2867ad;
    font-weight: 500;
}

@media (max-width: 767px) {
	.order-last {
    order: 1 !important;
}
	
	.mobile-container {background-color:#EEF5FD; padding:10px;}
	.calendarEvent {display:none!important;}
	.calendar-options-container {
    background: #fff;
    border: 1px solid #f4f4f4;
    border-radius: 10px;
    padding: 24px;
     box-shadow: none!important ; 
}

    .calendar-page .calendar-controls select {
        margin-bottom: 12px;
    }

	.close-category{display:none!important;}
    .calendar-page .calendar-legend {
        justify-content: flex-start;
    }
.calendar-control-filter {
     width: auto!important; 
}
    .calendar-page .month-navigation {
        padding: 10px;
    }

    .calendar-page .month-navigation h1 {
        font-size: 21px;
    }

    .calendar-page table.calendarEvent {
        font-size: 11px;
    }

    .calendar-page table.calendarEvent td {
        height: 90px;
        padding: 5px;
    }

    .calendar-page .calendarDay {
        font-size: 14px;
    }

    .calendar-page .singleEvent p {
        display: none;
    }

    .calendar-page .singleEvent h4 {
        font-size: 10px;
    }
	    section.date-wrapper {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 12px;

        padding: 10px;
    }

    .cal-date {
        width: 60px;
        height: 60px;
    }

    .cal-date .listcal-day,
    .cal-date .listcal-month {
        top: 9px;

        font-size: 9px;
        line-height: 10px;
    }

    .cal-date .listcal-date {
        top: 21px;

        font-size: 22px;
        line-height: 23px;
    }

    .cal-date .listcal-year {
        bottom: 8px;

        font-size: 8px;
        line-height: 9px;
    }

    .date-content h4 {
        font-size: 14px;
    }

    .date-content li {
        font-size: 12px;
    }
	#ContentPlaceHolder1_ltlCalDays_list {display: block!important;}	
	#ContentPlaceHolder1_ltlCalDays_month .singleEvent{display:none!important;}
	#ContentPlaceHolder1_ltlCalDays_month td {max-width:30px!important; max-height:30px!important;}
	
 /* Make the controls sit below the calendar */
    .calendar-controls {
        display: block!important;
              align-items: center;
        width: 100%;
        margin-top: 10px;
    }

    /* Remove the large category field appearance */
    .calendar-control-filter {
        display: block;
        margin: 0;
        padding: 0;
    }

    /* Make the category control compact */
    .category-filter {
        margin: 0;
    }
	.category-list td {padding-top:25px;}
.cartegory-container label {
     display: block; 
	    font-size: 20px;

	margin:10px 0 20px 0;

	
}
	.btnSubscribe , .btnDownload{
    font-size: 0;
	border:0px;
		background-color: transparent;
}

.btnSubscribe::before, .btnDownload::before {
    font-size: 20px!important;
	top:10px;
	padding:7px;
	border:1px solid #9aabbe;
	border-radius:5px;
	background:#fff;
	right:0;
	bottom:10px;
	
}
	.categroy-desc{    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:6px;
    margin: 10px 0;	padding-bottom:10px;border-bottom:1px solid #fff;}
	
    #categoryToggle {

      width: 100%!important;
        height: 36px;
        padding: 5px ;
    }

    /* Keep all 7 days visible */
    .calendar-page table.calendarEvent {
        width: 100% !important;
        table-layout: fixed;
        border-collapse: collapse;
    }

    /* Each day = 1/7 of screen */
    .calendar-page table.calendarEvent th,
    .calendar-page table.calendarEvent td {
        width: 14.285% !important;
        min-width: 0 !important;
    }

    /* Small weekday headings */
    .calendar-page table.calendarEvent th {
        height: 35px;
        padding: 4px 1px !important;
        font-size: 11px;
        text-align: center;
        overflow: hidden;
    }

    /* Small calendar squares */
    .calendar-page table.calendarEvent td {
        height: 55px !important;
        padding: 5px 2px !important;
        vertical-align: top;
        text-align: center;
        font-size: 16px;
        overflow: hidden;
        position: relative;
    }

   

    /* Hide actual event descriptions */
    .calendar-page table.calendarEvent td a,
    .calendar-page table.calendarEvent td .eventTitle,
    .calendar-page table.calendarEvent td .eventDescription {
        display: none !important;
    }



.buttons, 
.ical-print  {
    float:none;
    width:100%;
}
.view-hide{display:none;}
.date-wrapper {
    border-bottom: 0;}
.cal-date, 
.date-content{display:block; width:100%;}
.cal-date p {width:100%;}
.cal-date, .date-content {
    display: inline-block;

}


	
	/* =========================================
       MOBILE CATEGORY BUTTON
       ========================================= */

    .calendar-control-filter {
        position: static;
    }

    .category-filter {
        position: static;
    }

    .category-dropdown {
        position: static;
    }

    #categoryToggle {
        position: fixed;
        z-index: 999999;

        right: 0px;
        bottom: 0px;
		border-radius: 0px;

        width: 50%;
        min-width: 60px;
		max-width: 50%;
        height: 42px;

        padding: 15px 0;

        border: 1px solid #1088b5;
      
        background: #1088b5;
    color:#fff;
        font-size: 16px;
		line-height:30px;
        font-weight: 600;

        box-shadow: 0 3px 10px rgba(0, 0, 0, .20);

        display: flex;
        align-items: center;
        justify-content: center;
    }
	.category-dropdown-button i {
    color: #fff;
    font-size: 16px;
		margin-left:5px;
}
.today-link{
        position: fixed;
        z-index: 10001;

        left: 0px;
        bottom: 0px;
width: 50%; 
		max-width: 50%;
        height: 42px;
	 
	border-radius: 0px;

        padding: 0 10px;

        border: 1px solid #555556;
      
        background: #65686c;
    color:#fff;
        font-size: 16px;
        font-weight: 600;

        box-shadow: 0 3px 10px rgba(0, 0, 0, .20);

        display: flex;
        align-items: center;
        justify-content: center;
    }
	.calendar-control a.btn-outline-primary{color:#fff;}

    /* =========================================
       CHANGE "SELECT CATEGORY" INTO "FILTER"
       ========================================= */

    #categoryToggle {
        font-size: 0;
    }

    #categoryToggle::before {
        content: "Select Category  ";
        font-size: 14px;
		padding: 5px 0;
    }


    /* =========================================
       CATEGORY POPUP
       ========================================= */

    .category-dropdown-menu {
        position: fixed !important;

        z-index: 10000;

        left: 16px !important;
        right: 16px !important;

        bottom: 68px !important;
        top: auto !important;

        width: auto !important;
        max-width: none !important;

        max-height: calc(100vh - 100px);

        overflow-y: auto;

        background: #EEF5FD;

        border: 1px solid #ccc;
        border-radius: 8px;

        box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
    }


    /* Only show the popup when your existing JS
       adds the "open" class */

    .category-dropdown:not(.open) .category-dropdown-menu {
        display: none;
    }

    .category-dropdown.open .category-dropdown-menu {
        display: block;
    }

	
	/* =========================================
   CALENDAR LIST VIEW
   ========================================= */
.calendar-page table.calendarEvent td.weekDayToday p.calendarDay {
    display: flex;
    align-items: center;
    justify-content: center;
   width: 35px; 
	height: 35px;
	    font-size: 14px;}

section.date-wrapper {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 18px;
    align-items: center;

    padding: 10px 15px;
    margin-bottom: 10px;

    background: #fff;
    border: 1px solid #e8ebef;
    border-radius: 10px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    transition: box-shadow 0.2s ease;
}

section.date-wrapper:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}


/* =========================================
   DATE CIRCLE
   ========================================= */

.cal-date {
    position: relative;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    color: #fff;

    flex-shrink: 0;
}


/* Remove default paragraph spacing */

.cal-date p {
    position: relative;
    margin: 0;
    padding: 0;
}
/* =========================================
   DATE COLORS
   ========================================= */

/* MCPS closed / school closure */
/* Other calendar events */

.cal-date:not(.McpsClosed), .cal-date:not(.SchoolsClosed), .cal-date:not(.StudentsClosed) {
    background: #444;
}


.McpsClosed {
    background: #1479d1!important;
}
.StudentsClosed {
    background:#e77802!important;
}
.SchoolsClosed {
    background:#a05d95!important;
}


/* =========================================
   DAY — Mon
   ========================================= */

.cal-date .listcal-day {
    position: absolute;

    top: 15px;
    left: 0;

    width: 50%;

    padding-right: 2px;

    text-align: right;

    font-size: 10px;
    line-height: 11px;
    font-weight: 600;
}


/* =========================================
   MONTH — Sep
   ========================================= */

.cal-date .listcal-month {
    position: absolute;

    top: 15px;
    right: 0;

    width: 50%;

    padding-left: 2px;

    text-align: left;

    font-size: 10px;
    line-height: 11px;
    font-weight: 600;
}


/* =========================================
   DAY NUMBER
   ========================================= */

.cal-date .listcal-date {
    position: absolute;

    top: 29px;
    left: 0;

    width: 100%;

    margin: 0;

    text-align: center;

    font-size: 25px;
    line-height: 25px;
    font-weight: 700;
}


/* =========================================
   YEAR — 26
   ========================================= */

.cal-date .listcal-year {
    position: absolute;
top: 56px;
    left: 0;

    width: 100%;

    text-align: center;

    font-size: 9px;
    line-height: 10px;
    font-weight: 500;
}


/* =========================================
   EVENT CONTENT
   ========================================= */

.date-content {
    min-width: 0;
}

.date-content hgroup.singleEvent-list {
    margin: 0;
    padding: 0;
}


/* Event title */

.date-content h4 {
    margin: 0 0 4px;

    color: #193f66;

    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
}


/* Event links */

.date-content ul {
    margin: 0;
    padding-left: 17px;
}

.date-content li {
    font-size: 13px;
    line-height: 1.4;
}






p.McpsClosed, p.StudentsClosed, p.SchoolsClosed, p.SchoolsClosed{ width:30px;  height:30px;     padding: 6px 0;}



   /* ==========================================
       MONTH NAVIGATION
       ========================================== */

    .calendarNav {
  display: grid !important;
        grid-template-columns: 30% 40% 30% !important;
        width: 100%;
      
        margin: 15px 0 0 0;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 10px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    }




    /* ==========================================
       PREVIOUS / NEXT
       ========================================== */

    .calendarNav .hypPrevious,
    .calendarNav .hypNext {
        background: #1088b5;
		  min-width: 0 !important;
        width: auto !important;
        float: none !important;
        margin: 0 !important;
        padding: 20px 8px ;
        box-sizing: border-box;

        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }


    .calendarNav .hypPrevious a,
    .calendarNav .hypNext a {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 5px;

        width: 100%;
        height: 100%;

        padding: 6px;

        box-sizing: border-box;

        color: #fff;
        text-decoration: none;

        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;

        text-align: center;
    }

.calendarNav .hypCurrent {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .calendarNav .hypCurrent h4.current {
        width: 110px !important;
        margin: 0 auto !important;
        padding: 0 !important;

        text-align: center;

        font-size: 18px;
        line-height: 1.15;

        white-space: normal !important;
    }

    /* ==========================================
       CURRENT MONTH
       ========================================== */

    .calendarNav .hypCurrent {
        background: #fff;

        text-align: center;
    }

   

    /* ==========================================
       ARROW CIRCLES
       ========================================== */

    .calendarNav .hypPrevious em,
    .calendarNav .hypNext em {
        display: flex;

        align-items: center;
        justify-content: center;

        flex: 0 0 32px;

        width: 32px;
        height: 32px;

        margin: 0;

        border-radius: 50%;

        background: rgba(0, 0, 0, .12);

        font-size: 0;
    }


    /* CSS CHEVRONS */

    .calendarNav .hypPrevious em::before,
    .calendarNav .hypNext em::before {
        content: "";

        width: 8px;
        height: 8px;

        border-top: 3px solid #fff;
        border-right: 3px solid #fff;
    }


    .calendarNav .hypPrevious em::before {
        transform: rotate(-135deg);
        margin-left: 4px;
    }


    .calendarNav .hypNext em::before {
        transform: rotate(45deg);
        margin-right: 4px;
    }


    /* ==========================================
       PREVIOUS / NEXT HOVER
       ========================================== */

    .calendarNav .hypPrevious a:hover,
    .calendarNav .hypNext a:hover {
        color: #fff;
        background: rgba(0, 0, 0, .06);
    }

/* =========================================
   grid
   ========================================= */
.calendar-page table.calendarEvent th {
    background: #f4f6f8;
    color: #3E3A3A;

    border-right: 1px solid rgba(255,255,255,.25);

    font-size: 9px;
    font-weight: 500;
    letter-spacing: .3px;

    padding: 10px 8px;
    text-align: center;
}
	.calendar-page table.calendarEvent td:first-child, .calendar-page table.calendarEvent td:last-child {
    background: #f4f6f8;
}
.calendar-page table.calendarEvent td.weekDayToday::after {
    content: "";
    position: relative;
    top: 14px;
    right: 14px;
    color: #1769a5;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .4px;
}

    .calendar-event {
        min-height: 70px;
        padding: 10px 36px 10px 12px;
    }

    .event-date {
        flex: 0 0 42px;
        width: 42px;
        margin-right: 10px;
    }

    .event-day {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .event-details h3 {
        font-size: 13px;
        line-height: 1.3;
    }

    .event-meta {
        font-size: 10.5px;
    }

    .event-links {
        font-size: 10.5px;
    }

    .event-arrow {
        right: 10px;
        font-size: 24px;
    }
}