*, ::before, ::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: monospace;
}

*:focus {
    outline: none;
}

:root {
    --BLACK: #1d1f21;
    --WHITE: #c5c8c6;
    --DARK_GREY: #373b41;
    --MED_GREY: #373b41;
    --LIGHT_GREY: #707880;
    --RED: #a54242;
    --LIGHT_RED: #cc6666;
    --GREEN: #8c9440;
    --LIGHT_GREEN: #b5bd68;
    --ORANGE: #de935f;
    --YELLOW: #f0c674;
    --BLUE: #5f819d;
    --LIGHT_BLUE: #81a2be;
    --MAGENTA: #85678f;
    --LIGHT_MAGENTA: #b294bb;
    --TEAL: #5e8d87;
    --LIGHT_TEAL: #8abeb7;

    --HOVER: var(--GREEN);
    --FORGROUND: var(--WHITE);
    --BACKGROUND: var(--BLACK);
    --BACKGROUND-OPAC: rgba(29, 31, 33, 0.5);
    --BUTTON: var(--WHITE);
    --ACTIVE: var(--LIGHT_BLUE);

}

.fill-teal{
    fill: var(--TEAL);
}

.fill-blue{
    fill: var(--BLUE);
}

.fill-yellow{
    fill: var(--YELLOW);
}

.fill-green{
    fill: var(--GREEN);
}

.fill-magenta{
    fill: var(--MAGENTA);
}

.fill-red{
    fill: var(--RED);
}

.fill-orange{
    fill: var(--ORANGE);
}

.fill-forground{
    fill: var(--FORGROUND);
}

.fill-background{
    fill: var(--BACKGROUND);
}

.bg-white{
    background-color: var(--WHITE);
    color: var(--BLACK);
}

.bg-dark-grey{background-color: var(--DARK_GREY);}

.bg-med-grey{background-color: var(--MED_GREY);}

.bg-light-grey{
    background-color: var(--LIGHT_GREY);
    color: var(--BLACK);
}

.bg-red{background-color: var(--RED);}

.bg-light-red{
    background-color: var(--LIGHT_RED);
    color: var(--BLACK);
}

.bg-green{background-color: var(--GREEN);}

.bg-light-green{
    background-color: var(--LIGHT_GREEN);
    color: var(--BLACK);
}

.bg-orange{
    background-color: var(--ORANGE);
    color: var(--BLACK);
}

.bg-yellow{
    background-color: var(--YELLOW);
    color: var(--BLACK);
}

.bg-blue{background-color: var(--BLUE);}

.bg-light-blue{
    background-color: var(--LIGHT_BLUE);
    color: var(--BLACK);
}

.bg-magenta{background-color: var(--MAGENTA);}

.bg-light-magenta{
    background-color: var(--LIGHT_MAGENTA);
    color: var(--BLACK);
}

.bg-teal{background-color: var(--TEAL);}

.bg-light-teal{
    background-color: var(--LIGHT_TEAL);
    color: var(--BLACK);
}

.button{
    cursor: pointer ;
}

.button:hover{
    scale: 1.2;
}

#data-input{
    opacity: 0;
    position: absolute;
    z-index: -1;
}

body{
    background-color: var(--BACKGROUND);
    width: 100%;
    height: 100vh;
    padding: 10px;
    color: var(--BLACK);

}

#main-holder{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#top-bar{
    width: 100%;
    max-height: 4em;
    display: flex;
    flex-direction: row;
}

#top-bar label{
    color: var(--FORGROUND);
    line-height: 4em;
    padding-left: 2em;
}

#main-title{
    color: var(--FORGROUND);
    background-color: var(--BACKGROUND);
    font-size: 3em;
    height:100%;
    border: none;
    border-bottom: 2px solid var(--FORGROUND);
}

.date-picker{
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    border: none;
}

.flex-spacer{
    flex: 1;
}

#middle-holder{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1 1 1px;
    overflow: auto;
}

/*========================= calendar =========================*/

#calendar-holder{
    position: relative;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    width: 70em;
    min-width: 70em;
    height: 100%;
}

#calendar{
    width:95%;
    overflow-y: scroll;
    padding: 10px;
}

#calendar-days-holder{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.calendar-row{
    display: flex;
    flex-direction: row;
    /*width: 70em;*/
}

.calendar-head-field{
    height: 2.2em;
    flex: 1;
    font-size: 2em;
    color: var(--FORGROUND);
    text-align: center;
    border: 1px var(--FORGROUND) solid;
    line-height: 2.2em;
}

.calendar-day-empty{
    height: 10em;
    flex:1;
    color: var(--FORGROUND);
    border: 1px var(--BACKGROUND) solid;
    line-height: 10em;
}

.calendar-day{
    position: relative;
    height: 15em;
    flex:1;
    color: var(--FORGROUND);
    border: 1px var(--FORGROUND) solid;
    line-height: 10em;
    cursor: pointer;
    background-color: var(--BACKGROUND);
}

.calendar-day:hover{
    transform: scale(1.1);
    z-index: 999;
}

.calendar-number{
    position: absolute;
    color: var(--FORGROUND);
    font-size: 2em;
    top: 3px;
    left: 3px;
    height: 1em;
    line-height: 1em;
}

.calendar-month{
    position: absolute;
    color: var(--FORGROUND);
    font-size: 1.5em;
    top: 3px;
    right: 3px;
    height: 1em;
    line-height: 1em;
}


.plane{
    position: absolute;
    bottom: .3em;
    left: .3em;
    height: 2em;
    width: 2em;
}

.plane svg{
    width: 100%;
    height: 100%;
    display: block;
}

.hotel{
    position: absolute;
    bottom: .3em;
    left: 2.3em;
    height: 2em;
    width: 2em;
}

.hotel svg{
    width: 100%;
    height: 100%;
    display: block;
}

.car{
    position: absolute;
    bottom: .3em;
    left: 4.3em;
    height: 2em;
    width: 2em;
}

.car svg{
    width: 100%;
    height: 100%;
    display: block;
}

.info{
    position: absolute;
    bottom: .3em;
    left: 6.3em;
    height: 2em;
    width: 2em;
}

.info svg{
    width: 100%;
    height: 100%;
    display: block;
}

.line{
    position: absolute;
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-weight: bolder;
    font-size: 1.3rem;
    text-wrap: nowrap;
}

.line p{
    position: absolute;
    /*z-index: 999;*/
    overflow: visible;
}

.line-start{
    right: 0;
    width: 48%;
    border-bottom-left-radius: .5rem;
    border-top-left-radius: .5rem;
}

.line-end{
    left: 0;
    width: 48%;
    border-bottom-right-radius: .5rem;
    border-top-right-radius: .5rem;
}

.line-single{
    border-radius: .5rem;
}

.line-pos-1{top: 2.1rem;}

.line-pos-2{top: 3.6rem;}

.line-pos-3{top: 5.1rem;}

.line-pos-4{top: 6.6rem;}

.line-pos-5{top: 8.1rem;}

.line-pos-6{top: 9.6rem;}

.line-pos-7{top: 11.1rem;}

/*========================= day view =========================*/

#day-view-holder{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--BACKGROUND-OPAC);
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#day-view{
    width: 600px;
    height: 700px;
    /*border: 2px var(--FORGROUND) solid;*/
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

#day-view-title-bar{
    display: flex;
    flex-direction: row;
    /*height: 3em;*/
    width: 100%;
    background-color: var(--FORGROUND);
    color: var(--BACKGROUND);
}

#day-view-title{
    height: 100%;
    line-height: 3rem;
    font-size: 2em;
    flex:1;
    padding-left: .3em;
}

#day-view-exit-button svg{
    height: 100%;
    width: 100%;
    fill: var(--BACKGROUND);
}
#day-view-exit-button svg:hover{
    scale: 1.2;
}


#day-view-data-holder{
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: .5em;
}

#day-view-list-holder{
    width: 100%;
}

.day-view-list-element{
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
}

.day-view-list-element:hover{
    transform: translateX(1em);
}

.day-view-list-element hr{
    margin-top: 2em;
    margin-bottom: 2em;
}

.day-view-list-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 1em;

}

.day-view-list-dates{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 1em;
}

.day-view-list-name{
    height: 100%;
    flex:1;
    /*line-height: 4rem;*/
    font-size: 2em;
    padding-left: 1rem;
    padding-right: 1rem;
}

.day-view-list-date{
    height: 100%;
    line-height: 2rem;
    font-size: 1.5em;
    padding-left: .2rem;
    padding-right: 1rem;
}

.day-view-list-price{
    font-size: 1.3em;
    margin-bottom: 1em;
}

#info-block{
    width: 100%;
    height: 100%;
    list-style-position: inside;
}


/*========================= Markdown =========================*/

.markdown-body{
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    padding: 1em;
    font-size: 1.2em;
    line-height: 1.5em;
}

.markdown-body ul {
    margin-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.markdown-body ul > li {
    margin-left: 10px;
}

.markdown-body ol {
    margin-left: 3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.markdown-body table, th, td{
    border: 1px solid var(--FORGROUND);
    border-collapse: collapse;
}

.markdown-body td, th {
    padding-left: 10px;
    padding-right: 10px;

}

.markdown-body th{
    background-color: var(--FORGROUND);
    color: var(--BACKGROUND);
    border: 1px solid var(--BACKGROUND);
}

.markdown-body h1 {
    margin-top: 0.8em;
    margin-bottom: 0.5em;
}

.markdown-body h2 {
    margin-top: 0.8em;
    margin-bottom: 0.5em;
}

.markdown-body h3 {
    margin-top: 0.8em;
    margin-bottom: 0.4em;
}

/*========================= edit =========================*/


#edit-holder{
    position: relative;
}

.edit-list-list-holder{
    width: 100%;
    height:100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: scroll;
}

.edit-list-holder{
    width: 30rem;
    height: 30rem;
    margin:1rem;
    border: 2px var(--FORGROUND) solid;
    display: flex;
    flex-direction: column;
    color: var(--FORGROUND);
}

.edit-list-title{
    width: 100%;
    /*height: 4rem;*/
    display: flex;
    flex-direction: row;
    font-size: 3em;
    line-height: 4rem;
    color: var(--FORGROUND);
    justify-content: space-between;
    padding: 0.2rem;
}

.edit-list-list{
    width: 100%;
    flex:1;
    overflow-y: scroll;
    overflow-x: hidden;
}

.edit-list-item{
    width: 100%;
    padding: 1em;
    cursor: pointer;
}

.edit-list-item:hover {
    transform: translate(1em);
}

.edit-list-item-title{
    font-size: 2em;
}

.edit-list-item-date{
    font-size: 1.3em;
}

.edit-list-item hr{
    margin-top: 1em;
    color: var(--FORGROUND);
}


.white-boarder{
    border: 2px solid var(--FORGROUND);
}

.highlight-border-red{
    border: 2px solid var(--RED);
}

.highlight-border-green{
    border: 3px solid var(--GREEN);
}

.highlight-green {
    background-color: var(--LIGHT_GREEN);
    color: var(--BLACK);
}

.highlight-red {
    background-color: var(--LIGHT_RED);
    color: var(--BLACK);
}


/*========================= edit view =========================*/


#edit-view-holder{

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--BACKGROUND-OPAC);
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit-view-box{
    width: 600px;
    height: 700px;
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    /*z-index: 9999;*/
    display: flex;
    flex-direction: column;
    border: 2px solid var(--FORGROUND);
    line-height: 3rem;
}

.edit-view-title-bar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*height: 3em;*/
    width: 100%;
    background-color: var(--FORGROUND);
    color: var(--BACKGROUND);
    font-size: 2em;
}

#edit-view-exit-button{
    cursor: pointer;
}

#edit-view-exit-button svg{
    fill: var(--BACKGROUND);
}

#edit-view-exit-button svg:hover{
    scale: 1.2;
}

.edit-view-form{
    margin:1em;
}

.edit-view-date{
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    border: none;
    font-size: 2em;
}

.edit-view-form label{
    font-size: 1.5em;
    color: var(--LIGHT_GREY);
}

#total-travel-time{
    color: var(--FORGROUND);
}

.edit-view-text-input{
    font-size: 2em;
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid var(--FORGROUND);
}

.edit-view-text{
    font-size: 1.5em;
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    box-sizing: border-box;
    border: none;
}

.edit-view-coord-input{
    font-size: 2em;
    width: 100%;
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid var(--FORGROUND);
}

.md-button-holder{
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    height: 3.2em;
    margin-left: 2rem;
}

.md-button{
    height: 100%;
    font-size: 1.5em;
    padding: .5em;
    margin: .1em;
    line-height: 2rem;
    cursor: pointer;
    border-top: 2px solid var(--FORGROUND);
    border-left: 2px solid var(--FORGROUND);
    border-right: 2px solid var(--FORGROUND);
    border-radius: 1em 1em 0 0;
    transform: translateY(2px);
}

.md-button-selected{
    border-bottom: 5px solid var(--BACKGROUND);
    z-index: 999;

}

.md-text-area{
    /*width: 100%;*/
    flex: 1;
    resize: none;
    border: 2px solid var(--FORGROUND);
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    padding: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    z-index: 99;
}

#edit-view-md-preview{
    display: none;
    justify-content: start;
    overflow-y: scroll;
}

#edit-view-buttons-holder{
    width: 100%;
    padding: 1rem;
}

#edit-view-buttons-holder span{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#edit-view-line-color{
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
}

#edit-view-line-row{
    background-color: var(--BACKGROUND);
    color: var(--FORGROUND);
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
}

/*========================= checklists =========================*/

#check-list-screen-holder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--BACKGROUND-OPAC);
    color: var(--FORGROUND);
    visibility: hidden;
    z-index: 999;
}

#check-list-screen{
    width: 95%;
    height: 95%;
    background-color: var(--BACKGROUND);
    border: 2px solid var(--FORGROUND);
    display: flex;
    flex-direction: column;
}

#check-list-title-bar{
    width: 100%;
    display: flex;
    flex-direction: row;
    font-size: 2rem;
    padding: .5em;
    line-height: 4rem;
}

#check-list-list-holder{
    width: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 1rem;
}

.check-list-list{
    width: 30rem;
    min-height: 30rem;
    align-self: flex-start;
    background-color: var(--BACKGROUND);
    border: 2px solid var(--FORGROUND);
    display: flex;
    flex-direction: column;
    margin: .5rem;
}

.check-list-list-title-bar{
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: .5rem;
}

.check-list-list-title{
    font-size: 1.5em;
    color: var(--FORGROUND);
    background-color: var(--BACKGROUND);
    border: none;
    border-bottom: 2px solid var(--FORGROUND);
    flex:1;
}

.check-list-list-item-holder{
    width: 100%;
    flex:1;
    padding: .5rem;
}

.check-list-item{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    margin-bottom: .5rem;
}

.check-list-item:hover{
   background-color: var(--DARK_GREY);
}

.check-list-item:hover textarea{
    background-color: var(--DARK_GREY);
}

.check-list-item-checkbox{
    margin-right: .5rem;
    margin-top: .3rem;
    cursor: pointer;
}

.check-list-item-name{
    font-size: 1.5em;
    color: var(--FORGROUND);
    background-color: var(--BACKGROUND);
    border: none;
    flex:1;
    resize: none;
}

.check-list-item-close svg{
    width: 2rem;
    height: 2rem;
}

.check-list-add-item-input{
    margin-left: 2rem;
}

/*========================= price screen =========================*/

#price-screen-holder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--BACKGROUND-OPAC);
    color: var(--FORGROUND);
    visibility: hidden;
    z-index: 999;
}

#price-screen{
    width: 95%;
    height: 95%;
    background-color: var(--BACKGROUND);
    border: 2px solid var(--FORGROUND);
    display: flex;
    flex-direction: column;
}

#price-title-bar{
    width: 100%;
    display: flex;
    flex-direction: row;
    font-size: 2rem;
    padding: .5em;
    line-height: 4rem;
}

#price-list-list-holder{
    width: 100%;
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 1rem;
}

#price-table{
    margin: 1em;
    font-size: 2rem;
    border-collapse: collapse;
}

#price-table td{
    border: none;
    padding-left: 1rem;
    padding-right: 1rem;
    vertical-align: middle;
}

#price-table .number{
    text-align: right;
    padding-right: 0;
}

#price-table svg{
    height: 2.8rem;
    width: 2.8rem;
}

.topCell{
    padding-top: 1rem;
}

.underline{
    border-bottom: 2px var(--FORGROUND) solid;
}
.underline td{
    margin-bottom: 2rem;
}

#price-table tr:hover{
    color: var(--ACTIVE);
}

/*========================= move trip screen =========================*/

#move-trip-holder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--BACKGROUND-OPAC);
    color: var(--FORGROUND);
    visibility: hidden;
    z-index: 999;
}

#move-trip-screen{
    width: 60rem;
    height: 30rem;
    background-color: var(--BACKGROUND);
    border: 2px solid var(--FORGROUND);
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

#move-trip-title-bar{
    width: 100%;
    display: flex;
    flex-direction: row;
    font-size: 2rem;
    padding: .5em;
    line-height: 4rem;
}

#move-trip-main-holder{
    width: 100%;
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 1rem;
}

#move-trip-main-holder div{
    font-size: 2rem;
    padding-bottom: 2rem;
    width: 100%;
}

#move-trip-main-holder input{
    font-size: 2rem;
}

#move-trip-update-button{
    background-color: var(--GREEN);
    cursor: pointer;
    width: 10rem;
    height: 4rem;
    text-align: center;
    line-height: 4rem;
}

#move-trip-update-button:hover {
    background-color: var(--LIGHT_GREEN);
}

/*========================= delete question =========================*/

#delete-question-holder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--BACKGROUND-OPAC);
    color: var(--FORGROUND);
    visibility: hidden;
    z-index: 9999;
}

#delete-question-screen{
    width: 60rem;
    height: 30rem;
    background-color: var(--BACKGROUND);
    border: 2px solid var(--FORGROUND);
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

#delete-question-text{
    width: 100%;
    font-size: 2rem;
    flex:1;
}

#delete-question-button-bar{
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.delete-question-button{
    height: 100%;
    width: 10rem;
    cursor: pointer;
    font-size: 2rem;
    text-align: center;
    line-height: 4rem;
}

#delete-question-button-delete{
    background-color: var(--RED);
}

#delete-question-button-delete:hover{
    background-color: var(--LIGHT_RED);
}

#delete-question-button-no{
    background-color: var(--DARK_GREY);
}

#delete-question-button-no:hover{
    background-color: var(--LIGHT_GREY);
}


/*========================= map =========================*/

#map-screen-holder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--BACKGROUND-OPAC);
    color: var(--FORGROUND);
    visibility: hidden;
    z-index: 999;
}

#map-screen-screen{
    width: 95%;
    height: 95%;
    background-color: var(--BACKGROUND);
    border: 2px solid var(--FORGROUND);
    display: flex;
    flex-direction: column;
}

#map-title-bar{
    width: 100%;
    display: flex;
    flex-direction: row;
    font-size: 2rem;
    padding: .5em;
    line-height: 4rem;
}

#map-rest-holder{
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

#map-list-holder{
    height: 100%;
    width: 30rem;
    overflow-x: scroll;
    padding-right: 1rem;
}

#map-map-holder{
    position: relative;
    height: 100%;
    flex: 1;
}

.map-list-item{
    width: 100%;
    cursor: pointer;
    padding-bottom: 1rem;
    padding-top: 1rem;
    border-bottom: 2px solid var(--FORGROUND);
}

.map-list-item:hover{
    background-color: var(--DARK_GREY);
}

.map-list-item-title-bar{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.map-list-item-symbol{
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
}

.map-list-item-title{
    font-size: 2rem;
    line-height: 4rem;
    flex:1;
}

.map-list-item-date-bar{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.map-list-item-date{
    font-size: 1.5rem
}


#map-context-menu{
    position: absolute;
    width: 15rem;
    font-size: 1.3rem;
    padding: .2rem;
    background-color: var(--FORGROUND);
    color: var(--BACKGROUND);
    z-index: 9999;
    visibility: hidden;
}

#map-context-menu p{
    width: 100%;
    cursor: pointer;
}

#map-context-menu p:hover{
    background-color: var(--LIGHT_BLUE);
}


/*========================= message =========================*/

#message-holder{
    position: absolute;
    width: 30rem;
    bottom: 0;
    right: 1rem;
    max-height: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    z-index: 99999;
}

#message-item-holder{
    overflow-x: scroll;
    flex: 1;
}

.message-item{
    min-height: 5rem;
    font-size: 1.5rem;
    padding:1rem;
    margin-bottom: .5rem;
    color: var(--FORGROUND);
}

#message-time-bar{
    width: 100%;
    height: 1rem;
    background-color: var(--LIGHT_BLUE);
}

.highlight-background-light-blue{
    background-color: var(--LIGHT_BLUE);
    color: var(--BLACK);
}

.highlight-border-green{
    border: 2px solid var(--GREEN);
}