::-webkit-scrollbar-track {
    background-color:#F1F1F1; /* #D8D8D8 */
} /* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
} /* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
    background-color: white;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
    /*background-color: black;*/
    background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar {
    width: 15px;
} /* this targets the default scrollbar (compulsory) */


body {
    font-family: Tahoma, Arial;
    color:#2A2761;
    overflow:hidden;
}

.heatmap-table {
    position: relative;
    /*width: 1100px;*/
    width: 100%;
    background-color: #aaa;
    overflow: hidden;

    border-collapse: separate;
    border-spacing: 0px;
    /*
    border-collapse: collapse;
    border-spacing: 1px;
    */
}


/*thead*/
.heatmap-table thead {
    position: relative;
    display: block; /*seperates the header from the body allowing it to be positioned*/
    width: 1100px;
    overflow: visible;
}

.heatmap-table thead th {
    background-color: #99a;
    min-width: 163px;
    height: 32px;
    /*border: 1px solid #222;*/
    padding-left: 10px;
    padding-right: 10px;
}

.heatmap-table thead th:nth-child(1) {/*first cell in the header*/
    position: relative;
    display: table-cell; /*seperates the first cell in the header from the header*/
    background-color: #88b;
    text-align: left;
    border-left:1px solid white;
}


/*tbody*/
.heatmap-table tbody {
    position: relative;
    display: block; /*seperates the tbody from the header*/
    height: 1px;
    /*
    width: 1100px;
    height: 779px;
    */
    overflow: scroll;
}

.heatmap-table tbody td {
    background-color: #EBEBEB;
    min-width: 163px;
    padding-left: 10px;
    display: table-cell !important;
    /*border: 1px solid #222;*/
}

#heatmap-outcomes tbody tr td:nth-child(1) {  /*the first cell in each tr*/
    position: relative;
    display: block; /*seperates the first column from the tbody*/
    height: 49px;
    min-width: 140px !important;
    border-left:1px solid white;
    /*background-color: #99a;*/
}

#heatmap-measurements tbody tr td:nth-child(1) {  /*the first cell in each tr*/
    position: relative;
    display: block; /*seperates the first column from the tbody*/
    height: 49px;
    min-width: 156px !important;
    border-left:1px solid white;
    /*background-color: #99a;*/
}

#heatmap-outcomes-country tbody tr td:nth-child(1) {  /*the first cell in each tr*/
    position: relative;
    display: block; /*seperates the first column from the tbody*/
    height: 49px;
    min-width: 140px !important;
    border-left:1px solid white;
    /*background-color: #99a;*/
}


#heatmap-instruments tbody tr td:nth-child(1) {  /*the first cell in each tr*/
    position: relative;
    display: block; /*seperates the first column from the tbody*/
    height: 49px;
    /*min-width: 120px !important;*/
    border-left:1px solid white;
    /*background-color: #99a;*/
}

.heatmap-table tr, th {
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

.heatmap-table td{
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

.question td:nth-child(1){

}

select {
    max-width: 20px;
}

.comments, .comments-instruments {
    font-size: 15px;
    padding: 0px 5px;
    margin: 0 auto;
}

.comment_available {
    display: block;
}

.comment_no_available {
    display: none;
}

#edit-comment {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.95); /* Black w/ opacity */
    text-align: center;
}

#database-info-holder {
    position:absolute;
    top:0px;
    left:0px;
    color: white;
    width: 375px;
    margin: 0 auto;
    z-index:10000;
    /*pointer-events: none;*/
}

#comment-holder{
    position:absolute;
    top:0px;
    left:0px;
    color: white;
    width: 510px;
    margin: 0 auto;
    z-index:10000;
    pointer-events: none;
}

#comment-relation-holder {
    float: left;
}

#comment-text {

}

.comment-text-style {
    float: left;
    width: 495px;
    padding: 10px 10px;
    color: #222222;
    background-color: white;
}

#container {
    position: absolute;
    z-index: 50;
    float: left;
    overflow: auto;
    top:95px;
    left:65px;
    background-color: white;
    /*max-width: 1100px;*/
}

#comment-close {
    float: right;
    clear: left;
    background-color: white;
    color: black;
    padding: 5px 10px;
}

#comment-save {
    float: left;
    clear: left;
    margin-top: 10px;
    background-color: green;
    padding: 5px 15px;
}

#comment-label {
    float: left;
}

.comment-question{
    background-color: #cecece;

}

#comments-relation, #database-info-relation {
    border:4px solid white;
    border-radius: 5px;
    border-spacing: 5px;
    background-color: #222222;

    -webkit-box-shadow: 0px 0px 34px 0px rgba(99,98,99,0.49);
    -moz-box-shadow: 0px 0px 34px 0px rgba(99,98,99,0.49);
    box-shadow: 0px 0px 34px 0px rgba(99,98,99,0.49);
}

#comments-relation td{
    padding:0px;
    font-size: 12px;
}

.comments-relation-description {
    padding:3px 10px !important;
    min-width: 464px;
    font-size: 11px !important;
    color: #222222;
}

.separator {
    background: none !important;
    height: 6px;
}

.comments-label {

}

.comments-relation-categories {
    padding:6px 10px 5px 10px !important;
    min-width: 427px;
    font-size: 12px;
    text-align: center;
    background-color: #535353;
    color:white;
}

#comments-database {
    text-align: center;
    color:white;
}

.comments-relation-label {
    padding-right:10px !important;
}

.hide {
    display: none;
}

.show-comments {
    display: block !important;
}

.inner {
    position: relative;
    height: auto;
}

.data {
    width:100px;
    text-align: center;
}

.td-color-0 {
    background-color:white !important;
}

.td-color-1 {

    background-color:#D6236F !important;
}

.td-color-2 {
    background-color:#E04086 !important;
}

.td-color-3 {
    background-color:#E9769E !important;
}

.td-color-4 {
    background-color:#F0A4BE !important;
}

.td-color-5 {
    background-color:#F7CCDB !important;
}

/** COLORS INSTRUMENTS PULLDOWN **/

.td-color-instruments-1 {
    background-color:#ECDAF4 !important;
}

.td-color-instruments-2 {
    background-color:#E3CDEC !important;
}

.td-color-instruments-3 {
    background-color:#DABFE4 !important;
}

.td-color-instruments-4 {
    background-color:#CDAFDA !important;
}

.td-color-instruments-5 {
    background-color:#C39FD2 !important;
}

.td-color-instruments-6 {
    background-color:#B68EC9 !important;
}

.td-color-instruments-7 {
    background-color:#AE81C1 !important;
}

.td-color-instruments-8 {
    background-color:#A171B8 !important;
}

.td-color-instruments-9 {
    background-color:#9965B0 !important;
}

.td-color-instruments-10 {
    background-color:#9157A9 !important;
}

.td-color-instruments-11 {
    background-color:#82499B !important;
}

.td-color-instruments-12 {
    background-color:#773F90 !important;
}

.td-color-instruments-13 {
    background-color:#6C3585 !important;
}

.td-color-instruments-14 {
    background-color:#602977 !important;
}

.td-color-instruments-15 {
    background-color:#541E6B !important;
}
/** COLORS STAGES PULLDOWN **/
.td-color-stages-0 {
    background-color:#FFCA71 !important;
}

.td-color-stages-1 {
    background-color:#FAA14B !important;
}

.td-color-stages-2 {
    background-color:#F0705E !important;
}


/*** COLORS MEASUREMENTS *****/

.td-color-measurements-1 {
    background-color:#DAEEF3 !important;
}

.td-color-measurements-2 {
    background-color:#31869B !important;
}

.td-color-measurements-3 {
    background-color:#215967 !important;
}

.td-color-measurements-4 {
    background-color:#92CDDC!important;
}


.question, .question_instruments {
    padding: 3px 12px;
    font-size: 10px;
    background-color:white;
    height: 35px;
    border-left: 1px solid white !important;
}

.category td, .category_instruments td{
    padding-left: 10px;
    padding-right: 10px;
    height: 49px;
}

.primary-category {
    font-size: 12px;
    color:white;
    background-color: #262261 !important;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}

#comments-category {
    font-size: 11px !important;
    color:white;
    background-color: #262261 !important;
    text-align: left;
    padding: 4px 10px 3px 10px !important;
}

#comments-subcategory {
    font-size:11px !important;
    color: white;
    background-color: #262261 !important;
    text-align: left;
    padding: 4px 10px 3px 10px !important;
}

.primary-category-extended {
    border-left:0px solid white !important;
}

.secondary-subcategory {
    color:white;
    background-color: #B6B2E4 !important;
    border-bottom: 1px solid white;
}

.secondary-category {
    font-size: 12px;
    background-color: #A88CCC !important;;
    color:white;
    /*border-left: 1px solid white;*/
}

.database-label {
    color:white;
    background-color: #332fa9 !important;;
    font-size: 12px !important;
    min-width: 163px;
    height: 32px;
    border-top: 1px solid white;
    border-left: 1px solid white;
}

.database {
    text-align: center;
    color:white;
    background-color: #F7931D !important;
    min-width: 163px !important;
    font-size: 12px !important;
    border-top: 1px solid white;
    /*border-left: 1px solid white;*/
}


.auh, .ipci, .sidiap {
    background-color: #ED2A7B !important;;
}


.sidigi {
    background-color: #F64522 !important;
}

.redegi, .memento {
    background-color: #F7931D !important;
}

.lfan, .lfbc, .lzam, .lzan {
    background-color: #7030A0 !important;
}

#data-types-selector {
    margin-top: 6px;
    max-width: 500px !important;
}

#heatmap-title {
    float: left;
    background-color: #B6B2E4 !important;;
    padding: 5px 10px;
    margin-left: 1px;
    margin-right: 10px;
    font-weight: bold;
    font-size: 18px;
}

.instruments-info-checkbox{
    float: left;
    width: 20px;
    height: 20px;
}

.instruments-info-label{
    margin-top: 6px;
    margin-right: 10px;
    float: left;
}

#instruments-info {
    background-color:white;
}

#instruments-info-booleans {
    padding: 7px;
}

#instruments-info-numbers{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

#instruments-info-average {
    margin-bottom: 15px;
    margin-top: 5px;
}

#comments-heatmap {
    background: #535353;
    color: white;
    font-weight: bold;
}

.cube-form {
    position: absolute;
    display:none;
}

.side-info {
    display:none;
}

#heatmap-controls {
    position: absolute;
    z-index: 1001;
    margin-left: 75px;
}

.small-size-cells {
    font-size:9px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    min-width: 87px !important;
    height: 25px !important;
}

.data-label-small {
    min-width: 140px !important;
}

.data-label-small-measurements {
    min-width: 156px !important;
}

.tr-small {
    height: 25px !important;
}

#tooltip-holder {
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 9000;
    color: white;
    background-color: rgb(112, 48, 160);
    padding: 5px 20px;
    border: 1px solid white;
    font-size: 12px;
}

#heatmap-header-holder {
    position:absolute;
    top:10px;
    left:65px;
    z-index: 900;
    background-color: rgba(150, 150, 150, 0.5);
    padding: 8px;
}

#heatmap-header-holder table {
    border-spacing: 0px;
}
#heatmap-header {
    float: left;
    width: 100%;
}

#heatmap-header-main-td {
    width: 100%;
}

#heatmap-header-legend-td {
    width: auto;
    float:right;
}

#heatmap-header-label {
    float:left;
    font-size: 24px;
    color: white;
    padding-top: 10px;
    padding-left: 20px;
}

#heatmap-header-controls{
    float:left;
}

#heatmap-header-legend-img {
    margin-left:13px;
}

#heatmap-header-zoom {
    float:right;
    /*background-image: url(../img/heatmap-outcomes-zoom.png);
    background-repeat: no-repeat;*/
    height: 57px;
    margin-left:16px;
}

#heatmap-header-zoom-nav {
    float: left;
    font-size: 11px;
    color: white;
    text-decoration: underline;
    text-align: center;
    margin-right: 20px;
}

#heatmap-header-zoom-imgs {
    float: left;
    position: relative;
}

#heatmap-header-zoom-minimap {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}

#heatmap-header-zoom-area {
    position: relative;
}

#heatmap-instruments .heatmap-body{
    overflow-y: scroll;
    overflow-x: unset;
}

/******* ZOOM EN HEATMAP ******/
#heatmap-zoom {
    position:absolute;
    z-index: 13000;
    background-image: url(../img/heatmap-zoom-background.png);
    width: 299px;
    height:325px;
    top: 70px;
}
#heatmap-zoom-img {
    position:relative;
    top: 38px;
    left: -12px;
}

#heatmap-zoom-close {
    position:relative;
    top: -240px;
    left: 264px;
}

#heatmap-zoom-area {
    position:absolute;
    left:12px;
    top:38px;
    pointer-events: none;
}

#heatmap-zoom-test {
    position:absolute;
    left:12px;
    top:-12px;
}

.instruments-label {
    width: 4%;
    /*min-width: 4% !important;*/
}

.instruments-th {
    width:7%;
    /*min-width: 7% !important;*/
    color: white;
}

.instruments-source-td {
    /*
    width: 4%;
    min-width: 4% !important;
    */
    min-width: 0px !important;
    text-align:left;
}
.instruments-td {
    /*
    width: 4%;
    min-width: 4% !important;
    */
    /*text-align:left;*/
}

.instruments-last-td {

}

.loading {
    position: absolute;
}

.axis #axis,.axis #axis-outcomes, .axis #axis-instruments, .axis #axis-stages {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

#lightbox {
    position:absolute;
    top:0px;
    left:0px;
    background-color: black;
    opacity: .9;
    width: 100%;
    height: 100%;
    display: none;
    /*pointer-events: none;*/
}

.signed-in-holder {
    position:absolute;
    width: 100%;
    z-index:100;
    margin-top: 5px;
}

.signed-in-wrapper {
    border-radius: 8px;
    float:right;
    font-size:12px;
    background-color:#4F4F4F;
    margin-right:20px;
    margin-top:10px;
    height:18px;
    padding:8px 8px 5px 8px;
}

.signed-in-label{
    color:#A6A6A6;
}

.signed-in-user{
    color:white;
}

.signed-in-space{
    color:#848484;
    padding: 0px 5px;
}

.signed-in-logout{
    color:#F6B344;
    float: right;
}

.logout-button {
    color:#F6B344;
    text-decoration: none;
    background: none;
    border: none;
    font-size: 12px;
    cursor:pointer;
}

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

.zoom-heatmap {
    position: absolute;
    top:0px;
    left:0px;
    pointer-events: none;
}

#main-label {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    font-size: 16px;
    color:white;
}

#main-label-text {
    border-radius: 8px;
    padding: 10px 30px;;
    background-color: rgba(255, 255, 255, 0.2);
}

#database-info-relation {
    color:white;
    width: 370px;
}

.header-text {
    float:left;
    clear: both;
}

#heatmap-header-sublabel-axis {
    font-size: 11px;
    margin-top: 5px;
    color: #a8a8aa;
}

.database-fullname-tr {
    font-size:14px;
    font-weight: bold;
}

.database-institution-tr {
    font-size:12px;
}

.database-country-tr {
    font-size:12px;
    font-style: italic;
}

.database-border {
    border-bottom:1px solid white;
    opacity: 0.5;
}

.form-initial-holder{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 110;
    display:none;
}
.open-form-button {
    border-radius: 8px;
    float: left;
    font-size: 12px;
    /*background-color: #4F4F4F;*/
    margin-left: 10px;
    margin-top: 10px;
    height: 18px;
    padding: 8px 8px 5px 8px;
    color: white;
}

#open-form-button-login {
    margin-left: 190px;
    margin-top: 30px;
    background: none;
    color:black;
}

.form-wrapper {
    /*background-color: black;*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10001;
}

.form-holder{
    width: 435px;
    height: 21px;
    margin: 12% auto;
    position: relative;
    z-index: 1;
}

#form-title {
    text-align: center;
    color: white;
    font-size: 20px;
    padding-bottom: 60px;
}

#contact-form form {
    /* Just to center the form on the page */
    margin: auto;
    width: 406px;
    position: relative;
    height: 376px;
    /* To see the outline of the form */
    padding: 20px 25px 10px 25px;
    border: 2px solid #FFF;
    border-radius: 1em;
    background-color: #a8aebd;

}

#contact-form label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: inline-block;
    width: 90px;
    text-align: left;
    color:white;
    margin-right: 5px;
}

#contact-form input, textarea {
    font: 1em sans-serif;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    font-size: 14px;
    padding: 5px;
    margin-right: 5px !important;
}

.contact-form-margin {
    margin-bottom: 5px;
}

#contact-form input:focus, #contact-form textarea:focus {
    /* To give a little highlight on active elements */
    border-color: #000;
}

#contact-form textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;

    /* To give enough room to type some text */
    height: 6em;
}

#contact-form  .button {
    /* To position the buttons to the same position of the text fields */
    padding-left: 90px; /* same size as the label elements */
}

#contact-form  button {
    /* This extra margin represent roughly the same space as the space
       between the labels and their text fields */
    margin-left: .5em;
    margin-top: 20px;
    margin-right: 7px;
    float: right;
}

.button {
    float: left;
    margin-top: 20px;
}

#form-message{
    position: absolute;
    width: 98%;
    background: #00135e;
    height: 377px;
    border-radius: 1em;
    opacity: .95;
    z-index: 1;
    padding: 1em;
    border: 1px solid #CCC;
    display: none;
}

#form-message-text {
    color: white;
    text-align: center;
    margin-top: 160px;
}

.required-field {
    color:#333;
    margin-left: 5px;
}

#required-field-label {
    float:right;
    font-size: 12px;
    font-style: italic;
}

.form-background {
    background-color: black;
    opacity: .95;
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0px;
}



#close-form {
    float:right;
}

#form-title-label {
    float: left;
    margin-top: 20px;
    margin-left: 25px;
    font-weight: bold;
}

.open-information {
    border-radius: 8px;
    float: left;
    font-size: 12px;
    /*background-color: #4F4F4F;*/
    margin-left: 20px;
    margin-top: 10px;
    height: 18px;
    padding: 8px 8px 5px 8px;
    color: white;
}
.information-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 110;
    /*display:block;*/
}

.information-images {
    position: absolute;
    z-index: 1;
    top: 170px;
    left: 370px;
    overflow: hidden;
    width: 800px;
    height: 550px;
}

.images-holder {
    position: absolute;
}

.information-image {
    position: absolute;
}

.information-arrow {
    position: absolute;
    z-index: 1;
}

#information-left-arrow {
    top: 390px;
    left: 240px;
}
#information-right-arrow {
    top: 390px;
    left: 1220px;
}

.form-policy-message {
    font-size: 10.5px;
    float: left;
    margin-left: 3px;
    color: #002DB2;
    margin-bottom: 10px;
}

.form-policy-message a{
    color: #333;
}

#consent {
    float: left;
    width: 17px !important;
    height: 17px !important;
    margin: 0px 5px 0px 0px!important;
}

#consent-label {
    width: 90% !important;
    font-size: 12px;
}

.consent-holder {
    float:left;
    width: 100%;
}

#database-extra-table {
    font-size: 11px;
    color: #222;
    color: #222;
    background-color: #eeeeee;
    border-spacing: 6px;
    border-radius: 5px;
    width: 100%;
}

#tr-source-population {
    padding-top: 8px;
    /*float: left;*/
}

.database-border-black {
    border-bottom:1px solid #222;
    opacity: 0.5;
}
#tr-extra-space {
    height: 10px;
}

.form-action-reset {
    margin-right: 10px;
}