body { 
    font-family: 'Heebo', sans-serif; 
    direction: rtl; 
    background-color: white; 
    margin: 20px; 
}

.calendar-container { 
    width: 80%; 
    background: white; 
    border-radius: 0; 
    overflow: hidden; 
    direction: rtl; 
    display: flex; 
    flex-direction: column; 
    zoom: 0.9; 
}

.container { 
    width: 80%; 
    margin: auto; 
    display: flex; 
}

.Explain-div { 
    font-size: 16px; 
    line-height: 160%; 
    width: 20%; 
    padding: 40px; 
}

.Explain-div h1 { 
    color: #9c27b0; 
    font-size: 35px; 
}

h2 {
    margin: 0;
    font-size: 30px;
}

.calendar-header { 
    background: white; 
    color: #333; 
    padding: 20px; 
    text-align: center; 
    font-size: 24px; 
    font-weight: bold; 
    border-bottom: 1px solid #ddd; 
    direction: rtl; 
}

.calendar-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 0; 
    background: white; 
    direction: rtl; 
    border: 1px solid #e0e0e0; 
    width: 100%; 
}

.day-header { 
    background: #f8f9fa; 
    color: #333; 
    padding: 8px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 14px; 
    border-left: 1px solid #e0e0e0; 
    border-bottom: 1px solid #e0e0e0; 
    direction: rtl; 
    width: 100%; 
    box-sizing: border-box; 
}

.day-header:first-child { 
    border-right: 1px solid #e0e0e0; 
}

.day-cell { 
    background: white; 
    min-height: 9vh; 
    padding: 9px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    border-left: 1px solid #e0e0e0; 
    border-bottom: 1px solid #e0e0e0; 
    position: relative; 
    direction: rtl; 
    width: 100%; 
    box-sizing: border-box; 
}

.day-cell:nth-child(7n+8) { 
    border-right: 1px solid #e0e0e0; 
}

.day-cell.other-month { 
    background: #f8f9fa; 
    color: #999; 
}

.day-cell.friday { 
    background: #e8e8e8; 
}

.day-cell.saturday { 
    background: #d0d0d0; 
}

.day-cell.today { 
    background: white; 
    border: 3px solid #00bcd4; 
    font-weight: bold; 
}

.day-cell.rosh-chodesh { 
    border-right: 4px solid #00bcd4; 
}

.day-cell.erev-holiday { 
    position: relative; 
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(76,175,80,0.3) 50%); 
}

.day-cell.erev-rosh-hashana { 
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(76,175,80,0.3) 50%); 
}

.day-cell.erev-yom-kippur { 
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(156,39,176,0.3) 50%); 
}

.day-cell.erev-sukkot { 
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(255,152,0,0.3) 50%); 
}

.day-cell.erev-simchat-torah { 
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(33,150,243,0.3) 50%); 
}

.day-cell.erev-pesach {
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(250,158,62,0.4) 50%);
}

.day-cell.erev-shavuot { 
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(0,188,212,0.3) 50%); 
}

.day-cell.erev-purim {
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(77,186,249,0.4) 50%);
}

.day-cell.erev-chanukah { 
    background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(255,238,200,0.5) 50%); 
}

.day-cell.friday.erev-rosh-hashana,
.day-cell.friday.erev-yom-kippur,
.day-cell.friday.erev-sukkot,
.day-cell.friday.erev-simchat-torah,
.day-cell.friday.erev-shavuot {
    background: linear-gradient(to left, #e8e8e8 50%, rgba(76,175,80,0.3) 50%);
}

.day-cell.friday.erev-pesach {
    background: linear-gradient(to left, #e8e8e8 50%, rgba(250,158,62,0.4) 50%);
}

.day-cell.friday.erev-purim {
    background: linear-gradient(to left, #e8e8e8 50%, rgba(77,186,249,0.4) 50%);
}

.day-cell.friday.erev-chanukah { 
    background: linear-gradient(to left, #e8e8e8 50%, rgba(255,238,200,0.5) 50%); 
}

.day-cell.saturday.erev-rosh-hashana,
.day-cell.saturday.erev-yom-kippur,
.day-cell.saturday.erev-sukkot,
.day-cell.saturday.erev-simchat-torah,
.day-cell.saturday.erev-shavuot {
    background: linear-gradient(to left, #d0d0d0 50%, rgba(76,175,80,0.3) 50%);
}

.day-cell.saturday.erev-pesach {
    background: linear-gradient(to left, #d0d0d0 50%, rgba(250,158,62,0.4) 50%);
}

.day-cell.saturday.erev-purim {
    background: linear-gradient(to left, #d0d0d0 50%, rgba(77,186,249,0.4) 50%);
}

.day-cell.saturday.erev-chanukah { 
    background: linear-gradient(to left, #d0d0d0 50%, rgba(255,238,200,0.5) 50%); 
}

.day-cell.erev-rosh-hashana .holiday-name, 
.day-cell.erev-yom-kippur .holiday-name, 
.day-cell.erev-sukkot .holiday-name, 
.day-cell.erev-simchat-torah .holiday-name,
.day-cell.erev-pesach .holiday-name,
.day-cell.erev-shavuot .holiday-name,
.day-cell.erev-purim .holiday-name,
.day-cell.erev-chanukah .holiday-name { 
    opacity: 0.8; 
}

.gregorian-date { 
    font-size: 15px; 
    font-weight: bold; 
    text-align: right; 
    width: 100%; 
    line-height: 1; 
}

.hebrew-date { 
    font-size: 11px; 
    color: #666; 
    position: absolute; 
    top: 8px; 
    left: 8px; 
}

.day-cell.friday .hebrew-date, 
.day-cell.saturday .hebrew-date { 
    color: #333; 
}

.holiday-name { 
    font-size: 10px; 
    text-align: center; 
    margin-top: auto; 
    line-height: 1.2; 
    width: 100%; 
}

.month-name { 
    font-size: 12px; 
    color: #666; 
    font-weight: bold; 
    text-align: center; 
    margin-top: 2px; 
}

.month-border-top { 
    border-top: 1px solid #333 !important; 
}

.month-border-bottom { 
    border-bottom: 1px solid #333 !important; 
}

.month-border-right { 
    border-right: 1px solid #333 !important; 
}

.print-button { 
    padding: 10px 20px; 
    font-size: 16px; 
    background: none; 
    border: 2px solid #000; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}

.print-button:hover { 
    background: #000; 
    color: #fff; 
}

@media screen and (min-width: 1024px) { 
    .calendar-container { 
        max-width: 950px; 
        margin-right: 50px; 
    } 
}

@media (max-width: 768px) { 
    .container { 
        width: 100%; 
        display: flex; 
        flex-direction: column; 
    }
    
    .Explain-div {
        width: 100%; 
        padding: 0;
    }
    
    .calendar-container {
        width: 100%;
    }
}

@media print { 
    .Explain-div { 
        display: none; 
    } 
    
    .container { 
        width: 100%; 
    } 
    
    .calendar-container { 
        width: 100%; 
    } 
}