/* ************************************************************
 * Mobilityweek - Registration System
*************************************************************** */
/* 

Color changes:  GN - 13.5.2022

Colors:
Main color: rgb(78,160,212) (light blue)
Text color:  #597ea2  (blueish grey)
Warning style: #FFD36E 
Alert style:  #D82148
BG light 10%:  #EDF5FB


Main Color all over:
#2c3e50  -> rgb(78,160,212)

Primary Button hover color:
#1a242f -> #597ea2

Warning stlye: ;
#f39c12 -> #FFD36E

Alert style: ;
#e74c3c -> #D82148

*/



/* ****************************************
 * General
******************************************* */

/* ****************************************
 * Button styles (primary host, warning ghost, etc)
******************************************* */

.btn-primary-ghost {
  color: rgb(78,160,212);
  background-color: transparent;
  border-color: rgb(78,160,212);
}

.btn-primary-ghost:hover,
.btn-primary-ghost:focus,
.btn-primary-ghost.focus,
.btn-primary-ghost:active,
.btn-primary-ghost.active {
  color: #ffffff;
  background-color: rgb(78,160,212);
  border-color: rgb(78,160,212);
}
.btn-primary-ghost:active,
.btn-primary-ghost.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}


.btn-warning-ghost {
  color: #FFD36E;
  background-color: transparent;
  border-color: #FFD36E;
}

.btn-warning-ghost:hover,
.btn-warning-ghost:focus,
.btn-warning-ghost.focus,
.btn-warning-ghost:active,
.btn-warning-ghost.active {
  color: #ffffff;
  background-color: #FFD36E;
  border-color: #FFD36E;
}
.btn-warning-ghost:active,
.btn-warning-ghost.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}


.btn-default-ghost {
  color: #597ea2;
  background-color: transparent;
  border-color: #597ea2;
}

.btn-default-ghost:hover,
.btn-default-ghost:focus,
.btn-default-ghost.focus,
.btn-default-ghost:active,
.btn-default-ghost.active {
  color: #ffffff;
  background-color: #597ea2;
  border-color: #597ea2;
}
.btn-default-ghost:active,
.btn-default-ghost.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}


.btn-navbar-ghost {
  color: white;
  background-color: transparent;
  border-color: white;
}

.btn-navbar-ghost:hover,
.btn-navbar-ghost:focus,
.btn-navbar-ghost.focus,
.btn-navbar-ghost:active,
.btn-navbar-ghost.active {
  color: rgb(78,160,212);
  background-color: white;
  border-color: white;
}
.btn-navbar-ghost:active,
.btn-navbar-ghost.active,
.open > .dropdown-toggle.btn-navbar {
  background-image: none;
}


.alert-danger-ghost{
  color: #D82148;
  background-color: transparent;
  border-color: #D82148;  
}

.alert-success-ghost{
  color: #18bc9c;
  background-color: transparent;
  border-color: #18bc9c;  
}


/* ****************************************
 * Form styles
******************************************* */
#mandatory_field_info{float:right;}

.form_heading{margin-top:50px;}
.form_button_group{margin-top:40px;}



/* ********************************************************************************
 * TEMPLATE ELEMENTS
*********************************************************************************** */
/* header - Login Usergroup */
nav.login_usergroup_NC{background-color:#d62c1a;}
nav.login_usergroup_NC #login_usergroup_NC_message{color:white; text-align:left; margin-top:10px;}

/* Logo */
#header_logo {min-height: 100px;}
#header_logo a#emw_link{margin:10px; padding: 0;}
#header_logo a#emw_link #logo_emw {width:100% !important; height:auto;}

/* Login Status box/Text */
#login_status_box{_min-height:44px; margin-top: 10px;}
#login_status_box p{margin:0;}
#login_status_box p #login_status_text{color:white; padding: 0; font-size: 0.9em;}
#login_status_box p #login_status_text span{font-size: 1.1em; border:1px solid white; border-radius: 3px; padding:0; display:inline-block; padding: 0 4px;}
#login_status_box p #login_status_text span.label{font-size: 0.75em; width: 100%; text-align: left; border: none; font-weight: normal; padding-bottom:6px; }
#login_status_box p #logout_link{display:block; float:right; margin:0 10px 10px 0;}


@media (max-width: 767px){ #login_status_box{padding-top:35px;} /* To avoid overlap with oversized Logo on re-size */ }

/* Menu Row / Back button, language, etc */
#menu_row{margin:20px 0;}

#language_selection_row{ text-align:right; padding:10px 10px 10px 0; background-color:#EDF5FB;}

#language_selection_row #language_selector_title{float:right; display:inline; color:#FFD36E;}
#language_selection_row #language_selector_title span{font-size:3.2em; margin-right:10px;}
#language_selection_row #language_buttons{float:right;}
#language_selection_row #language_buttons button{ font-size: 1.0em  }
#language_selection_row #language_buttons button .caret{ font-size: 1.0em  }
#language_selection_row span.glyphicon{padding-right:10px;}

/* Footer */
#footer_bar{margin-top:60px;}





/* ********************************************************************************
 * MODULES
*********************************************************************************** */


/* ****************************************
 * Applicable to all
******************************************* */
.emw_logo_box{}
.emw_logo_box img{width:100%; margin-bottom:20px;}

#status_message_box{margin:1em 0 1em 0;}


/* in case text bits are replaced */
span.text_complement{}




/* ****************************************
 * Registration / Profile
******************************************* */
.text_complement.profile_contact_address_additional_info{display:inline-block;}
.text_complement.profile_contact_address_additional_info.es{display:inline-block; }






/* ****************************************
 * Login form
******************************************* */
#login_form {}
#login_form .input-group{margin-bottom:1em;}

#or_box{text-align:center;}

#recover_login_details_box{margin-top:20px;}

/* vertical align */
#registration_link_box {
  position: relative;
  top: 45%;
  transform: translateY(-45%);
}






/* ****************************************
 * Dashboard
******************************************* */

.approval_status{display:inline; float:right; padding:2px 5px;}

#previous_participations_box{}
#previous_participations_box span{font-weight: bold;}
#previous_participations_box em{font-size: 0.8em;}

.approval_information_icon_box{ font-size:2.0em; color:#597ea2; margin-top:50px;}
.approval_information_icon span.glyphicon:hover{cursor: pointer;}
.approval_information_box p{display:none;}

#charter_info_box{margin-top:10px;}

#award_application_button_box{margin-top:50px;}
#award_application_button_box .award_application_icon{font-size:5.5em;}




/* ****************************************
 * Participation Form
******************************************* */
#participation_form{}
#participation_form textarea{width:100%; height:100px;}

#participation_form {margin:20px 15px 0 20px;}
#participation_form .further_info_box textarea{margin-top:10px; width:100%; height:100px; }

#participation_form #award_notification{display:none;}
#participation_form #award_notification_switched_off_2020{display:none;}
#participation_form #award_notification span{float:left; font-size:3em;}
#participation_form #award_notification p{float:left; font-size: 1.2em; margin:0.6em 0 0 1em; }

#week_of_activities_data_frame{background-color: #EDF5FB;}

#week_of_activities_data_frame .activities_programme .row textarea{height:70px; width:100% !important; min-width:100% !important;}
#week_of_activities_data_frame .activities_programme .row textarea.all_week_activities{height:120px; margin-bottom:40px;}

#more_participation_data_frame{margin-top:3em;}
#more_participation_data_frame #more_participation_data_fields_box{ background-color: #EDF5FB;}
#more_participation_data_frame #more_participation_data_fields_box .checkbox_panel {}
#more_participation_data_frame #more_participation_data_fields_box .checkbox_panel input[type="text"]{margin-top:10px;}


#participation_form .to_change{color:red;}

#participation_form .dropdown-row{padding:10px 0;}
#participation_form .dropdown-row:nth-child(even){background-color:#EDF5FB;}
#participation_form .dropdown-row:first-child{padding-top:0;}


/* ****************************************
 * Media Queries
******************************************* */
@media (max-width: 767px) {
  #header_logo {}
  #header_logo a#emw_link{}
  #header_logo a#emw_link #logo_emw {display:block; float:left; }
}


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


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

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