#kbPage{
--kb-activities-width:472px;
--kb-activities-header-height:72px;
}
#all-kbs{
height:calc(100vh - var(--app-header-height) - var(--app-vb-navigation-height) - var(--app-footer-height) - 156px);
padding:0px 12px !important;
margin-top:8px;
}
#kb-variants{
flex-grow:1;
max-width:calc(100vw - var(--kb-activities-width));
height:calc(100vh - var(--app-header-height) - var(--app-vb-navigation-height) - var(--app-footer-height));
max-height:calc(100vh - var(--app-header-height) - var(--app-vb-navigation-height) - var(--app-footer-height));
}
#kb-variants .panel .panel-heading{
padding:16px;
overflow:visible;
}
#kb-variants .panel.panel-white{
margin:24px;
filter:drop-shadow(0 4px 16px rgba(52,77,102,0.08));
border-radius:8px;
overflow:hidden;
height:calc(100vh - var(--app-header-height) - var(--app-vb-navigation-height) - var(--app-footer-height) - 24px - 24px);
}
#kb-variants .panel [name="secondary-header"]{
margin-top:8px;
padding:0 16px;
}
#kb-activities{
width:var(--kb-activities-width);
min-width:var(--kb-activities-width);
}
#kb-activities .panel{
margin-bottom:0;
}
#kb-activities .panel-heading{
height:var(--kb-activities-header-height);
}
#all-activities{
height:calc(100vh - var(--app-header-height) - var(--app-vb-navigation-height) - var(--app-footer-height) - var(--kb-activities-header-height));
}
.sub-elem-content{
border-radius:8px;
border:1px solid var(--blue-10);
box-shadow:0px 4px 16px 0px rgba(52,77,102,0.08);
width:188px;
height:95px;
background:white;
}
.sub-elem{
margin-right:16px;
}
#vkbRowDetailsModal .slick-slide:last-child .sub-elem{
margin-right:0px;
}
.sub-elem-content.selected{
border-color:var(--primary-blue);
}
.sub-elem-content.deprecated-elem > *{
opacity:0.6;
}
.sub-elem-header{
display:flex;
justify-content:space-between;
border-bottom:1px solid var(--blue-10);
align-items:center;
padding:0 8px;
height:34px;
}
.sub-elem-header [name="delete-submission"]:hover{
transform:scale(1.2);
}
#vkbRowDetailsModal .slick-track{
margin:0 -20px !important;
padding:16px 20px !important;
}
#vkbRowDetailsModal .slick-slide{
width:unset !important;
}
#vkbRowDetailsModal .slick-arrow{
top:-12px
}
#vkbRowDetailsModal .slick-arrow.slick-prev{
left:unset;
right:28px;
}
#vkbRowDetailsModal .slick-arrow.slick-next{
right:0;
}
#vkbRowDetailsModal .slick-arrow.slick-prev::before,
#vkbRowDetailsModal .slick-arrow.slick-next::before{
height:24px;
width:24px;
content:'';
display:block;
}
#vkbRowDetailsModal .slick-arrow.slick-prev::before{
background-image:url('../../images/icons/blue-primary/arrow-circle-left.svg');
}
#vkbRowDetailsModal .slick-arrow.slick-next::before{
background-image:url('../../images/icons/blue-primary/arrow-circle-right.svg');
}
.exSubCardContainer-outer{
border-radius:8px;
overflow:hidden;
margin-top:16px;
border:1px solid var(--blue-10);
background-color:var(--blue-5);
}
.exSubCardContainer{
padding:20px;
overflow-x:auto;
}
.vkb-tabs{
list-style-type:none;
padding:0;
margin:0;
display:flex;
margin-top:8px;
}
.vkb-tabs > li{
padding:16px 0;
width:50%;
text-align:center;
border:none;
min-width:200px;
background-color:transparent;
border:none;
border-bottom:1px solid var(--blue-20);
}
.vkb-tabs > li.active{
background-color:transparent;
border-bottom:1px solid var(--primary-blue);
}
.vkb-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;
}
.vkb-tabs > li.active a{
color:var(--primary-blue);
}
.vkb-tabs > li a:hover{
color:var(--primary-green);
text-decoration:none;
}
.vkb-trig-rules{
display:flex;
flex-wrap:wrap;
gap:8px 16px;
}
#vkbRowDetailsModal .transcript-container{
background-color:var(--blue-5);
}
#vkbRowDetailsModal .transcript-container [name="gene_header"]:hover{
background-color:var(--blue-10);
}
#vkbRowDetailsModal .detailsButtons{
margin:16px 0 0 0;
}
#vkbRowDetailsModal .variant-row-detail-button:hover{
background:var(--blue-5);
}
#vkbRowDetailsModal .variant-row-detail-button.active:hover{
background:var(--primary-blue);
}
table#vkb-table th{
border-bottom:1px solid var(--blue-10);
padding:8px 15px!important;
font-size:10px;
font-style:normal;
font-weight:700;
line-height:110%;
text-transform:uppercase;
color:var(--blue-50);
font-family:"Roboto Mono";
position:relative;
}
table#vkb-table th:last-child::after,
table#vkb-table th:first-child::before{
height:0;
border-bottom:1px solid var(--blue-10);
width:34px;
position:fixed;
margin-top:8px;
}
table#vkb-table th:last-child::after{
right:-12px;
}
table#vkb-table th:first-child::before{
left:-12px;
}
#vkb-table_wrapper{
overflow:visible;
position:relative;
height:100%;
display:flex;
flex-direction:column;
}
#vkb-table thead{
position:sticky;
top:0;
background:white;
z-index:1;
}
#vkb-table tbody::before{
content:'';
display:table;
height:4px;
}
table[id^='vkb-table']{
border-collapse:separate;
border-bottom:none !important;
}
table[id^='vkb-table']>tbody 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;
cursor:pointer;
}
table[id^='vkb-table']>tbody tr:hover td{
background-color:var(--blue-10);
}
table[id^='vkb-table']>tbody tr td:first-child{
border-left:4px solid white;
border-radius:10px 0 0 10px;
padding:0 16px !important;
}
table[id^='vkb-table']>tbody tr td:last-child{
border-right:4px solid white;
border-radius:0 10px 10px 0;
}
table[id^='vkb-table']>tbody tr td.dataTables_empty{
background:white;
cursor:default;
padding:32px 0 !important;
}
#vkb-table_info{
display:none !important;
}
#vkb-table_paginate{
float:unset;
text-align:unset;
color:unset;
width:calc(100%);
display:flex;
justify-content:space-between;
align-items:center;
background:white;
margin-top:auto;
padding-bottom:16px;
position:sticky;
bottom:0;
}
#vkb-table_paginate .paginate_button{
width:24px;
height:24px;
border-radius:50%;
color:var(--primary-blue) !important;
background-color:transparent !important;
text-align:center;
font-family:Roboto;
font-size:12px;
font-weight:700;
line-height:100%;
letter-spacing:0.6px;
box-sizing:unset;
display:inline-flex;
min-width:unset;
padding:unset;
margin-left:16px;
border:none;
align-items:center;
justify-content:center;
}
#vkb-table_paginate .paginate_button:hover{
background-color:var(--green-10) !important;
}
#vkb-table_paginate .paginate_button.current{
color:white !important;
background-color:var(--primary-blue) !important;
}
#vkb-table_paginate .paginate_button.previous,
#vkb-table_paginate .paginate_button.next{
color:transparent !important;
user-select:none;
width:32px;
height:32px;
border-radius:4px;
border:1px solid var(--primary-blue);
cursor:pointer;
position:relative;
background-color:transparent !important;
background-size:18px 18px !important;
background-repeat:no-repeat !important;
background-position:center !important;
}
#vkb-table_paginate .paginate_button.previous:hover,
#vkb-table_paginate .paginate_button.next:hover{
background-color:var(--green-10) !important;
}
#vkb-table_paginate .paginate_button.previous{
background-image:url("../../images/icons/blue-primary/arrow-left.svg") !important;
margin-left:4px;
}
#vkb-table_paginate .paginate_button.next{
background-image:url("../../images/icons/blue-primary/arrow-right.svg") !important;
margin-right:4px;
}
#vkb-table_paginate .paginate_button.previous::after{
content:'Previous';
color:var(--primary-blue);
left:calc(100% + 16px);
position:absolute;
text-transform:uppercase;
}
#vkb-table_paginate .paginate_button.next::before{
content:'Next';
color:var(--primary-blue);
right:calc(100% + 16px);
position:absolute;
text-transform:uppercase;
}
.kb-row-action{
width:32px;
height:32px;
background-color:white;
border-radius:50%;
border:1px solid var(--blue-10);
background-size:18px 18px;
background-repeat:no-repeat;
background-position:center;
}
.kb-row-action.open-modal{
background-image:url("../../images/icons/blue-primary/document.svg");
}
.kb-row-action.open-modal:hover{
background-color:var(--primary-blue);
background-image:url("../../images/icons/white/document.svg");
}
.conflict-label{
height:24px;
display:flex;
align-items:center;
background-color:white;
border-radius:4px;
border:1px solid var(--secondary-red);
padding:0 8px;
margin-left:8px;
}
#kb-activities .panel-heading{
display:flex;
padding:24px;
border-bottom:1px solid var(--blue-10) !important;
align-items:center;
}
#vkb-no-activities{
display:flex;
align-items:center;
justify-content:center;
height:100%;
}
.restyled-activity{
padding:16px 0;
border-bottom:1px solid var(--blue-10);
}
.activity-date{
color:var(--blue-60);
font-family:"Roboto";
font-size:10px;
font-style:normal;
font-weight:700;
line-height:110%;
text-transform:uppercase;
margin-top:4px;
}
.activity-comment{
margin-top:8px;
border-radius:4px;
background-color:var(--blue-5);
padding:16px;
max-height:100px;
overflow-y:auto;
}
button.kb-refresh{
margin-left:8px;
height:32px;
width:32px;
border:1px solid var(--blue-10);
border-radius:50%;
background-color:white;
background-image:url("../../images/icons/blue-primary/refresh.svg");
background-size:18px 18px;
background-repeat:no-repeat;
background-position:center;
}
button.kb-refresh:hover{
border:1px solid var(--blue-20);
box-shadow:0px 4px 16px 0px #344D6614;
}
.kb-search-container{
width:314px;
height:40px;
border-radius:8px;
border:1px solid var(--blue-10);
display:flex;
justify-content:space-between;
}
.kb-search-container:hover{
border:1px solid var(--blue-20);
box-shadow:0px 4px 16px 0px #344D6614;
}
.kb-search-container:focus-within,
.kb-search-container:focus-within{
border:1px solid var(--primary-green);
box-shadow:0px 4px 16px 0px #344D6614;
}
.kb-search-container.search-active{
border-color:var(--primary-green);
}
.kb-search-container.err-input-text{
border:1px solid var(--secondary-red);
}
.kb-search-container img{
height:18px;
}
.kb-search-container button{
background:none;
border:none;
}
.kb-search-container .left-group{
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
flex-grow:1;
}
.kb-search-container.search-active .left-group img{
opacity:0.6;
}
.kb-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;
flex-grow:1;
text-overflow:ellipsis;
}
.kb-search-container input::placeholder{
opacity:1;
color:var(--blue-60);
font-weight:400;
}
.tail-button{
width:40px;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
.kb-search-container .popover{
max-width:unset;
}
.kb-search-container .popover .invalid-warning{
display:none;
}
.kb-search-container.err-input-text .popover.fade.bottom.in{
border-color:var(--secondary-red);
}
.kb-search-container.err-input-text .popover.fade.bottom.in .arrow{
border-bottom-color:var(--secondary-red);
}
.kb-search-container.err-input-text .popover .invalid-warning{
display:unset;
}
.kb_benign,
.kb_patho,
.kb_uncertain{
-moz-transform:translateY(-1px);
-webkit-transform:translateY(-1px);
}