/* ==========================================================================
    Sidebar styles 
  ========================================================================== */

#mobile_menu {
	position: fixed;
	right: 0px;
	top: -5px;
    width: 80px;
    height: 80px;
    z-index: 200001;
}

#mobile_menu a {
	display: inline-block;
    border-radius: 50%;
    behavior: url(PIE.htc);
    width: 50px;
    height: 50px;
    margin-left: 15px;
    background: #353535;
    margin-top: 20px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#mobile_menu.open a i {
	padding-left: 19px;
	font-size: 20px;
}

#mobile_menu a i {
	font-size: 18px;
    color: #ffffff;
    padding-left: 17px;
    padding-top: 15px;
}

#support {
	display: none;
}

#sidebar_container {
    position: fixed;
    top: 0px;
    right: -80px;
    height: 100%;
    min-height: 100vh;
	/* mobile viewport bug fix */
	min-height: -webkit-fill-available;
    width: 80px;
    background-color: #111111;
    z-index: 200000;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#sidebar_container.open {
	right: 0px;
} 

#sidebar_container #side_bar_nav {
	margin-top: 0px;
	-webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#sidebar_container.open #side_bar_nav {
	margin-top: 80px;
}

#side_bar_nav ul {
    position: relative;
    top: 15px;
}

#side_bar_nav ul li {
    display: inline-block;
    border-radius: 50%;
    behavior: url(PIE.htc);
    width: 50px;
    height: 50px;
    margin-left: 15px;
    background: #353535;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#side_bar_nav ul li i {
    font-size: 18px;
    color: #ffffff;
    padding-left: 15px;
    padding-top: 15px;
}

a.directory_button li i {
	padding-left: 17px !important;
}

a.messaging_button li i {
	padding-top: 17px !important;
	padding-left: 15px !important;
}

a.briefcase_button li i {
	padding-left: 16px !important;
}

a.admin_button li i {
	padding-left: 17px !important;
}

a.appointments_button li i {
	padding-left: 17px !important;
}

a.events_button li i {
	padding-left: 17px !important;
}

#support li i {
	font-size: 20px !important;
	padding-top: 16px !important;
	padding-left: 17px !important;
}

#signout li i {
	font-size: 20px !important;
	padding-top: 16px !important;
	padding-left: 17px !important;
}

#side_bar_nav ul li:hover {
    opacity: 0.5;
}

#side_bar_nav ul a.active li {
    background: #3166f0;
}

#side_bar_nav ul a.save li {
	transform: scale(1.2);
    background: #009900;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#messaging_container.open, #new_message_container.open, #thread_container.open {
    margin-right: 80px;
}

#side_bar_bottom_nav {
    position: absolute;
    bottom: 50px;
}

#side_bar_bottom_nav ul {
    position: relative;
    top: 15px;
}

#side_bar_bottom_nav ul li {
    display: block;
    border-radius: 50%;
    behavior: url(PIE.htc);
    width: 50px;
    height: 50px;
    margin-left: 15px;
    background: #353535;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#side_bar_bottom_nav ul li i {
    font-size: 22px;
    color: #ffffff;
    padding-left: 14px;
    padding-top: 12px;
}

#side_bar_bottom_nav ul li:hover {
    opacity: 0.5;
}

#messaging_notification {
    top: -32px !important;
    right: -38px !important;
}

a.profile_button {
		position: relative;
		height: 50px;
		width: 50px;
		top: 5px;
		left: 8px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		-webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

a.profile_button:hover {
		opacity: 0.5;
}

a.profile_button.active div {
		opacity: 0.3;
}

#profile_image {
		height: 50px;
		width: 50px;
		border-radius: 50%;
		behavior: url(PIE.htc);
		background-size: 50px 50px;
}

#profile_initials {
		height: 50px;
		width: 50px;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		border-radius: 50%;
		background: #666;
		color: #FFF;
		font-family: "Roboto", sans-serif;
		font-size: 18px;
		text-transform: uppercase;
}

#messaging_container.open {
		width: 80% !important;
		width: calc(100% - 79px) !important;
}

#thread_container, #new_message_container {
		width: 80% !important;
		width: calc(100% - 79px) !important;
}

a.white_button {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    letter-spacing: .2em;
    line-height: 1.2em;
    color: #222222;
    background-color: #FFF;
    padding: 36px;
    padding-top: 14px;
    padding-bottom: 14px;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    text-decoration: none;
}

a.white_button:hover {
    opacity: 0.3;
}

@media only screen and (min-width: 800px) {

	#mobile_menu {
		display: none;
	}

	#support, #signout {
		display: block;
	}

	#sidebar_container {
		top:  0px;
	    right: 0px;
	    height: 100%;
	    min-height: 100vh;
		/* mobile viewport bug fix */
		min-height: -webkit-fill-available;
	    width: 80px;
	}

	#sidebar_container.open a.profile_button {
		left: 15px;
	}

	#side_bar_nav ul li {
    	display: block;
	}

	#messaging_container.open {
		width: 400px !important;
	}

	#thread_container, #new_message_container {
		width: 400px !important;
	}

}

/* ==========================================================================
    Messaging styles 
  ========================================================================== */

#messaging_container h3 {
    font-family: "Roboto", sans-serif !important;
}

div.messaging_profile_initials {
    font-family: "Roboto", sans-serif !important;
}

#messaging_threads a li h5 {
    font-family: "Roboto", sans-serif !important;
}

#messaging_threads a li div.thread_body {
    font-family: "Roboto", sans-serif !important;
}

#messaging_threads a li time {
    font-family: "Roboto", sans-serif !important;
}

#thread_header h3 {
    font-family: "Roboto", sans-serif !important;
}

#thread_messages li div.thread_body {
    font-family: "Roboto", sans-serif !important;
}

#thread_container input {
    font-family: "Roboto", sans-serif !important;
}

#new_message_container h3 {
    font-family: "Roboto", sans-serif !important;
}

#new_message_container h4 {
    font-family: "Roboto", sans-serif !important;
}

#user_list li h5 {
    font-family: "Roboto", sans-serif !important;
}

#user_list_counter {
    font-family: "Roboto", sans-serif !important;
}

/* ==========================================================================
    Directory container
   ========================================================================== */

#directory_container {
	position: fixed;
	background-color: #333333;
	width: 100%;
	height: 100%;
	min-height: 100vh;
  	/* mobile viewport bug fix */
   	min-height: -webkit-fill-available;
	top: 0px;
	right: -100%;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	z-index: 100000;
}


#directory_search {
	position: absolute;
	top: 70px;
	left: 0;
	margin-left: 20px;
	width: 360px;
	width: calc(100% - 60px);
	border: 0;
	padding: 10px;
	background-color: #444444;
	color: #FFF;
	border-radius: 8px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 18px;
	font-family: "Roboto", sans-serif;
}

#directory_category {
    position: absolute;
    top: 123px;
    left: 20px;
    display: block;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #c4c4c4;
    padding: 10px;
    width: 359px;
    width: calc(100% - 60px);
    max-width: 100%; /* useful when width is set to anything other than 100% */
    border: 1px solid #444444;
    box-sizing: border-box;
    margin: 0;
    margin-top: 2px;
    margin-left: 0px;
    margin-bottom: 5px;
    border-radius: 5px;
    padding-left: 9px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #444444;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23c4c4c4%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
    margin-bottom: 20px;
}
/* Hide arrow icon in IE browsers */
#directory_category::-ms-expand {
    display: none;
}
/* Hover style */
#directory_category:hover {
    border-color: #444444;
}

/* Set options to normal weight */
#directory_category select option {
    font-weight:normal;
}


#directory_container.open {
	right: 0px;
	margin-right: 80px;
	width: 80% !important;
	width: calc(100% - 80px) !important;
}

#directory_container a.close {
	position: absolute;
	left: 20px;
	top: 15px;
}

#directory_container a.close:hover {
	opacity: 0.6;
}

#directory_container a.close i {
	font-size: 30px;
	color: #FFF;
}

#directory_container.open a.close {
	display: block;
}

#directory_container h3 {
	position: absolute;
	top: 70px;
	left: 20px;
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	text-transform: uppercase;
	color: #FFF;
	text-overflow: ellipsis;
}

#directory_exhibitor {
	position: fixed;
	top: 0px;
	width: calc(100% - 80px);
	height: 100%;
	min-height: 100vh;
	z-index: 110000;
	background-color: #FFF;
	/* mobile viewport bug fix */
  	min-height: -webkit-fill-available;
	right: -700px;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#directory_exhibitor.open {
	right: 80px;
}

#directory_exhibitor a.back {
	position: absolute;
	left: 20px;
	top: 20px;
}

#directory_exhibitor a.back:hover {
	opacity: 0.6;
}

#directory_exhibitor a.back i {
	font-size: 30px;
	color: #000;
}

#directory_exhibitor.open a.back {
	display: block;
}

#directory_list {
	position: relative;
	top: 200px;
	left: 20px;
	width: 310px;
	width: calc(100% - 40px);
	overflow: auto;
	height: 80%;
	height: calc(100% - 200px);
	padding-right: 10px;
}

#directory_list::-webkit-scrollbar {
  width: 7px;
}
 
#directory_list::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 0;
  border-radius: 12px;
}

#directory_list a li {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #A1a1a1;
}

#directory_list a li h5 {
	display: block;
	margin-bottom: 10px;
	font-family: "Roboto", sans-serif !important;
	font-size: 18px;
	color: #c4c4c4;
}

#directory_list a li p {
	font-family: "Roboto", sans-serif !important;
	font-size: 14px;
	color: #8e8e8e;
}

#directory_list a li img {
	width: 100%;
	height: calc(100% / 1.49);
	margin-bottom: 23px;
}

#directory_list a.active li img {
	border-bottom: 3px solid #3166f0;
	margin-bottom: 20px;
}

#directory_exhibitor_content h4 {
	font-family: "Roboto", sans-serif !important;
	font-size: 26px;
	padding-top: 20px;
	margin-left: 66px;
	padding-bottom: 18px;
	color: #111111;
	letter-spacing: 1px;
}

#directory_exhibitor_content a.view_booth {
	float: right;
	margin-top: 24px;
	margin-right: 40px;
	font-family: "Roboto", sans-serif !important;
	font-size: 18px;
	color: #111111;
}

#directory_exhibitor_content a.booth_room {
	display: none;
}

#directory_exhibitor_content img {
	display: none;
}

#directory_exhibitor_content div {
	font-family: "Roboto", sans-serif !important;
	font-size: 16px;
	color: #111111;
	padding: 40px;
	line-height: 180%;
	overflow-y: auto;
	width: calc(100% - 10px);
	height: calc(100vh - 70px);
}

#directory_exhibitor_content div::-webkit-scrollbar {
  width: 7px;
}
 
#directory_exhibitor_content div::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 0;
  border-radius: 12px;
}


#directory_exhibitor_content div p {
	margin-bottom: 20px;
}

#directory_exhibitor_content div a {
	color: #000;
	text-decoration: underline;
}

@media only screen and (min-height: 800px) {

	#directory_exhibitor_content img {
		width: 100%;
		display: block;
	}

	#directory_exhibitor_content a.booth_room {
		position: relative;
		font-family: "Roboto", sans-serif !important;
		font-size: 18px;
		color: #FFF;
		text-align: center;
		cursor: pointer;
		text-transform: uppercase;
		background-color: #111;
		border-radius: 50%;
		behavior: url(PIE.htc);
		width: 100px;
		height: 100px;
		margin-top: -50px;
		margin-left: 40px;
		padding-top: 20px;
		margin-bottom: 0px;
		line-height: 160%;
		text-decoration: none;
		display: inline-block;
	}

	#directory_exhibitor_content div {
		height: calc(100vh - 600px);
	}

}

@media only screen and (min-width: 800px) {

	#directory_exhibitor {
		z-index: 90000;
	}

	#directory_container {
		width: 400px;
		right: -400px;
	}

	#directory_container.open {
		width: 400px !important;
	}
	
	#directory_exhibitor.open {
		right: 480px;
	}
	
	#directory_exhibitor {
		width: calc(100% - 480px);
	}

}

@media only screen and (min-width: 1200px) {

	#directory_exhibitor {
		width: 600px;
		right: -600px;
	}

}

/* ==========================================================================
    Announcements container
   ========================================================================== */

#announcements_container {
	position: fixed;
	background-color: #333333;
	width: 100%;
	height: 100%;
	min-height: 100vh;
  	/* mobile viewport bug fix */
  	min-height: -webkit-fill-available;
	top: 0px;
	right: -100%;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	z-index: 100000;
}

#announcements_container.open {
	right: 0px;
	margin-right: 80px;
	width: 80% !important;
	width: calc(100% - 80px) !important;
}

#announcements_container a.close {
	position: absolute;
	left: 20px;
	top: 15px;
}

#announcements_container a.close:hover {
	opacity: 0.6;
}

#announcements_container a.close i {
	font-size: 30px;
	color: #FFF;
}

#announcements_container.open a.close {
	display: block;
}

@media only screen and (min-width: 800px) {

	#announcements_container {
		width: 400px;
		right: -400px;
	}

	#announcements_container.open {
		width: 400px !important;
	}

}

/* ==========================================================================
    Briefcase container
   ========================================================================== */

#briefcase_container {
	position: fixed;
	background-color: #333333;
	width: 100%;
	height: 100%;
	min-height: 100vh;
  	/* mobile viewport bug fix */
  	min-height: -webkit-fill-available;
	top: 0px;
	right: -100%;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	z-index: 100000;
}

#briefcase_container.open {
	right: 0px;
	margin-right: 80px;
	width: 80% !important;
	width: calc(100% - 80px) !important;
}

#briefcase_container a.close {
	position: absolute;
	left: 20px;
	top: 15px;
}

#briefcase_container a.close:hover {
	opacity: 0.6;
}

#briefcase_container a.close i {
	font-size: 30px;
	color: #FFF;
}

#briefcase_container.open a.close {
	display: block;
}

#briefcase_search {
	position: absolute;
	top: 70px;
	left: 0;
	margin-left: 20px;
	width: 360px;
	width: calc(100% - 40px);
	border: 0;
	padding: 10px;
	background-color: #444444;
	color: #FFF;
	border-radius: 8px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 18px;
	font-family: "Roboto", sans-serif;
}

#briefcase_list {
	position: relative;
	top: 150px;
	left: 20px;
	width: 100%;
	width: calc(100% - 40px);
	overflow: auto;
	height: 80%;
	height: calc(100% - 170px);
	padding-right: 10px;
	border-top: 1px solid #444446;
}

#briefcase_list::-webkit-scrollbar {
  width: 7px;
}
 
#briefcase_list::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 0;
  border-radius: 12px;
}

#briefcase_list li {
    display: block;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#briefcase_list li div.icon {
    display: inline-block;
    font-size: 16px;
    width: 16px;
    margin-right: 20px;
    color: #444446;
    vertical-align: top;
}

#briefcase_list li div.title {
    display: inline-block;
    font-size: 14px;
    margin-right: 0px;
    color: #FFF;
    width: 51%;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #FFF;
    text-align: left;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

#briefcase_list li div.company {
	font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #FFF;
	font-size: 10px;
	font-style: italic;
	margin-top: 2px;
}

#briefcase_list li div.open a:hover, #briefcase_list li div.delete:hover {
    opacity: 0.5;
}

#briefcase_list li div.open {
    display: inline-block;
    font-size: 16px;
    width: 56px;
    color: #FFF;
    cursor: pointer;
    vertical-align: top;
    text-align: right;
}

#briefcase_list li div.open a {
	color: #FFF;
	margin-right: 10px;
}

#briefcase_list li div.open a:last-child {
	margin-right: 6px;
}

#briefcase_list li div.delete {
	display: inline-block;
    font-size: 16px;
    width: 16px;
    color: #FFF;
    cursor: pointer;
    vertical-align: top;
}

@media only screen and (min-width: 800px) {

	#briefcase_container {
		width: 400px;
		right: -400px;
	}

	#briefcase_container.open {
		width: 400px !important;
	}

	#briefcase_list li div.title {
    	margin-right: 20px;
    	width: 57%;
    }

}
/* ==========================================================================
    Profile container
   ========================================================================== */

#profile_container {
	position: fixed;
	background-color: #333333;
	width: 100%;
	height: 100%;
	min-height: 100vh;
  	/* mobile viewport bug fix */
  	min-height: -webkit-fill-available;
	top: 0px;
	right: -100%;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	z-index: 100000;
}

#profile_container.open {
	right: -1px;
	margin-right: 80px;
	width: 80% !important;
	width: calc(100% - 79px) !important;
}

#profile_container a.close {
	position: absolute;
	left: 20px;
	top: 15px;
}

#profile_container a.close:hover {
	opacity: 0.6;
}

#profile_container a.close i {
	font-size: 30px;
	color: #FFF;
}

#profile_container.open a.close {
	display: block;
}

#profile_container div.body_copy {
	position: relative;
	height: calc(100vh - 90px);
	top: 30px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	margin: 20px;
	margin-left: 0px;
}

#profile_container div.body_copy::-webkit-scrollbar {
  width: 7px;
}
 
#profile_container div.body_copy::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 0;
  border-radius: 12px;
}

#profile_container div.body_copy label {
	font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #FFF;
    font-size: 16px;
    width: 68px;
	margin-right: 20px;
	display: inline-block;
	margin-bottom: 5px;
}

#profile_container div.body_copy input {
	border: 0;
	padding: 10px;
	font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    font-style: normal;
    color: #5e5c5c;
    border-radius: 5px;
	width: calc(100% - 90px);
	margin-bottom: 5px;
}

#photo_container {
	margin-top: 14px;
}

#photo_container2 {
	margin-top: 24px;
}

#profile_container div.uploadifive-button {
	margin-left: 0px !important;
	margin-top: 20px !important;
	height: 40px !important;
	color: #5e5c5c !important;
	border-radius: 5px !important;
}

#submit_button {
	margin-top: 20px;
}

#profile_container img.imgviewer {
	height: 200px;
}

#profile_container select {
    display: inline-block;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #5e5c5c;
    padding: 10px;
    width: calc(100% - 90px);
    max-width: 100%; /* useful when width is set to anything other than 100% */
    border: 1px solid #FFF;
    box-sizing: border-box;
    margin: 0;
    margin-top: 2px;
    margin-left: 0px;
    margin-bottom: 5px;
    border-radius: 5px;
    padding-left: 9px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
#profile_container select::-ms-expand {
    display: none;
}
/* Hover style */
#profile_container select:hover {
    border-color: #FFF;
}

/* Set options to normal weight */
#profile_container select option {
    font-weight:normal;
}

@media only screen and (min-width: 800px) {

	#profile_container {
		width: 400px;
		right: -400px;
	}

	#profile_container.open {
		width: 400px !important;
	}

}

/* ==========================================================================
    Events container
   ========================================================================== */

#events_container {
	position: fixed;
	background-color: #333333;
	width: 100%;
	height: 100%;
	min-height: 100vh;
  	/* mobile viewport bug fix */
  	min-height: -webkit-fill-available;
	top: 0px;
	right: -100%;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	z-index: 100000;
}

#events_container.open {
	right: -1px;
	margin-right: 80px;
	width: 80% !important;
	width: calc(100% - 79px) !important;
}

#events_container a.close {
	position: absolute;
	left: 20px;
	top: 15px;
}

#events_container a.close:hover {
	opacity: 0.6;
}

#events_container a.close i {
	font-size: 30px;
	color: #FFF;
}

#events_container.open a.close {
	display: block;
}

#events_container div.body_copy h3 {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	color: #c4c4c4;
	font-size: 20px;
	margin-bottom: 40px;
}

#events_container div.body_copy {
	position: relative;
	height: calc(100vh - 90px);
	top: 30px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	margin-top: 20px;
}

#events_list {
	margin-bottom: 40px;
}

#events_list li {
	margin-bottom: 20px;
}

#events_list li h5 {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	color: #c4c4c4;
	font-size: 16px;
	margin-bottom: 5px;
}

#events_list li date {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	color: #c4c4c4;
	font-size: 16px;
	font-style: italic;
	margin-bottom: 5px;
	display: block;
}

#events_list li p {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	color: #c4c4c4;
	font-size: 14px;
}

#events_container div.body_copy::-webkit-scrollbar {
  width: 7px;
}
 
#events_container div.body_copy::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 0;
  border-radius: 12px;
}

@media only screen and (min-width: 800px) {

	#events_container {
		width: 400px;
		right: -400px;
	}

	#events_container.open {
		width: 400px !important;
	}

}

/* ==========================================================================
    Appointments container
   ========================================================================== */

#appointments_container {
	position: fixed;
	background-color: #333333;
	width: 100%;
	height: 100%;
	min-height: 100vh;
  	/* mobile viewport bug fix */
  	min-height: -webkit-fill-available;
	top: 0px;
	right: -100%;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	z-index: 100000;
}

#appointments_container.open {
	right: -1px;
	margin-right: 80px;
	width: 80% !important;
	width: calc(100% - 79px) !important;
}

#appointments_container a.close {
	position: absolute;
	left: 20px;
	top: 15px;
}

#appointments_container a.close:hover {
	opacity: 0.6;
}

#appointments_container a.close i {
	font-size: 30px;
	color: #FFF;
}

#appointments_container.open a.close {
	display: block;
}

#appointments_container div.body_copy {
	position: relative;
	height: calc(100vh - 90px);
	top: 30px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	margin-top: 20px;
}

#appointments_container div.body_copy::-webkit-scrollbar {
  width: 7px;
}
 
#appointments_container div.body_copy::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 0;
  border-radius: 12px;
}

@media only screen and (min-width: 800px) {

	#appointments_container {
		width: 400px;
		right: -400px;
	}

	#appointments_container.open {
		width: 400px !important;
	}

}

/* ==========================================================================
    Calendar 
   ========================================================================== */

#calendar_section {
    
}

#calendar {
    margin-bottom: 20px;
}

div.appointment_form {
	margin-left: 0px;
}

#juror_form {
	margin-left: 0px;
}

#appointment_form {
	margin-bottom: 40px;
}

div.appointment_form h3 {
	font-family: "Roboto", sans-serif;
    font-weight: 500;
    color: #c4c4c4;
    font-size: 20px;
    margin-bottom: 40px;
}

#juror_message {
	font-family: "Roboto", sans-serif;
    font-weight: 500;
    color: #c4c4c4;
    font-size: 18px;
    margin-bottom: 40px;
    margin-left: 0px;
    line-height: 120%;
}

div.appointment_form a.save_button {
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 14px !important;
	letter-spacing: .2em !important;
	line-height: 1.2em !important;
	color: #FFF !important;
	background-color: #222222 !important;
	padding: 36px;
	padding-top: 14px;
	padding-bottom: 14px;
	cursor: pointer;
	display: inline-block;
	text-transform: uppercase;
	border-radius: 5px;
	-webkit-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	text-decoration: none !important;
}

#appointment_form_message {
	margin-top: 20px;
	color: #ec008d;
}

div.appointment_form a.save_button:hover {
	opacity: 0.5;
}

div.appointment_form label {
	font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #c4c4c4;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

div.appointment_form input {
    display: inline-block;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #c4c4c4;
    padding: 10px;
    margin-bottom: 20px;
}

div.appointment_form select {
    display: inline-block;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #000;
    padding: 10px;
    width: 245px;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin: 0;
    margin-top: 2px;
    margin-left: 0px;
    margin-bottom: 5px;
    border-radius: 5px;
    padding-left: 9px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #ddd;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
    margin-bottom: 20px;
}
/* Hide arrow icon in IE browsers */
div.appointment_form select::-ms-expand {
    display: none;
}
/* Hover style */
div.appointment_form select:hover {
    border-color: #FFF;
}

/* Set options to normal weight */
div.appointment_form select option {
    font-weight:normal;
}

a.subscribe {
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 14px !important;
	letter-spacing: .2em !important;
	line-height: 1.2em !important;
	color: #FFF !important;
	background-color: #222222 !important;
	padding: 36px;
	padding-top: 14px;
	padding-bottom: 14px;
	cursor: pointer;
	display: inline-block;
	text-transform: uppercase;
	border-radius: 5px;
	-webkit-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	text-decoration: none !important;
	margin-bottom: 40px;
}

a.subscribe:hover {
	opacity: 0.5;
}

#event_details {
    position: absolute;
    z-index: 15;
    width: 280px;
    left: 50%;
    top: 50%;
    border-radius: 4px;
    background-color: #FFF;
    box-shadow: 1px 1px 5px 1px #888888;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    padding: 20px;
}

#event_details.open {
    visibility: visible;
    opacity: 1;
}

#event_details h3 {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
    font-size: 20px;
    color: #222;
    line-height: 120%;
    margin-bottom: 20px;
}

#event_details time {
	font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: #222;
    line-height: 120%;
}

#event_close {
	position: absolute;
	top: 20px;
	right: 20px;
	-webkit-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

#event_close:hover {
	opacity: 0.5;
}

#event_close i {
	font-size: 26px;
	color: #000;
}

#event_delete {
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 14px !important;
	letter-spacing: .2em !important;
	line-height: 1.2em !important;
	color: #FFF !important;
	background-color: #222222 !important;
	padding: 36px;
	padding-top: 14px;
	padding-bottom: 14px;
	cursor: pointer;
	display: inline-block;
	text-transform: uppercase;
	border-radius: 5px;
	-webkit-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	text-decoration: none !important;
	margin-bottom: 0px;
	margin-top: 30px;
}

#event_delete:hover {
	opacity: 0.5;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: #FFDD35 !important;
    opacity: 1 !important;
}

#calendar a, #calendar td {
	font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #000;
    font-size: 14px;
}

#calendar a, #calendar td.fc-list-event-time {
	color: #c4c4c4;
}

#calendar a, #calendar td.fc-list-day-text a {
	color: #c4c4c4;
}

#calendar a, #calendar td.fc-list-day-text {
	color: #000;
}

.fc .fc-list-event:hover td.fc-list-event-time {
	color: #000;
}

.fc-toolbar-title {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    color: #c4c4c4;
    letter-spacing: 1px;
    font-size: 18px !important;
    display: none;
}

.fc .fc-button-primary {
    background-color: #ec008d !important;
    border: 0 !important;
    font-family: "Roboto", sans-serif !important;
    font-weight: 400 !important;
    color: #000;
    letter-spacing: 1px;
    font-size: 14px;
    text-transform: uppercase !important;
}

.fc-button-active {
    background-color: #00adef !important;
}

.fc-event {
    color: #000 !important;
}

.fc-daygrid-event-dot {
    border: 4px solid #00adef !important;
}

.fc-v-event {
    background-color: #00adef !important;
    border: 0 !important; 
}

.fc-daygrid-event { 
    white-space: unset !important; 
}

.fc-timegrid-axis-cushion, .fc-timegrid-slot-label-cushion {
    font-family: "Roboto", sans-serif !important;
    font-weight: 400 !important;
    color: #000;
    letter-spacing: 1px;
    font-size: 12px;
}

.add-to-calendar a {
    color: #000;
}

.calendar_add {
    border: 1px solid;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
    cursor: pointer;
}

label.add-to-calendar-checkbox {
    margin-bottom: 10px;
}

.new-cal {
    text-transform: uppercase;
}

.fc-event-time, .fc-event-title {
    padding: 0 1px;
    white-space: normal;
}

@media only screen and (min-width: 1200px) {
    .fc-toolbar-title {
        display: block;
    }
}

@media only screen and (min-width: 1200px) {

}