/** 
 ChemiReg - web-based compound registration platform
 Written in 2017 by David Damerell <david.damerell@sgc.ox.ac.uk>, Brian Marsden <brian.marsden@sgc.ox.ac.uk>
 
 To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
 You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see <http://creativecommons.org/publicdomain/zero/1.0/>.
**/

body {
	color: #444444;
}

a {
	color: #00a1d6;
}

a:hover, a:focus {
	color: #23527c;
}

.structure_btn {
	min-width:300px;
}

.upload_td_wide {
	min-width:200px;
}

@media (max-width: 1024px) {

	body{
		display:flex !important;
		overflow: initial !important;
	}
	
	.selectize-dropdown {
		position: initial !important;
	}
	
	.search_results {
		display: block;
	}

	/* Force table to not be like tables anymore */
	.search_results thead {
		display: block;
	}

	.search_results tbody {
		display: block;
	}

	.search_results th {
		display: block;
	}

	.search_results tr {
		display: block;
	}

	.search_results td {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.search_results thead {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.search_results tr { border: 1px solid #ccc; }

	.search_results_td_narrow {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50% !important;
		overflow:hidden;
	}

	.search_td_wide {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;

		/*padding-left: 50% !important;*/
		overflow:hidden;
		min-width:30px;
	}

	.search_results td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		/*white-space: nowrap;*/
		max-width:100px;
		font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	
	.compound_table_field{
		min-width:initial!important;
	}

	/*
	Label the data
	*/
	/*.search_results td:nth-of-type(1):before { content: "Compound ID"; }
	.search_results td:nth-of-type(2):before { content: "Structure"; }
	.search_results td:nth-of-type(3):before { content: "Attachments"; }
	.search_results td:nth-of-type(4):before { content: "Supplier Name"; }
	.search_results td:nth-of-type(5):before { content: "Supplier ID"; }
	.search_results td:nth-of-type(6):before { content: "User"; }
	.search_results td:nth-of-type(7):before { content: "Actions"; }*/
	
	.search_results td:before { content: attr(column_name); }
	
	.progress_td {
		width: initial !important;
	}
	
	.progress_td >button {
		min-width: initial !important;
	}
	
	/* Upload fields */
	.upload_fields {
		display: block;
	}

	/* Force table to not be like tables anymore */
	.upload_fields thead {
		display: block;
	}

	.upload_fields tbody {
		display: block;
	}

	.upload_fields th {
		display: block;
	}

	.upload_fields tr {
		display: block;
	}

	.upload_fields td {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.upload_fields thead {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.upload_fields tr { 
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc; 
		margin-bottom:4px;
	}
	
	.upload_fields #_mol_upload_row {
		/* Override JavaScript style */
		display: block !important;
	}

	.upload_fields_td_narrow {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50% !important;
		overflow:hidden;
	}

	.upload_td_wide {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;

		padding-left: 50% !important;
		overflow:hidden;
		width:100px;
		min-width: 110px;
		text-align:initial !important;
		margin-left: 1px!important;
	}

	.upload_fields td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		/*white-space: nowrap;*/
		max-width:100px;
	}
	
	.upload_fields td:before { content: attr(column_name); font-weight:200;}

	.subtitle {
		display:none !important;
	}

	.button {
		font-size: 10px;
		padding: 1px 4px 1px 4px;
	}

	button {
		font-size: 10px;
		padding: 1px 4px 1px 4px;
	}

	.designed_by_section {
		font-size: 10px;
	}

	.compound_count {
		 -webkit-margin-before: 0px;
		margin-before: 0px;
		display:block !important;
	}

	.export_btn {

	}

	.compound_table_field {
		text-align:left !important;
	}

	#search_selection {
		width:120px;
	}
	
	#compounds_results {
		font-size: small;
	}
	
	#compounds_results > tr > td > div > div.selectize-dropdown.single.u-full-width {
		position: initial !important;
	}
	
	#project_selection {
		float: initial !important;
		right: initial !important;
	}
	

	#caption {
		display:none !important;
	}
	
	.compound_count {
		font-size:small;
	}
	
	.structure_btn {
		min-width:initial;
	}
	
	#title {
		display: none !important;
	}
	
	#project_selection {
		margin-right: initial;
		text-overflow: ellipsis;
	    overflow: hidden !important;
	    max-width:initial!important;
		width:100%;
	}
	
	#main_buttons{
		/*text-align:justify;*/
		text-overflow: ellipsis;
	    overflow: hidden;
		
	}
	
	#main_buttons  button{
		/*padding: 1px 10px 1px 10px;*/
		//max-width: 90px;
	    //text-overflow: ellipsis;
	    //overflow: hidden;
	}
	
	#project_selection :before {
		content: '';
		display:block;
	}
	
	#project_selection_container {
		display:block !important;
	}
	
	#compound_table_paging {
		position:fixed;
		bottom:0px;
		left:0px;
	}
	
	.login_field {
		display:initial !important;
	}
	
	.login_field_password_label {
		display: block !important;
	}
	
	.login_field_username_label {
		display: block !important;
	}
	
	.login_container {
		text-align:left !important;
    	margin: auto;
	}
	
	.title_image {
		width:300px;
		margin-left:initial;
		margin-right:initial;
	}
	
	.title{
		font-size:large;
		margin-top:10px;
		margin-bottom:10px;
		font-weight:bold;
	}
	
	.sub_title{
		font-size:medium;
		margin-top:10px;
		margin-bottom:10px;
	}
	
	#upload_section_heading {
		font-size: x-large;
	}
		
	#search_results_table {
		width:initial!important;
	}
}

/** Use mobile display for big screens for table */

.mobile-view .search_results thead {
	display: block;
}

.mobile-view .search_results tbody {
	display: block;
}

.mobile-view .search_results th {
	display: block;
}

.mobile-view .search_results tr {
	display: block;
}

.mobile-view .search_results td {
	display: block;
	min-height: 15px;
	line-height: 25px;
}

/* Hide table headers (but not display: none;, for accessibility) */
.mobile-view .search_results thead {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.mobile-view .search_results tr {
    border: 1px solid #ccc;
    border-bottom: 5px solid rgb(44, 90, 160);
 }

.mobile-view .search_results_td_narrow {
	/* Behave  like a "row" */
	border: none;
	border-bottom: 1px solid #eee;
	position: relative;
	padding-left: 50% !important;
	overflow:hidden;
}

.mobile-view .search_td_wide {
	/* Behave  like a "row" */
	border: none;
	border-bottom: 1px solid #eee;
	position: relative;

	/*padding-left: 50% !important;*/
	overflow:hidden;
	min-width:30px;
}

.mobile-view .search_results td:before {
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 45%;
	padding-right: 10px;
	/*white-space: nowrap;*/
	max-width: 200px;
	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mobile-view .compound_table_field{
	min-width:initial!important;
}

.mobile-view .search_results td:before { content: attr(column_name); }

.mobile-view #compound_table_results {
	margin-top: 15px;
}

.designed_by_section{
	text-decoration:underline;
}

.export_btn {
	float:right;
	margin-right:4px;
}

.compound_count {
	display: inline-block;
	margin-right:10px;
}

.compound_table_field {
	text-align:center;
}

.cell_modified {
	border: 1px dashed red;
}

.confirm_button {
	background-color: #33C3F0 !important;
	border: 1px solid #bbb !important;
	padding: 0 30px !important;
}

.cancel_button {
	color:#555 !important;
	border: 1px solid #bbb !important;
	background-color: transparent !important;
	padding: 0 30px !important;
}

.calculated_field {
	background-color: #e6e6d9;
}

.required_field {
	background-color: #e8ffe6;
}

.selectize-control input{
	height:initial!important;
}

#structure_editor td>div  {
   // background:white !important;
	//border:none !important;
	color:white;
}

#structure_editor td>img{
	filter: invert(100%);
}

#structure_editor td, #structure_editor th  {
	//background:white !important;
	border:none !important;
	padding: 0px 0px;
	text-align:center;
	
}

#structure_editor > table > tbody > tr:nth-child(3) > td > div{
	height:40px !important;
}

#compound_table_results > thead > tr > th  {
	white-space: nowrap;
	padding: 5px, 5px;
}



#structure_editor td {
	vertical-align:top;
	border:none !important;
	background-color: #33C3F0;
	color:white;
}

#structure_editor img {
	border:initial !important;
}

#structure_editor table  {
   // background:#152E33;
  // margin:auto !important;
  border-collapse: initial;
  border-spacing:2px;
  margin-left: auto;
  margin-right: auto;
}

.main_menu_followed:hover:after { color:grey}
.main_menu {
	color:grey;
	padding: 0 0;
	border: none;
	margin-bottom:0px;
}

.main_menu:hover {
	color: #2c5aa0;
}

.main_menu:active {
	color:rgb(44, 90, 160);
}

.screen_selected {
	color:rgb(44, 90, 160);
}

.changes {
	background-color:red;
}

.sweet-alert button {
	color:white !important;
}

#search > div > div > div{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    flex:1;
    //border-bottom: 1px solid grey;
}

#search_selection-selectized {
    width:100% !important;
}

/** New */

#search, #help {
	background: #2c5aa0;
}

input, button {
	border: 1px solid #888888;
	border-radius: 5px;
}

input:focus, button:focus {

}

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
	border: 1px solid #888888;
	border-radius: 5px;	
}

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
	border: 1px solid #2c5aa0;
}

.button-cr {
	background: #00a1d6;
	color: #ffffff;
	border: 1px solid #888888;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
	transition:	all .1s ease-out;
}

.button-cr:hover {
	background: #0082ad;
	color: #ffffff;
}

.header {
	position: relative;
	z-index: 1;
}

.header .switch-view {
	display: none;
	position: absolute;
	z-index: 1;
	bottom: -35px;
	right: 25px;
	width: 100px;
	height: 26px;
	line-height: 26px;
	cursor: pointer;
	background: #ffffff;
	border: 1px solid #888888;
	border-radius: 5px;
	text-align: center;
}

.header .switch-view:hover {
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
	border: 1px solid rgb(44, 90, 160);
}

#main_buttons {
	display: none;
	box-sizing: border-box;
	float: left;
	width: 100%;
	flex-direction: row;
	background-color: white;
	padding: 8px 15px;
	
	-webkit-box-shadow: 0px 2px 7px 3px rgba(7,34,73,0.4);
	-moz-box-shadow: 0px 2px 7px 3px rgba(7,34,73,0.4);
	box-shadow: 0px 2px 7px 3px rgba(7,34,73,0.4);
}

#main_buttons a.menu_logo {
	float: left;
	width: 6%;
	min-width: 90px;
	max-height: 41px;
	line-height: 100%;
	margin-right: 3%;
}

@media (max-width: 1024px) {
	#main_buttons a.menu_logo {
		width: 15%;
	}
}

.menu-items {
	float: left;
	width: 60%;
}

@media (max-width: 1024px) {
	.menu-items {
		width: 80%;
	}
}

#main_buttons a.menu_logo img {
	//display: block;
}

#main_buttons .main_menu {
	font-size: 13px;
	height: 41px;
	line-height: 41px;
	margin-right: 4%;
}

#main_buttons #main_menu_upload_history::before {
	//content: "|";
	//padding-right: 35px;
	//margin-left: -10px;
}

#main_buttons #main_menu_upload_history:hover:before {
	color: grey;
}

#main_buttons .main_menu.screen_selected, #main_buttons .main_menu:active {
	color: #2c5aa0;	
}

#main_buttons #project_selection_div {
	float: right;
	width: 28%;
	position: relative;
}

@media (max-width: 1024px) {
	#main_buttons #project_selection_div {
		width: 100%;
		margin-top: 5px;
	}
}

#main_buttons #project_selection_div label {
	float: right;
	width: 18%;
	text-align: right;
	margin-right: 3%;
	margin-bottom: 0;
	height: 41px;
	line-height: 41px;
}

@media (max-width: 1024px) {
	#main_buttons #project_selection_div label {
		max-height: 1px;
		visibility: hidden;
	}
}

#main_buttons #project_selection_div select {
	position: relative;
	z-index: 1;
	height: 36px;
	float: right;
	width: 79%;
	max-width: 400px;
	background: url('images/down-arrow.png') 88% 55% no-repeat;
	margin: 2px 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#main_buttons #project_selection_div select optgroup {
	background: #00a1d6;
        color: #ffffff;
}

#main_buttons #project_selection_div select optgroup option {
	background: #ffffff;
        color: #444444;
}

@media (max-width: 1024px) {
	#main_buttons #project_selection_div select {
		width: 100%;
		margin: 0;
		background-position-x: 93%;
	}
}

#main_buttons #project_selection_div label:after {
	position: absolute;
	color: #888888;
	top: 0;
	right: 3%;
	content: "+";
	font-size: 30px;
	font-weight: normal;
	line-height: 41px;
	visibility: visible;
}

@media (max-width: 1024px) {
	
	#main_buttons #project_selection_div label:after {
		right: 1.5%;
	}
}

#main_buttons #project_selection_div.show-special label:after {
	content: "-";
	line-height: 36px;
}

.selectize-input {
	box-shadow: none;
}

@media (max-width: 1024px) {
	//padding: 6px 2%;
}

/** Login */

#login .login-box {
	min-height: 350px;
	padding: 20px;
	box-shadow:	0px 8px 20px 0px rgba(0, 0, 0, 0.3);
}

#login_progress .login-progress-box {
	min-height: 220px;
	padding: 20px;
	box-shadow:	0px 8px 20px 0px rgba(0, 0, 0, 0.3);
}


#login .login-row {
	
}

#login .password-row {
	
}

/** Registration */


/** Session loading screen  */

#session_loading_screen .session-loading-screen-box {
	min-height: 220px;
	padding: 20px;
	box-shadow:	0px 8px 20px 0px rgba(0, 0, 0, 0.3);
}


/** Search */

#search .search-box {
	margin: auto;
	width: 85%;
	max-width: 1280px;
	height: 50%;
	min-height: 380px;
	//padding: 20px;
	background-color: white;
	border-radius: 10px;
	box-shadow:	0px 8px 20px 0px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
	#search .search-box {
		min-height: 430px;
	}
}

#search .search-box h3 {
	padding: 20px;
	margin: 0;
}

#search .search-box .search-inner {
	padding: 10px 20px 45px 20px;
	border-bottom: 2px solid rgb(44, 90, 160);
}

#search .search-box .search-inner > div {
	max-width: 85%;
	margin-right: 15px;
}

#search .search-box .search-inner > div > .selectize-input {
	height: 38px;
	line-height: 22px;
	border-color: #888888;
	border-radius: 5px;
}

#search .search-box .search-inner > div > .selectize-input.input-active {
	border: 1px solid #2c5aa0;		
}

#search .search-box .search-inner #search_draw_structure_button {
	border-color: #888888;
	margin-right: 15px;	
}

#search .search-box .search-inner #search_button_search {
	font-size: 22px;
	line-height: 100%;
	background: #00a1d6;
	color: #ffffff;
	border-color: #888888;
	border-radius: 5px;
	margin-right: 35px;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
	transition:	all .1s ease-out;
}

#search .search-box .search-inner #search_button_search:hover {
	background: #0082ad;
}

#search .search-box .search-inner #search_wildcard_label {
	display: block;
	position: relative;
	height: 25px;
	padding-left: 28px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#search .search-box .search-inner #search_wildcard_label #wildcard_search {
	position: absolute;
  	opacity: 0;
  	cursor: pointer;
  	height: 0;
  	width: 0;
  	margin: 0;
}

#search .search-box .search-inner #search_wildcard_label .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #e0e0e0;
	border-radius: 4px;
	transition:	all .1s ease-out; 
}

#search .search-box .search-inner #search_wildcard_label .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 4px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#search .search-box .search-inner #search_wildcard_label #wildcard_search:checked ~ .checkmark:after {
	display: block;	
}

#search .search-box .search-inner #search_wildcard_label:hover .checkmark {
	background-color: #cccccc;
}


#search .search-box .search-inner #search_wildcard_label #wildcard_search:checked ~ .checkmark {
	background-color: #00a1d6;
}

#search .search-box .upload-buttons {
	float: left;
	margin: 0 auto;
}

#search .search-box .button-text, #search .search-box .button-icon {
	float: left;
	box-sizing: border-box;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	margin-right: 15px;
	transition:	all .1s ease-out;
}

#search .search-box .button-text {
	font-size: 13px;
	color: #2c5aa0;
	height: 65px;
	width: 18%;
	min-width: 150px;
	padding: 15px;
	line-height: 100%;
}

@media (max-width: 1024px) {
	#search .search-box .button-text {
		float: left;
		width: 35%;
		height: 50px;
		line-height: 16px;
	}
}

#search .search-box #upload_upload_button {
	margin-right: 0;	
}

#search .search-box .button-text.button {
	background: #00a1d6;
	color: #ffffff;
	border: 1px solid #888888;
}

#search .search-box .button-text.button:hover {
	background: #0082ad;
}

#search .search-box .button-text:not([disabled]) {
	background: #00a1d6;
	color: #ffffff;
}

#search .search-box .button-text:not([disabled]):hover {
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
	background: #0082ad;
}

#search .search-box .button-text.button[disabled] {
	background: #ffffff;
	color: #2c5aa0;
}

#search .search-box .button-text.passed {
  background: #22ad68;
}

#search .search-box .button-text.passed:hover {
	background: #1c8c54;
}

#search .search-box .button-text.failed {
	background: #cf2714;
}

#search .search-box .button-text.failed:hover {
	background: #ab2110
}


#search .search-box .button-text.fussy {
         background: #22ad68;
        //background: #ffc200;
}

#search .search-box .button-text.fussy:hover {
        background: #1c8c54;
        //background: #d8a400;
}

#search .search-box .button-icon {
	width: 45px;
	height: 45px;
	line-height: 18px;
	cursor: auto;
	background-position: center;
	background-color: #ffffff;
	padding: 10px;
	margin-top: 10px;
}

@media (max-width: 1024px) {
	#search .search-box .button-icon {
		margin-top: 2px;
		margin-bottom: 2px;
	}
}

#search .search-box #upload_drop_component {
	padding: 10px 20px 20px 20px;
}




/** Compounds table */

#results #compound_table_results tbody tr {
	border-top: none;
}