/* MCDU Style */

:root {
  --color-grey: #c2c0c0;
  --color-darkgrey: #808080;
  --color-black: #000000;
  --color-lightblack: #353535; /* hover black background*/
  --color-orange: #ffa500;
  --color-green: #08af32;
  --color-blue: #1249ee;
  --color-red: #08af32;
}

html {
    height: 100%;
}

body {
    background: #e6f2ff linear-gradient(to left, #2d4855 0%, #484e68, #34404d);
    height: 100%;
    padding: 0;
    margin: auto 1px;
}

h2{
    color: var(--color-grey);
    margin: auto 10px;
}

/* MCDU */

.mcdu{
    min-width: 400px;
    max-width: 800px;
    font-family: 'Courier New', Courier, monospace;
    border: 6px solid rgb(116, 122, 158);
    background-color: #000000;
    padding: 15px 5px;
    margin: 2px;
    border-radius: 10px;

}

.m-header{
    display: flex;
    justify-content: space-between;
    /* text-align: center; */
    padding-bottom: 5px;
}

.m-header div{
    text-wrap: nowrap;
    font-weight: bold;
    text-align: center;
    font-size: large;
    color: var(--color-grey);

}

#header-name{
    width: 100%;
}

#next-source{
    cursor: pointer;
    color: var(--color-grey);
    /* float: left; */
    margin-left: auto;
}
#next-source:hover{
    background-color: var(--color-lightblack);
}

#head-return{
    cursor: pointer;
    color: var(--color-grey);
    /* float: left; */
    margin-right: auto;
}
#head-return:hover{
    background-color: #353535;
}

.footer{
    display: flex;
    justify-content: space-between;
    /* text-align: center; */
    padding-bottom: 5px;
}

#return{
    cursor: pointer;
    color: var(--color-grey);
    padding: 2px;
    font-weight: bold;
    margin-right: auto;
}
#return:hover{
    background-color: var(--color-lightblack);
}

#continue{
    cursor: pointer;
    color: var(--color-grey);
    padding: 2px;
    font-weight: bold;
    margin-left: auto;
}
#continue:hover{
    background-color: var(--color-lightblack);
}

#not_avail{
    color: var(--color-grey);
    font-size: x-large;
    font-weight: bold;
    margin: 30px auto;
    display: block;
    text-align: center;
}

.note{
    padding: 10px;
    color: var(--color-orange);
    text-transform: uppercase;

}



.m-table{
    width: 100%;
    color: var(--color-grey);
    font-weight: bold;
    background-color: var(--color-black);
    border: none;
}
.m-table  td{
    border: none;
    background-color: var(--color-black);
    font-size: medium;
    text-align: center;
}
.databits-table{
    overflow: auto;
}

#m-label{
    color: var(--color-orange);
}
#m-label2{
    font-size: x-large;
    text-wrap: nowrap;
    color: var(--color-green);
    padding: 0px;
    margin: 0px;
}
#m-label2 td{
    padding: 0px;
    margin: 0px;
}
#m-label-info td{
    text-wrap: nowrap;
    color: rgb(87, 88, 88);
    padding: 0px;
    margin: 0px;
}
.m-databits{
    color: var(--color-blue);
}
.m-bit-space{
    /* width: 100%; */
    min-width: 30px;
    /* max-width: 80px; */
}
.m-bit{
    font-size: x-large;
}
.m-bit-used{
    text-align: center;
    padding: 2px 6px 0px 6px;
    margin: 0px;
    /* border: 0.5px dotted rgb(0, 77, 0); */
    cursor: pointer;
}
.m-bit-unused{
    color: var(--color-darkgrey);
    text-align: center;
    padding: 2px 6px 0px 6px;
    margin: 0px;
    /* border: 0.5px dotted rgb(0, 77, 0); */
    cursor: pointer;
}
.m-bit-info{
    text-align: center;
    padding: 0px 0px;
    margin: 0px;
    /* border: 0.5px dotted rgb(0, 77, 0); */
    /* cursor: pointer; */
}
.m-bit-info span{
    font-size: x-small;
    color: var(--color-darkgrey);
    text-align: center;
    padding: 0px 6px;
}
.m-bit:hover{
    background-color: var(--color-lightblack);
}
#m-response{
    padding-top: 8px;
    text-align: center;
    color: var(--color-black);
}
.parameter{
    margin: 5px auto;
    text-wrap: nowrap;
    color: var(--color-green);
}
#note{
    margin: 5px auto;
    text-wrap: nowrap;
    color: var(--color-orange);
}
.dis_value{
    font-weight: bold;
    color: var(--color-green);
}
.xmsn{
    font-size: small;
    margin: 5px auto;
    text-wrap: nowrap;
    color: var(--color-green);
}


/* Select configuration style */
.configuration{
    cursor: pointer;
    color: var(--color-grey);
    padding-bottom: 10px;
}
.configuration:hover{
    background-color: var(--color-lightblack);
}
.c-name{
    font-weight: bold;
    font-size: large;
    color: var(--color-grey);
}
.c-note{
    padding: 5px;
    font-size: small;
}

.c-name span{
    color: var(--color-blue);
}

.c-config{
    color:var(--color-orange)
}

/* List style */
.list-box{
    overflow: auto;
}
.list{
    /* text-wrap: nowrap; */
    border-bottom: 1px dotted var(--color-lightblack);
    cursor: pointer;
    padding: 5px 2px;
    color: var(--color-grey);
}
.list:hover{
    background: var(--color-lightblack);
}
.l-name{
    font-weight: bold;
    font-size: large;
}
.l-ch{
    /* padding-left: 10px; */
    font-size: small;
}
.l-label{
    color: var(--color-green);
}
.l-param{
    font-weight: bold;
}
.l-code{
    color: var(--color-green);
    font-size: small;
}
.l-rate{
    color: var(--color-orange);
}
.l-note{
    color: var(--color-orange);
    font-size: small;
}