:root {
/*    --CLR_BCKGRND: #1e272c*/
    --CLR_BCKGRND: #fff;  
     /* #1b242b; */
    /*--CLR_BCKGRND: #1b242b !*CLR BACKGROUND BLACK*!*/
    --ND_DEFAULT: #489892

}

body {
    font-family: sans-serif;
    background-color: var(--CLR_BCKGRND);
    margin: 8px 0 0 0;
}

footer{
    
    margin: 0 0 0 0;
}

h6 {margin-top: 0;}

.app__container {
    margin: 2% 2% 2% 2%;
    display: grid;
    justify-items: center;
}



.light-card{
  background-color: #E9EEF6;
  width: 90%;
  margin: 32px auto;
  padding: 24px;
}

#toggleTheme{
    width: fit-content;
    margin: auto;
  }

.app__header {
    display: flex;
    justify-content: space-between;
    color: #fff;
}

.app__header__title {letter-spacing: 0.23rem;}

.app__header__title--grey {color: #C4CDD5;}

.app__menu__img {height: 60px; width: auto;}

.app__content {display: flex; margin-top: 10px;}

.graph__title {
    color: #fff !important;
    letter-spacing: 0.3rem !important;
    padding: 0px 25px 25px 25px;
    margin-bottom: 0px !important;
    font-size: 1em;
}

.graph__title2 {
    color: #FF5722 !important;
    letter-spacing: 0.3rem !important;
    padding: 0px 25px 25px 25px;
    margin-bottom: 0px !important;
    font-size: 1.5em;
    font-family: "sans-serif";
    font-weight: bold
}


#alignment-body ::-webkit-scrollbar-thumb {
    background-color: #34AD99 !important;
}
#alignment-body .control-upload {
    border-color: #34AD99 !important;
}


.inrow_style{
    display: flex;
    float: end !important;
    margin-left: 50%;
    width: 100%;
    margin-top: 10px
}

.inrow_style_2{
    display: inline-flex;
    float: end !important;
    margin-left: 0%;
    width: 100%;
    margin-top: 0px
}


.info_box {
    color: #b71427  !important;
    letter-spacing: 0.1rem !important;
    padding: 2px 5px 2px 15px;
    margin-top: -4px;
    display: inline-block;
    font-size: 1.2em;
    font-family:  "Open Sans", Times, serif !important;
    font-weight: bold;
}

.box__title {
    font-family: "Open Sans", Times, serif !important;
    color: #b71427 !important;
    letter-spacing: 0.3rem !important;
    padding: 2px 15px 2px 15px;
    margin-bottom: 1px;
    font-size: 1.2em;
    font-weight: bold;
}

.box__title2 {
    font-family: "Open Sans", Times, serif !important;
    color: #2f496b !important;
    letter-spacing: 0.3rem !important;
    padding: 2px 15px 2px 15px;
    margin-bottom: -1px;
    font-size: 12px;
    align-items: center;
    text-align: center;
    justify: center;
    align: center
}


.info__container {
    /* background-color: #40515E; */
    background-color: rgb(251 201 114);
    border-radius: 0.55rem;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
    margin-bottom: 6px !important;
}

.info__container2 {
    background-color: #40515E; /*#5d6d95;*/
    border-radius: 0.55rem;
    display: inline-block;
    line-height:1.2em;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
    margin-left: 15px;
    margin-bottom: 0px !important;
}

.__footer {
    color: #9d9d9d !important;
    /*letter-spacing: 0.1rem !important;*/
    /*padding: 25px 25px 0px 25px;*/
    /*padding-bottom: -35px !important;*/
    font-size: 12px;
    font-family: "sans-serif" !important;
    /* margin-left: 10px; */
    background-color: rgb(92, 119, 128);
    height: 200px;
}
.slider {padding: 15px;}

.auto__checkbox {margin-right: 10px;}

.auto__label {color: #DFE3E8;}

.auto__container {
    display: flex;
    justify-content: space-between;
    color: #DFE3E8;
    padding: 0px 15px;
}

.auto__p {margin-bottom: 0;}

.graph__container {
    background-color: #bacedd; /* #87a5bb */
    margin-left: -30px;
    margin-right: -20px;
    border-radius: 0.55rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#nma_art{
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

.main_pic{
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

.main_results{ 
    display: block;
    width: 120px;
    text-align: center;
    justify-self: center;
}

.main_results1{ 
    display: block;
    width: 120px;
    text-align: center;
    justify-self: center;
    color: rgb(184, 80, 66);
}

.col_results{
    display: grid;
    width: 150px;
}

.col_results1{
    display: grid;
    width: 120px;
}



.title-word {
    animation: color-animation 4s linear infinite;
  }
  
  .title-word-1 {
    --color-1: #DF8453;
    --color-2: #3D8DAE;
    --color-3: #E4A9A8;
  }
  
  .title-word-2 {
    --color-1: #DBAD4A;
    --color-2: #ACCFCB;
    --color-3: #17494D;
  }
  
  .title-word-3 {
    --color-1: #ACCFCB;
    --color-2: #E4A9A8;
    --color-3: #ACCFCB;
  }
  
  .title-word-4 {
    --color-1: #3D8DAE;
    --color-2: #DF8453;
    --color-3: #E4A9A8;
  }
  
  @keyframes color-animation {
    0%    {color: var(--color-1)}
    32%   {color: var(--color-1)}
    33%   {color: var(--color-2)}
    65%   {color: var(--color-2)}
    66%   {color: var(--color-3)}
    99%   {color: var(--color-3)}
    100%  {color: var(--color-1)}
  }
  

/* style2 main page */

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.waviy {
  position: relative;
  font-size: 30px;
  text-align: center;
}
.waviy span {
  /* position: relative; */
  display: inline-block;
  color: #5c7780;
  animation: waviy 2s infinite;
  animation-delay: calc(.1s * var(--i));
  padding: 0.2%;
  
}
@keyframes waviy {
  0%,40%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-10px)
  }
}

.upload_data{
    color: white;
    text-decoration: none;
    font-size: x-large;
}
.go_to_example{
    height: 38px;
    padding: 0 10px;
    color: black;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #bbb;
}



.upload_radio{
    display: flex;
    text-align: start;
    justify-content: space-between;
    width: 400px;
}

.selcect_title{
    color: orangered;
    font-weight: bold;
    font-size: large;
}

.selcect_optional{
    color: green;
    font-weight: bold;
    font-size: large;
}

.upload_second_select{
    display: grid;
    background-color: burlywood;
    width: 500px;
    justify-content: center;
}

.upload_third_select{
    display: grid;
    background-color: rgb(197, 136, 182);
    width: 700px;
    justify-content: center;
}

#arrow_back{
    width: 200px;
    margin-left: 40px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

#back_result{
    display: flex;
    align-items: center;
    margin: unset;
    color: chocolate;
    font-size: medium;
    font-weight: bold;
}


#test_upload{
    background-color: orange;
    border: unset;
    color: white;
    display: inline-block;
    justify-self: center;
    padding: 4px;
    place-self: center;
}

/* style for scalable transation tool */


#title_skt{
    text-align: start;
    font-size: medium;
    background-color: #A7BEAE;
    border: none;
}

.title_col1{
    /* width: 80px; */
    width: 7%;
    background-color: #A7BEAE;
    justify-content: start;
    display: grid;
    align-items: center;
    height: 40px;
}

.title_col2{
    width: 80%;
    background-color: #A7BEAE;
    justify-content: center;
    display: grid;
    align-items: center;
}

.title_first{
    justify-self: start;
    align-content: center;
    text-align: center;
    color: white;
    display: grid;
    font-size: medium;
    font-weight: bold;
    border-radius: 4%;
    width: 100px;
    background-color: #B85042;
    height: 30px;
}

.row_skt{
    width: -webkit-fill-available;
    justify-content: center;
}


.skt_studyinfo{
    
    height: 160px;
    display: grid;
    background-color: #E7E8D1;
}


.skt_studyinfo2{
    justify-items: center;
    width: 240px;
    height: auto;
    /* justify-content: center; */
    display: grid;
    background-color:  antiquewhite;
}

.option_select{
    display: grid;
    justify-self: center;
    font-size: medium;
    font-weight: bold;
    color: rgb(184, 80, 66)
}

#select_dropdown{
    display: grid;
    justify-self: center;
}

.tab1{
    width: 100%;
    height: auto;
    justify-content: start;
    display: grid;
    background-color: #E7E8D1;
}

.headtab1{
    display: none;
}

.bodytab1{
    background-color: #E7E8D1;
    width: 100%;
    height: -webkit-fill-available;
    display: grid;
}

.study_design{
    justify-self: start;
    align-content: center;
    text-align: center;
    color: white;
    display: grid;
    font-weight: bold;
    background-color: #B85042;
    height: 30px;
    width: 100px;
    font-size: small;
    border-radius: 4%;
}

.tab1_col{
    /* width: 370px; */
    width: 20%;
}

.tab1_col2{
    /* width: 370px; */
    width: 38%;
    margin-right: 1%
}

.tab2_col {
    display: grid;
    background-color: antiquewhite;
    width: 42%;
    margin-left: 1%;
}

.tab3_col {
    display: grid;
    background-color: antiquewhite;
    width: 69%;
    margin-left: 1%;
}

.tab3_col2 {
    display: grid;
    background-color: antiquewhite;
    width: 90%;
}

.inter_label{
    align-content: center;
    text-align: center;
    color: white;
    display: grid;
    font-size: small;
    font-weight: bold;
    border-radius: 4%;
    width: 150px;
    background-color: #B85042;
    height: 30px;
}

.empty_class{
    display: block;
    white-space: pre;
    padding: 10px;
}



.skt_span1{
    display: block;
    text-align: center;
    white-space: pre;
}

.skt_intervention{
    justify-self: center;
    width: 100%;
    height: 90px;
    display: grid;
    background-color: antiquewhite;
    justify-content: center;
    overflow-y: auto;
}
.skt_interbody{
    display: grid;
    align-self: center;
    line-height: 30px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.skt_span2{
    text-align: center;
    color: var(--color-1);
}

.abvalue_simple{
    font-weight: bold;
    color: green;
}


.studyinfo_simple{
    font-weight: bold;
    font-size: larger;
}

.abvalue_range{
    /* font-weight: bold; */
    color: red;
    display: block;
    font-size: small
}

.select_outcome{
    display: grid;
    text-align: center;
    width: 240px;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    white-space: pre-wrap;
}
.slect_body{
    justify-content: center;
    display: grid;
    justify-items: center;
}


.span_ref2{
    border-top: 1px solid gray;
    display: grid;
    height: 150px;
    width: 100px;
    align-items: center;
}

.note_tick{
    text-align: center;
    width: 350px;
    font-size: initial;
    height: 30px;
    align-items: center;
    display: grid;
    color: #B85042;
}


.span_ref1{
    display: block;
}

.skt_col1{
    width: 100px;
    background-color: aliceblue;
    text-align: center;
    border: solid 0.5px;
}

.skt_rowtable{
    width: -webkit-fill-available;
    justify-content: center;
    height: 100%;
}

.skt_col2{
    /* width: 1200px; */
    width: 90%;
    background-color: antiquewhite;
}


.cell-span {
    /* background-color: rgb(249, 245, 227); */
    background-color: white;
}

.ag-header-cell-label .ag-header-cell-text {
    white-space: pre-wrap !important;
    text-align: center;
 }


 .ag-header-cell-label{
    justify-content: center;
 }

 .ag-scrolls {
    height: auto !important;
}

.ag-body {
    position: relative !important;
    top: auto !important;
    height: auto !important;
}

.ag-header { 
    position: relative !important;
    align-self: center;
}

.ag-floating-top {
    position: relative !important;
    top: auto !important;
}

.ag-floating-bottom {
    position: relative !important;
    top: auto !important;
}

& > div,
.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
    height: auto !important;
}

/* .ag-header-group-cell-label{
    justify-content:center !important;
} */

.ag-theme-alpine {
    --ag-header-foreground-color: white!important;
    --ag-header-background-color: #B85042 !important;
    --ag-header-column-resize-handle-color: #933f34!important;
    --ag-font-size: 15px!important;
    --ag-header-cell-hover-background-color: #d55f4f!important;
}

/* Add custom styles for the detail table */
.ag-theme-alpine .ag-details-grid .ag-header {
    --ag-header-foreground-color: black !important;
    --ag-header-background-color: #e7e8d1 !important; /* Custom color for detail table */
    --ag-header-column-resize-handle-color: #b1b577 !important;
    --ag-header-cell-hover-background-color: #ecede0 !important;
    --ag-font-size: 14px !important;
}



#grid_treat_compare {
    --ag-header-foreground-color: black!important;
    --ag-header-background-color: #ffecb3 !important;
    /* --ag-header-column-separator-display: block;
    --ag-header-column-separator-height: 100%;
    --ag-header-column-separator-width: 2px;
    --ag-header-column-separator-color: black; */
    /* --ag-header-column-resize-handle-color: #933f34!important; */
    --ag-font-size: 15px!important;
    --ag-header-cell-hover-background-color: transparent!important;
}

#modal_treat_compare{
    --ag-header-foreground-color: black!important;
    --ag-header-background-color: #ffc1078a !important;
    --ag-font-size: 15px!important;
    --ag-header-cell-hover-background-color: transparent!important;
}


.center-aligned-group-header:nth-of-type(4) {
    border-right: 1px solid rgb(165, 163, 163); /* Apply separator styling */
}

.absolute-alpine{
    --ag-header-foreground-color: black!important;
    --ag-header-background-color: #ffecb3 !important;
    --ag-background-color: white!important;
    /* --ag-header-column-resize-handle-color: #933f34!important; */
    --ag-font-size: 10px!important;
    /* --ag-header-cell-hover-background-color: orange!important;   */
}


#grid_treat_compare .ag-header-cell.ag-column-first {
    background-color: #45bf45bd;
    color: black;
}

#grid_treat_compare .ag-header-cell:nth-child(2) {
    background-color: white;
    color: black 2px;
}



#grid_treat_compare .ag-header-cell:nth-child(3) {
    background-color: #f1c50d;
    color: black;
}

#grid_treat_compare .ag-header-cell:nth-child(5) {
    border-right: 1px solid rgb(165, 163, 163)
}

.center-aligned-group-header .ag-header-group-cell-label {
    justify-content: center;
    /* border-right: solid 0.8px */
}

.forest_head{
    font-size: 20px;
    border-bottom: solid 0.6px gray;
    height: 50px;
    align-content: center;
    display: grid;
    padding-left: 20px;
}

#modal_forest{
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: grid;
    margin-left: 400px;
}


.skt_modal_simple{
    width: min-content
}

#skt_modal_compare_simple{
    justify-content: center;
    display: grid;
}

/* .modal-content{
    display: grid;
} */


.forest_body{
    height: 330px;
    text-align: center;
    align-items: center;
    display: grid;
    overflow-y: auto;
}

.forest_close{
    border-top: solid 0.7px gray;
    width: 800px;
    text-align: end;
    align-items: center;
    display: grid;
    justify-items: end;
}

#close_forest{
    color: white;
    background-color: #f8f6f6;
    border: solid 0.8px gray;
    border-radius: 8%;
    /* width: 50px; */
    height: 25px;
}


#skt_modal_copareinfo{
    height: 300px;
    width: 350px;
    display: grid;
    margin-left: 400px;
    background-color: #E7E8D1;
}

.skt_info_head{
    height: 50px;
    font-size: 25px;
    border-bottom: solid 0.7px gray;
    align-items: center;
    display: grid;
    padding-left: 20px;
}

.skt_info_body{
    height: 200px;
    text-align: start;
    align-items: start;
    display: grid;
    overflow-y: auto;
    font-size: 15px;
    padding-left: 20px;
}



.skt_info_close{
    border-top: solid 0.7px gray;
    width: 350px;
    text-align: end;
    align-items: center;
    display: grid;
    justify-items: end;
}

.skt_span_info{
    display: block;
    padding-left: 20px;
    white-space: pre;
}


.skt_span_info2{
    display: block;
    /* padding-left: 20px; */
    white-space: pre;
    font-weight: bold;
}


#skt_modal_copare_simple{
    /* height: 300px;
    width: 350px; */
    display: grid;
    /* margin-left: 400px; */
    background-color: #E7E8D1;
}

.skt_info_head_simple{
    height: 50px;
    font-size: 25px;
    border-bottom: solid 0.7px gray;
    /* align-items: center; */
    display: grid;
    justify-content: center;
    padding-left: 20px;
    background-color: #a6d4a6bd;
}
.skt_info_head_title{
    color: black;
    font-weight: bold;
}

.skt_info_body_simple{
    /* height: 200px; */
    text-align: start;
    align-items: start;
    display: grid;
    overflow-y: auto;
    font-size: 15px;
    padding-left: 20px;
    background-color: white;
}



.skt_info_close_simple{
    border-top: solid 0.7px gray;
    text-align: end;
    justify-content: end;
    /* align-items: center; */
    display: grid;
    justify-items: end;
    background-color: #a6d4a6bd
}








#checklist_treat{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#clear-val{
    justify-self: end;
    background-color: rgb(167, 190, 174);
    color: black;
    border: none;
    width: 60px;
}

#base_risk_input{
    background-color: white;
    color: gray;
    display: inline-block;
    height: 30px;
    width: 150px;
    border: solid 1px lightgray;
    justify-self: center;
    text-align: center;
}


.bodytab2{
    display: grid;
}

.sub-button:hover {
    background-color:#A7BEAE!important;
    color: white!important;
}

#profile_row{
    width: 80%;
    justify-content: space-evenly;
    justify-self: center;
    
}

#skt_profile{
    display: grid;
}


.profile_text{
    font-size: x-large;
    font-weight: bold;
    color: aliceblue;
    text-decoration-line: none !important
}

#expert_profile{
    display: grid; 
    justify-items: center;
    background-color: darkcyan;
    width: 20%;
    height: 120%;
    align-content: space-around;
    text-decoration: none;

}

#expert_profile:hover {
    background-color:#A7BEAE!important;
    color: white!important;
}

#nonexpert_profile{
    display: grid; 
    justify-items: center;
    align-content: space-around;
    background-color: chocolate;
    width: 20%;
    height: 120%;
    text-decoration: none;
}

#nonexpert_profile:hover {
    background-color:#A7BEAE!important;
    color: white!important;
}



.medpractice:hover{
    filter: drop-shadow(2px 4px 6px red);
}

#col_nonexpert{
    /* height: 400px; */
    background: #8bc34a40;
    display: grid;
}


.out_abs_col{
    width: 30%;
}

.out_rank_col{
    width: 50%;
}



  /* Here are just some visual styles. 🖌 */
  
  .container {
    display: grid;
    place-items: center;  
    text-align: center;
    height: 3vh
  }
  
  .title {
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 3vw;
    /* text-transform: uppercase; */
  }

.markdown_style{
    color:white;
    /* padding-left:3%;
    padding-right:3%; */
    font-size: medium;
    font-weight: lighter;
    font-family:sans-serif
}

.markdown_style_black{
    color:black;
    padding-left:3%;
    padding-right:3%;
    font-size: medium;
    font-weight: lighter;
    font-family:sans-serif
}

.markdown_style_main{
    color:#5c7780;
    margin-left:auto;
    margin-right:auto;
    display: block;
    text-align: center;
    font-family:sans-serif;
    font-weight:normal;
}

.data__container {
    background-color: #40515e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


.first {margin-bottom: 15px;}

.second {margin-top: 15px;}


@media only screen and (max-width: 600px) {

    .app__content {display: block;}
    .app__menu__img { height: 20px; width: auto; }
    .app__header { display: flex; flex-direction: column;padding-top: 0px;  }
    .app__header__desc { order: 1; text-align: left; }
    .app__header__logo {order: 0;}
    .app__header__title { font-size: 1.5em; padding-top: 11px; }
}

.graph__title {
    color: #fff !important;
    letter-spacing: 0.3rem !important;
    padding: 0px 25px 25px 25px;
    margin-bottom: 0px !important;
    font-size: 10px;
}


.export{
    position: absolute;
    left: 1%;
    font-type: sans-serif;
}


.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  /*border-color: --CLR_BCKGRND; */
}

.tab-content{
    /* background-color: #5c7780; #6a868f; !*#3d515e*! */
    color: #0a0909;
    background-color:  #f8f6f3
    /* #e6e9eb */
    /* padding:5px; */
}



/*div.Select–single>.Select-control .Select-value,*/
.Select-placeholder {
    /*color: --CLR_BCKGRND; */
    /*background: #394046;*/
    #background-image: linear-gradient(#484e55, #3A3F44 60%, #313539);
    left: 0;
    line-height: 20px;
    padding-left: 14px;
    padding-right: 10px;
    padding-top:5px;
    right: 0;
    top: 0px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    align-items: center;
}

/*#graph-layout-dropdown .VirtualizedSelectFocusedOption {*/
/*    background-color: #909898;*/
/*    position: absolute;*/
/*    color: white;*/
/*    padding-bottom:20px;*/
/*    left: 0;*/
/*}*/


#graph-layout-dropdown .Select-value {
    background-color: #808484;
    position: absolute;
    color: white;
    padding-bottom:10px;
    padding-top:10px;
    left: 0;
}

/*.Select-arrow { --accent: #1b58e2; }*/


#node-size-dropdown .Select-value {
    background-color: #808484;
    position: absolute !important;
    color: white;
    padding-bottom:10px !important;
    padding-top:10px !important;
    left: 0 !important;
}

#node-color-dropdown .Select-value {
    background-color: #4c5353;  /*#808484;*/
    position: absolute;
    color: white;
    padding-bottom:10px;
    padding-top:10px;
    left: 0;
}

.tapEdgeData-fig-class {

    /*padding-bottom:10px;*/
    /*padding-top:20px;*/
}


.Select--single>.Select-control .Select-value, .Select-placeholder
{
    /* background: #95a5a6; */
}

.wrapper {
        border: 2px dotted rgb(96, 139, 168);
        width: 500px;
      }
    .box {

        /*display: flex;*/
        flex-wrap: wrap;
        margin:-12px;
      }
      .box>* {
        flex: 1 1 160px;
        margin: 10px;
      }



.selectbox {
-webkit-appearance: none;
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
margin-right: 20px;
color:black;
right:10px;
border:none;
/*border: 1px solid #cccccc;*/
/*background: none  repeat scroll 0 0 #ffffff;*/
background: none;
min-width: 60px;
max-width:250px;
width: auto;

}

.selectbox .Select-arrow { --accent: black;
                            --background-image: linear-gradient(#3d912a, #3A3F44 60%, #313539);
}


.selectbox select {
z-index: 10;
position: relative;
border: none;
background: none;
outline: none;
opacity: 0;
height: 27px;
-webkit-appearance: none;
filter: alpha(opacity=0);
width: 100%;
cursor: pointer;

}


/* 
img:hover {
    background-color: #867270; 
    border-radius: 10px;
    filter: invert();
} */




.switch {
  position: relative;
  display: inline-block;
  width: 3.75em;
  height: 2.125em;
}

#league_table .export{
    position: absolute;
    top: 0px;
    margin-left: 5px;
    margin-bottom: 5px;
    line-height: 1.3;
    padding: 4px 4px 4px 4px;
    vertical-align: middle;
    font-size: 11px;
    font-type: sans-serif;
    font-weight: 900;
    [...]
}


#consistency-table .export{
    position: absolute;
    white-space-collapsing: discard;
    margin-top: -5.7%;
    margin-left: 48%;
    line-height: inherit;
    padding:  10px 4px 0px 4px;
    /*text-align: center;*/
    /*vertical-align: middle;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 10px;
    font-type: sans-serif;
    font-weight: 900;
    justify-content: flex-end;
    display: flex;
    [...]
}

#netsplit_table-container .export{
    position: absolute;
    margin-top: -5.7%;
    margin-left: 68%;
    /*margin-bottom: 5px;*/
    line-height: inherit;
    padding:  10px 4px 0px 4px;
    /*text-align: center;*/
    /*vertical-align: middle;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 10px;
    font-type: sans-serif;
    font-weight: 900;
    justify-content: flex-end;
    display: flex;
    [...]
}


#datatable-upload-container .export{
    position: absolute;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-top: 3px;
    line-height: 1.3;
    padding: 2px 2px 2px 2px;
    vertical-align: middle;
    font-size: 10px;
    font-type: sans-serif;
    font-weight: 800;
    [...]
}

@media screen and (min-width: 0px) {
  html {
    --gap: calc(10px + (40 - 10) * (100vw - 0px) / (1200 - 0));
  }
}

#dd_nclr_input .dropdown-menu {
:not(.dropdown-item)
}


.rc-slider-track {
  background-color: #f39c12;
  /* background-color: #475684; */
  /* border-color: black; */
  /*border: 0.05px solid #010101;*/
}

.rc-slider-handle {
  background-color: #f39c12;
  /* background-color: #475684; */
  border-color: #751226;
      cursor: pointer;

}
.rc-slider-handle:hover {
  border-color: #96dbfa;
}
.rc-slider-handle-active:active {
    border-color: #475684;

}
.rc-slider-tooltip-inner {
  padding: 6px 2px;
  min-width: 24px;
  height: 24px;
  font-size: 11px;
  line-height: 1;
  color: #060505;
  text-align: center;
  text-decoration: none;
  background-color: #e1e0e0;
  border-radius: 6px;
  box-shadow: 0 0 0px #d9d9d9;
}
.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #e1e0e0;
}

.rc-slider-dot-active {
  border-color: #1a5dae;
  border: solid 5px #475684;
  background-color: #475684;
}

.rc-slider-dot {
  position: relative;
  top: -10px;
  width: 0.001px !important;
  height: 1px !important;
  /*border: 0.01px solid #7e95cc;*/
  /*background-color: #7e95cc;*/
  border: none;
  /*background-color: none; */
  cursor: pointer;
  /*border-radius: 100%;*/
  vertical-align: middle;
}


.rc-slider-dot:first-child {
  position: absolute;
  top: -2px;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border: solid 5px #f39c12;
  background-color: #f39c12;
  /* background-color: #475684; */
  
}


.rc-slider-dot:last-child {
  position: absolute;
  top: -2px;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border: solid 5px #475684;
  background-color: #475684;
}

/*.modal-footer {*/
/*        display: block;*/
/*        -webkit-box-pack: inherit;*/
/*        -webkit-justify-content: inherit;*/
/*        -ms-flex-pack: inherit;*/
/*        justify-content: inherit;*/
/*    }*/
    .btn-export {
        float: left;
        /*-webkit-justify-content: left; */
        justify-content: left;
    }

    .btn-export2 {
        float: right;
        -webkit-justify-content: left;
        justify-content: left;
        display: inline-block;
        font-size: 0.9em;

    }

.reset{
    display: inline-block;
    font-size: 1.03em;
    padding: 0wpx 0px 0px 0px;
    margin-left: 4px;
    color: #607383;
    border: var(--CLR_BCKGRND);

}


.dropdown-toggle btn btn-primary {
    background: rgb(219, 211, 50);
}


#modal_saveload{
    max-width: none;
    width: 70%;
    font-size: 16px;
    border: 1px solid gray;
    color: black;
    font-family: sans-serif;
    /* background-color: rgb(215, 219, 218); */
    display: block;
    /* padding-left: 6px; */
}


/* FOR NAVBAR */
@media (min-width:1200px){
    .container,.container-lg,.container-md,.container-sm,
    .container-xl{max-width:1240px; margin-top:1%}}
.row{
    /*display:-ms-flexbox;
    display:flex;*/
     display: inline-flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap; padding-top:5px;
 }

@media (prefers-reduced-motion:reduce){
.custom-control-label::before,
.custom-file-label,.custom-select{transition:none}}

.navbar{display: flex;
        align-items: center;
        margin-left: -10px;
        margin-top: -11px;
        margin-left: -1.5cm;
        /*justify-content: space-between;*/
      /*justify-content: flex-end;*/
}

.navbar .navbar-nav{
            display:flex;
            flex-direction: row !important;   /* what makes links be inline */
            list-style:none;
            float:end;
            /*margin-left:50%*/
}

ul {
  list-style-type: none;

    padding-left: 40px;

    min-width: 100px;
    color:white;
     white-space: nowrap;
  text-align: left;
}

li {
    font-size: 14px;
      /* width: 130px !important; */
    margin-left: 20px;
 }

/*li {*/
/*  width: 130px !important;*/
/*  float: end !important;*/
/*    background-position: 100% .4em;*/
/*    padding-right: .6em;*/
/*    padding-top: .4em;*/
/*    text-align:center;*/
/*    !*text-wrap: avoid;*!*/
/*    !*margin-left: auto !important;*!*/
/*}*/


li a {
  /*display: block !important;*/
  color: white;
  text-align: center;
  padding: 10px 10px;
  /* padding-top: .4em; */
  text-decoration: none;
}

.child {
    /* display: flex; */
    flex-flow: row nowrap;
    flex-grow: 0;
    justify-content: flex-start;
    /*align-items: stretch;*/
}

.child.child-right {
    flex-grow: 1;
    justify-content: center;
}


@media (min-width:962px){
    .navbar-expand-lg .navbar-nav{-ms-flex-direction:row; flex-direction:row;}
    .navbar-expand-lg .navbar-nav .nav-link{padding-right:.8rem; float:right;width:100px;
                                            padding-left:.8rem;
        /*align-items:right !important*/
    }

    .navbar-expand-lg .navbar-collapse{
                                        /*display:-ms-flexbox!important;*/
                                        /*display:flex!important;*/
                                        -ms-flex-preferred-size:auto;flex-basis:auto;}
    .navbar-expand-lg .navbar-toggler{display:none}}

/* NAVBAR color */
/*@keyframes*/
/*button.bg-light:hover{background-color:#dae0e5!important}*/
/*.bg-dark{background-color: var(--CLR_BCKGRND) !important}  a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus*/
/*var(--CLR_BCKGRND)*/
/* #36726e color green as nodes */

/*.html2canvas-container { width: 3000px !important; height: 3000px !important; }*/


/*        SCROLLBAR    */

/*.scrollbar*/
/*{*/
/*  margin-left: 30px;*/
/*  float: left;*/
/*  height: 300px;*/
/*  width: 65px;*/
/*  background: #F5F5F5;*/
/*  overflow-y: scroll;*/
/*  margin-bottom: 25px;*/
/*}*/

/*.force-overflow*/
/*{*/
/*  min-height: 450px;*/
/*}*/

/*#wrapper*/
/*{*/
/*  text-align: center;*/
/*  width: 500px;*/
/*  margin: auto;*/
/*}*/


/*!**/
/* *  STYLE 2*/
/* *!*/



/*.datatable-upload-container_row::-webkit-scrollbar-track*/
/*{*/
/*  -webkit-box-shadow: inset 0 0 6px rgba(184, 21, 21, 0.3)!important;*/
/*  border-radius: 10px!important;*/
/*  background-color: #db5050!important;*/
/*}*/

/*.datatable-upload-container__row::-webkit-scrollbar*/
/*{*/
/*  width: 12px!important;*/
/*  background-color: #895252!important;*/
/*}*/

/*.datatable-upload-container__row::-webkit-scrollbar-thumb*/
/*{*/
/*  border-radius: 10px!important;*/
/*  -webkit-box-shadow: inset 0 0 6px rgb(20, 96, 242)!important;*/
/*  background-color: #D62929!important;*/
/*}*/

#overall_infor{
    display: none;
    color: black;
    margin-top: -2px;
    margin-left: 550px;
    position: absolute;
    z-index: 1000;
    font-size: small;
    text-align: justify;
    border: 1px solid rgb(92, 119, 128);
    background-color: white;
    width: 200px;
    height: 200px;
}

#info_icon:hover #overall_infor {
    display: block;
}

#slider-container {
    position: relative;
}

#query-icon:hover #slider-instruction {
    display: block;
}

#slider-instruction {
    display: none;
    /* margin-top: 20px; */
    position: absolute;
    top: 45px;
    /* right: 18px; */
    border: 1px solid black;
    padding: 10px 10px;
    z-index: 1000;
    background-color: rgb(26, 36, 43);
    color: white;
    width: 270px;
    font-size: small;
    text-align: justify;
}

#query-icon{
    margin-top: -43px;
    margin-left: -15px;
    width: 16px;
}


#queryicon-cinima:hover #cinema-instruction {
    display: block;
}

#cinema-instruction {
    display: none;
    margin-top: 10px;
    position: absolute;
    left: 18px;
    border: 1px solid black;
    padding: 10px 10px;
    z-index: 1000;
    background-color: rgb(26, 36, 43);
    color: white;
    width: 255px;
    font-size: small;
    text-align: justify;
}

#queryicon-cinima{
    position: absolute;
    margin-left: 30px;
    z-index: 1000;
    width: 16px;
}





#dropdowns-DIV {
    position: relative;
}

#queryicon-outcome2:hover #outcome2-instruction {
    display: block;
}

#queryicon-outcome2 {
    margin-top: 5px;
    position: absolute;
    top: 260px;
    left: 355px;
    z-index: 1000;
    width: 16px;
}
#outcome2-instruction {
    display: none;
    margin-top: 5px;
    position: absolute;
    top: 15px;
    padding: 5px 5px;
    z-index: 1000;
    color: white;
    width: 135px;
    font-size: small;
    text-align: justify;
    background-color: #454e4e;
}




#queryicon-dataformat:hover #dataformat-instruction {
    display: block;
}

#dataformat-instruction {
    display: none;
    position: absolute;
    top: -30px;
    left: 20px;
    padding: 8px 8px;
    z-index: 1000;
    color: white;
    width: 220px;
    font-size: small;
    text-align: left;
    background-color: #454e4e;
}

#queryicon-dataformat{
    margin-top: 2px;
    position: absolute;
    top: 110px;
    left: 220px;
    z-index: 1000;
    width: 16px;
}


#queryicon-studlb:hover #studlb-instruction {
    display: block;
}

#studlb-instruction {
    display: none;
    position: absolute;
    top: 15px;
    left: 20px;
    padding: 8px 8px;
    z-index: 1000;
    color: white;
    width: 300px;
    font-size: small;
    text-align: left;
    background-color: #454e4e;
}

#queryicon-studlb{
    margin-top: 2px;
    position: absolute;
    top: 425px;
    left: 97px;
    z-index: 1000;
    width: 16px;
}


#queryicon-year:hover #year-instruction {
    display: block;
}

#year-instruction {
    display: none;
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 1000px;
    color: white;
    width: 250px;
    font-size: small;
    text-align: left;
    padding: 8px 8px;
    background-color: #454e4e;
}

#queryicon-year {
    margin-top: 2px;
    position: absolute;
    top: 536px;
    left: 120px;
    z-index: 1000px;
    width: 16px;
}

#queryicon-rob:hover #rob-instruction {
    display: block;
}

#rob-instruction {
    display: none;
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 1000px;
    color: white;
    width: 280px;
    font-size: small;
    padding: 8px 8px;
    text-align: left;
    background-color: #454e4e;
}

#queryicon-rob {
    margin-top: 2px;
    position: absolute;
    top: 499px;
    left: 125px;
    z-index: 1000px;
    width: 16px;
}



#queryicon-forest:hover #forest-instruction {
    display: block;
}

#forest-instruction {
    display: none;
    position: absolute;
    left: 18px;
    border: 1px solid black;
    padding: 10px 10px;
    z-index: 1000;
    background-color: rgb(26, 36, 43);
    color: white;
    width: 255px;
    font-size: small;
    text-align: justify;
}

#queryicon-forest{
    position: relative;
}


.tab_row_all{
    width: -webkit-fill-available;
    display: flow;
}

.slect-out-dropdown{
    display: inline-grid;
    width: 300px;
}

.slect-out-row{
    text-align: center;
    justify-self: end;
}

.pass_content{
    text-align: center;
    align-items: center;
    width: 200px;
}

.upload_row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: auto;
    justify-self: center;
}

/* .upload_instrucol{
    display: grid;
    align-items: center;
    align-self: center;
    margin: 20px;
}

.upload_instuspan{
    border-radius: 5px;
    border-style: dashed;
    border-width: 1px;
    color: #c87777;
    display: grid;
    margin-left: 10px;
    text-align: start;
    width: 450px;
    white-space: pre-wrap;
} */

.upload_instrucol{
    display: grid;
    align-items: center;
    align-self: center;
    border-radius: 5px;
    border-style: dashed;
    border-width: 1px;
    color: #c87777;
    display: grid;
    margin-left: 20px;
    text-align: start;
    width: 450px;
    white-space: pre-wrap;
    justify-content: center;
}
.upload_instuspan{
    display: block;
    width: 400px;
}

#modal_transitivity{
    /* display: grid; */
    justify-content: center;
    margin-top: 10%;
    /* width: 1000px */
}

.trans_conten{
    width: 170%;
    height: 70%;
}

#main_page{
    width: -webkit-fill-available;
}


#query-title{
    /* margin-left: 360px; */
    width: 3%;
    background-color: #A7BEAE;
}


#query-title:hover #title-instruction {
    display: block;
}

#title-instruction{
    display: none;
    margin-top: -27px;
    position: absolute;
    /* left: 18px;
    z-index: 1000;
    color: white; */
    /* width: 255px; */
    background-color: #faead7;
    color: #B85042;
    padding: 5px 5px;
    font-size: small;
    font-weight: bold;
    text-align: justify;
    /* border: 1px solid black; */
}



#query-PICOS{
    margin-left: 7px;
    background-color: unset;
}

#query-PICOS:hover #PICOS-instruction {
    display: block;
}

#PICOS-instruction{
    display: none;
    margin-top: -27px;
    position: absolute;
    background-color: #faead7;
    color: #B85042;
    padding: 5px 5px;
    font-size: small;
    font-weight: bold;
    text-align: justify;
}


#query-diagram{
    margin-left: 7px;
    background-color: unset;
}

#query-diagram:hover #diagram-instruction {
    display: block;
}

#diagram-instruction{
    display: none;
    margin-top: -35px;
    margin-left: 25px;
    position: absolute;
    background-color: #e7e8d1;
    width: 270px;
    color: #B85042;
    padding: 7px 7px 7px 7px;
    font-size: small;
    font-weight: bold;
    text-align: justify;
}



#query-logscale{
    background-color: unset;
    display: inline-block;
    margin-right: -10px;
}

#query-logscale:hover #logscale-instruction {
    display: block;
}

#logscale-instruction {
    display: none;
    position: absolute;
    background-color: #e7e8d1;
    width: 270px;
    color: #B85042;
    padding: 7px 7px 7px 7px;
    font-size: small;
    font-weight: bold;
    text-align: justify;
    margin-top: 24px;
    margin-left: 20px;
    z-index: 10;
}


#query-abscale{
    background-color: unset;
    display: inline-block;
    margin-right: -10px;
}

#query-abscale:hover #abscale-instruction {
    display: block;
}

#abscale-instruction {
    display: none;
    position: absolute;
    background-color: #e7e8d1;
    width: 270px;
    color: #B85042;
    padding: 7px 7px 7px 7px;
    font-size: small;
    font-weight: bold;
    text-align: justify;
    margin-top: -55px;
    margin-left: -250px;
    z-index: 10;
}

#sktdropdown-out{
    height: 30px;
    display: grid;
    width: 150px;
    justify-content: start;
    justify-self: start;
}

.sktdropdown-out{
    width: 150px;
}

#outselect_row{
    display: grid;
    justify-self: center;
    width: 90%;
}
/* .fade yada-active-message show popover bs-popover-start{
    background-color: white;
    border: 1px solid grey;
    border-radius: 25px;
    width: 300px;
    height: 150px;
    justify-content: center;
    display: grid;
    align-content: space-evenly;
} */

.yada-active-message {
    opacity: 1;
    background-color: white !important;
    border: 1px solid grey !important;
    border-radius: 25px !important;
    width: 300px !important;
    height: 150px !important;
    justify-content: center !important;
    display: grid !important;
    align-content: space-evenly !important;
}

/* .data popover-body{
    height: 130px;
    display: grid;
    align-content: space-evenly;
} */

.data_message {
    height: 150px !important;
    display: grid !important
}

.yada-hover-message {
    background-color: white !important;
    border: 1px solid grey !important;
    border-radius: 25px !important;
    width: 300px !important;
    height: 150px !important;
    justify-content: center !important;
    display: grid !important;
    align-content:center !important;
    white-space: pre-wrap !important;
}

.popover-header{
display: grid;
align-items: center;
border-bottom: 1px solid grey;
color: rgb(128, 128, 1);
font-weight: bold;
margin: 10px
}

.popover-body{
    margin: 10px
    }

/* .yada-play-script {
 background-color: beige !important;
 padding: 0px;
 width: 150px;
} */

.data_message .btn-primary{
    background-color: beige !important;
    padding: 0px;
    width: 150px; 
}

.data_message .btn-primary:hover{
    background-color: #95a5a6 !important;
    /* padding: 0px;
    width: 150px;  */
}

.yada-info.offcanvas-start,  .yada-info.offcanvas-end {
    width: 200px;
}

.yada-info.offcanvas-top,  .yada-info.offcanvas-bottom {
    height: fit-content;
    max-height: 50vh;
}

.yada-info .offcanvas-header {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 0;
    padding: ""
}

.yada-info{
    flex-direction: column-reverse;
    visibility: visible;
    display: flex;
    position: absolute;
    top: 100vh;
    left: 25%;
    background-color: white;
    max-width: 800px;
    width: 100vh;
    border-radius: 25px;
    border: 1px solid #b85042;
}

.offcanvas-header{
    padding: 10px;
    /* display: grid; */
    display: inline;
}

.offcanvas-body{
    height: 300px;
    padding: 10px;
    border-bottom: 1px solid;
    display: grid;
}

/* .offcanvas-title{
    display: inline !important;
} */


.yada-info .btn-primary{
    background-color: beige !important;
    padding: 0px;
    width: 150px; 
}

.yada-info .btn-primary:hover{
    background-color: #95a5a6 !important;
    /* padding: 0px;
    width: 150px;  */
}
.yada-info .btn-close{
    display: none;
}

/* .skt_info_head .btn-close{
    display: none;
} */

.modal-header .btn-close{
    display: none;
}

#scroll-container {
    overflow: hidden;
    width: 30%;
  }
  
  #scroll-text {
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    
    -moz-animation: my-animation 25s linear infinite;
    -webkit-animation: my-animation 25s linear infinite;
    animation: my-animation 12s linear infinite;
    white-space: nowrap;
    font-size: large;
    /* font-weight: bold; */
    color:chartreuse
  }
  
  /* for Firefox */
  @-moz-keyframes my-animation {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-100%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(-100%); }
  }
  
  @keyframes my-animation {
    from {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }