body {
    overflow-x: hidden;
}

.page__main--inner {
    padding: 10px;
}

.tooltip {
    color: gray;
    margin-bottom: 2ch;
    font-size: smaller;
}

/* button css */
.cc_output__ui_button,.cc_chart__ui_button,.cc_form__ui_button {
    cursor: pointer;
}

.cc_output--chart__ui_button--choose_visible,form[name="cc_form__main"] button[type="submit"]{
    background: #00aad4;
    color: white;
    font-weight: bold;
    border-color: white;
    border-width: 1px;
    border-style: outset;
    box-shadow: inset 0px -1px 3px 0px #3f3f3f;
    padding: 6px 8px 6px 8px;
    box-sizing: border-box;
    border-radius: 4px;
}
.cc_output--chart__ui_button--choose_visible:hover,form[name="cc_form__main"] button[type="submit"]:hover {
    filter: grayscale(0.5);
}

.cc_output--chart__ui_button--choose_visible:active,form[name="cc_form__main"] button[type="submit"]:active {
    filter: none;
}

.cc_output__ui_button a {
    text-decoration: none;
    color: black;
}
.cc_output__ui_button  a:hover {
    color: black !important;
}

/* header css */
.cc_header {
    display: grid;
    font-family: 'Comfortaa', cursive;
    grid-template-areas:
        "logo title"
        "logo extra";
    align-items: stretch;
    justify-items: start;
    margin: 2.5ch 20px 2.5ch 20px;
}
.cc_header__title {
    grid-area: title;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: baseline;
    font-weight: bold;
}

.cc_header__logo {
    height: 5ch;
    margin-right: 1.5ch;
    grid-area: logo;
}

.cc_header__logo img {
    width: 100%;
    height: 100%;
}

.cc_header__title h2 {
    margin: 0;
    white-space: break-spaces;
    font-size: larger;
}

.cc_header__extra {
    grid-area: extra;
    display: flex;
    font-size: small;
}

/* form css */
form[name="cc_form__main"] {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 2.5ch
}

.cc_form__area.flex_horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: baseline;
}

.cc_form__area > *:not(:first-child) {
    margin-left: 2.5ch;
}

.cc_form__area label {
    white-space: pre;
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
}

.cc_form--errors {
    color: red;
}

/* form tooltips css */
.cc_form__tooltip--expander {
    display: inline-flex;
    border-radius: 36px;
    border: 2px #00aad4 solid;
    height: 12px;
    width: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #00aad4;
    font-weight: bold;
    margin-left: 1ch;
    cursor: pointer;
    transition: all 0.2s;
}
.cc_form__tooltip--expander.expanded {
    color: white;
    background: #00aad4;
}

.cc_form__tooltip {
    max-width: 65%;
}

.cc_form__tooltip > *,.cc_domain_description--container  {
    display: none;
    font-size: 13px;
    color: gray;
    font-family: 'Open Sans';
    background: #dbedf3;
    padding: 15px;
    border-radius: 8px;
    margin-top: 1ch;
}

/* domain description css */
.cc_domain_description {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 2ch;
}

.cc_domain_description--summary {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: stretch;
}
.cc_domain_description--summary > :not(:first-child) {
    margin-left: 1.5ch;
}

.cc_domain_description--name {
    font-weight: bold;
}

.cc_domain_description--container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "fg comment"
        "pg comment";
    grid-gap: 1.5ch;
    justify-items: start;
    align-items: stretch;
    align-content: stretch;
}

.cc_domain_description--functional_groups {
    grid-area: fg;
    border-collapse: collapse;
}

.cc_domain_description--functional_groups th {
    text-align: justify;
    vertical-align: top;
}

.cc_domain_description--functional_groups td {
    text-align: justify;
    vertical-align: top;
}

.cc_domain_description--profile_groups {
    grid-area: pg;
    border-collapse: collapse;
}

.cc_domain_description--profile_groups th {
    text-align: justify;
    vertical-align: top;
}

.cc_domain_description--profile_groups td {
    text-align: justify;
    vertical-align: top;
}


.cc_domain_description--comment {
    grid-area: comment;
}


/* chart css */
.cc_output--chart__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.cc_output--chart {
    position: relative;
    width: 50%;
    aspect-ratio: 1;
    display: inline-block;
}

.cc_output--chart__wrapper {
    position: relative;

}

.cc_output--chart__wrapper canvas {
    cursor: crosshair;
}
.cc_output--chart__wrapper canvas.zooming {
    cursor: zoom-in;
}
.cc_output--chart__wrapper canvas.choosing {
    cursor: pointer;
}

.cc_output--chart__ui {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    align-items: stretch;
}

.cc_output--chart__legend {
    max-height: 15ch;
    overflow-y: auto;
    margin-top: 2ch;
}

.cc_output--chart__sequences--container {
    width: 100%;
    margin: 2ch;
}

.cc_output--chart__sequences--container > h4 {
    margin-bottom: 0;
}

.cc_output--chart__sequences--count:not(:empty)::before {
    content: ': ';
}

.cc_output--chart__sequences {
    background: #e6e6e6;
    border: gray 1px solid;
    border-style: inset;
    box-shadow: inset 0px 0px 1px 0px black;
    padding: 1ch;
    height: 15ch;
    overflow-y: auto;
    width: -webkit-fill-available;
    box-sizing: border-box;
}

.cc_output--chart__sequences > :not(:first-child) {
    /*margin-top: 2ch;*/
}


.cc_output--chart__sequence {
    word-break: break-all;
    font-size: smaller;
    font-family: courier new;
}

.cc_output--chart__sequence--fasta {
    font-weight: bold;
}

.cc_output--chart__sequence--string {

}

/* html legend css */
.cc_output--chart__legend .interactive{
    cursor: pointer;
    white-space: nowrap;
}

.cc_output--chart__legend th.interactive.off {
    text-decoration: line-through;
}

.cc_output--chart__legend table {
    border-collapse: separate;
    -webkit-border-horizontal-spacing: 20px;
    -webkit-border-vertical-spacing: 0;
    font-size: 14px;
}

.cc_output--chart__legend th {
    position: sticky;
    top: 0;
    background: white;
    text-align: left;
}

.cc_output--chart__legend_label--colorbox,.cc_output--chart__legend_header--colorbox {
    height: 1.5ch;
    aspect-ratio: 1;
    display: inline-block;
    margin-right: 1ch;
    vertical-align: middle;
}

.cc_output--chart__legend_header--colorbox {
    background: black;
    border: 1px solid black;
    box-sizing: border-box;
}

.cc_output--chart__legend th.interactive.off .cc_output--chart__legend_header--colorbox {
    background: white;
}

/* html tooltip css */
#cc_chart--html_tooltip {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    transition-duration: 0.5s;
    transition-property: opacity;
    opacity: 0;
}

#cc_chart--html_tooltip.left {
    flex-direction: row-reverse;
}

#cc_chart--html_tooltip > div {
    background: white;
    border: 1px solid black;
    font-size: smaller;
    white-space: nowrap;
    word-break: keep-all;
    padding: 5px;
    font-weight: bold;
}
#cc_chart--html_tooltip .species {
    font-weight: none;
}

#cc_chart--html_tooltip .label {
    font-weight: normal;
}

#cc_chart--html_tooltip .colorbox {
    height: 10px;
    width: 10px;
    display: inline-block;
    vertical-align: baseline;
    margin-right: 2px;
}

#cc_chart--html_tooltip .pointer {
    transform: rotate(20deg) skew(40deg, 0deg);
    background: white;
    width: 10px;
    border-right: none;
    border-bottom: none;
    aspect-ratio: 1;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    top: -1px;
    right: -7px;
}

#cc_chart--html_tooltip.left .pointer {
    transform: rotate(75deg) skew(0deg, 40deg);
    right: 8px;
    top: -1px;
}