html, body {
    width: 100%;
    height: 100%;
}

body {
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#fridge-container {
    position: relative;
    width: 500px;
    max-width: 50vh;
    max-height: 100%;
}

#fridge-container svg {
    max-width: 100%;
}

#inside-on,
#inside-off,
#design-on,
#design-off {
    cursor: pointer;
}

#inside-on,
#design-on {
    display: none;
}

#temp {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: 100;
    font-size: 72pt;
    pointer-events: none;
    transition: color 200ms;
    user-select: none;
}

#temp:empty {
    display: none;
}

#temp:after {
    content: '°C';
    font-size: 0.25em;
    font-weight: 300;
    vertical-align: text-top;
    display: inline-block;
    padding-top: .6em;
}

#temp.on-dark {
    color: #dddddd;
}

#actions {
    text-align: center;
    color: #dddddd;
    margin-top: -1em;
    padding-bottom: .5em;
}

#actions i {
    cursor: pointer;
    transition: color 150ms, background-color 150ms;
    padding: 1em;
    border-radius: 3px;
}

#actions i:hover {
    color: #444444;
    background: #e0e0e0;
}

#message-text {
    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
}

.modal-body {
    max-width: 100%;
    overflow: auto;
}

.modal-body table {
    min-width: 650px;
}

.table-toggles td,
.table-toggles th {
    padding: .3rem;
}

.table-toggles td:not(:first-child), 
.table-toggles th:not(:first-child) {
    text-align: center;
    padding: 0;
}

.table-toggles td label {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: .6rem inherit;
}

.table-toggles td:first-child,
.table-toggles th:first-child {
    padding-left: 0;
}

.table-toggles td:last-child,
.table-toggles th:last-child {
    padding-right: 0;
}

.no-results {
    color: #777777;
    font-style: italic;
}

.modal-footer {
    justify-content: flex-start;
}

#brightness-modal input[type=range] {
    width: 100%;
}

#brightness-modal .modal-footer {
    display: flex;
}

#brightness-modal .modal-footer .btn {
    flex: 1;
}

.btn-primary {
    background: #db0740;
    color: #ffffff;
    border: 2px solid #db0740;
}

.btn-primary:hover {
    background: #e2e3e5;
    color: #1b1919;
    border: 2px solid #e2e3e5;
}

.btn-secondary {
    background: transparent;
    border: 2px solid #e2e3e5;
    color: #1b1919;
}

.btn-secondary:hover {
    background: #e2e3e5;
    border: 2px solid #e2e3e5;
    color: #1b1919;
}

.btn-primary,
.btn-secondary {
    padding: 0.5em 2em;
}

/* Hack */

.modal-dialog-centered::before {
    display: block;
    height: calc(100% - (.5rem * 2));
    content: "";
}