/*PAGE setting common to all pages*/
.pg-content {
  margin-bottom : 30px;
  margin-top    : 20px;
  margin-left   : auto;
  margin-right  : auto;
}

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

/* Normalize this default. Helps IE11's broken flex. */
.input-group * {
  flex : 1 1 auto;
}

/* Common variables */
body {
  --accent-bg-color   : #32739D;
  --accent-text-color : rgba(255, 255, 255, .5);
}

#content {
  background : rgba(180, 180, 180, 0.44);
}

.cspec-navbar {
  font-size : 1.2em;
}

/*Separator within a dropdown list*/
.top-separator-line {
  border-top : 1px solid #32739D !important;
}

.cspec-navbar .dropdown-item {
  color : #32739D;
}

.self-link {
  text-decoration : none !important;
}

.page-ctrls {
  display : flex;
}

.page-ctrls .pagination:not(:last-child) {
  margin-right : 0.5rem;
}

.page-ctrls .pagination .page-item .page-link {
  color        : #32739D;
  border-color : #32739D;
  min-width    : 36px;
  text-align   : center;
}

/* Solve a FF vs Chrome discrepancy by being specific */
.page-ctrls .pagination .page-item .page-link[type='text'] {
  font-size   : 0.75rem;
  line-height : 1rem;
}

.page-ctrls .pagination .page-item.disabled .page-link {
  color : #6C757D;
}

.page-ctrls .pagination .page-item .page-link:hover {
  color            : #32739D;
  background-color : #37B1FF30;
}

.page-ctrls .pagination .page-item > input {
  line-height      : 1;
  max-width        : 3rem;
  padding-left     : 0.5rem;
  padding-right    : 0.5rem;
  background-color : #FFFFFF;
}

.page-ctrls .pagination .page-item > input:hover {
  background-color : #FFFFFF !important;
  filter           : drop-shadow(0 0 0.2rem #37B1FF);
}

.container {
  width        : 90%;
  margin-left  : auto;
  margin-right : auto;
}

.card {
  border        : 2px solid #32739D;
  box-shadow    : 2px 3px 4px 1px rgba(0, 0, 0, 0.35);
  min-width     : 450px;
  margin-bottom : 20px;
}

.card .card-header {
  background-color : #32739D;
  border-color     : #32739D;
  color            : #FFFFFF;
}

/* Changing the border width means we need to update the first header element's
   border radius curve size calculation, since default is based on a 1px border
 */
.card .card-header:first-child {
  border-radius : calc(0.25rem - 3px) calc(0.25rem - 3px) 0 0;
}

.card .card-header .entType {
  font-size   : 1.25rem;
  font-weight : bold;
}

.card .json-formatter-container .expand-toggle {
  float : right;
}

.card .json-formatter-container .expand-toggle .btn {
  color        : #32739D;
  border-color : #32739D;
}

.card .json-formatter-container .expand-toggle .btn:hover {
  color            : #32739D;
  background-color : #37B1FF30;
}

.top .navbar-nav .nav-link, .top .navbar-text {
  color : #FFFFFF;
}

.footer {
  margin-top : 100px;
}

.nav-item.nav-link.active {
  background-color : #32739D;
  border-color     : #32739D;
  color            : #FFFFFF;
}

.tag.label {
  padding          : 5px 6px 4px 6px;
  font-size        : 1em;
  display          : inline-block;
  margin-bottom    : 0.3em;
  margin-right     : 0.42em;
  box-shadow       : 2px 2px 2px rgba(100, 100, 100, 0.4);
  background-color : #077CC5;
  text-align       : left;
  white-space      : normal;
  line-height      : normal;
  color            : #FFFFFF;
  font-weight      : bold;
  vertical-align   : baseline;
  border-radius    : .25em;
}

.amsify-suggestags-list {
  width : inherit !important;
}

.amsify-suggestags-area {
  width : 50%;
}

.amsify-select-tag.col-bg {
  background-color : #32739D !important;
  color            : #FFFFFF !important;
  border-radius    : .25rem !important;
}

.amsify-suggestags-area input {
}

.card.coming-soon {
  border     : none !important;
  box-shadow : none !important;
}

.fit-image {
  height     : 100%;
  width      : 100%;
  object-fit : contain;
}

.card-body .row.footer {
  padding-left  : .8em;
  padding-right : .8em;
  margin-top    : 0px !important;
}

.top-note {
  background-color : #D8F0E2;
  border-color     : #057333;
  color            : #057333;
}

.container-fluid.footer {
  clear          : both;
  padding-bottom : 15px;
  border-top     : 1px black solid;
  background     : #FFFFFF none repeat scroll 0 0;
}

.container-fluid.footer .text-center {
  background-color : white;
  display          : block;
  font-size        : 8pt;
  font-weight      : normal;
  text-decoration  : none;
  float            : left;
  text-align       : center;
  margin-top       : 5px;
}

.funding-text {
  color         : #6C757D;
  margin-bottom : 3px;
}

.top-note button {
  opacity : 1;
}

.top-note button:hover {
  opacity : 1;
  color   : #FFFFFF !important;
}

.top-note button span:hover {
  color   : #FFFFFF !important;
  opacity : 1;
}

.top-note > span {
  font-weight : bold;
}

.msg.subordinate {
  font-size : 0.82rem;
}

.msg.subordinate .raw-status-msg {
  font-style : italic;
}

.news-item .date, .version-item .date {
  color     : #889999;
  font-size : 12px;
}

.news-item a, .version-item a {
  color : #E1700A !important;
}

.svg-container {
  width        : 50%;
  margin-left  : auto;
  margin-right : auto;
}

.hide {
  display : none;
}

.error-dialog {
  margin-top    : 10%;
  margin-bottom : 15%;
}

.bootstrap-select.dropdown {
  border        : 1px solid #CED4DA;
  border-radius : 0px !important;
}

.bootstrap-select .dropdown-toggle:hover {
  border-radius : 0px !important;
}

/* Normalize this default. Helps IE11's broken flex. */
.input-group * {
  flex : 1 1 auto;
}

#content {
  background : rgba(180, 180, 180, 0.44);
}

.top.navbar {
  margin-left      : auto;
  margin-right     : auto;
  margin-bottom    : 30px;
  background-color : #32739D !important;
  border-radius    : unset;
}

.self-link {
  text-decoration : none !important;
}

.page-ctrls {
  display : flex;
}

.page-ctrls .pagination:not(:last-child) {
  margin-right : 0.5rem;
}

.page-ctrls .pagination .page-item .page-link {
  color        : #32739D;
  border-color : #32739D;
  min-width    : 36px;
  text-align   : center;
}

/* Solve a FF vs Chrome discrepancy by being specific */
.page-ctrls .pagination .page-item .page-link[type='text'] {
  font-size   : 0.75rem;
  line-height : 1rem;
}

.page-ctrls .pagination .page-item.disabled .page-link {
  color : #6C757D;
}

.page-ctrls .pagination .page-item .page-link:hover {
  color            : #32739D;
  background-color : #37B1FF30;
}

.page-ctrls .pagination .page-item > input {
  line-height      : 1;
  max-width        : 3rem;
  padding-left     : 0.5rem;
  padding-right    : 0.5rem;
  background-color : #FFFFFF;
}

.page-ctrls .pagination .page-item > input:hover {
  background-color : #FFFFFF !important;
  filter           : drop-shadow(0 0 0.2rem #37B1FF);
}

.container {
  width        : 90%;
  margin-left  : auto;
  margin-right : auto;
}

.card {
  border        : 2px solid #32739D;
  box-shadow    : 2px 3px 4px 1px rgba(0, 0, 0, 0.35);
  min-width     : 450px;
  margin-bottom : 20px;
}

.card .card-header {
  background-color : #32739D;
  border-color     : #32739D;
  color            : #FFFFFF;
}

/* Changing the border width means we need to update the first header element's
   border radius curve size calculation, since default is based on a 1px border
 */
.card .card-header:first-child {
  border-radius : calc(0.25rem - 3px) calc(0.25rem - 3px) 0 0;
}

.card .card-header .entType {
  font-size   : 1.25rem;
  font-weight : bold;
}

.card .json-formatter-container .expand-toggle {
  float : right;
}

.card .json-formatter-container .expand-toggle .btn {
  color        : #32739D;
  border-color : #32739D;
}

.card .json-formatter-container .expand-toggle .btn:hover {
  color            : #32739D;
  background-color : #37B1FF30;
}

.top .navbar-nav .nav-link, .top .navbar-text {
  color : #FFFFFF;
}

/*Button styles*/
.btn-info.disabled {
  color            : #FFFFFF;
  background-color : #C0C5C6;
  border-color     : #C3C8C9;
}

.footer {
  margin-top : 100px;
}

.nav-item.nav-link.active {
  background-color : #32739D;
  border-color     : #32739D;
  color            : #FFFFFF;
}

.tag.label {
  padding          : 5px 6px 4px 6px;
  font-size        : 1em;
  display          : inline-block;
  margin-bottom    : 0.3em;
  margin-right     : 0.42em;
  box-shadow       : 2px 2px 2px rgba(100, 100, 100, 0.4);
  background-color : #077CC5;
  text-align       : left;
  white-space      : normal;
  line-height      : normal;
  color            : #FFFFFF;
  font-weight      : bold;
  vertical-align   : baseline;
  border-radius    : .25em;
}

.amsify-suggestags-list {
  width : inherit !important;
}

.amsify-suggestags-area {
  width : 50%;
}

.amsify-select-tag.col-bg {
  background-color : #32739D !important;
  color            : #FFFFFF !important;
  border-radius    : .25rem !important;
}

.amsify-suggestags-area input {
}

.card.coming-soon {
  border     : none !important;
  box-shadow : none !important;
}

.fit-image {
  height     : 100%;
  width      : 100%;
  object-fit : contain;
}

.card-body .row.footer {
  padding-left  : .8em;
  padding-right : .8em;
  margin-top    : 0px !important;
}

.top-note {
  background-color : #D8F0E2;
  border-color     : #057333;
  color            : #057333;
}

.container-fluid.footer {
  clear          : both;
  padding-bottom : 15px;
  border-top     : 1px black solid;
  background     : #FFFFFF none repeat scroll 0 0;
}

.container-fluid.footer .text-center {
  background-color : white;
  display          : block;
  font-size        : 8pt;
  font-weight      : normal;
  text-decoration  : none;
  float            : left;
  text-align       : center;
  margin-top       : 5px;
}

.funding-text {
  color         : #6C757D;
  margin-bottom : 3px;
}

.top-note button {
  opacity : 1;
}

.top-note button:hover {
  opacity : 1;
  color   : #FFFFFF !important;
}

.top-note button span:hover {
  color   : #FFFFFF !important;
  opacity : 1;
}

.top-note > span {
  font-weight : bold;
}

.msg.subordinate {
  font-size : 0.82rem;
}

.msg.subordinate .raw-status-msg {
  font-style : italic;
}

.news-item .date, .version-item .date {
  color     : #889999;
  font-size : 12px;
}

.news-item a, .version-item a {
  color : #E1700A !important;
}

.svg-container {
  width        : 50%;
  margin-left  : auto;
  margin-right : auto;
}

.Pathogenic .cc-label {
  background-color : #D9534F29;
}

.Benign .cc-label {
  background-color : #1A964129;
}

.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;
}

.cspec .navbar-brand {
  height : 0px;
}

/*
COMMON PANEL - the main panel found in all the pages
 */
.common.panel {
  border        : 3px solid #2E6A8F;
  box-shadow    : 2px 3px 4px 1px rgba(0, 0, 0, 0.35);
  border-radius : 5px;
}

.common .panel-heading {
  background-color : #2E6A8F !important;
  color            : white !important;
  border-radius    : 0px !important;
}

.common .panel-title {
  font-size : 18px !important;
}

a.link-in {
  color : var(--accent-text-color);
}

.link-icon {
  font-size : .8em;
  position  : relative;
  top       : -.4em;
}

/* CSPEC ALERTS */

.cspec-alert {
  font-size : 0.9em;
  margin    : 0px !important;
}

.clingen-logo img {
  width  : 100px;
  height : 70px;
}

.cspec-editor-logo img {
  width: 100px;
  height: 90px;
}
/* *********************************** */
/* Bootstrap overrides - Dialogs */
/* *********************************** */

.modal-dialog .modal-header {
  background-color : #2E6A8F;
  color            : white;
  font-size        : 2em;
  padding          : 10px !important;
}

.modal-dialog .modal-header .close {
  opacity     : 0.8;
  font-size   : 0.6em;
  color       : white;
  font-weight : normal;
}

.modal-dialog .modal-header .close:hover {
  color   : white;
  opacity : 1.0;
  filter  : alpha(opacity=100);
}

.modal-dialog .modal-content .modal-footer {
  text-align : left;
  padding    : 10px;
}

.modal-body {
  color      : black;
  overflow   : auto;
  max-height : 600px;
}

.modal .form-group .col {
  padding : 0px !important;
}

.modal .form-group.row {
  padding : 5px;
}

.modal .form-section {
  padding : 10px;
}

.modal .widget-panel {
  border     : 3px solid #32739D;
  box-shadow : 5px 5px 5px #888888;
}

.modal .widget-panel .panel-heading {
  background-color : #32739D;
  color            : white;
  font-weight      : bold;
  border           : 3px solid #32739D;
  border-radius    : 0px;
  padding          : 6px 8px 6px 8px;
}

.bootstrap-tagsinput.form-control {
  height : auto !important;
}

/* *********************************** */
/* Bootstrap overrides - Buttons */
/* *********************************** */

.btn-info {
  background-color : #2E6A8F;
  border-color     : #2E6A8F;
}

.btn-info:hover, .btn-info:focus {
  background-color : #31B0D5 ! important;
}

.btn-danger {
  border-color     : #AC2925;
  background-color : #AC2925;
}

.btn-danger:hover, .btn.btn-danger:focus {
  border-color     : #D43F3A;
  background-color : #D43F3A;
}

.btn-success {
  background-color : #449D44 !important;
}

.btn-success:hover {
  background-color : #5CB85C !important;
}


.spinner-container {
  margin : auto;
}


.loading {
  position : fixed;
  z-index  : 999;
  height   : 2em;
  width    : 2em;
  overflow : show;
  margin   : auto;
  top      : 0;
  left     : 0;
  bottom   : 0;
  right    : 0;
}

/* Transparent Overlay */
.loading:before {
  content          : '';
  display          : block;
  position         : fixed;
  top              : 0;
  left             : 0;
  width            : 100%;
  height           : 100%;
  background-color : rgba(0, 0, 0, 0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font             : 0/0 a;
  color            : transparent;
  text-shadow      : none;
  background-color : transparent;
  border           : 0;
}

.loading:not(:required):after {
  content            : '';
  display            : block;
  font-size          : 10px;
  width              : 1em;
  height             : 1em;
  margin-top         : -0.5em;
  -webkit-animation  : spinner 1500ms infinite linear;
  -moz-animation     : spinner 1500ms infinite linear;
  -ms-animation      : spinner 1500ms infinite linear;
  -o-animation       : spinner 1500ms infinite linear;
  animation          : spinner 1500ms infinite linear;
  border-radius      : 0.5em;
  -webkit-box-shadow : rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow         : rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform : rotate(0deg);
    -moz-transform    : rotate(0deg);
    -ms-transform     : rotate(0deg);
    -o-transform      : rotate(0deg);
    transform         : rotate(0deg);
  }
  100% {
    -webkit-transform : rotate(360deg);
    -moz-transform    : rotate(360deg);
    -ms-transform     : rotate(360deg);
    -o-transform      : rotate(360deg);
    transform         : rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform : rotate(0deg);
    -moz-transform    : rotate(0deg);
    -ms-transform     : rotate(0deg);
    -o-transform      : rotate(0deg);
    transform         : rotate(0deg);
  }
  100% {
    -webkit-transform : rotate(360deg);
    -moz-transform    : rotate(360deg);
    -ms-transform     : rotate(360deg);
    -o-transform      : rotate(360deg);
    transform         : rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform : rotate(0deg);
    -moz-transform    : rotate(0deg);
    -ms-transform     : rotate(0deg);
    -o-transform      : rotate(0deg);
    transform         : rotate(0deg);
  }
  100% {
    -webkit-transform : rotate(360deg);
    -moz-transform    : rotate(360deg);
    -ms-transform     : rotate(360deg);
    -o-transform      : rotate(360deg);
    transform         : rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform : rotate(0deg);
    -moz-transform    : rotate(0deg);
    -ms-transform     : rotate(0deg);
    -o-transform      : rotate(0deg);
    transform         : rotate(0deg);
  }
  100% {
    -webkit-transform : rotate(360deg);
    -moz-transform    : rotate(360deg);
    -ms-transform     : rotate(360deg);
    -o-transform      : rotate(360deg);
    transform         : rotate(360deg);
  }
}

/*MODAL COMMON ATTR*/
.modal .info {
  color : #32739D;
}

/* font awesome icons */
.cspec-icons {
  margin-right : 5px;
}

.has-error {
  color : #A94442;
}

.gdp-header {
  font-weight: bold;
}


.pg-content .prop {
    font-weight: bold;
}

.pg-content .value.vcep-name .text {
    padding-right: 3px;
}

.cspec-versions.btn {
  line-height: 1;
}

.svis-panel .panel-body {
    padding: 20px;
}

.svis-panel .acmg-spec {
    font-weight: bold;
}

.svis-panel .mito-genes {
    font-style: italic;
    margin-left: 5%;
}

.svis-panel .panel-heading a.link-in {
    color: #2E6A8F
}

.common .ent-id {
    font-style: italic;
    color: grey;
    font-size: 0.8em;
}

.common .link-out {
    padding-left: 3px;
}

.common .legacy.warning {
    color: #f0ad4e !important
}

/*
Styling for table columns.
@todo make this common for all tables
*/
.common .diseases.row {
    margin: unset !important
}

.common .diseases .moi,
.common .diseases .ent-id {
    margin-left: 10px;
}

/*Common styling for My Roles*/

.cspec-user-roles .header {
  font-weight: bold;
  font-size: 1.1em;
}

.cspec-user-roles .form-group.cspec-roles {
  margin : 5px;
  padding: 10px;
  border: solid 1px black;
}

.preferred-transcript .bootstrap-select .dropdown-menu ul {
  height: 500px;
  overflow-y : scroll;
}