/* FILE: /assets/stylesheets/svi/svi.css */

.pg-content.svi {
  margin-bottom : 30px;
  margin-top    : 20px;
  margin-left   : auto;
  margin-right  : auto;
}

.pg-content.svi {
  width : 90% !important;
}

.btn-custom {
  background  : white;
  color       : gray;
  border      : 1px solid lightgray;
  font-weight : bold;
}

.strength-divider:not(:last-child) {
  border-top : 1px dashed lightgrey;
}

.strength-divider:last-child {
  display : none;
}

.strength-label {
  font-weight : bold;
  font-size   : 1.1em;
}

.criteria-codes th {
  font-size : 1.1em !important;
}

/* STYLE for GENE-DISEASE ROW*/
.gene-disease:nth-child(even) {
  background : #F9F9F9;
}

.gene-disease-info .panel-body {
  padding-top    : 0px;
  padding-bottom : 0px;
}

.gene-disease-info.panel {
  border-color : #DDDDDD;
}

.gene-disease {
  padding-top    : 10px;
  padding-bottom : 10px;
}
.ruleset.panel .disease .moi {
  display: block;
  margin-left: 10px;
  font-size: 0.9em;
}

.ruleset.panel .preferred-transcript .value {
  margin-left: 10px !important ;
}

.criteria-codes .major-header {
  border           : 1px solid #0000005E;
  background-color : #E9ECEF;
}

/*.criteria-codes tr:nth-child(even) td {
  background-color: #f1f1f1;
}*/

.Pathogenic.criteria-code .cc-label {
  background-color : #D9534F29 !important;
}

.Benign.criteria-code .cc-label {
  background-color : #1A964129 !important;
}

.toggle-all-rules {
  background-color : var(--accent-bg-color);
}

.toggle-all {
  margin-top : 10px;
}

.custom-code {
  color : #808080;
}

.na {
  font-style  : italic;
  font-weight : bold;
}

.read-only {
  background-color : lightgray;
  border           : gray solid 1px;
  border-radius    : 0.3em;
  padding          : 2px;
  font-size        : 0.7em;
}

.title.prop {
  font-weight : bold;
  font-size   : 1.2em;
}

.pg-content .panel.panel-default.svi .panel-heading .collapse.navbar-collapse.svi {
  float       : right;
  margin-top  : -9px;
  font-weight : normal;
  font-size   : 0.9em;
}

.pg-content .navbar-collapse .nav.navbar-nav.navbar-right.svi {
  background-color : white;
  margin-right     : 0;
  border           : 2px solid #2E6A8F;
  border-radius    : 4px;
}

.pg-content .navbar-collapse .nav.navbar-nav.navbar-right.svi .dropdown-toggle {
  padding-top    : 10px;
  padding-bottom : 10px;
}

.pg-content > .panel-default.svi {
  border           : none;
  box-shadow       : none !important;
  background-color : transparent;
  margin-top       : 20px;
  margin-bottom    : 0px;
}

.pg-content > .panel-default.svi > .panel-heading {
  background-color : #2E6A8F !important;
  color            : white !important;
  font-weight      : bold;
  font-size        : 1.2em;
  border           : none !important;
  border-radius    : 4px;
  margin           : 0px !important;
}

.pg-content > .panel-default.svi > .panel-heading h4 {
  font-size : 1em !important;
  margin    : 5px !important;
}

.pg-content > .panel-default.svi > .panel-body {
  border : none !important;
  /*padding : 15px 0px 0px 0px ;*/
}

.pg-content > .panel-default.svi > .panel-body .dataset.row {
  margin            : 0px 0px 15px 0px;
  border-left-color : #2E6A8F !important;
  border            : 2px solid #2E6A8F !important;
  border-left-width : 8px !important;
  border-radius     : 3px !important;
  padding-top       : 0px;
  box-shadow        : 5px 6px 4px 1px rgba(0, 0, 0, 0.35);
}

.svi .prop-value {
  font-size : 90% !important;

}

.svi .prop-value .prop {
  font-weight : bold;
}

/*.svi .prop-value a {
  margin-left : 15px;
}*/

.components .badge {
  padding          : 0px;
  border           : 2px solid #2E6A8F;
  background-color : white;
  cursor           : pointer;
  white-space      : nowrap;
  min-width        : 0px;
}

.components .badge_title {
  border-radius    : 4px 4px 0 0;
  padding          : 3px 5px 5px 5px;
  font-size        : 1.1em;
  color            : white;
  background-color : #2E6A8F;
}

.components .badge_count {
  border-radius : 0 0 4px 4px;
  padding       : 3px 5px 3px 5px;
  font-size     : 1.1em;
  font-weight   : bold;
  color         : #2E6A8F;
}

/* ---------------------------------------------------------------- */

/*lhs*/
.lhs {
  padding : 0px !important;
}

.lhs > .panel {
  margin        : 0 !important;
  border        : none !important;
  border-radius : 0px !important;
  box-shadow    : none !important;
}

.lhs > .panel-default > .panel-heading {
  margin           : 0;
  padding          : 3px 10px 3px 10px !important;
  border           : 0 !important;
  border-radius    : 0px;
  background-color : white !important;
  font-size        : 1.1em;
  color            : #2E6A8F ! important;
  font-weight      : bold;
}

.lhs > .panel-default > .panel-body {
  padding : 0px 5px 0px 5px;
  border  : none;
}

.lhs .prop-value {
  padding-left : 34px;
}

/*Style for analysis doc component*/
.lhs .prop-value.an-id {
  padding-top : 5px !important;
  font-weight : bold !important;
}

.lhs .prop-value.an-id a {
  color : #2E6A8F ! important
}

.lhs .an-id .btn-info {
  background-color : #2E6A8F !important;
  border-color     : #2E6A8F !important;
  margin           : 10px 4px 10px 5px;
  padding          : 2px 5px 2px 5px;
  border-radius    : 5px;
}

.lhs .btn-info > span {
  font-size: 90%;
  padding-left: 5px;
}

.lhs .legacy.alert {
  margin-left: 20px !important;
  padding: 5px !important;
}

.lhs .cspec-type label,
.lhs .description label {
  margin-left: 20px !important
}
.lhs .description.row {
  margin-top: 10px;
}

/*rhs*/

.rhs {
  padding: 0px !important;
}

.rhs > .panel {
  margin: 0 !important;
  border: none !important;
  border-radius: 0px !important;
  box-shadow    : none !important;
}

.rhs > .panel-default > .panel-body {
  padding : 3px 30px 3px 20px;
  border  : none;
}

.rhs .component {
  color   : grey !important;
  padding : 0px;
}

/* - undo the effects of text-right class in .rhs .component when screen is small
 *   and rhs stacks under lhs according to col-xs-* classes uses; else the staggering looks funny.
 */
@media (max-width : 767px) {
  .rhs .components .component {
    text-align : left !important;
  }
}

.rhs .component .fa {
  font-size : 1.6em;
  margin    : 5px 5px 5px 5px;
}

.rhs .status.released {
  color : green;
}

.rhs .status.embargoed {
  color : #CE1D1D;
}

.rhs .external-database-icon {
  width  : 75%;
  margin : 1em;
}

.rhs .reference-icon {
  width  : 75%;
  margin : 1em;
}

/* Anchor */
a.anchor {
  top      : -8px;
  position : relative;
}

/* Help text */
.svi-helptext {
  font-size        : 1em;
  font-family      : "Helvetica Neue", Helvetica, Arial, cursive, sans-serif;
  background-color : #FCFAF7;
  box-shadow       : 1px 1px 2px 1px rgba(0, 0, 0, 0.45);
  margin-bottom    : 3%;
  padding          : 10px;
  clear            : both;
  border           : 1px solid black;
}

.svi-helptext .fa {
  color : #E1700A;
}

/* A fix to make sure that the heights of the cells in a boostrap grid are equal even if the content size varies. Tested with both panel and thumbnail elements inside cells. */
@media only screen and (min-width : 481px) {
  .flex-row.row {
    display   : flex;
    flex-wrap : wrap;
  }

  .flex-row.row > [class*='col-'] {
    display        : flex;
    flex-direction : column;
  }

  .flex-row.row:after,
  .flex-row.row:before {
    display : flex;
  }
}

.flex-row .thumbnail, .flex-row .caption, .flex-row .panel, .flex-row .panel-title {
  flex           : 1 0 auto;
  flex-direction : column;
}

.flex-text {
  flex-grow : 1
}

.flex-row img {
  height : auto;
  width  : 100%
}

/*SVI MODAL RELATED*/
.release-content,
.status-section {
  background-color : #E18B190F;
  padding          : 10px;
  border           : solid 2px #163446;
  border-radius    : 0.3em;
  margin-left: 3px !important;
  margin-right: 3px !important;
}

.release-content .version {
  margin-top    : 10px;
  margin-bottom : 10px;
}

.release-content .version span {
  font-size   : 1.1em;
  font-weight : bold;
}

.cspec-doc-status-change .btn.active {
  background-color: #2e6a8f;
  color: white;
}

.cspec-doc-status-change .file-attribute {
  font-size: 1.2em;
  font-weight: bold;
  padding: 3px;
}
.cspec-doc-status-change .file-attributes {
  border-bottom: solid 1px;
}
.cspec-doc-status-change .files-data {
  border-bottom: solid 1px;
  padding: 3px;
}

.cspec-doc-status-change .files-data:last-child{
  border-bottom:unset !important;
}

/* CK editor relates styles
*/
.ck-editor.ck-rounded-corners {
  min-width : 100%;
}

/**  Criteria code table related **/
.criteria-code.child td {
  padding : unset !important
}

.cc-item:not(:last-child) {
  border-bottom : dashed 2px #686766;
}

.cc-item {
  padding : 10px;
}

.cc-item.instructions-to-use {
  border-bottom : unset !important;
}

.cc-label-text {
  text-decoration : underline !important;
  color           : black !important
}

.criteria-code-tools {
  display : flex;
}

.acmg-tools .acmg-summary-hide,
.criteria-code-tools .btn.applicable,
.criteria-code-tools .btn.not-completed {
  border-top-left-radius    : 3px !important;
  border-bottom-left-radius : 3px !important;
}

.criteria-code-tools .btn.not-completed  {
  font-size: 16px !important;
}
.strength-label {
  margin-bottom : 5px
}

.criteria-codes .global {
  background-color : #FEF8F1;
}

/*
SVI SAVE
*/
.save-svi {
  position         : fixed;
  left             : 0;
  top              : 0;
  width            : 100%;
  text-align       : center;
  background-color : #009465;
  border           : #009465 solid;
  display: flex;
  justify-content: center;
  line-height: 70px;
  height: 70px;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
}

.save-svi .reset-cache {
  margin-right  : 20px;
  margin-bottom : 20px;
}

.ruleset .gene-disease-info .panel-title {
  margin-top   : 5px;
  margin-right : 5px;
}

.approver-status-panel {
  border     : 1px solid #BE76119E !important;
  box-shadow : 5px 5px 5px #888888 !important;
}

.approver-status-panel .panel-heading {
  background-color : #D4AC83 !important;
  color            : #0A0A0A !important;
  font-weight      : bold !important;
  border           : 3px solid #D1B392 !important;
  border-radius    : 0px !important;
  padding          : 6px 8px 6px 8px !important;
}

/*.modal-open {
  overflow : scroll !important;
}
*/
.approverModalCustomCls {
  pointer-events : none;
}

.approver-notes.comment-plus {
  color: #59b37c;
}
.approver-summary .comment-header {
  font-size   : 1.2em;
  font-weight : bold;
}

/*popover style*/
.popover {
  max-width: 600px !important;
}
.popover-header {
  margin-top : unset;
  font-size: 1.5em;
  font-weight: bold;
}

.popover-body .state-details {
  border           : 1px solid;
  margin-left      : 1px;
  margin-right     : 1px;
  background-color : #FEF8F1;
  margin-bottom    : 5px;
  font-size: 1.2em;
}

.popover-body .state-details .cm {
  margin-top    : 2px;
  margin-bottom : 2px;
  font-size: 1.2em;
}

.popover-body .state-name {
  font-size   : 1.2em;
  font-weight : bold;
}

.popover-body .prop {
  font-weight : bold;
  font-size   : 0.9em;
}

.popover-body .value {
  font-size : 0.9em;
}

.file .fileNum,
.reference .refNum {
  max-width     : 3.5em;
  padding-left  : 0px;
  padding-right : 0px;
  margin-top    : 5px;
  margin-bottom : 5px;
}

.file .idx,
.reference .idx {
  min-width : 1.5em;
  display   : inline-block;
}

.​reference {
  display      : block;
  text-indent  : -2em;
  padding-left : 2em;
}

​.reference span {
  padding : 1pt
}

.reference .title {
  font-style : italic;
}

.reference .jourAbbr {
  font-weight : bold;
}
.reference .citation .pmid {
  margin-left: 5px;
}

.file .file-content,
.reference .citation {
  padding-top : 5px;
}

.file .file-entry-tools,
.reference .ref-entry-tools {
  margin-left : 2px;
}

.reference .footnote {
  font-style : italic;
}

.fileInfo {
  padding          : 10px;
  border           : 2px solid #C7CBCB;
  border-radius    : 2px;
  background-color : #D2D7D83D;
}

.files-panel .widget-sub-panel {
  border           : 3px solid #C4B9A1;
  padding          : 20px;
  background-color : #E18B190F;
  margin-left      : 10%;
  margin-right     : 10%;
}

.fileInfo .custom-file {
  margin-left : 20%;
}

.images img {
  border        : 1px solid #DDDDDD;
  border-radius : 4px;
  padding       : 5px;
  width: 75%
}

.images {
  margin-top : 20px;
}
.files .image-file-item {
  margin-top:4px;
  margin-bottom: 4px;
}
.images .image-file-item {
  margin-top: 20px ;
  margin-bottom : 20px;
}

.images .image-caption {
  margin-bottom: 2px;
}
.files .file-label,
.images .file-label {
  font-weight: bold;
}


.bread-crumbs.badge {
  border-radius: 4px;
  padding: 0px !important;
  border-color: #17a2b8;
  background-color: white;
  margin-left: 0;
  border-style: solid;
  /* border-width: 2px; */
  font-size: 1.0em;
  color: black;
  margin-bottom: 5px;
}
.bread-crumbs.badge.active {
  border-color: #57be45
}
.bread-crumbs.badge.disabled {
  border-color: dimgrey;
  opacity: 0.4;
}
.bread-crumbs.badge.not-active {
  opacity: 0.4;
}
.bread-crumbs.badge .badge_title {
  background-color: #17a2b8;
  padding: 5px 8px 5px 8px;
}
.bread-crumbs.badge.active .badge_title {
  background-color: #57be45 !important;
}
.bread-crumbs.badge.disabled .badge_title {
  background-color: dimgrey !important;
}
.bread-crumbs .badge_count.de-emphasize {
  color: gray;
  font-size: 0.8em;
  font-weight: normal;
  font-style: italic;
}
.bread-crumbs .badge_count.date {
  font-size: 0.9em;
  font-weight: normal;
  margin-bottom: 1px;
}
.lhs .prop-value.status{
  margin-top:10px ;
  margin-bottom:10px;
}
/*CK editor toolbar within bootstrap requires a higher z-index
Soultion derived from - https://stackoverflow.com/questions/22637455/how-to-use-ckeditor-in-a-bootstrap-modal*/
.ck.ck-balloon-panel.ck-balloon-panel_toolbar_west.ck-toolbar-container {
  z-index: 10055 !important;
}

.instructions-to-use .md,
.strength.row .md,
.modal .text-notes{
  border: solid 1px silver;
  margin-bottom: 5px;
  min-height:60px
}

.ck.ck-content{
  border: solid 1px silver !important;
}

/*
Styling for Comning rules section
*/
.rules-combination .panel-body {
  padding-top:unset;
  padding-bottom: unset;
}
.rules-combination .operator {
  font-style: italic;
}
.rules-combination .strength,
.rules-combination .count,
.rules-combination .match-operator{
  margin: 2px;
  font-weight: bold;;
}
.rules-combination .assertion-title{
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 1.2em;
}
.rules-combination .rule {
  padding-top: 2px;
  padding-bottom: 2px;
  border-bottom: 1px dashed grey;
}
.rules-combination .rule:last-child{
  border-bottom:unset !important;
}
.rules-combination .assertion-title.Benign {
  background-color: #daeee0;
}
.rules-combination .ccs {
  font-style: italic;
  font-size: 0.9em;
  color: grey
}

.rules-combination .assertion-title.Pathogenic {
  background-color: #f9e3e2;
}

.rules-combination .rule-container {
  border: 1px solid #80808026;
  margin-top: 25px;
  padding: 10px;
  border-radius: 5px;
  background-color: #fef8f1;
}
.rules-combination .add-rule-header {
  font-weight: bold;
  font-size: 1.2em;
}
.rules-combination .rule-container .form-group{
  margin-left: 2px;
}

/*Styling for point rules*/

.point-rules table {
  width: 30%;
}

.point-rules td,
.point-rules th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.point-rules .notes {
  margin-top: 10px;
}

/* SVI SCOPE EL*/
#svi-scope-info {
  width: 250px ;
  display: inline-block;
  position: fixed;
  right: .5rem;
  bottom: 3%;
  z-index: 10000;
  padding: .6rem .2rem;
  background-color: #009465;
  border-radius: 8px 8px 8px 8px;
  text-align: center;
  color: #fff !important;
  text-shadow: 0px 1px 1px #666;
  box-shadow: 0px 8px 10px #333;
  border: 4px solid #009465;
  border-bottom-color: rgb(0, 148, 101);
  font-size: 14px !important;
}

#svi-scope-info .panel-title {
  font-size: 15px !important;
}

.svi-scope-info .item .value {
  padding-left: 15px;
  text-indent: -15px;
}
.svi-scope-info .moi .value {
  padding-left: 0px !important
}
.svi-scope-info .moi.row {
  margin-left: 5px;
}
.svi-scope-info hr {
  margin: 0px !important ;
}

.approver-summary .comment:nth-child(even)  {
  background-color: #dddddd;
}
.file-entry-tools{
  margin-right: 3px;
}

/* custom modal */
.modal-custom {
  min-width : 900px !important;
  width : 1000px !important ;
  max-width : 1300px !important;

}

.version.cspec-alert,
.cspec-roles.cspec-alert {
    margin-bottom: 20px !important;
    font-size: 1.2em;
}