﻿.ImprovedTimeManagementContainer {
    position: relative;
    width: fit-content;
    height: 400px;
    box-shadow: 0px 0px 90px -15px #7f3df8;
}

.zoom-image {
    width: 636px;
    height: 400px;
}

.itmhiden-chat {
    position: absolute;
    bottom: 20px;
    left: 15px;
    width: 175px;
    height: 180px;
    z-index: 1;
    background-image: linear-gradient(0deg, #faf5f5, #faecec);
    transition: all 2s ease-in-out;
}

.itmhiden-chat2 {
    position: absolute;
    bottom: 20px;
    right: 195px;
    width: 175px;
    height: 275px;
    z-index: 1;
    transition: all 2s ease-in-out;
    background-image: linear-gradient(0deg, #faf5f5, #faecec); 
}

.itmhiden-chat3 {
    position: absolute;
    bottom: 25px;
    right: 15px;
    width: 175px;
    height: 350px;
    z-index: 1;
    transition: all 2s ease-in-out;
    background-image:   linear-gradient(0deg, #faf5f5, #faf0f7, #fef7f9)
}

.itmQuery-box1 {
    position: absolute;
    bottom: 110px;
    left: 30px;
    width: 140px;
    transition: all 2s ease-in-out;
    height: 35px;
    background-color: #d9ffff;
}

.itmResponse-box1 {
    position: absolute;
    bottom: 45px;
    left: 35px;
    width: 135px;
    height: 65px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

.itmQuery-box2a {
    position: absolute;
    top: 160px;
    left: 210px;
    width: 140px;
    height: 35px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

.itmResponse-box2a {
    position: absolute;
    top: 200px;
    left: 210px;
    width: 140px;
    height: 30px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

.itmQuery-box2b {
    position: absolute;
    top: 240px;
    left: 210px;
    width: 145px;
    height: 30px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

.itmResponse-box2b {
    position: absolute;
    bottom: 80px;
    left: 210px;
    width: 145px;
    height: 45px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

.itmQuery-box3a {
    position: absolute;
    top: 83px;
    right: 30px;
    width: 145px;
    height: 30px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

.itmResponse-box3a {
    position: absolute;
    top: 115px;
    right: 35px;
    width: 137px;
    height: 110px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

.itmQuery-box3b {
    position: absolute;
    bottom: 135px;
    right: 35px;
    width: 140px;
    height: 35px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

.itmResponse-box3b {
    position: absolute;
    bottom: 95px;
    right: 30px;
    width: 140px;
    height: 35px;
    transition: all 2s ease-in-out;
    background-color: #d9ffff;
}

/*.redneedle {
    position: absolute;
    top: 65px;
    left: 115px;
    width: 23px;
    height: 23px;
    transform-origin: center bottom;*/ /* Rotate around the bottom center */
    /*animation: rotateNeedle 60s linear infinite;*/ /* 60s for a full rotation */
/*}*/

.clockgif {
    top: 45px;
    left: 20px;
    position: absolute;
    width: 160px;
    height: 130px;
}

@keyframes rotateNeedle {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(0) rotate(360deg);
    }
}

@media only screen and (max-width: 2200px) and (min-width: 1400px) {
}

@media only screen and (max-width: 1399px) and (min-width: 1200px) {
    .ImprovedTimeManagementContainer {
        zoom: 70%;
    }
}


@media only screen and (max-width: 1199px) and (min-width: 992px) {
    .ImprovedTimeManagementContainer {
        zoom: 50%;
    }
}

@media only screen and (max-width: 991px) and (min-width: 200px) {
    .ImprovedTimeManagementContainer {
        zoom: 50%;
    }
}