/*CSS for cell : MagianLiteFlex*/
.main-holder-Life-Flex
{
    position: absolute;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: column;
}
.Life-Flex-prob-stat-H
{
    border-radius: 4px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: row;
    margin-bottom: 0px; 
}
.Life-Flex-seed-H
{
    border-radius: 4px;
    border: thin solid #feb300;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: row;
    margin-bottom: 10px;
}
.Life-Flex-seed-inner-TA-H
{
    border-radius: 4px;
    border: thin solid #feb300;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    margin-right: 10px;
}
.Life-Flex-prob-aspect-H
{
    border-radius: 4px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: row;
    margin-bottom: 20px;
}
.Life-Flex-seed-label-H
{
    border-radius: 4px;
    margin-bottom: 10px;
}
.Life-Flex-wheel-H
{
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
}
.Life-Flex-okbut-H
{
    border-radius: 4px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: column;
}

.lite-flex-which-tech
{
    border-radius: 50%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    border: thin solid #7D3BBB;
}

.slider-Actual-Seed-Value
{
    position: absolute;
    border-radius: 4px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.lite-flex-slider-val
{
    border-radius: 4px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    color: white;
}

/* Big circle closer to #7D3BBB (purple) */
#LiteFlexWheel .rs-bg-color 
{
    background: radial-gradient(ellipse at center, #D1A3FF 0%, #A47CDB 34%, #7D3BBB 100%);
}

/* Handle closer to #FEB300 (golden yellow) */
#LiteFlexWheel .rs-handle  
{
    background: radial-gradient(ellipse at center, #FFE6A3 0%, #FEB300 34%, #CC8A00 100%);
}

/* Range color adjusted for a smooth transition between handle and circle */
#LiteFlexWheel .rs-range-color  
{
    background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.8) 0%, rgba(125, 59, 187, 0.6) 34%, rgba(255, 179, 0, 0.5) 66%, rgba(0, 0, 0, 0.8) 100%);
}

/* Path color to match the purple theme of the big circle */
#LiteFlexWheel .rs-path-color  
{
    background: radial-gradient(ellipse at bottom, #E6CCFF 0%, #B38BCC 34%, #7D3BBB 66%, rgba(5, 0, 0, 1) 100%);
}

/* Border set to transparent */
#LiteFlexWheel .rs-border  
{
    border-color: transparent;
}

.magian-lite-flex-business
{
    color: #feb300;
    font-size: 40px;
    margin-right: 10px;
    margin-left: 10px;
    justify-content: center;
    align-items: center;
}
.magian-lite-flex-business:hover
{
    cursor: pointer;
    transform: scale(1.2);
}
.magian-lite-flex-business:hover:after 
{
    content: "Business Solution Seeds";
    display: block;
    position: relative;
    top: -22px;
    right: 25px;
    width: 300px;
    color: #feb300;
    font-size: 15px;
}

.magian-lite-flex-Env
{
    color: #feb300;
    font-size: 40px;
    margin-right: 10px;
    margin-left: 10px;
    justify-content: center;
    align-items: center;
}
.magian-lite-flex-Env:hover
{
    cursor: pointer;
    transform: scale(1.2);
}
.magian-lite-flex-Env:hover:after 
{
    content: "Environmental Solution Seeds";
    display: block;
    position: relative;
    top: -22px;
    right: 40px;
    width: 300px;
    color: #feb300;
    font-size: 15px;
}

.magian-lite-flex-People
{
    color: #feb300;
    font-size: 40px;
    margin-right: 10px;
    margin-left: 10px;
    justify-content: center;
    align-items: center;

}
.magian-lite-flex-People:hover
{
    cursor: pointer;
    transform: scale(1.2);
}
.magian-lite-flex-People:hover:after  
{
    content: "People Aspect Solution Seeds";
    display: block;
    position: relative;
    top: -22px;
    right: 35px;
    width: 300px;
    color: #FEB300;
    font-size: 15px;
}

.magian-lite-flex-Tech
{
    color: #feb300;
    font-size: 40px;
    margin-right: 10px;
    margin-left: 10px;
    justify-content: center;
    align-items: center;
}
.magian-lite-flex-Tech:hover
{
    cursor: pointer;
    transform: scale(1.2);
}
.magian-lite-flex-Tech:hover:after 
{
    content: "Technological Solution Seeds";
    display: block;
    position: relative;
    top: -22px;
    right: 35px;
    width: 300px;
    color: #FEB300;
    font-size: 15px;
}

.magian-lite-flex-Future
{
    color: #feb300;
    font-size: 40px;
    margin-right: 10px;
    margin-left: 10px;
    justify-content: center;
    align-items: center;
}
.magian-lite-flex-Future:hover
{
    cursor: pointer;
    transform: scale(1.2);
}
.magian-lite-flex-Future:hover:after 
{
    content: "Futuristic Solution Seeds";
    display: block;
    position: relative;
    top: -22px;
    right: 30px;
    width: 300px;
    color: #FEB300;
    font-size: 15px;
}

.magian-lite-flex-biomimicry
{
    color: #feb300;
    font-size: 40px;
    margin-right: 10px;
    margin-left: 10px;
    justify-content: center;
    align-items: center;
}
.magian-lite-flex-biomimicry:hover
{
    cursor: pointer;
    transform: scale(1.2);
}
.magian-lite-flex-biomimicry:hover:after 
{
    content: "Biomimicry Solution Seeds";
    display: block;
    position: relative;
    top: -22px;
    right: 30px;
    width: 300px;
    color: #FEB300;
    font-size: 15px;
}
.ta-problem-magian
{
    border-radius: 4px;
    display: flex;
    justify-content: left;
    justify-items: center;
    align-items: center;
    text-align: justify;
    color: #7D3BBB;
    border: transparent;
    padding: 10px 5px 5px 5px;
    overflow-y: auto;
}
.image-hold-button
{
    background: linear-gradient(to bottom,  #7D3BBB, purple);
    position: absolute;
    border-radius : 50%;
    border: thick solid #7D3BBB;
}
.MF-tit-Lite
{
    border-radius: 6px;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #7D3BBB;
    margin-bottom: 10px;
}