html, body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    margin:0;
    padding:0;
    height:100%;
}

h4 {
    font-size: 19px;
    font-weight: normal;
    text-align: left;
    margin: 15px 0;
}

p {
    word-break: break-all;
}

a {
    text-decoration: none;
    color: #4d6cc3;
}

input {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 20px 0;
    font: 1em Arial;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 2px;
}

select {
    width: 350px;
    text-overflow: ellipsis;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 20px 25px;
    font: 1em Arial;
    border: 1px solid #ggg;
    border-radius: 4px;
    padding: 2px;
}

button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

img {
    height: inherit;
    width: inherit;
    border-radius: 6px;
    cursor: pointer;
}

.mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.frame {
    fill: none;
/*    stroke: red;*/
    pointer-events: all;
}

.chart {
/*    stroke: red;*/
}

.area {
    cursor: pointer;
}

.area path {
    stroke: #4d93c3;
    stroke-width: 1pt;
    fill: #99c1dd;
}

.km_linker {
    fill: #c34d58;
}

.axis_y_right {
    cursor: pointer;
}

.axis--x {
    cursor: pointer;
}

.gene_expression_row {
    cursor: pointer;
}

.expression_area path {
    stroke: #c37d4d;
    stroke-width: 1pt;
    fill: #93c34d;
}

.frame line {
    stroke: #4d93c3;
    stroke-width: 1pt;
}

.download_link {
    fill: #1e4159;
    opacity: 0.7;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}

#main_save_as_pdf {
    position: absolute;
    top: 165px;
/*    left: 65px;*/
}

#main_save_as_svg {
    position: absolute;
    top: 165px;
/*    left: 195px;*/
}


.tx_pattern rect {
    stroke: #1e4159;
    fill: #1e4159;
}

.tx_pattern_frame {
    cursor: pointer;
}

.tx_hover_choosen line {
    stroke: #c34d58;
}
.tx_click_choosen line {
    stroke: #c34d58;
}


.tx_tooltip {
    display: none;
    position: absolute;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    z-index: 1;
    top: 150%;
    left: 50%;
    /*    margin-left: -60px;*/
}

.tx_cd_choose {
    width: 75px;
    heigt: 75px;
    margin-left: 188px;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

.scale_line line {
    stroke: #c34d58;
    stroke-width: 2pt;
}

.RNASeq_exon rect {
    fill: #1e4159;
    stroke: none;
    fill-opacity: 0.2;
}

.middle_line_hover_choosen line {
    stroke: #c34d58;
}

rect.RNASeq_exon_hover_choosen {
    stroke: #c34d58;
    fill: #c34d58;
    fill-opacity: 0.7;
}

.right_row_chart {
    cursor: pointer;
}

.right_row_hover_choosen path {
    stroke-width: 2px;
}

.right_row_name {
    fill: #1e4159;
    opacity: 0.7;
    font-weight: bold;
    text-anchor: end;
}

.middle_line_click_choosen line {
    stroke: #c34d58;
    stroke-width: 2px;
}

rect.RNASeq_exon_click_choosen {
    stroke: #c34d58;
    fill: #c34d58;
    fill-opacity: 0.7;
}

.right_row_click_choosen path {
    stroke-width: 2px;
}

.clinical_tip {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1;
    font-weight: bold;
    padding: 5px 12px 5px 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    cursor: default;
}

line.guide_line {
    stroke: #c34d58;
}

.chart_frame {
    min-height: calc(100% - 282px);
    min-width: 800px;
    margin: 0 auto;
    /*    border: 1px solid rgba(255,0,0,.9);*/
    text-align: center;
}

.tx_expression {
    display: none;
    position: fixed;
    top: 30px;
    margin: auto auto;
    right: 0;
    left: 0;
    width: 750px;
/*    height: inherit;*/
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .5);
    vertical-align: top;
}
.tx_expression .tx_save_buttons {
    margin: 0 20px;
}

.km_save_buttons {
    margin: 0 20px;
}


.flex-between {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 10px;
}

.ucsc_link_container {
    margin: 0 20px;
}

#tx_echart {
    height: 370;
    width: 740px;
    margin: 0 25px;
}

.chart-options {
    margin-left: 20px;
}

#tx_km {
    margin: 0 43px;
    display: none;
}

.nav_menue {
    max-width: 1000px;
    margin: -85px auto 0;
    text-align: center;
    padding-top: 40px;
}

.nav_module {
    position: relative;
    height: 50px;
    min-width: 50px;
    display: inline-flex;
    margin: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 1px 5px #29b6f6;
    background-color: #fff;
    border: 6px solid #29b6f6;
    vertical-align: top;
}

.nav_module:hover {
    box-shadow: 0 1px 20px #29b6f6;
}

.nav_module_region_option {
    position: relative;
    height: 120px;
    width: 120px;
    display: inline-flex;
    margin: 35px 35px;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .5);
    vertical-align: top;
}

.module_footer {
    margin: 20px;
}

.nav_choosen {
    position: absolute;
    display: flow;
    height: inherit;
    width: 500px;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 200px;
}

.nav_module_display_when_choosen {
    display: none;
    width: 500px;
}

.nav_module_display_when_unchoosen p {
    position: relative;
    margin: 0 7px;
    font-size: 17px;
    font-weight: bold;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #4d6cc3;
}

.nav_module_display_when_unchoosen {
    width: 100%;
    height: 100%;
    display: block;
}


.module_header {
    margin: 10px 20px;
    border-bottom: 1px solid #e5e5e5;
}

button.nav_module_close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}

.nav_module_close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

button.tx_expression_close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}

.tx_expression_close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}



.module_body {
    min-height: 80px;
    text-align: left;
}

#nav_tumor .tooltiptext {
    display: none;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

#nav_tumor .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

#nav_tumor:hover .tooltiptext {
    display: block;
}

.invalide_gene {
    display: none;
}

#nav_gene .tooltiptext {
    display: none;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.gene_check_wait {
    display: none;
}

.loader {
    margin: 15px;
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#nav_gene .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

#nav_gene :hover .tooltiptext {
    display: block;
}

#nav_region .tooltiptext {
    display: none;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

#nav_region .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

#nav_region:hover .tooltiptext {
    display: block;
}

#nav_clinical .tooltiptext {
    display: none;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

#nav_clinical .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

#nav_clinical:hover .tooltiptext {
    display: block;
}


.footer {
    background-color: #f5f5f5;
    box-shadow: 0 -1px 2px #bdbdbd;
    padding: 30px 100px 10px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer .links {
    display: flex;
    justify-content: space-between;
}
.footer .links a {
    color: #616161;
    padding: 0 10px;
    margin: 0 10px;
    border-right: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    text-shadow: 1px 1px 2px #ccc;
}
.footer .links a:hover {
    color: #000;
}
.footer .footer-data {
    margin: 20px auto 5px;
}


/**
 * author: palmer
 */

body {
    margin: 0;
    padding: 0;
}

*:focus {
    outline: none;
}

button {
    border: 1px solid #01579b;
}

button:hover {
    background-color: #01579b;
    color: #fff;
}

.myHeader {
    /* position: fixed; */
    width: 100%;
    height: 80px;
    background-color: #0277bd;
    background: -webkit-linear-gradient(top, #4fc3f7, #0277bd);
    background: -o-linear-gradient(top, #4fc3f7, #0277bd);
    background: -moz-linear-gradient(top, #4fc3f7, #0277bd);
    background: linear-gradient(top, #4fc3f7, #0277bd);
    box-shadow: 0 2px 5px #bdbdbd;
    border-bottom: 8px solid #29b6f6;
    display: flex;
    align-items: center;
}

.myHeader a {
    line-height: 80px;
    z-index: 999;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 2px 2px 2px #666;
}

.myHeader a:hover {
    text-shadow: 2px 2px 2px #424242;
}

.myHeader a i {
    display: inline-block;
    color: #01579b;
    font-weight: normal;
    font-size: 50px;
    margin: 10px;
    text-shadow: 2px 2px 5px #fff;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotateY(360deg)
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotateY(359deg)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotateY(359deg)
    }
}


/**
 * loading style
 */

.myloading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 999;
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 50px;
    height: 60px;
    font-size: 10px;
}

.spinner>div {
    background-color: #4fc3f7;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    -moz-animation: stretchdelay 1.2s infinite ease-in-out;
    -o-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    -moz-animation-delay: -1.1s;
    -o-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    -moz-animation-delay: -1.0s;
    -o-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    -moz-animation-delay: -0.9s;
    -o-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    -moz-animation-delay: -0.8s;
    -o-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@-moz-keyframes stretchdelay {
    0%,
    40%,
    100% {
        -moz-transform: scaleY(0.4)
    }
    20% {
        -moz-transform: scaleY(1.0)
    }
}

@-o-keyframes stretchdelay {
    0%,
    40%,
    100% {
        -o-transform: scaleY(0.4)
    }
    20% {
        -o-transform: scaleY(1.0)
    }
}

@keyframes stretchdelay {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
        -moz-transform: scaleY(0.4);
        -o-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
        -moz-transform: scaleY(1.0);
        -o-transform: scaleY(1.0);
    }
}

@media screen and (max-width:1200px){
    .tx_expression {
        width: 600px;
    }
    .tx_expression .tx_cd_choose {
        margin-left: 138px;
    }
}

.noFoundContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    height: calc(100vh - 260px);
}

.noFoundContent .item {
    /* flex: 1; */
}
.noFoundContent .item .words {
    border-right: 2px solid #ccc;
}
.noFoundContent .item p:first-child {
    text-align: center;
    font-size: 150px;
    font-weight: bold;
    line-height: 10px;
    letter-spacing: 5px;
    color: #4fc3f7;
    font-family: 'Open Sans', sans-serif;
}

.noFoundContent .item p:first-child span {
    cursor: pointer;
    text-shadow: 0px 0px 2px #686868,
        0px 1px 1px #ddd,
        0px 2px 1px #d6d6d6,
        0px 3px 1px #ccc,
        0px 4px 1px #c5c5c5,
        0px 5px 1px #c1c1c1,
        0px 6px 1px #bbb,
        0px 7px 1px #777,
        0px 8px 3px rgba(100, 100, 100, 0.4),
        0px 9px 5px rgba(100, 100, 100, 0.1),
        0px 10px 7px rgba(100, 100, 100, 0.15),
        0px 11px 9px rgba(100, 100, 100, 0.2),
        0px 12px 11px rgba(100, 100, 100, 0.25),
        0px 13px 15px rgba(100, 100, 100, 0.3);
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}

.noFoundContent .item p:first-child span:hover {
    text-shadow: 0px 0px 2px #686868,
        0px 1px 1px #fff,
        0px 2px 1px #fff,
        0px 3px 1px #fff,
        0px 4px 1px #fff,
        0px 5px 1px #fff,
        0px 6px 1px #fff,
        0px 7px 1px #777,
        0px 8px 3px #fff,
        0px 9px 5px #fff,
        0px 10px 7px #fff,
        0px 11px 9px #fff,
        0px 12px 11px #fff,
        0px 13px 15px #fff;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}

.selected_option {
    background-color: #29b6f6;
    color: #fff;
}

.option {
    border: 2px solid #29b6f6;
    border-radius: 5px;
    padding: 5px 5px;
}