.container_body{
    background: transparent url(../../shell/imgs/limitation_Room.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
}
.container_body::before {
    content: "";
    background: rgba(0 0 0 / 35%);
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

ul.topic_list{
    background: url(connector_line.svg) no-repeat left center;
}
ul.topic_list li#topic_2 {
    top: 5em;
    left: 22%;
}
ul.topic_list li#topic_3 {
top: 1em;
    left: 39%;
}
ul.topic_list li#topic_4 {
    top: 4em;
    right: 36%;
}
ul.topic_list li#topic_5 {
top: 4em;
    right: 22%;
}

ul.topic_list li#topic_2 .clickBox{
    background-image: url("../../shell/imgs/hand_icon.svg");
    background-size: 45%;
}
ul.topic_list li#topic_3 .clickBox{
    background-image: url("../../shell/imgs/dimond_icon.svg");
}
ul.topic_list li#topic_4 .clickBox{
    background-image: url("../../shell/imgs/quote_icon.svg");
}
ul.topic_list li#topic_5 .clickBox{
    background-image: url("../../shell/imgs/que_icon.svg");
    background-size: 65%;
}
ul.topic_list li#topic_2 .clickBox:hover{
    background-image: url("../../shell/imgs/hand_icon_hover.svg");
}
ul.topic_list li#topic_3 .clickBox:hover{
    background-image: url("../../shell/imgs/dimond_icon_hover.svg");
}
ul.topic_list li#topic_4 .clickBox:hover{
    background-image: url("../../shell/imgs/quote_icon_hover.svg");
}
ul.topic_list li#topic_5 .clickBox:hover{
    background-image: url("../../shell/imgs/que_icon_hover.svg");
    background-size: 65%;
}

ul.topic_list li#topic_5.not_attempted .clickBox{
    cursor: default;
    pointer-events: none;
     background-image: url("../../shell/imgs/que_disable_icon.svg");
} 
