/* TODO use SASS: https://stackoverflow.com/questions/28261287/how-to-change-btn-color-in-bootstrap */

body {
    font-family: var(--senoty-font-regular) !important;
    color: var(--senoty-text-dark) !important;
}

/* White Background Card */
.bg-card {
    background-color: white !important;
    border-radius: 1rem !important;
    padding: 1rem;
    margin-bottom: 1rem !important;
    box-shadow: 0 2px 2px lightgray !important;
    border: none !important;
}

/* Green Background Card */
.bg-card-green {
    background-color: var(--senoty-color-green) !important;
    border-radius: 1rem !important;
    padding: 1rem;
    margin-bottom: 1rem !important;
    box-shadow: 0 2px 2px lightgray !important;
    border: none !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
    background-color: var(--senoty-primary-color) !important;
    border-color: var(--senoty-primary-color) !important;
    color: var(--senoty-text-light) !important;
    text-decoration-color: var(--senoty-text-light) !important;
}

.btn-secondary-customized,
.btn-secondary-customized:hover,
.btn-secondary-customized:active,
.btn-secondary-customized:visited {
    background-color: var(--senoty-secondary-color) !important;
    border-color: var(--senoty-secondary-color) !important;
    color: var(--senoty-text-dark) !important;
    text-decoration-color: var(--senoty-text-dark) !important;
}

.btn-outline-primary {
    border-color: var(--senoty-primary-color) !important;
    text-decoration-color: var(--senoty-primary-color) !important;
    --bs-btn-active-bg: var(--senoty-primary-color);
    --bs-btn-color: var(--senoty-primary-color)
}

.btn-outline-primary:hover {
    background-color: var(--senoty-primary-color);
    border-color: var(--senoty-primary-color) !important;
    text-decoration-color: var(--senoty-primary-color) !important;
}

.btn-check:active {
    background-color: var(--senoty-primary-color) !important;
}

.btn-back-div {
    max-width: 0px;
}

.card-next-to-back-btn {
    margin-left: 15%;
    margin-right: auto;
}

.text-right {
    text-align: right;
}

.card {
    border-radius: 20px;
    padding: 18px;
    margin: 8px 0;
    box-shadow: 0 2px 2px lightgray;
}

.offcanvas {
    width: 80rem !important;
    max-width: 75% !important;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
    font-family: var(--senoty-font-regular) !important;
}

p {
    margin: 0;
}

.btn-text-bold,
.btn-text-bold:hover,
.btn-text-bold:active,
.btn-text-bold:visited {
    font-family: var(--senoty-font-regular) !important;
    background-color: var(--senoty-primary-color) !important;
    border-color: var(--senoty-primary-color) !important;
    color: var(--senoty-text-light) !important;
    text-decoration-color: var(--senoty-text-light) !important;
}

.btn-nothing {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    text-decoration: none;
}

.btn-mp-show-user,
.btn-mp-add-user {
    width: 18rem;
}

.dropdown-item:active {
    background-color: var(--senoty-primary-color) !important;
}

.badge {
    margin-right: 8px;
    padding: 4px 13px;
    font-family: var(--senoty-font-regular) !important;
    box-shadow: 0 2px 2px lightgrey;
}

.badge.bg-primary {
    background-color: var(--senoty-text-dark) !important;
}

.badge.bg-secondary {
    color: var(--senoty-text-dark) !important;
    background-color: #d0d5e7 !important;
}

.badge.bg-danger {
    background-color: var(--senoty-milano-red) !important;
    width: fit-content;
}

.badge.bg-yellow {
    color: var(--senoty-text-dark) !important;
    background-color: var(--senoty-barley-corn) !important;
}

.badge.bg-white {
    color: var(--senoty-text-dark) !important;
    background-color: white !important;
}

.badge-change, .badge-change-accepted {
    color: var(--senoty-color-green) !important;
    font-family: var(--senoty-font-regular) !important;
    background-color: white !important;
    box-shadow: none !important;
    border: 1px solid var(--senoty-color-green);
}

.badge-change-pending {
    color: #FFD700 !important;
    font-family: var(--senoty-font-regular) !important;
    background-color: white !important;
    box-shadow: none !important;
    border: 1px solid #FFD700;
}

.badge-change-declined {
    color: #DC3545 !important;
    font-family: var(--senoty-font-regular) !important;
    background-color: white !important;
    box-shadow: none !important;
    border: 1px solid #DC3545;
}

.badge.round {
    width: 40px;
    height: 40px;
    padding: 6px 0;
    border-radius: 20px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
    box-shadow: none;
}

.form-check-input:checked {
    background-color: Linen;
    border-color: grey;
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='black'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='black'/%3e%3c/svg%3e");
}

.form-control:focus {
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}

.vr {
    height: 120px;
    opacity: 1;
    width: 2px
}

.station_element:last-child .row .col-1 .vr {
    display: none !important;
}

/* Leaflet Maps */

.leaflet-container a {
    color: var(--senoty-text-dark) !important;
}

.leaflet-attribution-flag {
    display: none !important;
}

span.error {
    border: 1px solid #dc3545;
}

.form-control.is-invalid:focus {
    border: 1px solid #dc3545 !important;
    border-left: none !important;
}

.form-control.time.is-invalid:focus {
    border: 1px solid #dc3545 !important;
}

.input-group-text {
    padding: 1rem .75rem !important;
}

.checkbox-lg {
    scale: 1.4;
    accent-color: var(--senoty-color-green);
}

.readonly-field {
    background-color: #d9dfe6;
}

.readonly-field:focus {
    background-color: #d9dfe6;
}

.accordion {
    box-shadow: 0 2px 2px lightgray !important;
    border-radius: 1rem !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--senoty-primary-color);
    color: var(--senoty-text-light);
}

.accordion-text {
    text-decoration: none !important;
    color: var(--senoty-text-dark) !important;
}

.accordion-end {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.mobility-configurator-admin-symbols {
    font-size: 78px !important;
}

.approve-decline-buttons {
    text-decoration: none;
}

.mobility-configurator-approve-decline-row {
    padding-right: 20px;
}

.mobility-budget-symbols {
    font-size: 120px !important;
}

.mobility-configuration-element-symbol {
    font-size: 100px !important;
}

.mobility-configuration-element-input {
    display: none;
}

/* DataTables */

.table {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.active > .page-link {
    background-color: var(--senoty-primary-color);
    border-color: var(--senoty-primary-color);
}

.page-link {
    color: var(--senoty-text-dark);
}

.page-link:hover {
    border-color: var(--senoty-text-dark);
    color: var(--senoty-text-light);
    background-color: var(--senoty-text-dark);
}

.dataTables_wrapper > .top {
    display: flex;
    justify-content: space-between;
}

.dataTables_wrapper > .bottom {
    display: flex;
    justify-content: space-between;
}

/* Button CSV Export */
.buttons-csv {
    background: none !important;
    border-radius: 800px !important;
    border-color: var(--senoty-primary-color) !important;
    text-decoration-color: var(--senoty-primary-color) !important;
    --bs-btn-active-bg: var(--senoty-primary-color);
    --bs-btn-color: var(--senoty-primary-color)
}

.buttons-csv:hover {
    background-color: var(--senoty-primary-color) !important;
    text-decoration-color: var(--senoty-primary-color) !important;
}

/* User Chart Container (used € and Co2) */
.chart-container {
    position: relative;
    margin: auto;
    width: 13vw;
    height: 152px;
}

/* Progress bar */
.progress-bar {
    position: relative;
    height: 40px;
    width: 100%;
    background: white;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}

.progress-fill {
    position: absolute;
    height: 40px;
    width: 0;
    background: #027295;
    border-radius: 8px;
    transition: width 0.5s ease-in-out;
    color: white;
}

/* Header */
.header {
    min-height: 68px !important;
}

.header-logo {
    width: auto; 
    height: 50px;
    max-width: 260px;
}

.header-avatar {
    width: 40px; 
    height: 40px;
}

/* Symbol columns on issues pages*/

.issues-symbol-col {
    width: fit-content;
}

/* Route Card */

.route-card-icon-row {
    width: 75px;
}

.route-card-material-icons {
    font-size: 25px;
}

.no-btn {
    border: none;
    background-color: inherit;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}
  
.no-btn-primary {color: inherit;}

/* MyTrips cards for failed booking */

.booking-process-failed {
    opacity: 0.5;
}


/* Style to handle the sidebar */

.disable-menu-item {
    pointer-events: none;
}

.disable-menu-item:hover {
    cursor: initial;
}

.sidebar {
    background-color: var(--senoty-primary-color) !important;

    width: fit !important;
    max-width: 220px !important;
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar.collapsed .menu-text {
    display: none;
}

.sidebar.collapsed .expand-item {
    display: initial !important;
}

.sidebar.collapsed .sidebar-item {
    height: 55px;

}

.sidebar-item {
    min-width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
}

.sidebar-item:hover {
    background-color: rgba(128, 128, 128, 0.25);
    
}

.sidebar-item.active {
    background-color: var(--senoty-secondary-color);
    color: var(--senoty-primary-color) !important;
}

.sidebar-item.active .material-icons {
    color: var(--senoty-primary-color);
}

@media (max-width: 900px) {
    .sidebar {
        width: 60px !important;
    }

    .sidebar .menu-text {
        display: none;
    }

    .sidebar .expand-item {
        display: initial !important;
    }

    .sidebar .sidebar-item {
        height: 55px;
    }

    .collapse-toggle {
        display: none;
    }
}

/* MobilityConfiguration */
.enableMobilityConfiguration.btn.selected {
    color: #17A962 !important;
}

/* My Subscription Deutschlandticket */
.ticket-template-deutschlandticket-1 {
    max-width: initial !important;
}