/*
 
 POLYKUM DigiLab Web App v2
 provided by POLYKUM e.V.
 
 CSS style for device parameters
 
 Author: Hendrik Bugdoll
 Copyright (c) 2018-2026 AppsolutEinfach UG (haftungsbeschraenkt), Germany.
 Copyright (c) 2026 Fraunhofer IMWS, Germany.
 
*/

.device {
    /*width:  900px;
    height: 800px;*/
    width:  100%;
    /*background-color: #aa9999;*/ /* debug */
    position: relative;
}

.parameter-overlay {
    width: 250px;
}

.static-popover {
    display: block !important;
}

.device-dialog-subtitle {
    text-align: center;
}
@media (max-width: 767px) { /* smartphone */
    .device-dialog-subtitle {
        margin-bottom: 20px;
    }
}

.device .popover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.device .popover-title {
    margin:  0px;
    padding: 4px;
    font-size: 12px !important;
    font-weight: 500;
    background-color: #FAFAFA;
}

.device .popover.bottom .arrow::after {
    /* colored top arrow */
    border-bottom-color: #FAFAFA;
}

.fixed-width {
    display: inline-block;
    width:   1.3em;
}

.device-data-import .popover {
    z-index: 999 !important;
}

.device-data-import .popover-content {
    padding: 8px 10px !important;
}

.device-data-import .digilab-input {
    width: 70px !important;
}




/* DCIM */

#device-dcim {
}
@media (max-width: 767px) { /* smartphone */
    #device-dcim {
        margin-top:   -5px;
        margin-bottom: 15px;
    }
}

#dcim-image-container {
    margin-top:    10px;
    margin-bottom: 0px;
}
@media (max-width: 767px) { /* smartphone */
    #dcim-image-container {
        margin-top:    0px;
        margin-bottom: 20px;
    }
}

#parameter-dcim-extruder {
    position: absolute;
    top:  70%;
    left: 79%;
}
.device-data-import #parameter-dcim-extruder {
    position: absolute;
    top:  70%;
    left: 77.5%;
    width: 245px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-dcim-extruder,
    .device-data-import #parameter-dcim-extruder {
        position: relative;
        width: 245px;
        top:  initial;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-dcim-injecting {
    position: absolute;
    top:  28%;
    left: 80%;
}
.device-data-import #parameter-dcim-injecting {
    position: absolute;
    top:  28%;
    left: 78%;
    width: 245px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-dcim-injecting,
    .device-data-import #parameter-dcim-injecting {
        position: relative;
        width: 245px;
        top:  10px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-dcim-mold {
    position: absolute;
    top:  41%;
    left: 12%;
}
.device-data-import #parameter-dcim-mold {
    position: absolute;
    top:  41%;
    left:  2%;
    width: 235px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-dcim-mold,
    .device-data-import #parameter-dcim-mold {
        position: relative;
        width: 245px;
        top:  20px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}


/* IMC */

#device-imc {
}
@media (max-width: 767px) { /* smartphone */
    #device-imc {
        margin-top:   -5px;
        margin-bottom: 15px;
    }
}

#imc-image-container {
    margin-top:    20px;
    margin-bottom: 20px;
}
@media (max-width: 767px) { /* smartphone */
    #imc-image-container {
        margin-top:    0px;
        margin-bottom: 20px;
    }
}

#parameter-imc-extruder {
    position: absolute;
    top:  13%;
    left: 72%;
}
.device-data-import #parameter-imc-extruder {
    position: absolute;
    top:   7%;
    left: 67%;
    width: 245px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-imc-extruder,
    .device-data-import #parameter-imc-extruder {
        position: relative;
        width: 245px;
        top:  initial;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-imc-injecting {
    position: absolute;
    top:  69%;
    left: 57%;
}
.device-data-import #parameter-imc-injecting {
    position: absolute;
    top:  63%;
    left: 58%;
    width: 245px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-imc-injecting,
    .device-data-import #parameter-imc-injecting {
        position: relative;
        width: 245px;
        top:  10px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-imc-mold {
    position: absolute;
    top:  38%;
    left:  8%;
}
.device-data-import #parameter-imc-mold {
    position: absolute;
    top:   27%;
    left:  -6%;
    width: 235px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-imc-mold,
    .device-data-import #parameter-imc-mold {
        position: relative;
        width: 245px;
        top:  20px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}


/* IM */

#device-im {
}
@media (max-width: 767px) { /* smartphone */
    #device-im {
        margin-top:   -5px;
        margin-bottom: 5px;
    }
}

#im-image-container {
    margin-top:    160px;
    margin-bottom: 50px;
}
@media (max-width: 767px) { /* smartphone */
    #im-image-container {
        margin-top:    0px;
        margin-bottom: 20px;
    }
}

#parameter-im-injecting {
    position: absolute;
    top:  -19%;
    left:  57%;
}
.device-data-import #parameter-im-injecting {
    position: absolute;
    top:  -43%;
    left:  62%;
    width: 245px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-im-injecting,
    .device-data-import #parameter-im-injecting {
        position: relative;
        width: 245px;
        top:  initial;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-im-mold {
    position: absolute;
    top:  -47%;
    left:  13%;
}
.device-data-import #parameter-im-mold {
    position: absolute;
    top:  -65%;
    left:   4%;
    width: 235px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-im-mold,
    .device-data-import #parameter-im-mold {
        position: relative;
        width: 245px;
        top:  10px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}


/* SSE */

#device-sse {
}
@media (max-width: 767px) { /* smartphone */
    #device-sse {
        margin-top:   -5px;
        margin-bottom: 5px;
    }
}

#sse-image-container {
    margin-top:    150px;
    margin-bottom: 80px;
}
@media (max-width: 767px) { /* smartphone */
    #sse-image-container {
        margin-top:    0px;
        margin-bottom: 20px;
    }
}

#parameter-sse-extruder {
    position: absolute;
    top:  -90%;
    left:  60%;
}
.device-data-import #parameter-sse-extruder {
    position: absolute;
    top:  -137%;
    left:   62%;
    width: 245px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-sse-extruder,
    .device-data-import #parameter-sse-extruder {
        position: relative;
        width: 245px;
        top:  initial;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-sse-die {
    position: absolute;
    top:  -70%;
    left:  10%;
}
.device-data-import #parameter-sse-die {
    position: absolute;
    top:  -80%;
    left:   0%;
    width: 235px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-sse-die,
    .device-data-import #parameter-sse-die {
        position: relative;
        width: 245px;
        top:  10px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}


/* TSE */

#device-tse {
}
@media (max-width: 767px) { /* smartphone */
    #device-tse {
        margin-top:   -5px;
        margin-bottom: 5px;
    }
}

#tse-image-container {
    margin-top:    150px;
    margin-bottom: 80px;
}
@media (max-width: 767px) { /* smartphone */
    #tse-image-container {
        margin-top:    0px;
        margin-bottom: 20px;
    }
}

#parameter-tse-extruder {
    position: absolute;
    top:  -74%;
    left:  60%;
}
.device-data-import #parameter-tse-extruder {
    position: absolute;
    top: -109%;
    left:  62%;
    width: 245px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-tse-extruder,
    .device-data-import #parameter-tse-extruder {
        position: relative;
        width: 245px;
        top:  initial;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-tse-die {
    position: absolute;
    top:  -45%;
    left:  10%;
}
.device-data-import #parameter-tse-die {
    position: absolute;
    top:  -54%;
    left:   0%;
    width: 235px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-tse-die,
    .device-data-import #parameter-tse-die {
        position: relative;
        width: 245px;
        top:  10px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}


/* FFF */

#device-fff {
}
@media (max-width: 767px) { /* smartphone */
    #device-fff {
        margin-top:   -5px;
        margin-bottom: 15px;
    }
}

#fff-image-container {
    margin-top:    15px;
    margin-bottom:  5px;
}
@media (max-width: 767px) { /* smartphone */
    #fff-image-container {
        margin-top:    0px;
        margin-bottom: 20px;
    }
}

#parameter-fff-3dprinter {
    position: absolute;
    top:   18%;
    left: -21%;
}
.device-data-import #parameter-fff-3dprinter {
    position: absolute;
    top:    7%;
    left: -38%;
    width: 245px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-fff-3dprinter,
    .device-data-import #parameter-fff-3dprinter {
        position: relative;
        width: 245px;
        top:  initial;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-fff-plattform {
    position: absolute;
    top:  50.5%;
    left: 73%;
}
.device-data-import #parameter-fff-plattform {
    position: absolute;
    top:  50%;
    left: 70%;
    width: 235px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-fff-plattform,
    .device-data-import #parameter-fff-plattform {
        position: relative;
        width: 245px;
        top:  10px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}

#parameter-fff-chamber {
    position: absolute;
    top:  17%;
    left: 47%;
}
.device-data-import #parameter-fff-chamber {
    position: absolute;
    top:  33%;
    left: 65%;
    width: 235px;
}
@media (max-width: 767px) { /* smartphone */
    #parameter-fff-chamber,
    .device-data-import #parameter-fff-chamber {
        position: relative;
        width: 245px;
        top:  20px;
        left: initial;
        margin-left: auto;
        margin-right: auto;
    }
}