healthchecks_healthchecks/static/css/update_timeout_modal.css

.kind-simple, .kind-cron {
    width: 70px;
}

/* Simple */

#update-timeout-form .modal-body {
    padding-top: 35px;
}

.interval-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.interval-controls label {
    font-weight: normal;
    padding-right: 16px;
    width: 120px;
    text-align: right;
}

.interval-controls input {
    width: 100px;
    text-align: center;
}

.interval-controls select.form-control {
    width: auto;
    padding-left: 8px;
    margin-left: 8px;
}

#period-slider {
    margin: 20px 50px 90px 50px;
}

#period-slider .noUi-connect {
  background: #22bc66;
}

#grace-slider {
    margin: 20px 50px 110px 50px;
}

#grace-slider .noUi-connect {
  background: #f0ad4e;
}

#period-slider .noUi-value, #grace-slider .noUi-value {
    color: var(--text-muted);
}

.update-timeout-terms {
    color: var(--text-muted);
}

.update-timeout-terms p {
    margin: 0;
}

.update-timeout-terms span {
    font-weight: bold;
}

/* Cron */

#update-cron-form .modal-body {
    padding: 40px;
}

#update-timeout-grace-cron {
    xwidth: 70px;
}

#update-timeout-grace-cron-unit {
    width: 90px;
}

#update-cron-form label,
#update-oncalendar-form label {
    font-weight: normal;
}

.schedule-hint {
    margin-left: 8px;
    font-size: small;
}

#cron-description {
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 18px;
    color: var(--text-color);
    padding: 16px 8px 0px 8px;
}

#cron-preview {
    background: var(--pre-bg);
    min-height: 298px;
}

#cron-preview p {
    padding: 8px;
    font-size: small;
}

#cron-preview th {
    border-top: 0;
    font-weight: normal;
    font-size: small;
}

#cron-preview-table {
    margin: 0;
}

#cron-preview-table tr td:nth-child(1) {
    width: 120px;
}

#cron-preview-table tr td:nth-child(2) {
    font-size: small;
}

#cron-preview-table tr td:nth-child(3) {
    font-size: small;
    font-family: monospace;
    text-align: right;
    color: var(--text-muted);
}

/* OnCalendar */

#update-oncalendar-form .modal-body {
    padding: 0 15px;
}

#oncalendar-controls {
    padding: 25px;
}

#update-timeout-grace-oncalendar,
#update-timeout-grace-oncalendar-unit {
    width: 90px;
}

#oncalendar-preview {
    background: var(--pre-bg);
    min-height: 409px;
}

#invalid-oncalendar-arguments {
    padding: 15px;
}

#oncalendar-preview table.table {
    margin: 25px 0 15px 0;
}

#oncalendar-preview table td:nth-child(1) {
    text-align: right;
}

#oncalendar-preview th {
    padding-top: 0;
    font-weight: normal;
    border-top: 0;
}

#oncalendar-preview tr.in-utc td,
#oncalendar-preview tr.from-now td {
    border-top: 0;
    padding-top: 0;
}

#oncalendar-preview tr.from-now td {
    font-size: small;
}

.select-group {
    display: flex;
}

.select-group select { 
    border-left: 0;
}