@font-face {
    font-family: 'Menlo';
    font-style: normal;
    font-weight: normal;
    src: local('Menlo'), url('menlo-regular.woff') format('woff');
}

body {
    background-color: black;       
    font-family: Menlo, DejaVuSansMono, monaco, Consolas, 'Lucida Console', monospace;
    overflow: hidden;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.white_svg {
    margin-right: 3px;
    margin-left: 5px;
    filter: invert(100%); 
    max-height:0.78em;
    margin-bottom:0.2em;
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
}

.clock_hl {
    color: #0f0;
}

/* mixin for multiline */
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}



p {
    margin: 0  !important;
    padding: 0  !important;
}

.modal-content, .modal-header, .modal-body, .modal-footer, #aboutLabel, #infoLabel {
        font-family: Menlo, DejaVuSansMono, monaco, Consolas, 'Lucida Console', monospace;
        font-weight: normal;
    font-size: calc(40vh / 20) !important;
    line-height: calc(53vh / 20) !important;
}

.modal-header {
    padding: calc(1.1vh + 1.1vw)  !important;
    font-weight: bold;
    border-bottom: 0px solid #e9ecef  !important;
    padding-bottom:0  !important;
}

.modal-footer {
        padding: calc(1.1vh + 1.1vw)  !important;
    font-weight: bold;
    border: 0px solid #e9ecef  !important;
    padding-top:0  !important;
}

.close {
    line-height: calc(1.45vw + 1.45vh)  !important;
    }

.modal-body {
    padding: calc(1.1vh + 1.1vw)  !important;
    border-radius: 2vw; !important;
}

.modal-img {
     height: calc(1.45vw + 1.45vh)  !important;
}


#bot-pane {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    background-color: black;
    border: 0px solid;
    margin: 0;
    padding: 1.5vh;
    padding-bottom: 6vh;

}

#bot {
    display: inline-block;
    border-radius: 2vw;
    min-height: 100% !important;
    max-height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 1vw;
    padding: 1vw;
    font-size: 7.9vw; /* 5.7vw */
    line-height: 7.9vw; /* 5.7vw */
    background-color: white !important;
    color: black;
    text-transform: uppercase;
    caret-color: #000;
    caret: wait;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

#toolbar {
    position: fixed;
    bottom: 0;
    right: 0;
    border: 0px solid #333;
    border-top: 0px solid #333;
    border-radius: 0 0 1vw 1vw;
    /* min-height: 3% !important; */
    /* max-height: 3% !important; */
    min-width: calc(100% - 6vw) !important;
    max-width: calc(100% - 6vw) !important;
    /*line-height: 5vh !important;*/
    padding-left: 1vw;
    /* padding-right: 1vw; */
    padding-right: 0vw;
    margin: 3vw;
    padding-bottom: 1vw;
    background-color: transparent;
    z-index: 10;
    margin-bottom: 0vw;
    font-size: calc(2.6vh) !important;
    color:white;
}

#clock {
    display: flex;
    align-items: center;
    padding-right: 0vw;
}

#all {
    min-width: calc(100% - 1vw) !important;
    max-width: calc(100% - 1vw) !important;
    color: white !important;
    text-transform: uppercase !important;
    background-color: black !important;
    padding:0vw !important;
    padding-left:0.4vw !important;
    padding-right:0.4vw !important;
    font-weight:;
}


@media screen and (orientation:portrait) {
    #bot-pane {
        position: fixed;
        top: 0;
        left: 0;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        padding: 0vw  !important;
        padding-left: 0vw  !important;
        padding-right: 0vw  !important;
    }

    #bot {
        padding-right: 0;
        -webkit-font-smoothing: antialiased;
        border-radius: 2vw;
        border: 0.6vw solid #000;
        padding-left: 1.5vw !important;
            overflow-wrap: break-word;
        word-break: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 12 3 2;
        overflow: hidden;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        hyphens: none !important;
        font-size:9vh;
        line-height:9vh;
    }

/* replace <br> by a space  */
/*      #bot br{content:' '; }       */
/*  #bot br:after{content:' '; } */


    #toolbar {
        -webkit-font-smoothing: antialiased;
        /*top: calc(20% - 2.5%);*/
        font-height: 10%;
        font-size: calc(2.2vw) !important;
        min-height: 5% !important;
        max-height: 5% !important;
        min-width: calc(100%) !important;
        max-width: calc(100%) !important;
        margin: 0vw;
        /* border-radius: 0 0 2vw 2vw; */
        padding-left: 1.7vw !important;

    }

    .white_svg {
        height: calc(2.2vw) !important;
    }


    #clock {
        padding-right: 0vw;
    }


   .modal-content, .modal-header, .modal-body, .modal-footer, #aboutLabel, #infoLabel {
    font-size: calc(56vh / 20) !important;
    line-height: calc(75vh / 20) !important;
    }

    .close {
    line-height: calc(3vw)  !important;
    font-size: 8vw !important;
    }

    #all {
    min-width: calc(100% - 1.6vw) !important;
    max-width: calc(100% - 1.6vw) !important;
        }
}


#container {
    position: relative;
    min-width: 100% !important;
    max-width: 100% !important;
    height: calc((100% - 0vw) / 3) !important;
    margin: 0;
    padding-top: 0vw !important;
    padding-bottom: 0vw !important;
}



/* GENERAL DECORATION */

#info, #pab {
        text-decoration:none;
         opacity: 1  !important;
}

#info {
        line-height: 1;
        color: white;
    text-transform: uppercase;
    background-color:black ;
    padding-left:0.4vw !important;
    padding-right:0.4vw !important;
}

.modal-body a {
    color: white;
    text-transform: uppercase;
    background-color:black ;
    padding-left:0.4vw !important;
    padding-right:0.4vw !important;
}

.modal-title b {
    color: white;
    text-transform: uppercase;
    background-color:black ;
    padding-left:0.4vw !important;
    padding-right:0.4vw !important;
    font-weight:400 !important;
}


a {
    outline: 0;
    text-decoration: none;
}

a:hover {
    outline: 0;
    text-decoration: none;
}

.disabled {
         pointer-events: none;
         cursor: default;
         opacity: 1  !important;
}

::-webkit-scrollbar {
        display: none;
    width: 0px;
    background: transparent; /* make scrollbar transparent */
    background-color: #000;
}

#carret {
        font-family: Menlo, DejaVuSansMono, monaco, Consolas, 'Lucida Console', monospace  !important;
    -webkit-font-smoothing: antialiased;
}

a#pab {
    color: white;
    text-transform: uppercase;
    background-color: black;
    /* padding-left:0.4vw !important;
    padding-right:0.4vw !important; */
}

a#pab:hover, a:hover #pab {
    background-color: #eee !important;
    color:black !important;
}