@import url('https://fonts.googleapis.com/earlyaccess/opensanshebrew.css');
@import url('https://fonts.googleapis.com/css?family=Miriam+Libre');
@import url('https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700&subset=hebrew');

:root {
    --regular-size: 18px;
}


/* For Data Structures */

.changeArrow:before {
    font-family: 'FontAwesome';
    content: '\f104';
}


/* PAGE SETUP */

.course-wrapper .course-content .vert-mod .vert>.xblock-student_view,
.course-wrapper .courseware-results-wrapper .vert-mod .vert>.xblock-student_view {
    /* this is for the annoying gray line between components */
    border: none;
}


/* PAGE SETUP */

@media only screen and (min-width: 600px) {
    .tau-text p {
        /*text-align: justify !important;*/
        direction: rtl;
    }

    .course-wrapper .tau-text,
    .static_tab_wrapper .tau-text {
        width: 80% !important;
        direction: rtl !important;
    }

    .course-wrapper .tau-text ul,
    .static_tab_wrapper .tau-text ul {
        padding-right: 2em !important;
    }

    .course-wrapper .tau-text ol,
    .static_tab_wrapper .tau-text ol {
        padding-right: 2em !important;
    }
}

.textRight {
    display: inline-block;
    width: 18em;
}

.description {
    font-size: 0.8em !important;
}

.divImage {
    margin-top: 0.5em;
    vertical-align: middle;
    float: left;
    width: 16em;
    margin-right: 4em;
}

.moshag {
    vertical-align: middle;
    width: 38em;
}

@media only screen and (max-width: 600px) {

    #seq_content .tau-centered-bold-text p,
    #main .tau-centered-bold-text p {
        width: 100% !important;
    }
}

@media only screen and (max-width: 600px) {

    /* For mobile phones: */
    .tau-text {
        width: 100% !important;
    }

    .course-wrapper .tau-text,
    .static_tab_wrapper .tau-text {
        direction: rtl;
        width: 100% !important;
    }

    .textRight {
        width: 22em !important;
    }

    .divImage {
        width: 20em !important;
    }

    .moshag {
        width: 22em;
    }

    .block-icon {
        width: 22em;
    }

    .noOnphone {
        display: none;
    }
}

.bookmark-button-wrapper {
    /* align bookmark button to left */
    direction: ltr !important;
    text-align: left;
}

.hint-label {
    /* for feedback in problems, actually */
    font-weight: bold;
    display: inline-block;
    padding-left: 0.5em !important;
    padding-right: 0em !important;
}

.notification-message ol li strong {
    /* this is for hints */
    padding-left: 0.5em !important;
}

.explanation-title,
.title1 {
    /* for annoying titles in problems and d&d problems */
    display: none !important;
}

.unit {
    position: relative;
}

/* DRAG AND DROP IMPROVEMENT */

.item-feedback-popup *:not(.fa) {
    color: white !important;
}

.drag-container {
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    border: 1px solid lightgray;
    border-radius: 5px !important;
    margin-bottom: 10px;
}

.target {
    margin-left: auto !important;
    margin-right: auto !important;
}

.themed-xblock.xblock--drag-and-drop {
    width: 100% !important;
    padding: none !important;
    margin: none !important;
}

.keyboard-help-button {
    padding-bottom: 10px !important;
}

.xblock--drag-and-drop .feedback {
    border: none !important;
    font-weight: bold;
}

.xblock--drag-and-drop .message {
    /*background-color: #e6e6e6 !important;*/
    border: none !important;
    border-right: 10px solid !important;
}

.xblock--drag-and-drop div.messages {
    margin-top: 10px;
    padding: 10px 10px 10px 0px !important;
    background-color: #e6e6e6 !important;
    border-radius: 5px !important;
}

.xblock--drag-and-drop .feedback .message::after {
    display: none !important;
}


/* STYLING */

#main,
#content,
.tau,
.content-wrapper,
.hx-popup {
    font-family: 'Open Sans Hebrew', sans-serif !important;
}

#main *:not(.fa):not(code):not(.signature),
#content *:not(.fa):not(code):not(.signature),
.content-wrapper *:not(.fa):not(code):not(.signature),
.hx-popup *:not(.fa):not(code):not(.signature) {
    /* .fa exception is for font-awesome icons used in Open edX */
    /* #course-info is for about page */
    font-family: inherit !important;
}

#main code {
    direction: ltr !important;
    unicode-bidi: embed;
    background-color: #e6e6e6 !important;
    border-radius: 5px !important;
    font-family: 'Courier New', monospace !important;
}

#main pre code {
    unicode-bidi: default;
}

#main pre {
    text-align: left;
    background-color: #e6e6e6 !important;
    border-radius: 5px !important;
    direction: ltr;
    border: none !important;
}

#seq_content div.item-content {
    font-size: 14px !important;
}

#seq_content div:not(.item-content),
#seq_content p,
.xmodule_display.xmodule_StaticTabModule p,
.hx-popup p,
.hx-popup div {
    /* .xmodule_display.xmodule_StaticTabModule p is for static tab p */
    /* exceptions are so other font sizes would not be affected */
    /*font-size: var(--regular-size) !important;*/
}

#main blockquote * {
    font-family: 'Frank Ruhl Libre', serif !important;
}

h1.mb-0.h3 {
    display: inline-table;
    font-size: 32px !important;
    border-right: 10px solid #D5A530;
    color: #D5A530 !important;
    padding: 16px !important;
    margin: 20px 0 !important;
    background-color: #002878 !important;
    font-weight: 700 !important;
    border-bottom: none !important;
}

/*button affter H1*/
h1.mb-0.h3~button.pgn__stateful-btn.pgn__stateful-btn-state-default.px-1.ml-n1.btn-sm.text-primary-500.btn.btn-link {
    DIRECTION: ltr;
    POSITION: ABSOLUTE;
    LEFT: 0;
}

h1.mb-0.h3~button.pgn__stateful-btn.pgn__stateful-btn-state-default.px-1.ml-n1.btn-sm.text-primary-500.btn.btn-link span {
    gap: 10px;
}

h1.mb-0.h3~button.pgn__stateful-btn.pgn__stateful-btn-state-default.px-1.ml-n1.btn-sm.text-primary-500.btn.btn-link svg path {
    fill: black;
}


.course-wrapper h3:not(.error_message),
h2.problem-header,
.xmodule_display.xmodule_StaticTabModule h2,
#msg-content-0 h3,
.hx-popup h3 {
    /* .xmodule_display.xmodule_StaticTabModule h2 is for tabs h2 */
    /* .error_message and .problem-header exceptions are for LTI Container headers */
    color: black;
    font-size: 1.4em;
    font-weight: bold;
    -webkit-background-clip: text;
}

#main .question-description {
    font-size: 0.8em !important;
}

.course-wrapper h3+p,
.course-wrapper h2+p,
.xmodule_display.xmodule_StaticTabModule h2+p {
    margin-top: 30px;
}

.course-wrapper p~h3:not(.error_message),
p~h2.problem-header,
.xmodule_display.xmodule_StaticTabModule p~h2 {
    margin-top: 40px;
}

.course-wrapper h4 {
    color: black;
    font-size: 1.1em;
    font-weight: bold;
    padding: 10px;
}


/* BLOCKS */

#main .block,
.item-bank,
.video,
.hx-popup .block {
    /* item-bank is for D&D */
    background-color: #e6e6e6 !important;
    border-radius: 5px !important;
    padding: 3% 2%;
    /*border: 2px solid #1D2A4E !important;*/
    margin-bottom: 15px;
}

#main .block-center,
#main .block-center p,
#main .block-center div,
#main .block-center code {
    text-align: center !important;
}

#mIcon {
    background-color: #1D2A4E !important;
    border-radius: 50%;
    /*margin-left: 2% !important;*/
    float: right;
    padding: 0% !important;
}

#oicon {
    margin-top: 0%;
    width: 69%;
}

#main .with-icon,
.hx-popup .with-icon {
    display: flex;
    align-items: center;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    width: 38em;
}

#main .block .with-icon .helper1 .icon {
    background-color: #1D2A4E !important;
    border-radius: 50%;
    width: 100% !important;
}

#main .helper2 {
    width: 100% !important;
}

#main .block-icon,
.hx-popup .block-icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-left: 30px;
    align-self: flex-start;
}

@media screen and (max-width: 601px) {

    #main .with-icon,
    .hx-popup .with-icon {
        flex-direction: column;
    }

    /*׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ©׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲœ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג‚¬ֲžײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ»ײ²ֲœ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ²ֲ ׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲœ ׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג‚¬ֲžײ²ֲ¢׳³ֲ³ײ²ֲ³׳³ג€™׳’ג‚¬ֲžײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ§׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ²ֲ¢׳³ֲ³ײ²ֲ³ ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג‚¬ֲžײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ»ֲœ׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲž׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ²ֲ¢׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ»ֲœ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג‚¬ֲžײ²ֲ¢׳³ֲ³ײ²ֲ³׳³ג€™׳’ג‚¬ֲžײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲœ*/
    #main .block-icon,
    .hx-popup .block-icon {
        width: 70px;
        height: 70px;
        align-self: center;
        margin-left: 0px;
    }

    #main .block-img {
        width: 50px;
        height: 50px;
        margin-left: 0px;
    }
}

#main .block-img {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    margin-left: 30px;
    align-self: flex-start;
}

#main .block-img img {
    width: inherit;
    display: block;
    user-select: none;
}

#main .block-icon img,
.hx-popup .block-icon img {
    width: inherit;
    height: inherit;
    display: block;
    user-select: none;
    background-color: black;
    border-radius: 50%;
}

#main .block-content,
.hx-popup .block-content {
    width: 100%;
    align-self: center;
    margin-bottom: 0px;
}

#main .hid {
    display: none;
}

#seq_content .rev {
    display: block;
}

.with-icon {
    padding: 3% 3% !important;
    width: 94% !important;
}

#main .white-block
/* white-background block inside other block */

    {
    background-color: white;
    border-radius: 5px !important;
    padding-right: 20px;
    padding-top: 20px;
    padding-left: 25px;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

#main .block .white-block {
    margin-top: 15px !important;
}

#main .block-important
/* red right border to mark important block */

    {
    border-right: 10px solid red !important;
}


/* BUTTONS */

.xmodule_StaticTabModule *:not(.video-controls) .button,
.xmodule_StaticTabModule button:not(.unbutton):not(.control):not(.wmd-button),
.xmodule_StaticTabModule a.btn-link,
#seq_content *:not(.video-controls) .button,
#seq_content button:not(#cheat_sheet_btn):not(.close-feedback-popup-button):not(.keyboard-help-button):not(.control):not(.wmd-button),
#seq_content a.btn-link,
.handouts a,
.hx-popup button:not(.keyboard-help-button):not(.fa):not(.close-feedback-popup-button),
button.pgn__stateful-btn.pgn__stateful-btn-state-default.px-1.ml-n1.btn-sm.text-primary-500.btn.btn-link,
body #main .button:not(.unbutton):not(.control):not(.wmd-button),
body #main button:not(.unbutton):not(.control):not(.wmd-button),
body #main input[type="button"]:not(.unbutton):not(.control):not(.wmd-button),
body .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .list-download-transcripts .transcript-option a {
    color: black !important;
    background: white !important;
    text-decoration: none !important;
    border-radius: 5px;
    border: 1px solid lightgray !important;
    box-shadow: 0px 2px 3px lightgray;
    transition: .2s;
    font-size: 17px !important;
    font-weight: bold !important;
    padding: 7px 10px;
    max-width: 190px;
}

.xmodule_StaticTabModule *:not(.video-controls) .button:hover,
.xmodule_StaticTabModule button:hover:not(.unbutton):not(.control):not(.wmd-button),
.xmodule_StaticTabModule a.btn-link:hover:not(.inactive):not(.unbutton),
#seq_content *:not(.video-controls) .button:hover:not(.inactive),
#seq_content *:not(.video-controls) button:hover:not(#cheat_sheet_btn):not(.inactive):not(.close-feedback-popup-button):not(.keyboard-help-button):not(.control):not(.wmd-button),
#seq_content a.btn-link:hover:not(.inactive):not(.unbutton),
.handouts a:hover,
.hx-popup button:hover:not(.keyboard-help-button):not(.fa):not(.close-feedback-popup-button),
button.pgn__stateful-btn.pgn__stateful-btn-state-default.px-1.ml-n1.btn-sm.text-primary-500.btn.btn-link:hover,
button.pgn__stateful-btn.pgn__stateful-btn-state-default.px-1.ml-n1.btn-sm.text-primary-500.btn.btn-link:focus-visible,
body #main .button:hover:not(:disabled):not(.unbutton):not(.control):not(.wmd-button),
body #main .button:focus-visible:not(:disabled):not(.unbutton):not(.control):not(.wmd-button),
body #main button:hover:not(:disabled):not(.unbutton):not(.control):not(.wmd-button),
body #main button:focus-visible:not(.unbutton):not(.control):not(.wmd-button):not(:disabled),
body #main input[type="button"]:not(.unbutton):not(.control):not(.wmd-button):hover:not(:disabled),
body #main input[type="button"]:not(.unbutton):not(.control):not(.wmd-button):focus-visible:not(:disabled),
body .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .list-download-transcripts .transcript-option a:hover,body .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .list-download-transcripts .transcript-option a:focus-visible{
    
    color: black !important;
    text-decoration: none !important;
    background: lightgray !important;
    cursor: pointer;
    transition: .2s;
    border: 1px solid lightgray !important;
    box-shadow: inset 0px 2px 3px gray !important;
    text-shadow: none;
}

.xmodule_StaticTabModule .inactive,
.xmodule_StaticTabModule button:disabled,
#seq_content .inactive,
#seq_content button:disabled:not(#cheat_sheet_btn),
.hx-popup button:disabled:not(.btn-link):not(.fa):not(.close-feedback-popup-button) {
    color: gray !important;
    text-decoration: none !important;
    cursor: context-menu;
    background-color: lightgray;
    user-select: none;
}

#seq_content a.button,
#seq_content span.bookmark-text,
#seq_content a.btn-link {
    /* .bookmark-text exception is for the bookmarks button */
    color: black;
    text-decoration: none !important;
    display: inline-block;
    /*width: 100% !important;*/
}

#seq_content a.button.wide,
.handouts a {
    color: black;
    text-decoration: none !important;
    text-align: center;
    display: block;
    padding: 15px;
}

#seq_content a.button.wide img {
    margin-bottom: 15px;
}

#seq_content a.btn-link {
    margin-bottom: 5px;
}


/* COURSE HOME PAGE (WELCOME MESSAGE) */

#msg-date-0 {
    display: none;
}


/* removes the date in the message */

#msg-content-0 {
    line-height: 1.5;
}

.toggle-visibility-button {
    display: none;
}


/* removes the feature to hide the message */

.updates h3.hd.hd-3 {
    display: none !important;
}


/* removes the title "updates and news..." */

.page-header-main {
    width: 100% !important;
}


/* changes the width of the title */

.page-subtitle {
    display: none;
}


/* removes system course name */

.info-wrapper {
    font-size: var(--regular-size) !important;
}

#main .signature {
    font-family: 'Amatic SC', cursive !important;
    font-size: 30px !important;
    font-weight: bold;
}

div.info-wrapper section.handouts .handouts-header {
    /* this fixes alignment of side-bar headlines */
    padding: 12px 0 20px 26px;
}

.home {
    /* hide entire wrong title */
    display: none !important;
}


/* FEEDBACK */

.feed {
    display: flex;
    border: 1px solid lightgray !important;
    box-shadow: 0px 2px 3px lightgray;
    border-radius: 5px;
    margin-top: 10px;
}

.feed img:first-child {
    display: block;
    text-align: center;
    user-select: none;
    border-radius: 0 5px 5px 0;
}

.feed img:only-child {
    border-radius: 5px;
}

.feed-desc {
    padding: 20px;
    position: relative;
    background: white;
    width: 100%;
    border-radius: 5px 0 0 5px;
    line-height: 1.5;
}

.feed-desc:after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    margin-top: -10px;
    right: 0;
    border-left-color: white;
    border-right: 0;
    margin-right: -10px;
}


/* TERM STYLE - SHOULD CONSIDER IMPROVING */

.pointsToGo {
    border-radius: 0px !important;
    background-color: white;
    width: 47.5em !important;
    /*height: 25.4em !important;*/
}

.pointsToGo block-content {
    background-color: white;
    width: 100% !important;
    display: flex !important
}

.pointsToGo block-content tau-text {
    width: 80% !important;
    padding: 2% !important;
    display: flex;
    text-align: right !important;
}

.pointsToGo block-content adjFont {
    width: 12%;
    float: left;
    margin-left: 1%;
    align-self: flex-start
}

.pointsToGo block-content adjFont p {
    color: white;
    font-family: 'Open Sans';
    margin-top: -187%;
    text-align: center
}

.termIslam {
    align-items: flex-start !important;
    border-radius: 0px !important;
    background-color: #E4D8B8;
}

.termIslam .pterm {
    font-size: 24px !important;
}

#seq_content .tau .term {
    margin: 30px;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
}

#seq_content .tau .term-icon img {
    display: block;
    width: 100px;
    padding-left: 10px;
    user-select: none;
}

#seq_content .tau .term-name {
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 3px solid black;
    padding-bottom: 5px;
}

#seq_content .tau .term-desc {
    padding-top: 6px;
    width: 400px;
}


/**IVQ**/

.ui-widget-overlay {
    background: #666 !important;
    opacity: .40 !important;
    filter: Alpha(Opacity=30) !important;
    position: fixed !important;
}

.hx-popup p,
.hx-popup div {
    line-height: 1.6em !important;
}

.hx-popup.ui-dialog {
    z-index: 2147483647 !important;
    direction: rtl;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.hx-popup .ui-dialog-titlebar {
    background: none !important;
    background-color: var(--primary-color) !important;
    border: none;
    margin-bottom: 8px;
    border-radius: 8px;
}

.hx-popup,
.hx-popup .ui-dialog,
.hx-popup .ui-dialog-buttonpane,
.hx-popup .ui-dialog-content,
.hx-popup .ui-resizable-handle {
    background-color: white !important;
}

.hx-popup {
    padding: 8px;
    border-radius: 8px;
}

.hx-popup .ui-widget-content,
.hx-popup {
    background: none;
}

.hx-popup .ui-widget-content,
.hx-popup,
:not(.hx-popup .ui-dialog-buttonpane) {
    /*   border: none; */
}

span.VQControls {
    font-size: 150%;
}

span#onoff {
    font-weight: bold;
}

span#playpauseword {
    font-weight: bold;
}

#popUpPlayPause,
#popUpReset,
#backOneProblem,
#problemToggle,
#sunmoon,
#playpauseicon,
#playpauseword {
    display: none;
}


/*TABLES*/

#main table * {
    font-size: var(--regular-size) !important;
}

#main table {
    width: 100%;
}

#main table th {
    background-color: var(--primary-color) !important;
    white-space: nowrap;
    color: white;
}

#main table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#main table tr:hover {
    background-color: #ddd;
}

#main table td,
#main table th {
    padding: 10px;
}

#main table.tau-table-ltr {
    direction: ltr;
}

#main table .tau-td-heb {
    direction: rtl;
}

#main table.tau-table-ltr td:not(.tau-td-heb) *,
#seq_content table.tau-table-ltr td:not(.tau-td-heb) {
    direction: ltr !important;
    text-align: left !important;
}

#main table th:not(.tau-td-heb) *,
#main table th:not(.tau-td-heb) {
    direction: ltr !important;
    text-align: center !important;
}

#main table.table-td-center td {
    text-align: center !important;
}

#main .table-center {
    margin-left: auto !important;
    margin-right: auto !important;
}


/**IMAGES**/

#seq_content .img-center,
.hx-popup .img-center,
.static_tab_wrapper .img-center {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

#seq_content img,
.hx-popup img,
#main img {
    margin-bottom: 15px;
}


/**FORUMS**/

#seq_content .discussion-module {
    padding: 15px;
    border-radius: 5px 5px 0 0;
    border: 1px solid var(--primary-color) !important;
    width: auto;
}

#seq_content .discussion-module .inline-thread {
    background-color: white;
}

#seq_content .discussion-module .wmd-button-row {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

#seq_content .discussion-module .wmd-button-row .wmd-button,
.discussion-module .wmd-button-row .wmd-spacer {
    margin-left: 10px;
    position: unset !important;
    margin-right: 0;
}

#seq_content .discussion-module .action-button .action-icon {
    border: none;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#seq_content .discussion-module .action-button .fa {
    font-size: 18px;
}


/**MOBILE**/

#TauMobileDiv .tauDesktop {
    display: block;
}

#TauMobileDiv .tauMobile {
    display: none;
}

@media screen and (max-width: 800px) {
    #TauMobileDiv .tauDesktop {
        display: none;
    }

    #TauMobileDiv .tauMobile {
        display: block;
    }
}


/**grade-table**/

#grade-table * {
    vertical-align: middle;
}

#grade-table tr th:not(:first-child),
#grade-table tr td:not(:first-child) {
    width: 30%;
}

#grade-table tr td:nth-last-child(-n+2),
#grade-table tr td:first-child {
    text-align: center;
}

#grade-table tr td img {
    margin: 0px;
}

#grade-table tr td:first-child,
#grade-table tr th:first-child,
#grade-table tr:last-child td:nth-child(-n+3) {
    border: white;
    background-color: white !important;
}

@media screen and (max-width: 601px) {

    #grade-table tr td:first-child,
    #grade-table tr th:first-child {
        display: none;
    }
}


/*CarouselBody*/


/*׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ»ֲœ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג‚¬ֲžײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ»ײ²ֲœ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲœ ׳³ֲ³ײ²ֲ³ ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג‚¬ֲžײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ¨׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ³׳’ג‚¬ג€ ׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ§׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ¨׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ²ֲ¢׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲ¡׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲœ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ²ֲ ׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ»ֲœ׳³ֲ³ײ²ֲ³׳²ֲ²ײ²ֲž׳³ֲ³ײ²ֲ³׳³ג€™׳’ג€šֲ¬ײ³ֲ·*/

@media screen and (max-width: 800px) {
    .CarouselBody {
        visibility: hidden;
    }
}

.CarouselBody {
    display: grid;
    /*place-content: center;*/
    min-height: 100%;
    height: auto;
    margin-right: 10%;
}

.CarouselBody .w {
    width: 50vmin;
    height: 80vmin;
    margin-top: -10%;
}

.CarouselBody .ts {
    width: 100%;
    height: 100%;
    position: relative;
    --barH: 10%;
    /*active zone height = 100% - barH*/
    /*margin-top: -20%;*/
}

.CarouselBody .t {
    --w: 20%;
    display: block;
    width: var(--w);
    height: var(--barH);
    position: absolute;
    bottom: 0;
    left: var(--l);
    -webkit-transform-origin: top left;
    transform-origin: top left;
}

.CarouselBody .t img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

.CarouselBody [type="radio"] {
    display: none;
}

.CarouselBody :checked+label.t {
    left: 0;
    bottom: var(--barH);
    height: calc(100% - var(--barH));
}

.CarouselBody :checked+label.t img {
    -o-object-fit: contain;
    object-fit: contain;
}


/*
        optional
        */

.CarouselBody .ts {
    /*thumbnails bar*/
    -webkit-perspective: 100px;
    perspective: 100px;
    -webkit-perspective-origin: center center;
    perspective-origin: center center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    pointer-events: none;
}

.CarouselBody .ts:after {
    /*the plate*/
    content: "";
    display: block;
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.1));
    -webkit-transform: rotateX(90deg)scaleX(1.2);
    transform: rotateX(90deg)scaleX(1.2);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
}

.CarouselBody :not(:checked)+.t {
    /*inactive labels*/
    -webkit-transform: translate3d(0, 0, -5px);
    transform: translate3d(0, 0, -5px);
    pointer-events: auto;
}

.CarouselBody :not(:checked)+.t:hover {
    -webkit-transform: translate3d(0, -7px, -5px);
    transform: translate3d(0, -7px, -5px);
    box-shadow: 0 30px 30px -25px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.CarouselBody :not(:checked)+.t img {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    /*create gaps*/
}

.CarouselBody:checked+.t {
    /*active label*/
    box-shadow: 0 0 0 transparent;
    -webkit-animation: anim 2s 1;
    animation: anim 2s 1;
}

.CarouselBody :checked+.t span {
    /*active label*/
    position: absolute;
    margin-top: -15%;
    margin-right: 10%;
    font-family: 'Open Sans Hebrew';
    font-size: 14px;
    text-align: center;
    align-self: center;
}

.CarouselBody :not(:checked)+.t span {
    display: none;
}

@-webkit-keyframes anim {
    from {
        -webkit-transform: rotateY(6deg)rotateX(3deg);
        transform: rotateY(6deg)rotateX(3deg)
    }
}

@keyframes anim {
    from {
        -webkit-transform: rotateY(6deg)rotateX(3deg);
        transform: rotateY(6deg)rotateX(3deg)
    }
}


/*
        transitions
        */

.CarouselBody .t {
    /*active->inactive & hover->rest*/
    transition: bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s, -webkit-transform 0.5s;
    transition: transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s;
    transition: transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s, -webkit-transform 0.5s;
}

.CarouselBody .t:hover,
:checked+.t {
    transition: bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s, -webkit-transform 0.5s;
    transition: transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s;
    transition: transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s, -webkit-transform 0.5s;
}


/*historian-lab*/

.historian-lab {
    background: white;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    display: flex;
    margin-top: 20px;
    border-width: 1px 0px 1px 1px;
    border-style: solid;
    border-color: #cacaca
}

.hadith .left_icon {
    margin: 0px;
    align-self: flex-start !important;
    width: 15%;
}

.hadith {
    width: 90%;
    align-self: flex-start !important;
    padding: 0px 5% 0px 5%;
    padding-top: 0px;
    padding-bottom: 0px;
}

.hadith p {
    clear: both;
    text-align: justify;
    padding-left: 5%;
    padding-right: 5%;
}

.sideBanner {
    width: 10%;
    background-repeat: repeat-y;
    background-size: contain;
    padding: 0px;
    margin: 0px;
    align-self: stretch !important;
}

.tau-logo img {
    float: left;
    width: 20%
}


/*Carousel*/

Carouselcontainer {
    margin: 0;
    font-family: Arial;
}

Carouselcontainer * {
    box-sizing: border-box;
}

Carouselcontainer img {
    vertical-align: middle;
}


/* Position the image container (needed to position the left and right arrows) */

.Carouselcontainer {
    position: relative;
}

.Carouselcontainer .row {
    direction: ltr !important;
}


/* Hide the images by default */

.mySlides {
    display: none;
    text-align: center;
}


/* Add a pointer when hovering over the thumbnail images */

.cursor {
    cursor: pointer;
}


/* Next & previous buttons */

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 4px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    user-select: none;
    -webkit-user-select: none;
}


/* Position the "next button" to the right */

.next {
    right: 4%;
    color: black;
    background-color: white;
}

.prev {
    left: 4%;
    color: black;
    background-color: white;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
    /*background-color: rgba(0, 0, 0, 0.8);*/
}


/* Number text (1/3 etc) */

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}


/* Container for image text */

.caption-container {
    text-align: center;
    background-color: white !important;
    padding: 2px 16px;
    color: black;
}

#caption {
    text-align: center;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.Carouselcontainer .row {
    justify-content: center;
}


/* Six columns side by side */

.column {
    float: left;
}


/* Add a transparency effect for thumnbail images */

.demo {
    opacity: 0.6;
}

.active,
.demo:hover {
    opacity: 1;
}

@media screen and (max-width: 800px) {
    .mySlides img {
        width: 45% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 600px) {
    .mySlides img {
        width: 80% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 600px) {
    .mySlides img {
        width: 80% !important;
        height: auto !important;
    }
}

@media screen and (min-width: 600px) {
    .Carouselcontainer {
        margin-bottom: 5%;
    }
}


/*.column {
	width: 10% !important;
}*/

.container2 {
    position: relative;
}

.ar-term {
    font-weight: bold;
    float: left !important;
    font-size: 22px !important;
}

.img.demo.cursor {
    max-height: 100px;
}


/*DROPDOWN*/

@media screen and (max-width: 600px) {
    .inputtype option-input {
        width: 100% !important;
    }
}

.islam-btn {
    width: 100%;
    background-color: #f2f2f2;
    border-radius: 10px;
    border: 2px solid grey;
    height: 100px;
    display: block;
    align-self: center;
    transition: 0.3s;
    text-align: center !important;
    height: 10vh;
    padding: 2%;
}

.islam-btn:hover {
    background-color: white;
    font-size: 22pt;
}

.islam-btn img {
    float: left;
    margin: 0 auto !important;
}


/*SCROLL INDICATOR*/

.header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    background-color: #f1f1f1;
}

.progress-bar {
    height: 10px;
    background: #4caf50;
    width: 0%;
}


/*NEXT BUTTON ANIMATION*/

a.next-btn.btn.btn-link {
    animation-name: pulse;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 3s;
    -webkit-animation: pulse 4s infinite;
    -moz-animation: pulse 3s infinite;
    -o-animation: pulse 3s infinite;
    animation: pulse 3s infinite;
    background-color: #1D2A4E !important;
    color: white;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes pulse {
    20% {
        transform: scale(1);
        opacity: 1;
    }

    40% {
        box-shadow: 0 0 0 0 rgba(29, 43, 79, 0.9);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(29, 43, 79, 0);
    }
}


/* Standard syntax */

@keyframes pulse {
    20% {
        transform: scale(1);
        opacity: 1;
    }

    30% {
        box-shadow: 0 0 0 0 rgba(29, 43, 79, 0.9);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(29, 43, 79, 0);
    }
}

/*color of next btn*/

.xblock.xmodule_display.xmodule_SequenceModule .sequence-nav-button {
    color: white;
}

button.sequence-nav-button.button-previous {
    background-color: white !important;
    color: #1D2A4E !important;
}

.dismiss-message {
    display: none;
}

/*video downlond button*/
body .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .list-download-transcripts .transcript-option a{
    display: inline-block;
    margin-bottom: 10px;
}

body .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .list-download-transcripts .transcript-option .icon.fa.fa-download{
    display: none;
}

/*כפתורי ניווט*/
.sequence-nav-button.button-next, .unit-navigation a.next-button {
    border-color: #002878  !important;
    color: #D5A530 !important;
    background-color: #002878  !important;
    flex-basis: 25% !important;
    box-shadow: 1px 2px 4px #002878  !important;
}


.sequence-nav-button.button-next, .unit-navigation a.next-button:hover {
    border-color: #173b85 !important;
    color: #D5A530 !important;
    background-color: #173b85 !important;
    flex-basis: 25% !important;
    box-shadow: 1px 2px 4px #173b85!important;
}

.btn{ 
    background-color: transparent !important;
    color: #D5A530  !important;
    text-decoration: none !important;
    border-color:transparent !important ;
}

.btn:hover { 
    background-color: #002878  !important;
    color: #D5A530 !important;
    text-decoration: none !important;
    border-color: #002878 ;
    box-shadow: 1px 2px 4px #002878  !important;
    opacity: 100% !important;

}