body, html { margin:0; padding:0; height: 100%; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { background-color: #d4d9dd; font-family: "Inter", "Lucida Grande", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; line-height: 1.6; color: #2D2D2D; } p { margin: 8px 0 20px; } p.br { padding-top: 18px; } b,strong { font-weight: 600; } em { font-style: italic; } h1,h2 { font-family: "Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; line-height: 1.2em; letter-spacing: -0.02em; } h1 { font-size:2.4rem; color:#882222; padding-bottom:10px; margin-bottom:14px; border-bottom: 1px solid #ddd; } .dark h1 { color: #C36460; border-bottom: 1px solid #333;} .dark h2, .dark h3 { color: #e0e0e0;} .dark body { background-color: #121212; color: #e8e8e8; } #maincontainer, #contentwrapper, #rightcolumn { background-color: #ffffff; } #maincontainer { max-width: 1360px; min-height: 100%; width: 90%; /* fallback */ width: calc(100% - 52px); margin: 0 auto; border: 1px solid #949494; border-top: 10px solid #333333; padding: 0 14px; box-shadow: 0 0 12px #b4b4b4; border-radius: 0 0 5px 5px; position: relative; } #topsection{ padding-bottom:10px; padding-top:18px; min-height: 150px; } #topsection h1 { margin: 0; padding-top: 30px; min-height: 38px; } #contentwrapper { float: left; width: 100%; } .dark #maincontainer, .dark #contentwrapper, .dark #rightcolumn { background-color:#161616; box-shadow: none; border: 0; } .dark #maincontainer { border-top: 10px solid #161616; } #contentcolumn{ margin-right: 210px; /*Set right margin to RightColumnWidth*/ } #contentcolumn .innertube{ clear:both; } #rightcolumn { float: left; width: 210px; /*Width of right column*/ margin-left: -210px; /*Set left margin to -(RightColumnWidth) */ position: relative; } .hidemenu {display:none;} #footer{ clear: left; width: 100%; text-align: center; padding: 20px 0 20px 0; } .innertube{ margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; } .clear {clear:both;} img {border:0;} td img {vertical-align:middle} table,tr,td { padding:0;margin:0;border:0; } table { border-collapse: collapse; border-spacing: 0; } table.tool {float:left;} table.tool td { white-space: nowrap; } body.rtl table.tool { float: right; } table.syntaxtable { display:none; } table.syntaxtable td { padding:2px; padding-right:5px; } table.fixed { table-layout:fixed; } table.infotable td, table.infotable th { vertical-align:top; padding:4px; border:1px solid #c0c0c0; } table.infotable th {background-color:#eeeeee; text-align:left; font-weight:600;} .dark table.infotable th {background-color:#222;} td.top, th.top { vertical-align:top; } td.right, th.right, table.infotable th.right { text-align:right; } tr.bold td {font-weight:600;} tr.comment td {font-style:italic;text-align:center;} div.right-2nd-cell table td + td, div.right-2nd-cell table th + th { text-align:right; } /* freeze-sort tables */ div.ectable { display:inline-block; min-width:90%; } div.ectable.table-small {min-width:50%;} div.ectable.fullwidth {width:100%;} div.ectable table {width:100%;} th.ts i {padding-left:5px;} th.ts {cursor:pointer;} div.ectable table.infotable tbody tr:nth-child(even) { background-color: #f8f8f8; } div.ectable table.infotable tbody tr:hover { background-color: #fff9cb; } .dark div.ectable table.infotable tbody tr:nth-child(even) { background-color: #222; } .dark div.ectable table.infotable tbody tr:hover { background-color: #26497C; } .dark table.infotable td, .dark table.infotable th { border-color: #111;} div.lastsub {padding-bottom:10px;} label input { border:1px solid #ffffff; } .resultbox { min-height:26px; line-height: 1.6; } #result1 {min-height:45px; } .ampm,.pref-tz { margin-left: 4px; } body.rtl .ampm, body.rtl .pref-tz { margin-left: 0; margin-right: 4px; } .warning, .error { font-weight:600; color:#8b0000; } .epochwarn { font-weight:600; color:#b35a00; } .dark .warning, .dark .error, .dark .epochwarn { color:#C36460; } h2 { font-size:1.65rem; color:#123968; margin-bottom:14px; margin-top:46px; padding:0; } #rightcolumn h2 {background:none;text-indent:0;} h2.first, p.first, h2#efhead { padding-top:0; margin-top:0;} h3 { font-size: 1.2em; font-weight: 500; padding: 15px 0 0; margin: 15px 0; } span.logo { height:40px; width:250px; background-position:left; background-repeat:no-repeat; background-size:contain; display:inline-block; background-image: url("/img/epochconverter-2026.svg?v=5"); text-indent: -9999px; margin: 10px 0 10px 0; } .dark span.logo {filter: invert(90%);} a.logo { display: inline-block; line-height: 0; padding: 0; margin: 0; vertical-align: top; } pre,code {font-family: Consolas,monospace; } code {background-color:#f0f0f0;} pre {white-space: pre-wrap;} pre, pre code {background-color:#fafafa;} .dark code, .dark pre {background-color:#1c1c1c;} a { color: #21759a; text-decoration: none; } #contentcolumn a { text-decoration: underline; text-underline-offset: 2px; } a.nounderline { text-decoration: none; } a:active, a:hover { color: #6B1717; } a.bolder { font-weight: 600; } a.nocolor, a i.fa { color: #444; } a i.fa.blue { color: #21759a; } a.currentpage { color: #222222; } a.currentpage::after { content: '\2022'; padding-left: 5px; color: #882222; } .dark a { color: #7ab3e8; } .dark a:active, .dark a:hover { color: #a8d0f8; } .dark a.nocolor, .dark a i.fa { color: #e8e8e8; } .dark a.currentpage { color: #f0f0f0; } .dark a.currentpage::after { color: #C36460; } div.links a { display:inline-block; padding: 1px 0; } #rightcolumn h3, #rightcolumn h4 { font-size: 1.05em; font-weight:600; padding:4px 0 2px 0; margin: 20px 0 0 0; } #rightcolumn .links { padding-left: 0; } #timebox { width:180px;border:1px solid #333333; text-align:center; } #timebox b { color:#6B1717; } .small,#footer { font-size:0.9em; } .highlight, .highlightbox { display: block; text-align: center; padding: 14px 18px; border-radius: 10px; border: 1px solid rgba(0,61,93,0.12); margin: 0 0 20px 0; color: #0b1a26; background: #f8f8f8; box-shadow: 0 3px 8px rgba(16,24,32,0.04); backdrop-filter: blur(2px); } .highlight h3, .highlightbox h3 { font-size:28px; font-weight:600; margin:0; color:inherit; letter-spacing:-0.4px; padding:5px; } .highlight { /* legacy/light accent variant */ background: linear-gradient(180deg, #e9f3ff 0%, #d7eaff 100%); } .dark .highlight, .dark .highlight h3 { color: #eee; } .dark .highlightbox { background: #1c1c1c; border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 3px 8px rgba(0,0,0,0.35); color: #e8eef6; } .dark .highlightbox h3 { color: #fff; } .year-progress-wrap { margin: 0 0 20px 0; } .year-progress-bar { background: #f8f8f8; border: 1px solid rgba(0,61,93,0.12); border-radius: 6px; height: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(16,24,32,0.04); } .year-progress-fill { height: 100%; background: #123968; border-radius: 5px; } .year-progress-ticks { display: flex; justify-content: space-between; font-size: max(0.78em, 13px); color: #666; margin-top: 4px; } .year-progress-pct { font-weight: 600; color: #444; } .dark .year-progress-bar { background: #1c1c1c; border-color: rgba(255,255,255,0.04); box-shadow: none; } .dark .year-progress-fill { background: #345e8f; } .dark .year-progress-ticks { color: #999; } .dark .year-progress-pct { color: #e0e0e0; } .inline { display: inline; } .refresh-lists { display: inline-block; transition: transform .2s ease, color .2s ease; } .refresh-lists:hover { color: #6B1717; transform: rotate(-25deg); } .refresh-lists.is-refreshing { animation: tl-refresh-spin .45s ease; } .dark .refresh-lists:hover { color: rgb(210, 110, 105); } @keyframes tl-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .date-input-wrap { display: flex; flex-wrap: wrap; align-items: flex-end; } .date-input-wrap table.tool { float: none; margin-right: 5px; } .date-input-wrap table.tool-hr { float: none; margin-right: -1px; } input[type=button], input[type=submit], input[type=text], select, button, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #aaa; font-family: "Inter", sans-serif; font-optical-sizing: auto; letter-spacing: -0.02em; font-size: 1.05em; color: #111; padding: 4px 8px; margin: 3px 0; line-height: normal; height: 34px; border-radius: 6px; box-shadow: 1px 1px 2px #ddd; vertical-align: middle; box-sizing: border-box; } textarea { box-shadow: none; height: auto; } .dark input, .dark button, .dark select, .dark textarea { background-color: #0c0c0c; color: #dddddd; box-shadow: none; border: 1px solid #262626; } .dark textarea { background-color: #222; } input[type=button], input[type=submit], button { border-radius: 6px; background-color: #eeeeee; cursor: pointer; } input:focus, button:focus, select:focus { border: 1px solid #666; box-shadow: 0 0 2px #777; } input.button, button.button, button.button-red { border: 1px solid #0b2544; background-color: #123968; background-image: linear-gradient(to bottom, #1d4b82 0%, #123968 100%); color: #ffffff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: all 0.15s ease; cursor: pointer; white-space: normal; padding-left: 12px; padding-right: 12px; height: auto; min-height: 34px; border-radius: 6px; } button.button-red { background-color: #882222; background-image: linear-gradient(to bottom, #9e2a2a 0%, #882222 100%); border: 1px solid #5c1414; } input.button:hover, button.active:hover, button.button:hover { border-color: #05162a; background-image: linear-gradient(to bottom, #123968 0%, #0b2544 100%); } button.active-red:hover, button.button-red:hover { border-color: #4a0d0d; background-image: linear-gradient(to bottom, #882222 0%, #6b1616 100%); } .dark input.button, .dark button.button { background-color: #345e8f; background-image: linear-gradient(to bottom, #4a7fb9 0%, #345e8f 100%); color: #ffffff; border: 1px solid #1e3b5e; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .dark button.button-red, .dark button.active-red { color: #ffffff; height: 36px; padding: 0 16px; border-radius: 6px; background-color: #c36460; background-image: linear-gradient(to bottom, #d47a76 0%, #c36460 100%); border: 1px solid #8c4542; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: all 0.15s ease-in-out; cursor: pointer; } .dark button.button-red:hover, .dark button.active-red:hover { background-image: linear-gradient(to bottom, #c36460 0%, #b0524f 100%); border-color: #803734; } .dark button.button-red:focus, .dark button.active-red:focus { outline: none; border-color: #e28782; box-shadow: 0 0 0 3px rgba(226, 135, 130, 0.25); } .dark input.button:hover, .dark button.button:hover, .dark button.active:hover { background-image: linear-gradient(to bottom, #345e8f 0%, #274b74 100%); border-color: #1a3554; } .dark input.button:focus, .dark button.button:focus, .dark button.active:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 251, 0.25); } input[type="text"]:disabled { color: #888; background-color: #e6e6e6; border-color: #e0e0ef; box-shadow: none; } .dark input[type="text"]:disabled { color: #444; background-color: transparent; border-color: transparent; box-shadow: none; } input.dateform { width: 4ch; box-sizing: border-box; text-align: center; } input.year { width: 6ch; box-sizing: border-box; text-align: center; } form div {padding-top:7px;} form#hf {padding-top:20px;} input[type="radio"], input[type="check"], select, label { cursor: pointer; } input[type="radio"], input[type="check"] { box-shadow: none; margin-right: 4px; } button.show-comments { margin-top: 20px; padding: 6px 40px 6px 40px; cursor: pointer; box-shadow: none; } select { background: transparent; background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>'); background-repeat: no-repeat; background-position: right 6px center; padding-right: 24px !important; } .dark select { background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="%23ddd" d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>'); } input[type="radio"], input[type="checkbox"] { accent-color: #123968; } tr.date-tbl-head td { font-size: 0.9em; } tr.date-tbl-body input, tr.date-tbl-body select, tr.date-tbl-body button { margin-top:0; } hr.lefthr { border: none; border-top: 1px dashed #888; max-width: 500px; height: 1px; text-align: left;/*this will align it for IE*/ margin: 6px auto 20px 0; /*this will align it left for Mozilla*/ } body.rtl hr.lefthr { text-align: right; margin: 6px 0 20px auto; } .help[title] {cursor: help;} tr.otherYear {color:#727272;} tr.currentWeek, tr.currentDay { font-size:1.2em; background-color: #fff9cb !important; } .dark tr.currentWeek, .dark tr.currentDay { background-color: #a65652 !important; } td.numbers, th.numbers, table.infotable th.numbers {text-align:right;} .nowrap { white-space: nowrap; } a.current { font-weight:600; font-size:1.3em; } div.menu h3, div.menu h4 { cursor:pointer; } div.menu-closed .links { display:none; } div.menu-open .links { display:block; } p.syntaxtoggle { margin: 8px 0 12px; } p.syntaxtoggle a { border-bottom: 0; display: inline-block; color: inherit; font-weight: 600; cursor: pointer; } p.syntaxtoggle a i.fa { color: inherit; } /* CLOCK SMALL */ #ecclock,.ecclock { display:inline-block; text-align: center; padding: 8px 10px; border-radius: 6px; border: 1px solid #cccccc; margin:0; font-size:1.2em; font-weight: 600; background-color:#f5f5f5; background-image: linear-gradient(to bottom,#f5f5f5 0%,#ebebeb 100%); color: #333; line-height: normal; font-variant-numeric: tabular-nums; } #ecclock { min-width: 110px; cursor: pointer; } .clocknotice-btn { background: transparent; border: none !important; padding: 0 5px 10px 5px; cursor: pointer; color: #767676; font-size: 1.2em; box-shadow: none; vertical-align: middle; line-height: normal; -webkit-tap-highlight-color: transparent; } .clocknotice-btn:hover, .clocknotice-btn:focus, .clocknotice-btn:active { color: #333; box-shadow: none; } .clock-container { position: relative; display: inline-block; vertical-align: middle; } #precision-panel { position: absolute; top: 100%; left: 0; margin-top: 5px; padding: 8px 12px; border: 1px solid #cccccc; border-radius: 6px; background-color: #f5f5f5; background-image: linear-gradient(to bottom, #f5f5f5 0%, #ebebeb 100%); display: flex; flex-direction: column; gap: 2px; line-height: 1.3; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: fit-content; z-index: 10; white-space: nowrap; } .precision-row { display: flex; align-items: center; justify-content: space-between; } .precision-label { font-weight: 600; min-width: 120px; text-align: left; } .precision-val { flex-grow: 1; text-align: left; padding: 0 10px; min-width: 200px; } .copy-btn { padding: 4px; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; opacity: 0.7; vertical-align: middle; margin-top: -2px; } .copy-btn:hover { background: transparent; opacity: 1; } .copy-btn.copied { opacity: 1; } .copy-btn.mini { padding: 0 3px; margin-top: -2px; font-size: 10px; line-height: normal; vertical-align: middle; border: 0 !important; background: transparent !important; border-radius: 2px; height: 14px; display: inline-flex; align-items: center; } .copy-btn.mini i { font-size: 9px; } .dark .clocknotice-btn { color: #aaa; background: none !important; } .dark .clocknotice-btn:hover { color: #fff; background: none !important; } .dark #precision-panel { background-image: none; background-color: #3a3a3a; border-color: #4a4a4a; box-shadow: none; } .dark .precision-label { color: #ccc; } .dark .copy-btn { background: transparent !important; box-shadow: none !important; border: 0 !important; } .dark .copy-btn:hover { background: transparent; color: #fff; } .dark .copy-btn.copied { opacity: 1; transform: scale(1.2); } #clocknotice,.clocknotice { padding-left:9px; display:inline; color: #767676; user-select: none; } .dark #ecclock, .dark .ecclock { background-image: none; background-color: #3a3a3a; color: #e8e8e8; border: 1px solid #4a4a4a; } /* homepage table */ td.proglang {font-weight:600;width:120px;vertical-align:top} td.progcode {vertical-align:top} /* homepage only */ #br td {vertical-align:middle} #br label {padding-left:7px;padding-right:7px;} #br-d3 span.datesep {padding:0;} .topbtn i.fa { padding-top: 6px; padding-bottom: 7px; background-color: #f6f6f6; margin-top: 6px; border-radius: 50%; } .topbtn i.fa:hover { background-color: #e6e6e6; } .topbtn { display:none;margin-top: 14px;} /* only mobile */ .long .topbtn {display:block;} .dark .topbtn i.fa { color: #666; border:0;} .footer-links {padding-top:5px;} #mobilelink, #mobilemenulink, button.close { display:none; } /* Flex wrapper keeps visual order = DOM order = tab order (Preferences left, Menu right) */ #header-buttons { float: right; display: flex; flex-direction: row; align-items: flex-start; margin-top: 10px; margin-right: 10px; gap: 5px; } #settingslink { display: block; } #mobilemenulink button, #settingslink button { border: 0; box-shadow: none; background-color: #eeeeee; color: #333333; font-size:20px; padding: 5px 12px 5px 12px; line-height: 1; height: 36px; min-width: 42px; } #settingslink button { font-weight: 600; } #mobilemenulink button:focus-visible, #settingslink button:focus-visible { outline: 2px solid #21759a; outline-offset: 2px; } .dark #mobilemenulink button:focus-visible, .dark #settingslink button:focus-visible { outline-color: #86B9EC; } .dark #mobilemenulink button, .dark #settingslink button { background-color: #333333; color: #dddddd; border-color: #222222; box-shadow: none; } #settingspanel { display: none; position: fixed; right: 0; width: 340px; top: 0; bottom: 0; z-index: 110; box-shadow: 0px 0px 15px black; background: white; padding: 10px; overflow-y: auto; } .dark #settingspanel { background: #222222; } #settingspanel .innertube { position: relative; margin:5px; } #settingspanel h2 { padding-top:14px; margin-top:0; } #settingspanel h3 { margin-top:14px; margin-bottom:6px; } #settingspanel .menu h3 { font-size: inherit; font-weight: 600; padding: 14px 0 5px 0; margin: 0; cursor: pointer; } #settingspanel select { width: 100%; } #settingspanel .settings-radios { margin-top: 6px; } #settingspanel label { display: inline-block; padding: 0 0 2px 0; } #settingspanel input[type="radio"], #settingspanel input[type="checkbox"] { position: relative; top: -2px; margin-right:4px; } #settingspanel a.settings-theme-toggle { display:inline-block; margin-top:2px; } #settingspanel fieldset.settings-radios { border: 0; padding: 0; margin: 0; } #settingspanel legend { padding:14px 0 5px 0; margin: 0; font-weight: 600; } body.settings-open { overflow: hidden; } button.close, button.settings-close { position:relative; left:5px; top:10px; width:20px !important; height:20px !important; background-image:url("/img/close-button.svg?v=2"); background-repeat:no-repeat; background-size: cover; background-color: transparent; border: 0; padding: 0; cursor: pointer; } button.settings-close { display: block; } .dark button.close, .dark button.settings-close { filter: invert(1); box-shadow: none; } /* fa-gear (Font Awesome 7.2 Free solid) */ .btn-settings { display: inline-block; width: 21px; height: 21px; vertical-align: -6px; margin-left: 6px; margin-right: 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M259.1 73.5C262.1 58.7 275.2 48 290.4 48L350.2 48C365.4 48 378.5 58.7 381.5 73.5L396 143.5C410.1 149.5 423.3 157.2 435.3 166.3L503.1 143.8C517.5 139 533.3 145 540.9 158.2L570.8 210C578.4 223.2 575.7 239.8 564.3 249.9L511 297.3C511.9 304.7 512.3 312.3 512.3 320C512.3 327.7 511.8 335.3 511 342.7L564.4 390.2C575.8 400.3 578.4 417 570.9 430.1L541 481.9C533.4 495 517.6 501.1 503.2 496.3L435.4 473.8C423.3 482.9 410.1 490.5 396.1 496.6L381.7 566.5C378.6 581.4 365.5 592 350.4 592L290.6 592C275.4 592 262.3 581.3 259.3 566.5L244.9 496.6C230.8 490.6 217.7 482.9 205.6 473.8L137.5 496.3C123.1 501.1 107.3 495.1 99.7 481.9L69.8 430.1C62.2 416.9 64.9 400.3 76.3 390.2L129.7 342.7C128.8 335.3 128.4 327.7 128.4 320C128.4 312.3 128.9 304.7 129.7 297.3L76.3 249.8C64.9 239.7 62.3 223 69.8 209.9L99.7 158.1C107.3 144.9 123.1 138.9 137.5 143.7L205.3 166.2C217.4 157.1 230.6 149.5 244.6 143.4L259.1 73.5zM320.3 400C364.5 399.8 400.2 363.9 400 319.7C399.8 275.5 363.9 239.8 319.7 240C275.5 240.2 239.8 276.1 240 320.3C240.2 364.5 276.1 400.2 320.3 400z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover; background-color: transparent; border: 0; padding: 0; cursor: pointer; opacity: 0.6; text-decoration: none; } button.btn-settings { background-size: 21px 21px; background-position: center; vertical-align: middle; background-color: #eeeeee; opacity: 0.9; } .btn-settings:hover { opacity: 1; } .dark .btn-settings { filter: invert(90%); } .dark button.btn-settings { background-color: #333333; filter: none; opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath fill='%23dddddd' d='M259.1 73.5C262.1 58.7 275.2 48 290.4 48L350.2 48C365.4 48 378.5 58.7 381.5 73.5L396 143.5C410.1 149.5 423.3 157.2 435.3 166.3L503.1 143.8C517.5 139 533.3 145 540.9 158.2L570.8 210C578.4 223.2 575.7 239.8 564.3 249.9L511 297.3C511.9 304.7 512.3 312.3 512.3 320C512.3 327.7 511.8 335.3 511 342.7L564.4 390.2C575.8 400.3 578.4 417 570.9 430.1L541 481.9C533.4 495 517.6 501.1 503.2 496.3L435.4 473.8C423.3 482.9 410.1 490.5 396.1 496.6L381.7 566.5C378.6 581.4 365.5 592 350.4 592L290.6 592C275.4 592 262.3 581.3 259.3 566.5L244.9 496.6C230.8 490.6 217.7 482.9 205.6 473.8L137.5 496.3C123.1 501.1 107.3 495.1 99.7 481.9L69.8 430.1C62.2 416.9 64.9 400.3 76.3 390.2L129.7 342.7C128.8 335.3 128.4 327.7 128.4 320C128.4 312.3 128.9 304.7 129.7 297.3L76.3 249.8C64.9 239.7 62.3 223 69.8 209.9L99.7 158.1C107.3 144.9 123.1 138.9 137.5 143.7L205.3 166.2C217.4 157.1 230.6 149.5 244.6 143.4L259.1 73.5zM320.3 400C364.5 399.8 400.2 363.9 400 319.7C399.8 275.5 363.9 239.8 319.7 240C275.5 240.2 239.8 276.1 240 320.3C240.2 364.5 276.1 400.2 320.3 400z'/%3E%3C/svg%3E"); } .spacing { margin-left: 6px; } body.sidebar-hidden #rightcolumn { display: none !important; } body.sidebar-hidden #contentcolumn { margin-right: 0 !important; } .floatingHeader { position: fixed; top: 0; visibility: hidden; border-collapse: collapse; border-spacing: 0; } .mobileonly {display:none;} .desktoponly {display:inline;} td.desktoponly, th.desktoponly {display:table-cell;} kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.82em; font-weight: 600; color: #334155; white-space: nowrap; padding: 1.5px 5px; border-radius: 4px; background-color: #f1f5f9; border: 1px solid #cbd5e1; border-bottom: 2px solid #94a3b8; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); cursor: pointer; } .dark kbd { background-color: #262626; color: #e2e8f0; border: 1px solid #404040; border-bottom: 2px solid #525252; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); } kbd:hover { background-color: #e2e8f0; border-bottom-width: 1px; margin-top: 1px; } .dark kbd:hover { background-color: #333333; border-bottom-width: 1px; } .utcal { display:inline-block; min-width:140px; } span.datesep { padding: 0 4px 0 4px; } .dark .hidedark {display:none;} .dark .hljs { color: #666; } /* cookie consent */ body .cc-revoke, body .cc-window { font-size:15px; line-height:1.3em; } body .cc-window {border: 1px solid #bbbbbb;} body .cc-btn {height: inherit !important;} #responsive { content:"L"; z-index: 3; position: absolute; top: -999em; left: -999em; } .fa{display:inline-block;vertical-align: sub;} .dark .fa{ filter: invert(90%); } .fa-fw{width:1.28571429em;text-align:center} .fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%} .fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em} .fa-sun-o:before { vertical-align: 1px; content: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1472 896q0-117-45.5-223.5t-123-184-184-123-223.5-45.5-223.5 45.5-184 123-123 184-45.5 223.5 45.5 223.5 123 184 184 123 223.5 45.5 223.5-45.5 184-123 123-184 45.5-223.5zm276 277q-4 15-20 20l-292 96v306q0 16-13 26-15 10-29 4l-292-94-180 248q-10 13-26 13t-26-13l-180-248-292 94q-14 6-29-4-13-10-13-26v-306l-292-96q-16-5-20-20-5-17 4-29l180-248-180-248q-9-13-4-29 4-15 20-20l292-96v-306q0-16 13-26 15-10 29-4l292 94 180-248q9-12 26-12t26 12l180 248 292-94q14-6 29 4 13 10 13 26v306l292 96q16 5 20 20 5 16-4 29l-180 248 180 248q9 12 4 29z"/></svg>'); } .fa-moon-o:before { vertical-align: 1px; content: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1390 1303q-54 9-110 9-182 0-337-90t-245-245-90-337q0-192 104-357-201 60-328.5 229t-127.5 384q0 130 51 248.5t136.5 204 204 136.5 248.5 51q144 0 273.5-61.5t220.5-171.5zm203-85q-94 203-283.5 324.5t-413.5 121.5q-156 0-298-61t-245-164-164-245-61-298q0-153 57.5-292.5t156-241.5 235.5-164.5 290-68.5q44-2 61 39 18 41-15 72-86 78-131.5 181.5t-45.5 218.5q0 148 73 273t198 198 273 73q118 0 228-51 41-18 72 13 14 14 17.5 34t-4.5 38z"/></svg>'); } .fa-adjust:before { vertical-align: 1px; content: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"/></svg>'); } .fa-arrow-up:before { content: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1675 971q0 51-37 90l-75 75q-38 38-91 38-54 0-90-38l-294-293v704q0 52-37.5 84.5t-90.5 32.5h-128q-53 0-90.5-32.5t-37.5-84.5v-704l-294 293q-36 38-90 38t-90-38l-75-75q-38-38-38-90 0-53 38-91l651-651q35-37 90-37 54 0 91 37l651 651q37 39 37 91z"/></svg>'); } .fa-copy { content: url('data:image/svg+xml;utf8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l133.5 0c4.2 0 8.3 1.7 11.3 4.7l58.5 58.5c3 3 4.7 7.1 4.7 11.3L400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-197.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-16-48 0 0 16c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l16 0 0-48-16 0z"/></svg>'); } .fa-check { content: url('data:image/svg+xml;utf8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>'); } .fa-angle-up { content: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>'); } .fa-angle-down { content: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>'); } .fa-redo { content: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.16 247.16 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"/></svg>'); } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0} .sr-only-focusable:active,.sr-only-focusable:focus{ position: fixed; left: 12px; top: 12px; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; padding: 8px 12px; background: #ffffff; color: #21759a; border: 2px solid #123968; border-radius: 20px; box-shadow: 0 2px 2px rgba(0,0,0,0.18); z-index: 9999; text-decoration: none; } /* IOS Safari */ select, button, input { color: #000000; } .dark select, .dark button, .dark input { color: #d6d6d6; } a.external::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 0.18em; vertical-align: middle; transform: translateY(-1px); background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20fill='currentColor'%20d='M6%201h5v5L8.86%203.85%204.7%208%204%207.3l4.15-4.16zM2%203h2v1H2v6h6V8h1v2a1%201%200%200%201-1%201H2a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1'/%3E%3C/svg%3E"); color: inherit; background-repeat: no-repeat; background-size: 12px 12px; background-position: center; pointer-events: none; } .dark a.external::after { filter: invert(90%); } a:focus-visible:not(.sr-only-focusable) { outline: 3px solid #21759a; outline-offset: 2px; } .dark a:focus-visible { outline-color: #86B9EC; } /* Remove focus outline from content wrapper */ #contentwrapper:focus { outline: none !important; box-shadow: none !important; } /* Large text mode: apply to body and tables for better readability */ body.ltext,body.ltext th,body.ltext td { font-size: 16.5px; line-height: 1.6; word-spacing: 0.1em; } /* Extra large text mode */ body.xltext,body.xltext th,body.xltext td { font-size: 17px; line-height: 1.8; word-spacing: 0.15em; } body.xltext #dayoff_unit, body.xltext #dayoff_unit { height:50px; } body.ltext button, body.ltext input, body.ltext select { min-height:38px; height:auto; } body.xltext button, body.xltext input, body.xltext select { min-height:50px; height:auto; } @media (max-width: 600px) { body.ltext,body.ltext th,body.ltext td, body.xltext,body.xltext th,body.xltext td { font-size: 18px; } } /* Icon-only reset link (mobile) */ .link-reset { display: none; width: 21px; height: 21px; vertical-align: -6px; margin-left: 6px; margin-right: 0px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' width='24' height='24' fill='%23000000'%3E%3Cpath d='M576 128c0-35.3-28.7-64-64-64H205.3c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3L160 429.3c12 12 28.3 18.7 45.3 18.7H512c35.3 0 64-28.7 64-64V128zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: cover; background-color: transparent; border: 0; padding: 0; cursor: pointer; opacity: 0.6; text-decoration: none; } .link-reset:hover { opacity: 1; } .dark .link-reset { filter: invert(85%); } .link-reset:focus-visible { outline: 2px solid #21759a; outline-offset: 2px; } .link-reset:active, .link-reset:focus:active { outline: none; } .link-reset:focus:not(:focus-visible) { outline: none; } /* =========================== ====== Media Queries ====== =========================== */ @media only screen and (min-width: 0px) and (max-width: 920px){ #responsive {content:"M"; z-index: 2;} #maincontainer {width: calc(100% - 48px); border-top:0; } .dark #maincontainer { border-top: 0; } #topsection { padding-top: 18px; } #mobilelink {display:block;} #mobilemenulink { display: block; } body.sidebar-hidden #mobilemenulink { display: none !important; } #rightcolumn { display: none; position: absolute; right: 0; width: 220px; top: 0; z-index:100; box-shadow: 0px 0px 15px black; background: white; padding: 10px; padding-bottom:0; transform-origin: 100% 50%; transition: transform 0.2s ease-in-out; outline: 0; min-height:100%; } .dark #rightcolumn {background:#222222;} #rightcolumn .innertube {height:100%;position: relative; padding-bottom:0; } #rightcolumn h2 {padding-top:14px; margin-top:0;} #rightcolumn .firstsub { border:0; padding-top:10px; padding-left:0; } #contentcolumn {margin-right:0;} div.lastsub {padding-bottom:0;} .innertube{margin:5px; margin-top:0;} table.tool td {white-space:normal;} table.tool.date-input td, table.tool.time-input td, table.tool.extra-input td {white-space:nowrap;} button.close { display:block; } .mobileonly { display: inline; } .desktoponly, td.desktoponly, th.desktoponly { display: none; } .socialcount { display: none; } td, pre { word-break: break-all; } .infotable td {word-break: normal;} .biggerlinks a, a.biggerlinks {display:inline-block; margin:6px;} input,textarea,select {max-width: 95% !important;} } @media only screen and (max-width: 478px) { #ecclock { display:inline-block !important; font-size:1.3em; margin:0; } .clocknotice-btn { display:inline-block !important; padding: 0 5px 10px 5px; } #precision-panel { width: 280px; left: 0; right: auto; white-space: nowrap; } .precision-row { flex-wrap: wrap; justify-content: flex-start; gap: 2px; padding-bottom: 5px; border-bottom: 1px solid rgba(0,0,0,0.05); } .precision-row:last-child { border-bottom: none; } .precision-label { width: 100%; font-size: 0.85em; margin-bottom: 2px; color: #666; } .precision-val { font-size: 1.1em; padding: 0; word-break: break-all; font-family: monospace; font-weight: bold; } div.clocknotice {display:none !important;} tr.currentWeek, tr.currentDay {font-size:1.0em;} .infotable.wrapmobile td, .infotable.wrapmobile th {word-break: break-all;} .hidexs {display:none;} h2 {min-height:56px;} h1 {min-height:74px;} } @media only screen and (max-width: 746px) { #responsive {content:"S"; z-index:1;} body {background: #ffffff; } #contentwrapper { -webkit-text-size-adjust:110%; } #footer { -webkit-text-size-adjust:100% } #maincontainer{ width:auto; padding:0 6px 0 6px; border:0; box-shadow:none; } div.ad_keywords {display:none; } .hidemobile {display:none;} #rightcolumn .sub { border:0;padding-left:10px; width:auto; } table.infotable {width:auto;} #EpochClock { font-size:60px !important; } #Time {font-size: 26px !important;} #earlyyears a {display:inline-block; margin:4px;} table.syntaxtable td {display: table-row;} table.syntaxtable td.progcode {border-bottom:10px solid transparent;} .utcal { min-width:auto; } #topsection{ min-height:172px;} h2#efhead {min-height:56px;} .cal-toggle { font-size: 1em; } .clock-container { display: block !important; margin-top:10px; } } @media only screen and (min-width: 1200px) { #responsive {content:"XL"; z-index:4;} body { font-size:16px; /* upped from font-size:1.05rem; */ } #maincontainer{ padding: 0 48px 0 48px; box-shadow: 0px 0px 12px #b4b4b4; width: calc(100% - 120px); } #contentcolumn { margin-right: 250px; } #rightcolumn { margin-left:-240px; width:240px; } td.proglang { width:160px; } form div.clear { padding-top:15px; } } @media only screen and (min-width: 1340px) { #responsive {content:"XXL"; z-index:5;} #maincontainer{ padding: 0 58px 0 58px; width: calc(100% - 160px); } #contentcolumn {margin-right: 360px;} #rightcolumn { margin-left:-310px; /* 280 */ width:310px; } td.proglang {width:180px;} } @media all and (min-width: 747px){ table.syntaxtable { display: table; } } /* =========================== =========== Ads =========== =========================== */ div.ad_code { padding:10px 0 0 0; margin:0; width:100%; max-width:100%; } div.ad_code>div { display: inline-block; } div.ad_center { margin:auto; text-align:center; } div.ad_rightbar { padding-top: 20px; } .bnr_full, .bnr_content, .bnr_right, .bnr_right_long { display: inline-block; vertical-align: top; } .bnr_full, .bnr_content { width: 234px; height: 60px; } .bnr_right { width: 125px; height: 240px; } /* 125x125 or 120x240 */ .bnr_right_long { width: 160px; height: 600px; } /* hidden for small screens */ @media (max-width:920px) { .bnr_right, .bnr_right_long, body.charset div.ad_rightbar { display: none !important; } } @media (min-width:370px) { .bnr_full, .bnr_content { width: 320px; height: 100px; } } @media (min-width:510px) { .bnr_full, .bnr_content { width: 468px; height: 100px; } } @media (min-width:820px) { .bnr_full { width: 728px; height: 90px; } } @media (min-width:1024px), (min-width:820px) and (max-width:920px) { .bnr_content { width: 728px; height: 90px; } } @media (min-width:1064px) { .bnr_full { width: 970px; height: 90px; } } @media (min-width:1340px) { .bnr_right { width: 300px; height: 250px; } .bnr_right_long { width: 300px; height: 600px; } } @media (min-width:1500px) { .bnr_content { width: 970px; height: 90px; } } /* RTL overrides: apply when the page uses<body class="rtl">*/ body.rtl, html.rtl { direction: rtl; } body.rtl td.right, body.rtl th.right, body.rtl table.infotable th.right { text-align:left; } body.rtl td.numbers, body.rtl th.numbers, body.rtl table.infotable th.numbers { text-align: left; } body.rtl .highlight, body.rtl .highlightbox { text-align: center; } body.rtl table th { text-align: right; } body.rtl span.logo { background-position: right; } body.rtl select { background-position: left 6px center; padding-left: 20px !important; padding-right: 5px !important; } body.rtl .dark select { background-position-x: 0% !important; } body.rtl a.currentpage::after { padding-left: 0; padding-right: 5px; } body.rtl #footer { text-align: center; } body.rtl .links a { display: inline-block; } body.rtl #result1, body.rtl #result2, body.rtl #result3, body.rtl #result4, body.rtl #resultbe, body.rtl .instruction { text-align: right; unicode-bidi: plaintext; } body.rtl .cal-toggle-group .cal-toggle:not(:first-child) { margin-left: 0; margin-right: -1px; } body.rtl .cal-toggle:first-child { border-radius: 0 4px 4px 0; } body.rtl .cal-toggle:last-child { border-radius: 4px 0 0 4px; } /* Code examples: always LTR regardless of page direction */ body.rtl td.progcode, body.rtl td.progcode code { direction: ltr; unicode-bidi: embed; text-align: left; } /* RTL mobile: no reserved right-column space; right column overlays via JS */ @media only screen and (max-width: 920px) { body.rtl #contentcolumn { margin-right: 0; } body.rtl #rightcolumn { display: none; } } @media only screen and (max-width: 920px) { .mobileonly.link-reset { display: inline-block !important; } } /* touch devices */ @media (pointer: coarse) and (hover: none) { .mobileonly.link-reset { display: inline-block !important; } } /* ===== Yearly Calendar ===== */ #cal-tip { display: none; position: fixed; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 8px 12px; font-size: 0.88em; line-height: 1.8; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 200; white-space: nowrap; pointer-events: none; } #cal-tip.cal-tip-pinned { pointer-events: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.22); } .cal-tip-hd { display: flex; justify-content: space-between; align-items: center; font-weight: bold; margin-bottom: 4px; gap: 14px; } .cal-tip-x { background: none; border: none; cursor: pointer; font-size: 1.15em; color: #999; padding: 0 2px; line-height: 1; height: auto; } .cal-tip-x:hover { color: #333; } .cal-tip-row { display: flex; align-items: center; gap: 8px; } .cal-tip-lbl { color: #666; min-width: 90px; } .cal-tip-val { flex: 1; user-select: all; padding-right: 8px; } .cal-tip-copy { display: none; } .cal-tip-hint { color: #aaa; display: block; margin-top: 2px; font-size: max(0.9em, 13px); } .dark #cal-tip { background: #2a2a2a; border-color: #444; color: #e0e0e0; } .dark .cal-tip-lbl { color: #999; } .dark .cal-tip-x { color: #777; } .dark .cal-tip-x:hover { color: #ddd; } .dark .cal-tip-copy { background: #3a3a3a; border-color: #555; color: #ddd; } .dark .cal-tip-copy:hover { background: #444; } .calendar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; margin: 20px 0; } .cal-month table { width: 100%; border-collapse: collapse; } .cal-month caption { font-weight: bold; font-size: 1.05em; padding: 6px 0 4px; text-align: left; caption-side: top; } .cal-month th, .cal-month td { text-align: center; padding: 3px 5px; font-size: 0.92em; } .cal-month td[data-s] { cursor: pointer; } .cal-weeknum { color: #999; font-size: max(0.80em, 13px) !important; border-right: 1px solid #e0e0e0; padding-right: 5px !important; } .cal-othermonth { color: #bbb; } .cal-today { background: #882222; color: #fff !important; border-radius: 10%; font-weight: bold; } .dark .cal-today { background: #C36460; } .dark .cal-othermonth { color: #555; } .dark .cal-weeknum { color: #666; border-right-color: #333; } .cal-options { display: flex; align-items:baseline; gap:0.6em; flex-wrap: wrap; margin-bottom:1.2em; align-items: center; } .cal-toggle-group { display: flex; } .cal-toggle { padding: 5px 14px; border: 1px solid #bbb; background: #f5f5f5; cursor: pointer; font-size: 0.92em; color: #444; line-height: 1.4; transition: background 0.1s; position: relative; } .cal-toggle-group .cal-toggle:not(:first-child) { margin-left: -1px; } .cal-toggle:first-child { border-radius: 4px 0 0 4px; } .cal-toggle:last-child { border-radius: 0 4px 4px 0; } .cal-toggle:hover, .cal-toggle.active, .cal-toggle.active-blue { z-index: 1; } .cal-toggle.active { background: #123968; border-color: #0b2544; background-image: linear-gradient(to bottom, #1d4b82 0%, #123968 100%); color: #fff; } .cal-toggle.active-red { background: #882222; border-color: #5c1414; background-image: linear-gradient(to bottom, #9e2a2a 0%, #882222 100%); color: #fff; } .cal-toggle:not(.active):not(.active-red):hover { background: #e8e8e8; } .dark .cal-toggle { background: #2a2a2a; border-color: #555; color: #ccc; } .dark .cal-toggle.active { color: #fff; background-color: #345e8f; border-color: transparent; background-image: linear-gradient(to bottom, #4a7fb9 0%, #345e8f 100%); } .dark .cal-toggle:not(.active):not(.active-red):hover { background: #3a3a3a; } /* Theme toggle icon colors */ .cal-toggle.active-red i, .cal-toggle.active i { filter: brightness(0) invert(1); } /* 3 → 2 columns: sidebar visible but not wide enough for 3 months */ @media only screen and (min-width: 921px) and (max-width: 1179px) { .calendar-grid { grid-template-columns: repeat(2, 1fr); } } /* Responsive inline toggle groups (used by the start/end controls) */ .cal-toggle-wrapper { display: inline-flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; } .cal-toggle-group.wrapable { display: inline-flex; flex-wrap: wrap; /* vertical gap between rows, no horizontal gap */ gap: 0.4em 0; align-items: center; } .cal-toggle-group.wrapable .cal-toggle:not(:first-child) { /* overlap borders so buttons appear as a single segmented control */ margin-left: -1px; } .cal-toggle-group.wrapable .cal-toggle { margin: 0; } @media (max-width: 480px) { .cal-toggle-group.wrapable .cal-toggle { padding: 6px 10px; font-size: 0.92em; } } /* 3 → 2 columns: mobile/small tablet (sidebar is hidden) */ @media (max-width: 760px) { .calendar-grid { grid-template-columns: repeat(2, 1fr); } } /* 2 → 1 column: small mobile */ @media (max-width: 560px) { .calendar-grid { grid-template-columns: 1fr; } } /* Touch: larger copy buttons and tip padding for finger taps */ @media (pointer: coarse) and (hover: none) { #cal-tip { padding: 10px 14px; font-size: 0.9em; } .cal-tip-copy { font-size: max(0.9em, 13px); padding: 5px 12px; } } .settings-radios div.cal-toggle-group { display: inline-flex; vertical-align: middle; } .settings-radios button.cal-toggle { margin: 0; flex: auto; white-space: nowrap; } /* ===== Day Off Calculator ===== */ .dayoffcalc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 12px 0; padding: 6px 14px 6px 14px; border: 1px solid rgba(0,61,93,0.15); border-radius: 8px; background: #f8f8f8; box-shadow: 0 2px 6px rgba(16,24,32,0.05); } .dark .dayoffcalc { background: #1c1c1c; border-color: rgba(255,255,255,0.08); box-shadow: none; } .dayoffcalc > * { margin: 4px 5px; } .dayoffcalc .cal-toggle-group { margin: 4px 0; } .dayoffcalc #dayoff_n, .dayoffcalc #dayoff_unit { height: 34px; box-sizing: border-box; padding: 0 7px; font-size: 0.95em; border-radius: 4px; box-shadow: none; border: 1px solid #bbb; vertical-align: middle; } .dark .dayoffcalc #dayoff_n, .dark .dayoffcalc #dayoff_unit { border-color: #444; } .dayoffcalc #dayoff_n { width: 4.5em; text-align: center; } .dayoffcalc .cal-toggle { padding: 4px 13px; font-size: 0.95em; } #dayoffresult { white-space: nowrap; } .ectable.table-sort.show-weeknums td.desktoponly, .ectable.table-sort.show-weeknums th.desktoponly { display: table-cell !important; } .mobileweektoggle { margin: 8px 0; } #maincontainer { border-color: #882222; } span.logo, span.charset-logo { background-position:left; background-repeat:no-repeat; background-size:contain; display:inline-block; text-indent: -9999px; } span.charset-logo { height: 55px; width: 200px; background-image: url("/img/charset-tools.svg"); } .dark span.charset-logo {filter: invert(90%);} input#letter {width:50px; text-align:center;} input#number {width:100px; text-align:center;} input.xl, select.xl, button.xl {font-size:1.1em;} .shortlabel {width:100px;float:left;padding-top:7px;} select#numsystem {padding-right:50px !important;} table td.white, table th.white {border:0 !important; background-color:#fff;} .dark table td.white, .dark table th.white {background-color:#161616;} form.tools textarea, form.tools textarea.large { width:80%; height:200px; } img.codepage{ width: auto !important; height: auto !important; max-width: 100%; } td.enlarge:hover {font-size:1.8em;} @media only screen and (max-width: 746px) { form.tools textarea, form.tools textarea.large { width: 99%; } } @media only screen and (min-width: 1240px) { form.tools textarea { height:220px; } form.tools textarea.large { height:250px; } } .step-bubble{display:inline-block;min-width:22px;height:22px;line-height:22px;border-radius:50%;background:#882222;color:#fff;font-weight:700;text-align:center;margin:10px 8px 10px 0;font-size:12px} .step-bubble.small{min-width:18px;height:18px;line-height:18px;font-size:11px} table.default td{ padding-right: 1.5em; }</body>