* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

#main {
    display: flex;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
}

.block {
    background: #fbfbfb;
    padding: 12px;
    min-width: 400px;
    margin: 12px;
    flex-grow: 1;
    width: 60%;
}

#device_block {
    flex-grow: 1.6;
}

.block > * {
    margin: 10px;
}

a.button:link, a.button:visited {
    background: white;
    color: blue;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: blue 2px solid;
}

a.button:hover, a.button:active {
    background-color: #ebebff;
}

.devices_table {
    border-collapse: collapse;
    scroll-behavior: smooth;
    overflow-x: auto;
    text-align: center;
}

.devices_table td, .devices_table th {
    border: 1px solid #bbb;
    padding: 6px;
}

.devices_table tr {
    background-color: #fafafa;
}

.devices_table tr:nth-child(even) {
    background-color: #ebebeb;
}

.devices_table tr:hover {
    background-color: #dddde7;
}

.devices_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #dcefff;
}

.devices_table * {
    margin: 4px;
}

.devices_table input {
    padding: 3px;
    border: #7d7d7d 1px solid;
    max-width: 100px;
}

.devices_table input[type=submit] {
    background: white;
    color: blue;
    border: blue 1px solid;
}

.devices_table input[type=submit]:disabled {
    background: #fafafa;
    color: #5d5dff;
    border: #9cbdff 1px solid;
}

.devices_table input[type=number] {
    max-width: 100px;
}

.container {
    overflow: auto;
    background: #f6f6f6;
    padding: 20px;
    border-radius: 15px;
    box-shadow: #00000060 1px 1px 3px;
    margin: 20px 5px;
    /* max-width: 500px; */
}

.center_parent {
    display: flex;
    justify-content: space-around;
    width: 100%;
    min-height: 200px;
}


.form {
    background: #f0f0f0;
    padding: 20px;
    min-width: 400px;
    margin: 15px;
    text-align: center;
}

.form * {
    margin: 10px;
}

.form input {
    padding: 5px;
    width: 80%;
}


.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 10px 1vw;
    background-color: #d7ebff;
}

.header a {
    text-decoration: none;
}

.menu > * {
    margin: 0 0.5vw;
    display: inline-block;
}

.menu {
    text-align: right;
}

#load {
    background-image: url(/admin/scp-ajax-loader.gif) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    border: none !important;
    background-position: 50% !important;
    color: transparent !important;
}

#c4ytable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

#c4ytable td, #c4ytable th {
    border: 1px solid #ddd;
    padding: 8px;
}

#c4ytable tr:nth-child(even) {
    background-color: #f2f2f2;
}

#c4ytable tr:hover {
    background-color: #ddd;
}

#c4ytable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #00A8A9;
    color: white;
}

.sing_form {
    background: #d7ebff;
    padding: 20px;
    min-width: 400px;
    margin: 50px 15px;
    text-align: center;
    box-shadow: 1px 2px 6px darkgrey;
}

.sing_form * {
    margin: 10px;
}

.sing_form input {
    width: 80%;
    padding: 5px;
}

.sing_form input[type=submit] {
    width: 60%;
    border: 1px solid blue;
    font-weight: 600;
    font-size: 1em;
    background: #fafafa;
}


.sing_form input[type=submit]:hover {
    background: #f0f0f0;
}

a.small_button:link, a.small_button:visited, button.small_button {
    background: white;
    color: blue;
    padding: 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: blue 1px solid;
    font-size: 1em;
    margin-left: 10px;
}

.small_button:hover, .small_button:active {
    background-color: #ebebff;
}


div.title {
    font-family: sans-serif;
    font-size: calc(1em + 0.5vw);
    font-weight: 600;
    color: black;
}

@media (max-width: 768px) {
    .header {
        font-size: 0.9rem;
    }

    .block {
        width: auto;
        margin: 4px;
    }
}

@media (max-width: 370px) {
    html {
        font-size: 0.8rem;
    }

    .block {
        min-width: 300px;
        width: auto;
        margin: 0px;
    }
}

.green_ping {
    background-color: #88f177;
}

.red_ping {
    background-color: #f1878b;
}

.orange_color_ping {
    background-color: #f1ce77;
}

.grey_ping {
    background-color: #c9c9c9;
}

.type_header {
    margin-bottom: 10px;
}

.type_header > b {
    font-size: 1.2em;
}

ul,p {
    margin: 5px;
}

ul > li {
    margin: 4px;
}