/* ************************************************************
 * RSQ Tool
*************************************************************** */

/* ****************************************
 * General
******************************************* */
.has-error{}
.has-error label{color:#721c24;}
.has-error .form-control{border-color:#721c24;}


.bg-primary-25{background-color:rgb(202,207,211);}
.bg-primary-10{background-color:rgb(224,226,229);}

pre {border:1px solid rgb(220,220,220); background-color:rgb(245,245,245); border-radius:2px; margin:10px; padding:10px;}


/* ********************************************************************************
 * TEMPLATE ELEMENTS
*********************************************************************************** */
/* navbar / header*/
#page_header{margin-bottom:2em;}

/* Logo */
.navbar-brand img{width:80px; height:auto;}
#login_status_text{}


/* Language selector */
#language_selection_row{ text-align:right; }
#language_selection_row #language_selector_title{float:right; display:inline; }
#language_selection_row #language_selector_title span{}
#language_selection_row #language_buttons{float:right;}
#language_selection_row #language_buttons button{}
#language_selection_row #language_buttons button .caret{}
#language_selection_row span.glyphicon{}

/* ********************************************************************************
 * Login page
*********************************************************************************** */
#footer button{margin: 0 !important;}

/* ********************************************************************************
 * Admin page
*********************************************************************************** */
#direct_link_field{background-color:transparent;}
#copied_to_clipboard_confirmation{display:none;}

.rsq_details_button{display:inline-block;}
.rsq_details_button.active{display:inline-block;}
.rsq_details_button.inactive{display:none;}

.login_details_button{display:inline-block;}
.login_details_button.active{display:inline-block;}
.login_details_button.inactive{display:none;}



/* ********************************************************************************
 * RSQ Form
*********************************************************************************** */
.rsq_start_help_text{display:block; font-size: 1.4em;}

#utility_box{margin-bottom:2em;}

#topic_tabs{display:flex; flex-wrap: nowrap; margin-bottom:2em; }
#topic_tabs > div{}
#topic_tabs .nav-pills .nav-link{border:1px solid #3498DB;}

.risk_awareness_level_box{opacity:0.1;}
.risk_awareness_level_box:hover{opacity:1;}
.risk_awareness_level_box.level_box_active{opacity:1;}

.level_button{border:1px solid white; color:white;}
.level_button.disabled{opacity:1;}
.level_button.risk_level_80_100{border-color:#900C3F; background-color:#900C3F;}
.level_button.risk_level_60_80{border-color:#C70039; background-color:#C70039;}
.level_button.risk_level_40_60{border-color:#FF5733; background-color:#FF5733;}
.level_button.risk_level_20_40{border-color:#FFC300; background-color:#FFC300;}
.level_button.risk_level_0_20{border-color:#90A955; background-color:#90A955;}
.level_button.risk_level_0{border-color:#9E9E9E; background-color:#9E9E9E;}

.level_button.awareness_level_0{border-color:#9E9E9E; background-color:#9E9E9E;}
.level_button.awareness_level_0_40{border-color:#C70039; background-color:#C70039;}
.level_button.awareness_level_40_60{border-color:#FF5733; background-color:#FF5733;}
.level_button.awareness_level_60_80{border-color:#FFC300; background-color:#FFC300;}
.level_button.awareness_level_80_100{border-color:#90A955; background-color:#90A955;}

.scenario_box{margin-bottom:40px;}
.tab-pane h3 span{padding:8px 32px;} 
.scenario_question{margin-top:25px;}
.scenario_number_box{display:inline-block; text-align:center; width:36px; height:36px; color:#343a40; font-size: 0.95em; padding:0; border:1px solid #343a40;  border-radius:50%;}

.interaction_box button{padding: 0;}

.risk_order{margin-left:40px; font-size:0.65em; color:white; background-color:#900C3F; }
.risk_order:hover{cursor:default;}
.risk_order.risk_order_1.btn.disabled{opacity:0.3; border-radius:16px;}
.risk_order.risk_order_2.btn.disabled{opacity:1; font-size: 1em; border-radius:22px;}
.risk_order.risk_order_3.btn.disabled{}
.risk_order span{display:inline-block; margin-left:6px;}

.risk{color:rgb(100,100,100); padding:0 0 0 30px;}
.risk i{font-size: 0.9em;}



#risk_implication_form button{background-color:white;}
#risk_implication_form button:hover{background-color:transparent; border-color:white;}

.modal-backdrop.show {
  opacity: 0.8;
}




/* ********************************************************************************
 * Priority page
*********************************************************************************** */
.priority_row{ padding:6px 0; margin:0; border-bottom:1px solid rgb(230,230,230);}
.priority_row.header{border:none; font-size:0.9em;}
.priority_row.header .column_priority{font-weight:normal;}

.priority_row:nth-child(even){background-color:rgb(240,240,240);}
.priority_row:nth-child(odd){background-color:;}

.priority_row .column_scenario_title{}
.priority_row .column_topic .scenario_no_box{width:24px; height:24px; display:inline-block; text-align:center; border:1px solid rgb(50,50,50); border-radius:50%;}
.priority_row .column_topic .scenario_no{display:block;}
.priority_row .column_user_answer{}
.priority_row .column_priority{text-align:center;}
.priority_row .column_priority .priority{display:inline-block; font-weight: bold; font-size: 1.2em; width:30px; height:30px; padding-top:2px;}
.priority_row .column_user_priority{text-align:center; }
.priority_row .user_priority_input{width:50%; margin:0 auto;}
.priority_row .user_priority_input[disabled]{color:#212529; border:none; background-color:transparent;}

.priority_row .column_user_priority .user_priorities_button{display:inline-block; padding:2px 4px; font-size: 0.9em;}
.priority_row .column_user_priority .user_priorities_button.active{display:inline-block;}
.priority_row .column_user_priority .user_priorities_button.inactive{display:none;}



/* ********************************************************************************
 * Comments page
*********************************************************************************** */
.comment_row{padding:6px 0; margin:0 0 10px 0; }
.comment_row:nth-child(even){}
.comment_row:nth-child(odd){}

.comment_row .heading_row{}

.comment_row .scenario_no_box{width:24px; height:24px; margin-right:5px; display:inline-block; text-align:center; border:1px solid rgb(50,50,50); border-radius:50%;}
.comment_row .scenario_no{display:inline-block;}

.comment_row form{display:inline; float:right;}
.comment_row .goto_button{}


/* ********************************************************************************
 * Graphics page
*********************************************************************************** */
.graphic_heading .scenario_no_box{width:40px; height:40px; margin-right:5px; display:inline-block; text-align:center; border:1px solid rgb(50,50,50); border-radius:50%;}
.graphic_heading .scenario_no{display:inline-block;}

.graphics_box {display:inline-block; position:relative; }
.graphics_box img{width:100%; height:auto;}

.graphics_box .action_button{position:absolute; top:0; left:0; background-color:white;}
.graphics_box .action_button:hover{background-color:#3498DB;}
.graphics_box .action_button_inactive{background-color:white;}
.graphics_box .action_button_active{background-color:#3498DB; color:white;}

.action_column_inactive{display:none;}
.action_column_active{display:block;}
.action_pane_inactive{display:none;}
.action_pane_active{display:block;}

.close_pane_button{float:right; font-size:2em; margin:-15px -15px 0 0;}
.close_pane_button:hover{cursor: pointer;}

.topic_scenario_box {text-align:center;}
.topic_scenario_box .scenario_no_box{width:40px; height:40px; margin-right:5px; display:inline-block; text-align:center; border:1px solid white; border-radius:50%;}
.topic_scenario_box .scenario_no{display:inline-block;}
.topic_scenario_box .scenario{display:inline-block;}
.topic_scenario_box .topic{display:inline-block;}

.action_title{margin:0 -1.25rem 1rem -1.25rem; padding:1rem 2rem;}
.action_text{padding:0 0 2rem 2rem;  margin-bottom:2rem;}



/* ********************************************************************************
 * RSQ instructions
*********************************************************************************** */
#modal_rsq_instructions{max-width:80%;}

#rsq_instructions h2{ margin-top:80px; }
#rsq_instructions img{ margin-bottom:10px; }


/* ********************************************************************************
 * Media Queries - Screensize
*********************************************************************************** */
@media (max-width: 767px){

}

@media (min-width: 768px) and (max-width: 991px) {
}


@media (min-width: 992px) and (max-width: 1199px) {
}

@media (min-width: 1200px) {
}




/* ********************************************************************************
 * Media Queries - Print
*********************************************************************************** */
@media print { 




	/* ********************************************************************************
	 * General
	*********************************************************************************** */
	.navbar{display:block;}
	#utilities_button{display:none;}
	#print_button{display:none;}
	#instructions_button{display:none;}
	#logout_button{display:none;}
	#utility_box{display:none;}
	#filter_buttons_box{display:none;}
	.spacer_column{display:none;}
	#footer{display:none;}

	/* ********************************************************************************
	 * RSQ page
	*********************************************************************************** */
	#topic_tabs{display:none;}
	.scenario_buttons_box{display:none;}
	.risk_awareness_level_box{display:none;}
	.risk_awareness_level_box.level_box_active{display:block;}
	.risk_order{}

	.scenario_box{page-break-inside: avoid;}

	/* ********************************************************************************
	 * Comments page
	*********************************************************************************** */

	/* ********************************************************************************
	 * Priorities page
	*********************************************************************************** */
	#priorities_list{margin-top:20px;}
	
	.priority_row .column_user_priority .user_priorities_button.active{display:none;}

}