:root { --color1-Calendario: rgba(50, 50, 50); --color2-50-Calendario: rgba(0, 0, 0, 0.2); } .boxCalendario { display: block; font-family: Arial, Helvetica, sans-serif; width: 100%; margin: 0 auto; font-size: 14px; background: #ffffff; color: #444444; } .boxCalendario .title { display: block; text-align: center; font-size: 15px; font-weight: bold; background: var(--color1-Calendario); color: #ffffff; padding: 12px 4px; } .boxCalendario .year-header, .boxCalendario .month-header { display: flex; justify-content: space-between; align-items: center; padding: 5px; } .boxCalendario .month-header { background: rgb(0, 0, 0, 0.07); } .boxCalendario .month { font-size: 17px; } .boxCalendario .year-header { color: rgb(120, 120, 120); padding-bottom: 2px; } .boxCalendario .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; border-top: 2px dotted rgb(221, 221, 221); padding: 10px 0; } .boxCalendario .days div { display: flex; justify-content: center; align-items: center; color: rgb(185, 185, 185); } .boxCalendario .days div span { display: flex; align-items: center; justify-content: center; height: 35px; width: 35px; border-radius: 50%; color: rgb(0, 0, 0); transition: background-color 0.3s; border: solid rgb(0, 0, 0, 0.01) 2px; } .boxCalendario .days div:hover span { cursor: pointer; background: #fefaae; border: solid #a4a4a4 2px; } .boxCalendario .days div.сToday span { color: #000000; border: solid rgb(0, 0, 0, 0.1) 2px; } .boxCalendario .days div.selectedDate span, .boxCalendario .days div.prevToday span { background: var(--color1-Calendario); border: solid var(--color2-50-Calendario) 2px; color: white; } .boxCalendario .days div.prevToday span { background: rgb(90, 90, 90); opacity: 0.2; cursor: no-drop; } .boxCalendario .days div.disabled span { opacity: 0.3; cursor: no-drop; background: none !important; color: rgb(65, 65, 65); } .boxCalendario .days div.сEmpty span { border: transparent; cursor: default !important; } .boxCalendario .m_Next, .boxCalendario .m_Prev, .boxCalendario .y_Next, .boxCalendario .y_Prev { display: inline-block; width: 28px; height: 25px; border: none; cursor: pointer; border-radius: 4px; } .boxCalendario .m_Prev, .boxCalendario .y_Prev { background: var(--color1-Calendario) url(https://igp.igna.site/!res1--icon--arrowleft.svg?1) center center / 80% no-repeat; } .boxCalendario .m_Next, .boxCalendario .y_Next { background: var(--color1-Calendario) url(https://igp.igna.site/!res1--icon--arrowright.svg?1) center center / 80% no-repeat; } .boxCalendario .y_Next, .boxCalendario .y_Prev { width: 0; height: 0; } .boxCalendario .m_Next:hover, .boxCalendario .y_Next:hover { border-left: 0 solid #ff6b01; } .boxCalendario .m_Prev:hover, .boxCalendario .y_Prev:hover { border-right: 0 solid #ff6b01; } td.prevToday { opacity: 0.3; cursor: default; background: #2196f3; } .fechaok { display: block; position: absolute; bottom: 40px; background: var(--color1-Calendario); padding: 10px 60px; left: 50%; transform: translateX(-50%); border: 1px dotted var(--blanco); border-radius: 4px; color: var(--blanco); }