/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */

@import 'https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300';



* {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
}


body {
  padding-top: 70px;
}
.dashboard{
	height:100%;
	width:100%;
	position:fixed;
	
    background-size: 50%;
    background-position: center;
    background-repeat:no-repeat;
}

.login-text
{
	font-size: 50;
    color: #6c757dc7;
    text-align: center;
    letter-spacing: 5px;
    text-shadow: 2px 7px 5px rgb(0 0 0 / 20%), 0px -4px 10px rgb(255 255 255 / 20%);
}


caption
{
	caption-side:top;
}
.window
{
	display:inline-block;
}
.container-fluid-full
{
	border:1px solid red;
}

/*
 * Typography
 */

h1 {
  margin-bottom: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid #eee;
}

label {
 font-weight: bold;
 color: #6c757d;
}

.nimborder
{
	border-bottom: 1px solid rgba(194,4,48,0.2);
	padding-bottom: 20px !important;
}

.bioinfo
{
	font-size:25px;
	color:rgba(255,255,255,.5);
	font-weight:bold;
}

.b-letter
{
	background-color: rgba(194,4,48,0.7);
    border-radius: 100%;
    margin-right: .1rem;
    color: rgba(255,255,255,.65);
}

.dashboard-welcome {
	color:rgba(108, 117, 125, 0.8);
	margin-left:1rem;
	margin-bottom:0;
	margin-top:1rem;
   /*text-shadow: 2px 7px 5px rgb(0 0 0 / 15%), 0px -4px 10px rgb(255 255 255 / 15%);*/
}

.logout
{
	height: 25px;
    font-size: 13px;
    padding-top: 4;
    padding-bottom: 0;
	padding-left: 20px;
	color:rgba(194,4,48,0.6) !important;
	margin-top:7px;
	margin-bottom:7px;
	float: left !important;
	font-weight:bold;
}


.logout i
{
	font-size: 15px;
	padding-right:5px;
}

.logout:hover
{
  	font-size:14px;
	color:rgba(194,4,48,0.8) !important;
	text-decoration: none;
}

.user-data
{
	font-size: 13px;
	color: #6c757d !important;
	padding: 7px 20px;
    text-align: left;
}

.user-data i
{
	font-size: 13px;
	padding-right:5px;
	color: #6c757d;

}

.user-data.last-user-info
{
	padding-bottom: 0.7rem;
}

/*
 * Output
 */
/* Output step & results */
.output_step {
  margin-bottom:0.7rem;
  color: rgb(29 31 34 / 80%);
}

.output_step::before{
	font-size: 1.2rem;
	color: #82E0AA;
	content: "\02714";
	padding-right: 10px;
}


.output_file {
  margin-bottom:0.7rem;
  color: rgb(29 31 34 / 80%);
}

.output_file::before{
	font-size: 1rem;
	content: "\01F4CE";
	padding-right: 7px;
}


.output_end {
  color: rgb(29 31 34 / 80%);
  margin-bottom:0.7rem;
}

.output_end::before{
	font-size: 1rem;
	content: "\01F3C1";
	padding-right: 7px;
}


/* Output warn */
.output_warn {
	margin-bottom:0.7rem;
	color: rgb(29 31 34 / 80%);
}

.output_warn::before{
	font-size: 1rem;
	color: orange;
	content: "\02139";
	padding-right: 11px;
}


/* Output error */
.output_error {
	margin-top: 1rem;
	margin-bottom:0.7rem; 
	color:rgba(194,4,48,1);
	font-weight:bold
}

.output_error::before{
	content: "\0274C";
	padding-right: 10px;
	font-size: 0.8rem;
}


/*
 * Sidebar
 */

@media (min-width: 768px)
	{
	.sidebar {
		-ms-flex: 0 0 15%;
		flex: 0 0 15%;
		max-width: 15%;
	}
	.offset-md-2 {
    	margin-left: 15+%;
	}
}

.sidebar {
  position: fixed;
  top: 71px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

/* Sidebar navigation */
.sidebar {
  padding-left: 0;
  padding-right: 0;
  border-right: 1px solid rgba(194,4,48,0.2);
}

.sidebar .nav {
  margin-bottom: 20px;
}

.sidebar .nav-item {
  width: 100%;
}

.sidebar .nav-item + .nav-item {
  margin-left: 0;
}

.sidebar .nav-link {
  border-radius: 0;
}

/*
 * Dashboard
 */

 /* Placeholders */
.placeholders {
  padding-bottom: 3rem;
}

.placeholder img {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.navbar
{
	height: 70px;
/*	padding-top: 26px;*/
}
.ui-widget-content.ui-autocomplete
{
	max-height:250px;
	overflow-y:auto;
	overflow-x: hidden;
}
.nim-autocomplete .spinner-border
{
	position: absolute;
	top: 3px;
	right: 4px;
	display:none;
}
.nim-autocomplete,
.nim-autocomplete-input
{
	position:relative;
}

.window .spinner-border
{
	display:none;
}
.overflow
{
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	z-index:9999;
}
.overflow-info
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width:100%;
}
.overflow-name
{
	color:white;
	text-align:center;
	font-size:25px;
}
.overflow-status
{
	color:white;
	text-align:center;
	font-size:20px;
}
.overflow-row
{
	margin-bottom:20px;
}
.overflow-row:last-child
{
	margin-bottom:0px;
}
.overflow-spinner
{
	
}
.btn-primary.btn-help
{
	background-color:#FFFFFF;
	border:0px;
	padding:0px;
}
.btn-primary.btn-help i
{
	color:#0275d8;
}
.hidden
{
	display:none;
}
.modal-dialog
{
	margin-top:0px;
	margin-bottom:0px;
}
.primer3search .modal-dialog
{
	max-width:none;
}
.extraref_show .modal-dialog
{
	max-width:600px;
}
.modal-header .close
{
	margin: -1rem -1rem -1rem 0rem;
	padding:1rem 1rem 1rem 0rem;
}
.modal-header h5
{
	overflow:hidden;
}
.btn-head-icon
{
	float: right;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
	padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	cursor: pointer;
	margin-top: 6px;
	margin-left: 25px;
}
.btn-head-icon:hover
{
	opacity:0.75;
}
.modal-header .close {
    margin: 0px;
    padding: 0px;
	float:left;
	margin-top: 3px;

	margin-right: 25px;
}
.user 
{
	float: left;
	display: flex;
	margin-left: 20px;
	padding: 0px;
/*	margin-bottom: 15px;*/
}
.user .btn-primary
{
	float:right;
	margin-right:10px;
	
}
.user a.btn-primary
{
	color:white;
}
.user .dropdown-header
{
	text-align:left;
	padding-left:10px;
}
.user .dropdown-menu
{
	margin-left:auto;
	right:20%;
	top:107%;
}



.user label
{
	text-align:center;
	width:100%;
}
.user .user-btn
{
	padding:0px;
	color:rgba(108, 117, 125, 0.8) !important;
	font-size:20px;
	margin-right:20px;
}

.user-btn:hover
{
	color:rgba(194,4,48,0.7) !important;
}

.dropdown-header 
{
	font-size: 18px;
	color: rgba(108, 117, 125, 0.8);
}

.dropdown-header:hover
{
	color: rgba(194,4,48,0.7);
}

.custom-date
{
	color: #6c757d;
	padding-left: 10; 
	font-size:13px; 
	padding-bottom:0;
	line-height:1.5
}


.nav-item  .nav-link.services
{
	float:left;
	border-left:1px solid rgba(194,4,48,0.2);
	padding: .7rem;
    padding-left: 1.5rem;
}

.nav-link.services:active
{
	color: rgba(194,4,48,0.7) !important
}

.nav-item .permission
{
    color: #6c757d;
    background-color: transparent;
    border-color: #6c757d63;
    font-size: 10px;
    float: right;
    /* margin-top: 7px; */
    font-weight: bold;
}


.row.genes
{
	max-height:200px;
	overflow-x: hidden; /* Hide horizontal scrollbar */
	overflow-y: scroll; /* Add vertical scrollbar */
/*	border:1px solid #e9ecef;*/
}
#modalnim .modal-body .row
{
	margin-bottom:15px;
}
.genes:after,
.catalogue:after
{
	display:table;
	clear:both;
	content:"";
}
.genes span,
.catalogue span
{
	float:left;
	margin-right:10px;
}
.label-primary {
    background-color: #337ab7;
}
.label-info {
    background-color: #5bc0de;
	color:white;
}
.label-danger
{
	background-color: #d9534f;
	color:white;
}
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.speciality.label
{
	margin-right:15px;
	color:rgba(194,4,48,1);
}
.hidden
{
	display:none;
}
.catalogue
{
	margin-top:15px;
}
.catalogue a
{
	color:#004085;
}
.catalogue .label
{
	padding-top:10px;
	padding-bottom:10px;
}
.title.panel
{
	text-transform: capitalize;
	margin-bottom:25px;
}
textarea.form-control
{
	font-size:12px;
	width: 200px;
	min-height: 200px;
}
.references-group
{
	overflow-x: hidden;
	overflow-y:scroll;
/*	overflow:auto;*/
	height:200px;
}
.references-group .reference
{
	
	border-bottom:1px solid #e9ecef;
	margin-bottom:25px;
}
.has-error
{
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
	padding: .75rem 1.25rem;
	border: 1px solid transparent;
	    border-top-color: transparent;
	    border-right-color: transparent;
	    border-bottom-color: transparent;
	    border-left-color: transparent;
	border-radius: .25rem;
	
}
.listgenes
{
	border:1px solid #e9ecef;
	padding: 5px;
	margin-top:10px;
	width:100%;
}
.listgenes .geneid
{
	float:left;
	margin-top:4px;
}
.label-info
{
	background-color: #cce5ff;
}
.listgenes .label
{
	color: #004085;
	
	border-color: #b8daff;
	
	border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
	border-radius: .25rem;
	
	
	padding-top: 8px;
	padding-bottom: 8px;
	display: table;
	min-height: 35px;
	float: left;
	margin-left: 10px;
	margin-top:5px;
}
/*a{
	border:1px solid red !important;
}*/
.label-R{background-color:#777}
.label-DM{background-color:#d9534f}
.label-DM\?{background-color:#f0ad4e}
.label-FP,.label-DP,.label-DFP{background-color:#5cb85c}
.label-AR{background-color:#5cb85c;}
.label-AD,.label-ADAR,.label-XLD{background-color:#5bc0de;}
.label-UNK{background-color:#777;}
.label-YL{background-color:#f0ad4e;}


.multivcf .modal-dialog
{
	max-width:none;
}
.showSearchgenes .modal-dialog
{
	max-width:1124px;
}
.mutation_show .modal-dialog,
.newpanel .modal-dialog
{
	max-width:1024px;
}
#nav-tab-view-mutation li a
{
	font-size:12px;
}
.dropdown-menu{
	font-size:12px;
	width: max-content;
	border:1px solid rgba(194,4,48,0.2);
}
.window .modal-body
{
	height:300px;
	overflow-x: hidden; /* Hide horizontal scrollbar */
	overflow-y: auto; /* Add vertical scrollbar */
}
.extraref_show .modal-body,
.newpanel .modal-body,
.multivcf .modal-body,
{
	height:250px;
	overflow-x: hidden; /* Hide horizontal scrollbar */
	overflow-y: scroll; /* Add vertical scrollbar */
}
i.support 
{
	font-size: 16px;
	text-align: center;
	display: block;
}
.window .modal-content
{
	height:600px;
    border: 1px solid rgba(194,4,48,0.2);
	box-shadow:2px 7px 15px rgb(0 0 0 / 10%), 0px -4px 10px rgb(255 255 255 / 10%);
}

.modal-header
{
    border-bottom: none;
	background-color: transparent;
}

.modal-footer
{
    border-top: 1px solid rgba(194,4,48,0.2);
	background-color:#f7f7f7;
}


.form-control
{
	border:1px solid rgba(194,4,48,0.2);
}


.gene_show .modal-body,
.mutation_show .modal-body,
.showSearchgenes .modal-body
{
	height:250px;
	overflow-y: scroll; /* Add vertical scrollbar */
}

.gene_show .tab-content,
.mutation_show .tab-content,
.showSearchgenes .tab-content
{
/*	height:250px;*/
	overflow-x: hidden; /* Hide horizontal scrollbar */
	
}
.table td, .table th {

    padding: 0.5rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    font-size: 12px;

}
td.sep
{
	background-color:#dee2e6;
}

.table td:nth-child(4)
{
	word-break: break-all;
}
.table th 
{
	border-top: 0px;
}

.listgenes .label i
{
	margin-left:18px;
	font-size:20px;
	float:left;
	cursor:pointer;
}
pre.pre-scrollable
{
	font-size:12px;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.card .card-header button:not(.collapsed) .rotate-icon {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.card .card-header .rotate-icon
{
	float:right;
}
/*style nimgenetics*/
/*#c20430*/
.card-header
{
/*	background-color:rgba(203,204,206,1);*/
	border:0px;
	border-radius:0px;
	padding-left:2rem;
}
.card-header:first-child,
.card
{
	border-radius:0px;
}
.card
{
	/*border-top:none;
	border-right:none;
	border-left:none;
 	border-bottom:1px solid rgba(194,4,48,0.2);*/
	border:none;
}
.card-header .btn-link
{
	font-size:1.2rem;
	font-weight:500;
	color:#6c757d;
	width:100%;
	text-align:left;
}

.card-body
{
  background-color:#f7f7f7;
	padding-top:0;
}

.btn-link:hover {
  font-weight:bold !important;
  text-decoration:none !important;
	color:rgba(194,4,48,0.7) !important;
}

.btn-link:focus {
  font-weight:bold;
  text-decoration:none;
	color:rgba(194,4,48,0.7);
}

.btn-link[aria-expanded="true"]{
  font-weight:bold !important;
  text-decoration:none !important;
	color:rgba(194,4,48,0.7) !important;
}

.btn-link[aria-expanded="false"]{
  font-weight:normal;
  color:#6c757d;
}


.nav-link
{
	color:#6c757d !important;
	font-size: 1.1rem;
}

.nav-link:hover
{
	font-weight:bold;
	color:rgba(194,4,48,0.7) !important;
}

.nav-item:hover .permission
{
    color: white;
    background-color: rgba(194,4,48,0.6);
    border-color: white;
    font-size: 10px;
    float: right;
    /* margin-top: 7px; */
    font-weight: bold;
}



.btn-primary
{
	background-color:rgba(194,4,48,0.7);
	border:white;
}
.btn-primary:hover {

    color: #fff;
	font-weight:bold;
	background-color:rgba(194,4,48,0.9);

}

.btn.btn-secondary
{
	border:white;
	background-color:rgba(108, 117, 125, 0.8) !important;
}

.btn.btn-secondary:hover
{
	font-weight:bold;
}

.bg-inverse {

 background-color: #f7f7f7 !important;
	border-bottom:1px solid rgba(194,4,48,0.2);
}
.card-body li
{
	/*margin-bottom:15px;*/
}
.card-body li:after
{
	clear:both;
	content:'';
	display:table;
}
.card-body a
{
	padding:0px;
	width:100%;
/*	-top:10px;
	margin-bottom:10px;*/
}
a{
	color:rgba(194,4,48,1);
}
a:hover,
a:focus
{
/*	font-weight:bold;*/
	color:rgba(194,4,48,1);
}
.modal-title
{
	color:rgba(194,4,48,1);
}
.modal-header .close,
.btn-primary.btn-help i
{
	color:rgba(194,4,48,1);
}
.tab-content
{
	margin-top:25px;
}
.col.Gen
{
	width:30px;
}
.col.Enfermedad
{
	width:50%;
}
.primer_table
{
	width:100%;
}
.overflow-namestep
{
	text-align: center;
	font-size: 22px;
}
.insertion,
.deletion{
	word-break: break-all;
}

.comments{
	word-break:break-word;
}
.text-center {
    text-align: left !important;
}
textarea{
	resize:none;
}
.dataTables_wrapper .dataTables_filter input
{
		display: block;
		float:right;
	    height: calc(2.25rem + 2px);
	    padding: .375rem .75rem;
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 1.5;
	    color: #495057;
	    background-color: #fff;
	    background-clip: padding-box;
	    border: 1px solid #ced4da;
	        border-top-color: rgb(206, 212, 218);
	        border-right-color: rgb(206, 212, 218);
	        border-bottom-color: rgb(206, 212, 218);
	        border-left-color: rgb(206, 212, 218);
	    border-radius: .25rem;
	    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}
.menu{
	margin-bottom:20px;
}
.menu .ui-widget-content a,
.menu a.btn-primary
{
	color:white;
	
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}
.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table,
.dataTables_scroll table
{
	/*width:100% !important;*/
}

.nav-item
{
	color:black;
    padding-right:.5rem;
    padding-left:3rem;
	text-decoration:none;
}
.nav-item:focus,.nav-item:hover
{
	color:black;
	text-decoration:none;
}
.nav-item:focus, .dropdown-submenu:hover {
	color: #16181b;
	text-decoration: none;
	background-color:#f8f9fa;
}
.dropdown-submenu a
{
	display: block;
	width: 100%;
	padding: .25rem 1.5rem;
	clear: both;
	font-weight: 400;
	color: #212529;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
}



.issue-btn,
.docs-btn{
  width: 220px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align:center;
  margin: 0 auto;
}

.issue-btn a,
.docs-btn a{
  text-decoration: none;
  border: 1px solid rgba(194,4,48,0.2);
  padding: 6px;
  color: #6c757d;

  position: relative;
  display: inline-block;
  width:220px;
}


.issue-btn span,
.docs-btn span{
  position: relative;
  /* z-index coz when we put bg to before and after this span text will not be visible */
  z-index: 3;
  font-size: 11.5px;
  letter-spacing: 1.5px;
}

.issue-btn a::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -2px;
  width: calc(100% + 6px);
  /*100% plus double the times left values*/
  height: calc(100% - 10px);
  background-color: #f7f7f7;
  transition: all 0.3s ease-in-out;
  transform: scaleY(1);
}

.issue-btn a:hover::before {
  transform: scaleY(0);
}

.issue-btn a::after {
  content: "";
  position: absolute;
  left: 5px;
  top: -5px;
  width: calc(100% - 10px);
  /*100% plus double the times left values*/
  height: calc(100% + 10px);
  background-color: #f7f7f7;
  transition: all 0.3s ease-in-out;
  transform: scaleX(1);
}
/* Created by http://grohit.com/  */

.issue-btn a:hover::after{
  transform: scaleX(0);
}

.docs-btn a::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -2px;
  width: calc(100% + 6px);
  /*100% plus double the times left values*/
  height: calc(100% - 10px);
  background-color: #f7f7f7;
  transition: all 0.3s ease-in-out;
  transform: scaleY(0);
}

.docs-btn a:hover::before {
  transform: scaleY(1);
}

.docs-btn a::after {
  content: "";
  position: absolute;
  left: 5px;
  top: -5px;
  width: calc(100% - 10px);
  /*100% plus double the times left values*/
  height: calc(100% + 10px);
  background-color: #f7f7f7;
  transition: all 0.3s ease-in-out;
  transform: scaleX(0);
}
/* Created by http://grohit.com/  */

.docs-btn a:hover::after {
  transform: scaleX(1);
}


input[type=checkbox], input[type=radio] 
{
	filter: hue-rotate(125deg);
}

.ui-widget-content{
	border:none !important;
	margin-left: 2rem;
	margin-top: 2rem;
}

.dropdown-divider {
	border-top: 1px solid rgba(194,4,48,0.2);
	margin:0;
}

.calendar-info
{
	display:flex;
	color:rgba(108, 117, 125, 0.8)
}

.calendar-info:hover i,
.calendar-info:hover h6
{
	color: rgba(194,4,48,0.7);
}

pre code p
{
	font-size:13px;
}

.ui-menu.ui-autocomplete .ui-menu-item-wrapper
{
	font-size:.9rem !important;
}

.accordion-services
{
	margin-top:15px;
}


/*
Services heading icons
*/

.btn-link:focus  > .header-icon:before
{
  color:rgba(194,4,48,0.7) !important;
}

.btn-link[aria-expanded="true"] > .header-icon:before 
{
  color:rgba(194,4,48,0.7) !important;
}

.btn-link[aria-expanded="false"] > .header-icon:before 
{
  color:#6c757d !important;
}

.btn-link:hover > .header-icon:before
{
	color:rgba(194,4,48,0.7) !important;
}


.header-icon:before
{
	font-family: "Font Awesome 5 Free";
	display: inline-block;
   	margin-right: 10px;
   	font-weight:bold;
	width:30px;
	color:rgba(108, 117, 125, 0.8);
	
}

.header-icon-Reports:before
{
   	content: "\f477";
	font-size:1.7rem;
	padding-left:3px;
}

.header-icon-Cytogenomics:before
{
   	content: "\f471";
	font-size:1.5rem;
	padding-left:3px;	
}

.header-icon-Demographics:before
{
   	content: "\f80d";
	font-size:1.5rem;	
}


.header-icon-NIMXplorer:before
{
   	content: "\f2a1";
	font-size:1.5rem;	
}


.custom-icon-separator
{
	border-left: 1px solid rgba(194,4,48,0.2);
	height: 50%	;
}

.custom-icon-outlink
{
    height: 70%;
	margin-top: .3rem;
    padding-right: 1.5rem;
	padding-left:.5rem;
}

.custom-icon-outlink:hover
{
	filter: invert(14%) sepia(91%) saturate(35000%) hue-rotate(350deg) brightness(85%) contrast(91%) opacity(0.75);
	-webkit-filter: invert(14%) sepia(91%) saturate(35000%) hue-rotate(350deg) brightness(85%) contrast(91%) opacity(0.75);
}