.makine-techizat-body {
    height: 80%;
    display: flex;
    justify-content: center;
}

.makine-section-middle {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.makine-section-middle span:nth-child(1) {
    background-color: #003f5c;
}

.makine-section-middle span:nth-child(2) {
    background-color: #2f4b7c;
}

.makine-section-middle span:nth-child(3) {
    background-color: #665191;
}

.makine-section-middle span:nth-child(4) {
    background-color: #a05195;
}

.makine-section-middle span:nth-child(5) {
    background-color: #d45087;
}

.makine-section-middle span:nth-child(6) {
    background-color: #f95d6a;
}

.makine-section-middle span:nth-child(7) {
    background-color: #ff7c43;
}

.makine-section-middle span:nth-child(8) {
    background-color: #20ff1b;
}

.makine-section-middle span:nth-child(9) {
    background-color: #00d080;
}


#makine-techizat-widget{
    display:block;
}

.makine-body {
    width:100%;
    /*display:none;*/
    /*display:inline-block;*/
    justify-content:center;
    height:80%;
    align-items: center;
    padding:7px;

}
.makine-body .box-item{
    width:100%;
    display:flex;
    justify-content:space-around;
    align-items:center;
}
.makine-body .box-body-item-text{
    color:#fff;
    font-weight:300;
    font-size:.8em;
    flex:6;
    padding-left:21px;
    
}

.makine-body .box-item div:last-child{
    color:#fff;
    text-align:center;
    flex:4;
    text-align:end;
}

.makine-techizat-dialog {
    display:block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    height: 600px;
    transform: translate(-50%,-50%);
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    background-color: rgba(0, 0, 0, 0.52);
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.makine-techizat-dialog-container{
    padding:7px;
    width:100%;
    height:calc(100% - 70px);
}

.makine-techizat-dialog-container-top,
.makine-techizat-dialog-container-bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.makine-techizat-dialog-container-top-left,
.makine-techizat-dialog-container-top-right,
.makine-techizat-dialog-container-bottom-left,
.makine-techizat-dialog-container-bottom-right {
    flex: 6;
    height: 250px;
}
/*.makine-techizat-dialog-container-top-left,*/
.makine-techizat-dialog-container-top-header,
.makine-techizat-dialog-container-top-body-left,
.makine-techizat-dialog-container-top-body-right,
.makine-techizat-dialog-container-bottom-right,
.makine-techizat-dialog-container-bottom-left
/*.makine-techizat-dialog-container-top-right,*/
/*.makine-techizat-dialog-container-bottom*/
/*.makine-techizat-dialog-container-top-body*/ {
    transition: background .5s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(200%);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.125);
    margin: 5px;
    border-radius: 4px;
    padding: 7px;
}


.makine-techizat-dialog-container-top-body{
    height:200px;    
    display:flex;
    justify-content:space-around;
    align-items:center;
}
.makine-techizat-dialog-container-top-body-left{
    height:100%;
    flex:4;
    display:flex;
    justify-content:center;
    align-items:center;
}
.makine-techizat-dialog-container-top-body-right{
    flex:8;
    height:100%;
    position:relative;
}

.makine-techizat-dialog-container-top-header{
    color:#fff;
}

.makine-techizat-dialog-container-top-body-right-item{
    display:flex;
    justify-content:space-around;
    align-items:center;
    color:#fff;
    margin:10px 5px;
}
.makine-techizat-dialog-container-top-body-right-item div:first-child{
    flex:4;
    font-size:.8em;
}
.makine-techizat-dialog-container-top-body-right-item div:last-child{
    flex:8;
    font-size:.8em;
    text-align:end;
}

.makine-techizat-dialog-container-bottom {
    height: 250px;
    padding-top:12px;
}
.makine-techizat-dialog-container-bottom-left{
    /*margin:5px;*/
}
.makine-techizat-dialog-container-bottom-right{
    /*margin-top:10px;*/
    /*padding:7px;*/
}
#arac-kamera {
    width: 100%;
    height: 100%;
}
#makine-layer-container{
    display:none;
}
#makine-layer-container.active{
    display:block;
}
.layer-switcher {
    position: fixed;
    left: 50%;
    top: 5%;
    transform: translate(-50%,-10%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    cursor: pointer;
}

.makine-layer-switcher-item{
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    background-color: rgba(0, 0, 0, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.125);
    max-width: 60px;
    height: 60px;
    margin: 5px;
    border-radius: 4px;
    overflow: hidden;
    padding: 7px;
    box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.hes-layer-switcher-item .checkbox-tile {
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    background-color: rgba(0, 0, 0, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.125);
    max-width: 70px;
    height: 50px;
    margin: 5px;
    border-radius: 4px;
    overflow: hidden;
    padding: 7px;
    box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.layer-checkbox-item {
    display: none;
    width: 100%;
    height: 100%;
}

img {
    max-width: 100%;
    cursor: pointer;
}

.layer-checkbox-item.clicked >
.makine-layer-switcher-item {
    box-shadow: 0 0 5px red;
}




.makine-layer-switcher-item .checkbox-tile{
    padding: 14px;
    transition: background .5s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(200%);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.125);
    border-radius: 4px;
}
.gorev-btn {
    background: none;
    border: none;
    outline: none;
    padding: 7px 14px;
    transition: background .5s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(200%);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.125);
    color: #fff;
    position: absolute;
    right: 10px;
    bottom: 20px;
}