/*======================================== ANNUAL CALENDAR ========================================*/
/* SPA scoping: in 2NET, each page reloads so these globals only affected the annual page.
   In TwoNetCore the same body is reused for monthly+annual, so we gate via :has(#annual_calendar)
   so the monthly view keeps its own #wrapper width. */
body:has(#annual_calendar) #wrapper { width: 100%; }
body:has(#annual_calendar) #navigationToolBar { width: 970px; margin: 0 auto; }
body:has(#annual_calendar) #navigationPanel { float: none; }

/* Override leopard.css's `html, body { height: 90vh; overflow: hidden; background: #4dc4db }`
   for the annual page — we need vertical scrolling AND a white bg so transparent grid cells
   don't show the cyan body through them (2NET's body is white, so this matches it). */
html:has(#annual_calendar),
body:has(#annual_calendar) {
    height: auto !important;
    overflow: auto !important;
    background-color: #fff !important;
}
.pirsomet.adVertical { display: none; }
.pirsomet.adHorizontalTop, .pirsomet.adHorizontal2nd { display: block; }
div#navigationPanelContent_m09Button { font-weight:normal;display:none }

.eventsExist { display: block; color: White; background-color: #763026; width: 100%; cursor: cell; }
.eventExist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ----------- Content ----------- */
.grid { width: 98%; margin: 0 auto; clear: both; float: none; border-collapse: collapse; }
    .grid td { font-size: 0.8em; border-left: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; text-align: center; min-width: 18px; max-width:3.6rem;padding: 4px 1px 0; margin: 0; vertical-align: top; width: 2.5rem; }
        .grid td.daytitle { border-top: 1px solid #dcdcdc; border-bottom: 1px solid #005399; background-color: #0072C6; font-weight: bold; color: #fff; padding: 2px 0; }
        .grid td span { display: inline-block; line-height: 1; font-size: 0.75em; vertical-align: inherit;text-overflow:ellipsis; }
        .grid td.monthtitle { font-size: 0.9em; min-width: 64px; background-color: #f6f6f6; font-weight: bold; color: black; border-right: 1px solid #dcdcdc; padding: 0px; vertical-align: middle; }
            .grid td.monthtitle a:hover { text-decoration: underline; }
            .en .grid td.monthtitle a {font-size:1.2em;}
        .grid td.dayInMonth {width:40px; max-width: 40px; overflow:hidden; }
        .grid td span.number { font-size: 1em; }
        .grid td.saturday { background-color: #EDF1F4; }
        .grid td span.hebrewmonthtitle { font-size: 0.7em; font-weight: normal; color: black; }
@media screen and (max-width : 980px) {
    .grid td { font-size: 0.9em; max-width: 1.6rem; }
        .grid td.monthtitle { font-size: 0.9em; max-width: 1rem; }
        .grid td span.number {font-size: 1.2em;}
}

.noborder { border: none; font: 1.2em bold; }

/*.personal { display: none; /*	line-height: 1; color: green; BEHAVIOR: url(#default#userdata) ; padding:0px;}*/

@media screen and (orientation:portrait) {
    #annual_calendar { overflow: auto; width: 100%; }
        #annual_calendar table { width: 250%; }
}

@media(min-width: 1200px) {
    .grid { font-size: 1.3em; }
}

@media(max-width: 900px) {
    #navigationPanelAnual { width: 100%; padding: 0; height: 62px; text-align: center; }
        #navigationPanelAnual h1 { width: 100%; font-size: 1.2em; margin-top: 8px; }
    #annualNav { width: 100%; margin-top: 2px; }
    #buttonsPanel_LoazHeb { visibility: hidden; }
}

@media(max-width: 800px) {
    #wrapper { width: 100%; }
    #navigationToolBar { width: 100%; }
    .grid { font-size: 0.8em; }
    ., .editable { display: none; }
}

@media(max-width: 700px) {
    div#navigationPanelContent_m09Button {display:none;}

    #wrapper { width: 100%; }
    .grid { font-size: 0.5em; }
}

@media(max-width: 400px) {
    #wrapper { width: 100%; }
    #navigationPanel div, #buttonsPanel_LoazHeb, .mtimejumpclass {width:22.8%;}
    .grid { font-size: 0.3em; }
    .grid td.monthtitle { min-width: 44px; font-size: 2.4em; }
    .grid td { font-size: 2em; }
}


@media print {
    .grid td span.number {font-size:14px;}
    #navigationPanel div {width:100%; margin-top:-12px;}
    #navigationToolBar {width: 95%;}
    .grid {width: 95%; }
    .grid td { padding: 2px 1px; }
    .grid td.monthtitle { font-size: 1.4em; }
    .grid td.monthtitle a {font-size:20px;text-decoration:none;}
    .grid td.daytitle { background-color: #f6f6f6; color: #000; }
    .grid td span {font-size:1.2em; font-weight: normal; }
    .personal {
        line-height: 1;
        display: inline-block;
    }
    .eventExist {
        display: block !important;
    }
    /* SPA scope — annualCalendar.css loads on every page in our SPA (unlike 2NET, where it
       only loaded on annual-calendar.aspx). Scope the body-zoom to annual view only via
       :has(.grid) so the monthly print isn't shrunk. */
    body:has(.grid) {
        /*transform: scale(0.6);*/
        transform-origin: top right;
        margin: 0;
        padding: 0;
        zoom: 0.55;
    }
}

/*Filters in the popup — SPA scoped:
   2NET loads this CSS only on annual page (so .monthlySet hidden makes sense for them).
   We load it everywhere, so scope to annual page via :has(#annual_calendar).
   Also gate .yearSet hiding to monthly only (was in 2NET's PageDefault.css). */
body:has(#annual_calendar) .monthlySet { display: none; }
body:not(:has(#annual_calendar)) .yearSet { display: none; }

.breakLine {
    display: inline;
}

    .breakLine:after {
        content: "\a";
        white-space: pre;
    }

.hiddenFilters {
    display: inline-block;
}