.inp {
    width: 50%;
}

body{    
    --accent-color: #fff;
    --background-color: #9d9d9d;
    --text-color: white;
    --button-text-color: var(--background-color);
    --transition-delay: 1s;
    --disabled-text-color: #a59d9d;

    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color:var(--background-color) !important; 
    color: var(--text-color);
    transition: var(--transition-delay);

    
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;

};

body.dark{
    --accent-color: orangered;
    --background-color: rgb(141, 61, 61);
    --text-color: black;
    
    --disabled-text-color: rgb(213 185 186 / 85%);
    --disabled-label-color: rgb(255 255 255 / 40%);
    
  }
.container{
    border-radius: 5px;
    border-color: #282828 !important;
    background-color: #454648;
    position: relative;
    padding: 10px;
    margin: 10px;
    color: white;
    width: 33rem !important;
}

.obj{
    padding-bottom: 20px;
}

th{
    text-align: center !important;
}
td{
    text-align: center !important;
    font-size: 12px;
}
.htd, .hth, .yaxis{
    border: solid 1px;
    border-color: white;
    width: 6rem;
}
.htd{
    color: rgb(22, 21, 21);
}

.htbl{
    background-color: white;
    color: rgb(22, 20, 20);
}

.icol{
    display: inline-flex;
    
    margin: 0 auto;
}

.center{
    
    padding: 10px;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ocenter{
    display: block;
    margin-left: auto;
    margin-right: auto;
}