* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#mobileMenuOverlay{
    display:none;
}

.wrapper {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 25%;
    min-width: 250px;
    min-height: 100vh;
    background: #0b3c66;
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.stats{
    margin-bottom:30px;
}

.content{
    flex:1;
    min-width:0;
    padding:25px;
    background:#f4f7fb;
}

.menu{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 6px;
    transition: .3s;
}

.menu a:hover {
    background: rgba(255,255,255,.15);
}

/* =========================================
   SEARCH & CLEAR BUTTON
========================================= */
.search-wrapper{
    position:relative;
    display:inline-block;
}

.search-input{
    width:100%;
    padding-right:35px;
    box-sizing:border-box;
}

.search-clear{
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#777;
    font-size:18px;
    font-weight:600;
    padding:0;
    margin:0;
    width:auto;
    cursor:pointer;
    display:none;
    line-height:1;
}

.search-clear:hover{
    color:#000;
}

/* =========================================
   SEARCH WIDTHS
========================================= */

#customerSearch,
#appointmentSearch,
#technicianSearch,
#equipmentTypeSearch,
#specialtySearch,
#jobHistorySearch,
#permissionSearch,
#categorySearch,
#costCenterSearch{
    width:300px;
    min-width:250px;
    max-width:350px;
    margin:0;
    flex:none;
}

.dashboard-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.dashboard-widget-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.dashboard-widget-grid .appointment{
    padding:8px;
    margin-bottom:0;
}

.dashboard-widget-grid .appointment strong{
    font-size:16px;
}

.dashboard-widget-grid .date,
.dashboard-widget-grid .phone{
    font-size:12px;
}

.dashboard-widget-link{
    color:#1e88e5;
    font-weight:600;
    text-decoration:none;
    font-size:15px;
}

.dashboard-widget-link:hover{
    color:#1565c0;
}

.dashboard-widget-link:visited{
    color:#1e88e5;
    text-decoration:none;
}

.dashboard-widget-footer{
    text-align:center;
    margin-top:15px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.stat-box {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;

    box-shadow: 0 2px 8px rgba(0,0,0,.1);

    transition: all .25s ease;
}

.stat-box:hover {
    transform: translateY(-3px);

    box-shadow:
        0 6px 18px rgba(0,0,0,.12);
}

.stat-number {
    font-size: 42px;
    font-weight: 700;
    color: #1e88e5;
    margin-bottom: 10px;
}

.content h1 {
    margin-top: 0;
    margin-bottom: 30px;
}

.menu a.active{
    background:#1e88e5;
    font-weight:bold;
}

.version {
    margin-top: auto;
    padding-top: 20px;
    font-size: 11px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    color: rgba(255,255,255,0.55);
    letter-spacing: 1px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select{
    width:100%;
    padding:12px;
    margin:8px 0;
    box-sizing:border-box;
}

button {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    background: #1e88e5;
    color: white;
    cursor: pointer;
}

button:hover {
    background: #1565c0;
}

#appointmentsList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.appointment {
    background: #f8fbff;
    border: 1px solid #d6e7f7;
    border-left: 5px solid #1e88e5;
    border-radius: 10px;

    padding: 15px;
    margin-bottom: 12px;

    transition: all .25s ease;
    cursor: pointer;
}

.appointment:hover {
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    border-left-color: #1565c0;
}

.appointment strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    color: #0b3c66;
}

.appointment .date {
    color: #777;
    font-size: 14px;
}

.appointment .phone {
    color: #777;
	font-size: 13px;
    margin-top: 4px;
}

.phone-link,
.phone-link:visited {
    text-decoration: none;
    color: inherit;
}

.btn-map,
.btn-map:visited {
    text-decoration: none;
}

.appointment .address {
    color: #777;
    font-size: 13px;
    margin-top: 4px;
}

.appointment .city {
    color: #777;
    font-size: 13px;
    margin-top: 4px;
}

.appointment .postal_code {
    color: #777;
    font-size: 13px;
    margin-top: 4px;
}

.appointment .notes {
    color: #777;
    font-size: 13px;
    margin-top: 8px;
    padding-top:8px;
    border-top:1px solid #e5e5e5;
}

.appointments-table {
    width: 100%;
    border-collapse: collapse;
}

.appointments-table th,
.appointments-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.appointments-table th {
    background: #f3f6f9;
}

.appointments-table tr:hover {
    background: #f9fbfd;
}

.status{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.status.pending{
    background:#fff3cd;
    color:#856404;
}

.status.in-progress{
    background:#cfe2ff;
    color:#084298;
}

.status.completed{
    background:#d1e7dd;
    color:#0f5132;
}

.status.cancelled{
    background:#f8d7da;
    color:#842029;
}

.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.toolbar input{
    width: 300px;
    height: 50px;
}

.toolbar .btn-primary{
    width: auto;
    height: 50px;
    padding: 0 18px;
    flex: none;
}

.btn-edit{
    color:#1e88e5;
    text-decoration:none;
    margin-right:10px;
}

.btn-delete{
    color:#dc3545;
    text-decoration:none;
}

.form-actions{
    display:flex;
    justify-content:center;
    margin-top:25px;
}

.form-actions button{
    width:auto;
    min-width:220px;
}

.btn-cancel {
    background: #dc3545;
	text-decoration:none;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-cancel:hover {
    background: #bb2d3b;
}

.btn-cancel:active {
    background: #a52834;
}

.calendar-main .dashboard-card{
    width:100%;
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(70px,1fr));
    gap:8px;
    width:100%;
}

.calendar-day-link{
    min-width:0;
    text-decoration:none;
    color:inherit;
}

.calendar-day{
    width:100%;
    height:120px;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
    background:white;
    overflow:hidden;
}

.appointment-dot.more{
    background:#607d8b;
    color:#fff;
    text-align:center;
    font-weight:600;
}

.appointment-carousel{
    display:grid;
    grid-template-columns:40px 1fr 40px;
    align-items:center;
    width:100%;
    gap:20px;
}

#dayPrev,
#dayNext{
    position:static;
    transform:none;

    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    cursor:pointer;
    user-select:none;

    font-size:22px;
    font-weight:bold;
    color:#0b3c66;
}

.calendar-header{
    font-weight:700;
    text-align:center;
    padding:10px;
}

.calendar-title{
    position:relative;
    font-size:24px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.calendar-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:nowrap;
}

.calendar-btn{
    text-decoration:none;
    padding:8px 14px;
    background:#1e88e5;
    color:white;
    border-radius:6px;
}

.calendar-btn:hover{
    background:#1565c0;
}

#calendarYear{
    margin-left:10px;
    padding:4px 8px;
}

.calendar-day-link:hover .calendar-day{
    border-color:#1e88e5;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.calendar-title-button{
    background:none;
    border:none;
    color:#000;
    font-size:24px;
    font-weight:700;
    cursor:pointer;
    padding:0;

    user-select:none;
    -webkit-user-select:none;
}

.calendar-title-button:focus{
    outline:none;
}

.calendar-title-button:hover{
    background:none;
}

.calendar-year-hidden{
    display:none;
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    width:120px !important;
    margin-top:6px;
    z-index:100;
}

.calendar-dropdown{
    position:relative;
}

.calendar-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    z-index:1000;
}

.calendar-menu a{
    display:block;
    padding:8px 12px;

    font-size:14px;
    font-weight:400;

    color:#333;
    text-decoration:none;

    text-align:left;
}

.calendar-menu a:hover{
    background:#f4f7fb;
}

#yearMenu{
    width:max-content;
    min-width:85px;
}

#monthMenu{
    width:max-content;
    min-width:140px;
}

.details-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.details-header h3{
    margin:0;
}

.day-number{
    font-weight:bold;
    margin-bottom:8px;
}

.empty{
    background:transparent;
    border:none;
}

.appointment-dot{
    font-size:11px;
    padding:4px;
    border-radius:4px;
    margin-bottom:4px;
    color:white;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.past{
    background:#e53935;
}

.today{
    background:#43a047;
}

.future{
    background:#1e88e5;
}

.calendar-selected-day{
    background:white;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:
        0 2px 8px rgba(0,0,0,.10);

}

.appointments-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;

}

.appointment-widgets{
    display:flex;
    gap:15px;
    width:100%;
    min-width:0;
    overflow:hidden;
    padding:0;
    justify-content:flex-start;
    scrollbar-width:none;
}

.appointment-widget{
	flex:0 0 260px;
	scroll-snap-align:start;
    background:#f8fbff;
    border:1px solid #d6e7f7;
    border-left:5px solid #1e88e5;
    border-radius:10px;
    padding:15px;
    transition:.25s ease;

}

.appointment-widgets::-webkit-scrollbar{
    display:none;
}

.appointment-widget:hover{
    transform:translateY(-3px);
    box-shadow:
        0 6px 18px rgba(0,0,0,.12);

}

.appointment-widget strong{
    display:block;
    margin-bottom:10px;
    color:#0b3c66;
    font-size:18px;

}

.appointment-widget div{
    color:#666;
    font-size:13px;
    margin-top:4px;

}
/* =========================================
   APPOINTMENTS
========================================= */
.appointments-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:12px;
    overflow:hidden;
}

.appointments-table td,
.appointments-table th{
    padding:14px 16px;
}

.appointments-table tr:hover{
    background:#f8fbff;
}

#appointmentsNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:20px;
}

#appointmentsNavigation span{
    cursor:pointer;
    user-select:none;
}

#appointmentCounter{
    font-weight:600;
}

#completedFields{
    display:none;
}

#appointmentForm form,
#editAppointmentForm form{
    max-width:550px;
    width:100%;
    margin:0 auto;
}

#appointmentForm h2,
#editAppointmentForm h2{
    text-align:center;
    margin-bottom:25px;
}

#appointmentForm .filter-wrapper,
#editAppointmentForm .filter-wrapper{
    width:100%;
}

#appointmentForm input,
#appointmentForm select,
#appointmentForm input[type="date"],
#appointmentForm input[type="time"],
#editAppointmentForm input,
#editAppointmentForm select,
#editAppointmentForm input[type="date"],
#editAppointmentForm input[type="time"]{
    width:100%;
    height:50px;
}

#appointmentForm textarea,
#editAppointmentForm textarea{
    min-height:100px;
    resize:vertical;
}

.form-actions{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:25px;
}

/* =========================================
   CUSTOMERS
========================================= */
.customer-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.customer-card{
    background:#fff;
    border-radius:12px;
    padding:20px;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.customer-card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(0,0,0,.12);

}

#customerEditForm,
#locationForm{
    max-width:550px;
    width:100%;
    margin:0 auto;
}

#customerEditForm textarea{
    min-height:100px;
    resize:vertical;
}

.customer-name{
    font-size:18px;
    font-weight:700;
    color:#0b3c66;
    margin-bottom:10px;

}

.customer-phone{
    font-size:14px;
    color:#555;
    margin-bottom:6px;
}

.customer-city{
    font-size:14px;
    color:#777;
}

#customerLocations{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:15px;
}

.location-item{
    min-width:250px;
    flex:1;
    border:1px solid #ddd;
    border-radius:8px;
    padding:12px;
    background:#fff;
}

.customer-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(3px);
    justify-content:center;
    align-items:center;
    z-index:2000;
}

.customer-modal-content{
    width:1200px;
    max-width:95vw;
    max-height:90vh;
    overflow-y:auto;

    background:#fff;
    border-radius:16px;
    padding:30px;
    box-shadow:0 10px 40px rgba(0,0,0,.25);

    display:flex;
    flex-direction:column;
}

.customer-modal-content h3{
    margin:0 0 20px;
}

.customer-modal-content p{
    margin:12px 0;
}

.customer-layout{
    display:grid;
    grid-template-columns:350px 1fr;
    gap:30px;
}

.customer-sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;

    padding-right:25px;
    border-right:1px solid #e5e7eb;
}

.customer-main{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.customer-section{
    background:#fff;
}

.section-header{
    display:flex;
    align-items:center;
    width:100%;
    padding-bottom:10px;
    margin-bottom:15px;
    border-bottom:1px solid #e5e7eb;
}

.section-header h4{
    margin:0;
}

.location-viewer{
    display:flex;
    align-items:center;
    gap:15px;
}

#customerLocations{
    flex:1;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.section-header h4{
    margin:0;
}

.customer-history-section{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #e5e7eb;
}

#addLocationButton{
    background:none;
    border:none;
    padding:0;
    color:#1e88e5;
    font-weight:600;
    cursor:pointer;
    box-shadow:none;
    margin-bottom:5px;
    width:auto;
}

#addLocationButton:hover{
    background:none;
    color:#1565c0;
}

#addLocationButton,
#addEquipmentButton{
    width:auto;
    margin-left:auto;
    padding:0;
}

.edit-location{
    color:#1e88e5;
    font-weight:600;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
}

.delete-location{
    color:#dc3545;
    font-weight:600;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
}

.detail-actions{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:25px;
}

.detail-actions button{
    width:auto;
    min-width:140px;
    padding:12px 24px;
}

.customer-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
	gap:15px;
}

.customer-toolbar h1{
    margin:0;
}

.customer-toolbar button{
    width:auto;
    margin:0;
}

#appointmentHistory{
    flex:1;
    text-align:center;
    margin-top:5px;
    display:flex;
    flex-direction:column;
    gap:12px;
}


.history-viewer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:10px;
}

#prevHistory,
#nextHistory{
    cursor:pointer;
    user-select:none;
    font-size:22px;
    font-weight:700;
    color:#0b3c66;
    padding:8px;
}

#prevHistory:hover,
#nextHistory:hover{
    color:#2563eb;
}

.history-item{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:12px;
    min-height:80px;
    font-size:14px;
    color:#555;
}

.history-item strong{
    display:block;
    margin-bottom:8px;
}

.equipment-item{
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
}

#equipmentNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;

}

#equipmentCounter{
    min-width:60px;
    text-align:center;

}

#equipmentNavigation span {
    cursor: pointer;
    user-select: none;
}

#equipmentList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
	margin-top:0;
}

#equipmentNavigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}
	
#equipmentNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    width:100%;
    margin-top:25px;
}

.equipment-buttons{
    display:flex;
    gap:15px;
    margin-top:10px;
}

.equipment-buttons button{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    width:auto !important;
    flex:none;
    box-shadow:none;

}

.equipment-buttons button:hover{
    background:none;

}

.edit-equipment{
    color:#1e88e5;
    font-weight:600;
}

.delete-equipment{
    color:#dc3545 !important;
    font-weight:600;
}

#addEquipmentButton{
    background:none;
    border:none;
    padding:0;
    color:#1e88e5;
    font-weight:600;
    cursor:pointer;
    box-shadow:none;
    margin-bottom:5px;
}

#addEquipmentButton:hover{
    background:none;
    color:#1565c0;
}

.warranty-active{
    color:#155724;
    background:#d4edda;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.warranty-expired{
    color:#721c24;
    background:#f8d7da;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

#customerNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:30px;
}

#customerNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;
}

#customerCounter{
    min-width:60px;
    text-align:center;
}

#prevLocation,
#nextLocation{
    cursor:pointer;
    user-select:none;
    font-size:22px;
    font-weight:700;
    color:#0b3c66;
    padding:8px;
}

#prevLocation:hover,
#nextLocation:hover{
    color:#2563eb;
}

#locationCounter{
    text-align:center;
    margin-top:10px;
    font-weight:600;
}

#equipmentForm{
    max-width:800px;
    width:100%;
    margin:0 auto;
}

.equipment-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.equipment-field{
    display:flex;
    flex-direction:column;
}

#equipmentActions{
    margin-top:20px;
}

/* =========================================
   TECHNICIANS
========================================= */
.technicians-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.btn-toggle,
.btn-toggle:visited {
    color: #1e88e5;
    text-decoration: none;
}

.card-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    align-items: center;
}

.card-actions a {
    text-decoration: none;
}

.btn-edit,
.btn-edit:visited {
    color: #1e88e5;
}

.btn-warning,
.btn-warning:visited {
    color: #ff9800;
}

.btn-delete,
.btn-delete:visited {
    color: #f44336;
}

.card-actions a:hover {
    opacity: 0.8;
}

.toolbar .btn-primary{
    width:auto;
    height:50px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    flex:none;
}

.card-actions form {
    margin: 0;
}

.card-actions button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

#technicianNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:30px;
}

#technicianNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;
}

#technicianCounter{
    min-width:60px;
    text-align:center;
}

#technicianForm form{
    max-width:550px;
    margin:0 auto;
}

#technicianForm h3{
    text-align:center;
    margin-bottom:25px;
}

#technicianForm .form-actions{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:25px;
}

#technicianForm .form-actions button{
    min-width:180px;
}

/* =========================================
   TOAST NOTIFICATIONS
========================================= */
#toastContainer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 280px;
    padding: 12px 18px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: toastIn 0.3s ease;
}

.toast-success {
    background: #43a047;
}

.toast-error {
    background: #e53935;
}

.toast-warning {
    background: #fb8c00;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform:
            translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SETTINGS MENU / SUBMENU
========================================= */

.submenu{
    display:none;
    margin-left:15px;
}

.submenu.open{
    display:block;
}

.submenu a{
    font-size:14px;
    padding:10px 12px;
    opacity:.9;
}

.submenu-active{
    background:#1e88e5 !important;
    font-weight:600;
    border-radius:6px;
    opacity:1 !important;
}

.submenu a:not(.submenu-active):hover{
    background:rgba(255,255,255,.08);
    border-radius:6px;
}

.submenu-child{
    padding-left:35px !important;
}

.submenu-parent{
    display:flex;
    align-items:center;
    gap:6px;
}

.submenu-parent a{
    flex:none;
}

#emailArrow,
#backupArrow,
#aclArrow,
#expensesArrow{
    cursor:pointer;
    user-select:none;
    font-size:12px;
}

#emailArrow:hover,
#backupArrow:hover,
#aclArrow:hover,
#expensesArrow:hover{
    opacity:.8;
}


/* =========================================
   SETTINGS HEADER
========================================= */

.settings-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.settings-apply{
    padding:10px 28px;
    border:3px solid #c7c7c7;
    border-radius:14px;
    background:transparent;
    color:#999;
    font-size:18px;
    font-weight:600;
    line-height:1;
    cursor:default;
    user-select:none;
    transition:.25s ease;
}

.settings-apply.active{
    border-color:#4c52d9;
    color:#4c52d9;
    cursor:pointer;
}

.settings-apply.active:hover{
    background:rgba(76,82,217,.08);
}

/* =========================================
   SETTINGS CONTENT
========================================= */

#basicSettingsForm{
    max-width:550px;
    width:100%;
    margin:0 auto;
}

.settings-tip{
    margin:15px 0;
    padding:12px;
    background:#f4f7fb;
    border-left:4px solid #1e88e5;
    border-radius:6px;
    font-size:14px;
}

.backup-filename{
    word-break:break-word;
}

.backup-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 0;
}

.backup-item a{
    flex:1;
    min-width:0;
}

.backup-list{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.backup-delete-form{
    flex:0 0 70px;
    margin:0;
    display:flex;
    justify-content:flex-end;
}

.backup-item{
    justify-content:flex-start;
}

.backup-delete-link{
    display:inline-block;
    padding:4px 10px;
    border:1px solid #dc3545;
    border-radius:6px;
    background:rgba(220,53,69,.08);
    color:#dc3545;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    transition:.2s ease;
}

.backup-delete-link:hover{
    background:rgba(220,53,69,.15);
}

#backupSettingsForm{
    margin-top:10px;
}

.backup-limits{
    display:grid;
    grid-template-columns:auto auto;
    gap:20px;
    justify-content:start;
}

.backup-limit-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.backup-limit-row label{
    margin:0;
    white-space:nowrap;
}

.backup-limit-row input{
    width:80px !important;
    flex:none;
    margin:0;
}

.backup-type{
    padding:10px 0;
    border-bottom:1px solid #e5e5e5;
}

.backup-type:last-child{
    border-bottom:none;
}

.specialty-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
}

.specialty-item strong{
    flex:1;
}

.specialty-actions{
    display:flex;
    align-items:center;
    gap:15px;
    flex-shrink:0;
}

.specialty-actions form{
    margin:0;
}

.specialty-delete{
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
    width:auto;
    cursor:pointer;

    color:#dc3545;
    font-size:18px;
}

.specialty-delete:hover{
    background:none !important;
}

.specialty-item .btn-edit{
    margin:0;
}

.settings-form{
    max-width:350px;
    width:100%;
    margin:0 auto 25px;
}

.settings-form button{
    display:block;
    width:auto;
    margin:20px auto 0;
}

.settings-form input{
    width:100%;
}

.settings-search{
    display:flex;
    justify-content:flex-start;
    margin-bottom:20px;
}

.settings-search .search-wrapper{
    width:300px;
}

#usernameSettingsForm,
#passwordSettingsForm{
    max-width:350px;
    width:100%;
    margin:0 auto;
}

/* =========================================
   EQUIPMENT TYPES
========================================= */
#equipmentTypesNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:20px;
}

#equipmentTypesNavigation span{
    cursor:pointer;
    user-select:none;
    font-size:1.1rem;
}

#equipmentTypesNavigation span:hover{
    opacity:.7;
}

/* =========================================
   SPECIALTY TYPES
========================================= */
#specialtiesNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:20px;
}

#specialtiesNavigation span{
    cursor:pointer;
    user-select:none;
    font-size:1.1rem;
}

#specialtiesNavigation span:hover{
    opacity:.7;
}

/* =========================================
   ROLES / PERMISSIONS / ASSIGNMENT
========================================= */

.acl-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.acl-toolbar .search-wrapper{
    width:300px;
    min-width:300px;
    max-width:300px;
    flex:none;
}

.role-selector-form{
    display:flex;
    align-items:center;
    gap:12px;
}

.role-selector-form label{
    margin:0;
    white-space:nowrap;
}

.role-selector-form select{
    width:250px;
    margin:0;
}

.permission-group{
    margin-bottom:20px;
}

.permission-group-header{
    padding:12px 0 8px;
    border-bottom:1px solid #e5e5e5;
}

.permission-group-header label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
}

.permission-group-header input[type="checkbox"]{
    width:auto;
    margin:0;
}

.permission-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(250px,1fr)
    );
    gap:10px 20px;
    padding:12px 0;
}

.permission-item{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
}

.permission-item input[type="checkbox"]{
    width:auto;
    margin:0;
    flex:none;
}

.permission-item span{
    white-space:nowrap;
}

/* =========================================
   ROLES
========================================= */

.roles-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.roles-toolbar button{
    width:auto;
    flex:none;
}

.roles-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

.roles-table th,
.roles-table td{
    padding:14px 16px;
    border-bottom:1px solid #ddd;
    text-align:left;
    vertical-align:middle;
}

.roles-table th{
    background:#f3f6f9;
    font-weight:600;
}

.roles-table tr:hover{
    background:#f8fbff;
}

.roles-table td:first-child{
    font-weight:600;
    color:#0b3c66;
}

.role-actions{
    white-space:nowrap;
}

.role-actions a,
.role-actions button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:auto;
    min-width:32px;

    margin-right:10px;
    padding:0;

    background:none;
    border:none;
    box-shadow:none;

    cursor:pointer;
    text-decoration:none;

    font-size:18px;
}

.role-actions a:last-child,
.role-actions button:last-child{
    margin-right:0;
}

.btn-toggle-role{
    color:#1e88e5;
}

.btn-toggle-role:hover{
    color:#1565c0;
    background:none;
}

.btn-edit-role{
    color:#fb8c00;
}

.btn-edit-role:hover{
    color:#ef6c00;
    background:none;
}

.btn-delete-role{
    color:#dc3545;
}

.btn-delete-role:hover{
    color:#b71c1c;
    background:none;
}

.role-status-active{
    display:inline-block;
    color:#0f5132;
    background:#d1e7dd;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.role-status-suspended{
    display:inline-block;
    color:#842029;
    background:#f8d7da;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.role-type-system{
    display:inline-block;
    color:#084298;
    background:#cfe2ff;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.role-type-custom{
    display:inline-block;
    color:#664d03;
    background:#fff3cd;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

/* =========================================
   PERMISSIONS DICTIONARY
========================================= */

#permissionNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:30px;
}

#permissionNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;
    font-size:1.1rem;
}

#permissionNavigation span:hover{
    opacity:.7;
}

#permissionCounter{
    min-width:60px;
    text-align:center;
}

.permission-row code{
    color:#0b3c66;
    font-weight:600;
    font-size:14px;
}

.roles-table td.role-actions{
    text-align:center;
}

/* =========================================
   MODALS
========================================= */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(3px);
    justify-content:center;
    align-items:center;
    z-index:3000;
}

.modal-content{
    width:550px;
    max-width:95vw;
    background:#fff;
    border-radius:12px;
    padding:25px;
    box-shadow:
        0 10px 40px rgba(0,0,0,.25);
}

.modal-content h3{
    text-align:center;
    margin-top:0;
    margin-bottom:25px;
}

.modal form{
    width:100%;
}

.modal label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.modal input[type="text"],
.modal select{
    width:100%;
    margin-bottom:15px;
    box-sizing:border-box;
}

.modal .form-actions{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:25px;
}

.modal .form-actions button{
    width:auto;
    min-width:140px;
}

.btn-edit-permission{
    color:#fb8c00;
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
    cursor:pointer;
    font-size:18px;
}

.btn-edit-permission:hover{
    background:none;
    color:#ef6c00;
}

/* =========================================
   PERMISSIONS TABLE
========================================= */

.roles-table{
    max-width:1100px;
    margin:0 auto;
}

.roles-table th:last-child,
.roles-table td:last-child{
    width:100px;
    text-align:center;
}

/* =========================================
   CREATE ROLE MODALS
========================================= */
#roleForm,
#editRoleForm{
    max-width:100%;
}

#roleForm input,
#roleForm select,
#editRoleForm input{
    width:100%;
}

/* =========================================
   FEATURES
========================================= */

.feature-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #e5e5e5;
}

.feature-row:last-child{
    border-bottom:none;
}

.feature-row label{
    flex:1;
    margin:0;
    cursor:pointer;
}

.feature-row input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    cursor:pointer;
}

/* =========================================
   CAMPAIGNS
========================================= */
.campaign-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:12px;
    overflow:hidden;
}

.campaign-table th,
.campaign-table td{
    padding:14px 16px;
    border-bottom:1px solid #ddd;
    text-align:left;
}

.campaign-table th{
    background:#f3f6f9;
}

.campaign-table tr:hover{
    background:#f8fbff;
}

#campaignsNavigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

#campaignsNavigation span {
    cursor: pointer;
}

#campaignsNavigation span:hover {
    color: #007bff;
}

.btn-view {
    text-decoration: none;
    margin: 0 3px;
}

.campaign-summary {
    background: #f8f9fb;
    border-left: 4px solid #2d89ef;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;
}

.schedule-datetime {
    width: 100%;
    max-width: 350px;
    height: 48px;
    padding: 12px;
    font-size: 15px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-sizing: border-box;
}

.schedule-warning {
    margin: 20px 0;
    padding: 12px 16px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
    border-radius: 6px;
    font-size: 14px;
}

.alert-success,
.alert-warning {
    width: 100%;
    max-width: 600px;
    padding: 14px 18px;
    margin: 15px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border-left: 4px solid;
}

.alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border-left-color: #4caf50;
}

.alert-warning {
    background: #fff8e1;
    color: #8a6d3b;
    border-left-color: #ffc107;
}

.automation-command {
    width: 100%;
    max-width: 600px;
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 15px 0;
}

.automation-command code {
    flex: 1;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 6px;
    font-family: monospace;
    word-break: break-all;
}

.automation-command button {
    padding: 10px 15px;
    cursor: pointer;
}

.campaign-stats-table {
    width: 100%;
	max-width: 500px;
    border-collapse: collapse;
    margin-top: 15px;
}

.campaign-stats-table th,
.campaign-stats-table td {
    padding: 12px;
    text-align: center;
}

.campaign-stats-table th {
    border-bottom: 2px solid #ddd;
    font-weight: 600;
}

.campaign-stats-table tbody td {
    font-size: 16px;
}

.link-action{
    color:#1e88e5;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
}

.link-action:hover{
    color:#1565c0;
    text-decoration:none;
}
/* =========================================
   CAMPAIGN REPORT
========================================= */
#campaignReportNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:25px;
}

#campaignReportNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;
}

#deliveryCounter{
    min-width:60px;
    text-align:center;
}

/* =========================================
   EXPENSES
========================================= */
.btn-toggle-category,
.btn-toggle-cost-center{
    color:#1e88e5;
}

.btn-toggle-category:hover,
.btn-toggle-cost-center:hover{
    color:#1565c0;
    background:none;
}

.btn-edit-category,
.btn-edit-cost-center{
    color:#fb8c00;
}

.btn-edit-category:hover,
.btn-edit-cost-center:hover{
    color:#ef6c00;
    background:none;
}

.expense-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.expense-toolbar .search-wrapper{
    max-width:350px;
}

.expense-toolbar #showExpenseForm{
    margin-left:auto;
}

.expense-category-toolbar{
    display:flex;
    align-items:center;
    gap:15px;
}

.expense-category-toolbar #showCategoryForm{
    margin-left:auto;
}

/* -----------------------------------------
   Expense Actions
----------------------------------------- */

.expense-actions{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
    justify-items:center;
}

.expense-actions form{
    margin:0;
}

.expense-actions button{
    background:none;
    border:none;
    padding:0;
    width:auto;
    min-width:auto;
    cursor:pointer;
    font-size:22px;
}

.expense-actions button:hover{
    background:none;
    transform:scale(1.1);
}

/* -----------------------------------------
   Expense Forms
----------------------------------------- */

.expense-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.expense-field{
    display:flex;
    flex-direction:column;
}

.expense-full{
    grid-column:1 / -1;
}

.expense-grid textarea{
    min-height:120px;
    resize:vertical;
}

.current-receipt-file{
    padding:10px 12px;
    border:1px solid #d6e7f7;
    background:#f8fbff;
    border-radius:8px;
    color:#555;
}

.form-help{
    display:block;
    color:#777;
    font-size:12px;
    margin-top:5px;
}

#expenseModal .modal-content,
#editExpenseModal .modal-content{
    width:1200px;
    max-width:95vw;
}

#expenseForm .form-actions,
#editExpenseForm .form-actions{
    grid-column:1 / -1;
}

/* -----------------------------------------
   Expenses Pagination
----------------------------------------- */

#expensesNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:25px;
}

#expensesNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;
    transition:.2s ease;
}

#expensesNavigation span:hover{
    color:#1e88e5;
}

#expenseCounter{
    min-width:60px;
    text-align:center;
}

/* -----------------------------------------
   Expense Categories / Cost Centers
----------------------------------------- */

#categoriesNavigation,
#costCentersNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:30px;
}

#categoriesNavigation span,
#costCentersNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;
    transition:.2s ease;
}

#categoriesNavigation span:hover,
#costCentersNavigation span:hover{
    color:#1e88e5;
}

#categoryCounter,
#costCenterCounter{
    min-width:60px;
    text-align:center;
}

/* =========================================
   LOOKUP MODULES
   Categories + Cost Centers
========================================= */

.lookup-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.lookup-toolbar button{
    width:auto;
    flex:none;
}

.lookup-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

.lookup-table th,
.lookup-table td{
    padding:14px 16px;
    border-bottom:1px solid #ddd;
    text-align:left;
    vertical-align:middle;
}

.lookup-table th{
    background:#f3f6f9;
    font-weight:600;
}

.lookup-table tr:hover{
    background:#f8fbff;
}

.lookup-table td:first-child{
    font-weight:600;
    color:#0b3c66;
}

.lookup-actions{
    white-space:nowrap;
}

.lookup-actions button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:32px;
    margin-right:10px;
    padding:0;
    background:none;
    border:none;
    box-shadow:none;
    cursor:pointer;
    font-size:18px;
}

.lookup-actions button:last-child{
    margin-right:0;
}

.lookup-table td.lookup-actions{
    text-align:center;
}

.lookup-status-active{
    display:inline-block;
    color:#0f5132;
    background:#d1e7dd;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.lookup-status-suspended{
    display:inline-block;
    color:#842029;
    background:#f8d7da;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

/* =========================================
   EXPENSE REPORTS
========================================= */
.report-grid{
    display:grid;
    grid-template-columns:
        repeat(5,minmax(140px,1fr));
    gap:15px;
    align-items:end;
}

.report-field{
    display:flex;
    flex-direction:column;
}

.report-field label{
    margin-bottom:6px;
    font-weight:600;
}

.report-actions{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-top:20px;
}

.expense-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:20px;
}

.stat-card{
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    border-left:4px solid #0b3c66;
}

.stat-card h3{
    margin:0 0 12px 0;
    font-size:15px;
    color:#666;
}

.stat-card p{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#0b3c66;
}

.stat-card.approved{
    border-left-color:#28a745;
}

.stat-card.pending{
    border-left-color:#f39c12;
}

.stat-card.rejected{
    border-left-color:#dc3545;
}

.report-section{
    margin-top:25px;
}

.report-section h2{
    margin-bottom:20px;
}

.report-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.report-table th,
.report-table td{
    padding:12px;
    text-align:left;
    border-bottom:1px solid #e5e7eb;
}

.report-table th{
    background:#f5f7fa;
    font-weight:600;
}

.report-table th:nth-child(2),
.report-table th:nth-child(3),
.report-table td:nth-child(2),
.report-table td:nth-child(3){
    text-align:center;
}

.report-print-date{
    color:#666;
    font-size:12px;
    margin-bottom:20px;
}

/* =========================================
   REPORT ACTION ICONS
========================================= */
.report-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    text-decoration:none;
    font-size:24px;
    cursor:pointer;
}

.report-actions button,
.report-actions .btn-cancel{
    width:145px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.report-icon:hover{
    opacity:.8;
}

.report-icon .fa-print{
    color:#0b3c66;
}

.report-icon .fa-file-pdf{
    color:#dc3545;
}

.report-icon .fa-file-excel{
    color:#28a745;
}

/* =========================================
   PRINT
========================================= */

@media print{

    /* Hide navigation and actions */
    .sidebar,
    #mobileMenuButton,
    #mobileMenuOverlay,
    .report-actions{
        display:none !important;
    }

    /* Full page width */
    .wrapper{
        display:block !important;
    }

    .content{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
    }

    /* Clean report cards */
    .dashboard-card{
        box-shadow:none !important;
        border:1px solid #ddd !important;
		margin-bottom:15px !important;
        page-break-inside:avoid;
        break-inside:avoid;
    }

    h1{
        margin-bottom:20px !important;
    }
	
    /* Better spacing */
    .report-section{
        margin-top:15px;
    }

    /* Avoid links showing blue */
    a{
        color:#000 !important;
        text-decoration:none !important;
    }
	
    .report-filters-card{
        display:none !important;
    }

    .stat-card{
        border-left:1px solid #ddd !important;
    }

    thead{
        display:table-header-group;
    }
	
    /* Avoid print colors poorly */
    body,
    h1,
    h2,
    h3,
    td,
    th,
    p,
    span{
        color:#000 !important;
    }
}

/* =========================================
   JOB HISTORY
========================================= */
.jobhistory-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:12px;
    overflow:hidden;
}

.jobhistory-table th,
.jobhistory-table td{
    padding:14px 16px;
    border-bottom:1px solid #ddd;
    text-align:left;
}

.jobhistory-table th{
    background:#f3f6f9;
}

.jobhistory-table tr:hover{
    background:#f8fbff;
}

#historyNavigation{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:30px;
}

#historyNavigation span{
    cursor:pointer;
    user-select:none;
    font-weight:600;
}

#historyCounter{
    min-width:60px;
    text-align:center;
}

/* =========================================
   INSTALLER
========================================= */
.installer-body{
    background:#f0f3f7;
    font-family:"Segoe UI",sans-serif;
}

.installer-wrapper{
    max-width:800px;
    margin:0px auto;
    padding:10px;
}

.installer-card{
    background:#fff;
    border-radius:12px;
    padding:25px;
    margin-bottom:20px;
    box-shadow:
        0 8px 24px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.06);
}

.installer-row{
    display:grid;
    grid-template-columns:180px 1fr;
    align-items:center;
    gap:15px;
    margin-bottom:12px;
}

.installer-row label{
    margin:0;
    font-weight:600;
}

.installer-row input,
.installer-row select{
    margin:0;
}

.installer-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:20px;
}

.installer-actions button{
    width:180px;
}

.installer-card label{
    display:block;
    margin-top:12px;
    margin-bottom:6px;
}

.installer-card input,
.installer-card select{
    width:100%;
}

.installer-header{
    padding:15px 25px;
}

.installer-header h1{
    margin:0;
}

.installer-header h2{
    margin:8px 0 0;
}

.installer-header{
    position:relative;
}

.installer-language-toggle{
    position:absolute;
    top:15px;
    right:20px;
    display:flex;
    gap:8px;
    align-items:center;
}

.installer-language-toggle a{
    text-decoration:none;
    color:#666;
    font-weight:600;
}

.installer-language-toggle a.active{
    color:#1e88e5;
}