:root {
    --inactive: #396672; 
    --inactive_hover: #60919e;
    --active: #ff8833;
    --active_hover: #ffbc6c;
    --title1: #ffbc6c;
    --title2: #ffb3b3;
    --title3: #92ed94;
    --white_hover: #CCC;
}


/**************/
/* Body Stuff */ 
/**************/
body {height:100%;background: linear-gradient(30deg, #0f748e, #6be2fe) fixed;}
div,p{text-align:right;}
.page_content{padding-top:40px;padding-bottom:30px;}
#all_page{}
.row{} 
#background_image{z-index: -100;position: absolute;top:0;}
/*****/


/********************/
/*      Option Selection     */
/********************/
.option_selection{
    padding: 10px 0;
}
.option_selection_item{
    padding: 0 10px;
    display: inline-block;
}
.option_selection_item_active{
    font-weight: bold;
}
/*****/





/******************/
/* Header related */ 
/******************/
#header_logo{
    position: relative;
    top: 20px;
    height:100px;
    /*
    background-color:white;
    padding: 6px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);*/
}
.navbar {
    height:60px;
    padding-right:0;
    padding-left:0;
    color:white;
    position:fixed !important;
    width:100%;
}
.nav-link{
    margin: 0 10px;
    text-align: center;
    cursor:pointer;
}
.navbar-color{
    background-color: var(--inactive) ;
    height:60px;
    border-radius: 0 0 0 8px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.dropdown-menu{
    text-align: right;
    padding-right: 5px;
    text-align: right !important; /* ORR: Added by Orit */
}
.dropdown-toggle{
    color:white;
}
.dropdown-toggle:hover{
    color:white;
}
/*****/






/*******************/
/* context related */
/*******************/
.context{
}
.context_title{
    color:white;
    text-align: center;
    font-weight: bold;
    font-size:35px;
    line-height: 35px;
}
.context_title2{
    color:white;
    text-align: center;
    font-size:25px;
    margin-bottom:5px;
}
.context_title3{
    color:white;
    text-align: center;
    font-size:15px;
}
.context_text{
    color:#222;
    text-align: center;
    padding-top:20px;
    font-size:14px;
}
.context_image_right{
    float:right;
    height: 180px;
    margin:auto;
}
.context_image_left{
    float:left;
    height: 180px;
    margin:auto;
}
/*********/





/*******************/
/* All Box Related */
/*******************/
.box{
    margin-top: 30px;
    background-color:white;
    border-radius: 8px;
    padding-bottom: 30px;    
    text-align: right;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.box_title{
    text-align: right;
    line-height: 35px;
    height:50px;
    font-weight: bold;
    font-size:18px;
    padding: 5px 30px;
    border-radius: 8px 8px 0 0 ;
    border-bottom: 5px solid rgba(0,0,0,0.1);
}
.box_title_1{
    height:50px;
    background-color: var(--title1);
}
.box_title_2{
    background-color: var(--title2);
}
.box_title_3{
    background-color: var(--title3);
}
.box_title > img{
    height: 35px;
    padding-left:10px;
    color:white;
}
.box_title_close{
    float:left;
}
.box_content{
  padding-top: 30px;
}
/*********/






/*********************/
/* Task tree related */
/*********************/
div.categories{
    max-width: 25%;
    display: inline-block;
    float:right;
    text-align: right;
    padding-right:10px;
    padding-left: 20px;
}
div.category{
    font-size:16px;
    margin: 5px 0 10px 0;
    padding-right: 6px;
    padding-left: 10px;
    cursor:pointer;
}
div.active_category{
    font-weight:bold;
    background-color: var(--active);
}

div.category:hover { background-color:var(--title1);}
div.tasks{
    display: grid;
    grid-gap: 20px 10px;
    grid-template-columns: 32% 32% 32%;
    cursor: pointer;
}
div.tasks_mini{grid-template-columns: 50% 50%;}
div.tasks_4{
  grid-gap: 10px;
  grid-template-columns: 24% 24% 24% 24%;
}

div.task_1{grid-template-columns: auto;}

.card-img-top{
    height:150px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

div.card_category_ribbon{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 50%;
  overflow: hidden;
}

div.card_category_ribbon_text{
    font-size: 16px;
    transform: translateY(-10%) translateX(1px) rotate(-45deg);
    margin-top: 20px;
    width: 150%;
    text-align: center;
    background-color: var(--active);
}

.card hr{
    margin:0;
}
.task_card{
    border-radius: 8px;
    background-color:rgb(0,0,0,0.05);
}
.task_title{
    text-align:center;
    position: absolute;
    bottom: -18px;
    left: 8%;
    right: 8%;
    padding: 5px;
    font-size: 12px;
    font-weight: 500;
    color:white;
    background-color: var(--inactive);
}

div.task_status{
  height:27px;
  width:12px;
  background-color:var(--boxes_bgcolor_light);
}

div.task_right_status{right:1%;}
div.task_left_status{right:93%;}


.task_button{
    height:100%;
    line-height: 10px;
    color:white;
    font-size: 13px;
    width:100%;
    display: inline-block;
    padding:10px;
    background-color: var(--inactive);
}
.task_button_right{
    border-radius: 0 5px 5px 0;
}
.task_button_left{
    border-radius: 5px 0 0 5px;
}
.task_button:hover{
    background-color: var(--inactive_hover);
    transition: background-color 100ms linear;
}
.task_button img{
    height:20px;
    margin:auto;
}
.task_button_active{
    background-color: var(--active) !important;
}
.task_button_active:hover {
    background-color: var(--active_hover);
    transition: background-color 100ms linear;
}
.task_mini .card-img-top{
    border-radius: 8px;
    border: 1px solid #CCC;
}
.task_mini{
  margin-bottom: 18px;
}
.task_mini:hover{
    background-color: var(--white_hover);
    transition: background-color 100ms linear;
}
.open_task{
    background-color: var(--title1);
    color:black;
}
.open_task:hover{
    background-color: var(--active);
    color:black;
}

/*******/


/****************************/
/* Level and Grade Selector */
/****************************/
.level_selector{
    padding-bottom: 30px;
    text-align: center;
}
.level {
    font-size: 18px;
    padding: 3px 8px;
    cursor: pointer;
    border: 1px solid var(--gray);
    width:150px;
}

.level:hover{ background-color:var(--title1); }

.active_level{
    font-weight: bold;
    color:black;
    background-color:var(--active);
    /*border-bottom: 3px solid black;*/
}
/*******/






/**********************/
/* Task table related */
/**********************/

.task_table {
    border-collapse: collapse;
}
.task_table td, .task_table th {
    padding: 8px;
}
.task_table_head{
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid black;
}
.task_table_head:hover{
    background-color: var(--white_hover);
}
.task_table_cell{
    cursor: pointer;
    min-width: 150px;
}
.task_table_right{
    text-align: right;
    padding: 10px 10px 0 15px;
	border-radius: 0 12px 12px 0;
	cursor:pointer;
}

td .task_closed{
    text-align: center;
    font-size: 15px;
}
td .task_open{
    font-size: 13px;
}
td .my_task_open{
    font-size: 13px;
}

.has_tooltip     {
    position: relative;
}
.has_tooltip .tooltip {
    visibility: hidden;
    width: 200px;
    background-color: #6be2fe;
    text-align: right;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left: 70%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
}
.has_tooltip:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.checkbox{
  width: 26px;
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 auto;
}
.checkbox_on{
  background-color: var(--newapp_green);
  background-image: url("/static/images/svg/V.png");
  background-repeat: no-repeat;
  background-position: center; 
}
.checkbox_on:hover{
  background-color: var(--active_hover);
}
.checkbox_off{
  background-color: var(--newapp_grey);
}
.checkbox_off:hover{
  background-color:   var(--active_hover);
}

/*.checkbox_modified { background-color:yellow;}*/

.checkbox_not_mine
{ 
  background-color: var(--newapp_grey);
  border: 2px solid var(--newapp_green);
}

.checkbox_del{
  background-color: var(--newapp_grey);
}
.checkbox_del:hover{
  background-color:  var(--active_hover);
  background-repeat: no-repeat;
  background-position: center; 
}


.table_set_height{
  height:43px;
}

tr.tr_new_row{}   /*background-color:var(--active) !important;*/

#tasks_table_table td:first-child{
	padding-right: 50px;
}
#tasks_table_table th:first-child{
	padding-right: 50px;
}

div.tasks_table_list{
	float:right;
	border-left: 1px solid #999;
}

.tasks_table_left_side{overflow:auto;}

.task_in_progress, .new_task_in_table{background-color:var(--dali_correct_color);}
                 .vl{   border-left: 1px solid grey;}/* height: 500px;}*/
div.task_table_head{   cursor:pointer; padding: 8px 6px 8px 15px; font-weight: 500;}
        div.tr_hover{   background-color:var(--active_hover);}
         tr.tr_hover{   background-color: #EEE !important;}
       
/*******/




/*******************/
/*  Progress Bar   */
/*******************/
.progress{
    margin: 5px 0;
    height: 8px;
    background-color: lightgray;
}
.progress-bar-value{
    background-color: var(--active);
}
/*****/



/*******************/
/*  Footer related */
/*******************/
.footer {
    background-color:white;
    border-radius: 8px 8px 0 0;
    padding: 5px 0;
    margin:auto;
    bottom: 0;
}
.footer_part{
    border-left: 1px solid #ACACAC;
    height:100%;
}
/*****/






/**********************/
/* Font Awesome Icons */
/**********************/
.fa {
    color:red;
}
/*****/






/********************/
/* Class List Icons */
/********************/
.class_btn{
    margin: 0 3px;
    min-width: 100px;
    border:none;
    background-color: var(--inactive);
}
.class_btn:hover{
    background-color: var(--inactive_hover);
}
.class_btn_active{
    background-color: var(--active);
}
.class_btn_active:hover{
    background-color: var(--active_hover);
}
/*****/







/********************/
/*      Actions     */
/********************/
.page_actions{
    z-index: -1;
    margin-top: 15px;
    display:flex;
    justify-content: center;
}
.page_action ,.page_action_single{
    border-right: 2px solid lightgray;
    min-width:15%;
    background-color:white;
    text-align: center;
    padding: 6px;
    padding-bottom: 12px;
    cursor: pointer;
    border: none;
    border-radius: 0 8px 8px 0;
    margin:3px;
    width: 150px;
}
.page_action:hover, .page_action_single:hover{
    background-color: var(--title1);
    transition: background-color 100ms linear;
}
.page_action_active{
    background-color: var(--title1);
    border-bottom:12px solid rgba(0,0,0,0.16);
}
.page_action_active:hover{
    background-color: var(--active_hover);
    transition: background-color 100ms linear;
}
.page_action img, .page_action_single img{
    height: 20px;
}

.page_action ~ .page_action{

    border-right: 2px solid lightgray;
    border-radius: 0 0 0 0;
}

.page_action:last-of-type {
    border-radius: 8px 0 0 8px;
}
.action_extra_component .box{
    position:relative;
    margin-top:-8px;
    z-index:1;
}

.page_actions_class_page .page_action{
  margin:3px;
  width:150px;
}

.action_extra_component .box .box_title {
  background-color: var(--title1);
}

.page_action_single1{
    border:none;
    border-radius: 8px;
    margin: 0 10px;
}
/*****/

.class_page_task{
  margin-top: 12px;
  line-height: 14px;
  cursor: pointer;
}
.class_page_task_name{
  font-size: 18px;
}
.class_page_task_date{
  font-size: 13px;
}


.lone_button{
    display: inline-block;
    padding:5px 15px;
    border: 1px solid gray;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    background-color: white;
    margin:6px;
}
.lone_button:hover{
    background-color: var(--white_hover);
    transition: background-color 100ms linear;
}


div.selected_class{background-color:blue;}
div.task_page_task_details{border:1px solid lightgreen;padding:20px;margin:5px;}
div.half_page_div{width:500px;}
div.box_internal_data{padding:10px;}
input.regularlink{cursor: pointer;}







/************************************************/
/************************************************/
/**** MIX APP ***********************************/
/************************************************/
/************************************************/




#content{
    padding-top:67px;
    z-index:-1;
}

.page_content{
    padding-top:0px;
    padding-bottom:0px;
}
    

#header{
  background-color:var(--inactive);
  border-radius: 0 0 0 8px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top:0;
  width: 1160px;
  height: 60px;
  padding: 20px 0;
}

#header_logo{
  position:absolute;
  right:0;
  top:0;
}


#header a{margin: 0 10px;color:white;}

/*ORR: Orit changed it otherwise, the dropdown was white on white */
a.dropdown{color: black !important;}

#header_right{ float:right; margin-right:120px;}
body[school_lang=english] * #header_right{float:left;}
#header_left{float:left; margin-left:30px;}
body[school_lang=english] * #header_left{display:none;}

.box_title{display:none;}
.box{box-shadow: none;margin: auto;padding-bottom: 0;}
.context_title2, .context_title{color: black;}
.page_actions{margin-bottom: 30px;}
.page_action, .page_action_single{border:1px solid #888;font-size: 13px;padding: 5px;}
.action_extra_component .box{position:static;margin-top:auto;}


/************************************************/
/************************************************/
/**** CHANGES TO OLD WEBSITE CSS ****************/
/************************************************/
/************************************************/

#game_details_div, #group_badges_div{
  background-color:white;
  border:none;
  border-radius: 5px;
  padding: 6px;
  margin-top:0;
}
/*#game_head_div p {text-align:center;} */
#game_details_area p, #game_details_area input, #game_inclass_buttons_div, #start_game_buttons  {text-align:center;}

#game_level_span{
  float:left;
  line-height:1;
}

.sidebarDiv, #send_recommend_div, #send_comment_div, #dali_links_div, #student_survey_div, #footer_menu{
  background-color: var(--inactive);
  border:none;
  border-radius: 5px;
  margin-top: 12px;
}

#group_badges_div{
  margin-top: 12px;
  padding: 6px 12px;
}

.highligh_footer_menu, .left_border_footer_menu, .right_border_footer_menu{
  color:#CCC;
}

.highligh_footer_menu:hover, .left_border_footer_menu:hover, .right_border_footer_menu:hover{
  color:white;
}
  
#question_area{
  border:none;
  border-radius: 8px;
}

.username{
  margin: 0.5rem 0;
}

#tip_header_div img{
   vertical-align: middle;
}

span.tip_header_span{
  vertical-align: middle;
  position: static;
  top: auto;
}

.tip_header{
  padding:0 30px;
}

#news_feed{
  overflow: hidden;
}

.ui-progressbar-value{ box-sizing:unset;}
div.progres_bar{top:-20px;box-sizing:unset;}

/*
img.news_icon{
    position: absolute;
    top: 132px;
    right: 35px;
}
*/

.p2k16pt .regularlink {
  display: inline-block;
  background-color: var(--inactive);
  border:none;
  border-radius: 5px;
  color:white;
  margin:5px;
}

.p2k16pt .regularhighlightlink {
  display: inline-block;
  background-color: var(--active);
  border:none;
  border-radius: 5px;
  color:black;
  margin:5px;
}

.p2k16pt .staffregularlink   {
  display: inline-block;
  background-color: tomato;
  border:none;
  border-radius: 5px;
  color:black;
  margin:5px;
}

table.bluetable{
  background: none;
  border: none;
}

tr.bluetable{
  border: none;
}

thead.bluetable th.bluetable, tfoot.bluetable th.bluetable{
  background: none;
  color:black;
  border: 1px solid var(--active);
}

tbody tr:hover.bluetable {
  border:none;
  background-color: var(--active_hover);
}

caption.bluetable{
  background-color: var(--inactive_hover);
  color:white;
  border:none;
  font-size: 20px;
}

.notification{border-radius:8px;box-sizing:unset;}