style.css

* {
    font-family: 'Sarabun', sans-serif;
}

.chart-container {
    /* background: rebeccapurple; */
    position: relative;
    height: 280px;
    /* width: 80vw; */
    display: flex;
    align-items: center;
}

body {
    background-color: #f1f1f1e8;
}

.red {
    background-color: red;
}

.block {
    /* border-style: solid; */
    padding: 2rem 1rem;
    border-radius: .3rem;
    background-color: #e9ecef;
}

.block2 {
    /* border-style: solid; */
    padding: 2rem 1rem;
    border-radius: .3rem;
    background-color: #ffffff;
    height: 100%;
}

ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.rcm-book {
    background-color: #e9ecef;
    padding: .5rem 1rem;
    border-radius: .3rem;
    height: 100%;
}

.login-form {
    padding-top: 3rem;
}

.row-100 {
    height: 75vh;
}

.chart-container2{
    position: relative;
    height: 300px;
    /* width: 80vw; */
    display: flex;
    align-items: center;
}

/* #userSpan {
     background: red;
 } */
 /* .form-header{
    height: 10vh;

 } */

@media screen and (min-width:0px) and (max-width:576px) {
    .btn-xs-block {
        width: 100%;
        display: block;
    }
    #userSpan {
        display: none;
    }
}

@media screen and (min-width:577px) and (max-width:992px) {
    #userSpan {
        display: none;
    }
}