/* 
 Copyright (C) 2021-2023 Ciro Cattuto <ciro.cattuto@gmail.com>
 All rights reserved.
*/

body {
    font-family: 'Roboto', sans-serif;
    background-color: #F4FAFC;
}

button.control {
    display: inline-block;
    padding: 0.3em 1.2em;
    margin: 0 0.1em 0.1em 0;
    border-radius: 2em;
    border: 0.16em solid rgba(255,255,255,0);
    box-sizing: border-box;
    color:white;
    text-align: center;
    background-color:rgb(148, 13, 125);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

button.control:active {
    background-color: rgb(219, 18, 186);
}

button.control.disabled {
    background-color: #333;
    pointer-events: none;
    cursor: not-allowed;
}

button.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

input.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

#panel {
    width: 500px;
    height: 500px;
    border: 0.1em solid #333;
    position: absolute;
    left: 50%;
    top: 0%;
    margin-top: 20px;
    margin-left: -250px;
    background-color: white;
}

#controls {
    margin: 20px 20px 0px 20px;
    display: flex;
    justify-content: space-between;
}

#progress {
    display: flex;
    align-items: center;
    flex-direction: column;
}

#progressbar {
    margin: 20px 20px 10px 20px;
    width: 200px;
    height: 200px;
    font-size: 50px;
    font-family: 'Roboto', sans-serif;
}

#tag_id {
    margin: 0px 20px 0px 20px;
    font-size: 36px;
    font-family: Courier, monospace;
    color: #333;
    text-align: center;
}

#tag_name {
    margin: 0px 20px 0px 20px;
    text-align: center;
}

#name {
    font-family: Courier, monospace;
    font-size: 28px;
    color: #333;
    text-align: center;
    width: 200px;
    border: 1px solid transparent;
    margin: 0px;
    padding: 0px;
}

#name:focus {
    outline: none !important;
    border: 1px solid rgb(219, 18, 186);
}

#infobox {
    margin: 20px 20px 10px 20px;
    background-color: #EEE;
    color: #333;
    font-size: 16px;
    font-family: Courier, monospace;
}

#infobox #firmware {
    margin: 5px;
}

#infobox #blocks {
    margin: 5px;
}

#infobox #board {
    margin: 5px;
}

#data {
    margin: 20px 20px 10px 20px;
    display: flex;
    justify-content: space-between;
}

#image {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;    
}