#vb-container{
--app-header-height:64px;
--filters-panel-overlay-width:472px;
--filters-panel-in-page-width:400px;
--filters-panel-in-page-left-padding:24px;
--conditions-panel-width-collapsed:64px;
--conditions-panel-width-expanded:472px;
--conditions-panel-header-height:72px;
--all-variants-panel-left-padding:24px;
--all-variants-panel-right-padding:24px;
--vb-tabs-header-height:56px;
--vb-action-bar-height:65px;
--vb-all-variants-tabs-height:57px;
--vb-all-variants-secondary-header-height:64px;
}
#vb-head{
padding:0 24px;
background-color:var(--primary-blue);
height:var(--vb-tabs-header-height);
}
#vb-opened-tabs{
overflow:hidden!important;
padding:11px 0;
scrollbar-width:none;
-ms-overflow-style:none;
display:flex;
gap:16px;
padding-left:8px;
}
#vb-opened-tabs::-webkit-scrollbar{
width:0;
height:0;
}
.vb-tab-button>[name="close-tab"]{
width:18px;
height:18px;
border-radius:9px;
background-color:var(--primary-green);
opacity:0;
position:absolute;
top:-9px;
right:-9px;
transition-property:opacity;
transition-duration:300ms;
border:none;
padding:1px;
}
.vb-tab-button{
background-color:var(--primary-blue);
color:#fff;
font-size:12px;
line-height:110%;
letter-spacing:0.05em;
font-weight:var(--font-weight-bold);
border-radius:8px;
border:1px solid #ffffff;
padding:10px 16px;
flex-shrink:0;
position:relative;
white-space:nowrap;
}
.vb-tab-button.tab-active{
color:#2b384e ;
background-color:#fff;
}
.vb-tab-button:hover{
border:1px solid #ffffff;
background-color:var(--blue-90);
}
.vb-tab-button.tab-active:hover{
background-color:var(--blue-10);
}
.empty-vb-cnv-no-variants{
height:calc(100vh - var(--app-header-height) - var(--vb-all-variants-tabs-height));
background:var(--blue-90);
padding:50px 100px;
}
.empty-vb-cnv-no-variants .panel-white{
border-radius:8px;
padding-top:50px;
}
.vb-tab-navigation-arrow{
margin:0;
background-color:transparent;
box-shadow:0px 0px 8px 1px var(--primary-blue);
z-index:1;
}
.vb-tab-navigation-arrow[name="navigate-arrow-right"]{
padding-left:8px;
clip-path:inset(0 0 0 -8px);
}
.vb-tab-navigation-arrow[name="navigate-arrow-left"]{
padding-right:4px;
clip-path:inset(0 -8px 0 0);
}
.resize-vb-button{
width:32px;
height:32px;
background-color:var(--blue-90);
padding:4px;
border-radius:16px;
margin-left:12px;
}
.resize-vb-button:hover{
background-color:var(--blue-80);
}
.vb-action-bar{
display:flex;
justify-content:flex-end;
gap:8px;
flex-grow:1;
z-index:1;
margin-left:85px;
}
.vb-sample-info-button{
position:relative;
width:40px;
height:40px;
border-radius:20px;
background-color:var(--blue-80);
padding:11px;
border:none;
}
.vb-sample-info-button.double[name="sample-phenotypes"]{
border-radius:0 20px 20px 0;
width:42px;
padding-right:13px;
}
.vb-sample-info-button.double[name="sample-info"]{
border-radius:20px 0 0 20px;
width:42px;
padding-left:13px;
}
.vb-sample-info-button:hover{
background-color:var(--blue-70);
}
.vb-sample-info-button img{
height:18px;
}
.vb-sample-info-button .warning-badge{
height:16px;
width:16px;
position:absolute;
top:0;
right:0;
border-radius:8px;
background-color:var(--secondary-red);
}
.sample-info-swap-container{
position:relative;
height:18px;
width:18px;
}
.sample-info-swap-container .info-icon-swap,
.sample-info-swap-container .fam-icon-swap{
position:absolute;
top:0;
left:0;
opacity:0;
transition:opacity 1.5s ease-in-out;
}
@keyframes infoSwapAnimation{
0%{opacity:1;}
45%{opacity:1;}
50%{opacity:0;}
95%{opacity:0;}
100%{opacity:1;}
}
@keyframes famSwapAnimation{
0%{opacity:0;}
45%{opacity:0;}
50%{opacity:1;}
95%{opacity:1;}
100%{opacity:0;}
}
.sample-info-swap-container .info-icon-swap{
animation:infoSwapAnimation 15s infinite;
}
.sample-info-swap-container .fam-icon-swap{
animation:famSwapAnimation 15s infinite;
}
.stage-label{
height:26px;
margin-left:8px;
border-radius:4px;
background-color:var(--blue-80);
color:white;
border:none;
padding:0 8px;
}
.vb-search-bar{
background-color:var(--blue-90);
box-shadow:0px 0px 20px 17px var(--blue-90);
clip-path:inset(0 0 0 -20px);
}
.vb-vnt-search-container{
height:40px;
border-radius:8px;
border:1px solid transparent;
background-color:var(--blue-80);
display:flex;
justify-content:space-between;
}
.vb-vnt-search-container.search-active{
background-color:var(--blue-70);
}
.vb-vnt-search-container.search-active .expandable-container img{
opacity:40%;
}
.vb-vnt-search-container.err-input-text{
border:1px solid var(--secondary-red);
}
.vb-vnt-search-container img{
height:18px;
}
.vb-vnt-search-container button{
background:none;
border:none;
}
.vb-vnt-search-container .expandable-container.grow{
width:290px;
}
.vb-vnt-search-container .expandable-container{
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
width:0px;
transition:width 500ms;
}
.vb-vnt-search-container input{
margin-left:3px;
height:40px;
border:1px solid transparent;
font-size:14px;
line-height:140%;
font-weight:var(--font-weight-medium);
background-color:transparent;
display:block;
color:#ffffff;
flex-grow:1;
text-overflow:ellipsis;
}
.vb-vnt-search-container input::placeholder{
opacity:1;
color:var(--blue-20);
font-weight:400;
}
.tail-button{
width:40px;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
.vb-vnt-search-container .tail-button.alone:hover{
background-color:var(--blue-70);
border-radius:8px;
}
.vb-action-button{
height:40px;
border-radius:8px;
background-color:var(--blue-80);
border:none;
color:var(--blue-20);
padding:0px 8px;
}
.vb-action-button:hover{
color:white;
background-color:var(--blue-70);
}
.vb-action-button>img{
height:18px;
}
.vb-action-button [name="running_progress"]{
color:var(--green-80);
}
.vb-action-button [name="applied_filters_counter"]{
margin-left:8px;
padding:1px 6px;
background:var(--primary-green);
min-width:20px;
color:white;
font-weight:var(--font-weight-medium);
height:20px;
border-radius:10px;
}
.addon-switch{
display:flex;
align-items:center;
margin-left:8px;
}
.addon-switch .vnt-switch{
position:relative;
display:inline-block;
margin-bottom:0;
width:40px;
height:20px;
transform:unset;
}
.addon-switch .vnt-slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background-color:var(--blue-50);
opacity:1;
transition:.2s;
}
.addon-switch input:checked + .vnt-slider{
background-color:var(--primary-green);
opacity:1;
}
#sampleInfoModal .alert-container{
border-radius:4px;
background-color:var(--blue-5);
display:flex;
padding:16px;
gap:18px;
margin-top:16px;
}
#sampleInfoModal .info-container .label-s,
#sampleInfoModal .family-info-table-container .label-s{
color:var(--blue-60);
margin-top:16px;
margin-bottom:4px;
}
#sampleInfoModal hr{
margin-top:16px;
margin-bottom:16px;
}
.family-info-table-container{
margin-top:16px;
background-color:var(--blue-5);
padding:16px 8px;
border-radius:4px;
width:100%;
}
.family-info-table-container a{
font-weight:var(--font-weight-medium);
text-decoration-line:underline;
text-decoration-style:solid;
color:var(--primary-blue);
}
.family-info-table-container a:hover{
color:var(--primary-green);
}
.family-info-table-container td{
font-size:14px;
font-weight:var(--font-weight-medium);
line-height:140%;
padding-top:4px;
vertical-align:top;
word-break:break-word;
}
.family-info-table-container td:first-child,
.family-info-table-container th:first-child{
padding-left:8px;
}
.family-info-table-container td:last-child,
.family-info-table-container th:last-child{
padding-right:8px;
}
.family-info-table-container tr.this-sample + tr td{
padding-top:0;
}
.family-info-table-container tr.this-sample td{
background-color:var(--blue-10);
padding-top:4px;
padding-bottom:4px;
}
.family-info-table-container tr.this-sample td:first-child{
border-radius:4px 0 0 4px;
}
.family-info-table-container tr.this-sample td:last-child{
border-radius:0 4px 4px 0;
}
.filters-container{
background:transparent;
display:flex;
}
.filters-container.as-overlay{
--filters-panel-width:472px;
--filter-footer-height:96px;
--filter-header-height:80px;
position:fixed;
top:0;
right:0;
height:100vh;
pointer-events:auto !important;
}
.filters-container.in-page{
--filters-panel-width:400px;
--filter-footer-height:80px;
--filter-header-height:56px;
padding-left:24px;
}
.filters-overlay{
background-color:var(--primary-blue);
opacity:64%;
width:100vw;
}
.filtersPanel{
background:white;
width:var(--filters-panel-width);
height:100%;
}
.as-overlay>.filtersPanel{
position:absolute;
box-shadow:0px 4px 16px 0px rgba(52,77,102,0.08);
z-index:1;
right:0;
transition:0.7s;
}
.in-page>.filtersPanel{
border-radius:8px;
}
.filtersPanel .popover{
max-width:350px;
}
.filtersPanel .wider-popovers .popover{
max-width:unset;
}
.as-overlay>.filtersPanel.placed-out{
right:calc(0px - var(--filters-panel-width));
}
.filters-container .close-button{
position:absolute;
top:16px;
right:24px;
}
.filters-container.in-page .close-button{
display:none;
}
.filters-container.as-overlay .panel-heading{
padding:28px 24px;
height:var(--filter-header-height);
}
.filters-container.in-page .panel-heading{
padding:16px 16px;
height:var(--filter-header-height);
}
.filters-container .panel-body,
.filters-container + div .panel-body{
position:relative;
padding:20px;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.filters-container .panel-heading .panel-title{
float:left;
margin:0px;
padding:0px;
font-weight:500;
}
.filters-container.as-overlay .panel-heading .panel-title{
font-size:20px;
}
.filters-container.in-page .panel-heading .panel-title{
font-size:18px;
padding:3px 0;
}
.load-save-filters-sticky-container{
display:flex;
gap:16px;
position:sticky;
position:-webkit-sticky;
top:-8px;
padding:16px 0;
background-color:white;
z-index:11;
}
.sticky-filter-search-bar{
position:sticky;
position:-webkit-sticky;
top:-8px;
background-color:white;
z-index:11;
padding:16px 0;
}
.filter-body-footer-wrapper{
}
.filtersPanel .filters_body{
opacity:1;
scroll-behavior:smooth;
position:relative;
overflow-y:auto;
}
.in-page>.filtersPanel .filters_body{
padding:8px 16px;
height:calc(100vh - var(--app-header-height) - var(--vb-tabs-header-height) - var(--vb-action-bar-height) - var(--vb-all-variants-tabs-height) - var(--filter-footer-height) - 18px);
}
.in-page>.filtersPanel{
height:calc(100vh - var(--app-header-height) - var(--vb-tabs-header-height) - var(--vb-action-bar-height) - 18px);
}
.as-overlay>.filtersPanel .filters_body{
padding:8px 24px;
height:calc(100vh - var(--filter-header-height) - var(--filter-footer-height));
}
.saved_filter_name{
border-radius:4px;
background:var(--green-10);
height:24px;
padding:4px 8px;
font-size:12px;
font-weight:700;
letter-spacing:0.6px;
margin-left:8px;
}
.back-button{
background:none;
border:none;
padding:0;
}
.filter-subsection-title{
color:var(--blue-60);
font-size:14px;
font-style:normal;
font-weight:var(--font-weight-medium);
line-height:140%;
}
.filters-container.in-page .search-result-dropdown{
width:calc(100% - 32px);
}
.filter-head{
display:flex;
justify-content:flex-start;
align-items:center;
gap:4px;
margin:16px 0;
}
.filter-head.expanded [name="dropdown-arrow"]{
transform:rotate(180deg);
}
.filt-coll_button{
margin-left:auto;
padding:0;
}
.filter-head .has-active-filters:not(.hidden) + .filt-coll_button{
margin-left:0;
}
.filter-divider{
margin:0;
}
.default-footer{
display:flex;
justify-content:space-between;
}
.default-footer .button-large{
flex-grow:1;
min-width:unset;
}
.as-overlay>.filtersPanel .default-footer{
padding:24px;
gap:24px;
}
.in-page>.filtersPanel .default-footer{
padding:16px;
gap:16px;
}
.filter-category-title{
background-color:var(--green-30);
border-radius:8px 8px 0 0;
color:var(--primary-blue);
text-align:center;
margin-top:24px;
margin-bottom:0px;
padding:10px 16px;
}
.filter-category-title:hover{
background-color:var(--green-40);
}
.active-vb-filter-elem + .active-vb-filter-elem{
margin-top:8px;
}
.active-vb-filter-elem:last-child{
margin-bottom:16px;
}
.has-active-filters{
height:8px;
width:8px;
background-color:var(--primary-green);
border-radius:8px;
margin:0 4px;
margin-left:auto;
}
.filtersPanel [name="modalTextualSearch"]{
border-radius:8px;
border:1px solid var(--blue-10);
background:white;
padding:8px 16px;
font-size:14px;
font-weight:var(--font-weight-medium);
color:var(--primary-blue);
}
.filtersPanel [name="modalTextualSearch"]::placeholder{
color:var(--blue-60);
font-weight:var(--font-weight-regular);
}
.filtersPanel [name="modalTextualSearch"] + p{
right:12px !important;
color:var(--blue-60) !important;
}
.filter-slider{
-webkit-appearance:none;
appearance:none;
height:4px;
border-radius:2px;
min-width:180px;
max-width:200px;
background:-webkit-linear-gradient(left,var(--primary-blue) 0%,var(--primary-blue) 100%);
outline:none;
-moz-background:none;
}
.filter-slider::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:24px;
height:24px;
border-radius:50%;
border:0;
background:url('../../images/icons/white/arrow-right.svg'),var(--primary-green);
background-position:1px;
cursor:pointer;
}
.filter-slider::-moz-range-thumb{
appearance:none;
width:24px;
height:24px;
border-radius:50%;
border:0;
background:var(--primary-green);
cursor:pointer;
}
.filter-slider-text-input{
width:80px;
height:32px;
border-radius:4px;
border:1px solid var(--blue-10);
margin-left:24px;
font-size:14px;
font-weight:700;
line-height:110%;
padding:0 16px;
}
.filter-slider-text-input.validation-error{
border-color:var(--secondary-red);
}
.filter-slider-error{
color:var(--secondary-red);
margin:0;
font-size:12px;
text-wrap-mode:wrap;
max-width:65px;
line-height:120%;
padding:3px 8px 3px 11px;
position:absolute;
right:-10px;
}
.filters-container [name="pluginSlider"]{
height:4px;
max-width:calc(200px - 12px - 12px);
margin-bottom:50px;
border:none;
box-shadow:none;
margin-left:12px;
margin-right:12px;
background:var(--blue-10);
margin-top:20px;
}
.filters-container .noUi-base{
box-shadow:none;
border:none;
}
.filters-container .noUi-marker.noUi-marker-horizontal.noUi-marker{
height:7px !important;
width:1px !important;
background:var(--blue-60);
}
.filters-container .noUi-pips{
color:var(--blue-60) !important;
padding:8px 0px;
}
.filters-container .noUi-target{
background:var(--blue-10);
}
.filters-container .noUi-connects{
border:none;
box-shadow:none;
border-radius:2px;
background:var(--blue-10);
border:none;
box-shadow:none;
}
.filters-container .noUi-connect{
background:var(--primary-blue);
}
.filters-container .noUi-handle.noUi-handle-lower,
.filters-container .noUi-handle.noUi-handle-upper{
width:24px;
height:24px;
top:-10px;
left:5px;
cursor:pointer;
border-radius:50%;
border:none;
box-shadow:none;
}
.filters-container .noUi-handle.noUi-handle-lower{
background-position:1px;
background:var(--primary-green);
}
.filters-container .noUi-handle.noUi-handle-upper{
background:var(--primary-green);
}
.filters-container .noUi-handle:after,
.filters-container .noUi-handle:before{
background:none;
}
.filters-container .noUi-base::before{
content:'';
display:block;
width:12px;
height:4px;
background-color:var(--blue-10);
position:absolute;
top:0;
left:-12px;
border-radius:2px 0 0 2px;
}
.filters-container .noUi-base::after{
content:'';
display:block;
width:12px;
height:4px;
background-color:var(--blue-10);
position:absolute;
top:0;
right:-12px;
border-radius:0 2px 2px 0;
}
.filters-container .noUi-value.noUi-value-horizontal.noUi-value-large{
font-size:16px;
color:var(--blue-60);
font-size:12px;
font-family:'Roboto';
font-style:normal;
}
.filter-list-action-group{
display:flex;
}
.as-overlay>.filtersPanel .filter-list-action-group{
gap:16px;
}
.in-page>.filtersPanel .filter-list-action-group{
gap:8px;
}
.genes_list,.filter_variants_list{
height:230px;
border:1px solid var(--blue-10);
overflow:auto;
border-radius:4px 4px 0 0;
padding:0 16px;
position:relative;
}
.filter_variants_list{
margin-bottom:16px;
border-radius:4px;
}
.gene_input_area,.vnts_input_area{
width:100%;
resize:none;
border:none;
overflow:hidden;
margin-top:10px;
margin-bottom:10px;
}
.gene_input_area:disabled,.vnts_input_area:disabled{
border-radius:8px;
padding:8px;
}
.filt_gene_cnt + .filt_gene_cnt,
.filt_vnts_cnt + .filt_vnts_cnt{
margin-top:16px;
}
.cnt_container{
height:24px;
color:var(--primary-blue);
text-align:center;
font-size:12px;
font-weight:var(--font-weight-bold);
line-height:100%;
border:1px solid;
border-radius:4px;
padding:6px 8px;
margin-right:8px;
display:inline-flex;
}
.cnt_container[name="valid_cnt"]{
border-color:var(--primary-green);
}
.cnt_container[name="invalid_cnt"],
.cnt_container[name="not_in_assembly_cnt"]{
border-color:var(--secondary-red);
}
.cnt_container[name="alt_cnt"]{
border-color:var(--secondary-yellow);
}
.export_gene_list{
background-color:var(--primary-blue);
color:white;
width:100%;
text-align:center;
border-radius:0 0 4px 4px;
padding:0px 0px;
font-size:12px;
height:24px;
border:none;
display:flex;
justify-content:center;
align-items:center;
line-height:100%;
margin-bottom:24px;
}
.export_gene_list:hover{
background-color:var(--blue-90);
}
.export_gene_list:disabled{
background-color:var(--blue-70);
}
.genes_coverage_div{
margin-top:16px;
}
.copy-from-tooltip{
border-radius:50%;
border:none;
background:white;
padding:6px;
height:30px;
width:30px;
display:flex;
}
.copy-from-tooltip:hover{
background-color:var(--green-10);
}
.filters-gene-elem{
color:var(--primary-blue);
border-radius:16px;
padding:9px 16px;
line-height:100%;
font-size:12px;
font-weight:var(
--font-weight-bold);
letter-spacing:0.05em;
text-transform:uppercase;
font-style:normal;
display:inline-block;
background-color:var(--green-20);
margin-top:16px;
margin-right:16px;
position:relative;
}
.filters-gene-elem.bg-warning{
background-color:#FFF3CF;
}
.filters-gene-elem.bg-danger{
background-color:var(--red-20);
}
.filters-gene-elem [name="close-btn"]{
width:18px;
height:18px;
border-radius:9px;
background-color:var(--primary-blue);
opacity:0;
position:absolute;
top:-9px;
right:-9px;
transition-property:opacity;
transition-duration:300ms;
border:none;
padding:2px;
}
.filter_variants_list .filters-gene-elem .label-s,
.chips-container.variant-chips .filters-gene-elem .label-s{
text-transform:none;
}
.saved-filters-list-container{
overflow-y:auto;
}
.saved-filter-card{
margin-top:16px;
}
.saved-filter-card{
border-radius:8px;
background-color:var(--blue-5);
border:1px solid var(--blue-5);
padding:16px;
}
.saved-filter-card:hover{
background-color:var(--blue-10);
border:1px solid var(--blue-10);
}
.saved-filter-card.row-selected{
background-color:var(--blue-10) !important;
border:1px solid var(--blue-40);
}
.saved-filter-card .radio-box{
height:24px;
width:24px;
background:url('../../images/icons/blue-primary/radio.svg') no-repeat center center;
margin-right:4px;
flex-shrink:0;
}
.saved-filter-card.row-selected .radio-box{
background:url('../../images/icons/blue-primary/radio-filled.svg') no-repeat center center;
}
.saved-filter-card.expanded .saved-filter-card-action[name="expand-collapse"]{
transform:rotate(180deg);
}
.saved-filter-card-action-group{
display:flex;
gap:8px;
margin-left:auto;
}
.saved-filter-card-action{
height:32px;
width:32px;
background-color:white;
border:1px solid var(--blue-10);
border-radius:50%;
}
.saved-filter-card-action img{
height:18px;
width:18px;
}
.saved-filter-card-action:hover{
background-color:var(--blue-20);
}
.saved-filter-card-action:disabled{
background-color:white;
opacity:0.5;
}
.saved-filter-card .chips-container{
background-color:white;
padding:0 0 16px 16px;
border-radius:4px;
cursor:auto;
}
.saved-filter-card .desc-container:not(.hidden) + .chips-container{
border-radius:0 0 4px 4px;
}
.saved-filter-card .desc-container{
background:white;
border:none;
border-bottom:1px solid var(--blue-10);
border-radius:4px 4px 0 0;
padding:8px;
}
.saved-filter-card .desc-container textarea{
border-radius:4px 4px 0 0;
background:white;
border:none;
padding:8px;
}
.saved-filter-card textarea:not(:disabled),
.saved-filter-card input:not(:disabled){
background:var(--blue-5);
}
.saved-filter-card textarea:not(:disabled)::placeholder,
.saved-filter-card input:not(:disabled)::placeholder{
color:var(--blue-60);
font-weight:var(--font-weight-regular);
}
.saved-filter-card .error-msg{
color:var(--secondary-red);
margin:4px 0 0px;
}
.saved-filter-card .slider{
margin-top:16px;
}
.saved-filter-card .error-msg:not(.hidden) ~ .slider{
margin-top:8px;
}
.saved-filter-card .filters-gene-elem,
[name="elements-to-be-saved"] .filters-gene-elem{
background-color:var(--blue-5);
}
[name="invalid-elements"] .filters-gene-elem{
background-color:var(--red-20);
}
[name="invalid-elements"] .chips-container,
[name="elements-to-be-saved"] .chips-container{
overflow-y:auto;
max-height:100px;
background-color:white;
padding:0 0 16px 16px;
border-radius:4px;
cursor:auto;
border:solid 1px var(--blue-10);
}
[name="invalid-elements"] label,
[name="elements-to-be-saved"] label{
color:var(--primary-blue);
font-size:10px;
font-weight:var(--font-weight-bold);
line-height:11px;
text-align:left;
text-transform:uppercase;
margin-bottom:8px;
}
.genesLimit,
.vntsLimit{
position:absolute;
left:10px;
background:white;
padding:10px;
width:calc(100% - 35px);
}
.genesLimit{
bottom:49px;
}
.vntsLimit{
bottom:17px;
}
.selected-condition-card{
background:var(--blue-5);
border-radius:8px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 16px;
gap:8px;
min-height:56px;
}
.selected-condition-card + .selected-condition-card{
margin-top:16px;
}
.pheno_tree_y_n{
width:24px;
height:24px;
line-height:14px;
font-size:14px;
font-weight:var(--font-weight-bold);
border:1px solid var(--blue-10);
background:white;
border-radius:4px;
padding:0;
}
.pheno_tree_y_n:hover{
background-color:var(--blue-10);
}
.confirmed_hpo_btn{
background-color:var(--primary-blue);
color:white;
}
.confirmed_hpo_btn.secondary-red-text{
color:var(--secondary-red);
}
.confirmed_hpo_btn:hover{
background-color:var(--blue-90);
}
.jstree{
--jstree-custom-icon-width:68px;
}
.jstree-anchor,
.jstree-clicked,
.jstree-hovered,
.jstree{
background-color:var(--blue-5) !important;
}
.jstree-node>.jstree-icon.jstree-ocl{
width:var(--jstree-custom-icon-width);
}
.jstree-default-large .jstree-node{
background-image:url("../../images/phenotype-tree/children-group.svg");
background-repeat:repeat-y;
background-position-x:18px;
background-position-y:-18px;
}
.jstree-default-large .jstree-last{
background:transparent;
}
.jstree-default-large .jstree-leaf>.jstree-ocl{
background-image:url("../../images/phenotype-tree/leaf-node.svg");
background-repeat:no-repeat;
background-position-x:18px;
background-position-y:-19px;
}
.jstree-node.jstree-open>.jstree-icon.jstree-ocl{
background-image:url("../../images/phenotype-tree/expanded-node.svg");
background-repeat:no-repeat;
background-position-x:18px;
background-position-y:-18px;
width:var(--jstree-custom-icon-width);
height:35px;
}
.jstree-node.jstree-closed>.jstree-icon.jstree-ocl{
background-image:url("../../images/phenotype-tree/collapsed-node.svg");
background-repeat:no-repeat;
background-position-x:18px;
background-position-y:-18px;
}
.jstree-node.jstree-loading>.jstree-icon.jstree-ocl{
background-image:none;
position:relative;
}
.jstree-node.jstree-loading>.jstree-icon.jstree-ocl::before{
content:"";
position:absolute;
height:18px;
width:18px;
z-index:4;
background-image:url("../../images/phenotype-tree/spinner-node.svg");
background-repeat:no-repeat;
left:18px;
top:6px;
animation:jstree-rotating-spinner 1s infinite linear;
}
@keyframes jstree-rotating-spinner{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.jstree-node{
margin-left:var(--jstree-custom-icon-width) !important;
}
.jstree-default-large>.jstree-container-ul>.jstree-node{
margin-left:0 !important;
}
.interesting-match-label{
background-color:var(--green-30);
padding:4px 8px;
border-radius:4px;
}
.phenotype_modal_confirmed_panel{
background-color:var(--blue-5);
margin:0px -24px;
padding:24px 16px;
margin-top:16px;
min-height:calc(100vh - var(--filter-footer-height) - var(--filter-header-height) - 132px - 40px);
}
.filters-container.in-page .phenotype_modal_confirmed_panel{
margin:0px -16px;
padding:24px 10px;
margin-top:16px;
}
#suggest-diagnosis-modal .phenotype_modal_confirmed_panel{
margin:0px -20px;
padding:24px 12px;
margin-top:24px;
min-height:180px;
max-height:calc(100vh - 100px - 200px - 132px - 40px);
overflow-y:auto;
}
table.hpo_confirmed_results{
width:100%;
max-width:100%;
}
table.hpo_confirmed_results th{
color:var(--blue-60);
font-size:12px;
font-weight:700;
letter-spacing:0.6px;
text-transform:uppercase;
}
table.hpo_confirmed_results{
max-width:100%;
}
table.hpo_confirmed_results > thead > tr > th{
max-width:30px;
padding:8px;
}
#suggest-diagnosis-modal .phenotype_modal_confirmed_panel table.hpo_confirmed_results > thead > tr > th{
max-width:16px;
padding:8px;
}
table.hpo_confirmed_results > thead > tr > th:first-child,
#suggest-diagnosis-modal table.hpo_confirmed_results > thead > tr > th:first-child{
width:auto;
max-width:50%;
}
table.hpo_confirmed_results > thead > tr > th:last-child{
min-width:25px;
}
#suggest-diagnosis-modal table.hpo_confirmed_results > thead > tr > th:last-child{
min-width:16px;
}
table.hpo_confirmed_results > tbody > tr > td{
padding:8px;
max-width:1px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
table.hpo_confirmed_results > tbody > tr > td:first-child{
border-radius:8px 0 0 8px;
}
table.hpo_confirmed_results > tbody > tr > td:last-child{
padding-right:8px;
border-radius:0 8px 8px 0;
text-overflow:unset;
}
.hpo_confirmed_row:hover{
background-color:var(--blue-10);
}
.disabled-lab-range{
pointer-events:none;
opacity:0.6;
}
.lab-range-error{
color:var(--secondary-red);
font-size:12px;
margin:0 8px;
max-width:100px;
}
.addonSettingSex{
height:32px;
padding:7px 16px 7px 8px;
font-size:12px;
width:150px;
font-weight:var(--font-weight-medium);
border-radius:4px;
border:1px solid var(--blue-10);
background:white;
}
.suggested-active-phenos{
background-color:var(--blue-5);
margin:0 -20px;
padding:16px 0px;
}
.suggested-active-phenos .expanded .saved-filter-card-action[name="expand-collapse"]{
transform:rotate(180deg);
}
.addon-edit-phenotypes-button{
border:none;
background:none;
display:flex;
padding:0;
align-items:center;
margin-left:20px;
}
.addon-completion-status{
font-size:14px;
font-style:normal;
font-weight:var(--font-weight-bold);
letter-spacing:0.7px;
text-transform:uppercase;
height:24px;
padding:4px 8px;
align-items:center;
border-radius:4px;
margin-right:auto;
position:absolute;
top:25px;
right:88px;
color:var(--primary-blue);
background:var(--green-10);
}
.addon-completion-status.failed{
background:var(--red-10);
color:var(--secondary-red);
}
.addon-completion-status .percentage{
color:var(--primary-green);
}
.addonSettingMlf{
height:32px;
padding:7px 16px 7px 8px;
font-size:12px;
width:150px;
font-weight:var(--font-weight-medium);
border-radius:4px;
border:1px solid var(--blue-10);
background:white;
margin-top:12px;
opacity:0.6;
}
.unblurBtnCntnr{
top:45%!important;
width:400px;
height:200px;
}
.unblurBtn{
top:45%!important;
background-color:#FFF;
transition:all 0.3s ease 0s;
cursor:pointer;
border-radius:8px;
border:1px solid var(--blue-20);
background:#FFF;
box-shadow:0px 4px 16px 0px rgba(52,77,102,0.08);
height:40px;
padding:0 16px;
}
.unblurBtnCntnr:hover .unblurBtn{
transform:translate(-50%,-50%) scale(1.05);
background-color:var(--green-10);
}
ul.vb-tabs-head{
list-style-type:none;
padding:0;
margin:0;
}
ul.vb-tabs-head > li{
border-right:1px solid var(--blue-10);
}
ul.vb-tabs-head > li:last-child{
border-right:none;
}
.centralCols .panel-heading{
border-bottom:1px solid var(--blue-10) !important;
height:var(--vb-all-variants-tabs-height);
overflow:visible;
padding:0;
position:relative;
}
ul.vb-tabs-head > li > a{
height:56px;
font-size:18px;
font-weight:var(--font-weight-bold);
color:var(--blue-60);
line-height:100%;
display:flex;
align-items:center;
gap:4px;
padding:17px;
}
ul.vb-tabs-head > li.active > a{
color:var(--primary-blue);
}
ul.vb-tabs-head > li > a:hover{
text-decoration:none;
color:var(--primary-blue);
}
ul.vb-tabs-head > li > a > i{
color:var(--blue-60);
font-style:normal;
}
ul.vb-tabs-head > li.active > a > i{
color:var(--primary-green);
}
.vb-options-wrapper{
padding:16px;
cursor:pointer;
}
.vb-options-wrapper:hover .allVntsOptionsIcon{
transform:scale(1.2);
}
.allVntsOptionsMenu{
position:absolute;
top:40px;
padding:12px 10px;
right:12px;
z-index:11;
margin-top:9px;
margin-left:0;
background-color:white;
border:1px solid var(--blue-10);
box-shadow:0px 4px 16px 0px #344D6614;
border-radius:4px;
color:var(--primary-blue);
}
.allVntsOptionsMenu:hover{
display:block!important;
}
.vb-secondary-header{
height:var(--vb-all-variants-secondary-header-height) !important;
padding:16px;
}
.gene-grouping-switch{
display:flex;
gap:8px;
}
.export-option-container{
padding:8px 0;
overflow-y:auto;
max-height:calc(100vh - 80px - 150px);
}
.export-option-category{
margin:16px 0;
background-color:var(--green-10);
border-radius:8px;
color:var(--primary-blue);
text-align:center;
padding:4px 16px;
}
[name="tabs-cntnr"]{
height:calc(100vh - var(--app-header-height) - var(--vb-tabs-header-height) - var(--vb-action-bar-height) - var(--vb-all-variants-tabs-height) - var(--vb-all-variants-secondary-header-height) - 18px);
padding-right:8px !important;
padding-left:8px !important;
scroll-behavior:smooth;
}
.centralCols > .panel{
border-radius:8px;
}
.variantDetails .panel-body{
overflow:auto;
overscroll-behavior:contain;
min-height:20em;;
height:calc(100vh - var(--app-header-height) - var(--vb-tabs-header-height) - var(--vb-action-bar-height) - var(--vb-all-variants-tabs-height) - var(--vb-all-variants-secondary-header-height) - 64px - 50px - 56px - 56px);
}
.showResults + tr:not(.showResults):not([name="moreSpinner"],[name="onlyHiddenResults"]),.showResults + tr:not(.showResults):not([name="moreSpinner"],[name="onlyHiddenResults"])>td{
background-color:var(--blue-5);
}
.detailsButtons{
display:flex;
gap:8px;
flex-wrap:wrap;
padding-bottom:16px;
border-bottom:1px solid var(--blue-10);
margin:0px 16px;
}
.variant-row-detail-button{
background-color:transparent;
border:1px solid var(--blue-80);
color:var(--primary-blue);
border-radius:4px;
font-size:12px;
font-weight:var(--font-weight-bold);
letter-spacing:0.5px;
text-transform:uppercase;
line-height:100%;
padding:0px 16px;
white-space:nowrap;
height:32px;
display:flex;
align-items:center;
}
.variant-row-detail-button:hover{
background-color:var(--blue-10);
}
.variant-row-detail-button.active{
background:var(--blue-90);
color:white;
}
.variant-row-detail-button.active:hover{
background:var(--primary-blue);
}
ul.vb-vnt-details-tabs{
list-style-type:none;
padding:0;
margin:0;
display:flex;
}
.vb-vnt-details-tabs li{
background-color:transparent;
border:none;
border-bottom:1px solid var(--blue-20);
text-align:center;
min-width:200px;
}
.vb-vnt-details-tabs li.filler{
flex-grow:1;
}
.vb-vnt-details-tabs li.active{
background-color:transparent;
border-bottom:1px solid var(--primary-blue);
}
.vb-vnt-details-tabs li a{
font-size:12px;
font-weight:var(--font-weight-bold);
letter-spacing:0.6px;
text-transform:uppercase;
color:var(--blue-60);
text-decoration:none;
padding:8px 16px;
display:block;
}
.vb-vnt-details-tabs li.active a{
color:var(--primary-blue);
}
.vb-vnt-details-tabs li a:hover{
color:var(--primary-blue);
text-decoration:none;
}
.vb-vnt-details-tabs li a .extra{
color:var(--blue-60);
}
.vb-vnt-details-tabs li.active a .extra{
color:var(--primary-green);
}
.vb-vnt-details-tab{
padding:5px 20px;
}
.transcript-container{
background-color:var(--blue-10);
margin-top:16px;
border-radius:4px;
}
.transcript-container [name="gene_header"]{
border-radius:4px;
padding:16px;
}
.transcript-container [name="gene_header"]:hover{
background-color:var(--blue-20);
}
.transcript-container [name="e"],
.transcript-container [name="r"]{
display:flex;
flex-direction:column;
}
.transcript-header{
display:flex;
padding:8px 0;
margin:8px 16px 0;
border-radius:4px;
align-items:center;
}
.transcript-header:hover{
background-color:rgb(52 77 102 / 6%);
}
.transcript-header .transcript-label{
border:thin solid;
border-radius:16px;
padding:3px 8px;
color:var(--primary-green);
letter-spacing:0.05em;
}
.transcript-header .actions{
display:flex;
flex-grow:1;
gap:8px;
margin-right:9px;
margin-left:8px;
align-items:center;
}
.transcript-header .actions button,
.vcf_vnt .action{
border:none;
background-color:transparent;
width:18px;
height:18px;
border-radius:50%;
background-size:18px 18px;
background-repeat:no-repeat;
}
.transcript-header .actions [name="copy"]{
background-image:url("../../images/icons/blue-primary/copy.svg");
}
.transcript-header .actions [name="copy"]:hover{
background-image:url("../../images/icons/green/copy.svg");
}
.transcript-header .actions [name="pin"]{
background-image:url("../../images/icons/blue-primary/pin.svg");
}
.transcript-header .actions [name="pin"]:hover{
background-image:url("../../images/icons/green/pin.svg");
}
.transcript-header .actions [name="pin"].pinned{
background-image:url("../../images/icons/blue-primary/unpin.svg");
}
.transcript-header .actions [name="pin"].pinned:hover{
background-image:url("../../images/icons/green/unpin.svg");
}
.transcript-header .actions [name="expand-collapse"],
.vcf_vnt .action[name="expand-collapse"]{
background-image:url("../../images/icons/blue-primary/add.svg");
}
.transcript-header .actions [name="expand-collapse"]:hover,
.vcf_vnt .action[name="expand-collapse"]:hover{
background-image:url("../../images/icons/green/add.svg");
}
.transcript-header.expanded .actions [name="expand-collapse"],
.vcf_vnt.expanded .action[name="expand-collapse"]{
background-image:url("../../images/icons/blue-primary/remove.svg");
}
.transcript-header.expanded .actions [name="expand-collapse"]:hover,
.vcf_vnt.expanded .action[name="expand-collapse"]:hover{
background-image:url("../../images/icons/green/remove.svg");
}
.transcriptsContent.snvTranscriptsContent ,.transcriptsContent.cnvTranscriptsContent{
margin:8px 16px 0;
padding:0 16px;
border-left:1px solid var(--blue-20);
}
.divider-section{
background-color:var(--blue-80);
color:white;
padding:4px 8px;
margin:16px 0;
border-radius:4px;
margin-left:-8px;
}
[name="load_vnt_into_gv"] a>img{
background-color:var(--primary-green);
height:24px;
border-radius:50%;
padding:2px;
}
[name="load_vnt_into_gv"] a:hover>img{
background-color:var(--green-110);
height:24px;
border-radius:50%;
padding:2px;
}
.vcf_vnt:hover{
color:var(--primary-green);
}
table[id^='all-variants'],
table[id^='gene-all-variants']{
border-collapse:separate;
}
table[id^='all-variants'] td.vnt_row_td,
table[id^='gene-all-variants'] td.vnt_row_td{
height:calc(48px + 8px);
background-color:var(--blue-5);
vertical-align:middle;
padding-top:0 !important;
padding-bottom:0 !important;
border-bottom:4px solid white;
border-top:4px solid white;
}
table[id^='all-variants'] tr:hover td.vnt_row_td,
table[id^='gene-all-variants'] tr:hover td.vnt_row_td{
background-color:var(--blue-10);
}
table[id^='all-variants'] .var-row-selected td.vnt_row_td,
table[id^='gene-all-variants'] .var-row-selected td.vnt_row_td{
color:white;
background:var(--blue-90);
}
table[id^='all-variants'] .var-row-selected:hover td.vnt_row_td,
table[id^='gene-all-variants'] .var-row-selected:hover td.vnt_row_td{
color:white;
background:var(--primary-blue);
}
table[id^='all-variants'] td.vnt_row_td:first-child,
table[id^='gene-all-variants'] td.vnt_row_td:first-child{
border-left:4px solid white;
border-radius:10px 0 0 10px;
padding:0 16px !important;
}
table[id^='all-variants'] td.vnt_row_td[name="plusMinus"],
table[id^='gene-all-variants'] td.vnt_row_td[name="plusMinus"]{
border-right:4px solid white;
border-radius:0 10px 10px 0;
}
table[id^='all-variants']>tbody>tr[name="moreSpinner"]>td
table[id^='gene-all-variants']>tbody>tr[name="moreSpinner"]>td{
background-color:white;
}
table[id^='all-variants'] tr:hover td.vnt_row_td[name="row_absolute_cntnr_hook"],
table[id^='gene-all-variants'] tr:hover td.vnt_row_td[name="row_absolute_cntnr_hook"]{
background-color:transparent;
}
table[id^='all-variants'] tr.shown td.vnt_row_td,
table[id^='gene-all-variants'] tr.shown td.vnt_row_td{
height:calc(48px + 4px);
border-bottom:none;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
table[id^='all-variants'] tr.shown + tr:not(.showResults)>td,
table[id^='gene-all-variants'] tr.shown + tr:not(.showResults)>td{
border:4px solid white;
border-top:none;
border-radius:0 0 10px 10px;
}
.vnt_row_td.vnt_row_opacity > *{
opacity:0.3 !important;
}
table[id^='all-variants'] tr:hover td.vnt_row_td[name="row_absolute_cntnr_hook"],
table[id^='gene-all-variants'] tr:hover td.vnt_row_td[name="row_absolute_cntnr_hook"]{
background-color:transparent;
}
[name="row_absolute_cntnr_hook"]{
right:102px;
top:0px;
}
table[id^='all-variants'] td.vnt_row_td[name="row_absolute_cntnr_hook"] > div,
table[id^='gene-all-variants'] td.vnt_row_td[name="row_absolute_cntnr_hook"] > div{
margin:4px 0;
height:calc(100% - 8px);
background-color:var(--blue-5);
box-shadow:0px 0px 20px 17px var(--blue-5);
clip-path:inset(0 0 0 -20px);
}
table[id^='all-variants'] tr:hover td.vnt_row_td[name="row_absolute_cntnr_hook"] > div,
table[id^='gene-all-variants'] tr:hover td.vnt_row_td[name="row_absolute_cntnr_hook"] > div{
background-color:var(--blue-10);
box-shadow:0px 0px 20px 17px var(--blue-10);
}
table[id^='all-variants'] tr.var-row-selected td.vnt_row_td[name="row_absolute_cntnr_hook"] > div,
table[id^='gene-all-variants'] tr.var-row-selected td.vnt_row_td[name="row_absolute_cntnr_hook"] > div{
background-color:var(--blue-90);
box-shadow:0px 0px 20px 17px var(--blue-90);
}
table[id^='all-variants'] tr.var-row-selected:hover td.vnt_row_td[name="row_absolute_cntnr_hook"] > div,
table[id^='gene-all-variants'] tr.var-row-selected:hover td.vnt_row_td[name="row_absolute_cntnr_hook"] > div{
background-color:var(--primary-blue);
box-shadow:0px 0px 20px 17px var(--primary-blue);
}
table[id^='all-variants'] tr[name="moreSpinner"] > td,
table[id^='gene-all-variants'] tr[name="moreSpinner"] > td{
border:none;
}
table[name="variants_group_by_gene"] tbody.gene_group_list > tr > td{
border-bottom:1px solid var(--blue-30);
border-top:1px solid var(--blue-30);
height:48px;
}
table[name="variants_group_by_gene"] tbody.gene_group_list > tr > td:first-child{
border-left:1px solid var(--blue-30);
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
table[name="variants_group_by_gene"] tbody.gene_group_list > tr > td:last-child{
border-top-right-radius:8px;
border-bottom-right-radius:8px;
border-right:1px solid var(--blue-30);
}
table[name="variants_group_by_gene"] tbody.gene_group_list > tr > td[colspan="5"]{
border-top:none;
position:relative;
border-top-right-radius:0;
border-top-left-radius:0;
}
table[name="variants_group_by_gene"] tbody.gene_group_list > tr:not([name="moreSpinner"]) > td[colspan="5"]::before{
content:'';
position:absolute;
height:20px;
width:1px;
top:-13px;
left:-1px;
border-left:1px solid var(--blue-30);
}
table[name="variants_group_by_gene"] tbody.gene_group_list > tr:not([name="moreSpinner"]) > td[colspan="5"]::after{
border-top:none;
content:'';
position:absolute;
height:20px;
width:1px;
top:-13px;
right:-1px;
border-left:1px solid var(--blue-30);
}
table[name="variants_group_by_gene"] tbody.gene_group_list > tr.expanded > td{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
table[name="variants_group_by_gene"]{
border-collapse:separate;
border-spacing:0 10px;
}
table[name="variants_group_by_gene"] tbody.gene_group_list > tr[name="moreSpinner"] > td{
border:none;
}
.genePlusMinus{
width:24px;
height:24px;
background-size:24px 24px;
background-repeat:no-repeat;
background-image:url("../../images/icons/blue-primary/add.svg");
}
.expanded .genePlusMinus{
background-image:url("../../images/icons/blue-primary/remove.svg");
}
@media (min-width:0px){
.variantRowHgvs-compact{
display:block;
}
.variantRowHgvs-extended{
display:none;
}
.variantRowGnomadFrequency{
display:none;
}
}
@media (min-width:1600px){
.variantRowHgvs-compact{
display:none;
}
[name="vrow_effect"]{
font-size:14px;
}
.variantRowHgvs-extended{
display:block;
font-size:14px;
}
.variantRowGnomadFrequency{
display:none;
}
}
@media (min-width:1920px){
.variantRowGnomadFrequency{
display:flex;
align-items:center;
margin-left:8px;
}
}
.lab-f-counter{
height:24px;
min-width:24px;
padding:6px 5px;
border-radius:4px;
border:1px solid var(--blue-20);
background:var(--blue-10);
font-size:12px;
display:flex;
font-weight:var(--font-weight-bold);
align-items:center;
justify-content:center;
line-height:100%;
}
.var-row-selected .lab-f-counter{
border-color:var(--blue-60);
background:var(--blue-80);
color:white;
}
.variant-row-comment{
border:none;
padding:0;
background-color:transparent;
width:24px;
height:24px;
background-size:24px 24px;
background-repeat:no-repeat;
background-image:url("../../images/icons/blue-60/chat.svg");
}
.variant-row-comment.gene-comment{
width:18px;
height:18px;
background-size:18px 18px;
}
.var-row-selected .variant-row-comment{
background-image:url("../../images/icons/blue-40/chat.svg");
}
.variant-row-comment:hover{
transform:scale(1.1) !important;
transition:all 0.2s ease 0s;
}
.vb-comment-card{
background-color:var(--blue-5);
border-radius:4px;
padding:16px;
position:relative;
}
.vb-comment-card + .vb-comment-card{
margin-top:8px;
}
.comment-card-action{
height:32px;
width:32px;
background-color:white;
border:1px solid var(--blue-10);
border-radius:50%;
}
.comment-card-action img{
height:18px;
width:18px;
}
.comment-card-action:hover{
background-color:var(--blue-20);
}
.variant-row-action{
width:32px;
height:32px;
background-color:white;
border-radius:50%;
border:1px solid var(--blue-10);
background-size:24px 24px;
background-repeat:no-repeat;
background-position:center;
}
.var-row-selected .variant-row-action{
background-color:var(--blue-80);
border:1px solid var(--blue-70);
}
.variant-row-action.row-options{
background-image:url("../../images/icons/blue-primary/options-vertical.svg");
}
.variant-row-action.row-options.options-shown{
border:1px solid var(--primary-blue);
}
.var-row-selected .variant-row-action.row-options{
background-image:url("../../images/icons/white/options-vertical.svg");
}
.var-row-selected .variant-row-action.row-options.options-shown{
border:1px solid white;
}
.variant-row-action.dropdown-arrow{
background-image:url("../../images/icons/blue-primary/arrow-down.svg");
}
.var-row-selected .variant-row-action.dropdown-arrow{
background-image:url("../../images/icons/white/arrow-down.svg");
}
.shown .variant-row-action.dropdown-arrow{
transform:rotate(180deg);
}
.vnt_row_td .checkbox-control > span::before{
margin-right:0px;
}
.var-row-selected .checkbox-control > span::before{
background-image:url("../../images/icons/white/checkbox.svg");
}
.var-row-selected .checkbox-control > input:checked + span::before{
background-image:url("../../images/icons/white/checkbox-checked.svg");
}
.class-patho-score{
color:var(--blue-60);
}
.var-row-selected .class-patho-score{
color:var(--blue-40);
}
.zigosity-icon{
width:24px;
height:24px;
display:block;
background-size:24px 24px;
background-repeat:no-repeat;
background-position:center;
}
.zigosity-icon.homozygosity{
background-image:url("../../images/zygosity_icons/homozygosity.svg");
}
.zigosity-icon.heterozygosity{
background-image:url("../../images/zygosity_icons/heterozygosity.svg");
}
.zigosity-icon.heterozygosity-mosaic{
background-image:url("../../images/zygosity_icons/heterozygosity-mosaic.svg");
}
.zigosity-icon.multi-allelic{
background-image:url("../../images/zygosity_icons/multi-allelic.svg");
}
.var-row-selected .zigosity-icon.homozygosity{
background-image:url("../../images/zygosity_icons/white-homozygosity.svg");
}
.var-row-selected .zigosity-icon.heterozygosity{
background-image:url("../../images/zygosity_icons/white-heterozygosity.svg");
}
.var-row-selected .zigosity-icon.heterozygosity-mosaic{
background-image:url("../../images/zygosity_icons/white-heterozygosity-mosaic.svg");
}
.var-row-selected .zigosity-icon.multi-allelic{
background-image:url("../../images/zygosity_icons/white-multi-allelic.svg");
}
.vnt-circle{
-moz-transform:scale(0.7,0.7);
font-size:20px;
}
.kb-circle{
color:var(--secondary-red);
}
.mito-circle{
color:var(--blue-80);
}
.clinvar-circle{
color:#baa0e3;
}
.gnomad-row-icon{
width:18px;
height:18px;
background-size:18px 18px;
background-repeat:no-repeat;
background-position:center;
background-image:url("../../images/icons/blue-primary/gnomAD.svg");
margin-right:4px;
opacity:0.4;
}
.var-row-selected .gnomad-row-icon{
background-image:url("../../images/icons/white/gnomAD.svg");
}
.vcs-row-span-container{
margin-right:16px;
width:85px;
}
.vcs-row-span{
border-radius:25px;
border:1px solid var(--primary-green) !important;
background-color:transparent;
justify-content:center;
height:24px;
display:flex;
align-items:center;
width:min-content;
}
.vcs-row-span .vcs-score{
margin:0 4px 0 8px;
}
.vcs-row-span .vcs-score:last-child{
margin-right:8px;
}
.vcs-score-extra{
display:flex;
background-color:var(--primary-blue);
border-radius:16px;
padding:0;
margin-right:2px;
}
.vcs-score-extra.extraSpace{
padding:0 1px;
}
.var-row-selected .vcs-score-extra{
background-color:white;
}
.vcs-score-plus{
border-radius:50%;
background-image:url("../../images/icons/white/add.svg");
background-size:16px 16px;
background-repeat:no-repeat;
background-position:center;
width:20px;
height:20px;
}
.var-row-selected .vcs-score-plus{
background-image:url("../../images/icons/blue-primary/add.svg");
}
.vcs-score-digenic{
border-radius:50%;
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
line-height:18px;
font-size:12px;
font-weight:var(--font-weight-bold);
color:white;
}
.var-row-selected .vcs-score-digenic{
color:var(--primary-blue);
}
.vcs-score-plus + .vcs-score-digenic::before{
content:'';
position:absolute;
border-left:1px solid white;
opacity:0.5;
height:100%;
width:1px;
left:0;
}
.var-row-selected .vcs-score-plus + .vcs-score-digenic::before{
border-left-color:var(--primary-blue);
}
tr.showResult .vcs-row-span.hcs-hook{
transition:all 0.5s ease;
}
tr.showResults .vcs-row-span.hcs-hook:hover{
transform:scale(1.1);
background-color:rgb(90 190 186 / 20%);
}
.vcs-score-plus,.vcs-score-digenic{
position:relative;
}
#addonVntDetails .modal-header .vcs-row-span .vcs-score{
font-size:15px;
margin:0 12px;
}
#addonVntDetails .modal-title>img{
transform:scale(1.1);
}
#addonVntDetails .modal-title>.paragraph-m{
font-size:20px;
}
table[name="oligogenics"] .copy-image{
height:18px;
width:18px;
background-image:url("../../images/icons/blue-primary/copy.svg");
background-size:18px 18px;
background-repeat:no-repeat;
background-position:center;
}
table[name="oligogenics"] .copy-image:hover{
background-image:url("../../images/icons/green/copy.svg");
}
[name='more_effect']{
position:absolute;
top:30px;
left:16px;
z-index:11;
border-radius:5px;
padding:10px 10px 8px;
min-width:min-content;
max-width:250%;
width:min-content;
background-color:#FFF;
transition:0.2s;
transition:0.4s;
color:var(--primary-blue);
box-shadow:0px 0px 8px 0px #344D6614;
}
.vb-vnt-row-popover{
border-radius:8px;
border:1px solid var(--blue-10);
background:white;
box-shadow:0px 4px 16px 0px rgba(52,77,102,0.08);
color:var(--primary-blue);
}
.row-options-menu-cntnr{
z-index:11;
width:210px;
position:fixed;
margin-top:9px;
margin-left:0;
background-color:white;
border:1px solid var(--blue-10);
box-shadow:0px 4px 16px 0px #344D6614;
border-radius:4px;
color:var(--primary-blue);
}
.row-options-menu-cntnr>div>div:not(.disabled-span-btn):hover{
background-color:#F2FAF9;
}
.row-options-menu-cntnr>div>div:not(.disabled-span-btn){
margin:8px;
padding:4px;
border-radius:4px;
}
.menuLabelAs .rowOptsubMenu{
width:110px!important;
box-shadow:0px 4px 16px 0px #344D6614;
border-radius:4px;
}
.rowOptsubMenu{
top:-27px;
left:23px;
}
.rowOptsubMenuElement,.rowOptsubMenuSpinner{
margin:8px;
padding:4px;
border-radius:4px;
}
.rowOptsubMenuElement:hover{
background-color:#F2FAF9;
}
.variant-row-label{
display:flex;
height:24px;
padding:0 8px;
justify-content:center;
align-items:center;
gap:10px;
border-radius:16px;
border:1px solid var(--primary-green);
}
.variant-row-report-icon{
border:none;
padding:0;
background-color:transparent;
width:24px;
height:24px;
background-size:24px 24px;
background-repeat:no-repeat;
background-image:url("../../images/icons/blue-60/document.svg");
}
.var-row-selected .variant-row-report-icon{
background-image:url("../../images/icons/blue-40/document.svg");
}
.variant-row-confirmed-label{
border:none;
background-color:var(--primary-green);
height:24px;
width:24px;
margin-bottom:0;
border-radius:4px;
color:white;
display:flex;
align-items:center;
justify-content:center;
}
.variant-row-artifact-label{
background-color:var(--secondary-yellow);
color:var(--primary-blue);
border:1px solid var(--primary-blue);
height:26px;
padding:0 8px;
border-radius:4px;
display:flex;
justify-content:center;
align-items:center;
}
.artifact-nudge{
background-color:#fbebbd;
}
.artifact-nudge .yes-no{
border-left:1px solid var(--primary-blue);
border-bottom-right-radius:4px;
border-top-right-radius:4px;
height:100%;
padding:0 8px;
background:white;
margin-left:8px;
margin-right:-8px;
width:73px;
}
.variant-row-family-inheritance{
display:flex;
padding:0 5px;
border:1px solid var(--blue-20);
color:var(--primary-blue);
background-color:white;
height:24px;
align-items:center;
border-radius:4px;
width:24px;
justify-content:center;
}
.cnvOverlapLabel{
margin-right:11px;
border-radius:4px;
height:24px;
box-shadow:3px -2px var(--blue-40);
padding:0 8px;
justify-content:center;
align-items:center;
border:1px solid var(--blue-40);
display:flex;
margin-bottom:6px;
margin-top:-2px;
}
.var-row-selected .cnvOverlapLabel{
border:1px solid var(--blue-60);
box-shadow:3px -2px var(--blue-60);
}
.cnv-variant-subtype,
.cnv-variant-cons{
display:flex;
justify-content:center;
align-items:center;
border-radius:4px;
height:24px;
padding:0 8px;
border:1px solid var(--blue-40);
width:min-content;
}
.var-row-selected .cnv-variant-subtype,
.var-row-selected .cnv-variant-cons{
border:1px solid var(--blue-60);
}
.conditions-container{
background-color:white;
width:var(--conditions-panel-width-expanded);
overflow:hidden;
}
.conditions-container.collapsed{
width:var(--conditions-panel-width-collapsed);
}
.iconizedPhenotypes .panel{
height:100%;
padding:0px;
}
.iconsized-conditions-panel-header{
height:var(--conditions-panel-header-height);
display:flex;
flex-direction:column;
align-items:flex-start;
padding:24px 20px 10px 20px;
border-bottom:1px solid var(--blue-10);
}
.conditions-panel-header{
height:var(--conditions-panel-header-height);
display:flex;
align-items:center;
padding:0 24px;
border-bottom:1px solid var(--blue-10);
}
.phenotypes-to-icon,
.phenotypes-to-full{
border:none;
background-color:transparent;
padding:0;
}
[name="prioritized-gene-warning"]{
border:1px solid var(--secondary-red);
border-radius:8px;
padding:12px;
margin-bottom:24px;
}
.phenotypeElem{
border-radius:8px;
border:1px solid var(--blue-10);
background:white;
box-shadow:0px 4px 16px 0px rgba(52,77,102,0.08);
}
.phenotypeElem + .phenotypeElem{
margin-top:16px;
}
.phenotypeName{
display:flex;
align-items:center;
min-height:56px;
cursor:pointer;
border-radius:8px;
gap:8px;
padding:0 16px;
}
.phenotypeName:hover{
background-color:var(--blue-5);
}
.expanded .phenotypeName{
border-radius:8px 8px 0 0;
background-color:var(--blue-5);
}
.phenotypeName [name="sDescription"]{
padding:16px 0;
}
.phenotypeButton{
border:none;
background-color:transparent;
padding:0;
}
.phenotypeElem .vb-vnt-details-tabs li{
width:50%;
}
.phenotypeElem .vb-vnt-details-tabs li > a{
padding:16px 0;
height:46px;
display:block;
}
.cond-pheno-matched{
border-radius:16px;
border:1px solid var(--blue-10);
display:flex;
height:24px;
padding:7px 8px;
justify-content:center;
align-items:center;
}
.criteria-chip{
font-size:12px;
font-weight:var(--font-weight-bold);
line-height:100%;
letter-spacing:0.6px;
text-transform:uppercase;
color:var(--primary-blue);
display:flex;
height:32px;
justify-content:center;
align-items:center;
padding:0 16px;
border:2px solid transparent;
border-radius:16px;
margin:0;
transition:all 0.5s ease;
}
.criteria-legend{
width:24px;
height:24px;
}
.criteria-legend-text{
height:24px;
}
.criteria-legend.adjusted{
border:1px solid;
}
.criteria-legend.adjusted.all-bg-example{
background:repeating-linear-gradient(
135deg,
var(--red-80),
var(--red-60),
var(--red-40),
var(--red-20),
white ,
var(--green-20),
var(--green-40),
var(--green-60),
var(--green-80),
var(--primary-green)
);
}
.criteria-legend.neutral{
background-color:white;
border-color:var(--blue-10);
border-style:solid;
border-width:0 1px 0 1px;
}
.criteria-chip:hover{
box-shadow:0px 4px 16px 0px #344D6614;
transform:scale(1.05) translateY(-3px);
}
.criteria-chip.neutral{
background-color:white;
border-color:var(--blue-10);
}
.criteria-chip.adjusted,
.criteria-legend.adjusted{
border-color:var(--primary-blue);
border-width:2px;
}
.criteria-chip.deactivated::before,
.criteria-legend.deactivated::before{
position:absolute;
content:"";
left:0;
top:calc(50% - 1px);
right:0;
border-top:2px solid var(--primary-blue);
transform:rotate(-20deg);
clip-path:polygon(8px 50px,8px calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 8px);
}
.criteria-legend.deactivated::before{
clip-path:unset;
transform:rotate(-45deg);
}
.criteria-chip.deactivated,
.criteria-legend.deactivated{
position:relative;
overflow:hidden;
background-color:var(--blue-10);
}
.criteria-chip.patho.very-strong,
.criteria-legend.patho.very-strong{
background-color:var(--red-80);
}
.criteria-chip.patho.strong,
.criteria-legend.patho.strong{
background-color:var(--red-60);
}
.criteria-chip.patho.moderate,
.criteria-legend.patho.moderate{
background-color:var(--red-40);
}
.criteria-chip.patho.supporting,
.criteria-legend.patho.supporting{
background-color:var(--red-20);
}
.criteria-chip.benign.stand-alone,
.criteria-legend.benign.stand-alone{
background-color:var(--primary-green);
}
.criteria-chip.benign.very-strong,
.criteria-legend.benign.very-strong{
background-color:var(--green-80);
}
.criteria-chip.benign.strong,
.criteria-legend.benign.strong{
background-color:var(--green-60);
}
.criteria-chip.benign.moderate,
.criteria-legend.benign.moderate{
background-color:var(--green-40);
}
.criteria-chip.benign.supporting,
.criteria-legend.benign.supporting{
background-color:var(--green-20);
}
.phenotypeExtHeaderSection{
padding:8px 0;
}
.phenotypeExtHeaderSection.expanded .phenotypeExtButton>img{
transform:rotate(180deg);
}
.phenotypeExtData +.phenotypeExtData{
margin-top:8px;
}
[name="asso-div"] .delete-action{
border-radius:50%;
width:18px;
height:18px;
border:none;
background-color:transparent;
background-size:18px 18px;
background-repeat:no-repeat;
background-position:center;
background-image:url("../../images/icons/blue-60/delete.svg");
}
[name="asso-div"] .delete-action:hover{
background-image:url("../../images/icons/blue-primary/delete.svg");
transform:scale(1.2);
}
.linkToSub{
color:var(--blue-60);
text-decoration:underline;
}
.linkToSub:hover{
color:var(--primary-blue);
text-decoration:underline;
}
.sub-link{
display:flex;
align-items:flex-end;
justify-content:flex-end;
margin-top:4px;
}
.functional-studies-container{
background-color:var(--blue-5);
border-radius:4px;
padding:16px;
margin-top:16px;
}
.functional-studies-container .other-studies{
padding:16px;
background-color:white;
border-radius:4px;
border:1px solid var(--blue-10);
}
.edit-classification-label{
display:flex;
height:24px;
width:24px;
justify-content:center;
font-size:12px;
background-color:white;
color:var(--primary-blue);
border-radius:4px;
border:1px solid transparent;
align-items:center;
}
.edit-classification-label.LB,
.edit-classification-label.B{
border-color:var(--primary-green);
}
.edit-classification-label.LP,
.edit-classification-label.P{
border-color:var(--secondary-red);
}
.edit-classification-label.U{
border-color:var(--secondary-yellow);
}
.edit-classification-label.LB.adjusted,
.edit-classification-label.B.adjusted{
background-color:var(--primary-green);
color:white;
}
.edit-classification-label.LP.adjusted,
.edit-classification-label.P.adjusted{
background-color:var(--secondary-red);
color:white;
}
.edit-classification-label.U.adjusted{
background-color:var(--secondary-yellow);
}
table#edit-table,
table#cnv-edit-table{
border:none;
margin-top:8px;
}
#edit-table tr th,
#cnv-edit-table tr th{
border-bottom:1px solid var(--blue-10);
padding:8px 16px 8px 0 !important;
}
#edit-table td,#edit-table>tbody>tr>td,
#cnv-edit-table td,#cnv-edit-table>tbody>tr>td{
border-bottom:1px solid var(--blue-10);
border-top:none;
padding:16px 16px 16px 0 !important;
}
#edit-table td:last-child,#edit-table>tbody>tr>td:last-child,
#cnv-edit-table td:last-child,#cnv-edit-table>tbody>tr>td:last-child{
min-width:60px;
}
#cnv-edit-table td[name="cnvSliderTd"]{
padding:10px 16px 16px 0 !important;
}
#cnv-edit-table>tbody>tr>td.cnv-section-header{
background-color:var(--primary-blue);
color:white;
font-size:14px;
padding:0 8px !important;
height:24px;
vertical-align:middle;
}
#edit-table .select-control select{
min-width:unset;
border:none;
background-color:transparent;
cursor:pointer;
padding-top:0;
padding-bottom:0;
height:unset;
}
#edit-table .select-control select:disabled{
opacity:0.4;
}
#edit-table .paragraph-s.rule-desc,
#cnv-edit-table .paragraph-s.rule-desc{
line-height:140%
}
#edit-table tr.special-rule td{
padding-top:8px !important;
padding-right:0px !important;
}
#edit-table tr.special-rule td > .slider{
padding:16px;
background-color:var(--blue-5);
border-radius:8px;
}
button.e-publ-search{
border:none;
padding:0;
background-color:transparent;
width:24px;
height:24px;
background-size:24px 24px;
background-repeat:no-repeat;
background-image:url("../../images/icons/blue-primary/search.svg");
}
button.e-publ-search:hover{
background-image:url("../../images/icons/green/search.svg");
}
button.e-publ-search:disabled{
background-image:url("../../images/icons/blue-primary/search.svg");
opacity:0.6;
}
#edit-table .phen-option-button,
#edit-table .added-pub{
padding:0 8px;
height:24px;
border-radius:4px;
border:1px solid var(--primary-blue);
background:none;
color:var(--primary-blue);
margin:0;
display:flex;
align-items:center;
}
#edit-table .phen-option-button:hover,
#edit-table .added-pub{
color:var(--primary-green);
border-color:var(--primary-green);
}
#edit-table .delete-action{
border-radius:50%;
width:24px;
height:24px;
border:none;
background-color:transparent;
background-size:18px 18px;
background-repeat:no-repeat;
background-position:center;
background-image:url("../../images/icons/blue-primary/delete.svg");
}
#edit-table .delete-action:hover{
transform:scale(1.2);
}
#edit-table [name="expand-special-rule"].expanded{
transform:rotate(180deg);
}
.edit-reset-button{
color:var(--blue-60);
text-decoration:underline;
}
.edit-reset-button:hover{
color:var(--blue-80);
text-decoration:underline;
}
.edit-criteria-header{
gap:16px;
margin:0 -20px;
padding:16px 20px;
background-color:var(--blue-5);
}
.confict-warn{
position:absolute;
border:1px solid var(--secondary-red);
right:10px;
top:14px;
border-radius:4px;
box-shadow:0px 4px 16px 0px #344D6614;
background:white;
padding:4px 8px;
}
#phenotypeCnvEditModal [name="pluginSlider"]{
max-width:19em;
height:4px;
border:none;
box-shadow:none;
background:var(--blue-10);
margin-top:10px;
}
#phenotypeCnvEditModal .noUi-base{
box-shadow:none;
border:none;
}
#phenotypeCnvEditModal .noUi-marker.noUi-marker-horizontal.noUi-marker{
height:7px !important;
width:1px !important;
background:var(--blue-40);
top:3px;
}
#phenotypeCnvEditModal .noUi-pips{
color:var(--blue-60) !important;
padding:8px 0px;
}
#phenotypeCnvEditModal .noUi-target{
background:var(--blue-10);
}
#phenotypeCnvEditModal .noUi-connects{
border:none;
box-shadow:none;
border-radius:2px;
background:var(--primary-blue);
border:none;
box-shadow:none;
}
#phenotypeCnvEditModal .noUi-connect{
background:var(--primary-blue);
}
#phenotypeCnvEditModal .noUi-handle.noUi-handle-lower,
#phenotypeCnvEditModal .noUi-handle.noUi-handle-upper{
width:8px;
height:16px;
top:-6px;
right:-4px;
cursor:pointer;
border-radius:4px;
border:none;
box-shadow:none;
}
#phenotypeCnvEditModal .noUi-handle.noUi-handle-lower,
#phenotypeCnvEditModal .noUi-handle.noUi-handle-upper{
background:var(--primary-green);
}
#phenotypeCnvEditModal .noUi-handle:after,
#phenotypeCnvEditModal .noUi-handle:before{
background:none;
}
#phenotypeCnvEditModal .noUi-value.noUi-value-horizontal.noUi-value-large{
font-size:16px;
color:var(--blue-60);
font-size:12px;
font-family:'Roboto';
font-style:normal;
top:0;
}
#phenotypeCnvEditModal .noUi-horizontal .noUi-tooltip{
bottom:-40px;
font-size:14px;
color:var(--primary-blue);
border:0.5px solid var(--primary-green);
border-radius:4px;
padding:4px;
font-size:12px;
font-family:'Roboto';
font-style:normal;
transform:translate(-50%,-70%);
line-height:100%;
}
td[name="cnvSliderTd"]>[name="cnvSlider"]{
width:150px;
margin:15px 10px 30px 0;
}