*{
    font-family: 'Tajawal', sans-serif;
    font-weight: 400;
}
a{
    text-decoration: none;
}
body{
    background:#f8f9fa;
}
.titleMain{
    font-weight: bold;
}
.greenBg{
    background:#005e00;
    color:#fff;
    text-align: center;
    padding: 5px;
    border:6px solid #57f757;
}
.redBg{
    background:#5e0000;
    color:#fff;
    text-align: center;
    padding: 5px;
    border:6px solid #ff8686;
}
.yallowBg{
    background:#000;
    color:#fff;
    text-align: center;
    padding: 5px;
    border:6px solid #bbb;
}
.blueBg{
    background:#001aff;
    color:#fff;
    text-align: center;
    padding: 5px;
    border:6px solid #577cf7;
}
.moveBg{
    background:#3b00c4;
    color:#fff;
    text-align: center;
    padding: 5px;
    border:6px solid #8f57f7;
}
.cyanBg{
    background:#00eeff;
    color:#000;
    text-align: center;
    padding: 5px;
    border:6px solid #93fff1;
}
.mainSection{
    background:#eee;
    border: 2px solid #bbb;
    padding:5px;
    margin-bottom: 5px;
}
.headerTop{
    background:#eee;
    border: 2px solid #bbb;
    padding:5px;
    margin-bottom: 5px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
}
.border2PXGreen{
    border:1px solid #01d101;
    background:#a2ffa2;
    margin-top:3px;
}
.bGreen{
    border: 1px solid #cafdca;
}
.border2PXBlue{
    border:1px solid #001aff;
    background:#a0b6ff;
    margin-top:3px;
}
.bBlue{
    border: 1px solid #aab3ff;
}
.border2PXRed{
    border:1px solid #5e0000;
    background:#ffc6c6;
    margin-top:3px;
}
.bRed{
    border: 1px solid #ffabab;
}
.border2PXYellow{
    border:1px solid #ffee00;
    background:#fffaba;
    margin-top:3px;
}
.bYellow{
    border: 1px solid #f8f2a3;
}
.border2PXSyan{
    border:1px solid #00eeff;
    background:#bdfff6;
    margin-top:3px;
}
.bSyan{
    border: 1px solid #bbfaff;
}
.border2PXMove{
    border:1px solid #3b00c4;
    background:#d2baff;
    margin-top:3px;
}
.bMove{
    border: 1px solid #c5acff;
}
.ulMe{
    margin:10px;
}
.ulMe div{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    justify-items: end;
    align-items: center;
    margin:2px 5px;
    padding:5px;
    cursor: pointer;
    background:#ffffff;
    border-radius: 5px;
}
.ulMe div:hover{
    background:#ffffff71;
}
#showVideo{
    width:100%;
    height:400px;
}
.divRow{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    justify-items: end;
    align-items: center;
}
label{
    font-weight: bolder;
    font-size:1rem
}
span{
    font-weight: bolder !important;
}
.closeDialog{
    position: absolute;
    left: 30px;
    top:20px;
    color: #fff;
    background:red;
    padding:5px 10px;
    font-weight: bolder;
    border-radius: 5px;
    cursor: pointer;
}
@media only screen and (max-width: 1200px){
    
    #showVideo{
        width:100%;
        height:450px;
    }
    label{
        font-weight: bolder;
        font-size:1rem;
    }
}
@media only screen and (max-width: 667px){
    .closeDialog{
        font-size: .7rem;
    }
    h5{
        font-size:.8rem;
    }
    #showVideo{
        width:100%;
        height:250px;
    }
    label{
        font-weight: bolder;
        font-size:1rem;
    }
    .headerTop{
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        align-items: center;
    }
}
@media only screen and (max-width: 414px){
    
    #showVideo{
        width:100%;
        height:180px;
    }
    label{
        font-size:.8rem;
    }
}