/**********************************************/
/* ICLEI EUROPE - EVENTS search page
/**********************************************/
/**********************************************/
/* Color definitions
  Yellow 1: rgb(255,243,180) #FFF3B4
  Yellow 2: rgb(255,231,105) #FFE769
  Yellow 3: rgb(255,221,81) #FFDD51
  Yellow 4: rgb(246,201,76) #F6C94C

  Blue/Green 1: rgb(0,_136,135) #008887
  Blue/Green 1: rgb(0,100,108) #008887
  Blue/Green 2: rgb(51,160,159) #33A09F
  Blue/Green 3: rgb(102,184,183) rgb(102,184,183)

  Green 1: rgb(102,160,135) #66A087
  Green 2: rgb(168,188,125) #A8BC7D
  Green 3: rgb(203,215,177) #CBD7B1
  Green 4: rgb(202,201,119) #CAC977

  Blue 1: rgb(127,183,192) #7FB7C0
  Blue 2: rgb(128,189,209) #80BDD1
  Blue 3: rgb(198,226,227) #C6E2E3

  Grey 1: rgb(50,50,50) #323232
  Grey 2: rgb(179,179,179) #B3B3B3
  Grey 3: rgb(242,242,242) #F2F2F2


  REBRAND 2021:
  Blue/Green: rgb(0,100,108) #00646C
  Blue: rgb(159,221,228) #9FDDE4
  Yellow: rgb( 255,225,68) #FFE144
  Green: rgb(175,215,120) #AFD778

*/


/**************************************************/
/* General */
/**************************************************/
p.error, p.exception{font-weight: bold; font-size:0.8em; padding:5px; border-radius:4px; border:1px solid rgb(128,0,0);}



/**************************************************/
/* Search form */
/**************************************************/
#search_form_box{margin-bottom:20px;}
#search_form_box form{}
#search_form_box form .form_row{}

#search_form_box form .keyword_search_form input#keyword{float:left; margin:0 5px 0 0; border:1px solid rgb(0,100,108); height:42px; font-size:1.7em; color:rgb(0,100,108); width:340px; border-radius:2px;}
#search_form_box form .keyword_search_form input#keyword::placeholder{color:rgba(0,100,108,0.8);}

form .keyword_search_form #topic_box {float:left; width:350px; margin:0 5px 0 0;}
form .keyword_search_form #topic_box select#topic{border:1px solid rgb(0,100,108); height:42px; font-size:24px; color:rgb(0,100,108); border-radius:2px;}
form .keyword_search_form #topic_box select#topic option{height:42px; font-size:20px; color:rgb(0,100,108); margin:5px 0 5px 40px;}
form .keyword_search_form #topic_box ul.selectboxit-options{max-height:500px; overflow-x:auto; width:350px;}
form .keyword_search_form #topic_box a.selectboxit-option-anchor{color:rgb(0,100,108)}
form .keyword_search_form #topic_box a.selectboxit-option-anchor:hover{background-color:rgb(0,100,108); color:white;}
form .keyword_search_form #topic_box .selectboxit-text{max-width:285px !important; text-overflow: ellipsis;}
form .keyword_search_form #topic_box .selectboxit-arrow-container{width:40px; padding:0 10px; background-color:white;}

form .keyword_search_form #type_box {float:left; width:200px; margin:0 5px 0 0;}
form .keyword_search_form #type_box select#type{border:1px solid rgb(0,100,108); height:42px; font-size:24px; color:rgb(0,100,108); border-radius:2px;}
form .keyword_search_form #type_box select#type option{height:42px; font-size:20px; color:rgb(0,100,108); margin:5px 0 5px 40px;}
form .keyword_search_form #type_box ul.selectboxit-options{max-height:500px; overflow-x:auto; width:200px;}
form .keyword_search_form #type_box a.selectboxit-option-anchor{color:rgb(0,100,108)}
form .keyword_search_form #type_box a.selectboxit-option-anchor:hover{background-color:rgb(0,100,108); color:white;}
form .keyword_search_form #type_box .selectboxit-text{max-width:155px !important; text-overflow: ellipsis;}
form .keyword_search_form #type_box .selectboxit-arrow-container{width:40px; padding:0 10px; background-color:white;}

form .keyword_search_form #country_box {float:left; width:200px; margin:0 5px 0 0;}
form .keyword_search_form #country_box select#country{border:1px solid rgb(0,100,108); height:42px; font-size:24px; color:rgb(0,100,108); border-radius:2px;}
form .keyword_search_form #country_box select#country option{height:42px; font-size:20px; color:rgb(0,100,108); margin:5px 0 5px 40px;}
form .keyword_search_form #country_box ul.selectboxit-options{max-height:500px; overflow-x:auto; width:200px;}
form .keyword_search_form #country_box a.selectboxit-option-anchor{color:rgb(0,100,108)}
form .keyword_search_form #country_box a.selectboxit-option-anchor:hover{background-color:rgb(0,100,108); color:white;}
form .keyword_search_form #country_box .selectboxit-text{max-width:155px !important; text-overflow: ellipsis;}
form .keyword_search_form #country_box .selectboxit-arrow-container{width:40px; padding:0 10px; background-color:white;}

#search_form_box form .keyword_search_form button#button_search{background-color:rgb(0,100,108); color:white; border:1px solid rgb(0,100,108);  padding: 0; height:42px; width:42px;  border-radius:2px;}
#search_form_box form .keyword_search_form button#button_search:hover{color:rgb(0,100,108); background-color:white;}
#search_form_box form .keyword_search_form button#button_search span{font-size:2em;  padding-top:5px;}

#search_form_box form .keyword_search_form a#button_reset{float:right; background-color:rgb(0,100,108); color:white; border:1px solid rgb(0,100,108); height:42px; width:42px; border-radius:2px;}
#search_form_box form .keyword_search_form a#button_reset:hover{color:rgb(0,100,108); background-color:white; border:1px solid rgb(0,100,108);}
#search_form_box form .keyword_search_form a#button_reset span{font-size:2.2em; margin:-1px 0 0 -6px;}




/*********************************************/
/* Year / Month search links
/**********************************************/
#search_form_box form .date_search_form{margin-top:10px;}
#search_form_box form .date_search_form #year_search_box{float:left; width:10%; background-color:10%;}
#search_form_box form .date_search_form #year_search_box button{ width:100%; font-size: 1.3em; padding:1px 0 4px 0;  border:1px solid rgb(0,100,108); border-radius:2px; background-color:rgb(0,100,108); color:white;}
#search_form_box form .date_search_form #year_search_box button .fa{font-size:1.4em; padding:2px 0 0 10px; }
#search_form_box form .date_search_form #year_search_box button.active{color:rgb(0,100,108); background-color:white;}
#search_form_box form .date_search_form #year_search_box button.active fa{color:rgb(0,100,108);}

#search_form_box form .date_search_form #year_search_box ul.year_search_options{border-radius:2px; padding:8px 0 8px 0; margin: 0;}
#search_form_box form .date_search_form #year_search_box ul.year_search_options li{ }
#search_form_box form .date_search_form #year_search_box ul.year_search_options li:before{content:"";}
#search_form_box form .date_search_form #year_search_box ul.year_search_options li a{color:rgb(0,100,108);}
#search_form_box form .date_search_form #year_search_box ul.year_search_options li a:hover{background-color:rgb(0,100,108); color:white;}

#search_form_box form .date_search_form #month_search_box{float:left; width:90%; text-align:right;}
#search_form_box form .date_search_form #month_search_box a{width:6.5%; font-size: 1.3em; margin:0  0 0 1%; padding:6px 0 5px 0; border:1px solid rgb(0,100,108); border-radius:2px; background-color:rgb(0,100,108); color:white; text-align:center;}
#search_form_box form .date_search_form #month_search_box a.active{color:rgb(0,100,108); background-color:white;}


/*********************************************/
/* Days search links
/**********************************************/
#search_form_box form .day_search_form{margin-top:10px;}
#search_form_box form .day_search_form .day_search_box{float:left; display:inline-block; text-align:center; margin-left:0.25%;}
#search_form_box form .day_search_form .day_search_box:first-child{margin-left:0;}

#search_form_box form .day_search_form.box_num_28 .day_search_box{width:3.330%;}
#search_form_box form .day_search_form.box_num_29 .day_search_box{width:3.206%;}
#search_form_box form .day_search_form.box_num_30 .day_search_box{width:3.083%;}
#search_form_box form .day_search_form.box_num_31 .day_search_box{width:2.983%;}

#search_form_box form .day_search_form .day_search_box.event_exists{}
#search_form_box form .day_search_form .day_search_box.active{border:1px solid rgb(0,100,108);}

#search_form_box form .day_search_form .day_search_box .weekday{display:block; font-size: 0.8em; color:rgb(179,179,179); }
#search_form_box form .day_search_form .day_search_box a{display:block; color:rgb(0,100,108); text-decoration:underline;}
#search_form_box form .day_search_form .day_search_box a:hover{color:white; background-color:rgb(0,100,108); }
#search_form_box form .day_search_form .day_search_box span{display:block; }






/* ****************************************
* No results found message
**************************************** */
.no_events_found_box{width:1200px; margin:0 auto; color:rgb(220,220,220); margin-top:1em;}
.no_events_found_box i{float:left; color:rgb(220,220,220); font-size: 8em;}
.no_events_found_box span{float:left; font-size:3em; margin:0.6em 0 0 0.5em;}



/* ****************************************
* Events results box
**************************************** */
#events_results_box{ }
#events_results_box header#top_heading{width:1200px; margin:0 auto;}
#events_results_box header#top_heading h1{}
#events_results_box header#top_heading h1 .result_numbers_display{font-size: 0.6em;}

#events_results_box #view_all_events {text-align:center;}
#events_results_box #view_all_events a{color:white; background-color:rgb(0,100,108); text-decoration:none;}
#events_results_box #view_all_events a:hover {color:rgb(0,100,108); background-color:white; border:1px solid rgb(0,100,108);}




/***********************************************************/
/* Events Listing
/***********************************************************/
.events_row {margin:0 0 80px 0;}
.events_row .events_item_container {position:relative; float:left; width:32.7777%; background-color:white; }
.events_row .events_item_container:nth-child(3n+1) {margin-right:0.8333%;}
.events_row .events_item_container:nth-child(3n+2) {margin-right:0.8333%;}
.events_row .events_item_container:nth-child(3n+3) {margin-right:0;}

.events_row .events_item_container .overlay {position:absolute; top:0; right:0; bottom:0; left:0;}
.events_row .events_item_container .overlay:hover {background-color:rgb(0,100,108);}

.events_item_container .events_item{display:block; border-radius:2px; border:1px solid rgb(220,220,220);}
.events_item_container .events_item:hover{background-color:rgb(0,100,108); border:1px solid rgb(179,179,179);}
.events_item_container .events_item .highlighted{background-color:rgb(255,243,180);}

.events_item_container .events_item .banner_container {position:relative; pointer-events:none; z-index:1; padding:10px; /*border-bottom:1px solid rgb(220,220,220);*/}
.events_item_container .events_item .banner_container .banner_box{position:relative; padding-top:55%; background-size:contain; background-position:center center; background-repeat:no-repeat; background-color:white;}
.events_item_container .events_item .banner_container .banner_box.default_banner .banner_overlay{position:absolute; top:0; left:0; width:100%; height:100%; background-color:white; opacity:0;}


.events_item_container .events_item .topics {position:relative; pointer-events:none; z-index:1; text-align:right; padding:0 5px;}
.events_item_container .events_item .topics .topic{pointer-events:all; display:inline-block; padding:2px 4px; font-size: 0.7em; border-radius:3px; background-color:rgb(0,100,108); color:white;}


.events_item_container .events_item .type_date_venue_box{position:relative; pointer-events:none; z-index:1;}
.events_item_container .events_item .type_date_venue_box .type{float:right; color:rgb(50,50,50); font-size:0.8em; margin:0 10px; padding:2px 4px; border:1px solid rgb(220,220,220); border-radius:3px;}
/*.events_item_container .events_item:hover .type_date_venue_box .type{color:white; border-color:white;}*/

.events_item_container .events_item .type_date_venue_box .date{color:rgb(50,50,50); font-size:0.85em; font-weight:normal; margin:10px 10px;}
/*.events_item_container .events_item:hover .type_date_venue_box .date{color:white;}*/

.events_item_container .events_item .type_date_venue_box .venue{color:rgb(50,50,50); font-size:0.85em; font-weight:normal; margin:-10px 10px 10px 10px;}
/*.events_item_container .events_item:hover .type_date_venue_box .venue{color:white;}*/

.events_item_container .events_item .title_box{position:relative; pointer-events:none; z-index:1; clear:both; margin:0 10px;}
.events_item_container .events_item .title_box h1.title{ color:black; font-size:1.5em;}
/*.events_item_container .events_item:hover .title_box h1.title{ color:white; }*/
.events_item_container .events_item .title_box h2.subtitle{ position:relative; pointer-events:none; z-index:1; color:black; font-size:1.3em; }
/*.events_item_container .events_item:hover .title_box h2.subtitle{ color:white; }*/

.events_item_container .events_item .description_box {position:relative; pointer-events:none; z-index:1; height:130px; overflow:hidden; }
.events_item_container .events_item .description_box article.description{color:rgb(50,50,50); margin:10px;}
/*.events_item_container .events_item:hover .description_box article.description{color:white;}*/

/*********************************************/
/* Row / Spacer
/**********************************************/
.events_row{display:block; margin-bottom:30px;}
.row_spacer{display:block; clear:both; height:10px; background-color:red;}




/***********************************************************/
/* Events Single View
/***********************************************************/
.events_view_item{display:block; border-radius:2px; border:1px solid rgb(220,220,220); background-color:rgba(255,255,255,0.6);}

.events_view_item .separator_line{height:0; font-size: 0; line-height: 0; border-top:1px solid rgb(220,220,220); margin:0 15px;}


.events_view_item .banner_container {float:right; position:relative; width:394px; height:225px; padding:10px; margin:5px 15px 0 15px; border:1px solid rgb(220,220,220); background-color:white;  box-shadow:0 0 4px 0 rgba(0,0,0,0.2);}
.events_view_item .banner_container .banner_box{width:100%; height:100%; background-size:contain; background-position:center center; background-repeat: no-repeat;}

.events_view_item .banner_container .banner_box .copyright_info_box{position:absolute; bottom:-10px; right:0; background-color:transparent; overflow:hidden; margin:0;}
.events_view_item .banner_container .banner_box .copyright_info_box .copyright_info{display:inline-block; font-size: 0.6em; padding:0 5px; color:rgb(120,120,120); background-color:white; border:1px solid rgb(179,179,179); border-radius:2px;}
.events_view_item .banner_container .banner_box .copyright_info_box .copyright_info span{display:inline-block; width:0; white-space: nowrap; opacity:0;}
.events_view_item .banner_container .banner_box .copyright_info_box .copyright_info i{display:inline-block; margin:2px -1px 0 -1px;}
.events_view_item .banner_container .banner_box .copyright_info_box .copyright_info:hover span{width:auto; opacity:1;}

/*.events_view_item .direct_link_box{display:none; float:right; margin:3px;}
.events_view_item .direct_link_box a{}
.events_view_item .direct_link_box a:hover{color:rgb(0,100,108); background-color:transparent;}

*/
.events_view_item .topics {text-align:left; padding:15px;}
.events_view_item .topics .topic{display:inline-block; height:22px; font-size: 0.9em; border-radius:3px; background-color:rgb(0,100,108); color:white;padding:2px 6px 2px 6px; margin:0 5px 5px 0;}
.events_view_item .topics .topic {}


.events_view_item .type{float:right; color:rgb(50,50,50); font-size:0.8em; margin:15px; padding:2px 4px; border:1px solid rgb(220,220,220); border-radius:3px;}
.events_view_item .date_venue_box .date{color:rgb(50,50,50); font-size:1em; font-weight:bold; margin:10px 15px;}
.events_view_item .date_venue_box .venue{color:rgb(50,50,50); font-size:1em; font-weight:bold; margin:-10px 15px 10px 15px;}

.events_view_item .title_box{margin:0 15px;}
.events_view_item .title_box h1.title{ color:black; }
.events_view_item .title_box h2.subtitle{ color:black; font-size: 1.4em; }

.events_view_item .description_box {margin-bottom:20px;}
.events_view_item .description_box article.description{color:rgb(50,50,50); margin:10px 15px;}

.events_view_item .link_box {clear:both; width:50%; margin:50px auto 50px auto; text-align:center;}
.events_view_item .link_box a{display:block; font-size: 1.5em;  background-color:rgb(127,183,192); color:white; border:1px solid rgb(127,183,192); border-radius:4px; padding:4px 8px; white-space:nowrap; overflow:hidden;}
.events_view_item .link_box a:hover{color:rgb(127,183,192); background-color:white;}
.events_view_item .link_box a span{ text-overflow: ellipsis; }
.events_view_item .link_box a span i{font-size:0.8em; margin-left:10px; color:rgba(255,255,2255,0.6);}
.events_view_item .link_box a:hover span i{color:rgba(127,183,192,0.5);}

.events_view_item .two_columns{margin-top:30px; padding:0 15px; }
.events_view_item .two_columns .column{float:left; width:50%; padding:0 15px;}
.events_view_item .two_columns .column_1{}
.events_view_item .two_columns .column_2{}

.events_view_item .organiser_box {clear:both;}
.events_view_item .organiser_box label{float:left; width:80px; display:inline-block; font-weight: bold;}
.events_view_item .organiser_box div{float:left; display:block;  margin-top:-10px;}
.events_view_item .organiser_email_box {clear:both; margin-bottom:20px;}
.events_view_item .organiser_email_box label {float:left; width:80px; display:block; font-weight: bold;}
.events_view_item .organiser_email_box div{float:left; display:block;}

.events_view_item .partner_box {clear:both;}
.events_view_item .partner_box label{float:left; width:80px; display:inline-block; font-weight: bold;}
.events_view_item .partner_box div{float:left; display:block; margin-top:-10px;}

/*.events_view_item .endorser_box {clear:both;}
.events_view_item .endorser_box label{float:left; width:80px; display:inline-block; font-weight: bold;}
.events_view_item .endorser_box div{float:left; display:block; margin-top:-10px;}

.events_view_item .role_of_iclei_box {clear:both;}
.events_view_item .role_of_iclei_box label{float:left; width:100px; display:inline-block; font-weight: bold;}
.events_view_item .role_of_iclei_box div{float:left; display:block; }

.events_view_item .target_region_box {clear:both;}
.events_view_item .target_region_box label{float:left; width:100px; display:inline-block; font-weight: bold;}
.events_view_item .target_region_box div{float:left; display:block; }
*/

.events_view_item .file_box{clear:both; margin:20px 15px 10px 15px; padding:10px 10px 10px 20px; border_:1px solid rgb(220,220,220); background-color_:rgb(245,245,245); border-radius:4px;}
.events_view_item .file_box .file_box_heading{font-weight: bold; margin:0 0 0 -10px; }
.events_view_item .file_box .file_purpose{margin:30px 0 0 0; font-weight: bold;}
.events_view_item .file_box a.file{display:inline-block; border:1px solid rgb(127,183,192); border-radius:4px; padding:10px; margin:10px 20px 0 0;  box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);}
.events_view_item .file_box a.file i{font-size:2.5em; float:left; margin-right:10px; }
.events_view_item .file_box a.file .file_info{float:left; white-space: nowrap; padding:0; margin:0;}
.events_view_item .file_box a.file .file_info .file_name{}
.events_view_item .file_box a.file .file_info .file_type_size{}
.events_view_item .file_box a.file .file_description{display:block; padding:0 10px 0 0;}


.button_box{margin-bottom:20px;}
.button_box .back_button{border:1px solid rgb(0,100,108); color:rgb(0,100,108); padding:3px 8px; font-size:1.8em; }
.button_box .back_button:hover{text-decoration:none; background-color:rgb(0,100,108); color:white;}
.button_box .back_button .fa{font-size: 0.75em;}




/*********************************************/
/* Pagination
/**********************************************/
#pagination_container{display:table; margin:0 auto 10px auto;}
#pagination_container .page_link{display:block; float:left; width:40px; padding:0; margin:0; font-size:1.1em; text-align:center; border:1px solid rgb(242,242,242); border-width:1px 1px 1px 0;}
#pagination_container .page_link:first-child{border-left-width:1px;}

#pagination_container .current_page{ color:rgb(220,220,220);  }

#pagination_container span{display:block; width:100%; padding:5px; text-align:center;}
#pagination_container a{display:block; width:100%; padding:5px; text-decoration:none; color:rgb(150,150,150);  text-align:center;}
#pagination_container a:hover{background-color:rgb(240,240,240); color:rgb(160,160,160);}








/**********************************************/
/* Media Queries 
/**********************************************/

/* < 1200 */
@media only screen and (max-width: 1199px){
    #search_form_box form .keyword_search_form input#keyword {
        width: calc(100% - 60px);
        margin: 0 5px;
    }

    #search_form_box form .keyword_search_form #type_box,
    #search_form_box form .keyword_search_form #country_box,
    #search_form_box form .keyword_search_form #topic_box{
        width: calc(100% - 60px);
        margin: 0 5px;
        padding: 20px 0 0 0;
    }

    #search_form_box form .keyword_search_form #topic_box{
        padding: 20px 0;
    }

    #search_form_box form .keyword_search_form a#button_reset{
        margin: 20px 7px 0 0;
    }
}



/* < 980 */
@media only screen and (max-width: 979px){
    #search_form_box form .date_search_form #year_search_box button,
    #search_form_box form .date_search_form #month_search_box a {
        font-size: 0.8em;
    }

    .events_row .events_item_container {
        width: 100%; 
        margin: 0px;
        padding: 10px;
    }
}
/* < 980 */
@media only screen and (max-width: 767px){
    #search_form_box form .date_search_form #year_search_box button,
    #search_form_box form .date_search_form #month_search_box a {
        font-size: 0.5em;
    }

    #search_form_box form .date_search_form #year_search_box{
        width: calc(100% - 10px);
        margin: 0 5px;
        padding: 0 0 20px 0
    }

}

@media only screen and (max-width: 480px){
    #search_form_box form .date_search_form #month_search_box a {
        width: 5.5%;
    }
}






