/**********/
/* LAYOUT */
/**********/

.table-center-text th {
  text-align: center;
}
.table-center-text td {
  text-align: center;
}

.v-crop {
    margin-top: -5px;
    margin-bottom: -5px;
}

.name_clickable {
    cursor: pointer;
    color: black
}

.name_clickable:hover {
    cursor: pointer;
    color: black
}

.underline-hover:hover {
    text-decoration: underline;
}

.row-hover:hover .heart-outline {
    color: var(--orange);
}

.score-row-hover:hover .taxonomy-name .score-tooltip {
    color: var(--purple);
}

.header-hover:hover .taxonomy-name .score-tooltip {
    color: var(--purple);
}
.header-hover:hover .taxonomy-name .score-tooltip.white {
    color: white;
}



.row-hover:hover .show-on-row-hover, .section-hover:hover .show-on-row-hover {
    display: block !important;
}

.score-tooltip {
    color: transparent;
}

.heart-outline {
    margin-left: -0.1rem;
}

.heart-outline:hover:before {
    content: "\f415";
}

/*
We shouldn't use the following class, it breaks some components
.form-check {
    display: flex !important;
    align-items: center !important;
}
*/

/*************/
/* Overrides */
/*************/

._dash-loading {
  margin: auto;
  color: transparent;
  width: 0;
  height: 0;
  text-align: center;
}

.popover-arrow {
    display: none !important;
}

html {
  scroll-behavior: auto !important;
}

.debug-panel {
    background-color: black;
    color: limegreen;
    font-family: monospace;
    width: 700px;
}

.Select-menu-outer{
    width: 97.1% !important;
}

.sticky-row-title {
    position: sticky;
    left: 150px;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: calc(var(--z-table-header) - 1);
}


.gray-placeholder .Select-placeholder {
    font-size: 13px;
}

.purple-placeholder .Select-placeholder {
    color: var(--purple) !important;
    font-weight: bold !important;
}

.label-background-transparent .Select-value {
    background-color: transparent !important;
}

.label-background-white .Select-value {
    background-color: white !important;
}

.label-color-purple .Select-value-label {
    color: var(--purple) !important;
    font-weight: bold;
}

.Select-value {
    color: var(--lightblack) !important;
    border-color: var(--darkgray) !important;
}

.Select-value-icon {
    border-color: var(--darkgray) !important;
    color: var(--purple) !important;
    font-size: 16px;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    vertical-align: top !important;
}

.Select-value-label {
    color: var(--lightblack) !important;
}

.Select-value-icon:hover {
    border-color: var(--darkgray) !important;
    color: var(--purple) !important;
}

.is-focused:not(.is-open)>.Select-control {
    border-color: var(--purple) !important;
    box-shadow: none !important;
}


.tooltip-inner {
    font-family: "Plus Jakarta Sans", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: white;
    border-color: var(--darkgray);
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    color: black;
    opacity: 1;
    text-align: start;
    max-width: 400px;
    padding: 12px;
}

.tooltip.show {
    opacity: 1;
}

.tooltip-arrow {
    opacity: 0;
}

.flask-login-field-user, .flask-login-field-pwd {
    width: 100%;
}

.white-button {
    background-color: white !important;
    color: var(--purple) !important;
    border-radius: 3px !important;
    border-color: var(--purple) !important;
    border: 1px solid;
    font-weight: normal !important;
    text-transform: none !important;
    font-size: small !important;
}

.white-outline-button {
    background-color: transparent !important;
    color: white !important;
    border-radius: 3px !important;
    border-color: white !important;
    border: 1px solid;
    font-weight: normal !important;
    font-size: small !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dropdown-menu > li > a:hover {
    background-image: none;
    background-color: white;
    font-weight: bold;
}



.center-checkbox .form-check {
    justify-content: center;
}

.dash-dropdown [title~=free] {
  color: var(--darkgray) !important;
}

.logo-size {
    height:32px;
}
.badge-size {
    height: 130px;
}

.iframe-section-height {
    min-height: 70px;
}

.offcanvas-header {
    background: var(--gray);
    color: var(--lightblack);
    font-weight: bold;
}