html {
        -webkit-text-size-adjust: 100%;
        /*background: #002b36;*/
        /*background-image: url("img/white.png");*/
        margin: 0;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
}

body {
        /* Disable text selection */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-size: 1.2em;

        /*
        overflow: hidden;
        overflow-y: auto;
        */

        padding: 0;
        margin: 0;
        width: 100%;
        /*height: 100vh;*/
}

/* Allow text selection inside secure mail views */
.securemail, .securemail * {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#pdf {
        width: 100vw;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

#iframe embed {
        width: 100%;
        height: 100%;
}

#topbar {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        width: 100%;
        padding: 0;
        height: 15pt;

        /*background-color: #ccc;*/
        border-bottom: 1px solid #ccc;
        font-weight: normal;
        font-family: monospace;

        box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.18);
}

#topbar div.status {
        float: left;
        margin-right: 5%;
}

#topbar div.title {
        float: left;
        margin-left: 0;
        font-weight: bold;
        font-family: monospace;
}

#topbar div.date {
        float: right;
}

#ajax_container {
        clear: both;
        width: 100%;
        /*overflow: hidden;*/
        padding-top: 1em;
        margin-top: 1em;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 3em;
}

@media screen and (max-width: 500px) and (orientation: portrait) {
        body {
                padding: 0;
                margin: 0;
        }

        #topbar div.status {
                visibility: hidden;
                width: 0;
                position: absolute;
        }

        #topbar div.date .timezone {
                visibility: hidden;
                position: absolute;
                width: 0;
        }
}

@media screen and (min-width: 501px) {
        #topbar div.status {
        }
}

#calendar {
        margin: 0 0 2em 0;
        padding: 0;
        width: 30em;
        max-width: 100%;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
}

#calendar ul.navigation {
        padding: 0;
        list-style-type: none;
        font-weight: 600;
        font-size: 120%;
        display: flex;
        width: 100%;
        background: #28a745;
        color: #ffffff;
        margin: 0;
        border-radius: 12px 12px 0 0;
}

#calendar ul.navigation li.back, li.forward {
        color: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 12px 16px;
        border-radius: 6px;
        margin: 4px;
}

#calendar ul.navigation li.back:hover, li.forward:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
}

#calendar ul.navigation li {
        padding: 12px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
}

#calendar ul.navigation li.info {
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        flex: 1;
        font-size: 110%;
}

#calendar table {
        border: none;
        clear: both;
        width: 100%;
        padding: 0;
        border-collapse: separate;
        border-spacing: 2px;
        background-color: #f8f9fa;
        border-radius: 0 0 12px 12px;
        margin: 0;
}

#calendar table td {
        padding: 8px 4px;
        text-align: center;
        font-size: 13pt;
        border: 2px solid transparent;
        border-radius: 6px;
        color: #2c3e50;
        background: #ffffff;
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
}

#calendar table th {
        text-align: center;
        border: none;
        padding: 8px 4px;
        font-weight: 600;
        color: #495057;
        background: #e9ecef;
        font-size: 11pt;
        text-transform: uppercase;
        letter-spacing: 0.5px;
}

#calendar table td.vko {
        border: none;
        padding: 4px 2px;
        font-size: 9pt;
        background-color: #f8f9fa;
        color: #6c757d;
        font-weight: 500;
        border-radius: 4px;
}

#calendar table td.empty {
        border: none;
        background: transparent;
        cursor: default;
}

#calendar table td.day,
#calendar table td.free,
#calendar table td.today_free,
#calendar table td.today_day,
#calendar table td.today_WORK,
#calendar table td.VAC,
#calendar table td.today_VAC,
#calendar table td.VACPAY,
#calendar table td.VACOT,
#calendar table td.VACNP,
#calendar table td.today_VACPAY,
#calendar table td.today_VACOT,
#calendar table td.today_VACNP,
#calendar table td.SICK,
#calendar table td.today_SICK,
#calendar table td.SICK_CHILD,
#calendar table td.today_SICK_CHILD,
#calendar table td.holiday,
#calendar table td.today_holiday {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
}

#calendar table td.free {
        color: #6c757d;
        background: #f8f9fa;
}

#calendar table td.today_day {
        border: 2px solid #007bff;
        font-weight: 600;
        background: #e3f2fd;
        color: #1976d2;
}

#calendar table td.WORK {
        background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
}

#calendar table td.today_WORK {
        border: 2px solid #007bff;
        background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
}

#calendar table td.VAC {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

#calendar table td.today_VAC {
        border: 2px solid #007bff;
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

#calendar table td.VACPAY,td.VACOT,td.VACNP {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3) !important;
}

#calendar table td.today_VACPAY,td.today_VACOT,td.today_VACNP {
        border: 2px solid #007bff;
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

#calendar table td.SICK,
#calendar table td.SICK_CHILD {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3);
}

#calendar table td.today_SICK,
#calendar table td.today_SICK_CHILD {
        border: 2px solid #007bff;
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3);
}

#calendar table td.holiday {
        color: #dc3545;
        font-weight: 600;
        background: #fff5f5;
        border: 1px solid #fecaca;
}

#calendar table td.today_holiday {
        border: 2px solid #007bff;
        color: #dc3545;
        font-weight: 600;
        background: #fff5f5;
        border: 1px solid #fecaca;
}

#calendar table td.today_free {
        border: 2px solid #007bff;
        color: #6c757d;
        background: #e3f2fd;
}

/* Calendar hover effects */
#calendar table td:hover:not(.empty):not(.vko) {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease;
}

/* Mobile responsive calendar */
@media (max-width: 767.99px) {
        #calendar {
                width: 100%;
                margin: 0 -10px;
                border-radius: 0;
                box-shadow: none;
        }

        #calendar ul.navigation {
                font-size: 100%;
                border-radius: 0;
        }

        #calendar ul.navigation li {
                padding: 8px 4px;
        }

        #calendar ul.navigation li.info {
                font-size: 100%;
        }

        #calendar table {
                border-spacing: 1px;
        }

        #calendar table td {
                padding: 6px 2px;
                font-size: 11pt;
        }

        #calendar table th {
                padding: 6px 2px;
                font-size: 9pt;
        }

        #calendar table td.vko {
                padding: 2px 1px;
                font-size: 7pt;
        }
}

@media (max-width: 575.99px) {
        #calendar table td {
                padding: 4px 1px;
                font-size: 10pt;
        }

        #calendar table th {
                padding: 4px 1px;
                font-size: 8pt;
        }

        #calendar table td.vko {
                padding: 1px;
                font-size: 6pt;
        }
}

#grid, #buttons {
        padding: .5em;
}

#grid ul, #buttons ul {
        list-style-type: none;
        display: block;
        margin: 0;
        padding: 0;
}

#grid li {
        display: inline-block;
        font-size: 140%;
        width: 90%;
        margin-bottom: .5em;
        padding: .5em;

        border: 4px solid #44e;
        -webkit-box-shadow: 4px 4px 10px -1px rgba(0,0,0,0.38);
        -moz-box-shadow: 4px 4px 10px -1px rgba(0,0,0,0.38);
        box-shadow: 4px 4px 10px -1px rgba(0,0,0,0.38);
}

#grid li span.item_value {
        margin-left: .5em;
}

#buttons li {
        font-family: sans-serif;
        border: 2px solid #44e;
        font-size: 100%;
        padding: .3em;
        margin: .3em;
        text-align: center;
        color: #ffe;
        background: #4a4;
        background: -webkit-gradient(linear, left top, right bottom, from(#8c4), to(#4a4));
        display: inline-block;

        -webkit-box-shadow: 4px 4px 10px -1px rgba(0,0,0,0.18);
        -moz-box-shadow: 4px 4px 10px -1px rgba(0,0,0,0.18);
        box-shadow: 4px 4px 10px -1px rgba(0,0,0,0.18);
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        border-radius: .5em;
}

#grid li:hover {
        background-image: url("img/bluebutton.png");
}

#popup {
        background: #ffffff;
        border: none;
        padding: 0;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        border-radius: 16px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
        max-width: 90vw;
        max-height: 80vh;
        overflow: hidden;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
}

#popup ul {
        list-style-type: none;
        display: block;
        margin: 0;
        padding: 24px;
        width: 100%;
        box-sizing: border-box;

        /* Make long option lists scrollable so the user can always reach
           the close button (fixes "popup can't be closed without refresh"). */
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

}

#popup ul li.title {
        font-weight: 600;
        font-size: 18pt;
        color: #2c3e50;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 12px;
        margin-bottom: 16px;
        text-align: center;
}

#popup ul li.description {
        margin-bottom: 20px;
        color: #6c757d;
        font-size: 14pt;
        text-align: center;
        font-weight: 400;
}

#popup ul li.button,
#popup ul li.button_disabled,
#popup ul li.button_close {
        border: none;
        font-size: 14pt;
        font-weight: 500;
        padding: 16px 24px;
        margin-bottom: 12px;
        text-align: center;
        color: #ffffff;
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
        position: relative;
        overflow: hidden;
}

#popup ul li.button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
        background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
}

#popup ul li.button:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

#popup ul li.button_disabled {
        background: #6c757d;
        color: #ffffff;
        cursor: not-allowed;
        opacity: 0.6;
        box-shadow: none;
}

#popup ul li.button_disabled:hover {
        transform: none;
        box-shadow: none;
        background: #6c757d;
}

#popup ul li.button_close {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
        margin-top: 8px;
}

#popup ul li.button_close:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
        background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
}

/* Mobile responsive popup */
@media (max-width: 767.99px) {
        #popup {
                max-width: 95vw;
                max-height: 85vh;
                border-radius: 12px;
        }

        #popup ul {
                padding: 20px;
        }

        #popup ul li.title {
                font-size: 16pt;
                margin-bottom: 12px;
        }

        #popup ul li.description {
                font-size: 13pt;
                margin-bottom: 16px;
        }

        #popup ul li.button,
        #popup ul li.button_disabled,
        #popup ul li.button_close {
                padding: 14px 20px;
                font-size: 13pt;
                margin-bottom: 10px;
        }
}

@media (max-width: 575.99px) {
        #popup {
                max-width: 98vw;
                border-radius: 8px;
        }

        #popup ul {
                padding: 16px;
        }

        #popup ul li.title {
                font-size: 15pt;
                padding-bottom: 8px;
                margin-bottom: 10px;
        }

        #popup ul li.description {
                font-size: 12pt;
                margin-bottom: 14px;
        }

        #popup ul li.button,
        #popup ul li.button_disabled,
        #popup ul li.button_close {
                padding: 12px 16px;
                font-size: 12pt;
                margin-bottom: 8px;
        }
}

/* Calendar selection buttons styling */
.calendar-selection-buttons {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 1px solid #dee2e6;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
}

.calendar-selection-buttons:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
}

.calendar-selection-buttons h5 {
        color: #495057;
        font-weight: 600;
        margin-bottom: 15px;
        text-align: center;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 8px;
        font-size: 14px;
}

.calendar-selection-buttons .btn {
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calendar-selection-buttons .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.calendar-selection-buttons .btn-outline-primary {
        border-color: #007bff;
        color: #007bff;
}

.calendar-selection-buttons .btn-outline-primary:hover {
        background-color: #007bff;
        border-color: #007bff;
        color: #ffffff;
}

.calendar-selection-buttons .btn-success {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        border: none;
        color: #ffffff;
}

.calendar-selection-buttons .btn-success:hover {
        background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

.calendar-selection-buttons .form-control {
        border-radius: 6px;
        border: 1px solid #ced4da;
        transition: all 0.2s ease;
}

.calendar-selection-buttons .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Calendar selection buttons responsive design - inherit from preset-buttons */
.calendar-selection-buttons .preset-buttons {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0 20px 0 0;
        box-shadow: none;
}

.calendar-selection-buttons .preset-buttons:hover {
        box-shadow: none;
        transform: none;
}

.calendar-selection-buttons .preset-buttons h5 {
        margin-bottom: 10px;
        color: #495057;
        font-size: 14px;
        font-weight: 600;
        border-bottom: none;
        padding-bottom: 0;
        text-align: left;
}

/* Mobile responsive calendar selection buttons */
@media (max-width: 767.99px) {
        .calendar-selection-buttons {
                margin: 8px 0;
                padding: 12px;
                border-radius: 8px;
        }

        .calendar-selection-buttons h5 {
                font-size: 13px;
                margin-bottom: 12px;
        }

        .calendar-selection-buttons .d-flex {
                flex-direction: column;
                gap: 16px !important;
        }

        .calendar-selection-buttons .preset-buttons {
                margin: 0 0 16px 0 !important;
        }

        .calendar-selection-buttons .btn {
                font-size: 12px;
                padding: 8px 12px;
        }
}

@media (max-width: 575.99px) {
        .calendar-selection-buttons {
                margin: 6px 0;
                padding: 10px;
                border-radius: 6px;
        }

        .calendar-selection-buttons h5 {
                font-size: 12px;
                margin-bottom: 10px;
        }

        .calendar-selection-buttons .btn {
                font-size: 11px;
                padding: 6px 10px;
        }
}

/* Responsive design for modern workclock buttons */
@media (max-width: 575.99px) {
        #workclock ul li {
                min-width: calc(50% - 6px);
                flex: 1 1 calc(50% - 6px);
        }
}

@media (min-width: 576px) and (max-width: 767.99px) {
        #workclock ul li {
                min-width: calc(33.333% - 8px);
                flex: 1 1 calc(33.333% - 8px);
        }
}

@media (min-width: 768px) and (max-width: 991.99px) {
        #workclock ul li {
                min-width: calc(25% - 9px);
                flex: 1 1 calc(25% - 9px);
        }
}

@media (min-width: 992px) and (max-width: 1199.99px) {
        #workclock ul li {
                min-width: calc(20% - 9.6px);
                flex: 1 1 calc(20% - 9.6px);
        }
}

@media (min-width: 1200px) {
        #workclock ul li {
                min-width: calc(16.666% - 10px);
                flex: 1 1 calc(16.666% - 10px);
        }
}

#workclock {
        width: 100%;
        margin: 0 0 2em 0;
        padding: 0;
}

#workclock ul {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0;
        margin: 0;
}

#workclock ul li {
        display: flex;
        flex-direction: column;
        border: 2px solid #e1e5e9;
        background: #ffffff;
        padding: 16px 12px;
        min-width: 160px;
        font-size: 14px;
        text-align: center;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
}

#workclock ul li:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        border-color: #007bff;
}

#workclock ul li.hidden {
        opacity: 0.5;
        color: #6c757d;
        background: #f8f9fa;
}

#workclock ul li.active {
        border: 2px solid #28a745;
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        box-shadow: 0 4px 16px rgba(40, 167, 69, 0.2);
        transform: translateY(-1px);
}

#workclock ul li.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #28a745, #20c997);
}

#workclock ul li.active::after {
        content: '●';
        position: absolute;
        top: 0;
        right: 8px;
        color: red;
        font-size: 20pt;
        animation: pulse 2s infinite;
}

@keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
}

/* Add subtle animation for better UX */
/*#workclock ul li {
        animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
        from {
                opacity: 0;
                transform: translateY(10px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}
*/
#workclock ul li p {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        font-weight: 600;
        margin: 0 0 8px 0;
        font-size: 16px;
        color: #333;
        line-height: 1.2;
        min-height: 20px;
        width: 100%;
}

.marquee {
        width: 100%;
        margin: 0 auto 8px auto;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        font-size: 12px;
        color: #6c757d;
        min-height: 16px;
}

#workclock ul li .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 15s linear infinite;
}

hr {
        margin: 0;
        padding: 0;
        display: block;
        border-top: 1px dashed #aaa;
        border-bottom: 0;
}

#workclock ul li.active .marquee span {
        animation: marquee 5s cubic-bezier(0.4,0.7,0.7,0.4) infinite;
}

@keyframes marquee {
        0%   { transform: translate(0, 0); }
        100% { transform: translate(-100%, 0); }
}

#workclock ul li span {
        font-size: 11px;
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
        font-weight: 500;
        color: #495057;
        line-height: 1.4;
}

#workclock ul li span.time_started {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(0, 123, 255, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
}

#workclock ul li span.time_now {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(40, 167, 69, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        visibility: hidden;
}

#workclock ul li span.hours_current {
        font-size: 18px;
        font-weight: 700;
        color: #28a745;
        margin: 4px 0;
    }

#workclock ul li span.prc_total {
        font-size: 12px;
        color: #6c757d;
        margin-top: 4px;
}

#workclock ul li span.hours_total {
        font-size: 12px;
        color: #6c757d;
        margin-top: 2px;
}

form {

}

form p {
        padding: 1px;
        font-size: 120%;
}

form h3 {
        margin-bottom: 0;
        padding: 1px;
        font-size: 120%;
}

h3 {
    margin-top: 1em;
}

label {
    display: block;
}

div.codebox {
    border-radius: 2px;
    border: 1px solid #ddd;
    padding: .5em;
}

div.codebox .header {
    margin-bottom: .5em;
    font-size: 120%;
}

span.password {
    font-family: monospace;
    font-size: 120%;
    letter-spacing: .2rem;
    font-weight: bold;
}

div.codebox .password {
    font-family: monospace;
    font-size: 120%;
    letter-spacing: .2rem;
    font-weight: bold;
    margin-bottom: 1em;
    user-select: text;
}

div.codebox .phraseology {
    font-family: monospace;
}

div.codebox .phraseology .title {
    display: inline-block;
    width: 4em;
    font-weight: bold;
    font-style: normal;
}

input, textarea {
    /*border: 1px solid #c4c4c4;
    padding: 3px 5px;
    font-size: 120%;
    max-width: 100%;
    background-color: #fff;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);*/

    color: #556;
    border-radius: 2px;
    border: 1px solid #ddd;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.07);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.45;
    outline: none;
    padding: .3em .5em .3em;
    -webkit-transition: .18s ease-out;
    -moz-transition: .18s ease-out;
    -o-transition: .18s ease-out;
    transition: .18s ease-out;
}

input.missing,
textarea.missing,
date.missing {
    border-color: #d22;
}

input:hover, textarea:hover {
    box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}
input:focus, textarea:focus {
    color: #4b515d;
    border: 1px solid #B8B6B6;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}

form input[type=button] {
    margin-top: .5em;
    margin-bottom: .5em;

  background-color: #13aa52;
  border: 1px solid #13aa52;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  width: 100%;
  color: #fff;
  cursor: pointer;
  font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

form input[type=button]:hover {
  background-color: #1e8449;
  opacity: 1;
  transform: translateY(0);
  transition-duration: .35s;
}

/*
    border: 2px solid #44e;
        font-size: 120%;
        padding: .5em;
        text-align: center;
        color: #fff;
        background-color: #4a4;
        width: 100%;*/


div.info,
div.error {
  margin-top: .5em;
  margin-bottom: .5em;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  width: 100%;
  font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

div.progressbar {
    border-radius: 13px;
    background: #13aa52;
    width: 100%;
    padding: .1em;
}

div.progressbar>div {
    width: 0%;
    height: 1em;
    border-radius: .1em;
}
.info span {
    display: inline-block;
    text-align: left;
    padding-left: 100%;
    animation: marquee 2s reverse infinite;
}

div.error {
  color: #d22;
  animation: 0.5s 1 alternate horizontal-shaking;
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}
/*
@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
*/

form input[type=text],
form input[type=file],
form input[type=password] {
        width: 100%;
}

form select {
    max-width: 100%;
        padding-right: 2em;
        padding-left: .5em;
        height: 2em;
        margin-bottom: .5em;
        color: #000;
        font-size: 120%;
        border: 2px solid #44e;
        background: url(img/down_arrow_select.jpg) no-repeat right #ddd;
        -webkit-appearance: none;
        -webkit-border-radius: 0px;
        -moz-appearance: none;
}

form select:disabled {
        color: #666;
        border: 2px solid #666;
}

form span.current {
        background: #8e8;
        font-weight: bold;
        margin: 0;
        padding: 0;
}

.tablediv {
        min-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1em;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: #ffffff;
}

/* Modern responsive table styling */
.tablediv table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
}

/* Enhanced table header styling */
.tablediv table thead th {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #389920), color-stop(1, #1D7F51));
        background: -moz-linear-gradient(center top, #389920 5%, #1D7F51 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#389920', endColorstr='#1D7F51');
        background-color: #389920;
        color: #ffffff;
        border-bottom: 2px solid #9ea7af;
        border-right: 1px solid #343a45;
        font-size: 100%;
        font-weight: 600;
        padding: 10px 8px;
        text-align: left;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        vertical-align: middle;
        position: sticky;
        top: 0;
        z-index: 10;
}

/* Enhanced table cell styling */
.tablediv table td {
        padding: 12px 10px;
        border: none;
        border-bottom: 1px solid #e1e5e9;
        font-size: 13px;
        line-height: 1.5;
        vertical-align: middle;
        transition: background-color 0.2s ease;
}

/* Enhanced row styling */
.tablediv table tr:nth-child(even) td {
        background: #f8f9fa;
}

.tablediv table tr:nth-child(odd) td {
        background: #ffffff;
}

.tablediv table tr:hover td {
        background: #f0f8ff !important;
        color: #2c3e50;
        transition: all 0.2s ease;
        box-shadow: inset 0 0 0 1px #e3f2fd;
}

/* Date column styling */
.tablediv table td:first-child {
        font-weight: 600;
        color: #2c3e50;
        min-width: 80px;
}

/* Type column styling (now 2nd column) */
.tablediv table td:nth-child(2) {
        text-align: center;
        min-width: 40px;
        font-size: 11px;
        color: #6c757d;
}


/* Time columns styling */
.tablediv table td:nth-child(n+3) {
        text-align: right;
        font-family: 'Courier New', monospace;
        min-width: 60px;
}

/* Enhanced readability for all table content */
.tablediv table td {
        line-height: 1.5;
        word-wrap: break-word;
        hyphens: auto;
        color: #2c3e50;
        font-weight: 400;
}

/* Tag styling - look for cells with tag data-label */
.tablediv table td[data-label*="Tägi"] {
        background: #e3f2fd !important;
        border-left: 3px solid #2196f3 !important;
        font-weight: 500 !important;
        color: #1565c0 !important;
        padding-left: 12px !important;
}

/* Project styling - look for cells with project data-label */
.tablediv table td[data-label*="Projekti"] {
        font-weight: 500 !important;
        color: #495057 !important;
        background: #f8f9fa !important;
}

/* Time/hours styling - look for cells with time-related data-labels */
.tablediv table td[data-label*="Tunnit"],
.tablediv table td[data-label*="Työmäärä"],
.tablediv table td[data-label*="Yhteensä"] {
        font-family: 'Courier New', monospace !important;
        font-weight: 500 !important;
        text-align: right !important;
        color: #2c3e50 !important;
}

/* Balance field styling - look for +/- field */
.tablediv table td[data-label*="+/-"] {
        font-weight: 600 !important;
        color: #2c3e50 !important;
        text-align: center !important;
        background: #f0f8f0 !important;
        border: 1px solid #c3e6c3 !important;
        border-radius: 4px !important;
}

/* Extra info styling */
.tablediv table td[data-label*="Lisätieto"] {
        font-style: italic !important;
        color: #6c757d !important;
        font-size: 0.9em !important;
}

/* Tag styling within curly brackets */
.tablediv table td {
        position: relative;
}

/* Style cells that contain tag information (with curly brackets) */
.tablediv table td.has-tags {
        background: #e3f2fd !important;
        border-left: 3px solid #2196f3 !important;
        font-weight: 500 !important;
        color: #1565c0 !important;
        padding-left: 12px !important;
}

/* Style the tag content within curly brackets */
.tablediv table td.has-tags .tag-content {
        background: #bbdefb;
        color: #0d47a1;
        padding: 2px 6px;
        border-radius: 3px;
        font-weight: 600;
        font-size: 0.9em;
        display: inline-block;
        margin: 1px 2px;
        border: 1px solid #90caf9;
}

/* Style individual tags within the curly brackets */
.tablediv table td.has-tags .tag-item {
        background: #bbdefb;
        color: #0d47a1;
        padding: 1px 4px;
        border-radius: 2px;
        font-weight: 600;
        font-size: 0.85em;
        margin: 0 1px;
        border: 1px solid #90caf9;
        display: inline-block;
}

/* Enhanced hover effect for cells with tags */
.tablediv table td.has-tags:hover {
        background: #bbdefb !important;
        border-left-color: #1976d2 !important;
        transform: translateX(1px);
        transition: all 0.2s ease;
}

/* Mobile responsive design for worktime table */
@media (max-width: 767.99px) {
        .tablediv {
                margin: 0 -10px;
                border-radius: 0;
                box-shadow: none;
        }

        .tablediv table {
                font-size: 12px;
        }

        .tablediv table thead th {
                padding: 8px 4px;
                font-size: 11px;
        }

        .tablediv table td {
                padding: 6px 4px;
                font-size: 11px;
        }

        /* Hide day description */
        .tablediv table th:nth-child(2),
        .tablediv table td:nth-child(2) {
                display: none;
        }

        /* Hide less important columns on mobile - hide Lisätieto (3rd column) and keep only essential columns */
        .tablediv table th:nth-child(3),
        .tablediv table td:nth-child(3) {
                display: none; /* Hide Lisätieto field */
        }

        /* Hide columns after the +/- field (daytot) on very small screens */
        .tablediv table th:nth-child(n+7),
        .tablediv table td:nth-child(n+7) {
                display: none;
        }

        /* Make date column more prominent */
        .tablediv table td:first-child {
                font-weight: 700;
                font-size: 12px;
        }


        /* Make +/- field (daytot) more prominent on mobile */
        .tablediv table td:nth-child(6) {
                font-weight: 700;
                font-size: 13px;
                color: #2c3e50;
                text-align: center;
                background: #f8f9fa;
                border: 1px solid #dee2e6;
                border-radius: 4px;
                padding: 4px 8px;
        }
}

/* Mobile screens */
@media (max-width: 575.99px) {
        /* Hide työmäärä */
        .tablediv table th:nth-child(4),
        .tablediv table td:nth-child(4) {
                display: none;
        }
}

/* Very small screens - card layout - disabled*/
@media (max-width: 75.99px) {
        .tablediv {
                overflow: visible;
                margin: 0 -5px;
                padding: 0 5px;
        }

        .tablediv table,
        .tablediv thead,
        .tablediv tbody,
        .tablediv th,
        .tablediv td,
        .tablediv tr {
                display: block;
        }

        .tablediv thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
        }

        .tablediv tr {
                border: 1px solid #e1e5e9;
                border-radius: 6px;
                margin-bottom: 8px;
                padding: 0;
                background: #ffffff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .tablediv td {
                border: none;
                border-bottom: 1px solid #e1e5e9;
                position: relative;
                padding: 8px 8px 8px 8px;
                background: transparent !important;
                font-size: 12px;
                line-height: 1.3;
                display: flex;
                justify-content: space-between;
                align-items: center;
        }

        .tablediv td:before {
                content: attr(data-label);
                font-weight: 600;
                color: #495057;
                font-size: 10px;
                text-transform: uppercase;
                letter-spacing: 0.3px;
                flex: 0 0 auto;
                margin-right: 8px;
        }

        .tablediv td:last-child {
                border-bottom: none;
        }

        /* Special styling for first row (date) */
        .tablediv tr td:first-child {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #389920), color-stop(1, #1D7F51)) !important;
                background: -moz-linear-gradient(center top, #389920 5%, #1D7F51 100%) !important;
                background-color: #389920 !important;
                color: #ffffff !important;
                font-weight: 600;
                font-size: 13px;
                padding: 8px;
                border-radius: 4px 4px 0 0;
                margin: 0;
                text-align: center;
                display: block;
                border-bottom: none;
        }

        .tablediv tr td:first-child:before {
                display: none;
        }

        /* Special styling for +/- field in card layout */
        .tablediv tr td:nth-child(6) {
                background: #e8f5e8 !important;
                border: 2px solid #28a745 !important;
                border-radius: 6px !important;
                font-weight: 700 !important;
                font-size: 14px !important;
                color: #155724 !important;
                text-align: center !important;
                margin: 4px 0 !important;
        }

        .tablediv tr td:nth-child(6):before {
                content: "SALDO: ";
                font-weight: 700;
                color: #155724;
        }

        /* Enhanced tag styling in card layout */
        .tablediv tr td[data-label*="Tägi"] {
                background: #e3f2fd !important;
                border-left: 4px solid #2196f3 !important;
                font-weight: 600 !important;
                color: #1565c0 !important;
                margin: 2px 0 !important;
                border-radius: 4px !important;
        }

        .tablediv tr td[data-label*="Tägi"]:before {
                color: #1565c0 !important;
                font-weight: 700 !important;
        }

        /* Enhanced project styling in card layout */
        .tablediv tr td[data-label*="Projekti"] {
                background: #f8f9fa !important;
                font-weight: 600 !important;
                color: #495057 !important;
                border-left: 3px solid #6c757d !important;
        }

        /* Enhanced time styling in card layout */
        .tablediv tr td[data-label*="Tunnit"],
        .tablediv tr td[data-label*="Työmäärä"],
        .tablediv tr td[data-label*="Yhteensä"] {
                font-family: 'Courier New', monospace !important;
                font-weight: 600 !important;
                color: #2c3e50 !important;
                background: #f0f8f0 !important;
                border-left: 3px solid #28a745 !important;
        }

        /* Enhanced tag styling in mobile card layout */
        .tablediv tr td.has-tags {
                background: #e3f2fd !important;
                border-left: 4px solid #2196f3 !important;
                font-weight: 600 !important;
                color: #1565c0 !important;
                margin: 2px 0 !important;
                border-radius: 4px !important;
        }

        .tablediv tr td.has-tags .tag-content {
                background: #bbdefb !important;
                color: #0d47a1 !important;
                padding: 3px 6px !important;
                border-radius: 4px !important;
                font-weight: 700 !important;
                font-size: 0.9em !important;
                display: inline-block !important;
                margin: 2px 1px !important;
                border: 1px solid #90caf9 !important;
        }
}

/* Extra small screens - further optimization */
@media (max-width: 375px) {
        .tablediv {
                margin: 0 -8px;
                padding: 0 8px;
        }

        .tablediv tr {
                margin-bottom: 6px;
                padding: 0;
        }

        .tablediv td {
                padding: 6px 6px 6px 6px;
                font-size: 11px;
        }

        .tablediv td:before {
                font-size: 9px;
                margin-right: 6px;
        }

        .tablediv tr td:first-child {
                font-size: 12px;
                padding: 6px;
                margin: 0;
        }

        /* Special styling for +/- field on extra small screens */
        .tablediv tr td:nth-child(6) {
                font-size: 13px !important;
                margin: 3px 0 !important;
        }
}

/* Touch device improvements for tables */
@media (hover: none) and (pointer: coarse) {
        .tablediv table tr:hover td {
                background: #f8f9fa !important;
                color: inherit;
        }

        .tablediv table tr:active td {
                background: #e3f2fd !important;
                color: #1976d2;
        }
}

/* Print styles for worktime table */
@media print {
        .tablediv {
                box-shadow: none;
                border: 1px solid #000;
        }

        .tablediv table thead th {
                background: #389920 !important;
                color: #ffffff !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
        }

        .tablediv table tr:nth-child(even) td {
                background: #f9f9f9 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
        }

        .tablediv table tr:hover td {
                background: #f0f0f0 !important;
                color: #000 !important;
        }
}

/* Basic Details (Perustiedot) Table Styling */
.table-responsive {
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: #ffffff;
}

.table-responsive table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12pt;
        background: #ffffff;
}

.table-responsive table thead th {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #389920), color-stop(1, #1D7F51));
        background: -moz-linear-gradient(center top, #389920 5%, #1D7F51 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#389920', endColorstr='#1D7F51');
        background-color: #389920;
        color: #ffffff;
        border-bottom: 2px solid #9ea7af;
        border-right: 1px solid #343a45;
        font-size: 100%;
        font-weight: 600;
        padding: 12px 10px;
        text-align: left;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        vertical-align: middle;
}

.table-responsive table thead th:last-child {
        border-right: none;
}

.table-responsive table tbody td {
        padding: 12pt 10pt;
        border: none;
        border-bottom: 1px solid #e1e5e9;
        font-size: 13px;
        line-height: 1.5;
        vertical-align: middle;
        transition: background-color 0.2s ease;
}

.table-responsive table tbody tr:nth-child(even) td {
        background: #f8f9fa;
}

.table-responsive table tbody tr:nth-child(odd) td {
        background: #ffffff;
}

.table-responsive table tbody tr:hover td {
        background: #f0f8ff !important;
        color: #2c3e50;
        transition: all 0.2s ease;
        box-shadow: inset 0 0 0 1px #e3f2fd;
}

/* Style the first column (Perustiedot) */
.table-responsive table tbody td:first-child {
        font-weight: 600;
        color: #2c3e50;
        min-width: 200px;
}

/* Style the second column (Aika) */
.table-responsive table tbody td:nth-child(2) {
        font-family: 'Courier New', monospace;
        font-weight: 500;
        text-align: right;
        color: #2c3e50;
        min-width: 80px;
}

/* Style the third column (%) */
.table-responsive table tbody td:nth-child(3) {
        font-weight: 600;
        text-align: center;
        color: #495057;
        min-width: 60px;
}

/* Special styling for balance/overage rows */
.table-responsive table tbody tr.balance-row td:first-child {
        color: #dc3545;
        font-weight: 700;
}

.table-responsive table tbody tr.total-row td:first-child {
        color: #28a745;
        font-weight: 700;
}

@media (max-width: 767.99px) {

}

/* Very small screens - card layout for basic details */
@media (max-width: 575.99px) {
  .table-responsive th:nth-child(3),
  .table-responsive td:nth-child(3) {
      display: none;
  }

}

.duration {
        white-space: nowrap;
}


.duration-neg {
        color: #b00;
}

i.duration-number {
        font-style: normal;
        min-width: 1.2em;
        display: inline-block;
        text-align: right;
}

i.duration-unit {
        font-style: normal;
        font-size: 70%;
    margin: 0 .3em 0 .1em;
        color: #666;
}

i.clock-symbol {
        font-style: normal;
        font-size: 70%;
    margin: 0 .3em 0 .1em;
        color: #666;
}

table {
        /*width: 100vw;*/
        /* border: 1px solid #2B9945; */
        border-collapse: collapse;
        min-width: 100%;
}

/*
table thead th {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #389920), color-stop(1, #1D7F51) );
        background:-moz-linear-gradient( center top, #389920 5%, #1D7F51 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#389920', endColorstr='#1D7F51');
        background-color:#389920;
        color:#FFFFFF;

        border-bottom:4px solid #9ea7af;
        border-right: 1px solid #343a45;
        font-size:110%;
        font-weight: bold;
        padding:.4em;
        text-align:left;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        vertical-align:middle;
}
*/
table thead th {
/*        border-bottom:1px solid #1d7f51;
        border-right: 1px solid #1d7f51;*/
        font-weight: bold;
        padding: .3em;
        text-align:left;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

table thead th:first-child {
        /*border-top-left-radius:3px;*/
}

table thead th:last-child {
        /*border-top-right-radius:3px;*/
        border-right:none;
}

table tr:last-child {
        /*border-bottom: 1px solid #1D7F51;*/
        margin-bottom: .5em;
}

table td:first-child {
        border-left: none;
}

table td:last-child {
        border-right: none;
}

table tr:nth-child(odd) td {
        background: #e7f5de;
}

div.tablediv table tr:hover td {
        background:#839D7E;
        /*color:#FFFFFF;*/
}

table td {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        padding-right: 0.3em;
        padding-left: 0.3em;
}

.button {
        border: 2px solid #44e;
        font-size: 100%;
        padding: .3em;
        text-align: center;
        color: #fff;
        background-color: #4a4;
        margin: 1px;
}

div.sender {
    font-size: 80%;
    display: inline-block;
    border-bottom: 1px solid #ddd;
}

div.receiver {
    font-size: 80%;
}

div.new-mail {
    color: #2a4;
    font-weight: bold;
}

.redbutton {
        font-weight: bold;
        border: 2px solid #44e;
        padding: .3em;
        margin-bottom: .5em;
        text-align: center;
        color: #fff;
        background-color: #a44;
        margin: 1px;
}

#console {
        visibility: hidden;
        padding: 0;
        margin: 0;
        margin-top: 4em;
        position: fixed;
        border-top: 1px solid #ccc;
        bottom: 0;
        width: 100%;
        height: 4em;
        overflow-y: auto;
        background-color: #fafafa;
        /* Enable text selection and improve usability */
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        cursor: text;
}

/* Console list items should be selectable and have better styling */
#console li {
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        cursor: text;
        padding: 2px 8px;
        margin: 1px 0;
        border-bottom: 1px solid #eee;
        background-color: #fff;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        line-height: 1.4;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
}

/* Console list items on hover */
#console li:hover {
        background-color: #f0f0f0;
}

/* Console list items when selected */
#console li::selection {
        background-color: #007acc;
        color: white;
}

#console li::-moz-selection {
        background-color: #007acc;
        color: white;
}

.page_number {
        float: left;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #ccc;
}

ul.wtbar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 50em;
}

ul.wtbar li {
        background: #f1f1f1;
        border: 1px solid #ccc;
        border-left: 1px solid #ccc;
        float: left;
        height: 6em;
        /*writing-mode: vertical-rl;
        text-orientation: upright;*/
        font-size: 70%;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        overflow: hidden;
}

ul.wtbar li span {
        /*transform: rotate(45deg); */
}

div.checked_by {
        background: #6e6;
        border: 2px solid #3a3;
        font-size: 120%;
        margin-bottom: 1em;
}

textarea {
    width: 100%;
}

[type="date"] {
    /*background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;*/
    /*background: #fff url(img/calendar_2.png)  97% 50% no-repeat;*/
}
/*
[type="date"]::-webkit-inner-spin-button {
    display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}*/

/* custom styles */
body {
    /*font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;*/
    /*font-family: Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;*/
}

div.formfield {
    margin-bottom: 1em;
}

#login {
    margin-left: auto;
    margin-right: auto;
    width: 20em;
    padding: 2em;
    border: 1px solid #ccc;
}

.remove {
        padding: .3em;
        margin-bottom: .5em;
        color: #a44;
        margin: 1px;
}

/* Preset buttons styling */
.preset-buttons {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.preset-buttons h5 {
    margin-bottom: 10px;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
}

.preset-buttons .btn {
    min-width: 120px;
    height: auto;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    flex: 1 1 auto;
    margin: 2px;
}

.preset-buttons .btn small {
    display: block;
    margin-top: 4px;
    opacity: 0.8;
}

/* Responsive preset button layout */
.preset-buttons .d-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Mobile-first responsive design for preset buttons */
@media (max-width: 575.99px) {
    .preset-buttons {
        padding: 12px;
        margin-bottom: 16px;
    }

    .preset-buttons h5 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .preset-buttons .btn {
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
        padding: 10px 8px;
        font-size: 11px;
        margin: 2px;
    }

    .preset-buttons .btn small {
        font-size: 10px;
        margin-top: 2px;
    }

    .preset-buttons .d-flex {
        gap: 4px !important;
    }
}

@media (min-width: 576px) and (max-width: 767.99px) {
    .preset-buttons .btn {
        min-width: calc(33.333% - 6px);
        flex: 1 1 calc(33.333% - 6px);
        padding: 9px 10px;
        font-size: 11px;
    }

    .preset-buttons .d-flex {
        gap: 6px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.99px) {
    .preset-buttons .btn {
        min-width: calc(25% - 6px);
        flex: 1 1 calc(25% - 6px);
        padding: 8px 12px;
        font-size: 12px;
    }

    .preset-buttons .d-flex {
        gap: 8px !important;
    }
}

@media (min-width: 992px) {
    .preset-buttons .btn {
        min-width: calc(20% - 8px);
        flex: 1 1 calc(20% - 8px);
        padding: 8px 12px;
        font-size: 12px;
    }

    .preset-buttons .d-flex {
        gap: 10px !important;
    }
}

/* Extra small screens (phones in portrait) */
@media (max-width: 375px) {
    .preset-buttons {
        padding: 8px;
        margin-bottom: 12px;
    }

    .preset-buttons h5 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .preset-buttons .btn {
        min-width: 100%;
        flex: 1 1 100%;
        padding: 12px 8px;
        font-size: 11px;
        margin: 1px 0;
    }

    .preset-buttons .btn small {
        font-size: 9px;
        margin-top: 1px;
    }

    .preset-buttons .d-flex {
        gap: 2px !important;
        flex-direction: column;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .preset-buttons .btn {
        min-height: 44px; /* Minimum touch target size */
        padding: 12px 8px;
    }

    .preset-buttons .btn:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

.gap-2 > * + * {
    margin-left: 0.5rem;
}

/* Preset Manager Container */
.preset-manager-container {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    background: white;
}

.preset-manager-container h3 {
    margin-bottom: 20px;
    color: #333;
}

.preset-manager-container .form-group {
    margin-bottom: 15px;
}

.preset-manager-container .form-actions {
    margin-top: 20px;
    text-align: right;
}

.preset-manager-container .form-actions button {
    margin-left: 10px;
}

/* Modern worktime edit form styling */
.worktime-edit-form {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 0 auto;
}

.worktime-edit-form .formfield {
    margin-bottom: 20px;
}

.worktime-edit-form .formfield h3 {
    display: block;
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #333;
    font-size: 14px;
    text-transform: none;
}

.worktime-edit-form .formfield input[type="text"],
.worktime-edit-form .formfield input[type="number"],
.worktime-edit-form .formfield select,
.worktime-edit-form .formfield textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e1e5e9;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    background: #fff;
    min-height: 44px; /* Ensure consistent height for all form fields */
}

.worktime-edit-form .formfield input[type="text"]:focus,
.worktime-edit-form .formfield input[type="number"]:focus,
.worktime-edit-form .formfield select:focus,
.worktime-edit-form .formfield textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.worktime-edit-form .formfield input[type="button"] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 10px;
    margin-top: 10px;
}

.worktime-edit-form .formfield input[type="button"]:last-child {
    margin-right: 0;
}

/* Button styling based on value/content */
.worktime-edit-form .formfield input[type="button"][value="Tallenna"] {
    background: #007bff;
    color: white;
}

.worktime-edit-form .formfield input[type="button"][value="Tallenna"]:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

.worktime-edit-form .formfield input[type="button"][value="Peruuta"] {
    background: #6c757d;
    color: white;
}

.worktime-edit-form .formfield input[type="button"][value="Peruuta"]:hover {
    background: #545b62;
    transform: translateY(-1px);
}

.worktime-edit-form .formfield input[type="button"][value="Poista"] {
    background: #dc3545;
    color: white;
}

.worktime-edit-form .formfield input[type="button"][value="Poista"]:hover {
    background: #c82333;
    transform: translateY(-1px);
}

/* Special styling for date and time fields */
.worktime-edit-form .formfield input[type="date"],
.worktime-edit-form .formfield input[type="time"],
.worktime-edit-form .formfield .modern-date-field,
.worktime-edit-form .formfield .modern-time-field {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e1e5e9;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    background: #fff;
}

.worktime-edit-form .formfield input[type="date"]:focus,
.worktime-edit-form .formfield input[type="time"]:focus,
.worktime-edit-form .formfield .modern-date-field:focus,
.worktime-edit-form .formfield .modern-time-field:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* Global styling for modern date and time fields */
.formfield .modern-date-field,
.formfield .modern-time-field {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e1e5e9;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    background: #fff;
}

.formfield .modern-date-field:focus,
.formfield .modern-time-field:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* Global styling for all select elements in formfields */
.formfield select {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important; /* Match the height of other form fields */
    padding: 10px 12px !important;
    border: 2px solid #e1e5e9;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4 !important; /* Ensure proper line height */
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    background: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding-right: 40px !important;
    vertical-align: top !important; /* Align with other form elements */
}

.formfield select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* Textarea styling */
.worktime-edit-form .formfield textarea {
    resize: vertical;
    min-height: 80px;
}

/* Number input styling */
.worktime-edit-form .formfield input[type="number"] {
    -moz-appearance: textfield;
}

.worktime-edit-form .formfield input[type="number"]::-webkit-outer-spin-button,
.worktime-edit-form .formfield input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Select dropdown styling */
.worktime-edit-form .formfield select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding: 10px 40px 10px 12px !important; /* Override general form select padding */
    width: 100% !important; /* Ensure full width */
    height: auto !important;
    min-height: 44px !important; /* Match the height of other form fields */
    line-height: 1.4 !important; /* Ensure proper line height */
    box-sizing: border-box !important; /* Ensure proper box model */
    vertical-align: top !important; /* Align with other form elements */
}