.btn {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}


/*start tables2*/

.tables-first .nav.nav-pills .nav-item {
    width: 31% !important;
}


/*end tables2*/


/*start activites*/

.card .card-img .svg-inline--fa {
    font-size: 50px;
    color: #051537;
}

.all-content .main-content .left-content .s-activity:hover .svg-inline--fa {
    color: #fff;
}


/*end activites*/


/*start the activity*/

.snd {
    display: table;
    margin: 10px auto 0;
}

.the-activity .table img {
    width: 60px;
}


/*start the activity*/


/*start activity description*/

.activity-des {
    border: 1px solid #fff;
    text-align: center;
    padding: 20px;
    border-radius: 15px;
}

.activity-des .act-img {
    width: 110px;
    height: 110px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.activity-des h3 {
    margin-bottom: 30px;
    font-size: 25px;
}

.activity-des .Pio-act {
    width: 45px;
    height: 45px;
    border-radius: 5px;
}

.activity-des .btn {
    display: table;
    margin: 10px auto;
}


/*end activity description*/


/*start email*/

.barid {
    display: flex;
    justify-content: space-between;
}

.barid a {
    background-color: #9cb5ff;
    color: #fff;
    border-radius: 10px;
    font-size: 17px;
    padding: 10px 20px;
    font-family: "font-regular";
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.barid a.active,
.barid a:hover,
.barid a:focus {
    color: #ffffff;
}


/*end email*/


/*start my-data*/

.my-data {
    padding-top: 20px;
}

.my-data h4 {
    font-size: 19px;
    margin-top: 10px;
    margin: 0 0 5px;
}

.my-data .data-back {
    background-color: #fff;
    box-shadow: 0 0px 55px 0 rgba(0, 0, 0, 0.09);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.my-data p {
    font-size: 16px;
    margin-bottom: 0;
}

.my-data .per-data {
    margin-bottom: 15px;
    background-color: #fff;
    box-shadow: 0 0px 55px 0 rgba(0, 0, 0, 0.09);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.my-data .per-data .my-per {
    font-size: 16px;
    padding-left: 8px;
}

.edit-data .modal-header {
    border-bottom: 0;
    padding: 10px;
}

.edit-data .modal-content {
    border-radius: 15px;
}

.edit-data form .btn {
    display: table;
    margin: 10px auto;
}


/*end my-data*/


/*start questionaire*/

a.que-btn {
    background-color: #fff;
    border-radius: 5px;
    font-size: 17px;
    padding: 10px 20px;
    font-family: "font-regular";
    display: block;
    width: 100%;
    position: relative;
}

a.que-btn:after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    content: "\f078";
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    position: absolute;
    top: 10px;
    left: 15px;
}

.questions {
    margin-top: 15px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
}

.questions .btn {
    display: table;
    margin: 0 auto;
}


/*end questionaire*/


/*start curriculm*/

.page-num-4 .pages-content {
    padding: 0;
}

.pages-content img {
    max-width: 100%;
    height: 100%;
}

.pages-content span {
    width: 25px;
    height: 25px;
    background-color: #444544;
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
}

.down-book {
    background-color: #efefef;
    color: #aeaeae;
    border-radius: 10px;
    font-size: 17px;
    padding: 10px 25px;
    font-family: "font-regular";
    width: auto;
    display: table;
    margin: 10px auto;
}

.down-book span {
    padding-left: 20px;
}

a.homework {
    background-color: #efefef;
    color: #aeaeae;
    border-radius: 10px;
    font-size: 17px;
    padding: 10px 20px;
    font-family: "font-regular";
    display: block;
    width: 100%;
    position: relative;
}

a.homework:after {
    font-family: "FontAwesome" !important;
    font-weight: 900;
    content: "\f078";
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    color: #aeaeae;
    position: absolute;
    top: 15px;
    left: 15px;
}

.unit {
    margin-top: 15px;
    background-color: #efefef;
    padding: 20px;
    border-radius: 10px;
}

.unit span {
    padding-left: 20px;
}

.compare .custom-control-label {
    padding-right: 25px;
}

[dir=rtl] .compare .custom-control-label::before {
    left: auto;
    right: 0;
}

.all-com {
    display: flex;
    justify-content: space-between;
}

.hw-btn {
    display: table;
    margin: 10px auto;
}

.unit-links {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.unit-links .nav-link {
    background-color: #9cb5ff;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    padding: 10px 20px;
    font-family: "font-regular";
    margin: 10px;
    display: block;
}

.unit-links a.active {
    color: #fff;
}


/*end curriculm*/

.clock ul:after {
    display: none;
}


/*test video*/

.all-news-details {
    background: transparent;
    text-align: right;
    padding-bottom: 20px;
    overflow: hidden;
    width: 100%;
    margin: 0 auto 40px;
}

.all-news-details .news-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 15px;
}

.all-news-details .news-image img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.all-news-details .news-title .news-date {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #aaa;
}

.all-news-details .news-title h3 {
    font-size: 17px;
    line-height: 24px;
    margin-bottom: 10px;
    padding: 0;
}

.all-news-details .news-title p {
    font-size: 15px;
    color: #777;
    line-height: 23px;
    margin-bottom: 15px;
    padding: 0;
}

.all-news-details:hover .hover-effect::after,
.all-news-details:hover .hover-effect::before {
    height: 100%;
    opacity: 0;
    width: 100%;
}

.videoWrapper {
    position: relative;
    width: 100%;
    height: 0;
}

.videoWrapper43 {
    padding-top: 75%;
}

.videoWrapper169 {
    padding-top: 56%;
}

.videoIframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.videoPoster {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    outline: none;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-size: cover;
    text-indent: -999em;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: opacity 800ms, height 0s;
    -moz-transition: opacity 800ms, height 0s;
    transition: opacity 800ms, height 0s;
    -webkit-transition-delay: 0s, 0s;
    -moz-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
}

.videoPoster:before {
    content: '';
    background: url("../imgs/player.png");
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 100%;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
}

.videoPoster:after {
    content: '';
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-radius: 0;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
}

.videoWrapperActive .videoPoster {
    opacity: 0;
    height: 0;
    -webkit-transition-delay: 0s, 800ms;
    -moz-transition-delay: 0s, 800ms;
    transition-delay: 0s, 800ms;
}

.close-video {
    position: absolute;
    bottom: 15px;
    z-index: 1;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 5px;
    width: 100px;
    height: 30px;
    font-size: 15px;
    right: 15px;
    line-height: 20px;
    outline: none;
}

.html5-video-player a {
    display: none !important;
}

.video-section {
    position: relative;
}

.news-image .close-video {
    bottom: 60px;
}

@media(max-width: 600px) {
    .news-image .close-video {
        bottom: 10px;
    }
}


/*test video*/

.table_test,
.download_paper {
    padding-top: 70px;
    padding-bottom: 70px;
    margin-top: 50px;
}

.download_paper .image {
    display: table;
    margin: auto;
}

.download_paper .download a {
    color: #fff;
    display: block;
    text-align: center;
    width: 200px;
    height: 40px;
    border-radius: 30px;
    margin: auto;
    padding-top: 7px;
    margin-top: 30px;
}

.prods {
    color: #aeaeae;
    font-size: 40px;
    text-align: center;
}

.all-content .main-content .left-content .s-activity:hover .prods {
    color: #fff;
}

.subscription {
    text-align: center;
    background-color: #f4f4f9;
    margin-right: 25%;
    margin-left: 25%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 100px;
}

.subscription button {
    color: #fff;
    display: block;
    text-align: center;
    width: 200px;
    height: 40px;
    border-radius: 30px;
    margin: auto;
    padding-top: 3px;
    margin-top: 30px;
}

.subscription span {
    color: #000;
    font-size: 30px;
}

.subscription svg:not(:root).svg-inline--fa {
    color: red;
    font-size: 30px;
}

.card h6.st_name {
    text-align: right;
    margin-right: 5px;
}

.send {
    display: table;
    margin: auto;
    padding: 10px 40px;
}

.all-content .main-content .left-content .s-info .info-title {
    max-width: 100%;
}

.primary_seasson {
    text-align: center;
    display: block;
    margin: auto;
    margin-bottom: 40px;
}

.all-content .nav.nav-pills .nav-item .nav-link .icon_class {
    width: 100%;
}

.all-question-result .square {
    width: 20px;
    height: 20px;
    border: 1px solid #c12c2c;
    background-color: #c12c2c;
    display: inline-block;
    position: relative;
    top: 20px;
    border-radius: 50%;
}

.all-question-result .green {
    border: 1px solid green;
    background-color: green;
}

.radio[disabled] {
    background-color: #000;
}

.result_checked h1 {
    font-size: 30px;
    margin-top: 30px;
}

.result_checked .write {
    font-family: "font-regular";
    font-size: 16px;
    margin-bottom: 15px;
    position: relative;
    display: block;
}

.datepicker {
    right: auto !important;
}

.eyes-link {
    width: 30px;
    height: 30px;
    border: 1px solid;
    display: block;
    margin: 0 auto;
    line-height: 30px;
    border-radius: 25px;
    transition: 0.5s;
}

.eyes-link:hover {
    color: #fff;
    transition: 0.5s;
}

.congratulation-section canvas {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.user-info-win {
    z-index: 2;
    position: relative;
}

.choose-section {
    margin-top: 10px;
    margin-bottom: 20px;
}

.dis-abs {
    position: relative;
    bottom: 0px;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff;
    text-align: center;
    padding: 15px 0;
    z-index: 9;
    box-shadow: 0 0 10px 0 #ddd;
    overflow: hidden;
}

.form-group .form-check .form-check-input~label.true:before {
    background: #007f00;
    border: 1px solid #007f00;
}

.form-group .form-check .form-check-input~label.false:before {
    background: #c12c2c;
    border: 1px solid #c12c2c;
}

.question {
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.all-question-result {
    width: calc(100% - 20%);
    padding: 0px 0px 0px;
    position: relative;
    overflow: scroll;
    max-height: 550px;
}

.all-question-result .left-content {
    width: 100% !important;
}

.result_checked {
    margin-bottom: 50px;
}

.dis-abs .row {
    margin-left: 0;
    margin-right: 0;
}


/* book */

.my-book {
    overflow: hidden;
    margin-top: 10px;
}

@media only screen and (min-width: 40em) {
    .my-book {
        perspective: 250vw;
        overflow: visible;
    }
}

.my-book .pages-responsive {
    overflow-x: auto;
    transform: translateZ(0);
    position: relative;
    height: 600px;
}

.my-book .pages-responsive:after {
    display: block;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0);
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive {
        overflow: visible;
        transform: none;
    }
    .my-book .pages-responsive:after {
        display: none;
    }
}

.my-book .pages-responsive .pages {
    position: relative;
    margin: 0 auto;
    width: 1000%;
    padding-bottom: 40%;
    height: 0;
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages {
        transform: rotateX(15deg);
        transform-style: preserve-3d;
        width: 100%;
        height: 100%;
    }
}

.my-book .pages-responsive .pages .page {
    position: relative;
    transition: transform 1s;
    width: 10%;
    float: left;
    backface-visibility: hidden;
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page {
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        height: 100%;
        cursor: pointer;
        margin: 0;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.1);
        user-select: none;
    }
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0);
        transition: background 0.5s;
        z-index: 2;
    }
}

.my-book .pages-responsive .pages .page img {
    width: 100%;
    height: 100%;
    position: relative;
}

.my-book .pages-responsive .pages .page .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.my-book .pages-responsive .pages .page .caption p {
    color: white;
    text-shadow: 0 0 50px black;
    font-weight: bold;
}

.my-book .pages-responsive .pages .page:nth-child(even) {
    pointer-events: none;
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page:nth-child(even) {
        transform: rotateY(-180deg);
        transform-origin: 0 -100%;
        right: 0;
        left: 50%;
    }
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page:nth-child(even):after {
        background: linear-gradient(to left, transparent 70%, rgba(0, 0, 0, 0.6) 97%);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: " ";
        display: block;
    }
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page:nth-child(even).page--flipped {
        pointer-events: all;
        transform: rotateY(-10deg);
    }
}

.my-book .pages-responsive .pages .page:nth-child(even).page--flipped:before {
    background: rgba(0, 0, 0, 0.03);
}

.my-book .pages-responsive .pages .page:nth-child(even):before {
    background: rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page:nth-child(odd) {
        pointer-events: all;
        transform: rotateY(10deg);
        transform-origin: 100% 0;
        right: 50%;
        left: 0;
    }
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page:nth-child(odd):after {
        background: linear-gradient(to right, transparent 70%, rgba(0, 0, 0, 0.6) 97%);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: " ";
        display: block;
    }
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page:nth-child(odd).page--flipped {
        pointer-events: none;
        transform: rotateY(180deg);
    }
}

.my-book .pages-responsive .pages .page:nth-child(odd).page--flipped:before {
    background: rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page--is-hoverable:nth-child(even):hover {
        transform: rotateY(-15deg);
    }
}

@media only screen and (min-width: 40em) {
    .my-book .pages-responsive .pages .page--is-hoverable:nth-child(odd):hover {
        transform: rotateY(15deg);
    }
}

.my-book.pages-responsive .pages .page--is-hoverable:nth-child(odd):hover:before {
    background: rgba(0, 0, 0, 0.03);
}

.my-book .pager ol {
    display: table;
    width: 100%;
    padding: 0;
}

.my-book .pager ol li {
    list-style: none;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #444544;
    border: 2px solid #444544;
    margin: 10px;
    line-height: 40px;
    border-radius: 50%;
    color: #fff;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.my-book .pager ol li:hover {
    background-color: #fff;
    color: #444544;
    -webkit-transform: scale(1.1, 1.1) rotate(360deg);
    -moz-transform: scale(1.1, 1.1) rotate(360deg);
    -o-transform: scale(1.1, 1.1) rotate(360deg);
    transform: scale(1.1, 1.1) rotate(360deg);
}

.my-book .controls {
    display: flex;
    justify-content: space-between;
}

.my-book span {
    position: absolute;
    background: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    bottom: 15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #000;
    border-radius: 50px;
}

.answer-false {
    color: red;
}

.answer-true {
    color: green;
}

.color-answer {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 20px;
    top: 10px;
    border-radius: 50px;
    line-height: 30px;
    font-size: 15px;
    color: #fff;
}

.color-answer.true {
    background: green;
}

.color-answer.false {
    background: red;
}