/* ==========================================================================
   Buttons / Alerts / Helpers
   ========================================================================== */

.btn.btn-outline-dark {
    color: var(--arcs-heading);
    border-color: color-mix(in srgb, var(--arcs-border-strong) 60%, #6c757d 40%);
}

.btn.btn-outline-dark:hover,
.btn.btn-outline-dark:focus {
    color: #ffffff;
    background-color: #343a40;
    border-color: #343a40;
}

.btn.btn-outline-danger {
    color: var(--arcs-heading);
    border-color: color-mix(in srgb, var(--arcs-danger) 72%, #7f1d1d 28%);
}

.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:focus {
    color: #ffffff;
    background-color: var(--arcs-danger);
    border-color: var(--arcs-danger);
}

.btn.btn-outline-success {
    color: var(--arcs-heading);
    border-color: color-mix(in srgb, var(--arcs-success) 68%, #146c43 32%);
}

.btn.btn-outline-success:hover,
.btn.btn-outline-success:focus {
    color: #ffffff;
    background-color: var(--arcs-success);
    border-color: var(--arcs-success);
}

.alert {
    border-color: color-mix(in srgb, var(--arcs-border) 65%, transparent);
}

.app-alert-text {
    font-size: 15px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-display-none {
    display: none !important;
}

.app-visibility-hidden {
    visibility: hidden;
}

.app-text-black {
    color: var(--arcs-text);
}

.noprint {
    display: block;
}

/* ==========================================================================
   Status / Icon Helpers
   ========================================================================== */

.fa-id-card,
.fa-car-side {
    display: inline-block;
    padding: 0.2em;
    border-width: 1px;
    border-radius: 100px;
    border-color: black;
    color: darkslategrey;
    font-size: 40px;
}

.fa-bars {
    color: #ffffff;
    font-size: 30px;
}

.customcheck {
    color: green;
}

.customtimes {
    color: darkred;
}

.customcheck,
.customtimes {
    font-size: 50px;
}

.customwarningprinter,
.customtimesprinter {
    font-size: 35px;
}

.customwarningprinter {
    color: orange;
}

span.addalot,
span.addalane,
span.addadevice,
span.addasubdevice {
    width: 22px;
    height: 22px;
}

span.addalot {
    display: flex;
    content: url("/images/addparkinglot.svg");
}

span.addalot:hover {
    content: url("/images/addparkinglothover.svg");
}

span.addalane {
    display: flex;
    content: url("/images/addalane.svg");
}

span.addalane:hover {
    content: url("/images/addalanehover.svg");
}

span.addadevice {
    display: flex;
    align-items: center;
    justify-content: center;
    content: url("/images/addadevice.svg");
}

span.addadevice:hover,
.btn:hover > span.addadevice {
    content: url("/images/addadevicehover.svg");
}

span.addasubdevice {
    display: flex;
    align-items: center;
    justify-content: center;
    content: url("/images/addsubdevice.svg");
}

span.addasubdevice:hover,
.btn:hover > span.addasubdevice {
    content: url("/images/addsubdevicehover.svg");
}