body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #525f7f;
    text-align: left;
    background-color: #FDFFFC;
}

a, a:visited, a:active, a:hover, a:link{
    text-decoration: none;
    color: inherit;
}

.wrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
}

input,button,select,optgroup,textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input[type="radio"],input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0; 
}

input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"] {
    -webkit-appearance: listbox; 
}

textarea {
    overflow: auto;
    resize: vertical; 
}

*:focus{
    outline: none;
}

.mid-square-container{
    display:block;
    position:absolute;
    width:450px;
    height:340px;
    padding-left:50px;
    padding-right:50px;
    border-radius:5px;
    left:calc(50% - 275px);
    top:calc(50% - 170px);
    background:rgb(37,93,144);
    transition:.3s;
}

@media (max-width: 960px) {
    .mid-square-container{
      width: 450px; 
      left:calc(50% - 275px);
      transition:.3s;
    } 
}
@media (min-width: 768px) {
    .mid-square-container {
      width: 450px; 
      left:calc(50% - 275px);
      top:calc(50% - 170px);
      transition:.3s;
    } 
}
@media (max-width: 600px) {
    .mid-square-container {
      width: 200px;
      left:calc(50% - 150px);
      transition:.3s;
    } 
}

.hide{
    display:none;
}

.show{
    display:block;
}

.shadow{
    border: 1px solid #999;
    box-shadow:0px 0px 11px 0px rgba(0,0,0,0.25);
}

.mid-square-container > .title{
    display:block;
    position:relative;
    width:100%;
    height:25px;
    color:#fff;
    background:none;
    text-align:center;
    font-size:16px;
    font-weight: 600;
    margin-top:25px;
}

.mid-square-container > .title-info{
    display:block;
    position:relative;
    width:100%;
    height:25px;
    color:#aaa;
    background:none;
    text-align:center;
    font-size:12px;
    font-weight: 200;
    margin-top:15px;
}

.mid-square-container > .line{
    display:block;
    position:relative;
    width:100%;
    height:25px;
    line-height:25px;
    text-align:left;
    font-size:12px;
    font-weight:200;
    color:#eee;
    margin-top:10px;
}

.line > .input{
    width:calc(100% - 30px);
    border-radius:5px;
    border: none;
    color:black;
    padding-left:15px;
    padding-right:15px;
    background:rgba(253,255,252,.7);
    transition: .3s;
}

.line > .input:focus{
    background:rgba(253,255,252,1);
    transition: .3s;
}

.line > .button{
    outline:none;
    cursor:pointer;
    padding-left:40px;
    padding-right:40px;
    line-height:25px;
    font-weight: 600;
    color: #fff;
    background:linear-gradient(0deg, rgba(201,90,49,1) 0%, rgba(221,96,49,1) 89%, rgba(218,135,104,1) 100%);
    border:none;
    border-radius:10px;
    transition: .3s;
}

.line > .button:hover{
    background:linear-gradient(0deg, rgba(201,90,49,1) 0%, rgba(230,123,82,1) 89%, rgba(247,202,185,1) 100%);
    transition: .3s;
}

.footer{
    display:block;
    position:fixed;
    font-size:10px;
    color:#666;
    background:none;
    width:120px;
    bottom:5px;
    left:calc(50% - 60px);
}

.text-danger {
    color: #fd5d93 !important;
}

.user-header{
    display:flex;
    position:relative;
    width:calc(100% - 40px);
    height:auto;
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom:20px;
    background:none;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    border-bottom:1px solid rgba(253,255,252,.3);
}

.user-header > .item{
    display:block;
    color:#222;
    padding:0px;
    z-index:5;
}

.user-header > .header{
    font-size:20px;
    color:rgba(253,255,252,1);
    transition:.3s;
}

@media (max-width: 960px) {
    .user-header > .header{
        font-size:18px;
        transition:.3s;
    } 
}
@media (min-width: 768px) {
    .user-header > .header {
        font-size:18px;
      transition:.3s;
    } 
}
@media (max-width: 600px) {
    .user-header > .header {
        font-size:16px;
    } 
}

.user-header > .content{
    font-size:11px;
}

.user-device-info{
    display:block;
    position:relative;
    width:600px;
    height:auto;
    background:rgb(205,203,204);
    margin-top:10px;
    padding:10px;
    border-radius:5px;
}

@media (min-width: 768px) {
    .user-device-info {
        width:600px;
        transition:.3s;
    } 
}
@media (max-width: 600px) {
    .user-device-info {
        width:350px;
        transition:.3s;
    } 
}

.user-device-info > .title{
    color:#222;
    font-size:11px;
    font-weight:100;
}

.user-device-info > .equipo{
    display:block;
    position:relative;
    font-size:16px;
    font-weight:600;
    color:#ddd;
    width:100%;
    text-align:center;
}

.user-device-info > .info{
    display:flex;
    position:relative;
    width:100%;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-content:flex-start;
    gap:10px 30px;
}

.user-device-info > .info > .device-info{
    display:flex;
    position:relative;
    width:600px;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    align-content:flex-start;
    gap:10px 30px;
    margin-top:10px;
}

@media (min-width: 960px) {
    .user-device-info > .info > .device-info {
        width:600px;
        transition:.3s;
    } 
}

@media (min-width: 768px) {
    .user-device-info > .info > .device-info {
        width:600px;
        transition:.3s;
    } 
}
@media (max-width: 600px) {
    .user-device-info > .info > .device-info {
        width:350px;
        transition:.3s;
    } 
}

.user-device-info > .info > .device-info > .item{
    font-weight:100;
    width:200px;
    color:rgb(0,0,0);
    transition:.3s;
}

@media (min-width: 768px) {
    .user-device-info > .info > .device-info > .item {
        width:170px;
        transition:.3s;
    } 
}
@media (max-width: 600px) {
    .user-device-info > .info > .device-info > .item {
        width:150px;
        transition:.3s;
    } 
}

.user-device-info > .info > .device-info > .item > .label{
    font-weight:200;
    color:#888;
    font-size:12px;
}

.user-device-info > .info > .device-info > .item > .button {
    outline:none;
    padding-left:40px;
    padding-right:40px;
    line-height:25px;
    font-weight: 500;
    color: #000;
    background: none;
    border:none;
    border-radius:5px;
    transition: .3s;
}

.user-device-container {
    display:flex;
    position:relative;
    width:calc(100% - 20px);
    padding-left:10px;
    padding-right:10px;
    height:calc(100% - 110px);
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
    align-items:flex-start;
    align-content:flex-start;
    gap:10px 10px;
}

.user-device-info > .info > .device-data{
    display:flex;
    position:relative;
    width:600px;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    align-content:flex-start;
    gap:10px 10px;
    margin-top:10px;
}

@media (min-width: 960px) {
    .user-device-info > .info > .device-data {
        width:600px;
        transition:.3s;
    } 
}

@media (min-width: 768px) {
    .user-device-info > .info > .device-data {
        width:600px;
        transition:.3s;
    } 
}
@media (max-width: 600px) {
    .user-device-info > .info > .device-data {
        width:350px;
        transition:.3s;
    } 
}

.device-data > .item {
    font-weight:300;
    width:110px;
    color:rgba(0,0,0,1);
    text-align:center;
    font-size:11px;
    transition:.3s;
}

@media (min-width: 960px) {
    .device-data > .item {
        width:110px;
        transition:.3s;
    } 
}

@media (min-width: 768px) {
    .device-data > .item {
        width:110px;
        transition:.3s;
    } 
}
@media (max-width: 600px) {
    .device-data > .item {
        width:60px;
        transition:.3s;
    } 
}

.device-data > .item > .val {
    color:#888;
    font-size:10px;
}

.paginator{
    display:block;
    position:relative;
    color:#222;
    font-size:10px;
    width:100%;
    text-align:center;
}

.paginator > .step-links {
    letter-spacing: 1px;
}

.chart{
    height:100%;
    width:100%;
}

.device-select{
    display:block;
    position:relative;
    width:100%;
    font-size:14px;
    background:none;
    text-align:center;
    border:0px;
    color:#666;
    font-weight: 600;
}

.device-select > .option{
    display:block;
    position:relative;
    font-size:10px;
}

.user-container{
    display:block;
    position:fixed;
    height:12px;
    color:#bbb;
    font-size:10px;
    top:0px;
    right:0px;
    padding-top:3px;
    padding-right:40px;
    padding-bottom:3px;
    width:calc(100% - 40px);
    text-align:right;
    z-index:500;
    font-weight: 100;
    background:rgb(105,103,104);
}

.logout{
    display:block;
    position:absolute;
    right:15px;
    top:3px;
}

.perm-config{
    position:absolute;
    left:130px;
}

.half-div{
    display:block;
    position:relative;
    float:left;
    width:calc(50% - 15px);
    height:100%;
    margin:0px;
    background:none;
}

.half-div > .header {
    font-size:11px;
    font-weight: 300;
    color:rgba(253,255,252,1);
}

.half-div > select[multiple]{
    width:100%;
    height:150px;
    color:#000;
    font-size:10px;
    border:none;
    border-radius:5px;
    margin-top:5px;
    padding-top:5px;
    padding-bottom:5px;
    background:rgb(145,141,143);

}

.half-div > select[multiple]:focus option:checked{
    border:none;
    background-image: linear-gradient(0deg, rgb(145,141,143) 0%, rgb(145,141,143) 100%) !important;
    color:#888;
}

.half-div > select[multiple] option:checked{
    background-image: linear-gradient(0deg, rgb(145,141,143) 0%, rgb(145,141,143) 100%) !important;
    color:#888;
}

.sts-lbl{
    font-style: normal;
    font-weight: 100;
    font-size:11px;
}

.sts-val{
    color:#888;
    font-size:11px;
}

.progress{
    display:block;
}

.config-input{
    background:#FDFFFC;
    width:50px;
    color:#888;
    border:none;
    border-radius:5px;
    padding-left:5px;
    padding-right:5px;
    text-align:center;
}

input[type=number]
{
  -moz-appearance: textfield;
}

.config-button{
    outline:none;
    cursor:pointer;
    padding-left:20px;
    padding-right:20px;
    line-height:15px;
    font-weight: 100;
    color: #fff;
    background:linear-gradient(0deg, rgba(201,90,49,1) 0%, rgba(221,96,49,1) 89%, rgba(218,135,104,1) 100%);
    border:none;
    border-radius:10px;
    transition: .3s;
}

.config-button:hover{
    background:linear-gradient(0deg, rgba(201,90,49,1) 0%, rgba(230,123,82,1) 89%, rgba(247,202,185,1) 100%);
    transition: .3s;
}

.header-background{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    right:0px;
    top:0px;
    background:#FDFFFC;
    z-index: 1;
}

.header-background > .img-container{
    display:block;
    position:relative;
    width:50%;
    height:60%;
    background:#FDFFFC;
    float:right;
    top:30%;
}

.img-container > img{
    display:block;
    position:relative;
    float:right;
    margin-right:0px;
    height:100%;
    opacity:1;
    width:50%;
    object-fit:contain;
    transition: .3s;
}

@media (min-width: 960px) {
    .img-container > img {
        margin-right:0px;
        opacity:1;
        transition:.3s;
    } 
}

@media (max-width: 768px) {
    .img-container > img {
        margin-right:20px;
        opacity:.35;
        transition:.3s;
    } 
}
@media (max-width: 600px) {
    .img-container > img {
        margin-right:20px;
        opacity:.35;
        transition:.3s;
    } 
}