:root {
  --base-h1: 192;
  --base-s1: 91%;
  --base-l1: 34%;
 /*   --base-h3: calc(var(--base-h1) - 176); Get rid of calc here to be able to use the value more easily, e.g. for plotly. */
  --base-h3: 16; 
  --base-s3: 100%;
  --base-l3: 66%;
  --color0: white;
/*  --color1: #0887A7;*/
/*  --color1: hsla(var(--base-h1), 91%, 34%, 100%);*/
  --color1: hsla(var(--base-h1), var(--base-s1), var(--base-l1), 100%);
  --color2: #888;
/*  --color3: coral;*/
  --color3: hsla(var(--base-h3), var(--base-s3), var(--base-l3), 100%);
  --color4: #ddd;
  --color5: black;
/*  --color6: lightblue;*/
  --color6: hsla(var(--base-h1), var(--base-s1), var(--base-l1), 30%);
  --color7: darkgray;
/*  --color8: #d9edf7;*/
  --color8: hsla(var(--base-h1), 100%, 40%, 20%);
/*  --color9: #bce8f1;*/
  --color9: hsla(var(--base-h1), var(--base-s1), var(--base-l1), 30%);
  --color10: rgba(173, 216, 230);
  --color11: hsla(var(--base-h1), 50%, 90%, 100%); /* row hover bg */
  --base-h12: 311;
  --base-s12: 85%;
  --base-l12: 79%;
  --color12: hsla(var(--base-h12), var(--base-s12), var(--base-l12), 100%);
}

/*
From https://fonts.googleapis.com/icon?family=Material+Icons
*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/material-icons.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*
From https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap
Consider also
Roboto Condensed
Pragati Narrow
Archivo Narrow
*/
/* cyrillic-ext */
@font-face {
  font-family: 'TheDB Custom';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
/*  src: url(https://fonts.gstatic.com/s/ptsansnarrow/v12/BngRUXNadjH0qYEzV7ab-oWlsbCLwR2oefDofMY.woff2) format('woff2');*/
  src: url(fonts/BngRUXNadjH0qYEzV7ab-oWlsbCLwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'TheDB Custom';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
/*  src: url(https://fonts.gstatic.com/s/ptsansnarrow/v12/BngRUXNadjH0qYEzV7ab-oWlsbCCwR2oefDofMY.woff2) format('woff2');*/
  src: url(fonts/BngRUXNadjH0qYEzV7ab-oWlsbCCwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'TheDB Custom';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
/*  src: url(https://fonts.gstatic.com/s/ptsansnarrow/v12/BngRUXNadjH0qYEzV7ab-oWlsbCIwR2oefDofMY.woff2) format('woff2');*/
  src: url(fonts/BngRUXNadjH0qYEzV7ab-oWlsbCIwR2oefDofMY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'TheDB Custom';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
/*  src: url(https://fonts.gstatic.com/s/ptsansnarrow/v12/BngRUXNadjH0qYEzV7ab-oWlsbCGwR2oefDo.woff2) format('woff2');*/
  src: url(fonts/BngRUXNadjH0qYEzV7ab-oWlsbCGwR2oefDo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
ivastrik% perl -e '$/=undef; $s=<>; $s=~s/\!important//gi; while($s=~/(\#[a-f0-9]{3,6})/gmsi){print lc($1),"\n";}while($s=~/color:\s*(\S+?)[;\s]/gmsi){print lc($1),"\n";}while($s=~/(rgb.+?\))/gmsi){($t=$1)=~s/\s//g;print lc($t),"\n";}' ../WebApp/public/stylesheet.css|sort | uniq -c | sort -r
  83 #0887a7
  47 white
  32 coral
  11 #888
   8 #ddd
   7 black
   6 lightblue
   5 transparent
   4 rgba(220,220,220,0.75) 
   4 rgba(0,0,0,0)
   4 darkgray
   4 #bfbfbf
   3 rgba(173,216,230,0.5)
   2 rgba(256,256,256,0.7)
   2 rgba(256,256,256,0.5)
   2 rgba(0,0,0,0.87)
   2 rgb(66,66,66)
   2 red
   2 lightgrey
   2 #ff9999
   2 #ff0000
   2 #f2f2f2
   2 #d9edf7
   2 #d8ecf2
   2 #cdcdcd
   2 #bce8f1
   2 #aaa
   2 #9999ff
   2 #31708f
   2 #0000ff
   1 unset
   1 rgba(255,127,80,0.5)
   1 rgba(255,
   1 rgba(173,216,230,0.2)
   1 rgba(0,0,0,0.12)
   1 rgb(8,135,167)
   1 grey
   1 #d6ecf3
   1 #c32f10
   1 #56b7d9
   1 #3b5998
   1 #00aced
*/

.gridWrapper{
    position: fixed;
    height: calc(100vh - 61px);
    width: 100vw;
    left: 0px;
    top: 61px;
    z-index: 60;
    background: var(--color0);
}

.gridTable{
    position: fixed;
    height: calc(100vh - 61px);
    width: 100vw;
    left: 0px;
    top: 61px;
    z-index: 60;
    background: var(--color0);
}
.grid2excell{
    position: fixed;
    left: 0px;
    top: 61px;
    color:var(--color0);
    height:20px;
    width: 100%;
    text-align: center;
    background: lightGreen;
}

.mockTable{
  display:block;
  width:0px;
  height:0px;
  overflow:hidden;
  opacity:0;
}

.comparisonWrapper{
    position: fixed;
    height: calc(100vh - 61px);
    width: 100vw;
    left: 0px;
    top: 61px;
    z-index: 60;
    background: var(--color0);
    overflow-y: scroll;

   -webkit-transition: .2s ease-in-out;
   -moz-transition: .2s ease-in-out;
   -ms-transition: .2s ease-in-out;
   -o-transition: .2s ease-in-out;
   transition: .2s ease-in-out;  
}

/*color of spll check in rte docs*/
ng-quill-editor.ng-invalid .ql-container {
    border: 1px dashed var(--color3);
}

.ql-editor {
  padding-left: 0px;
  padding-right: 0px;
}

.ql-snow a {
    color: var(--color1);
}

.ql-snow a:hover, .ql-snow a:focus {
  color: var(--color3);
}

.popover-content .ql-container {
  max-width: 250px;
}

.plotImgPrewWidthLabel{
  position: absolute;
  left: 45%;
  top:20px;

}

.plotImgPrewHeightLabel{
  position: absolute;
  top: 30%;
  left:-22px;
  width:100px;

  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

div.jsoneditor,
div.jsoneditor-menu {
	border:0;

}
div.jsoneditor-menu {
      background-color: var(--color4);
}

.toggleTablePanPad{
	position: fixed;
	width:200px;
	height:100px;
	display: block;
	left:calc(50vw - 100px);
	bottom:25px;
	opacity:.4;
	outline:2px solid var(--color1);
	z-index: 75;
	cursor:all-scroll;
	background: var(--color6);
}

.cg-busy-wrp1 .cg-busy-default-sign {
  position: fixed;
  top: calc(50vh - 23px);
}

.cg-busy-wrp2 .cg-busy-default-sign {
  top: calc(50% - 23px);
}

.graphPromiseClass div div{
	border:0;
	background:none;
	box-shadow:none;
}
.graphPromiseClass .cg-busy-default-spinner div {
	background: var(--color3);
}

.graphGenerator{
  position: fixed;
  height: calc(100vh - 159px);
  width: 100vw;
  left: 0px;
  top: 159px;
  background: var(--color0);
  overflow-y: scroll;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -ms-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;  
}

.mobileViewgraphGenerator{
  position: fixed;
  height: calc(100vh - 93px);
  width: 100vw;
  left: 0px;
  top: 93px;
  background: var(--color0);
  overflow-y: scroll;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -ms-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;  
}
  
.graphGeneratorBubbled{
    position: fixed;
    height: 0;
    width: 0;
    left: 100vw;
    top: 100vh;
    z-index: 60;
/*   -webkit-transform: translate3d(-100%,0,0);
   -moz-transform: translate3d(-100%,0,0);
   -ms-transform: translate3d(-100%,0,0);
   -o-transform: translate3d(-100%,0,0);
   transform: translate3d(-100%,0,0);  */
}

.graphGeneratorWrapper{
	width:100%;
	position:relative;
	height:auto;
}

.graphGeneratorView{
	background: var(--color0);
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  overflow:scroll;
/*  -webkit-animation: fadein 1s;
     -moz-animation: fadein 1s;
      -ms-animation: fadein 1s;
       -o-animation: fadein 1s;
          animation: fadein 1s;*/
}


@keyframes fadein {
    from { opacity: 0;min-height:0vh;height:0%; }
    to   { opacity: 1; min-height:100vh;height:100%;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; min-height:0vh;height:0%;}
    to   { opacity: 1; min-height:100vh;height:100%;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0;min-height:0vh;height:0%; }
    to   { opacity: 1; min-height:100vh;height:100%;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0;min-height:0vh;height:0%; }
    to   { opacity: 1; min-height:100vh;height:100%;}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; min-height:0vh;height:0%;}
    to   { opacity: 1;min-height:100vh;height:100%; }
}

.graphBubble{
 position: fixed;
    width: 50px;
    height: 50px;
   
    bottom: 2px;
    right: 2px;
    background: var(--color3);
   
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    color: var(--color0);
    font-weight: bolder;
    -webkit-animation: bubbleOn .2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: bubbleOn .2s; /* Firefox < 16 */
        -ms-animation: bubbleOn .2s; /* Internet Explorer */
         -o-animation: bubbleOn .2s; /* Opera < 12.1 */
            animation: bubbleOn .2s;
}
@keyframes bubbleOn {
    from { bottom:500px; }
    to   { bottom:2px;}
}

/* Firefox < 16 */
@-moz-keyframes bubbleOn {
    from {  bottom:500px;}
    to   { bottom:2px;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes bubbleOn {
    from { bottom:500px; }
    to   { bottom:2px;}
}

/* Internet Explorer */
@-ms-keyframes bubbleOn {
    from { bottom:500px; }
    to   { bottom:2px;}
}

/* Opera < 12.1 */
@-o-keyframes bubbleOn {
    from { opacity: .4; bottom:500px;}
    to   { opacity: 1;bottom:2px;}
}

.mergeYbtn{
	border: 2px solid var(--color6);
  height: 30px;
  width: 200px;
  margin-left: 65px;
  text-align: center;
  line-height: 25px;
  margin-top: 10px;
  cursor:pointer;
}

.graphTypeBtn{
	cursor: pointer;
  text-align: center;
  width: 200px;
  margin: 0 auto;
  margin-bottom: 10px;
  border: 2px solid var(--color6);
}

@-webkit-keyframes slideInOnLoad {
  0% {

    right: -235px;
  }
  50% {

    right: -5px;
  }  
  100% {

    right: -235px;
  }
}

/*menubar that appears on hover of a chart(download png image, zoom etc....) this avoids it overlapping the header bar*/
.js-plotly-plot .plotly .modebar {
  z-index:40!important;
  margin-right: 80px;
  margin-top: 10px;
}

@media (max-width: 960px) {
  .js-plotly-plot .plotly .modebar {
    display: none!important;
  }
}

/* This seems the only(?) way to get modebar hidden on e.g. a phone. */
/* https://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen */
@media (-moz-touch-enabled: 1), (pointer:coarse), (max-width: 960px) {
  .js-plotly-plot .plotly .modebar {
    display: none!important;
  }
}

select>option:hover {
  background-color: var(--color6);
    background: var(--color6);
  color:var(--color1);
}

.filteroperationselector{
  float: left;
}

.filteroperationselector select{
	height:25px;
	width:25px;
	background: #f2f2f2;
 	text-indent: 2px;  /*	copromise bw FF vs Safari and Chrome */
 	font-size: 16px;
 	border: 1px solid var(--color6);
 	border-radius: 0;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	-ms-appearance: none;
 	-o-appearance: none;
 	appearance: none;
 	cursor:pointer;
}

@-moz-document url-prefix() {
  .filteroperationselector select {
    text-indent: 0px;
  }
}

select::-ms-expand {
    display: none;
}

.mobileSearch .filteroperationselector select{
	height:45px;
	width:45px;
	background: #f2f2f2;
 	text-indent: 2px;  /*	copromise bw FF vs Safari and Chrome */
 	font-size: 20px;
 	border: 1px solid var(--color6);
 	border-radius: 0;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	-ms-appearance: none;
 	-o-appearance: none;
 	appearance: none;
 	cursor:pointer;
}

.mobileSearch input {
	width:100%;
	padding-left:48px;
	border:1px solid var(--color6);
	height:45px;
	font-size: 20px;
	border-radius: 0;
}

.mobileSearch button {
	border: 2px solid var(--color1);
	color:var(--color3);
	height:45px;
	font-size: 20px;
}

/*drag and drop tags placeholder for drop*/
.placeholderTag {
    background: var(--color3);
   	width:20px;
   	height:20px;
   	margin-right:10px;
   	margin-left:5px;
   	margin-top:5px;
   	margin-bottom:5px;
   	border-radius: 25px;
   	float:left;
    visibility: visible;
}

.settingsPanel{
	width:100%;
	padding-left:20px;
	padding-right:20px;
	position: relative;

}
 
.fixedHeader {
  position:fixed;
  z-index: 1;
  top:60px;
  background:var(--color0);
  width:100%;
  overflow-x:auto;
}

.File-editabletable .fixedHeader {
  width:calc(100vw - 6px);
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

#menuPanelBtn{
	position: fixed;
    z-index: 2;
    color: var(--color0);
    top: 20px;
    left: 2em;
}

#menuPanelBtn:hover{
	color:var(--color3);
	cursor: pointer;
}

/*this is the form for the login*/
@media (min-width: 768px) {
    .omb_row-sm-offset-3 div:first-child[class*="col-"] {
        margin-left: 25%;
    }
}

.omb_login .omb_authTitle {
    text-align: center;
	line-height: 300%;
}
	
.omb_login .omb_socialButtons a {
	color: var(--color0);
	opacity:0.9;
}
.omb_login .omb_socialButtons a:hover {
    color: var(--color0);
	opacity:1;    	
}
.omb_login .omb_socialButtons .omb_btn-facebook {background: #3b5998;}
.omb_login .omb_socialButtons .omb_btn-twitter {background: #00aced;}
.omb_login .omb_socialButtons .omb_btn-google {background: #c32f10;}
.omb_login .omb_loginOr {
	position: relative;
	font-size: 1.5em;
	color: #aaa;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.omb_login .omb_loginOr .omb_hrOr {
	background-color: #cdcdcd;
	height: 1px;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

.omb_login .omb_loginOr .omb_spanOr {
	display: block;
	position: absolute;
	left: 50%;
	top: -0.6em;
	margin-left: -1.5em;
	background-color: var(--color0);
	width: 3em;
	text-align: center;
}			

.omb_login .omb_loginForm .input-group.i {
	width: 2em;
}

.omb_loginForm > div, .omb_loginForm > button {
  margin-bottom: 10px;
}

/*.omb_login .omb_loginForm  .help-block {
    color: red;
}*/

@media (min-width: 768px) {
    .omb_login .omb_forgotPwd {
        text-align: right;
		margin-top:10px;
 	}		
}

.loginWrapper .btn{
	border-radius: 0;
	background-color: var(--color0);
	border:2px solid var(--color7);
	color:var(--color7);
/*	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;*/
}

.loginWrapper .btn:hover{
	border-radius: 0;
	background-color: var(--color7);
	border:2px solid var(--color7);
	color:var(--color0);
}

.loginWrapper .input-group span{
	border-radius: 0;
	background-color: var(--color0);
	border: 2px solid var(--color7);
	color:var(--color7);
	border-right: 0;
}

.loginWrapper .input-group input{
	border-radius: 0;
	background-color: var(--color0);
	border: 2px solid var(--color7);
	color:var(--color7);
	box-shadow: 0;
}

.btn:active, .btn:focus{
  outline:0!important;
}

.form-control:focus, .form-control:active {
  border-color: var(--color6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0);
}

.greedycolumn { width: 100%;height:20px!important; }

.chromosome { border-color: grey; border-style: solid; border-width:thin; text-align: center; font-size: 90%; }
.diploid { background-color: lightgrey; }
.heterozygous_deletion, .deletion { background-color: #9999FF; }
.homozygous_deletion { background-color: #0000FF; }
.gain { background-color: #FF9999; }
.high_level_amplification { background-color: #FF0000; }
.deletion { background-color: rgba(0,0,255,0.5); }
.amplification { background-color: rgba(255,0,0,0.5); }
.segmentedhorizontalbar .segment {
  height:22px;
  position: absolute;
  min-width: 1px;
}

html {
  background-color: var(--color0);
}

/* This is to override stuff in angular-material.css. */
body, button, html, input, select, textarea {
  font-family: 'TheDB Custom', 'Arial narrow', Arial, sans-serif;
}

/*this avoids annoying mini scroll left and right of howl htm body*/
body {
/*	overflow-x:hidden!important;*//* This screws up Angular Material chips with autocomplete */
/*	display:none;*//* This is just weird. */
	color: var(--color2);
}

body h1{
	color:var(--color3);
}

body h3{
	color:var(--color1);
	white-space : normal;
	font-weight: bold; 
}

body a{
	text-decoration: none !important;
}

.mobileView .highlighter span{
	opacity:.4;
}

.mobileView .personTimelineImg plotly {
  float: left;
}

.mobileView .personTimelineImg > div {
  width: 100%;
  overflow-x: scroll;
}

.graphGenerator plotly div.js-plotly-plot {
  width: 100%;
  height: 100%;
}

.highlighter {
	width: 100%; 
	position: absolute;      
	padding:6px 12px;
	margin-left: 1px;
	color: var(--color0);
	font-size: 14px;
	line-height: 1.42857143; 
}

.highlighter span {
  color: red;
  background: red;
  opacity:.4;
}

textarea {
  position: relative;
  background-color: transparent;
  font-size: 14px;
  width: 100%;
}

.form-control{
  background-color: transparent;
}

.caption span.glyphicon {
    color:var(--color1);
    vertical-align:bottom;
    opacity:0.7;
}

.alert-info {
    background-color: var(--color8);
    border-color: var(--color9);
}

.alert-info:hover{
	border:1px solid var(--color1) !important;
}

.classTitle{
	position: fixed;
    z-index: 2;
    top: 5px;
    left: 6em;
}
.classTitle h3{
	color:var(--color0);
}

.caption1{
	height:80px;
	overflow: hidden;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .caption1{height: auto; }
}

/*this expands mobile blocks in phone view to mas height showing alll the content*/
/*.caption {
	height:auto;
}*/

.saveBtnWrap{
	position: fixed;
	left:0px;
	bottom:0px;
	z-index: 1;
	width:100%;
}

.saveBtn{
	cursor: pointer;
    opacity: .7;
    width: 100%;
    height: 30px;
    background-color: var(--color0);
    color: var(--color3);
    text-align: center;
    line-height: 30px;
    font-size: .85em;
    font-weight: bolder;
    text-decoration: none;
    outline: 2px solid var(--color3);
}

.saveBtn:hover {
	opacity: .9;
    background-color: var(--color3);
    color: var(--color0);
}

.sortMenBtnSearch{
	cursor:pointer;
	opacity: .7;
	width: 100%;
	height: 30px;
	background-color: var(--color0);
	color: var(--color1);
	
	text-align: center;
	
	font-size: 1em;
	font-weight: bolder;
	text-decoration: none;
	outline:2px solid var(--color1);


}
.sortMenBtnSearch span{
	line-height: 30px;
}

.sortMenBtnSearch:hover{
	background-color: var(--color0);
	color:var(--color3);
	outline:2px solid var(--color3);

}

.bookmarkInfo{
	position:absolute;
  bottom: 26px;
  left: 29px;
	opacity:.7;
}

.addEntryBtn p{
		font-size: large;
}
.addEntryBtn{
	opacity:0.5;
	float:right;
	margin:10px;
	width:35px;
	height:35px;
	border-radius:50%;
	line-height:35px;
	text-align:center;
	background:none;
	behavior: url(PIE.htc); /* remove if you don't care about IE8 */ 
	border: 2px solid var(--color0);
	color:var(--color0);
	font-size: 2em;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;

}

.addEntryBtn:hover {
	/*background:var(--color0);*/
	float:right;
	margin:10px;
	width:35px;
	height:35px;
	border-radius:50%;
	line-height:35px;
	text-align:center;
	background:none;
	behavior: url(PIE.htc); /* remove if you don't care about IE8 */ 
	border: 2px solid var(--color3);
	opacity:0.7;
	color:var(--color3);
}

.caption table p{
    margin-left: 5px;
    color: var(--color3);
    vertical-align: bottom;
    padding-right: 10px;
}

.caption p {
	color:var(--color1);
}

.caption span {
	color:var(--color3);
	opacity:0.7;
}

.font_size_1_5_em {
    font-size: 1.5em;
}

.userAccount a:link {
    color: var(--color1);
	text-decoration: none;
}
.userAccount a:visited {
    color: var(--color1);
	text-decoration: none;
}
.userAccount a:hover {
    color: var(--color3);
	text-decoration: none;
}

.userAccount{
	float:right;
	margin-left: 5px;
	margin-right: 10px;
}
.userAccount span{
	line-height: 50%;
	margin-left: 5px;
	margin-right: 5px;
}

/* This sets bar size, position and colour */
.menubar {
  z-index: 2; /* to work with angular material selects and autocomplete*/
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: var(--color1);
  transition: all 1s ease-out 0ms;
}
/* This places the menu */
.menubar .menu {
	float: right;
	width:auto;
	height: 45px;
	overflow: hidden;
	margin-top: 12px;
	font-weight: bold;
}
/* These fine-tune the individual menu items */
.nav {
	padding-top: 8px;
	float: left;
	margin-right: 25px;
	color:var(--color0);
}
.nav img {
	width:23px; 
	height:23px;
	border: 1px solid var(--color0);
}
.nav a {
	color: var(--color0);
}

.menuM{
	position: fixed;
	z-index: 101;
	width: 100%;
	height: 60px;
	display: none;
	bottom: 0;
	left: 0;
	background-color: var(--color1);
}

.innerMenuM{
	margin: 0 auto;
	margin-top: 3px;
	width: 300px;
}

.menuMtable{
	width: 100%;
	border: 0;
	text-align: center;
}

/*.logo:hover {
	-webkit-filter: blur(4px);
	-moz-filter: blur(4px);
	-o-filter: blur(4px);
	-ms-filter: blur(4px);
	filter: blur(4px);
}
*/
.logo{
  position: fixed;
  width: 300px;
  left: calc(50% - 150px);
}

/*close modal panel button*/
.closeModal{
	color:var(--color1);
	margin:5px;
	float:right;
 	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}
.closeModal:hover{
	color:var(--color3);
	cursor:pointer;
	-webkit-transform: rotate(360deg);  
      -ms-transform: rotate(360deg);  
          transform: rotate(360deg);  
}

/*responsive media query stages*/
@media (max-width: 800px) {
	.classTitle{display: none;}
}

@media (min-width: 801px) {
	.classTitle{display: block;}
}

.panel-primary .superResponsive td:nth-child(1) {
	border-right-color: var(--color0); 
} 

.panel-primary .superResponsive th:nth-child(1) {
	border-right-color: var(--color0);
}

.expandSearch{
	top:61px;
	z-index: 1;
	position:fixed;
	width:100%;
}

.modalPanelInput{
	border: 2px solid var(--color1);
	color:var(--color3);
	height:40px;
	opacity:0.7;
	font-size: 1em;
	margin:0 auto;
	margin-bottom: 20px;
	background: var(--color0);
}

.editGridCell p {
	color:var(--color1);
}

/*calendar button in editable table*/
.editGridCell .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group{
	height:22px;
	width:10px;
}
.editGridCell .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > button.btn.btn-default{
	height:22px;
	width:10px;
	line-height: 22px!important;
}
.editGridCell .input-group .input-group-btn button .glyphicon {
  top: -5px;
  left: -6px;
}
.editGridCell .input-group .input-group-btn input {
  width: 64px;
}
.tableWrap{
	overflow: scroll;
}

.superResponsive{
  border-collapse:collapse;
	white-space: nowrap;
	background:var(--color0);
}

.superResponsive tr:hover {
  background: var(--color11);
}

.superResponsive tr.removeHoverBg:hover {
  background: none;
}

.superResponsive .tableColumnsDocs, .tableHead .tableColumnsDocs {
    border: 1px solid var(--color6); 
    vertical-align: top;
  	position: relative;
}

.tableColumnsDocs {
  line-height: 1.5;
  padding: 4px;
}

.tableColumnsDocs .tag {
  line-height: 1.2;
  text-overflow: ellipsis;
}

/*.tableColumnsDocs .btn {
  padding: unset;
  border: none;
  background-color: unset;
}*/

.tableColumnsDocs > div > div.dae1 > div > span > a.btn,
.tableColumnsDocs > div > dboddattributeeditor > p > span > div > span > .btn {
  padding: unset;
  border: none;
  background-color: unset;
}

.tableColumnsDocs p {
  margin: unset;
  text-overflow: ellipsis;
  overflow: hidden;
}

.row > .attvalue > p {
  margin: unset;
}

.tableColumnsDocs .timePicker .btn-link {
  display: none;
}

.tableColumnsDocs .timePicker {
  overflow: hidden;
}

.tableColumnsDocs .dae2 md-radio-group {
  display: block;
  margin-top: 3px;
}

.tableColumnsDocs .dae2 md-checkbox {
  margin-top: 4px;
}

.tableColumnsDocs .input-group-addon, .tableColumnsDocs .input-group-btn {
  vertical-align: bottom;
}

.generic_editortemplate .attname {
  padding-top: 6px;
}

.attvalue .tag {
  line-height: 1.5;
}

.contentValues{
	display:block;
  min-height: 20px; 
  overflow: hidden;
  width:100%;
  height: 25px;
  padding: 5px;
}

.contentValuesDecompressed{
	display:block;
  min-height: 25px;
  overflow: visible;
  width:100%;
  height: auto;
  padding: 5px;
}

.editGridCell input{
	height:22px!important;
	width:100%!important;
	border-radius: 0;
    border: 1px solid var(--color6);
    padding:0;
}

.editGridCell:hover .contentValuesDecompressed{
	visibility: hidden;
}

.editGridCell:hover .contentValues{
	visibility: hidden;
	overflow:visible;
}

.editGridCell:hover{
	background-image: url('/images/edit.png');
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: center;
}

.attconflictwarning {
  position: absolute;
  right: 5px;
  top: 6px;
}

.row .attconflictwarning {
  position: absolute;
  right: 25px;
  top: 6px;
}

.attributeissue {
  background-color: rgba(255, 127, 80, 0.5);
}

.tooltip-multiline {
  height: auto;
  white-space: pre-line; 
}

.tooltip-multiline2 {
  height: auto;
  max-width: 50%;
  white-space: normal;
  font-size: 2rem;
}

.contentDecompressed {
    min-height: 24px;
    overflow: hidden;
    width:auto;
    height: auto;
    white-space: normal;
    word-break: break-word;
}

/*.contentFiller{
	display:none;
}
.superResponsive tr:hover .contentFiller{
	display: block;
	max-height: 20px;
	padding: 5px;
}*/

.content {
  min-height: 24px;
  overflow: hidden;
  width:auto;
  height: 24px;
}

td.Person-dummy .content, td.Person-dummy .contentDecompressed {
  padding: 0px;
}

.superResponsive tr:hover .content {
    height: auto;
    position: absolute;
    z-index: 1;
    background: var(--color11);
    overflow: hidden;
    width:100%;
    min-height: 27px;
    padding: 5px;
    margin: -5px;
}

.superResponsive td.tableColumnsDocs .content > p, .superResponsive td.tableColumnsDocs .content > div > p, .superResponsive td.tableColumnsDocs .contentDecompressed > p, .superResponsive td.tableColumnsDocs .contentDecompressed > div > p {
  overflow: hidden;
  text-overflow: ellipsis;
  margin:0;
}

.superResponsive td.tableColumnsDocs {
  max-width: 400px;
}

.superResponsive  p.nomaxwidth {
  max-width: none;
}

.superResponsive  p:hover {
  overflow: visible;
}

/*use span with class clear to clear floats withour breaking lines*/
span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
} 

/*for virtual karyotype chart thing*/
.superResponsive td div > .CNVideogram{
	overflow: initial;
  height: 25px;
  margin-top:-4px;
}

.CNVideogram {
/*	min-width:1000px!important;*/
	max-width:100%;
	padding: 5px;
}

.caption .CNVideogram, .panel .CNVideogram {
	min-width: 100%!important;
  width: auto !important;
  height: 20px;
}

.tag a{
	color:var(--color1);
}

.tag {
  padding: 3px 3px;
  margin: 2px 4px 2px 0px;
  border-radius: 3px;
  border: 1px solid var(--color1);
  background-color: var(--color0);
  min-height: 20px!important;
  float: left;
  max-width: 100%;
  position:relative;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  white-space: nowrap;
}

.tag a:first-child {
  margin-right: 15px;
}

.tag span:first-child {
  margin-right: 15px;
}

.tag a.glyphicon-remove {
  position: absolute;
  right: 2px;
  top: 5px;
  background-color:rgba(256,256,256,0.5);
}

.tag:hover a.glyphicon-remove {
  color: var(--color3);
  background-color: unset;
}

.sortableTag{
	cursor:move;
}

.tag:hover  {	
	background-color: var(--color1);
  color: var(--color0);
}

.tag:hover a { 
  color: var(--color0);
}

.tag a:hover p{
	color:var(--color0)!important;
}

/*grey opaque background when modal windows are open*/
.modal-backdrop {
	position: fixed;
	top: 60px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
	background-color: var(--color6);
	opacity:0.7; 
}

.caption a:hover p, .caption a:hover h3 {
  color:var(--color3)!important;
}

.caption input, .caption textarea{
	color:var(--color1)!important;
}

.caption p{
  white-space: normal;
}

.loginWrapper{opacity:1;width:90%;margin: 0 auto; padding-top: 50px;}
.loginWrapper h2{color:var(--color3);}

.systemFeatures{
	display:none;
}

.caption a{
	color:var(--color1)!important;
}
.caption a:hover{
	color:var(--color3)!important;
}
.ad .caption h3 {
  color: var(--color3);
}
.ad .caption a:hover h3 {
  color: var(--color1);
}

/*this is for the color style of the dbref option drop down*/
.dropdown-menu > li > a{
    color: var(--color1)!important;
}

.dropdown-menu > li:hover > a, .dropdown-menu > li:hover > form {
    background-color:var(--color6);
    background:var(--color6);
    color: var(--color0)!important;
}

.dropdown-menu > li > form{
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: var(--color1)!important;
}

.dropdown-menu > li.active * {
  background-color: var(--color6)!important;
}

.unsavedRow {	
  background-color: rgba(173, 216, 230, 0.5)!important;
}

.tableHead th{
    border:1px solid var(--color6);
    font-weight: normal;
    padding:5px; /* 5 rather than 7px to be in sync with the table body */
    white-space: nowrap;
    vertical-align: top;
}

.tableColumnsDocs textarea,
.tableColumnsDocs input {
  color: var(--color5);
  border: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 0;
  margin: unset;
  padding: unset;
  resize: none;
  background-color: transparent;
  overflow: hidden;
  text-overflow:ellipsis;
  width: 100%;
  height: unset;
}

.tableColumnsDocs .dae1 md-input-container {
    width: 100%;
}

.editabletable .tableColumnsDocs textarea,
.editabletable .tableColumnsDocs input {
  margin-top: 4px;
}

.editabletable table.superResponsive td.tableColumnsDocs md-autocomplete-wrap > input {
  margin-top: -2px;
}

.file_values_template button {
  border: none;
  background: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 0;
  padding: 10px 0 0 0;
  color: var(--color1);
  cursor: pointer;
}

.file_values_template button:hover, .file_values_template button:focus {
  color: var(--color3);
}

.editabletable dboattributeeditor .dae2 {
  padding: 3px;
}

p.dboddattributeeditor {
  position:relative;
  margin-bottom:0px;
}

p.dboddattributeeditor > span.f {
  float: left;
}

p.dboddattributeeditor > span.fb {
  position:absolute;
  right:3px;
  top:5px;
}

dboddattributeeditor > a.fa-plus-circle {
  margin: 0 0 3px 3px;
  font-size: 1.5em;
}

.form_field_defined_doc a.fa-plus-circle {
  padding:6px;
  font-size: 2em;
}

.TissueSample_identifier_editortemplate {
  width: 100%;
}

.editabletable td.TissueSample-identifier {
  min-width: 250px;
}

.emptyInput {
    color: #bfbfbf;  
    font-family: FontAwesome;
}

.tableHead input{
	font-weight: bolder;
  width:calc(100% - 25px);
  border:1px solid var(--color6);
  border-radius:0;
  height:25px;
  color: #bfbfbf; 
  outline:0;
}

tr.table_col_width_helper>th>div {
  height: 24px;
}

select::-ms-expand {
    display: none;
}

.fixedHeader th span {
	color:var(--color3);
}

.fixedHeader .sortable span:hover{
	cursor: pointer;
}

.fixedHeader th {
	font-weight: normal;
	cursor: default;  
}

.fixedHeader .sortable {
	font-weight: bolder;
}

.fixedHeader th:nth-child(1){
	border-right-color: var(--color0)!important;
	min-width: 120px!important;
	max-width: 120px!important;
  width: 120px;
}

.fixedHeader th:nth-child(2){
	border-left-color: var(--color0)!important;
}

.fixedHeader #multiEditRow th {
	text-align: center;
  padding-bottom:0;
}

.fixedHeader .tableHead th span.md-truncate {
  max-width: 400px;
  min-width: 35px;
  display: block;
  float: left;
}

.superResponsive .tableColumnsDocs:nth-child(1){
	border-right-color: var(--color0)!important;
	width: 120px!important;
	max-width: 120px!important;
	font-size: 1.5em;
	color:var(--color1);
  text-align: left;
}

.superResponsive > thead > tr > th:nth-child(1), .superResponsive tr.headerSearch th:nth-child(1) {
  border-right-color: var(--color0)!important;
  min-width: 120px!important;
  max-width: 120px!important;
  width: unset!important;
}

.tableButtons{
	width:120px;
  line-height: 1;
}

.tableButtons .glyphicon, .fa{
	margin-left: 13px;
}

.URI .tableButtons .glyphicon, .fa, 
.File .tableButtons .glyphicon, .fa,
.CLASS .tableButtons .glyphicon, .fa,
.tableButtons2 .glyphicon, .fa {
  margin-left: 4px;
}

.modal-90pc .modal-dialog{
  width:90%; 
  height:90%;
  position: absolute;
  top:0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  margin: auto;
}

@media (max-width: 450px) {
  .modal-90pc .modal-dialog{
    width:100%; 
    height:100%;
  }
}

.modal-90pc .modal-content {
  min-height:100%;
}

.bc1 {
	background-color: var(--color3);
}

.bc2 {
	background-color: var(--color1);
}

.prt1 {
	position:relative;
}

.mobileView .prt1 {
	display: flex;
}

.prt2 {
	position:relative;
}

.pos-value-bar {
	position:absolute; 
	height:100%; 
	background-color:rgba(220,220,220,0.75); 
	min-width:1px; 
	border-left:1px solid var(--color7);
}

.neg-value-bar {
	position:absolute; 
	height:100%; 
	background-color:rgba(220,220,220,0.75); 
	min-width:1px; 
	border-right:1px solid var(--color7);
}

a {
	color:var(--color1);
	cursor: pointer;
}

a:hover, a:focus {
	color: var(--color3);
}

.btn-link {
	color:var(--color1);	
}

.padding_and_border {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Required for keeping the height of the single ref field the same in empty and filled states. */
form .padding_and_border {
  min-height: 51px;
}

/*
http://stackoverflow.com/questions/19757832/in-bootstrap-how-to-add-borders-to-rows-without-adding-up
*/
.padding_and_border + .padding_and_border {
	border-top: 1px solid var(--color4);
}

.tableColumnsDocs .padding_and_border {
  padding-top: 0px;
  padding-bottom: 0px;  
}

.margin_0 {
	margin: 0px;
}

.margin_r {
	margin-right: 20px;
}

.inverse_colors {
	background: var(--color2);
	color: var(--color0);
}

.focus {
	color: var(--color3);
}

.inactive {
	opacity: 0.3;
}

.disabled .attvalue, .disabled .dae1, .disabled .tableButtons .glyphicon-trash {
  pointer-events: none;
}

/*.disabled .attvalue .ql-toolbar {
  display: none;
}*/

.color0 {
	color:var(--color0);
}

.bgcolor0 {
	background-color:var(--color0);
}

.color1 {
	color:var(--color1);
}

.bgcolor1 {
	background-color:var(--color1);
}

.color2 {
	color:var(--color2);
}

.bgcolor2 {
	background-color:var(--color2);
}

.color3 {
	color:var(--color3);
}

.bgcolor3 {
	background-color:var(--color3);
}

.color4 {
  color:var(--color4);
}

.bgcolor4 {
	background-color:var(--color4);
}

.bordercolor3 {
  border-color:var(--color3);
}

.drop-box {
  border: 3px dashed var(--color1);
  width: 100%;
  text-align: center;
}

.drop-box-2 {
  border: 3px dashed var(--color1);
  width: 100%;
}

.drop-box-2 .ngfs {
  height: calc(100vh - 66px);
  padding-top: calc(50vh - 45px);
}

.drop-box-2 .ngfs2 {
  text-align: center;
}

.dragover {
  border: 3px dashed var(--color3);
}

.drop-box .tag {
  float: unset;
  width: max-content;
}

.radius_0 {
	border-radius: 0 !important;
}

/*remove ugly blue outline glow on active/clicks of elements*/
.active{
    outline: 0!important;
}

input.ng-invalid.ng-not-empty {
	border: 1px solid red;
}

input.ng-pending {
	background-color: var(--color3) !important;
}

/*
input.ng-invalid {
	border: 1px solid red !important;
}
*/

input:focus {
    outline:none;
}

:focus {
    outline:none;
}

/* This is to work around the typeaheadtemplates being highlited as invalid during the selection. */
.typeahead>input.ng-invalid {
	border: 1px solid var(--color6) !important;
}

.col {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	float: left;
}

md-slider.md-default-theme.md-warn .md-track.md-track-fill, md-slider.md-warn .md-track.md-track-fill {
    background-color: rgba(0,0,0,0);
}

.md-chips {
  font-family:'TheDB Custom',sans-serif;
}

.input-group .form-control {
	z-index: unset;
}

.thick_black_border {
	border: 3px solid var(--color5);
}

.ql-container {
  font-family: inherit;
  font-size: inherit;
}

.ql-container.ql-snow {
  border: none;
}

.editabletable .tableScrollWrapper > .md-virtual-repeat-container {
  height: calc(100vh - 190px);
}

.File-editabletable .editabletable .tableScrollWrapper > .md-virtual-repeat-container {
  height: calc(100vh - 216px);
}

.tableScrollWrapper .md-virtual-repeat-container .md-virtual-repeat-scroller {
    overflow-x: scroll;
    margin-top: 10px;
}

.tableHead th span {
  color:var(--color3);
}

.tableColumnsDocs fieldset {
  overflow: hidden;
}

.tableColumnsDocs fieldset > input {
  width: unset;
}

.tableColumnsDocs .input {
  text-align: left;
  color: var(--color5);
  outline: none;
  max-width: 400px;
  white-space: normal;
}

.tableColumnsDocs .input-group input {
  padding: 0px;
}

.tableColumnsDocs .input-group .input-group-addon {
  border: none;
  background: transparent;
}

.tableColumnsDocs .input-group .input-group-addon, .tableColumnsDocs .input-group .input-group-btn {
  border: none;
  background: transparent;
}

/*
.tableColumnsDocs .TissueSample_identifier_editortemplate {
  width: 250px;
}
*/

.ui-scroll-viewport .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  opacity: 0.5;
}

.tableColumnsDocs .form_field_boolean {
  color: var(--color5);
  margin-top: 3px;
  overflow: hidden;
}

.row .attvalue .form_field_boolean {
  margin-top: 6px;
}

.tableColumnsDocs .form_field_boolean input {
  height: 14px;
}

.tableColumnsDocs .boolean_values_template input {
  height: 14px;
  margin: 0px;
}

.tableColumnsDocs .tag .glyphicon {
  font-size: 0.8em;
}

.tableColumnsDocs not(.tableButtons) a {
  color: var(--color2);
  pointer-events: none;
}

.tableColumnsDocs .highlighter {
  white-space: normal;
  word-wrap: break-word;
  padding: unset;
}

.tableHead th>div {
  outline: none;
}

.form_field_boolean .glyphicon {
  outline: none;
}

.tableColumnsDocs input.ng-invalid.ng-not-empty {
  border: none !important;
  color: var(--color3);
}

.ui-scroll-viewport .superResponsive tr:hover {
  background: none;
}

/* Overload bootstraps progress-bar font-size which 12 by default */
.progress-bar {
  font-size: inherit;
}

input, textarea, select, a { outline: none; }

.hidden-sm p {
  display: inline;
}

md-radio-button:focus {
  outline: none;
}

.text_values_template,
.plain_values_template p,
.plain_values_template1 p,
.plain_values_template2 p {
  white-space:pre-wrap;
  word-wrap: break-word;
}

.superResponsive .text_values_template {
  max-width: 400px;
  word-wrap: break-word;
}

#menuPanelBtn ul.dropdown-menu {
  max-height: calc(100vh - 65px);
  overflow-y: scroll;
}

.uiscrollm img {
  max-width: 100%;
}

.mobileView img {
  max-width: 100%;
}

.tableColumnsDocs img {
  max-width: 100%;
}

.File_contentType img {
  max-width: 100%;
}

.File_contentType iframe, iframe.File_contentType {
  width: 100%;
  border-width:0;
}

.row .File_contentType iframe, .row iframe.File_contentType {
  height: 100vh;
}

.tableColumnsDocs .contentDecompressed iframe.File_contentType {
  height: 100%;
  bottom: 0;
  position: absolute;
}

tr.tableRowsDocs > td.ExtendedFamily-pedigreeImage .contentDecompressed {
  min-height: 150px;
}

td.TissueSample-comment p {
  min-width: 200px;
}

.uiscrollm .nomaxwidth {
  min-width: unset!important;
}

.uiscrollm .Message-text .attvalue {
  min-width: 100%;
  float: left;
}

.form_field_ref2 .tag {
  float: left;
}

.Questionnaire-questions .attvalue .form_field_ref2 .tag {
  float: none;
}

.Questionnaire-questions .attvalue .form_field_ref2 .tag .glyphicon {
  float: right;
}

.Questionnaire-questions .attvalue .vallist {
  margin-bottom: 10px;
}

md-checkbox, md-radio-button {
  margin-bottom: 0;
}

md-radio-group.layout-row md-radio-button, md-radio-group.layout-xs-row md-radio-button, md-radio-group.layout-gt-xs-row md-radio-button, md-radio-group.layout-sm-row md-radio-button, md-radio-group.layout-gt-sm-row md-radio-button, md-radio-group.layout-md-row md-radio-button, md-radio-group.layout-gt-md-row md-radio-button, md-radio-group.layout-lg-row md-radio-button, md-radio-group.layout-gt-lg-row md-radio-button, md-radio-group.layout-xl-row md-radio-button {
  margin-bottom: 16px;
}

.md-checkbox-group.layout-column md-checkbox, .md-checkbox-group.layout-sm-column md-checkbox , .md-checkbox-group.layout-gt-sm-row md-checkbox {
  margin-bottom: 16px;
}

.view-controll div.tasty-pagination {
  position: fixed;
  opacity: 0.8;
}

.tasty-pagination-wrapper {
  position:relative;
  width:100%;
  height: 35px;
}

.tasty-pagination-wrapper div.tasty-pagination {
  position: absolute;
}

.pagination {
    padding-left: 0;
    border-radius: 4px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color: var(--color1);
  border-color: var(--color1);
}

.pagination > li > a, .pagination > li > span {
  color: var(--color1);
}

.plot-container .graphPromiseClass {
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 27px);
}

.mwps_ta .graphPromiseClass {
  position: fixed;
  top: calc(50% - 14px);
  left: calc(50% - 27px);
}

.questionnairequestion .ref-input {
  margin-bottom: 16px;
}

.questionnairequestion .primitive-input {
  margin-bottom: 16px;
}

.questionnairequestion md-autocomplete {
  margin-bottom: 16px;
}

.questionnairequestion span:nth-child(2) {
  font-weight: bold;
}

._InstanceEdit-comment .attvalue {
  white-space: pre-wrap;
}

@media (max-width: 450px) {
  .imageflow {
    width:100vw;
    height:100vw;
  }
}
@media (min-width: 451px) {
  .imageflow {
    width:49vw;
    height:49vw;
  }
}
@media (min-width: 800px) {
  .imageflow {
    width:33vw;
    height:33vw;
  }
}
@media (min-width: 1200px) {
  .imageflow {
    width:24.5vw;
    height:24.5vw;
  }
}
@media (min-width: 1600px) {
  .imageflow {
    width:19.5vw;
    height:19.5vw;
  }
}

.imageflow .graphPromiseClass {
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 27px);
}

.dataupload .graphPromiseClass {
  position: fixed;
  top: calc(50% - 14px);
  left: calc(50% - 27px);
}

.dataupload .graphPromiseClass .cg-busy-default-text {
  position: absolute;
  right: -55px;
  top: 25px;
}

table.TissueAliquotRequest-aliquots {
  min-width: 800px;
  width:100%;
}

@media print {
  .menubar {display: none;}
  table.TissueAliquotRequest-aliquots {
    min-width: 700px;
  }
  .viewtemplate > div > div.panel > div.panel-heading,
  .viewtemplate > div > div.panel > div.panel-footer, 
  .tasty-pagination-wrapper, 
  tr.headerSearch, 
  .superResponsive .tableColumnsDocs:nth-child(1),
  .fixedHeader th:nth-child(1),
  #menuPanelBtn,
  .dropdown,
  .superResponsive th:nth-child(1),
  .fixedHeader .tableHead thead:not(:first-child),
  .row.padding_and_border.inverse_colors div:nth-child(2),
  button.bgcolor1,
/*
  .viewtemplate .TissueSample-donor .attvalue,
  .viewtemplate .TissueSample-displayName .attvalue,
*/
  .listincollapsablepanel md-input-container,
  .viewtemplate .otherattributes > div > div > a {
      display: none;
  }
  .table-responsive {
    overflow-x: unset;
  }
  .superResponsive > thead > tr > th > div > div {
    white-space: normal;
  }
/*
  .viewtemplate .TissueSample-donor .attvalue,
  .viewtemplate .TissueSample-displayName .attvalue {
    color: transparent;
    text-shadow: 0 0 8px var(--color1);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
*/
  div.viewtemplate.TissueSample > div > div.panel.TissueSample {
    border: none;
  }
}


/*@page {
  size: A3;
}*/

.floatingPanel1 {
  width:30%;
}

.CLASS-slots .attvalue {
  width: 100%!important;
}

.DataAccessRequest-dataQuery .attvalue {
  word-break: break-all;
}

div.TissueAliquotRequest-approve-list div.table-responsive.tableScrollWrapper > table > tbody:nth-child(1) > tr > td:nth-child(1) > div > div > a:nth-child(1) {
    visibility: hidden;
}

div.TissueAliquotRequest-fulfill-list div.table-responsive.tableScrollWrapper > table > tbody:nth-child(1) > tr > td:nth-child(1) > div > div > a:nth-child(1) {
    visibility: hidden;
}

.SampleAnalysisStatusFIMM-analyses .attvalue {
  width: 100%!important;
  min-width: 1200px;
}
div.SampleAnalysisStatusFIMM-analyses >  div.attvalue > div > div > p > span:nth-child(1){
  width: 200px!important;
}
div.SampleAnalysisStatusFIMM-analyses >  div.attvalue > div > div > p > span:nth-child(2){
  width: 200px!important;
}
div.SampleAnalysisStatusFIMM-analyses >  div.attvalue > div > div > p > span:nth-child(3){
  width: 130px!important;
}
div.SampleAnalysisStatusFIMM-analyses >  div.attvalue > div > div > p > span:nth-child(4){
  width: 300px!important;
}
div.SampleAnalysisStatusFIMM-analyses >  div.attvalue > div > div > p > span:nth-child(5){
  width: 150px!important;
}
div.SampleAnalysisStatusFIMM-analyses >  div.attvalue > div > div > p > span:nth-child(6){
  width: 130px!important;
}
div.SampleAnalysisStatusFIMM-analyses >  div.attvalue > div > div > p > span:nth-child(7){
  width: 100px!important;
}

td.SampleAnalysisStatusFIMM-analyses {
  word-break: break-all
}

td.SampleAnalysisStatusFIMM-analyses > div > p > span {
  padding-right: 5px;
}

td.SampleAnalysisStatusFIMM-analyses > div > div > p > span {
  padding-right: 5px;
}

.Advert-displayName .attvalue {
  background-color:rgba(256,256,256,0.7); 
}

.join1 {
  background-color: var(--color0);
}

.join1 .layout-wrap > div {
  border-color: rgba(173, 216, 230, 0.5);
  background-color: rgba(173, 216, 230, 0.2);
}

.join1 md-autocomplete {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  min-width: 200px;
}

.datadownloadpanel, .fastdatadownloadpanel {
  width: 80%;
  height: 100%;
}

.datadownloadpanel md-autocomplete, .fastdatadownloadpanel md-autocomplete {
  min-width: calc(100vw * 0.8 - 10px);
}

.join1 md-input-container > input {
  min-width: 200px;
}

.join1 plotly div.js-plotly-plot {
  width: 100%;
  height: 100%;
}

.join1 md-toolbar {
  z-index:0;
}

.join1 .pdiv {
  border-left: 1px solid var(--color3);
}

simplequeryfilter .sqf_ic_1 {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;  
}

simplequeryfilter .sqf_ac_1 {
  min-width: 200px;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;  
}

simplerqueryfilter .sqf_ic_1 {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;  
}

simplerqueryfilter .sqf_ac_1 {
  min-width: 200px;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;  
}

simplequeryfilter {
  width: 100%;
}

simplequerybuilder .sqb_r_1 md-input-container {
  margin: unset;
}

simplerquerybuilder .sqb_r_1 md-input-container {
  margin: unset;
}

simplerquerybuilder .sqf_ac_1 md-input-container {
  margin: unset;
}

simplerquerybuilder md-select {
  margin-bottom: 18px;
}

md-input-container.jq_1 {
  margin-top: 18px;
  margin-bottom: unset;
  width: 100%;
}

simplerqueryfilter {
  min-width: 200px;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;  
}

simplerquerybuilder md-autocomplete md-progress-linear {
  top: 30px;
}

simplequeryfilter2 .sqf2_ac_1 {
  width: 100%;
  margin-top: -19px;
}

simplequeryfilter2 .sqf_ic_1 {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;  
}

simplequerybuilder2 md-autocomplete md-progress-linear {
  bottom: -11px;
}

simplequerybuilder2 .sqf2_ac_1 .sqf_ic_1 label {
  transform: translate3d(0, 25px, 0) scale(0.75);
  -webkit-transform: translate3d(0, 25px, 0) scale(0.75);
}

.sqf2_ac_1 .sqf_ic_1 .md-chips md-chip {
  margin: 12px 8px -4px 0;
}

simplerqueryfilter2 {
  min-width: 200px;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;  
}

simplerqueryfilter2 md-input-container {
  width: 100%;
}

simplerquerybuilder2 md-autocomplete.sqf_ac_2 {
  margin-top: 19px;
}

simplerquerybuilder2 md-autocomplete md-progress-linear {
  bottom: -11px;
}

simplerquerybuilder3 md-autocomplete.sqf_ac_2 {
  margin-top: 19px;
}

simplerquerybuilder3 md-autocomplete md-progress-linear {
  bottom: -11px;
}

md-input-container.jq_1.md-input-has-value > label {
  padding-left: 3px;
}

md-input-container > label {
  font-weight: normal;
}

md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
  font-weight: bold;
}

.App-template .attvalue .ace_editor { 
  height: calc(100vh - 61px);
}

/*.MultiwellPlateSet_editor .MultiwellPlateSet-_tmp_ {
  display: none;
}*/

md-tabs md-tab-item.md-active {
  color: var(--color1)!important;
}

.md-dialog-container md-dialog.dataupload {
  max-width:100%;
  width: 100%;
  min-height: 100%;
  overflow-y: scroll;
}

div.dataupload {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: var(--color0);
}

.dd_field_categoricalvalue input {
  border: unset;
  box-shadow: unset;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  padding: unset;
}

.dd_field_categoricalvalue input.ng-invalid.ng-not-empty {
  border: unset;
  border-bottom: 1px solid red;
}

.dd_field_categoricalvalue md-select {
  margin: unset;
  color: rgba(0,0,0,0.87);
}

.ObservationSet-observations-editortemplate .os-o-e-c1, .os-o-e-c1 {
/*  width:calc(100% - 20px);*/
  width: 100%;
  display: inline-block;
}

.ObservationSet-observations-editortemplate a.fa-plus-circle {
  margin: 20px 0 11px 3px;
  font-size: 1.5em;
}

.ObservationSet-observations-editortemplate .input-group-btn:first-child > .btn {
  border: unset;
  margin-top: -20px;
  padding-top: 20px;
}

/*
td.tableColumnsDocs .ObservationSet-observations-editortemplate {
  min-width: 410px;
}
*/

.ObservationSet- .md-errors-spacer {
  display: none;
}

.ObservationSet- dboattributeeditor {
  width: 100%;
}

.ObservationSet- dboattributeeditor>osobservationvalueeditor md-select-value {
  border: none;
}

.viewtemplate.Advert .row.inverse_colors > div {
  visibility: hidden;
}

.viewtemplate .doseresponsecurves, .generic_editortemplate .doseresponsecurves {
  width: 100%;
}

.tableColumnsDocs .doseresponsecurves {
  width: 200px;
  height: 120px;
}

.viewtemplate .oneDScatterPlot {
  width: 100%;
  height: 120px;
}

.tableColumnsDocs .oneDScatterPlot {
  width: 200px;
  height: 120px;
} 

.tableColumnsDocs .oneDScatterPlot-w, .tableColumnsDocs .doseresponsecurves-w {
  min-width: 200px;
  height: 150px;
}

.tableRowsDocs .UserAccount-imageUrl img {
  height: 20px;
}

.tableRowsDocs:hover .UserAccount-imageUrl img {
  height: 50px;
}

.tableRowsDocs .UserAccount-imageUrl .contentDecompressed img {
  height: 50px;
}

.UserAccount-imageUrl img {
  max-height: 100px;
}

.tableRowsDocs .PersonalDetails-photo img {
  height: 20px;
}

.tableRowsDocs:hover .PersonalDetails-photo img {
  height: 50px;
}

.tableRowsDocs .PersonalDetails-photo .contentDecompressed img {
  height: 50px;
}

.PersonalDetails-photo img {
  max-height: 100px;
}

displaynamelink img {
  max-width: 100%;
}

tr.tableRowsDocs displaynamelink img {
  max-height: 250px;
}

.FDSAdoseresponsematrix .panel-body {
  overflow-x: scroll;
}

.FDSAdoseresponsematrix td:not(:first-child) {
  border: 1px solid var(--color6); 
}

.FDSAdoseresponsematrix tbody th {
  padding-right: 5px; 
}

.FDSAdoseresponsematrix thead th {
  text-align: center;
  min-width: 200px;
  max-width: 200px;
}

.FDSAdoseresponsematrix tbody tr {
  height: 150px;
}

.FDSAdoseresponsematrix tbody .logisticRegressionDoseResponseCurve2 {
  width: 200px;
  height: 150px;
}

.tableColumnsDocs .logisticRegressionDoseResponseCurve2,
.contentDecompressed .logisticRegressionDoseResponseCurve2, .content .logisticRegressionDoseResponseCurve2,
.contentDecompressed .doseresponsecurves, .content .doseresponsecurves,
.contentDecompressed .oneDScatterPlot, .content .oneDScatterPlot,
.contentDecompressed .combocontourplot, .content .combocontourplot {
  width: 200px;
  height: 150px;
}

.oneDScatterPlotWPercentileRank .oneDScatterPlot {
  height: 129px;
}

.FDSAlinks {
  padding-bottom: 15px;
}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    z-index: unset;
}

.doseresponsecurvefit md-input-container textarea {
  tab-size: 40;
}

.doseresponsecurvefit label {
  white-space: pre!important;
  tab-size: 40!important;
  font-weight: normal!important;
}

.TissueAliquotRequest_create .TissueAliquotRequest-complete .attname {
  visibility: hidden;
}

ng-view > div.doseresponsecurvefit > div.layout-column {
  height: calc(100vh - 60px);
}

.dd_field_disease md-autocomplete {
  width: calc(100vw - 0px);
}

.FDSAdoseresponsematrix .md-virtual-repeat-container .md-virtual-repeat-scroller {
  overflow-x: scroll;
}

osobservationvalueeditor2 md-input-container {
  margin: unset;
  padding: unset;
}

osobservationvalueeditor2 md-input-container label {
  display: none;
}

osobservationvalueeditor2 md-select-value.md-select-value {
  padding-top: 0;
}

osobservationvalueeditor md-input-container .md-errors-spacer,
osobservationvalueeditor2 md-input-container .md-errors-spacer {
  display: none;
}

/*
.tableColumnsDocs md-input-container, .tableColumnsDocs > div > div > md-input-container {
  padding: unset;
  margin-bottom: -23px;
  margin-top: -3px;
  width: 100%;
}
*/

.tableColumnsDocs > div > div > md-input-container > div > textarea,
.tableColumnsDocs > div > md-input-container > div > textarea {
  margin-top: 7px;
  line-height: 1.5;
}

.attvalue > div > md-input-container,
.attvalue > md-input-container {
  margin: unset;
  padding: unset;
  width: 100%;
}

.attvalue > div > md-input-container > div > textarea,
.attvalue > md-input-container > div > textarea {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 4px;
  padding: 5px 12px 5px 12px;
  min-height: 34px!important;
  line-height: 1.5;
}

.attvalue > div > md-input-container > .md-errors-spacer,
.attvalue > md-input-container > .md-errors-spacer {
  display: none;
}

.attvalue > div > md-input-container:not(.md-input-invalid).md-input-focused > div > textarea,
.attvalue > md-input-container:not(.md-input-invalid).md-input-focused > div > textarea {
  border: 1px solid rgb(204, 204, 204);
}

.tableColumnsDocs osobservationvalueeditor2 .md-chip-input-container {
  max-width: 300px;
}

.tableColumnsDocs osobservationvalueeditor2 .md-chip-input-container input {
  font-size: 14px;
}

.tableColumnsDocs osobservationvalueeditor2 md-chips md-chip md-chip-template {
  font-size: 14px;
}

.tableColumnsDocs osobservationvalueeditor2 md-chips md-chip {
  padding: 0px 3px 0 3px;
  line-height: unset;
  margin: 2px 4px 2px 0px;
  border-radius: 3px;
  border: 1px solid rgb(8, 135, 167);
  background-color: var(--color0);
  height: unset;
}

.tableColumnsDocs osobservationvalueeditor2 md-chips md-chip.md-focused {
  background-color: var(--color1);
  color: var(--color0);
}

.tableColumnsDocs osobservationvalueeditor2 .md-chips md-chip .md-chip-remove md-icon {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.7);
    transform: translate3d(-50%, -50%, 0) scale(0.7);
}

.tableColumnsDocs osobservationvalueeditor2 .md-chips md-chip .md-chip-remove {
    width: 20px;
    height: 20px;
}

.tableColumnsDocs osobservationvalueeditor2 .md-chips.md-removable md-chip {
    padding-right: 18px;
}

.tableColumnsDocs displaynamelink a, .tableColumnsDocs > .content > p, .tableColumnsDocs > .contentDecompressed > p {
  word-break: normal;
}

.tableColumnsDocs.GenomeCNVProfile-segmentationData {
  min-width: 600px;
}

.loginWrapper .alert-error {
    border-radius: 0;
    text-align: center;
    color: var(--color5);
    font-size: large;
}

.loginWrapper a {
  color: black;
}

.loginWrapper a:hover, .loginWrapper a:active {
  color: white;
  background: black;
}

.register_participant .panel-footer,
.MultiwellPlateSet_editor .panel-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

.tableHead .rg-bottom span, .rg-left span, .rg-right span, .rg-top span {
  border: none;
}

/*.superResponsive tr:hover td:last-child .content {
  overflow: hidden;
  z-index: 0;
}*/

.fixedHeader tr.valueDistributionsAsTableRow .plot-container {
  height: 300px;
}

tr.distinctCounts > th > div > span, tr.distinctCounts > th > div {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sessions > div.layout-row {
  background: var(--color2);
  color: var(--color0);
  line-height: 40px;
}

.sessions > div.layout-row > div > button {
  margin-left: 0px;
}

.sessions .layout-column .layout-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--color6);
}

.sessions .layout-column .layout-row button {
  margin: -8px 0;
}

md-dialog-content .fileuploaderror td:not(:first-child) {
  padding-left: 20px;
}

.MultiwellPlateSetcontent plotly {
  margin: 0 10px 10px 0;
}

md-input-container.mwps_ta span {
  padding-left: 10px;
}

.File-contentType video {
  width: 640px;
  max-width: 100%;
}

video {
  max-width: 100%;
}

/*.generic_editortemplate .row textarea {
  resize: vertical;
}*/

.usm_ph {
  padding: 5px 15px;
}

.usm_ph a > span {
  font-size: 1.5em;
  margin-right: 20px;;
}

.ab_tb {
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  color: var(--color5);
  background: hsla(0, 0%, 100%, 50%);
}

.ab_tb md-truncate {
  font-size: 20px;
}

.ab_p {
  margin: 10px 0 0 10px;
  position: relative;
  height:300px;
  width:300px;
}

.ab_fon {
  border: 1px solid var(--color5);
}

.ab_foff {
  border: 1px solid transparent;
}

.ab_f_v {
  color: var(--color5);
  background-color: var( --color11);
}

.ab_f_k {
  color: var(--color5);
}

.EM-displayName .attvalue p, 
td.EM-displayName p, 
._AccessLogEntry-request .attvalue p, 
._AccessLogEntry-content p, 
.DSRAnalysis1-runLog .attvalue {
  white-space: break-spaces;
  word-break: break-word;
}

.row.File-thumbnail {
  display: none;
}

.selectionsharing .ss_b > div {
  padding: 0 5px 5px 5px;
}

.selectionsharing .ss_b button {
  position: relative;
  width: 100%;
}

.selectionsharing button .material-icons {
  position: absolute;
  left: 5px;
  top: 2px;
} 

.selectionsharing .tag {
  margin-bottom: 8px;
}

md-toast.md-right {
  padding: 15px;
}

.angular-ui-tree-handle i {
    cursor: move;
}

.requestaccess.panel {
  margin: 15px;
}

.split-pane-component .requestaccess.panel {
  margin: 0;
}

.tree-node .material-icons {
  line-height: 20px;
  vertical-align: text-bottom;
}

.tree-node a.material-icons {
  color: var(--color2);
}

.md-button.md-default-theme.md-accent, .md-button.md-accent {
  color: var(--color3);
}

.pwsimg .i_w {
  transition: width 1s ease, height 1s ease;
  position: relative;
  background-color: white;
}

.pwsimg .i_w span {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.5);
  color: black;
  margin: 2px;
}

body > .md-panel-outer-wrapper {
  width: 0;
}

.pwsimgw, .pwsimgw md-toolbar {
  background-color: var(--color5);
  border-radius: 4px;
}

.md-panel.ui-draggable.ui-draggable-handle {
  cursor: move;
}

.DSA_ready_w_notification .md-errors-spacer {
  display: none;
}

.DSA_ready_w_notification md-input-container {
  margin-bottom: 0;
}

.DSA_ready_w_notification md-toast {
  width: 100%;
  padding: 0;
}

.DSA_ready_w_notification md-toast.md-warn-theme .md-toast-content {
  background-color: var(--color3);
  color: var(--color5);
}

.md-button.md-default-theme.md-accent.md-fab, .md-button.md-accent.md-fab, .md-button.md-default-theme.md-accent.md-raised, .md-button.md-accent.md-raised {
  color: var(--color1);
  background-color: var(--color3);
}

.md-button.md-default-theme.md-accent.md-fab:not([disabled]).md-focused, .md-button.md-accent.md-fab:not([disabled]).md-focused, .md-button.md-default-theme.md-accent.md-fab:not([disabled]):hover, .md-button.md-accent.md-fab:not([disabled]):hover, .md-button.md-default-theme.md-accent.md-raised:not([disabled]).md-focused, .md-button.md-accent.md-raised:not([disabled]).md-focused, .md-button.md-default-theme.md-accent.md-raised:not([disabled]):hover, .md-button.md-accent.md-raised:not([disabled]):hover {
  background-color: hsla(var(--base-h3), var(--base-s3), var(--base-l3), 30%);
}

tbody.groupbycol-g-s {
  border-top: 3px solid var(--color1);
  border-bottom: 3px solid var(--color1);
}

.modal-content .generic_editortemplate .panel-footer {
  position: absolute;
  bottom: 0;
  width: calc(100% - 1px);
}

.viabilityafterthawing {
  font-style: italic;
}

.categorylist .fixedHeader th:nth-child(1),
.categorylist .superResponsive .tableColumnsDocs:nth-child(1) {
  min-width: 10px!important;
  max-width: 10px!important;
  width: 10px!important;
}

.categorylist .fixedHeader th:nth-child(2),
.categorylist .superResponsive .tableColumnsDocs:nth-child(2) {
  max-width: calc(100vw - 260px);
  width: calc(100vw - 260px);
  border-right: none;
  font-weight: bold;
}

.categorylist .fixedHeader th:nth-child(3),
.categorylist .superResponsive .tableColumnsDocs:nth-child(3),
.categorylist .fixedHeader th:nth-child(4),
.categorylist .superResponsive .tableColumnsDocs:nth-child(4) {
  width: 120px;
  border-left: none;
  text-align:right;
}

.categorylist .tableButtons{
  display: none;
}

.categorylist .superResponsive .tableColumnsDocs {
  color: var(--color1);
}

.categorylist .superResponsive tr:hover .tableColumnsDocs {
  color: var(--color3);
}

.PersonalDetails_editor .StudyId-identifier {
  display: none;
}

.register_participant .panel-heading i,
.register_participant .panel-footer i {
  margin-bottom: 5px;
}

.form_field_referrers.UserAccount-members-UserGroup .tag {
  float: none;
  width: max-content;
}

.manageusers .deletionbuttons {
  display: none;
}

dboattvaluetag.tag {
  padding: 0;
}

dboattvaluetag > div {
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 2px;
}

.form_field_referrers .tag > a.UserGroup:first-child::before,
dboattvaluetag a:first-child::before {
  font-family: 'Material Icons';
  position: absolute;
  font-size: 1.5em;
/*  top: -10px;*/
  left: 0px;
  bottom: -3px;
}

.form_field_referrers .tag > a.UserGroup:first-child,
dboattvaluetag a.UserAccount:first-child,
dboattvaluetag a.UserGroup:first-child,
dboattvaluetag a.inactiveUA:first-child,
dboattvaluetag a.locked_davt:first-child,
dboattvaluetag a.deleted_davt:first-child,
dboattvaluetag a.missing_davt:first-child {
  margin-left: 25px;
}.

dboattvaluetag a.inactiveUA:first-child::before {
  content: 'block';
}

dboattvaluetag a.locked_davt:first-child::before {
  content: 'lock';
}

dboattvaluetag a.deleted_davt:first-child::before {
  content: 'delete';
}

dboattvaluetag a.missing_davt:first-child::before {
  content: 'help';
}

.form_field_referrers .tag > a.UserGroup:first-child::before,
dboattvaluetag a.UserGroup:first-child::before {
  content: 'group';
}

@media (min-width: 768px) {
  .generic_editortemplate md-checkbox.r2_s_cb {
    position: absolute;
    left: -15px;
    top: 6px;
  }
}

@media (max-width: 767px) {
  .generic_editortemplate md-checkbox.r2_s_cb {
    position: absolute;
    right: 5px;
    top: -19px;
  }
  .generic_editortemplate .Referral2-samples-editortemplate {
    margin-top: 10px;
  }
}

/* Should really create a template that allows editing once for this. */
.register_participant .StudyId-study .attvalue dboattvaluetag {
  pointer-events: none;
}

img.inline_image_in_modal {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

linktorefererstable a span,
linktovaluestable a span {
  position: absolute;
}

.IDSA_editor .IDSA-inputFilePaths textarea {
  height: 100px;
}

.IDSA_template .fa-spin {
  color: var(--color3);
}

.IDSA_template .status-header {
  font-weight: bold;
}

.focusnode {
  font-weight: bolder;
}

.attname span.material-icons {
  font-size: unset;
  padding-left: 6px;
  color: var(--color3);
}

.generic_editortemplate .row .plain_values_template3,
.generic_editortemplate .row .i_p_t_e_1{
  margin-top: 6px;
}

.o_o_i {
  margin-bottom: 0px;
}

.o_o_i .o_o_t {
  width: 50%;
  float: left;
  overflow: hidden;
  padding: 0 3px 0 3px;
}

.iv_v {
  background-color: var(--color10);
}

.row.DNASample-_tmp_ > .attname,
.row.RNASample-_tmp_ > .attname,
.row.TissueSample-_tmp_ > .attname,
.row.DNAAliquot-_tmp_ > .attname,
.row.RNAAliquot-_tmp_ > .attname,
.row.UsedRNAAliquot-_tmp_ > .attname,
.row.TissueAliquot-_tmp_ > .attname,
.row.BloodPlasmaSample-_tmp_ > .attname,
.row.BloodPlasmaAliquot-_tmp_ > .attname {
  display: none;
}

.row.DNASample-_tmp_ > .attvalue,
.row.RNASample-_tmp_ > .attvalue,
.row.TissueSample-_tmp_ > .attvalue,
.row.DNAAliquot-_tmp_ > .attvalue,
.row.RNAAliquot-_tmp_ > .attvalue,
.row.UsedRNAAliquot-_tmp_ > .attvalue,
.row.TissueAliquot-_tmp_ > .attvalue,
.row.BloodPlasmaSample-_tmp_ > .attvalue,
.row.BloodPlasmaAliquot-_tmp_ > .attvalue {
  width: 100%;
}

.row.DNASample-_tmp_,
.row.RNASample-_tmp_,
.row.TissueSample-_tmp_,
.row.DNAAliquot-_tmp_,
.row.RNAAliquot-_tmp_,
.row.UsedRNAAliquot-_tmp_,
.row.TissueAliquot-_tmp_,
.row.BloodPlasmaSample-_tmp_,
.row.BloodPlasmaAliquot-_tmp_ {
  padding-top: 0;
}

.tf-tree {
  font-size: 14px;
}

.form_field_ref_inline .editabletable th.tableColumnsDocs:nth-child(1),
.form_field_ref_inline .editabletable td.tableColumnsDocs:nth-child(1)  {
  width: 40px!important;
  max-width: 40px!important;
  min-width: 40px!important;
}

.form_field_ref_inline .editabletable thead th.tableColumnsDocs {
  height: 48px;
  vertical-align: middle;
}

.form_field_ref_inline .editabletable tbody tr:last-child {
  height: 61px;
}

.form_field_ref_inline .row {
  margin-left: 0;
}

.form_field_ref_inline .row .attname,
.form_field_ref_inline .row .attvalue {
  padding-left: 0;
}

@media (min-width: 768px) {
  .row .form_field_ref_inline {
    margin-top: -9px;
    margin-bottom: -9px;
  }
}

.form_field_ref_inline .editabletable {
  margin-bottom: 15px;
}

.omop .layout-row {
  padding:4px 15px 4px 15px;
  border-top:1px solid;
  line-height: 1.5;
  color: var(--color1);
}

.omop .layout-row .flex {
  font-weight: bold;
}

.omop .tableScrollWrapper .layout-row:hover {
  background: var(--color11);
  color: var(--color3);
}

.omop .tableColumnsDocs {
  color: var(--color1);
}

md-radio-button.md-checked .md-on {
  background-color: var(--color12);
}

md-radio-button.md-default-theme.md-checked .md-off, md-radio-button.md-checked .md-off {
  border-color: var(--color12);
  opacity: 0.87;
}

md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon {
  border-color: var(--color12);
  background-color: var(--color12);
  opacity: 0.87;
}

md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
  background-color: var(--color12);
  opacity: 0.87;
}

md-slider.md-default-theme.md-warn .md-sign, md-slider.md-warn .md-sign {
  background-color: var(--color12);
}

md-slider.md-default-theme.md-warn .md-sign:after, md-slider.md-warn .md-sign:after {
  border-top-color: var(--color12);
}

md-slider.md-default-theme.md-warn .md-thumb:after, md-slider.md-warn .md-thumb:after {
  border-color: var(--color12);
  background-color: var(--color12);
}


md-tabs.md-default-theme .md-tab .md-ripple-container, md-tabs .md-tab .md-ripple-container {
  color: var(--color3);
}


table.aliquots .md-errors-spacer {
  display: none;
}

table.aliquots md-input-container {
  padding: unset;
  margin: unset;
}

table.aliquots .md-resize-wrapper textarea {
  margin-top: unset;
}

.tableColumnsDocs .defined_doc_template_w_colnames .ddtwc_1 {
  display: none;
}

.IDSA_template .log {
  white-space: pre-wrap;
}

.tableColumnsDocs.CNVAnalysis-runLog textarea,
.tableColumnsDocs.DrugSensitivityAnalysis-runLog textarea {
  overflow: scroll;
}

.ekv_template {
  white-space: pre-line;
}

.tableColumnsDocs .plain_values_template.int,
.tableColumnsDocs .plain_values_template.float {
  text-align: right;
}

.graphGeneratorTemplate md-checkbox {
  margin-top: 6px;
}

.listincollapsablepanel.CNVAnalysis td.CNVAnalysis-dummy {
  width: 80%;
}

.listincollapsablepanel table.superResponsive,
.listincollapsablepanel.CNVAnalysis table.superResponsive {
  width: 100%;
}

.viewtemplate.Person .listincollapsablepanel.DrugSensitivity md-input-container,
.listincollapsablepanel.SomaticMutation md-input-container,
.listincollapsablepanel.FusionGene md-input-container,
.listincollapsablepanel.CNVAnalysis md-input-container {
  display: none;
}
.l_i_p md-slider {
  margin-top: -20px;
  height: 21px;
}

.l_i_p md-input-container {
    margin: unset;
}

.l_i_p md-slider.md-default-theme.md-primary .md-thumb:after, md-slider.md-primary .md-thumb:after {
  background-color: black;
  border-color: black;
}

.ts-dc input {
  text-shadow: 0 0 3px #FFFFFF;
}

txt2table table, txt2table th, txt2table td,
.bsms th, .bsms td
{
  border: 1px dashed var(--color4);
  border-collapse: collapse;
  padding: 2px;
}

.bsms .md-virtual-repeat-container .md-virtual-repeat-scroller {
  overflow-x: scroll;
}

txt2table table {
  width: unset;
}

txt2table {
  width: 100%;
  display: block;
  overflow: scroll;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: normal;
}

.TissueImage-data img {
  background-color: black;
}

.tissuestaincontrolpanel .md-input[disabled], onetissuestaincontrolpanel .md-input[disabled] {
  color: rgb(0,0,0);
}

.tissuestaincontrolpanel md-input-container, onetissuestaincontrolpanel md-input-container {
  margin: 0;
}

.tissuestaincontrolpanel .md-tab {
  text-transform: none;
}

.tissuestaincontrolpanel md-content {
  max-height: calc(100vh - 200px);
  width: 650px;
}

.tissue-stain-control-panel {
  top: 250px;
}

tr.valueDistributionsAsTableRow > td > div {
  max-height: 300px;
}

th.headerSearchTH > div {
  height: 21px;
}

.tmacorepanelimage-fullscreen {
  height: 100%;
  width: 100%;
  overflow: scroll;
}

.keyvalue_pairs_template div {
  display: inline;
}

.keyvalue_pairs_template > p {
  margin: unset;
}

.keyvalue_pairs_template anyval > div:not(:last-child) > anyval > div:after {
  content: ",";
  margin-right: 5px;
}

.keyvalue_pairs_template anyval.kvp-key:after {
  content: ":";
  margin-right: 10px;
}

/* These deal with recent angularjs-material update */
md-checkbox .md-container {
  margin-top: 9px;
}
md-checkbox {
  min-height: unset;
}
md-checkbox .md-label {
  margin-top: -4px;
}

md-checkbox.form_field_boolean_checkbox2 {
  margin-top: 6px;
}

.tf-nc .t_n_m {
  position: absolute;
  right: 0;
  top: 0;
}

.tf-nc .t_n_m a {
  color: var(--color3);
}

.mermaid-diagram g .node rect,
.mermaid-diagram g .node line {
  fill: var(--color8)!important;
  stroke: var(--color3)!important;
}
/* Commented out as I can't figure out how to style the arrowheads. */
/* .mermaid-diagram .edgePaths .relation,
.mermaid-diagram .edgePaths .path {
  stroke: var(--color3)!important;
} */
.mermaid-diagram .edgeLabel .label span,
.mermaid-diagram .nodeLabel {
  /* background: var(--color8)!important; */
  background: none!important;
  color: var(--color1)!important;
}

/*.distinctvalueswithcounts.henkilotunnus textarea,
.distinctvalueswithcounts.person_id textarea,
.distinctvalueswithcounts.Person.displayName .md-virtual-repeat-scroller span,
.distinctvalueswithcounts.Person.displayName textarea,
.distinctvalueswithcounts.Person.displayName a,
.distinctvalueswithcounts.donor textarea,
.distinctvalueswithcounts .Person-displayName a,
displaynamelink2 .Person a,
displaynamelink .Person a,
.Person-displayName .attvalue .ng-binding {
  color: transparent;
  text-shadow: 0 0 8px var(--color1);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.DNAAliquot-_tmp_-Patient-ID .ng-binding,
.BloodPlasmaAliquot-_tmp_-Patient-ID .ng-binding,
.RNASample-_tmp_-Patient-ID .ng-binding,
.Patient-ID>.attvalue {
  color: transparent;
  text-shadow: 0 0 8px var(--color2);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.TissueSample-samplingDate p.ng-scope {
  width: 40px;
  text-overflow: clip;
}*/