@import url(https://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
@import url(https://fonts.googleapis.com/earlyaccess/alefhebrew.css);
/* @import url(https://use.fontawesome.com/releases/v5.4.0/css/all.css); */
@import url(chat.css);
@import url(css_vars.css);

body {font-family: 'Open Sans Hebrew', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; margin: 0 auto;direction: rtl;color: #4f4e4e;
  -webkit-font-smoothing: antialiased;
}

*{box-sizing: border-box;}

#ofirModal_toast_msg{position:fixed; top:calc(50vh) !important}

/*מגדיר פונט של הטקסט המתמטי עבור טקסט לועזי באובייקטים של טקסט*/
span.text_in_obj{font-family:'Symbolatext','Open Sans Hebrew', Arial, sans-serif}
.video_title{font-size:15px}
.video_iframe{border-radius:15px;}

.my_link{font-weight:400; color:var(--main-color); text-decoration:none}
.my_link:hover{border-bottom:1px solid; filter: brightness(140%);}

.files_in_tree{padding: 7px 15px; border-bottom:1px solid var(--main-color); text-align:center}
.file_link, .files_in_tree .text_link{display:block; position:relative; border-radius:10px; border:1px solid var(--color-light-blue);
                      color: var(--color-dark-blue);
          text-align: center; white-space: nowrap;
          padding:0px;  font-size:0.8em;font-weight: bold; line-height:28px; margin: 1px 6px 10px}

.file_link:hover, .files_in_tree .text_link:hover{background-color: var(--color-light-blue)}

.files_in_tree .file_link, .files_in_tree .text_link{background-color:var(--color-light-blue); box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2)}
.files_in_tree .file_link:hover, .files_in_tree .text_link:hover{background-color:var(--color-dark-blue); border-color:var(--color-dark-blue); color:#ffffff !important}

.files_in_tree .text_link{color: var(--color-dark-blue)}
.files_in_tree .text_link:visited {color: var(--color-dark-blue)}

.files_in_tree .text_link:before, .files_in_tree .file_link:before{position:absolute; font-family:var(--font-awesome); font-weight:200; top:0; right:5px; color:#276bbb}
 .files_in_tree .file_link:before{content:"\f56d"}
 .files_in_tree .text_link:before{content: "\f35d"}
 .files_in_tree .text_link:hover:before, .files_in_tree .file_link:hover:before{color:#ffffff}

 .files_in_tree .video_iframe{width:100%; max-width:450px}
 .files_in_tree .aspect_padder{padding:15px 5px}
/* general */
.txt_align_l{text-align: left !important;}
.txt_align_r{text-align: right !important;}
.align_to_end{text-align: left}
*:focus{outline: 1px dashed #1b75bc; outline-offset: 1px;}
*:active:focus{outline: 1px dashed #1b75bc; outline-offset: 1px;}
.hr_line{ border: none !important; height: 1px !important; background: #000; margin: 5px 0 0 0 !important;}

#header *:focus{outline-color: white}
#class_switcher *:focus{outline-color: #1b75bc}

.flex_container{display: flex; flex-wrap: wrap; justify-content: space-around;margin: auto; }
.flex_between{display: flex; flex-wrap: wrap; justify-content: space-between;margin: auto; }

.ui-widget{font-family: "Alef"}/* בלי זה הטקסט הופך לריבועים בגרסאות חדשות של פיירפוקס*/

a.skip-main {
    font: normal 12px arial; color: #1765a3; background-color: white;
    position: absolute; left: 50%;  margin-left: -55px;  top: 0px; padding: 2px 4px; opacity: 0;
    outline: 1px dashed #ffffff; outline-offset: 1px;
}
a.skip-main:focus, a.skip-main:active{opacity: 1; z-index:999;}

.clear { clear: both; margin: 0; padding: 0; height: 0; line-height: 0; }
.left { float: left }
.right { float: right }

.float_end {float: left}

.forward_facing{transform: scaleX(1);-webkit-transform: scaleX(1);}

.centered {text-align: center; margin: auto}
ul{padding: 0; margin: 0; list-style: none; }

.btn {display: inline-block !important; border-radius:4px; min-width:12px; cursor:pointer; text-decoration: none;color:#ffffff !important; background-color: var(--secondary-color); text-align: center; font-size: 12px; font-weight: bold;padding: 2px 6px;margin-right: 3px;}
.btn:hover{background-color: var(--main-color) !important;}
.btn:active{color:#ffffff}

.btn.upd{color: #404040 !important}
.btn.upd:hover{color: #ffffff !important}

.cfa_btn{border-radius: 20px;padding: 3px 17px;background-color: var(--color-pinky) !important; color: white !important;}

/*.fn_btn{display: inline-block;background-color: #dadef0;border: 1px solid #c0c8e5;color:#4f4f4e !important;padding: 4px 5px;border-radius: 20px;font-size: 12px;font-weight: bold;text-decoration: none;}*/
.fn_btn{display: inline-block;background-color: #fcfcfc;border: 1px solid #c0c0c0;color:#4f4f4e !important;padding: 4px 10px;border-radius: 10px;font-size: 12px;font-weight: bold;text-decoration: none;}
.fn_btn:hover {background-color: var(--main-color) !important; border-color: var(--main-color) !important; color: #ffffff !important;} /*background-color: #465bb3*/

.fn_btn.fn_new{background-color: #ddf2d6 ;border-color: #6F9E3D;}
.fn_btn.fn_new:hover{background-color:#4C6D2A !important; border-color: #56682e !important; color: white !important}

.fn_btn.fn_upd{background-color: #F8F2BF;border-color: #dace55;color: #666666 !important;}
.fn_btn.fn_upd:hover{background-color:#fea620 !important; border-color: #e1d23d !important; color: white !important}

.fn_btn.fn_del{background-color: #efbbbb;border-color: #e49090;color: #666666 !important;}
.fn_btn.fn_del:hover{background-color:#d2504d !important; border-color: #d2504d !important; color: white !important}

.fn_btn.fn_cfa{background-color: var(--color-pinky);border-color: var(--color-grey-texy);color: white !important; border-radius:20px;}
.fn_btn.fn_cfa:hover{background-color:var(--color-a) !important; border-color: var(--color-a-light) !important; color: white !important}

.fn_btn.fn_general{background-color: #deecfd;border-color: #189cd7;color: #666666 !important;}
.fn_btn.fn_general:hover{background-color:#189cd7 !important; border-color: #189cd7 !important; color: white !important}

.fn_btn.admin_edit_btn{height:15px;line-height: 13px;padding: 0 7px;font-weight:normal}

.emph_btn{background-color: orange;border-radius: 4px; color:white; padding:5px 25px;}
.emph_btn:hover{filter: opacity(70%); color:black}

.new {background-color: #228b22 !important}
.new:hover {background-color: #006400 !important}
.upd {background-color: #ffa500 !important; color: #404040 !important}
.upd:hover {background-color: #ff8c00 !important; color: #ffffff !important}
.del {background-color: #cd0a0a !important}
.del:hover {background-color: #8b0000 !important}
.inactive {background-color: #808080 !important}
.inactive:hover {background-color: #d9d9d9 !important; color: #808080 !important}
.nobr{white-space: nowrap}

.text_msg {position:relative; margin:20px auto 10px;background-color:#ecf4fe; border-right:35px solid #189cd7; padding:5px 10px; line-height:23px; width:90%; font-size:15px}
.text_msg.ok_msg{border-color:#84b655; background-color:#dff2d5}
.text_msg.warn_msg{border-color:#d03f00; background-color:#f2dede}
.text_msg.sys_msg{border-color:#f3c629; background-color:#fef7e0}
.text_msg>i:not(.inline_icon){position: absolute;right: -27px;top: 6px;font-size: 20px;color: white;}

.details_box { border: 1px solid #2f517e; border-radius: 4px; margin:auto; padding:0}
.details_box summary { background-color: #dadef0; border-radius: 4px 4px 0 0; padding: 0px 3px; color: #2f517e; font-weight: bold;}
.details_box.dark_summary summary { background-color: #2f517e;color: #dadef0;}
.details_box.light_summary{border-color:#d2d3d4}
.details_box.light_summary summary { background-color: #e9e9ed;font-weight:normal; font-size:15px;}
.details_content {padding:5px}

.btn_in_text {display: inline-block;vertical-align: text-bottom;border: 1px solid lightgray;background-color: #f6f6f6;border-radius: 4px;padding: 0px 7px;
line-height: 20px;font-size: 0.75em;color: #4e4e4f;font-weight: bold;}
.btn_in_text:hover, .btn_in_text:hover i{background-color: #7f8080; color:#ffffff}
.btn_in_text>i{position: relative !important; top:auto;right:auto; color:#4e4e4f; font-size:1em; margin-left:4px}

.clickable{cursor:pointer}
 .precent_value:after{content:"%";}
.greyed_out{color: #707070 !important}

.dont-show{display: none !important}
.mobile_only_block{display:none}
@media screen and (max-width: 480px) {
    .mobile_only_block{display:block}
}

fieldset {border: none}
.slidingDetails summary{cursor: pointer}
.slidingDetails summary::marker{color: transparent;}

.input_tip{margin-top: -16px;font-size: 12px;line-height: 13px;font-weight:normal; color:#4f4e4e}

.boxed_num{display: inline-block; background-color: var(--main-color); color: #ffffff; font-weight: bold; padding: 0 7px; border-radius: 5px}

a{color:var(--main-color)}

.color_emph{color:var(--main-color); font-weight: bold}
/*a:visited, a:active {
  color: inherit;
}*/

.fail {color:red !important}
.OK {color:green !important}

.well_done{color: #217346;background-color: #def2d5;padding: 2px 5px;border: 1px solid #80b546;display: block;text-align: center;border-radius: 3px}
.well_done i {color: #80b546}

.capital_first{display:block}
.capital_first:first-letter{text-transform: uppercase}

.capital_first_inline{display:inline-block}
.capital_first_inline:first-letter{text-transform: uppercase}

.sys_note_ok {border-radius:5px; padding: 0 10px; background-color: #def2d5; border: 1px solid #c0ccb8; font-family:"Alef Hebrew"; font-size: 14px; color: #4e6245}
.sys_note_err {border-radius:5px; padding: 0 10px; position: relative; background-color: #ffe8e6; border: 1px solid #f5c6cb; font-family:"Alef Hebrew"; font-size: 14px;  color: #721c24;}
.sys_note_warning {border-radius:5px; padding: 0 10px; background-color: #f8f4d1; border: 1px solid #d1cead; font-family:"Alef Hebrew"; font-size: 14px; color: #7e6f46}
.sys_note_info {border-radius:5px; padding: 0 10px; background-color: #cce8f5; border: 1px solid #a2b8c3; font-family:"Alef Hebrew"; font-size: 16px; line-height:18px; color: #3c6581; padding: 5px 10px 5px 5px}
.sys_note_plain {border-radius:5px; background-color: #f1f1f1; border: 1px solid #d7d7d7; font-family:"Alef Hebrew"; font-size: 16px; line-height:18px; color: #707081; padding: 5px 10px 5px 5px}

.system_note{background-color:#fefbf8;border:1px solid #faf0e3;border-radius:5px;position: relative;display: block;padding: 5px 32px 5px 5px; text-align: right; font-size:15px; line-height:21px;}

.msg_note{text-align:center; padding: 25px 10px; margin:35px auto; width:60%}

.q_id_note{position: absolute;top: 40px;left: 1px;font-size: 10px;color: gray;}
.q_solution_note{position: absolute;bottom: 27px;left: 1px;font-size: 10px;color: gray;}

.highlight {
	background-color: #fff2ac; padding: 0 3px;
	background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
    }

.highlight-warning {
    color: #ffffff;padding: 0 3px;
	background-color: #fdbe37;
	background-image: linear-gradient(to right, #fd7213 0%, #fdbe37 100%);
    }

.highlight-ok{
    color:#017a46; padding: 0 3px;
    background-color:#b1e340;background-image: linear-gradient(to right,#b1e340 0%,#def2d5 100%);
}

.highlight-grey{
    padding: 0 3px;
    color:#3c3c3c;
    background-color:#f1f1f1;background-image: linear-gradient(to right,#cfd4d8 0%, #f1f1f1 100%);/* linear-gradient(to right,#f1f1f1 0%,#cfd4d8 100%);*/
}

.highlight-blue{
    color:#353b7f; padding: 0 3px;
    background-color:#cce8f5;background-image: linear-gradient(to right,#8fbafb 0%, #cce8f5 100%);/* linear-gradient(to right,#f1f1f1 0%,#cfd4d8 100%);*/
}

ul.text_list, ol.text_list{font-size: 16px; line-height: 27px;}
ul.text_list li, ol.text_list li{padding-right: 20px; padding-bottom: 10px; margin-right: 20px; list-style: square;}
ol.text_list, ol.text_list li {list-style: decimal}
ol.text_list li::marker{font-weight: bold; color:var(--main-color)}

.title_emph{font-weight: bold; font-style: italic;}

.text_h0{font-size:0.7em}
.text_h1, .text_h2{display: inline-block;width: 97%;padding: 5px 0 0 0;margin-bottom: 7px;background-color: transparent;border-bottom: 1px solid;font-weight:bold;color:#6362ee}
.text_h1{font-size: 16px;background:linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 62%, #E9D5EB 100%);border-width: 2px}
.text_h2{font-size: 14px;background:linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 62%, lightgray 100%);}

/*.right_btm {position: fixed;bottom: 20px !important;width: 150px;height: 40px;line-height: 40px; padding: 0 !important; z-index: 9999999;}*/
.right_top {position: fixed;top: 70px;right: 10px;height: 33px; z-index: 9999999;}
.tooltip{cursor: pointer; color: #858585; position: relative}

.group_nav{position: relative; background-color:var(--color-peach); border-radius:10px;}
.group_nav h2{line-height:30px;padding: 10px 15px;}
.lesson_in_group{display:flex; justify-content: center; align-items: baseline; padding:7px;border-bottom:2px solid white}
.lesson_in_group .lesson_name{display: inline-block; margin-right:10px; font-size:12px}
.lesson_in_group a:hover{color:var(--main-color); }
.stepper-wrapper {margin-top: auto; width:100%;  padding:15px 10px;display: flex;justify-content: space-between;margin: 10px auto !important;}
.stepper-wrapper a, .lesson_in_group a {color:#4f4e4e}
.stepper-item {position: relative; display: flex;  flex-direction: column;  align-items: center;  flex: 1;}
@media (max-width: 768px) {
      .stepper-item{font-size: 12px; }
      .stepper-wrapper{width: 100%;}
    }
.stepper-item::before { position: absolute; content: ""; border-bottom: 2px solid #ccc;  width: 100%;  top: 15px; right: -50%; z-index: 2;}
.stepper-item::after {position: absolute; content: "";border-bottom: 2px solid #ccc; width: 100%; top: 15px; right: 50%; z-index: 2;}
.step-counter {font-weight: bold; position: relative; z-index: 5; display: inline-block; text-align: center; line-height: 30px; width: 30px; height: 30px;  border-radius: 50%;  background: #ccc;  margin-bottom: 6px;}
.stepper-item.active .step-counter, .step-counter.active { color:#ffffff; background-color:var(--main-color);}
.step-counter:hover a{color: var(--main-color)}
.stepper-item .step-name{font-size:12px; text-align: center;line-height: 12px;white-space: nowrap;}
/*.stepper-item .step-name i{font-size:14px;}*/
.stepper-item.active .step-name{font-weight: bold;}
.stepper-item.completed .step-counter {  background-color: rgba(178, 217, 146, 1);}
.stepper-item.completed::after { position: absolute; content: "";  border-bottom: 2px solid rgba(178, 217, 146, 1);  width: 100%;  top: 15px; left: 50%; z-index: 3;}
.stepper-item:first-child::before { content: none;}
.stepper-item:last-child::after {  content: none;}
.label_tag {font-size:11px;margin-top: 5px;display: block;}

.tooltip:after {
    content: attr(data-tip) ;
    font-weight: bold;
    font-size: 10px;
    position:absolute;
    /*z-index: 999;*/
    white-space:nowrap;
    /*margin: -20px -30px 0px 0px;*/
    margin: -25px -135%;
    background:#ededf0;
    color:#000000;
    padding:0px 7px;
    line-height: 24px;
    height: 24px;
    border: 1px solid #cacad1;
    opacity: 0;
    transition:opacity 0.4s ease-in-out;
    pointer-events: none;
    }

.tooltip.btm-tip:after{bottom:0}

.tooltip:hover:after {opacity: 1;}


.hideScreen{position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgba(0,0,0,0.85); z-index:800; display: none;vertical-align: middle}

.shade_down{box-shadow: var(--box-shade-down)}
.shade_up{box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.14), 0 -2px 9px 1px rgba(0, 0, 0, 0.12), 0 -4px 2px -2px rgba(0, 0, 0, 0.2);}

.blink_me {animation: blinker 3s linear infinite; }
.highlight_me{animation: blink-yellow 2s linear infinite; animation-iteration-count: 5;}
.animate_stop {animation-iteration-count: 6;}
@keyframes blinker {
    50% { opacity: 0.4; }
}

@keyframes blink-green {
    50% { background-color: #013600; border-color: #013600}
}

@keyframes blink-orange {
    50% { background-color: #fe974f; border-color: #fe974f}
}

@keyframes blink-yellow {
    50% { background-color: yellow; border-color: #f0dc00}
}

.bouncer {animation-duration: 2s; animation-iteration-count: 5; animation-name: bounce-4; animation-timing-function: ease;}
@keyframes bounce-4 {
    0%   { transform: scale(1,1)    translateY(0); }
    10%  { transform: scale(1.1,.9) translateY(0); }
    30%  { transform: scale(.9,1.1) translateY(-20px); }
    50%  { transform: scale(1,1)    translateY(0); }
    100% { transform: scale(1,1)    translateY(0); }
}

.pulser {animation-duration: 2s; animation-iteration-count: infinite; animation-name: pulse; animation-timing-function: ease-in-out;}
@keyframes pulse {
    0%   { transform: scale(1,1)    translateY(0); }
    25%  { transform: scale(1.12,.1.12) translateY(0); }
    50%  { transform: scale(1.15,1.15) translateY(0); }
    75%  { transform: scale(1.12,1.12)    translateY(0); }
    100% { transform: scale(1,1)    translateY(0); }
}

.wiggler {animation-duration: 2s; animation-iteration-count: 4; animation-name: wiggle; animation-timing-function: ease-in-out;}
/* Keyframes */
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  20% {
    transform: rotateZ(6deg);
  }
  25% {
    transform: rotateZ(-6deg);
  }
  30% {
    transform: rotateZ(4deg);
  }
  35% {
    transform: rotateZ(-3deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.wiggly {
  animation-duration: 2s;
  animation-iteration-count: 4;
  animation-name: wiggle;
  animation-timing-function: ease-in-out;
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatex(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatex(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatex(0px);
	}
}

.bullets_list{list-style: unset; list-style-position: outside; margin-right: 5px}
.bullets_list li {margin-right: 10px}

ul.bulleted_list{list-style-type: none; margin-right: 10px}
ul.bulleted_list li{position:relative; padding-right: 20px}
ul.bulleted_list li:before{content:" "; position: absolute; top:6px; right:0; display: inline-block; border-radius: 50%; width:12px; height: 12px; background-color: #555657}

/* login */
    .login_box h1{font-size: 28px; line-height: 30px}
    .login_box {box-sizing: border-box;width: 95%;max-width: 450px;background: #f0f0f0;margin: 15px auto 45px;padding: 1em;-moz-border-radius: 3px;border-radius: 3px;position: relative}
    .login_box i{margin-left: 7px; color:  var(--main-color);}
    .toggle_pwd{float:left; font-size: 14px; text-decoration: none}
    .toggle_pwd i{font-size:16px}
    .login_box input, .login_box input[type=email], .login_box input[type=password], .login_box input[type=tel], .login_box textarea, .login_box select {display: block; height: 2.5em; margin: 0 0 1em 0; width: 100%; font-family: 'Alef Hebrew'; border: 5px none; border-radius: 1px;-moz-border-radius: 1px; -webkit-border-radius: 1px; font-size: large;}
    .login_box label{font-weight: bold; color: var(--main-color)}
    #pwd_hint{margin:-15px 0 25px 0}
    .login_box .submit_btn {display: inline-block; width:100%; text-align: center;  margin: 7px 0 10px 0;padding: 6px;font-family: "Open Sans Hebrew", sans-serif;text-decoration: none;font-size: 14px;font-weight: bold;color: white !important;border: none;border-radius: 4px;-moz-border-radius: 4px;background-color: var(--main-color);}
    .login_box .submit_btn:hover{background-color: var(--secondary-color);}
    .login_box .submit_minor{background: var(--color-light-blue-text)}
    .login_box .submit_minor:hover{background-color: var(--secondary-color); color:#4f4e4e}
/*    .login_box .submit_major{background: #3fa4de}
    .login_box .submit_major:hover{background-color: var(--secondary-color); color:#4f4e4e}*/

    .open_login_helper {text-decoration: none; font-weight: bold;color: var(--main-color); margin: 20px auto; display: block; text-align: center;}
    .open_login_helper:hover {text-decoration: underline; color: var(--secondary-color);}
    .separated_header{text-align:center; margin-top:0px; padding-top:50px; border-top:1px solid #b1adac; color:#1c375b}

    .whatsapp_link_box{display:block; width:250px;transition: width 0.4s linear; border-radius:10px;padding:0 20px 40px 20px; margin:20px auto; background-color:#eff2fb; text-decoration:none}
    .whatsapp_link_box summary i.fab {color:#3ebd4e; font-size:50px; display:block; margin:0 auto 20px}
    .whatsapp_link_box:hover, .whatsapp_link_box[open]{background-color:#3a6796; color:white}
    .whatsapp_link_box[open]{width:100%}
    .whatsapp_link_box[open] .hide_on_open{display: none}
    .whatsapp_link_box .show_on_open{display:none}
    .whatsapp_link_box[open] .show_on_open{display:initial}
    .whatsapp_link_box a{display: block; width:100%; text-decoration: none;}
    .whatsapp_link_box a:hover, .whatsapp_link_box a:focus, .whatsapp_link_box:hover i, .whatsapp_link_box[open] i{color:white !important; text-decoration:none}

    .copy_to_whatsapp, .goto_whatsapp{position:relative;display: inline-block; margin:10px auto; border-radius:30px; height:30px;line-height:30px; max-width:200px;color:white;}
    .copy_to_whatsapp>span, .goto_whatsapp>span{position:absolute;right:3px;top:3px; width:25px; height:24px; line-height:25px;border-radius:28px; background-color: white; text-align:center; font-weight:bold; color:#3e6594}
    .copy_to_whatsapp {background-color:#93b3d5}
    .goto_whatsapp {background-color:#39bd54}
    .goto_whatsapp i, .copy_to_whatsapp i {font-size: 1.2em;vertical-align: middle;margin-left: 5px;}
    .copy_to_whatsapp:hover {background-color: #92318e;text-decoration:none}
    .goto_whatsapp:hover{background-color:#28863c;}
    .whatsapp_msg{width:100%; height:80px !important; margin:10px 0; border-radius: 8px !important; padding:0 7px }
    .copy_confirm{text-align: center;float: right; width: 100%;}

    .no_whatsapp{margin:-15px 0 10px 0; text-align:center; font-size:14px;}
    .no_whatsapp a{display: inline-block; margin-right: 7px; width:auto;font-weight: bold;color: var(--main-color);text-decoration:none;border-bottom:1px solid transparent;}
    .no_whatsapp a:hover {border-bottom:1px solid;}
    .no_whatsapp a:hover i{font-weight: bold !important;}
    .no_whatsapp a i{color: var(--main-color);margin:0 0 0 3px}

    .divider,.divider_top {text-align: center;position: relative;top: 2px;padding-top: 1px;margin-top: 14px;margin-bottom: -20px;}
    .divider_top{margin-top: -40px;}
    .divider::after, .divider_top::after { content: ""; width: 100%; background-color: transparent; display: block; height: 1px;border-top: 1px solid #a0a0a0; position: absolute; top: 51%;  z-index: 1;}
    .divider h6,.divider_top h6{line-height: 1;color: #524b4b;font-size:13px; font-weight: 400;z-index: 2;position: relative;display: inline-block;background-color: #f0f0f0;padding: 0 10px;}
    .divider_top h6{font-weight: 500; font-size: 17px; color: #1c375b; margin: 40px 0;}
    .line_separator{border-top:1px solid #a0a0a0; margin:13px 0 30px}

    #no_classes {background-color: #FFEBF1;font: bold 14px/20px "Alef Hebrew", arial;color: #db001b; padding: 10px; margin: 10px 0; border: 1px solid #db001b; border-radius: 5px; text-align: center;}
    #no_classes h3{font-size: 24px}
    #no_classes i {font-size: 60px; display: block; text-align: center; margin: 10px}

    #help_link {line-height:35px; border: 1px solid #9fa0a0; padding: 25px 18px 18px 18px; border-radius:5px; margin-top: -20px; margin-right:20px}
    #help_link a i {margin: 0}
    #help_link a i.fab {color:#3ebd4e; font-size:35px; vertical-align: top}
    #help_link a:hover{text-decoration: none; color: #3ebd4e; }
    #help_link a:hover i, #help_link a:hover i.fab{text-decoration: none; color: #146136 }
    #show_help_link_btn {text-decoration: none}
    .reset_pwd{text-align: right; margin: 25px 0;}
    #pwd_tip{display: block; font: bold 14px/20px 'Alef Hebrew', 'arial'; pad: 0 3px; }
    .failed_login{display: block; text-align: center; border: 1px solid; padding: 10px; margin: 2px 0;}
/*end login*/

/*dataTables overrides*/
.dt-buttons{display: inline-block}
button.dt-button{background-color: #707070 !important; border: none !important; background-image: none !important; border-radius: 4px !important; font-size: 12px !important; line-height: 13px !important; padding: 6px !important}
button.dt-button:hover{background-color: var(--light-color) !important; color: #707070 !important}

.hid_num_data{color:var(--light-color); font-size: 1px}

.dataTables_wrapper .dataTables_filter{float:left !important}
/*end dataTables overrides*/

/* font-awesome overrides*/
.fa-ul.rtl-list {list-style-type: none;margin-right: 2.5em;padding-right: 0;}
.fa-ul.rtl-list li i.fa-li{right: -2em;}
/* end font-awesome overrides*/

h3.stats_mishne { margin-bottom:10px; color:#707070; font-size:90%}
/*end general*/

/*template*/
.container{position: relative}
.outlier_left {position: absolute;left: 10%;bottom: 33%;color: var(--main-color)}
.outlier_right {position: absolute;right: 10%;bottom: 10px;color: var(--main-color)}

#main_container{position:relative;background-repeat: repeat;min-height: calc(100vh - 28px);}
#main_container:before{content:'';position:absolute;right:0;top:0;left:0;bottom:0;background-color:rgba(255,255,255,0.85);}
#header_strip{position: relative;padding: 3px;background-color: var(--main-color);color: #ffffff;height: 60px; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2); z-index: 100}

#logo_img{position: absolute; margin: 0; top:50%;height:100%; width: 91px; transform: translate(0, -50%); z-index:99}
#logo_img img{width: 100%; height: 100%; object-fit: contain; display: block}

@media screen and (max-width: 480px) {
    #logo_img{width:50px}
}

#welcome{position: absolute; font-weight: bold;font-size: 14px; line-height: 20px;top: 4px;}
#welcome a{color: #ffffff; font-weight: normal}
.headerMenu{position: absolute;padding-top: 10px; font-size: 16px; font-weight: bold;}
.headerMenu a{color: #ffffff; text-decoration: none; width:32px; height: 32px;vertical-align: middle;display: inline-block;line-height: 32px;text-align: center;}
.headerMenu a:hover{background-color: #ffffff; border-radius: 3px; color: var(--main-color)}
.headerMenu a i {font-size:24px; display: inline-block;vertical-align: middle;}

#hedgehog_header_icon{display: inline-block; position:absolute; top:7px; width:40px; height:40px; border:1px solid #b4b4b4; font-size: 25px; color:#ffffff}
#hedgehog_header_icon:hover{color:#545454}
#hedgehog_header_icon svg{width: 35px;fill:#fff}
#hedgehog_header_icon:hover svg{fill:#545454 !important}

.main_container_width {position:relative; max-width: 580px; margin: auto; height: 100%}
.page_width {position:relative; max-width: 850px; margin: auto;}

.system_msg{width:85%; border: 2px solid #fff; margin: 10px auto; padding: 10px; color: var(--main-color);}

.main_content{box-sizing: border-box; border: 1px solid #f0f0f0; width: 100%; max-width: 550px; min-height: calc(100vh - 115px);  background: #ffffff; margin: 15px auto 45px; padding: 1em; -moz-border-radius: 3px; border-radius: 3px;position: relative;}
.main_content.unit_module_admin{max-width:1050px !important}

.main_content h1 {text-align: center; color: var(--main-color); line-height: 32px; display:block;}
.main_content h1::first-letter{text-transform: capitalize;}
h1.longtext_header{font-size: 26px; line-height: 26px}

.main_content h2 {text-align: center; color: var(--main-color);font-weight: 400; margin:5px auto 10px; display: block;}
.main_content h2::first-letter {text-transform: uppercase;}

.main_content h2.mishne{margin-top:-16px; margin-bottom: 10px}
.main_content h3 {margin: 8px 5px 3px 5px; text-align: center; line-height: 15px; display: block;}
.main_content h3::first-letter{text-transform: uppercase;}

.main_content h4 {margin: -15px 5px 3px 5px; text-align: center; color: var(--secondary-color);}

.smallprint {font-size: 14px; line-height: 16px}
.small_text {font-size: 16px; line-height: 22px}
.text_link{font-weight: bold; color: #3293e8}
.text_link:visited {color: #3293e8}

.text_link_emph{font-weight: bold; color: var(--main-color)}
.text_link_emph:visited {color: var(--main-color)}
.text_link_emph:hover{color: #3293e8; background-color:#DEF3FC; text-decoration: underline}

#footer{display: flex; justify-content: space-between; background-color: #3A3A3A;

        color: #ffffff;font-weight: 600;font-size: 12px; line-height: 20px;
        padding: 4px 6px;margin-top: 0px;margin-left: auto;margin-right: auto;text-align: center;
        box-shadow: 4px 4px 5px 5px rgba(0.14, 0, 0, 0), -1px 2px 9px 0 rgba(0.12, 0, 0, 0), 2px, 4px 2px 0 rgba(0.2, 0, 0, 0); }
#footer .breaker{display:none}
#footer .all-rights:first-letter{text-transform: uppercase}
.footer-middle{display: flex}


.a11y_footer{font-size: 14px}
.a11y_footer a {color: #ffffff !important; text-decoration: none !important; margin-right:5px}

@media screen and (max-width: 414px) {
    #logo_img {margin: 0 7px; }
}

img.flag_footer{width: 20px; margin:0 7px;vertical-align:sub}

/*end template*/


/* home screen */
.red_alert{color:red !important}

.main_link {box-sizing: border-box; display: block;position:relative; background-color: var(--light-color); color: var(--main-color); width: 75%; max-width:350px; min-height: 75px; line-height: 55px; margin:  35px auto; padding:10px; font-size: 30px; font-weight: 400; letter-spacing: 1.5px;
            box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2); }
.main_link_icon{position: absolute; right: 0}
.main_link_text{padding-right: 55px; display: block; margin-top:10px; line-height:35px}
.main_link::first-letter{text-transform: uppercase}

.main_link:hover{color: #ffffff; background-color: var(--main-color);box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2); cursor: pointer}
.main_link i {margin: 0 15px}
.main_link_container{text-align: center;}
.main_content a {text-decoration: none;}
.main_content a.btn:active, .main_content a.btn:visited{color:#ffffff}
.logout_btn{width: 75%;max-width: 350px;text-align: left;margin: 35px auto;font-size: 20px;padding: 5px}
.logout_btn span{color:var(--light-color)}
.logout_btn:hover {color: #ffffff; background-color:var(--main-color)}

.main_item {display: block;position:relative; background-color: var(--light-color); color: var(--main-color); width: 75%; max-width:350px; margin: 15px auto; padding:10px;line-height: 25px; letter-spacing: 1.5px;
            box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2); box-sizing: border-box;}
.main_item:hover {box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2); cursor: pointer}
.info-line{font-size: 14px; margin-right: 32px; display: block}


.item_title{font-size: 20px; font-weight: 600; display: inline-block; margin-bottom: 12px;}
.item_subj{font-size:15px; font-weight: 400; }
.q_title{font-size:18px}
ul.item_info{display: table; table-layout: fixed;min-width: 100%}
ul.item_info li{display: table-row; }
ul.item_info li i{display: table-cell; padding: 0 0 0 10px; font-size:18px}
ul.item_info li:last-child i, ul.item_info li:last-child span{border: none; }
ul.item_info span.info_head{font-weight: 600; font-size: 15px}
ul.item_info span.info_text{font-size: 15px}

.items_counter{display: inline-block; width: 20px;height: 20px; letter-spacing: normal; text-align: center;background-color: #ef2415;font: bold 14px/19px arial;color: white;border-radius: 50%;}

.items_counter.future_units{background-color: #808080;}
.items_counter.active_units{background-color: var(--step-active-light)}
.items_counter.done_units{background-color: #89b353}

.icon_alert{position: absolute;left: 15px;top: -10px;font-size: 20px; color:var(--main-color)}
.go_btn{display: inline-block; position: absolute; left:20px; bottom: 20px; width: 30px;height: 30px;line-height: 30px;text-align: center;background-color: var(--main-color); color:#ffffff;font-size:22px;color: white;border-radius: 15px;}

.main_item.completed{background-color: #88c53a;color: #217346;}
.main_item.completed .go_btn{background-color: #217346;}

#breadcrumbs { font-size: 14px; margin-top: 3px;}

#breadcrumbs .breadcrumbs_separator{margin: 0 8px}
#breadcrumbs a{ font-weight: bold; color: #707070;}

/*#breadcrumbs .fa-home:after{content:" מסך הבית"; font-family: "Open Sans Hebrew"}*/

.active_page{ color: var(--secondary-color); font-weight: bold; font-size: 14px; display: inline-block;}
.active_page::first-letter{text-transform: uppercase;}
 #breadcrumbs span.active_page a {color: var(--secondary-color)}
.other_page a:hover{ color: var(--main-color)!important}
.other_page{display: inline-block;}
.other_page::first-letter{text-transform: uppercase;}

@media screen and (max-width: 414px) {
    /*.main_content {padding: 0}*/
    .main_content h1{font-size:25px; line-height: 28px}
    .main_content h2{font-size: 20px; line-height: 22px}

    .main_link, .main_item{width: 100%; max-width: initial; margin: 25px 0}
    .logout_btn{width: 100%; max-width: initial}
    .items_counter, .go_btn {left: 18px;}
}


@media screen and (max-width: 486px) {
    .main_link {font-size: 24px}
    .main_item{font-size: 16px}
}
/* end home screen */



/* meta unit stats*/

.stats_holder{display: flex; margin-top:15px; justify-content: space-between; line-height:15px; padding-top: 10px}
.info_box ul li{margin: 0 0 7px 0; padding: 6px 10px 10px 10px;  background-color: #f1f1f1}
.info_head{width: 20%; font-weight:bold;  text-transform: capitalize;}
.stats_bar{width: 80%; padding-top:2px}
.stats_note {margin-top:15px; color: #545454;font-size: 14px; line-height:20px; padding-top:3px;}

.stats_note i { color:var(--secondary-color)}

/*end meta unit stats*/

/* meta unit */
.due_date {display:block; width: 50%; margin: 0px auto; border:0px; padding: 2px 5px; font-size: 12px; line-height: 16px; text-align: center; }
.tailored_opts .tailored_continue_opts {display: flex; justify-content: space-evenly;}
.tailored_opts a{padding: 7px;}
.tailored_opts .tailored_done{border: 1px solid; border-radius: 4px; font-weight: bold; font-size: 12px;}
.tailored_opts .tailored_done:hover{color:#fff; background-color: var(--secondary-color);}
.tailored_q_msg{display: block; text-align: center; margin-bottom: 10px;}
.stickyText{padding: 0 20px;}

.arrows_container{display: flex; justify-content: space-between; margin:10px auto !important; font-size:15px;line-height:20px}

.arrow_btn {display: inline-block; background-color: var(--secondary-color); color: #ffffff;position: relative;text-align: center;font-weight:600; font-size:13px;}
.arrow_btn.go_back{padding: 5px 0 5px 30px; margin-right:13px}
.arrow_btn.go_fwd{padding: 5px 30px 5px 0; margin-left:13px}

.arrow_btn:after {content: "";height: 0;width: 0;border-width: 15px;border-style: solid;position: absolute;left: 100%;top: 0;}

/*.arrow_btn.go_back:before { border-color: transparent transparent transparent white;left: 0;}*/
.arrow_btn.go_back {border-radius: 7px 0 0 7px}
.arrow_btn.go_back:after {border-color: transparent transparent transparent var(--secondary-color);}

/*.arrow_btn.go_fwd:before { border-color: transparent white transparent transparent;right: 0;left:auto}*/
.arrow_btn.go_fwd {border-radius: 0 7px 7px 0}
.arrow_btn.go_fwd:after {border-color:  transparent var(--secondary-color) transparent transparent;left:auto; right:100%}

.arrow_btn:hover{ background-color: var(--main-color); color:white}
.arrow_btn.go_back:hover:after {border-left-color:var(--main-color);}
.arrow_btn.go_fwd:hover:after {border-right-color:var(--main-color);}

/* end meta unit */


/* meta question */
    .highlight_1{background-color: yellow}

    .meta_unit_img {width:100%; max-width: 400px; max-height:350px; display: block; margin: 12px auto}
    .opt_content .meta_unit_img {max-width:95%; max-height:120px; display: block; margin: 2px auto}
    #meta_unit_questions{text-align: center}

    .quiz_multi li {margin-top:15px}

    .opt_content:not(.grid_opt){min-height: 30px; padding: 4px 38px 4px 10px; position: relative; text-align: right; background-color: #fbfafa; border: 1px solid #999999;}
    .opt_content label{position: relative; display: block;}
    .opt_content .radio{position: absolute; right: 7px; top: 7px;}

    .sortable-design li{display:flex;flex-wrap: wrap; align-items:center; border: 1px solid #999999; background-color: #f5f5f5; border-radius: 5px; padding: 5px; margin: 13px 0px; min-height:55px;}
    .sortable-design li i{margin-right:auto; margin-left: 5px;}
    .sortable-design li i.sort_handle{margin-right: auto; border-radius:50%; color: var(--main-color); font-size:22px; cursor: move;}

    .styled-select, .narrow-select {overflow:hidden; margin-bottom: 1em;}
    .styled-select  {width:400px; padding:5px; font-size:16px; border:1px solid #ccc; height: 2.5em;}
    .narrow-select  {width:100px; padding:5px; font-size:12px; border:1px solid #ccc; height: 28px; margin-right:6px}


    .please_explain {position: absolute;top:-20px;left:-10px;font-size:12px;}
    .please_explain a {color: #8d6d59;}
    .please_explain a:hover {color: #d35607;}
    .explain_btn{margin:5px 2px 2px 2px;border-radius: 4px; white-space: nowrap; font: bold 11px/18px 'Open Sans Hebrew';padding:2px 5px;background-color:#f0f0f0;border:1px solid #d4d1af;color:#816431 }
    .explain_btn:hover {border-color: #8d6d35}


    .full_grade .explain_btn{border-color:#c7d7bf;color: #016501}
    .full_grade .explain_btn:hover {border-color: #018001}

    .certain_mark{position: absolute;top: 5px;right: -22px;font-size: 20px;}
    .q_stats{background: var(--light-color) /*#fffbd6*/; border-radius:0 0 7px 7px; padding: 5px; text-align: right}
    .q_stats span{font-weight: bold}

    .q_mark{font-size: 14px; line-height: 24px;text-align: right; margin-bottom: 15px}

    .wrong_opt_explanation_holder i {position:absolute; font-size: 19px; margin-left: 12px;color: #8d6d35;top: 6px;right: 5px}


    .full_grade {width:100%; display: inline-block; text-align: right; background-color: #e9f6e4; border-radius:5px; border: 1px solid #c7d7bf; padding: 5px 32px 5px 5px;}

    .system_note hr {clear: both; border: 0; border-top: 1px solid #d4d1af; margin: 25px auto 10px; width:65%}

    .accessibility_hint{width:0; height:0; font: 400 12px arial; color: #0e2d6d; background-color: white; position: absolute; left: 50%; margin-left: -55px; top: 0px; padding: 2px 4px; opacity: 0;}
    .accessibility_hint:focus, .accessibility_hint:active{width:auto; height:auto; opacity: 1; z-index:999;}
    .sub_q_txt{padding: 10px 0;display: block;}
    .switch_q_btn{padding:5px;}
    .student_comment_clickable{position:absolute; top:4px; left: 7px;}
    .student_comment_p{text-align: right;}
    .q_val_explain{overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;}
    .val_full_exp{margin: 5px 0; display: inline-block;}
    .val_full_exp i{position: inherit; font-size: inherit; margin: auto;}
    .q_edit_btn{position:absolute; top:43px; right:5px; color: gray; padding: 0 5px; border-radius: 5px; border: 1px solid;}
    .qcluster_header .q_edit_btn{top: 8px; right: auto; left:22px; line-height:23px; font-weight:normal}

    .submit_q_error, .q_content .submit_msg {display: block; font-size: 13px;line-height: 17px; text-align: left; padding-left: 7px;}
    .submit_q_error{background-color: #FFEBF1; color: #db001b;}
    .q_content .submit_msg {background-color: #ebf6fb; color: #3c6581;}

/* forum */
    .forum_clickable{position: relative;}
    .forum_clickable details {margin: 0; padding: 0;}
    .forum_clickable details[open] summary ~ * {animation: sweep .8s ease-in-out;}
    .forum_clickable details > summary {list-style: none; position: absolute; bottom: -30px; left: 7px; z-index: 11; }
    .forum_unsolved_q details > summary {top:-30px !important}
    .forum_clickable details summary::-webkit-details-marker {display:none; }
    .q_btm_btn{width:35px; height:25px;background-color: var(--secondary-color);border-radius: 4px;padding: 1px 4px;font-size: 20px;color: #fff;text-align:center}
    .q_btm_btn a{color:#fff}
    .q_btm_btn:hover{background-color: var(--main-color);}
    .forum_div{background-color:#e5ddd5; border: 1.5px solid #d7d7d700; margin: 0px 1px 2px 1px; border-radius: 4px;}
    .forum_posts{padding: 0 10px;}
    .forum_div .chat_author {text-align: right;}
    .forum_close{left: 0px; bottom: 0;}
    .forum_chat_reply{ position: absolute; font-weight: 900; left: 5px; top: -25%; width: 25px; height: 25px; font-size: 120%; color: #757575;  box-sizing: border-box;
        display: block;  text-align: center;cursor: pointer;z-index: 101;}
    .forum_bottom_div{background-color: #F0F2F5; width: calc(100% - 6px); padding-top: 5px;margin: 5px auto; border-radius: 5px;}
    .forum_reply_to{background-color: #E5E7EA; width: 90%; margin: auto; border-top-right-radius:5px; border-top-left-radius:5px; padding: 20px 10px 10px 10px; text-align: right; margin-bottom: -10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .forum_reply_to img {width: 100px !important;}
    .close_forum_reply{position: absolute !important; top: 5px;  left: 4px; list-style: none; font-size: 20px; color: red; cursor: pointer;}
    .original_post{position: relative; background-color: #f8f8f8; width: 98%;  margin: 3px auto 10px;   padding: 13px 10px; text-align: right; border-radius: 5px;  color: grey; font-size: 14px;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .original_post:hover{ background-image: linear-gradient(to bottom right, #aeb6b4, #f8f8f8 35%); cursor: pointer;}
    .forum_btns{padding-bottom:15px; display: flex; justify-content: space-between; position: relative;}
    .forum_btns .tooltip::after{margin: -25px -125%;}
    /* removed scroll bar from posts. to put back - uncomment and add overflow:scroll to .forum_posts */
    /* .forum_side_bar::-webkit-scrollbar {width: 7px; }
    .forum_side_bar::-webkit-scrollbar-track {box-shadow: inset 0 0 2px grey;  border-radius: 10px;  }
    .forum_side_bar::-webkit-scrollbar-thumb { background: #888; border-radius: 10px;}
    .forum_side_bar::-webkit-scrollbar-thumb:hover {background: #555; } */
    .forum_remove_field{ position: absolute !important; top: 5px;  left: -1px; list-style: none; font-size: 17px; color: red; cursor: pointer;}
    .post_delete{position: absolute; left: 38px; top: -7px;  font-weight: 900; font-size: 15px;   color: var(--step-fail-dark); box-sizing: border-box; display: block;  text-align: center; cursor: pointer;}
    .post_edit{position: absolute; left: 68px; top: -7px;  font-weight: 900; font-size: 15px;  box-sizing: border-box; display: block;  text-align: center; cursor: pointer;}
    .post_math_field{margin-bottom: 5px;}
    .post_img_label{position: absolute; bottom: 15px; right: 75px;cursor: pointer; border-radius: 4px; color: #fff; background-color: var(--secondary-color); font-size: 12px; font-weight: bold; padding: 2px 10px; text-align: center;}
    .post_img_label i{color: #fff !important;}
    .post_img_label:hover{background-color: var(--main-color);}
    .post_img_pop{display: block; margin: auto; max-width: 450px; border-radius: 5px;}
    .post_file_img{right:128px; padding: 2px 6px;}
    .original_post_img{max-width: 30px; max-height: 30px; float: left;}
    .forum_nickname_div{position: relative; padding: 4px 41px 4px 10px; text-align: right;}
    .forum_title{border-bottom: 1px solid #a88d73;color: #7d654d;padding-bottom: 5px; padding-top: 5px; position: sticky;top: 0px;z-index: 9;background-color: #e5ddd5;}
    .forum_left_fix {position: sticky; top:50px;}
    .forum_left_nav { color:var(--main-color); z-index: 99; width: 0;}
    .forum_left_nav > a {display: block; width: 35px; height: 30px; line-height:30px; margin:20px -13px 0 0; font-size: 14px;-webkit-box-shadow: -7px 0px 11px -5px rgba(0,0,0,0.91);
box-shadow: -7px 0px 11px -5px rgba(0,0,0,0.91);}
    .forum_nav_btns{color: #7d654d; padding-right: 10px; padding: 0 10px; background-color: #fff; border-bottom-left-radius: 5px; border-top-left-radius: 5px;}
    .forum_nav_btns:hover{background-color: #7c654e;color: #fff;}
    .forum_div .arrows_up{top: 55px;}
    .forum_div .arrows_down{top: 95px;}
    .forum_close_btn{top: 15px;}
    .add_new_post_btn{display: block;text-align: right; font-weight:bold; font-size: 16px; padding: 5px; margin-right: 10px; cursor: pointer;}
    .add_new_post_btn i{font-size:22px; vertical-align: middle;color:#fea500}

    .post_read_by{background-color: #f8f8f8; margin: 15px 10px; padding: 10px; border-radius: 5px; text-align: right; position: relative;}
    .post_read_by h4{text-align: right !important; margin: 2px 0;}
    .post_read_by span{font-size: 13px;}
    .post_read_by .close_read_by{font-size: 17px; color: red; border: 1px solid red; background: pink; border-radius: 67px;  padding: 3px; height: 18px;  width: 18px;  position: absolute;   left: 5px;
        top: 3px; display: flex;  align-items: center;  cursor: pointer;}
    .post_read_by .close_read_by:hover{color: pink; background-color: red;}
    .feedback_chats_btn {background-color:#ECECFF; color:var(--main-color) !important;}

    @media screen and (max-width: 450px) {
        .post_img_pop{ max-width: 300px;}
        .forum_bottom_div div[class^="matheditor-wrapper"]{ width: 350px !important; min-width: 350px !important;}
    }



/* end forum */


/*end meta question */

/* tree view */
.spaceil_logo_container{ position: absolute; left: 38px; top: 0px;display: inline-block; width:80px; height:28px; text-align: center;line-height:25px; border-radius: 0 0 9px 9px; background-color: #f0f0f0}
.spaceil_logo{width:80%;}

@media screen and (max-width: 421px) {
	.spaceil_logo_container {left:32px; width:70px}
        .spaceil_logo{width:85%;}
	}
.tree_list {background-color: #f0f0f0; padding-bottom: 10px;}

.tree_list li.level1>a {position:relative; display:block; background-color: #808080; color: #ffffff; font-size:160%;line-height:120%; font-weight: bold;margin: 25px 0 0 0; padding: 5px 5px 5px 25px; }
.tree_list li.level1>a .toggle_1{position: absolute; font-family:var(--font-awesome); font-weight: 900; left:5px; top: 50%; width: 25px;height: 25px;font-size: 120%;
    color: white; box-sizing: border-box; transform: translate(0,-50%); display:block; text-align:center; cursor: pointer;}
.tree_list li.level1>ul{padding-top: 5px;}

.tree_list li.level2>a {position:relative; display:block; background-color: #d9d9d9; color: #808080; font-size:135%; line-height:120%; font-weight: bold;margin: 5px 0 0 0; padding: 4px 15px 4px 28px;}
.tree_list li.level2>a .toggle_2{position: absolute; font-family:var(--font-awesome); font-weight: 900; left:5px; top: 50%; width: 25px;height: 25px;font-size: 120%;
    color: #808080; box-sizing: border-box; transform: translate(0,-50%); display:block; text-align:center; cursor: pointer;}
.tree_list li.level2>a>i {margin-left:5px}
.tree_list li.level2>ul{padding: 5px 0 10px;}

.tree_list .ul_2{margin-bottom: 15px}
.tree_list li.level3{padding: 10px 15px 0 8px; position:relative;}

.tree_list li.level3>a {display: flex; justify-content: space-between; align-items: center; background-color: #ffffff;color: #4f4e4e; padding: 7px 25px 7px 0; height: 100%; padding-right: 34px;}
.book_chapter_list li.level3>a .toggle_3 { position: absolute; font-family: var(--font-awesome); font-weight: 900;   left: 5px;  top: 50%;  width: 25px;  height: 25px;  font-size: 120%;
    color: #808080;  box-sizing: border-box;  transform: translate(0,-50%);  display: block;  text-align: center; cursor: pointer;}
.tree_list li.level3>a .bullet_num{position: absolute;font-size: 12px; line-height: 16px;  text-align:center; width: 19px !important; height: 19px !important; top: 19px; right: 16px;}
/*     .bullet_num {border-radius: 50%; line-height: 25px;  text-align:center; width: 25px !important; height: 25px !important; display: inline-block; color:#ffffff; font-weight: bold; }
 */
.tree_list li.level3>a .book_bullet{top: 10px; right: 3px;}
.tree_list li.level3>a>i{color: var(--main-color) }
.tree_list li.level3>a>span>i{color: var(--main-color) }
.tree_list li.level3>a .units_bullets{white-space: nowrap; position: relative;margin-left:9px}
.tree_list li.level3>a .units_bullets i.not_linked{color:#8f8f8f}
.tree_list li.level3>a .units_bullets i.linked{color:#7db442}

.tree_list li.group_title{position:relative; display:flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	    background-color:#f0f0f0; color: #606060; font-size: 110%; line-height:80%; padding: 10px 15px 0 10px; font-weight:bold; }
.tree_list li.group_title>span:last-child{display: flex; justify-content: space-between; align-items:center; margin: 5px auto 5px 0}
.tree_list li.group_title>span:last-child a.btn{max-width:135px;padding:5px; font-size:11px;margin:0px;box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);}
.tree_list li.group_title>span:last-child a.btn:last-child{margin-right: 6px}
.tree_list li.group_title .group_note, .lesson_note{font-weight: normal; font-size:0.7em; }
.tree_list li.group_title .group_note:before, .lesson_note::before{content: ' • '; font-size:1.5em}
.tree_list .mail_alert{display: inline-block;position: absolute;right: 20px; top:17px; color:red}

.counter_bullet {display: inline-block; background-color: var(--step-active-light); color: white; border-radius: 50%; font-weight:bold; width: 18px;height: 18px;font-size: 14px;line-height: 17px; letter-spacing:normal; text-align: center; margin-right:3px;
position: absolute; top:-8px; left:12px; width: 22px;height: 22px;line-height: 21px;}

.counter_bullet.future_units {background-color: #808080;}
.counter_bullet.future_units{left: 12px}
.counter_bullet.future_units.work_units{left: 40px}

.topic_type_lesson_header{margin-top:15px}
.topic_type_lesson_header>a{border-bottom:1px solid var(--main-color) !important; font-weight:bold}
.topic_type_lesson_header>a>i{margin-left:10px}

    .area_list {background-color: #f0f0f0; padding-bottom: 2px; max-width: 650px; margin: auto}
    .area_list li>span{/*cursor: pointer;*/ display:inline-block; width:100%}
    .area_list>li>span {font-size:160%;font-weight: bold; margin-top:15px; color: #ffffff; background-color:#808080; padding: 5px}

    .subj_list li>span {font-size:135%; color:#808080; padding: 4px 15px 4px 0px; margin-top: 5px; font-weight: bold;; background-color: #d9d9d9;}

    .unit_list li {font-size:100%; padding:7px 25px 7px 0; background-color: #ffffff; margin: 5px 15px 10px 0;}
    .unit_list li.sub_list{padding: 0; margin:0; background-color:#f0f0f0}

    .group_link_btn{display: flex; justify-content: space-around;text-align: center;padding: 10px;}
    .group_link_btn .btn{min-width:120px}
    .back_to_main{text-align:start; border-top:1px dotted #808080; padding-top:15px; margin:15px 0;}

    .test_unit{border: 1px solid orange}
    .test_unit .smallprint{font-weight: bold;}

    .tailored_unit_list li {padding-right:10px}
    .tailored_unit_list > li:nth-child(1) {background-color: #f0f0f0; color:#f0f0f0; margin: 0; padding: 2px 0 0 0;}
    .tailored_unit_list li>span {background-color: #f0f0f0; font-size:110%; font-weight: bold; color: #606060}

.small_admin_note{position:absolute; right:14px;top:2px; font-size:10px !important; font-weight:normal !important; background-color:transparent !important; margin:0 !important; padding: 0 !important}
.admin_btn{position: absolute;
right: -20px;top: 13px;height: 25px !important;width: 25px;
border-radius: 4px;border: 1px solid #c0c8e5;background-color:#d9def1 !important;
padding: 0px 4px 0 7px !important;
font-size: 14px;color: var(--main-color) !important;
text-align: center;}

.admin_btn:hover{background-color: var(--main-color) !important; color:#ffffff !important}
.admin_btn:hover i{color:#ffffff !important}

.trnsl_btn{right: -50px; padding: 0px 2px !important}

@media screen and (max-width: 640px) {
    .admin_btn, .trnsl_btn{display: none !important}
}
/*
teacher subtree
*/

.fad.fa-chart-pie-alt:before, .fad.fa-adjust:before{opacity: 0.6}
    .fad.fa-chart-pie-alt:after, .fad.fa-adjust:after{color:#7db442; opacity: 1}

    .tree_list li.level3>span.bullet_icon{position: absolute; top:19px;right: 35px; font-size:15px}
    .tree_list li.level3>a.unit_name{padding-right: 60px;color:#4f4e4e;}
    .tree_list li.bonus_unit>i{position:absolute; top: 19px;right: 51px; z-index: 2;}
    .tree_list li.level3>a.unit_name.expandable:hover{background-color: var(--secondary-color)}
    .bullet_icon{background-color: transparent !important}

    .expanded_container{background-color: white;margin-top: -6px;padding: 10px;}
    .you_are_here{color:#ffffff;position: absolute;width: 100%; margin-right:-5%;animation: blinker 1.2s linear infinite;
		  background-color:#fff2ac;opacity:0.8;
		  background-image: linear-gradient(to left,#fff2ac 0%, #ffe359 70%, #fdbe37 100%);}
    .unit_tag{border:1px solid grey; border-radius:3px; padding: 0px 4px; font-size:12px; margin-right:5px}
    .tree_list li.bonus_unit a.what_is_this {display: inline-block; position: absolute; padding:0; height: inherit; top:3px; right: 7px; background-color: transparent !important; font-size:22px }
    .tree_list li.bonus_unit a.what_is_this i {color: var(--main-color)}
    .tree_list li.bonus_unit a.what_is_this i:hover {color: var(--light-color)}

    .tree_list li a.unit_preview_btn {display: inline-block; position: absolute; padding:0; height: inherit; top:15px; left: 12px; padding: 1px 3px; }
    .tree_list li a.unit_preview_btn i {color: var(--main-color);font-size:120%}
    .tree_list li a.unit_preview_btn i:hover {color: #ffffff}
    .tree_list li a.unit_preview_btn.shade_down.fn_btn:hover{box-shadow: none; color:#ffffff !important}
    .tree_list li a.unit_preview_btn.shade_down.fn_btn:hover i {color:#ffffff}

    details{margin:5px 15px 0 7px; padding: 2px 5px; }
    details.well_done{text-align: right}
    details.due_date_listing{background-color: #dadef0;border: 1px solid #c0c8e5;color: #465bb3;padding: 4px 5px;border-radius: 4px;font-size: 12px;font-weight: bold;text-decoration: none;}
    details.due_date_listing[open] summary:hover {background-color: #465bb3 !important; color: #dadef0 !important;}
    summary{cursor: pointer}

    /*expanded view: */
    .bullets_num {border: 1px solid #aaaaaa; border-radius: 4px; margin:5px; padding-bottom: 5px;}
    .bullet_holder {display: inline-block; margin-bottom:10px; font-size: 12px; width:90px; line-height: 12px; vertical-align: top}
    .bullet_num {border-radius: 50%; line-height: 25px;  text-align:center; width: 25px !important; height: 25px !important; display: inline-block; color:#ffffff; font-weight: bold; }

    .unit_data {text-align: right; width:90% !important; margin:0 15px 5px;  display: block !important; font-weight: bold; font-size: 14px; line-height: 20px}
    .unit_data {display: table !important}
    .unit_data>div {display: table-row !important}
    .unit_data>div>div {display: table-cell !important}
    .unit_data>div>div:nth-child(1) {width:25%}
    .unit_data>div>div:nth-child(2) {width:75%; direction: ltr; text-align:left}
    .prct_container{width:100%; background-color: #f0f0f0; margin-bottom: 3px;}
    .prct_bar {display: inline-block !important;  min-width:12px; height: 18px; background-color:var(--main-color);line-height: 18px; font-weight: normal; color:#ffffff}

    .bullets_num .light-separator {margin:5px; width:97%}

    .left_toggler {/*position:absolute;*/ left:0px; margin-left: 25px; font-size:140%}
    .left_toggler i {position:relative; top:-3px}

    @media screen and (max-width: 421px) {
	.left_toggler {left:0px; margin-left: 10px}
	}


    .columns {
	-moz-column-width: 8.5em; /* Firefox */
	-webkit-column-width: 8.5em; /* webkit, Safari, Chrome */
	column-width: 8.5em;
	text-align: right;
	width:95%;
	margin: 0 auto 10px;
	}

.index_tabs {display: block; border-bottom: 1px solid var(--main-color); text-align: right}
.index_tabs.centered_tabs{text-align: center}

.index_tabs a::first-letter{text-transform: capitalize;}

.index_tabs a {margin: 7px 0 0 7px; border-radius: 5px 5px 0 0; background-color: var(--extra-light-color);border-left: 1px solid var(--main-color);border-right: 1px solid var(--main-color);border-top: 1px solid var(--main-color);color: var(--main-color) !important;}
.index_tabs a.branch_inactive{color:#707070 !important; background-color: #f0f0f0;border-color: #707070; border-style: dotted; border-bottom: none;}

.index_tabs a.active_tab {background-color: var(--main-color); cursor: default; color: #ffffff !important}
.index_tabs a.active_tab.branch_inactive {background-color: #707070;}
.index_tabs a:hover{color: #ffffff !important}
.index_tabs a.branch_inactive:hover{background-color: #707070 !important}

.index_tabs a>span{display: block}
.index_tabs a>span:first-letter{text-transform: uppercase}
/* end tree view */

/* exercise screen */
.numberList{margin: auto; text-align: right; padding-right: 15px; width:90%}
.squareNum{display: inline-block; background-color: var(--main-color); color: #ffffff; cursor: pointer; text-align: center; margin: 0 15px 15px 0px; min-width: 40px; min-height: 40px; line-height: 40px; border-radius: 4px; font-size:18px; font-weight: bold}
.squareNum:hover{background-color: var(--light-color)}
a.squareNum:visited{color:#ffffff}

.info_box{width:95%; border: 1.5px solid  #d7d7d7; padding: 7px; margin: 15px auto; color: var(--main-color);}

.q_title {display: block; margin:auto; border: 1px solid var(--main-color);border-radius: 5px;padding: 3px 7px;font-weight: bold;width: 110px;text-align: center;line-height: 20px;}
.q_title .squareNum {margin: 5px;}
/* end exercise screen */

/* question screen*/
.h1_mishne{text-align: center; margin-top: -12px; color:var(--main-color);font-weight: bold;}
.alert{display: block; margin: 5px auto 10px; background: yellow; color:var(--main-color); text-align: center; font-size: 20px; }
.q_answers{ border-right: solid 3px var(--main-color); padding: 7px; background-color:#ffffff; margin-bottom: 20px; box-shadow: 0 -2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);}
.q_answers li{vertical-align: middle !important; padding: 0 3px}

.def{font-weight: bold;}

.qItem{ position: relative; box-sizing: border-box; margin: 30px auto; width:95%; max-width: 500px; min-height: 35px; border: 1px solid var(--main-color); border-radius: 7px; padding: 4px 43px 0px 6px; line-height: 24px;}
/*.qItem.unsolved {border: 1px solid #d4d1af}*/

.qItem .q_num{font-weight: bold; position: absolute; right: 0px; top: 0px; display: block; box-sizing: border-box; width: 35px; height: 100%; border-radius: 0px 4px 4px 0px; background-color: var(--light-color); color: white; text-align: center; line-height: 33px}
.qItem .q_head{font-weight: bold; font-size:24px; display: block; box-sizing: border-box; width: 100%; height: 40px; border-radius: 4px 4px 0px 0px; background-color: var(--main-color); color: white; text-align: center; line-height: 40px}
.qItem .q_head .q_switcher {color:#ffffff}


.qItem.unsolved .q_num, .qItem.unsolved .q_head{background-color:  var(--light-color) ; color: #5c5c5c}
.qItem.unsolved .q_head .q_switcher {color:#636363}
.qItem.unsolved { border-color: var(--light-color)}
.q_content{margin-top:10px}
.q_content legend {margin: auto; display: block; width: 100%;}

.qItem.unsolved-highlight{border-color:red}
.qItem.unsolved-highlight .q_head{background-color: pink}

.square_num {padding: 2px 5px; border-radius: 5px; border: 1px solid darkgrey;}

#meta_unit_questions .qItem {padding: 0}
#meta_unit_questions .q_content {padding: 10px; text-align: center;}

.q_hint{border:1px solid #ffa500; border-radius: 5px; padding:3px; font-size: 80%}
.q_hint img{max-width:100%}
/* end question screen*/

/*where to next*/
:root {
    --step-active-dark:#ffa500; /*orange*/
    --step-active-dark-text:#CC7700; /*orange*/
    --step-active-background:#FFF4E5;/*orange*/
    --step-active-light:#fdbe37;/*orange*/
    --step-locked-dark:#7f8080; /*grey*/
    --step-locked-light:#adb5bd; /*grey*/
    --step-done-dark: #2b7512; /*#669801; /*green*/
    --step-done-light:#80b546; /*green*/
    --step-fail-dark:#b12424; /*red*/
    --step-fail-light:#fd8585; /*red*/
}

.group_div{ position:relative; border: 1px solid var(--secondary-color); border-radius:7px; border-right: 3px solid var(--main-color); margin: 25px 0;
    text-align:center; padding:10px 45px; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);}

.group_div .group_label{position: absolute; right: 12px;top: -12px; display: inline-block; background-color: var(--main-color); color: white; padding: 1px 7px;border-radius: 4px;}
.group_div h3 {font-size: 16px; margin-bottom: 7px}

.group_div ul {margin-top:25px;}

.group_div li{position: relative; margin-bottom: 23px; text-align:right}
.group_div li:after{content:""; position:absolute; right:71px; display: block; height: 23px;  width:2px; background-color: var(--step-done-dark)}
.group_div li:last-child:after{content:none}
.group_div li>a {display:block;  padding-right: 55px}
.group_div .unit_num {display: inline-block; margin:auto; border-radius:50%; cursor:pointer; width: 35px;height: 35px;line-height: 34px;font-size: 20px; text-align:center; font-weight: bold;background-color: white;}
.group_div .unit_badge{position: absolute; right:35px; top:3px}
.group_div .unit_name{display: inline-block; margin-right:10px; color: #565656}

.group_div li.done .unit_num {background-color: var(--step-done-light); color:white}
.group_div li.done .unit_badge{color: var(--step-done-dark)}
.group_div li.done .unit_name {color: var(--step-done-dark)}

.group_div li.locked .unit_num{border:1px solid var(--step-locked-light); color: var(--step-locked-dark)}
.group_div li.locked .unit_badge{color: var(--step-locked-dark)}

.group_div li.active .unit_num {background-color: var(--step-active-light); color:white}
.group_div li.active .unit_badge{color: var(--step-active-dark); top:0px}
.group_div li.active .unit_name {color: var(--step-active-dark)}

/* יחידות אתגר נציג תמיד בירוק */
.group_div li.bonus_unit  .unit_num {background-color: var(--step-done-light); color:white}
.group_div li.bonus_unit  .unit_badge{color: var(--step-done-dark); top:0px}
.group_div li.bonus_unit  .unit_name {color: var(--step-done-dark)}

.group_badge {position: absolute; top:-15px; left:-7px; font-size:25px;transform: rotate(-25deg);}

.why_opener{ position: absolute; max-width: 120px; display: inline;
             border-radius: 3px; padding: 3px; cursor:pointer;  font-size:12px; line-height: 14px}
.why_opener summary{  list-style: none; color:#7f8080; font-size:13px; text-align: center; padding: 0 5px;line-height: 1.4;}
.why_opener[open] {min-width: 100px;}
.why_opener summary::-webkit-details-marker {  display: none;}

/*

.unit_arrow{display:block; margin: 7px 10px;font-size:120%;}
.unit_arrow.to_do, .unit_arrow.bonus {color:var(--step-active-dark);}
.unit_arrow.locked {color:var(--step-locked-dark);}

.unit_symbol { position: relative;}
.unit_symbol.bonus i {color:#fdbe37; }
.unit_symbol.locked i {color:#adb5bd;}



.unit_mark{position: absolute; right:-6px; top:-12px; border-radius: 50%; font-size: 17px; line-height:17px; width: 18px; height: 18px; color: #ffffff}
.locked .unit_mark {color: var(--step-locked-light)}
.done .unit_mark {color: var(--step-done-dark)}
.to_do .unit_mark, .obligatory .unit_mark, .active .unit_mark {color: var(--step-active-dark)}

unit_label{position: relative; display: inline-block}
.unit_name {display:inline-block; padding: 5px; width: 105px; margin:auto}
.label_note {display:inline-block; font-size:14px; font-weight:bold; margin-top:-10px !important; text-transform: capitalize}


.active .unit_name, .obligatory .unit_name{color:var(--step-active-light)}
.locked .unit_name{color:var(--step-locked-dark)}

 .legend_opener{text-align: right; font-size: 14px; font-weight: bold; padding-right: 5px}
 #legend_opener_text {margin-left: 5px; vertical-align: -2px; line-height: 12px}
.legend_container {text-align:right; font-size:13px; line-height: 17px; padding:5px}
.circle {width: 14px; height: 14px;  line-height: 14px;  font-size:0.6em; border-radius: 50%; display:inline-block; background-color: #adb5bd; text-align: center; color:#ffffff}
#btns {margin-top: 12px; display:flex; justify-content: center; flex-wrap: wrap;}
#btns div {margin: 0 5px}
#whereto_container {position: relative; border:1px solid var(--secondary-color); border-radius: 3px; background-color: #f1f7fc; padding: 25px 10px 10px 10px; margin: 30px 0 15px 0;}
.whereto_next {position: absolute; top: -14px; right: 7px;  font-size: 15px; line-height: 18px; padding: 5px 7px 5px 10px; background-color: var(--secondary-color); color:#ffffff; border-radius: 3px; }
.whereto_next i {margin-left: -2px}

.why_content a {font-weight: bold}
.group_div{border: 1px solid grey; border-radius:3px; border-right: 3px solid var(--main-color); margin-bottom: 25px; position:relative}
.group_div{text-align:right; padding:10px 45px; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);}
.group_div h3 {font-size: 16px; margin-bottom: 7px}
.group_div i.icon_badge{position:absolute; top:-22px; left:-20px; font-size:35px; color: #527a01; transform: rotate(-25deg);}

.finished_group{margin: 5px 0; text-align:center; font-weight: bold; font-size:13px}
.finished_group span.highlight{display: inline-block; line-height: 14px; padding: 4px 5px}

.progressbar { margin: 0; padding: 0; counter-reset: step; }

.progressbar li { list-style-type: none; float: right; font-size: 16px; line-height: 17px; position: relative; text-align: center; color: #7d7d7d;padding-bottom: 10px}

.progressbar li a {display: block}

.progressbar li span {cursor: pointer;}

.progressbar li.locked span {cursor: default}

.progressbar[data-steps="1"] li { width: 100%; }
.progressbar[data-steps="2"] li { width: 50%; }
.progressbar[data-steps="3"] li { width: 33%; }
.progressbar[data-steps="4"] li { width: 25%; }
.progressbar[data-steps="5"] li { width: 20%; }

.progressbar li span.unit_label:before { width: 35px; height: 35px; content: counter(step); counter-increment: step; line-height: 35px; font-size:22px;
			 border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 0px auto;
			 border-radius: 50%; background-color: white; font-weight: bold; position: relative; z-index:1; cursor: pointer;
}
.progressbar li:after, .progressbar li:before  { width: 60%; height: 2px; content: ''; position: absolute; background-color: #7d7d7d; top: 48px; right: 50%; z-index: 0;}
.progressbar li:before { width: 40%; left: 50%; right: initial}
.progressbar li:last-child:after, .progressbar li:first-child:before { content: none;}


.progressbar li.active span.unit_label:before { color: #ffffff; background-color: #527a01; border-color: #527a01; animation:  blink-green 1.5s linear infinite;}
.active .status_tag {color: #ffa500;}
.active .status_tag i {color: #ffa500}
.progressbar li.active:after {background-color: #669801;}
.progressbar li.active:before { background-color: #669801; }

.progressbar li.obligatory span.unit_label:before { color: #ffffff; background-color: #80b546; border-color: #80b546; animation:  blink-green 1.5s linear infinite;}

.progressbar li.obligatory:after {background-color: #adb5bd; }
.progressbar li.obligatory:before { background-color: #80b546;}

.done, .done .unit_label, .done .unit_label:before, .done .status_tag { color: #4E7401;}
.progressbar li.done span.unit_label:before { color:#ffffff; background-color:#669801; border-color: #669801; }
.progressbar li.done:after, .progressbar li.done:before { background-color:#669801}

.locked {color: #7c7d7d}
.progressbar li.locked span.unit_label:before {cursor: default;color: #ffffff; border-color: #adb5bd; background-color: #adb5bd;  }
.progressbar li.locked:after, .progressbar li.locked:before  { background-color: #adb5bd}
*/


/*end where to next */

/* layout */
ul.cols3{display:table; width:100%}
ul.cols3 li {display:table-cell; vertical-align: bottom}
ul.cols3 li:first-child {text-align:right}
ul.cols3 li:nth-child(2) {text-align:center}
ul.cols3 li:last-child {text-align:left}

div.cols2{display: table; width: 100%}
div.cols2 span{display:table-cell; vertical-align: bottom; width:50%}
div.cols2.top_cols span{vertical-align: top}
/* end layout */

/* math stuff overrides */
.alt_q .mq-numerator .mq-scaled.mq-sqrt-prefix{ /* unit 893 q4 alt - סימן שורש מעל קו שבר*/
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
}
.mq-sqrt-stem {top: -2px;position: relative;} /* תיקון לקו השורש בכרום. מקלקל בפיירפוקס אבל נראה שעדיף ככה*/

/*.mq-math-mode .mq-binary-operator {font-size: 0.7em;} בשביל סימן השייכות באינטרוולים צרפתיים*/
.subscript{ vertical-align: sub; font-size: 70%}
.mq-math-mode .mq-supsub.mq-limit .mq-sup {margin-bottom: 12px; margin-left: -5px} /*בשביל המספרים למעלה  באינטגרל*/
.mq-math-mode .mq-supsub.mq-limit .mq-sub {margin-top: 12px; margin-left: -5px}/* בשביל המספרים למטה באינטגרל*/

.mjx-cAF {font-weight:bold !important} /*בשביל הקו העליון*/
.mjx-c22C2, .mjx-c22C3{font-size: 80%;position: relative;} /*לסדר את הגודל של סימני האיחוד והחיתוך*/
.mjx-c22C2{bottom: 5px;} /*לסדר את הגודל של סימני האיחוד והחיתוך*/
.mjx-c22C3{bottom: 3px;}
mjx-container [space="4"]{margin-left:auto !important}

/* end math stuff */

/* matheditor*/
div[class^="matheditor-toolbar-"]{background-color: #f0f0f0}

/* end matheditor*/

/*forms*/
.form_box {box-sizing: border-box; border: 1px solid white; width: 95%; max-width: 450px; background: #f0f0f0; margin: 15px auto 0; padding: 1em; -moz-border-radius: 3px; border-radius: 3px;position: relative;}

.form_box label { line-height: 20px; margin-left:6px;text-align: right; display: block;font-weight: bold;}

input[type=submit], input[type=button], button, a.callForAction{
        bottom:0px; margin-right:0px; padding:6px;
        font-family:"Open Sans Hebrew", sans-serif; text-decoration:none; font-size:12px; font-weight:bold; color:white !important;
        border:none; border-radius:4px; -moz-border-radius:4px;
	background: var(--main-color);
        vertical-align: text-top;
}
input[type=submit]:hover{background: var(--secondary-color);cursor: pointer;}

input[type=button]:hover, button:hover, a.callForAction:hover {background: var(--main-color);cursor: pointer;}

input[type="radio"]{margin: 0 15px 10px;}

input.line_field{display:inline !important; width: 100% !important; height:30px !important;  background: transparent;  border: none; border-bottom:solid 1.5px #707070 !important; margin-bottom:10px; font-size:18px;}
input.line_field:disabled{border-bottom:none !important; background-color:#cdcdcd}

.general_input{border: 1px #808080 solid !important;}
textarea.general_input{height:5em}

.callForAction{margin: 5px; display: inline-block}



.outline_btn{display: inline-block; color: var(--main-color); border: 1px solid var(--main-color); border-radius: 5px; line-height: 25px; font-size: 15px; padding: 5px 7px; cursor: pointer}
.outline_btn:hover {color:#ffffff; background-color: var(--main-color); font-weight: bold;}
.outline_btn i{margin: 0 4px}

.demi_math_field {display: inline-block; border: 1px solid #ddd; border-radius: 4px; height: 48px!important; line-height: 48px; width:250px; background-color: #999999 }
.demi_field {display: inline-block; border: 1px solid #ddd; border-radius: 4px; height: 35px; line-height: 35px; width: 90px; margin: 0 10px 10px}

.err_field{/*background-color: #f4dddd !important; border-color:#f60606 !important;*/}
.ok_field{background-color: #e9f6e4 !important; border-color:#80b546 !important;}

.hide_ok_field{background-color: #fbfafa !important; border-color:#999999 !important;}
.active_preview{background-color: #ba71b8 !important; color:#fff !important}

.err_text, .err_tag{color:#d60000}
.ok_text, .ok_tag{color:#008000}
.gold_text{color:#fdba03}
.err_tag, .ok_tag{display: inline-block; padding: 0px 4px; font-size: 13px; line-height:18px;font-weight: bold;}
.ok_tag{background-color: #e9f6e4;}
.err_tag{background-color: #f4dddd;}

.err_field input, .err_field label, .ok_field input, .ok_field label {cursor: default !important}

.opt_mark{display:block; height:0px}
.opt_mark i.fa-times-circle, .opt_mark i.fa-check-circle, .val_mark i.fa-times-circle, .val_mark i.fa-check-circle  {position: absolute;right: -45px;top: -11px;background-color: white;border-radius: 50%;width: 16px;height: 16px;line-height: 16px;font-size:16px}
.grid_q_item .opt_mark i.fa-times-circle, .grid_q_item .opt_mark i.fa-check-circle{right: -7px;top: -7px}
.val_mark i.fa-times-circle, .val_mark i.fa-check-circle {right: 1px; top: -2px;}
.val_ans_msg{display: inline-block;color: #7eb64e;}

i.err_text{color:#d60000}
.ans_val.err_field {text-align: center;}

.val_dropdrown{width:calc(100% + 10px);height: 100%;margin: 9px auto;margin-inline-end: 7px;
  background-color: white;
  line-height: 1.3em;padding:0}

.error{display: block; background-color: #FFEBF1;font: bold 14px/20px "Alef Hebrew", arial;color: #db001b;}
input.err_input {background-color: #ffdfdf !important; border: 1px solid #f44a36 !important}
.success {display: block; background-color: #e9f6e4;font: bold 14px/20px "Alef Hebrew", arial;color: #228b22;}
.neutral{display: block; background-color: #c9e8fe;color: #274c88;font: bold 14px/20px "Alef Hebrew", arial;}

.field_note{font-size:13px; display: block; margin: -15px auto 10px }

.light-separator{display: block; background-color: #cccccc; height: 1px; margin: 20px auto; clear: both; width: 95%}
.medium-separator{display: block; background-color: var(--main-color); height: 1px; margin: 10px auto; clear: both; width: 85%}
.strong-separator{display: block; background-color: var(--main-color); height: 2px; margin: 10px auto; clear: both; width: 95%}


.form_box input[type=text], input[type=email], input[type=tel], input[type=number], input[type=file], textarea,  input[type=password], select, .title_field, .small_field {
    /* -webkit-appearance: none; -moz-appearance: none; appearance: none; */
    display:block; height:2.5em; margin:0 0 1em 0; width:99%; font-family:'Alef Hebrew';
    border:1px solid #d2d3d4; border-radius:3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: large;
}

 textarea {border: 1px solid #707070}

input[type=file] { width: auto; display: inline;}
/* checkboxes */
/* Customize the label (the container) */

.cb_container { display: inline-block; position: relative; padding-right: 5px; padding-top:6px; margin-bottom: 6px; cursor: pointer; font-size: 16px; line-height:16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

}

/* Hide the browser's default checkbox */
.cb_container input { position: absolute; opacity: 0; cursor: pointer;}

/* Create a custom checkbox */
.checkmark { position: absolute; top: 4px; right: -28px; height: 20px; width: 20px; background-color: #dddddd; border: 2px solid #757575}

/* On mouse-over, add a grey background color */
.cb_container input ~ .checkmark { background-color: #dddddd;}

/* When the checkbox is checked, add a blue background */
.cb_container input:checked ~ .checkmark { background-color: var(--main-color); border-color: var(--main-color)}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none;}

/* Show the checkmark when checked */
.cb_container input:checked ~ .checkmark:after { display: block;}

/* Style the checkmark/indicator */
.cb_container .checkmark:after { left: 4px; top: 1px; width: 5px; height: 10px; border: solid white;}

.cb_container input:focus+span{outline:1px dashed #f84423; outline-offset: 1px}

/* בעמוד מחיקת פתרונות בממשק מורה */
/* #all_q .checkmark {right:0}; */

/* end checkboxes*/


/* radio buttons*/


.radio_container input[type="radio"]{position: absolute; opacity: 0;}
.radio_container input[type="radio"]+span{float: right; margin-right: -30px; display: block; background: #757575;
        border-radius: 50%;  cursor: pointer;
        width:25px; height:25px; border:4px solid #e0e0e0;
}
.radio_container input[type="radio"]+span:before {

    content: ''; position: absolute; right: -30px; top:-2px; width: 21px; height: 21px; border-radius: 50%;transition: all 250ms ease;
}

.radio_container input[type="radio"]:checked+span:before {background-color: var(--main-color);box-shadow: inset 0 0 0 4px var(--light-color); }
.radio_container input[type="radio"]:focus+span{outline:1px dashed #f84423; outline-offset: 1px}

/* question grid display */
.grid_q { min-height: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
.grid_q_item { margin:15px 5px;}
.opt_content.grid_opt input[type="radio"]+ span{opacity: 0; display: none !important;}
.opt_content.grid_opt label span.latex{pointer-events: none}
.grid_q_item .checkmark{opacity: 0; display: none !important;}
.opt_content.grid_opt input + span + .radio_content{padding: 0 5px;font-size:14px; height:100%; min-height:40px;display: flex;align-items: center; text-align:center; border: 1px solid #999999; border-radius:6px;box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);}
.opt_content.grid_opt input:checked + span + .radio_content{border-color: var(--main-color); background-color: #e2f3ff;}

.opt_content.grid_opt.ok_field{background-color: transparent !important;border:none;}
.opt_content.grid_opt.ok_field input + span + .radio_content{border-color:#80b546; background-color:#e9f6e4}
.opt_content.grid_opt.ok_field.hide_ok_field input + span + .radio_content{border-color:#999999; background-color:#fbfafa}
/* end radio buttons */

 .list_2cols{/*column-count: 2;*/ overflow: hidden}
 .list_2cols label {float: right;width: 50%;box-sizing: border-box;margin-left: 0 !important;}
 .list_2cols label:nth-child(odd){clear:right}

/*.main_content input[type=text], .main_content input[type=tel],.main_content input[type=number], .main_content textarea{border: 1px solid #ddd; border-radius: 4px; height: 30px; font-family:'Alef'; font-size:20px; color: #4f4e4e; background-color: #fbfafa}*/
.main_content textarea {height: 90px;}
.main_content input[type=number] {width: 80px}
.main_content input[type=text]:disabled{background-color: #dadada; color: #4F4F4F}

input.small_field{display:inline; height:1.3em !important; width:60px !important; margin: 5px 10px 7px 10px; padding: 0;}

.radio-tabs {border: solid 1px #999999; display: inline-flex; margin: 5px auto 5px; border-radius: 5px; overflow: hidden; font-size: 13px}
.radio-tabs input[type=radio] { position: absolute; right:-200%; opacity:0;}
.radio-tabs input[type=checkbox] { position: absolute; right:-200%; opacity:0;}
.radio-tabs label {color: #4f4e4e; cursor: pointer; font-weight: bold; padding: 0 8px;}

.radio-tabs input[type=radio]:checked + label{color: #ffffff ;background: #808080; border: solid 1px #808080}
.radio-tabs input[type=radio]:focus + label{outline:1px dashed #f84423; outline-offset: -3px}
.radio-tabs input[type=checkbox]:checked + label{color: #ffffff ;background: #808080; border: solid 1px #808080}
.radio-tabs input[type=checkbox]:focus + label{outline:1px dashed #f84423; outline-offset: -3px}

.radio-tabs label.wrong_answer {background-color: #f4dddd !important; border-color:red !important; color: red !important; cursor:initial}
.radio-tabs label.right_answer{border-bottom: 4px solid green !important}
.radio-tabs label{border-right: solid 0.1px #999999;}
.radio-tabs input[type=radio]:nth-child(1) + label {border-right: 0}
.radio-tabs input[type=checkbox]:nth-child(1) + label {border-right: 0}


/* sel emojis */
.sel_feeling{border: none; margin: 0 -25px 0 0;}
.sel_feeling label{margin-right:20px; border:1px solid lightgrey; border-radius:5px; padding: 0 8px; min-width: auto !important; font-size: 35px;}
.sel_feeling .radio-tabs input[type="radio"]:nth-child(1){border:1px solid lightgrey;}
.sel_feeling input[type=radio]:checked + label{border-radius: 5px;}
.sel_feeling input[type=radio]:checked + .feel_happy, .sel_feeling input[type=radio]:hover + .feel_happy  {background:var(--step-done-dark) !important; border-color:var(--step-done-dark);}
.sel_feeling input[type=radio]:checked + .feel_neutral, .sel_feeling input[type=radio]:hover + .feel_neutral {background:var(--step-active-dark) !important; border-color:var(--step-active-dark);}
.sel_feeling input[type=radio]:checked + .feel_sad, .sel_feeling input[type=radio]:hover + .feel_sad {background:var(--step-fail-dark) !important; border-color:var(--step-fail-dark);}
.sel_feeling input[type=radio]:checked + label i {color: #fff !important; font-weight: bold;}
.sel_feeling .feel_happy i{color: #8CD082 !important;}
.sel_feeling .feel_neutral i{color: #F8D886 !important;}
.sel_feeling .feel_sad i{color: #EF857D !important;}
#sys_feedback_form .sel_feeling {border-radius: 5px !important;}
.sel_team_leader{margin: 15px 0 5px 0; padding: 5px; border: 1px solid var(--light-color); border-radius: 5px;}
.sel_team_leader .sel_team_student { margin: 10px -25px 0 0; border: none; padding: 5px;}
.sel_team_leader .sel_team_student label{margin-right:20px; border-radius: 5px; border: 1px solid; padding: 3px 10px;font-size: 15px; }
.sel_team_leader .sel_team_student input[type=radio]:nth-child(1) + label{border-right: 1px solid;}
.sel_team_leader .sel_team_student input[type=radio]:checked + label{background-color: var(--secondary-color); border: none;}
.styled_side_bar {  overflow: scroll; overflow-x: auto;}
.styled_side_bar::-webkit-scrollbar {width: 8px;}
.styled_side_bar::-webkit-scrollbar-track {box-shadow: inset 0 0 2px grey;  border-radius: 10px;  }
.styled_side_bar::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 10px;}
.styled_side_bar::-webkit-scrollbar-thumb:hover {background: #b1b1b1; }

/*toggle switch*/
/* The switch - the box around the slider */
.switch {position: relative;display: inline-block;width: 50px;height: 28px;}

/* Hide default HTML checkbox */
.switch input {opacity: 0;width: 0;height: 0;}

/* The slider */
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.slider:before {position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}

input:checked + .slider { background-color: #7db442;}
input:focus + .slider { box-shadow: 0 0 1px #7db442;}
input:checked + .slider:before {  -webkit-transform: translateX(20px);  -ms-transform: translateX(20px);  transform: translateX(20px);}

/* Rounded sliders */
.slider.round { border-radius: 20px;}

.slider.round:before {border-radius: 50%;}
/*end toggle switch*/


/*end forms */

/* goals */
    .info_box h2{text-align: right; font-weight: bold}
    .info_box h2 img{width: 1.3em; vertical-align: middle}
    .goals_holder{width: 80%; position: relative; margin-top: -3px}
    .history_goal {width: 100%; background-color:#ffffff;margin:0px 0px 11px;padding:10px;}
    .goals_num{display:flex; justify-content:space-between; color:  var(--main-color)}
    .goal_bar{display:flex; justify-content:space-between; width: 100%; height: 16px; border-top: 1px solid #707070; color:  var(--main-color); margin-bottom: 13px}
    /*.goal_bar:after{content: ""; display: block; height: 1px;background-image:linear-gradient(to right,#f88f22,#faebd7 , #faebd7 , #d7d7db);}*/
    .goal_bar img {width:16px}

    .current_num {text-align: center; position: absolute; top:0; vcolor: #ffc229}
    .current_num i{font-size: 90%}

    .goal_arrows {font-size: 90%;width: 75%;display: flex;justify-content: space-around;}

    .gradient_color1 {
	background: -webkit-linear-gradient(left, #777 , #aaa);
	background: -o-linear-gradient(right, #777 , #aaa);
	background: -moz-linear-gradient(right, #777 , #aaa);
	background: linear-gradient(to right, #777 , #aaa);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
      }

    .gradient_color2 {
	background: -webkit-linear-gradient(left, #aaa , #f37c2f);
	background: -o-linear-gradient(right, #aaa , #f37c2f);
	background: -moz-linear-gradient(right, #aaa , #f37c2f);
	background: linear-gradient(to right, #aaa , #f37c2f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
      }

    .fa-rotate-45 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

 h2.psst {text-align: right; font-size:20px; font-weight: bold; margin-bottom: 0}

 .goals_list {margin-bottom:15px; margin-top:15px; color: #4f4e4e}
 .goals_list div {margin-top:4px}
 .goals_list i{color: var(--main-color); margin-left: 7px}
 .radiomark{display: inline-block !important; vertical-align:middle;margin-left:3px;margin-top:-3px;}
 .reject_notice .opt_content{height: 40px; border: 0; background: none}
 .radio_container input[type="radio"]+span{border-color: #f0f0f0}
 .radio_container input[type="number"] {width: 50px}

 .rel{position:relative}
 .accept_notice, .reject_notice{border:1px solid #d7d7db; padding: 15px 0px}
 .accept_notice {background-color: #faebd7}
 .notice_head {font-size: 21px; font-weight: bold; color: var(--secondary-color); margin-bottom: 8px}
 .notice_head span {display: block; margin-top: 0px; font-size: 15px; color:#707070}
 .reject_notice .notice_head {color: #707070; font-size: 18px}
 .goal_div{position: relative;background-color: #f0f0f0; margin: 35px auto; padding: 15px; }
 .cur_grade{position: absolute; left: 15px; top: -10px; background-color: var(--main-color); color: #ffffff; font-weight: bold; font-size: 25px; line-height: 25px; border-radius: 50%; padding:7px}
 .goal_head{position: relative;font-size: 22px;color: var(--main-color);font-weight: bold;height: 50px;line-height: 50px;background-color: #d7d7db;margin-bottom: 10px;padding: 0px 13px;box-shadow: 0px 5px 14px -5px #0006;}

 .goal_head i.fa-bullseye-arrow{margin-left: 15px; position:absolute; bottom: 12px; right: 7px}
 .goal_head>span{padding: 0px 5px; position: absolute; left: 0; color: #ffffff;background-color: var(--secondary-color);}
 .goal_head>span i {margin:3px}

 .goal_head img {width:28px; margin: -6px 9px 0 9px; vertical-align: middle}
 .goal_baseline{color:#d7d7db}
 .goal_text{ color: var(--main-color); }
 .goal_challenge{text-align: center;}
 .goal_challenge .btn{width:135px; padding: 5px 3px; font-size:14px}
 .goal_challenge b{font-size: 20px; display: inline-block; margin: 5px auto 10px}
 .meh {background-color: #707070 !important}
 .meh:hover {background-color: #aaaaaa !important}


 .history_goal li:after {content: ""; display: block; height: 1px;background-image:linear-gradient(to left,#f88f22, #f88f22,#faebd7 , #faebd7 , #f0f0f0, #ffffff);}
 .history_goal li:last-child:after{background-image: none}

 .hideHistory {text-align: left; font-size: 85%}
 .hideHistory a{color: #707070}
 .hideHistory a:hover{color: var(--main-color);}

 .units_list_head {margin: 0px 12px 0px 0px; font-weight: bold; color: #707070; }
 .units_list_head span {color: var(--main-color);}
 .units_list{font-size: 80%;text-align: right;margin-right: 13px;line-height: 1.3 ;border-bottom: 1px solid #d0d0d0; }
 .units_list div{margin-bottom: 5px}

 canvas{margin: 10px 4px}

 .mylegend{margin: 15px auto;display: flex;justify-content: space-evenly;font-size:14px; line-height: 13px}
 .mylegend>span {text-align: right; margin-right: 7px}
 .legend_bullet {display: inline-block; border-radius: 50%; width: 10px;height: 10px;margin-left: 4px;}
 .red_bullet {background-color:#ea3901;}
 .green_bullet {background-color:#84be58;}
 .orange_bullet {background-color:#f88f22;}
 .green_area {display: inline-block;width: 25px;height: 10px;margin-left: 4px;background-color:#dfe2b0;border: 0.5px solid #84be58;}

 .target_line{border-bottom: 1.9px dotted #72bc16;width: 25px;display: inline-block;margin-bottom: 5px;margin-left: 4px;}
 .triangle-right {display:inline-block; margin-left: 4px;width: 0;height: 0;border-style: solid;border-width: 6.5px 0 6.5px 11.3px;border-color: transparent transparent transparent #808080;}

 .diamond {margin-left: 4px;display: inline-block;width: 0;height: 0;border: 5px solid transparent;border-bottom-color: #808080;position: relative;top: -5px;}
 .diamond:after {display: inline-block;content: '';position: absolute;right: -5px;top: 5px;width: 0;height: 0;border: 5px solid transparent;border-top-color: #808080;}
/*end goals */

/*hall of fame*/
   .goal_head{    position: relative;font-size: 22px;
    color: var(--main-color);
    font-weight: bold; height: 50px; line-height: 50px; background-color: #d7d7db;margin-bottom: 10px;

    padding:  0px 35px 0 13px;box-shadow: 0px 5px 14px -5px #0006;}

    .goal_head>span{padding: 0px 15px; color: #ffffff; background-color: var(--secondary-color);}

    div.fame{margin-bottom: 35px; padding: 15px; background-color: #f0f0f0;  width: 100%}


   .fame_row {display:block; width: 100%; background-color: #ffffff; margin: 6px 10px; padding-right: 10px; line-height: 30px; }
   .fame_row a {display:flex; justify-content: space-between; align-items: center; width: 100%; color: #4f4e4e;}
   .fame_row a:hover{background-color: #d7d7db; color: #ffffff;}

   .fame_row div{display: table-cell}
   .fame_row div:first-child{font-weight: bold ;line-height: 120%;}
   .fame_row div:nth-child(2){ width: 35%}
    @media screen and (max-width: 500px) {
	    .fame_row div:nth-child(2){ width: 20%}
    }
   .fame_row div:last-child{ text-align: left; }

   .fame_row .fa-trophy{color: gold}

   .sum_row {width:100% !important; text-align:left; display:block !important; padding: 10px 0}
    .fame_row .fa-star{color:#7db442}
    .fame_date{font-size: 12px}
    .bullet_num{background-color: #7db442;margin-right: 5px;}
/*end hall of fame*/

/* barfiller */
.barfiller {
  width: 100% !important;
  height: 12px;
  background: #fcfcfc;
  border: 1px solid #ccc;
  position: relative;
  box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5);
  -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5);
}

.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  background: var(--main-color);
  color: #ffffff;
  z-index: 1;
}

.barfiller .tipWrap { display: none; }

.barfiller .tip {
  margin-top: -30px;
  padding: 2px 4px;
  font-size: 11px;
  color: #000000;
  position: absolute;
  z-index: 2;
  background: var(--light-color);
}

.barfiller .tip:after {
  border: solid;
  border-color: var(--light-color) transparent;
  border-width: 6px 6px 0 6px;
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  z-index: 9
}

.barfiller .tip.original_grade {color:#ffffff; background-color: #7b7e82}
.barfiller .tip.original_grade:after {border-color: #7b7e82 transparent}
/* end barfiller */

.interimWrapper{padding:25px 0}
.interimTextHolder { max-width:516px; margin: 0 auto; }

/* Ofir Sticky */
/*
    .stickyHolder{background-color:#ffffff; min-height: 50px; clear: both}
    .stickyContent{overflow:auto; position:relative;}
    .stickyPop.fixed .stickyContentHidden{display: none !important;}
    .stickyPop:not(.fixed) .stickyToggler{display: none}

    .stickyToggler{position:absolute; left:10px; bottom:10px; margin-top:10px; padding: 0 10px !important; line-height:20px; font-size:11px}
    .stickyToggler i {display:none; margin: 0 7px; font-size: 17px;vertical-align: middle;}
    .stickyToggler:hover i{color:white}
    .sticky-bottom-padder{padding-bottom:30px !important}

    .stickyPop.fixed{position: fixed; margin-top:0; top: 0px; transform: translate(-50%, 0); transition:left 0.6s ease-in-out; width: 100%; max-width: 550px; box-shadow: 0px 0px 4px #888;background-color:#fbf3b3; z-index:999}

    .stickyPop.bottomIdle{position: absolute; left: 0px; right: 0px; box-shadow: 0px 0px 4px #888; z-index:999;}
    .endPoint{clear: both; height: 0px; overflow: hidden; margin-top: -30px;}
    .disableTransition{transition: none !important;}
    */
/* end Ofir Sticky */

/*Einav Sticky*/
.stickyWrapper{padding-bottom: 30px;} /*הדיב שעוטף את השאלות שעליהן חל הסטיקי*/
.stickyWrapper + .qItem, .stickyWrapper + .q_mask{margin-top:-30px !important}
.stickyHolder{position: sticky; z-index:2; top:-1px}
.stickyPinned{transition:left 0.6s ease-in-out; width: 100%;/*max-width: initial !important;*/ }
.stickyPinned{box-shadow: 0px 15px 10px -15px #111;background-color:#fbf3b3;z-index:999}

.stickyHolder:not(.stickyPinned) .stickyToggler{display: none}

.stickyToggler{position:absolute; left:0; bottom:0; margin-top:10px; padding: 0 10px !important; line-height:20px; font-size:11px}
.stickyToggler i {display:none; margin: 0 7px; font-size: 17px;vertical-align: middle;}
.stickyToggler:hover i{color:white}

.stickyPinned{opacity:1;transition: all 0.6s ease-in-out;}
.stickyHidden{transform:translate(150%,0);opacity:0 !important; pointer-events: none}
/* End Einav Sticky */

.stickyPop, .paper {
    display: block;
    line-height: 26.5px;
    padding: 10px 35px 10px 10px;
    position: relative;
    border-top: 1px solid #dbf1ff;
    border-bottom: 1px solid #dbf1ff;
    background: #f2f5b6;
    background: -webkit-linear-gradient(top, #dbf1ff 0%, #ffffe3 8%) 0 -1px;
    background: -moz-linear-gradient(top, #dbf1ff 0%, #ffffe3 8%) 0 -1px;
    background: linear-gradient(top, #dbf1ff 0%, #ffffe3 8%) 0 -1px;
    -webkit-background-size: 100% 27px;
    -moz-background-size: 100% 27px;
    -ms-background-size: 100% 27px;
    background-size: 100% 27px;
}
.stickyPop{padding:10px}

.paper::after, .stickyPinned:after {content:''; position:absolute; width:0px; top:0; right:25px; bottom:0; border-right:3.5px double #F8D3D3;}

.meta_unit_interim.stickyHolder {line-height:25px;}
.postit {
  /*line-height: 15px;*/
  text-align:center;
  width: 100%;
  /*margin: 15px 0;*/
  /*min-height:250px;*/
  /*max-height:250px;*/
  /*padding-top:35px;*/
  /*padding:20px;*/
  position:relative;
  border:1px solid #E8E8E8;
  /*border-top:60px solid #fdfd86;*/
  /*font: normal 18px/22px 'Alef', arial;*/
  border-bottom-right-radius: 60px 5px;
  display:inline-block;
  background: #ffff88; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}


span.paper-clip {
    z-index:99;
    top: -18px;
    right: 20px;
    height: 40px;
    width: 15px;
    border-radius: 10px;
    border: 3px groove #000000;
    display: inline-block;
    position: absolute;
    transform: rotate(22deg);
}

span.paper-clip::after {
    z-index:99;
    width: 6px;
    height: 12px;
    content: " ";
    background: transparent;
    display: block;
    position: absolute;
    right: -2px;
    top: 3px;
    border-radius: 10px;
    border: 3px groove #000000;
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.ui-autocomplete{float:right}

.btn, [role="button"] {cursor:pointer}
[role="button"]:focus, .btn:focus {outline:1px dashed #f84423; outline-offset: 1px}

/* yes-no */
.yes_no {display: flex; justify-content:space-around; width:100%; margin: 15px 0px}
.yes_no a {display: inline-block; border-radius: 5px; color: #4e4e4f; font-size: 14px; text-decoration:none; width: 45%}
.yes_no a::first-letter{text-transform: uppercase;}
.yes_no a span{display: block; text-align: center; padding: 10px ;}
.yes_no_icon{font-size: 22px; color: #ffffff}
.yes_no_txt{font-size: 16px;}
a.yess span.yes_no_icon{background-color:#69b932;}
a.noo span.yes_no_icon{background-color:#ed6552;}

a.yess:hover span.yes_no_txt{background-color:#69b932;color:#ffffff;}
a.noo:hover span.yes_no_txt{background-color:#ed6552;color:#ffffff}

.yes_no a span::first-letter{text-transform: uppercase;}
.yess {border:1px solid #69b932}
.noo {border: 1px solid #ed6552}
.yes_no a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.1);}
.understood_exp h3, .understood_exp.p{text-align: center; width: 80%; margin: 30px auto 0; border-top: 1px solid var(--secondary-color); padding-top: 7px}

/* maintree*/
    .fad.fa-chart-pie-alt:before, .fad.fa-adjust:before{opacity: 0.6}
    .fad.fa-chart-pie-alt:after, .fad.fa-adjust:after{color:#7db442; opacity: 1}

    #contents_search_box {display:flex; justify-content: space-between; position: relative;text-align: left; margin: 0; color: #707070; font-size: 14px; font-weight: 600; text-transform:capitalize;}
    #contents_search_box input{height:35px; width:100%; margin-right: 5px}
    #magnify {position: absolute; left:3px;top:5px; font-size:20px; color:var(--main-color)}
    .content_search_text{white-space: nowrap;line-height:35px}
    .content_search_field{width:100%; margin-left:5px}
     @media screen and (max-width: 414px) {
	#contents_search_box input{margin-left:5px}
	#magnify{left:8px}
    }
    .units_counter{font-size:14px; font-weight:bold; color:var(--light-color)} /*היה ירוק: #7db442*/
    .units_counter.not_yet{color:grey}

    .tree_item{display: flex; justify-content: space-between; align-items: center}
    .tree_unit_list li.tree_item:hover .units_counter{color:#ffffff}
    .tree_unit_list li.tree_item:hover .units_counter.not_yet{color:grey}
    .highlight-found{background-color:var(--light-color); color:#4f4e4e}
    li.level1>a{color:#ffffff}
    li.level2>a{color:#808080}

    .topic_toggler{cursor: pointer}

/*end maintree*/

/*swiper in maintree*/
.swiper-outer-wrapper{width: 100%; height: 50px; padding-top: 10px; margin-bottom: 10px; position: relative; background-color:#ffffff; }
.swiper {width: calc(100% - 25px);  height: 30px; }
.swiper-slide {display: inline-block;width: auto !important;height: 30px;text-align: center;
background-color: #f0f0f0;border: 1px solid #d9d9d9;border-radius: 3px;
padding: 2px 12px;white-space: nowrap;font-size:15px}
.swiper-slide a{color:#808080;}
.swiper-slide:hover{border-color: var(--main-color); }
.swiper-slide.active_tab {background-color: var(--main-color); border-color: var(--main-color); color:#ffffff}
.swiper-slide.active_tab a{color:#ffffff}
.swiper-arrow {position: absolute;z-index: 2;top: 12px; font-size: 25px;color: var(--main-color);}
.swiper-arrow-disabled{color: grey}

.swiper.branch_tabs .swiper-slide {font-size: 0.8em; padding: 0 5px; line-height: 20px; height: 23px;}
/* end swiper in main tree*/

/*subtree*/
.you_are_here{color:#ffffff;position: absolute;width: 100%; margin-right:-5%;animation: blinker 1.2s linear infinite;
	      background-color:#fff2ac;opacity:0.8;
	      background-image: linear-gradient(to left,#fff2ac 0%, #ffe359 70%, #fdbe37 100%);}
.out_in_mikud_label{border-radius: 10px 0; margin-right: 10px; padding: 0 6px; font-weight: bold; font-size: 13px;background-color: #a0a0a0;  color: white; white-space: nowrap;}
/*end subtree*/

/*stats_view*/
.list_mark {font-size:19px}
.q_num{display: inline-block; width: 25px; height: 25px; line-height: 23px; text-align: center; border-radius: 5px; color: #ffffff; font-weight: bold;}
.speed_icon{font-size: 18px; color: var(--main-color)}
ul.sum_unit_q {display: table; width: 100%}
ul.sum_unit_q li {display: table-row; color: #625454; font-size: 13px;}
ul.sum_unit_q li>div {display: table-cell; text-align: right; padding: 2px 0; border-bottom: 1px dotted #6f5454}
ul.sum_unit_q li:last-child>div {border-bottom: 0px}
ul.sum_unit_q li>div:nth-child(1){width:10%}
ul.sum_unit_q li>div:nth-child(2){width:10%;vertical-align: bottom;}
ul.sum_unit_q li>div:nth-child(5){text-align: left}

/*end stas view*/

/*teacher_unit_group_view*/
.radio_container{margin: 6px 2px; margin-left: 2px;font-weight: normal !important; font-size: 14px}
/*.radio_container input[type="radio"] + span {margin-right: 10px; margin-left: 10px;}
.radio_container input[type="radio"] + span::before{right:12px; top:initial}*/
.calendar{color:var(--main-color); font-size: 25px; padding: 2px 13px 0px 5px; position:absolute; pointer-events: none; top:8px; right:0px; }

input.datepickall, input.timepickall{ -webkit-appearance: none; -moz-appearance: none; appearance: none;
                                        border:0; font-size:18px; font-family:'Alef Hebrew';
             background-color:white; height: 45px;margin-bottom:0px !important; width: 260px !important; display:inline-block !important; text-align:left; padding-left:5px;}
#change_date_btn {top: 39px; left: 0; position: absolute;}


#link_to_all_class h4{margin:10px 0px 5px 0px}
#link_to_group_msg {padding: 7px;text-align: right; font:14px/18px Alef;}
#link_to_subtreee{height:170px; resize: none;  border: 1px solid #d4d1af; font-size:15px}

#due_date_reminder{text-align:right; padding: 7px 10px}

#due_date_all.emph{
    border: 2px solid var(--main-color);
    animation: blink 2s;
    animation-iteration-count: 3;
}

@keyframes blink { 50% { border-color:#fff ; }  }

@keyframes sweep {
      0%    {opacity: 0; margin-right: -10px}
      100%  {opacity: 1; margin-right: 0px}
    }

@media screen and (max-width: 414px) {
    #question_form_div{width:100%}
}
/*end teacher_unit_group_view*/


/*class_linked_groups_view*/
.flex_container .fn_btn{margin: 3px 5px; width: 95px; height: 25px; line-height: 14px; text-transform:capitalize}
.flex_container .prev{width:95px;}
td.nowrap{white-space: nowrap}
tr td.w20,tr th.w20{width:20px}
tr td.w25,tr th.w25{width:25px}
tr td.w45,tr th.w45{width:45px}
tr td.w65,tr th.w65{width:65px}
tr td.w85,tr th.w85{width:85px}
tr td.w100,tr th.w100{width:100px}
tr td.w140,tr th.w140{width:140px}
tr td.w250,tr th.w250{width:250px}
.data_table tr td.w400-300,tr th.w400-300{min-width:400px !important}

@media screen and (max-width: 480px) {
    .data_table tr td.w400-300,tr th.w400-300{min-width:300px !important}
}
#students_table tr td:nth-child(2),#students_table tr td:nth-child(3){text-align: right; padding-right:20px}
/*ul.dtr-details{columns: 2;-webkit-columns: 2; -moz-columns: 2; text-align: right}*/
ul.dtr-details li { margin:0px 10px; text-align: right; display: flex; justify-content: space-between; width: 100%; border-bottom: 1px dotted gray !important;}

thead tr td span.tooltip{color:white;}
.dtr-title span.tooltip{color:#404040;}
.bullet_num.prct_bullet{background-color: #707070;padding: 3px;width: 45px !important;height: 20px !important; border-radius: 7px}

.icon_badge{position: absolute;top: -15px;left: -10px;font-size: 20px;color: #7db11a;}

details.student_bullet_list {padding:0; margin: 2px 0}
details.student_bullet_list summary{cursor: pointer}
details.student_bullet_list summary::-webkit-details-marker {display:none;}
details.student_bullet_list > summary {list-style: none;}
.student_list{font-size: 14px; line-height: 16px}
.student_list li i {font-size: 8px;}
summary .bullet_num{border-radius: 7px; width:30px !important;}

span.dtr-data details{display: inline-block}
table.dataTable > tbody > tr.child ul.dtr-details > li:first-child{padding-top: 0.5em}

@media screen and (max-width: 1024px) {
#sorting_blurb {display: none}
}

.fn_btn.shade_down:hover{box-shadow: none}
.margin_horizon{margin-left: 2px;}
/*end class_linked_groups_view*/

/* student_view */
.switch_class_form{ box-sizing: border-box; border: 1px solid white;  width: 95%; max-width: 450px; background: #f0f0f0; margin: 15px auto 0;  padding: 1em; -moz-border-radius: 3px;  border-radius: 3px; position: relative;}
.switch_class_form label{line-height: 20px;  margin-left: 6px;  text-align: right;  display: block; font-weight: bold;}
.summer_tag_in_row{position:absolute !important;top:5px; left:5px; color:orange}
/* end student_view */

/* student header */
#welcome.hello_demo{display: block !important; width: auto; height: auto; position: absolute;}
#welcome.hello_lamdem{width:100%; text-align: center; right: auto}
#welcome.no_hamburger{right:auto}
#welcome.no_btns{right:65px}
/* end student header */

/*mystudents */
.mystudents_td{text-align:right !important; padding-right:8px !important}
/*end mystudents */

/* new year box */
.new_year_info_box{padding: 10px; margin-top: 10px;}
.new_year_info_box span{font-size: 18px; line-height: 22px;  margin-top: 10px;  font-weight: normal; display: block;}
.new_year_info_box .centered{background-color: var(--extra-light-color);  font-size: 20px;  font-weight: bold;  color: var(--main-color); padding: 10px 5px; }
/* end new year box */

/* details box */
.details_btn_box {transition: max-height 1s ease-in-out;}
.details_btn_box.closed{max-height: 45px; transition: max-height 1s ease-in-out;}
.details_btn_box summary{position: relative;z-index:102;text-align: center; margin: 4px auto 7px; border-radius: 8px;
    background: var(--color-tree-2); color: var(--main-color); padding: 2px;
    max-width:90%
}
.details_btn_box summary i{margin-left:4px}
.details_btn_box .details_content{margin:-35px auto 5px; padding:35px 7px 10px 7px; color:#4f4e4e; z-index:101;position:relative; border-radius:7px; background-color: #ffffff;}
.details_btn_box[open] summary {border-radius: 0 0 8px 8px; box-shadow: none;}

/* toggle switch */
.switch-field {
    display: flex;
    overflow: hidden;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
    background-color: #e4e4e4;
    color: rgba(0, 0, 0, 0.6);
    font-size: 13px;
    line-height: 21px !important;
    text-align: center;
    padding: 8px 4px;
    margin-left: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
    font-weight: normal;
    width:50%;
    display:flex;
    justify-content: center;
    align-items: center;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
    background-color: var(--main-color);
    box-shadow: none;
    color: #ffffff; font-weight: bold;
}

.switch-field input:checked[disabled] + label {
    background-color: #7f8080;
}

.switch-field label:first-of-type {
    border-radius: 0 4px 4px 0;
}

.switch-field label:last-of-type {
    border-radius: 4px 0 0 4px;
}
.switch-field input:checked + label.warn{background-color: red}
/* end toggle switch */

/*hedgehog stuff*/
.hedgehog-tip{display: flex; justify-content: center }
.hedgehog-tip img, .hedgehog-tip svg{height: 2em; vertical-align: top; margin-top:0.9em;}
.hedgehog-tip i.fa-hedgehog {font-size:2.5em;margin-top:0.2em;margin-left:0.2em;}
.hedgehog-tip svg{transform: scaleX(-1);}
.hedgehog-tip>.arrow_box{width: calc(100% - 70px); margin:0 auto 20px; padding-bottom: 35px}

@media screen and (max-width: 414px) {
    .hedgehog-tip>.arrow_box{padding-bottom: 55px}
}

.hedgehog_bottom_msg{position:absolute;bottom:0;right: 0px;width: 100%; border-radius: 0 0 9px 9px; background-color: aliceblue;font-size: 0.8em;font-weight: bold;}

.arrow_box {
	position: relative;
	background: #ffffff;
	border: 1px solid #878c92;
	border-radius: 10px;
	padding: 5px 7px
}
.arrow_box:after, .arrow_box:before {
	left: 100%;
	top: 2em;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box:after {
	border-color: rgba(245, 245, 246, 0);
	border-left-color: #ffffff;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box:before {
	border-color: rgba(135, 140, 146, 0);
	border-left-color: #878c92;
	border-width: 11px;
	margin-top: -11px;
}

/*end hedgehog stuff*/


/* meta_unit_monitor_row */
.feedback_btns{	display:flex;justify-content:start; align-items: center; margin-top:4px; font-weight:bold; font-size:15px; color:#707070; line-height:14px; white-space: nowrap;}

.alt_q_opener{ display: inline-block; position: absolute; right: -6px; top: -9px; background-color: #cfd4d8; border-radius: 50%; width: 20px; line-height:20px; font-size: 14px }
.alt_q_opener i {color: #585959 !important;}

.alt_q_opener.correct  {background-color: #e9f6e4; border: 1px solid #80b546}
.alt_q_opener.correct i{color: #008000 !important}

.alt_q_opener.wrong  {background-color: #FFEBF1; border: 1px solid #fe4d69}
.alt_q_opener.wrong i{color: #db001b !important}

.alt_q_opener:hover {background-color: var(--main-color); border-color:var(--main-color); box-shadow: none}
.alt_q_opener:hover i {color:white !important}

.hazana_tag{position: absolute;bottom: 3px;right: 5px;font-size: 14px;}
.fn_btn.q_btn{width:40px;height:29px; display: flex; align-items: center;justify-content: center;}
.q_btn img {height:13px}
/* end meta_unit_monitor_row */


/* lang select */
.subMenu_pop_lang,.subMenu_pop_messages,.subMenu_pop_book,.subMenu_pop_solutions{display: none; position: absolute;  left: 0;  right: 0;  top: 100%;  width: 180px;  padding: 12px 16px 16px;   background-color: #ffffff;
box-shadow: -15px 15px 15px -15px rgb(0 0 0 / 50%);   direction: rtl; z-index: 11; font-size: 16px;}
.subMenu_pop_book{width: 300px;}
.subMenu_pop_solutions{width: 180px;}
.subMenu_pop_lang[aria-hidden="false"]{display: block;}
.subMenu_pop_lang a, .subMenu_pop_messages a, .subMenu_pop_book a, .subMenu_pop_solutions a{color: var(--main-color); width: 100%; text-align: right;}
.subMenu_pop_book a{line-height: 15px;}
.subMenu_pop_lang a:hover, .subMenu_pop_messages a:hover, .subMenu_pop_book a:hover,.subMenu_pop_solutions a:hover{background-color:  var(--extra-light-color);}
.subMenu_pop_lang li:hover,.subMenu_pop_demo a:hover,.subMenu_pop_messages li:hover, .subMenu_pop_book li:hover, .subMenu_pop_solutions li:hover{background-color: var(--extra-light-color); cursor: pointer;}
.subMenu_pop_lang li , .subMenu_pop_messages li, .subMenu_pop_book li, .subMenu_pop_solutions li{border-top: 1px solid var(--light-color); padding: 5px;}
.subMenu_pop_lang li:nth-child(1), .subMenu_pop_messages li:nth-child(1), .subMenu_pop_book li:nth-child(1), .subMenu_pop_solutions li:nth-child(1){border-top: 0;}
.user_active_lang, .user_active_book{color: var(--secondary-color) !important;}


/* כפתור מחיקת פתרון שאלה בעמוד יחידה של תלמיד  */
.trash-q{position: absolute;top: 5px;left: 8px;
    color: #fff;background-color: var(--secondary-color);
    font-size: 15px;font-weight: bold;padding: 8px;
    border-radius: 4px;float: left; line-height: 1;}
.trash-q:hover{color: var(--secondary-color); background-color:#fff;cursor:pointer;}

/* .trash-q a:hover{color: var(--first-color); border: #000000;} */

/* תצוגת סטטיקות שענו על שאלה */
.students_opt_counter,.exp_feedback_counter{position: absolute;display: inline-block; background-color: #f8f3d6;border: 1px solid #8d6d59;border-radius: 4px;padding: 2px 4px;font-size: 10px;line-height: 10px;white-space: nowrap;}
.students_opt_counter{ bottom:-10px; left:-10px; }

/* כפתור לתצוגה מקדימה שאלת קלאסטר */
.cluster_answer_container{text-align: left; margin-bottom: 7px;}
.cluster_answer_btn{margin: 0 0 0 7px; padding:7px; line-height: 32px;background-color: var(--color-pink); font-weight:400; font-size:14px;}
.cluster_answer_btn:hover{background-color: var(--main-color) !important; color: #ffffff !important;}
.qcluster_header .debug_id {position:absolute; left:3px; top:-11px; color:grey; font-size:10px}

.feedback_btns a{position:relative;}
.feedback_btns a>i{position: absolute; top: -11px;left: 25px; border-radius: 50%;width: 17px;height: 17px; line-height: 17px; text-align: center;font-size:1.3em}
.feedback_btns a>i:first-child{left:5px}
.feedback_btns a>i.chat_tag, .feedback_container i.chat_tag{color:#7eb341}
.feedback_btns a>i.ranking_tag, .feedback_container i.ranking_tag{color:#fdcb31}
.feedback_container{display: flex; justify-content: space-around; flex-direction: row; flex-wrap: wrap; margin:10px;font-size:15px;margin-bottom: 20px;}
.feedback_container .student_feedback_rank {background-color: var(--extra-light-color);box-shadow: var(--box-shade-down);max-width:500px;border-radius: 9px;padding:0 15px 5px 15px}
.rank_text{display:flex; justify-content: space-between; margin-bottom: 10px}
@media screen and (max-width: 640px) {
    .feedback_container{flex-direction: column;}
    .feedback_container>div, .feedback_container .forum_div{width: calc(100vw - 60px);max-width: 500px !important;margin: 0 0 20px 10px;}
}

.feedback_container .forum_div{background-color: var(--extra-light-color);box-shadow: var(--box-shade-down);border-radius: 9px;max-width:calc(100vw - 60px)}
.feedback_container .forum_title, .feedback_container h3{background-color: inherit; text-align:start; font-size: 14px;color: var(--main-color);border-bottom: 1px solid var(--main-color);padding-bottom: 5px;padding-top: 5px;}
.feedback_container .forum_bottom_div{background-color: transparent}
.feedback_container .forum_title {padding-right:20px; position:relative;}
.feedback_container .forum_title::before{position:absolute;right: 0px;content:"\f075";font-family:var(--font-awesome); color:#7eb341;transform: scaleX(-1)}

.feedback_container .bullets_list{text-align: start; font-size:15px}

/* toast modal */
#ofirModal_toast_msg{border-radius: 100px;}
#ofirModal_toast_msg .ofirModalCloseBtn  {display: none;}
#ofirModal_toast_msg .ofirModal_content{margin: 5px 10px !important;}

/*tests - פיצ׳ר מבחנים*/
:root {
    --color-a:#4b206b;
    --color-a-medium: #aa8bc9;
    --color-a-light: #f4e9fe;
    --color-b: #a294f9;
    --color-b-medium: #cdc1ff;
    --color-b-light: #f5efff;
    --color-c: #171FA3;
}

#test_timer_box{position: absolute; top: 4px; right: 4px; border: 1px solid #999999; padding: 2px 6px; border-radius: 4px; color: #999999;}
#test_timer_box.warning{border-color:var(--color-pinky)}
#test_timer_box.final_warning{position:sticky;z-index: 1000;width: 100px; margin-right: calc(100% - 130px); border-color: var(--color-fail-dark); background-color: var(--color-fail-dark); color: white; font-weight: bold;}

.exam_page h1{color:var(--color-a); text-align:center}
.exam_page h2{background-color: var(--color-a);color:white; padding: 0; margin: 50px 0 0 0; line-height: 35px;font-weight:bold; border-radius: 10px 10px 0 0}
.exam_page h3{background-color: var(--color-a-light);color: var(--color-a);margin: 0; border-bottom: 2px solid;font-size: 15px; font-weight:bold; line-height:25px;}
.exam_page .section_details{display: block;text-align:center;color:var(--color-text);font-weight:normal; border-top:1px dotted var(--color-a-medium);}
.exam_page .text_msg{width:100%; padding:10px 20px; border-right:10px solid var(--color-a-medium); background-color:var(--color-a-light); border-radius: 0 30px 0 0; border-top:2px solid var(--color-a-medium)}
.num_of_q_to_answer{padding-right:20px}

.section_container > .section_opener {display: none;}

.section_container:not(:only-child) > .section_opener {display: block;}

.section_intro{margin-bottom:20px}

.exam_page .qcluster{margin-bottom:10px;width: 100% !important;}
.exam_page .qcluster_content{border-color: var(--color-a-medium); border-radius: 0 0 10px 10px;}
.exam_page .qcluster_questions .qItem {border-radius: 0 0 10px 10px; padding-bottom:20px}
.exam_page .qcluster_header{border-right-color:var(--color-a-medium);border-left-color:var(--color-a-medium);cursor:pointer}
.exam_page .qcluster_header.is_open{border-radius:10px 10px 0 0}

.exam_page .qcluster_header .points_span{font-weight:normal; margin-right:10px; font-size:0.8em}

.exam_page .qItem .callForAction{border-radius:20px; background-color:var(--color-a); padding:7px 12px; box-shadow: var(--box-shade-down);}
.qcluster_toggler{position:absolute; left:9px; top:12px}

.qcluster_questions .qItem{border:none}
.qcluster_content .qItem:before{position:absolute; top:25px;font-family:var(--font-awesome);content:"\f303"; font-weight:300; color:var(--step-done-light)}
.qcluster_content .qItem.unsolved:before{content:""}

.qcluster_header.solved:before,.qcluster_header.partially_solved:before{
    position:absolute;top: -8px; right: -4px;padding: 0 5px; border-radius: 5px;
  font-size: 11px;line-height: 14px;}


.exam_page .qcluster_questions .qItem .q_head{color: var(--color-a);border-bottom: 4px solid var(--color-peach); background-color: transparent;}
.q_score{float:left; padding-left:6px; font-weight:normal; font-size:14px;}
.exam_page .q_mark{width: 80%; max-width: 300px; margin: auto;}

.delete_q{padding:0; margin:0;}
.delete_q>div{background-color: #faeef1;margin: 0 -23px;width: calc(100% + 23px);padding: 0 7px 10px;font-size: 15px;line-height: 22px;font-weight: normal;text-align: end;border-bottom:1px solid}
.delete_q p{text-align: center;width: 100%;display: inline-block; margin: 0;}
.delete_q summary{position: absolute;left: 5px;top: 14px;display: inline-block;width: 30px; line-height: 25px;padding: 0; border-radius: 20px; font-size: 16px; text-align: center;}
.delete_q summary:hover{background-color:var(--color-a); color:white}
.delete_q summary:hover i{font-weight:bold !important}
.delete_q[open] summary i:before{content:'\f077' !important}
.del_button{display:inline-block;min-width: 100px; text-align: center;background-color:var(--step-fail-dark); color:white; font-size:14px; padding:0 10px; border-radius:20px; font-weight:bold}
.del_button i{margin:0px 0px 0px 7px}
.del_button:hover{font-weight:bold;background-color: red;}
.del_button:hover i{font-weight:bold !important}
#msg_div ul{list-style:disc; margin:0 19px 0px 5px}
#msg_div ul li{padding-right:10px}
.two_buttons{display:flex; justify-content:space-between;max-width: 400px; margin: auto; padding:7px 0 15px}
.two_buttons button i{margin-left:7px}

.qcluster_content .q_stats{display: none}

.qcluster_closer{position:sticky; bottom:50px; font-size:13px; width:100%; text-align:end}
.qcluster_closer>span{display:inline-block;background:var(--color-a-medium);color:white; font-weight:bold;padding:0 5px;cursor:pointer; border-radius:0 0 0 7px}

.sortable-design li i.sort_handle{color:var(--color-a)}
.opt_content.grid_opt input:checked + span + .radio_content{border-color: var(--color-a);background-color:var(--color-a-light)}
.radio_container input[type="radio"]:checked + span::before {background-color:var(--color-a);box-shadow: inset 0 0 0 4px var(--color-a-light);}

.well_done_end_test{color:var(--color-a); text-align:center; font-size:20px}
.well_done_end_test i{font-size:40px;}

.title_icon_ball{display:inline-block;margin: 0 5px 3px 5px; border-radius: 50%;width: 30px;height: 30px;line-height: 30px;text-align: center;
    background: #FFFFFF;
    background: -moz-radial-gradient(center, #FFFFFF 0%, #FFFFFF 36%, #B2B2B2 100%);
    background: -webkit-radial-gradient(center, #FFFFFF 0%, #FFFFFF 36%, #B2B2B2 100%);
    background: radial-gradient(ellipse at center, #FFFFFF 0%, #FFFFFF 36%, #B2B2B2 100%);}

.medal_wrap {position: relative;display: inline-block;margin: 10px;transition: transform 0.3s ease;color: #521c12;}
.medal_wrap:hover {transform: scale(1.1) rotate(-2deg);z-index: 2;}

.medal {display: flex;align-items: center;justify-content: center; margin:auto; border-radius: 50%;width: 90px; height: 90px;  overflow: hidden;  background: radial-gradient(circle at 30% 30%, #fffbe6, #ffd700);
  border: 2px solid #F5F5DC; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 8px #fff7b2; position: relative; animation: medal-glow 3s ease-in-out infinite alternate;
}

.medal-count {position: absolute;z-index:2;top: -4px;left: -3px;display: inline-block;border-radius: 50%;font-size: 14px;width: 1.5rem;
  height: 1.5rem;line-height: 1.5rem;text-align: center;background: #ffd700;font-weight: bold;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  animation: pulse 2s infinite;
}
.medal img {width: 90px;height: 90px;object-fit: cover;filter: drop-shadow(0 0 2px #fffbe6);}
.medal-label {display: block;margin-top: 6px;text-align: center;font-size: 14px;font-weight: bold;}

.medal_wrap.sm .medal, .medal_wrap.sm img{width: 50px; height: 50px;}
.medal_wrap.sm .medal-label{font-size:12px}

.edu_login{position:relative; height:40px}
.edu_login>div{position:absolute; width:100%;text-align: center;}
.edu_login a{padding: 3px; color: var(--color-text); background-color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50px; text-decoration: none; font-weight: bold; max-width:300px; margin:auto;box-shadow: var(--box-shade-down);}
.edu_login a:hover{color: var(--main-color);box-shadow:none; border:1px solid var(--main-color);}
.edu_login img{max-height: 35px; margin:0 5px}
.edu_login_activated{border: 1px solid var(--color-ok-light); padding: 10px; margin: 10px 0; text-align: center; color: var(--color-ok-light); background-color: #fff;border-radius: 5px; font-weight: bold; }
.edu_login_activated i {color: var(--green-dark); font-size: 35px;}