﻿
.Loginlist {
    background-color: #203A8E;
    position: absolute;
    max-height: 500px;
    max-width: 100%;
    overflow: auto;
    border: 1px solid #254B4B;
    text-align: left;
    margin: 1px;
    border-radius: 7px;
    background: linear-gradient(bottom, #c4b6fe 5%, #faa938 100%);
    background: -webkit-linear-gradient(bottom, #c4b6fe 5%, #faa938 100%);
    background: -moz-linear-gradient(bottom, #c4b6fe 5%, #faa938 100%);
    background: -o-linear-gradient(bottom, #c4b6fe 5%, #faa938 100%);
    background: -ms-linear-gradient(bottom, #c4b6fe 5%, #faa938 100%);
    background: linear-gradient(bottom, #c4b6fe 5%, #faa938 100%);
}

.Con_Flex {
    display: flex;
    width: 100%;
    height: 100%;
    display: normal;
    overflow: auto;
}

.Con_Flex1, .Con_Flex2, .Con_Flex3, .Con_Flex4 {
    overflow: auto;
    width: 100%;
    margin: 0;
    background: #fff;

    vertical-align: middle;
}

.Con_Flex1_noBoxShadow, .Con_Flex2_noBoxShadow, .Con_Flex3_noBoxShadow, .Con_Flex4_noBoxShadow {
    width: 100%;
    margin: 0;
    background: #fff;
    border-width: 0;
}

.waitl {
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    margin: 0;
    background: #fff;
}

#Con_Flex1 {
    text-align: justify;
    padding: 10px 12px 30px 10px;
    font-size: 14px;
    word-wrap: break-word;
    font-family: Calibri, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    vertical-align: middle;
    display: normal;

}

#Con_Flex1 p {
    margin: 12px 0;
}

.marquee, .marquee a {
    font-family: st20, 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    color: #304296;
    padding-bottom: 17px;
    margin: 0;
}

.marquee a {
    padding: 0 15px;
    font: 13.3px st20;
    font-weight: normal;
}

.marquee a:hover {
/ / font-size: 17 px;
    color: #E80000;
}

.Nobesn, .besn {
    height: 30px;
    background: none;
    padding: 6px 20% 6px 20%;
    border-radius: 7px;
}

.Nobesn {
    margin-left: 3px;
}

.subDiv {
    background-color: #067777;
    height: 80%;
    top: 10%;
    position: absolute;
}

.ste-SubMenu {
    background: #fff;
    background: linear-gradient(top, #CB1010 0, #840B0B 100%) no-repeat;
    background: -webkit-linear-gradient(top, #CB1010 0, #840B0B 100%) no-repeat;
    background: -moz-linear-gradient(top, #203A8E 0, #203A8E 0%) no-repeat;
    background: -o-linear-gradient(top, #CB1010 0, #840B0B 100%) no-repeat;
    background: -ms-linear-gradient(top, #CB1010 0, #840B0B 100%) no-repeat;
    background: linear-gradient(top, #CB1010 0, #840B0B 100%) no-repeat;
    -svg-background: linear-gradient(top, #CB1010 0, #840B0B 100%) no-repeat;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.15);
    border: 0px solid #A50D0D;
    height: 22px;
    position: relative;
    z-index: 100;
    text-align: center;
    margin: 1px;

}

.ste-SubMenu, .ste-SubMenu a {
    font-size: 14px;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 24px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 0 7px;
    position: relative;
    height: 100%;
    cursor: pointer;
    text-align: center;
    display: block;
    margin: 0;
    border-bottom: 1px solid #F68121;
    font: 13px st20;
    font-weight: 500;
    /*bassam saed*/
}

.ste-SubMenu:hover, .ste-SubMenu a:hover {
    border-radius: 7px 0;

    border-bottom: 2px solid #faa938;
}

.listxxx a:hover {
    background: none;
    background-color: #5E8AC6;
    color: #F0F0FF;
}

.Pclass {
    color: #0832b9;
    font-size: 14px;
    font-weight: bold;
}

.edit {
    display: block;
    position: absolute;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    top: 2px;
    left: 18px;
    width: 10px;
    height: 10px;
    border: 0px #006595 solid;
/ / box-shadow: 1 px 1 px 0 px 0 px #FF8040;
    cursor: pointer;
    background-image: url('../images/edit1.jpg');
}

.invisible {
    border-bottom: White;
    border-top: White;
    background-color: transparent;
    color: White;
    display: none;
    z-index: -100;

}

.asinvisible {
    border-bottom: White;
    border-top: White;
    background-color: transparent;
    color: White;
    display: none;
}

.txtereaEd {
    color: black;
    border-radius: 7px;
    margin: 0px;
    width: calc(100% - 15px);
    height: 95%;
    max-height: 100%;
    padding-top: 15px;
    padding-right: 10px;
/ / text-align: center;
/ / background-color: White;
/ / overflow: auto;
    border: 0px solid #254B4B;
    font-size: 15px;
    font-weight: bold;
}

.tbInfo {
    width: 100%;
    height: 100%;

}

.tbInfo th {
    color: #A50D0D;
    font-weight: bold;
    font-size: 18px;
    padding: 8px;
    text-align: center;
    border-bottom: 1px #E80000 groove;
}

.tbInfo td {
    color: #203A8E;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    text-align: center;
    vertical-align: middle;
    border-bottom: 0px #E80000 groove;
}

.tbInfo tr:hover {
/ / background: #F7E0CE !important;
}

.tbInfo tr:last-child {
    border-bottom: 0px #E80000 groove;
}

.tbInfo tr:last-child td {
    padding-bottom: 10px;
    border-bottom: 1px solid transparent;
}

.tbInfo td:last-child:first-child {
    border-bottom: 1px #E80000 groove;
}

.tbInfo #mID {
/ / padding-top: 10 px;
/ / color: #D0635E;
}

.button {
    border: 2px solid #B5CAE4;
    font-size: 14px;
    font-family: st20;
    font-weight: bold;
    text-align: center;
    color: #1c3c3c;
/ / background-color: #cec8c8;
    width: 100%;
    height: 40px;
    margin: 2px auto;
    border-radius: 8px;
    box-shadow: inset 30px 0px 50px 2px #fff, inset -30px 0px 50px 0px #fff;
    text-shadow: 0px 0px 0.02em rgb(230, 56, 56);
    background-position: left center;
    cursor: pointer;

}

.Nbutton {
    border: 2px solid #B5CAE4;
    font-size: 14px;
    font-family: st20;
    text-align: center;
    color: #304399;
    background-color: #cec8c8;
    width: 100%;
    height: 40px;
    margin: 2px auto;
    border-radius: 8px;
    box-shadow: inset 30px 0px 50px 2px #fff, inset -30px 0px 50px 0px #fff;
    text-shadow: 0px 0px 0.02em rgb(230, 56, 56);
/ / background-image: url('../images/less.gif');
    background-position: left center;
    cursor: pointer;

}

.button_reg {
    border: 1px solid #B5CAE4;
    font-size: 16px;
    font-family: Calibri;
    font-weight: bold;
    text-align: center;
    color: #173490;
    width: 100%;
    height: 100%;
    margin: 20px auto 0 auto;
    border-radius: 8px;
    box-shadow: inset 30px 0px 50px 2px #fff, inset -30px 0px 50px 0px #fff;
    text-shadow: 0px 0px 0em rgb(230, 56, 56);

}

.Nbutton:hover {
    color: #3550A8;
    background-color: #88a6fb;
/ / box-shadow: inset 2 px 0 px 30 px 0 px #fbf2eb;
    cursor: pointer;
}

.D_Detail {
    border: 1px solid #F89340;
    border-top: 0;
/ / border-left: 0;
/ / border-right: 0;
    border-radius: 8px 8px;
    box-shadow: inset 0px -2px 5px 0px #f2730a, inset 0px 2px 0px 0px #f2730a;
    padding: 20px 25px;

}

.D_Detail, .hedCl_De, .hedCl {
    font-family: st20;
    font-size: 14px;
    line-height: 32px;

}

.D_Detail_j {

    border-top: 0;

    padding: 5px 15px 10px 15px;
    font-family: Calibri;
    font-size: 18px;

    color: gray;
    font-weight: normal;
}

.D_Detail table td, .D_Detail table th {
    border: 1px solid #ddd;
    vertical-align: middle;
    text-align: center;
    padding: 2px;
    direction: ltr;

}

.hedCl {
    color: #c11717;
    font-weight: bold;
    font-size: 17px;
    padding-top: 25px;
    font-family: Calibri;
}

.hedCl:first-child {
    padding-top: 0px;
}

.hedCl_De {
    color: #16328d;
    border: 0px solid red;
    padding-right: 20px;
    line-height: 32px;
}

.hedCl_De:before {
    content: '-';
}

.buttonN {
    -moz-border-radius: 5px;
    -moz-box-shadow: #6E7849 0px 0px 10px;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: #6E7849 0 0 10px;
    -webkit-transition: all 0.5s ease;
    background-color: #46578e;
    background-image: -moz-linear-gradient(90deg, #46578e, #46578e);
    background-image: -ms-linear-gradient(90deg, #46578e, #46578e);
    background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
    background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
    background-image: linear-gradient(10deg, #46578e, #979aa5);
    border-radius: 5px;
    border: 1px solid #4a5032;
    box-shadow: #6E7849 0px 0px 10px;
    color: #ffffff;
    display: inline-block;
    font-size: 1em;
    margin: auto;
    padding: 5px;
    text-decoration: none;
/ / text-shadow: 2 px 2 px #000000;
    transition: all 0.5s ease;
    height: 25px;
    font-size: 12px;
    font-weight: bold;
}

.buttonN:hover {
    border-bottom: 1px solid #fff;
    padding: 5px 15px 5px 15px;
}

.votoutdiv {
    border: 1px solid #203A8E;
    border-radius: 3px;
    height: 15px;
    overflow: visible;
    white-space: nowrap;
    float: left;
    text-align: right;
    font-size: 14px;
    font-weight: normal;
    line-height: 100%;
    width: 85%;
    max-width: 100px;
    margin-left: calc(50% - 40px)
}

.votindiv {
    width: 5%;
    height: 100%;
    overflow: visible;
    white-space: nowrap;
    float: left;
}

.Divinfo {
    height: 0px;
    overflow: hidden;
    -moz-transition: height 1s steps(1, start);
    -ms-transition: height 1s steps(1, start);
    -o-transition: height 1s steps(1, start);
    -webkit-transition: height 1s steps(1, start);
    text-shadow: 0px 0px #000000;
    color: #840B0B;
    background: -moz-linear-gradient(top, #fff 0, #fad8d8 100%) repeat;
}

.hint {
    background-image: url('../images/hint.jpg');
    background-repeat: no-repeat;
    background-size: contain;
}

.marquee {
    overflow: hidden;
    text-align: left;
}

.marquee.marquee-speed-drowsy:before {
    animation-duration: 30s;
}

.marquee.marquee-speed-slow:before {
    animation-duration: 20s;
}

.marquee.marquee-speed-custom:before {
    animation-duration: inherit;
}

.marquee.marquee-speed-normal:before {
    animation-duration: 10s;
}

.marquee.marquee-speed-fast:before {
    animation-duration: 7s;
}

.marquee.marquee-speed-swift:before {
    animation-duration: 5s;
}

.marquee.marquee-speed-hyper:before {
    animation-duration: 2s;
}

@keyframes movement-smooth {
    from {
        transform: translateX(0%);
        left: 100%;
    }

    to {
        transform: translateX(-100%);
        left: 0%;
    }
}

@keyframes movement-steps20 {
    0% {
        transform: translateX(0%);
        left: 100%;
    }

    5%, 9.99% {
        transform: translateX(-5%);
        left: 95%;
    }

    10%, 14.99% {
        transform: translateX(-10%);
        left: 90%;
    }

    15%, 19.99% {
        transform: translateX(-15%);
        left: 85%;
    }

    20%, 24.99% {
        transform: translateX(-20%);
        left: 80%;
    }

    25%, 29.99% {
        transform: translateX(-25%);
        left: 75%;
    }

    30%, 34.99% {
        transform: translateX(-30%);
        left: 70%;
    }

    35%, 39.99% {
        transform: translateX(-35%);
        left: 65%;
    }

    40%, 44.99% {
        transform: translateX(-40%);
        left: 60%;
    }

    45%, 49.99% {
        transform: translateX(-45%);
        left: 55%;
    }

    50%, 54.99% {
        transform: translateX(-50%);
        left: 50%;
    }

    55%, 59.99% {
        transform: translateX(-55%);
        left: 45%;
    }

    60%, 64.99% {
        transform: translateX(-60%);
        left: 40%;
    }

    65%, 69.99% {
        transform: translateX(-65%);
        left: 35%;
    }

    70%, 74.99% {
        transform: translateX(-70%);
        left: 30%;
    }

    75%, 79.99% {
        transform: translateX(-75%);
        left: 25%;
    }

    80%, 84.99% {
        transform: translateX(-80%);
        left: 20%;
    }

    85%, 89.99% {
        transform: translateX(-85%);
        left: 15%;
    }

    90%, 94.99% {
        transform: translateX(-90%);
        left: 10%;
    }

    95%, 99.99% {
        transform: translateX(-95%);
        left: 5%;
    }

    100% {
        transform: translateX(-100%);
        left: 0%;
    }
}

@keyframes movement-steps10 {
    0% {
        transform: translateX(0%);
        left: 100%;
    }

    10%, 19.99% {
        transform: translateX(-10%);
        left: 90%;
    }

    20%, 29.99% {
        transform: translateX(-20%);
        left: 80%;
    }

    30%, 39.99% {
        transform: translateX(-30%);
        left: 70%;
    }

    40%, 49.99% {
        transform: translateX(-40%);
        left: 60%;
    }

    50%, 59.99% {
        transform: translateX(-50%);
        left: 50%;
    }

    60%, 69.99% {
        transform: translateX(-60%);
        left: 40%;
    }

    70%, 79.99% {
        transform: translateX(-70%);
        left: 30%;
    }

    80%, 89.99% {
        transform: translateX(-80%);
        left: 20%;
    }

    90%, 99.99% {
        transform: translateX(-90%);
        left: 10%;
    }

    100% {
        transform: translateX(-100%);
        left: 0%;
    }
}

@keyframes movement-steps5 {
    0%, 19.99% {
        transform: translateX(0%);
        left: 100%;
    }

    20%, 39.99% {
        transform: translateX(-20%);
        left: 80%;
    }

    40%, 59.99% {
        transform: translateX(-40%);
        left: 60%;
    }

    60%, 79.99% {
        transform: translateX(-60%);
        left: 40%;
    }

    80%, 99.99% {
        transform: translateX(-80%);
        left: 20%;
    }

    100% {
        transform: translateX(-100%);
        left: 0%;
    }
}

.marquee.marquee-movement-smooth:before {
    animation-name: movement-smooth;
}

.marquee.marquee-movement-steps20:before {
    animation-name: movement-steps20;
}

.marquee.marquee-movement-steps10:before {
    animation-name: movement-steps10;
}

.marquee.marquee-movement-steps5:before {
    animation-name: movement-steps5;
}

.marquee.marquee-direction-left:before,
.marquee.marquee-direction-normal:before {
    animation-direction: normal;
}

.marquee.marquee-direction-alternate:before {
    animation-direction: alternate;
}

.marquee.marquee-direction-right:before,
.marquee.marquee-direction-reverse:before {
    animation-direction: reverse;
}

.marquee:before {
    content: attr(data-marquee);
    white-space: nowrap;
    position: relative;
    transform: translateX(-50%);
    display: inline-block;
    left: 50%;
    animation: linear infinite;
}

.marquee:before {
    animation-duration: 10s;
}

.marquee:before {
    animation-name: movement-smooth;
}

.marquee:before {
    animation-direction: normal;
}

.ste_SubMenuA {
    direction: rtl;
}

.ste_SubMenuA:hover {
/ / border-radius: 7 px 0;
}

.div {
    font-family: Calibri;
    font-size: 14px;
    border-radius: 5px;
}

#timerDiv:hover {
    background: #77c3fa !important;
    border-radius: 5px;
    display: flexbox;
    font-weight: bold;
    color: purple;
}

.CL_ALL table {
    width: 100%;
}

.CL_ALL table th, .CL_ALL table td {
    padding: 2px;
    border: solid 0px #8A8792;
    vertical-align: top;
    text-align: center;
}

.CL_ALL table {
    border-collapse: separate;
    border-spacing: 1px;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    table-layout: fixed;
}

.CL_ALL table tr th {
    background-color: #ECA973;
    font-weight: bold;
    color: #183165;
    border-bottom: solid 0px #ccc;
    padding: 2px;
    font: 14px st20;
}

.CL_ALL table tr th {
    border-radius: 5px;
}

.CL_ALL table tr th:first-child {
    width: 20%;
}

.CL_ALL table tr th:last-child {
    width: 20%;
}

.CL_ALL table tr th:nth-child(3) {
    width: 20%;
}

.CL_ALL table tr td {
    padding: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    border-bottom: solid 0px #FF6A00;
    font: 14px st20;
    font-weight: normal;
}

.CL_ALL table tr:hover {
    background-color: #ddd;
    border-bottom: 1px solid #203A8E;
}

.CL_ALL table tr td:hover {
    border-radius: 7px;
    background-color: lightskyblue;
    color: blue;
}

.CL_ALL table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.CL_ALL table tr:first-child {
}

.CL_ALL P {
    color: red;
    padding: 10PX 15PX;
}

.Watinl2Load {
    position: absolute;
    width: 46px;
    height: 46px;
    top: calc(50% - 16px);
    left: calc(50% - 23px);
}

.Watinl2Load_larg {
    position: absolute;
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
}

.clMain {

    width: 100%;
    height: auto;
    border: 0px solid #e0dbdb;
    text-align: center;
    vertical-align: middle;
    text-align: center;
    direction: rtl;
    overflow: hidden;
}

.clRowLeft, .clRowRghit {
    width: 5%;
    height: 80%;
    border: 0px solid #e0dbdb;
    border-radius: 7px;
    background-image: url('/images/slick_arrows.png');
    background-repeat: no-repeat;
}

.clRowLeft {
    background-position: calc(100% - 15px) center;
}

.clRowRghit {
    background-position: 15px center;
}

.clRowRghit:hover {
/ / background-color: #f7f3f3;
    border-left: 2px solid #F89340;
    vertical-align: middle;
}

.clRowLeft:hover {
/ / background-color: #f7f3f3;
    border-right: 2px solid #F89340;
    vertical-align: middle;
}

.clRowLeftN, .clRowRghitN {
    width: 5%;
    height: 80%;
    border: 0px solid #6381A9;
    border-radius: 4px;
    background-image: url('/images/slick_arrows.png');
    background-repeat: no-repeat;
}

.clRowLeftN:hover, .clRowRghitN:hover {
/ / background-color: #f7f3f3;
    border: 1px solid #C59870;
    vertical-align: middle;
    border-bottom-width: 0px;
    border-top-width: 0px;
}

.clMidMain {
    display: flex;
    width: 100%;
    height: 100%;
    border: 0px solid #e0dbdb;
}

.clMainDetail {
    width: 100%;
    height: 100%;
    border: 0px solid #e0dbdb;
}

.clMainName {
    border-radius: 7px;
    width: 100%;
    height: 15%;
    border: 0px solid #e0dbdb;
    font-family: 'Simplified Arabic';
    font-size: 17px;
    font-weight: bold;
    vertical-align: middle;
    min-height: 40px;
}

.clMainMedia {
    border-radius: 7px;
    width: 100%;
    height: 70%;
    border: 0px solid #e0dbdb;
    z-index: 535656;
    padding: 0px;
    margin: 0px;
/ / display: table-cell;

}

.clMainDescr {
    width: 100%;
    height: calc(15% - 10px);
    border: 0px solid #000000;
    border-radius: 7px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Traditional Arabic';
    vertical-align: middle;
    display: normal;

}

.clMainSep {
    width: 20px;
}

.clMainSepH {
    height: 3px;
}

.video_x {
    height: 400px;
    width: 500px;
    border: 0px solid #000000;
    border-radius: 7px;
    display: table-cell;
    vertical-align: middle;
/ / background: transparent url('../images/wait1.gif') center 40 % no-repeat;
/ / background-size: 150 px auto;
    background: transparent url('../images/wait5.gif') center 45% no-repeat;
    background-size: 50px auto;
}

.video {
    background: transparent url('../images/wait5.gif') center center no-repeat;
    background-size: 50px auto;
}

.imagesCl {
    height: 100%;
    /*vertical-align: middle;  
    background-image: -webkit-linear-gradient(#F39732,#94959A,#161A45);
    background-image: -moz-linear-gradient(#F39732,#94959A,#161A45);
    background-image: -ms-linear-gradient(#F39732,#94959A,#161A45);
    background-image: -o-linear-gradient(#F39732,#94959A,#161A45);
    background-image: linear-gradient(#F39732,#94959A,#161A45);*/
    border: 1px solid #ddd;
    background: url(../images/wait6.gif) no-repeat center center;
    background-size: 64px 64px;

}

.clMainDescr:hover, .clMainName:hover {
    border-radius: 0;
}

.clMainName:hover {
}

.imag_text {
    height: 100%;
    border: 0px solid #203A8E;
    font-size: 17px;
    font-weight: bold;
    font-family: 'Traditional Arabic';
    vertical-align: middle;
    display: table-cell;
    padding: 10px;

}

#Discr_div {
    border: 0px solid #203A8E;
    font: 14px st20;
    color: #173490;
    display: table;
    padding: 10px;
}

/*#Discr_div p,#Discr_div h4 {
    border:1px solid #203A8E;
    vertical-align: middle;
    display: table-cell;

}*/

.imagA1 {
    width: 100%;
    height: 100%;
    opacity: 0;
}

.table {
    width: 100%;
    border: 0px solid red;

}

.table tr td, th {
    border: 0;
}

.table table tr {
    border-bottom: 1px dotted #ddd;
}

.table table tr:first-child {
    border-bottom: 0px dotted #173490;
}

.table table tr:last-child {
    border-bottom: 0px dotted #173490;
}

.waite {
    background-image: url('../images/wait5.gif');
    background-size: auto 17%;
    background-position: center center;
    background-repeat: no-repeat;
    height: 300px;
    width: 100%;

}

#MainTable {
    opacity: 1; /* Here is your opacity */
    position: relative;
    background: url('../images/shamra1.jpg') no-repeat;
    background-size: 100% 100%;
    height: 100%;
    padding: 1px 10px;
    border-radius: 15px;
/ / min-height: 526 px;
}

#MainTable::before {
/ / opacity: 0; /* Here is your opacity */
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url('../images/shamra1.jpg') no-repeat;
    background-size: 100% 100%;
    opacity: 0.1;

}

#MainTable::after {
    content: '';

}

.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;

}

.manMenu1, manMenu1 * {
    font: 12px st20;
    padding-top: 0px;
    min-width: 154px;

}