@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;
}



/* 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, #tweetPreviewLabel {
	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;
}

.btn {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: calc(0.25vw + 0.25vh) !important;
    border-radius: calc(0.5vw + 0.5vh) !important;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-weight: bold;
	font-size: calc(1.1vw + 1.1vh) !important;
    line-height: calc(1.45vw + 1.45vh)  !important;
    padding:0  !important;
    margin:0  !important;

}

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

#tweetPreviewBody 
{
   font-weight: normal; 
   font-size: calc(1.65vw + 1.65vh) !important;
   line-height: calc(2.1vw + 2.1vh)  !important;
   text-transform:uppercase;
   padding: calc(1.1vh + 1.1vw)  !important;
   min-height:6vh;
   /* padding-top: calc(3vh + 3vw)  !important;
   padding-bottom: calc(3vh + 3vw)  !important; */
   background: #fff;
   border: 2px solid #000;
   border-radius: 8px; 
   margin: calc(1.1vh + 1.1vw)  !important;
   color:#000 !important;
   text-align: left;
   vertical-align: top;
   letter-spacing: normal;
}

#scrollbarhide {
    z-index: 6;
    position: fixed;
    top: 0;
    right: 50%;
    width: 12px;
    height: 100%;
    background-color: black;

}

#bot-pane {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    padding-right: 3vw  !important;
    min-width: 50% !important;
    max-width: 50% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    background-color: black;
    border: 0px solid;
    margin: 0;
    padding: 0vw;
    padding-left: 3vw;

}

#bot {
    display: inline-block;
    border: 0.3vw solid #000;
    border-radius: 1vw;
    min-height: 100% !important;
    max-height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 1vw;
    padding: 1vw;
    font-size: 5.7vw;
    line-height: 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(50% - 6vw) !important;
    max-width: calc(50% - 6vw) !important;
    font-size: 1vw !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(1.25vw) !important;
    color:white;
}

#tweet {
    padding-left: 0vw;
}

#clock {
    padding-right: 0vw;
}

#list-pane {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 50% !important;
    max-width: 50% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    background-color: black;
    margin: 0;
    /* padding-left: 3vw; */
    padding-top: 0vw  !important;
    /* padding-right: 6vw; */
    overflow: hidden;
    z-index: -3;
}

#list {
    position: absolute;
    min-width: 100% !important;
    max-width: 100% !important;
    height: calc(100% + 2vw);
    width: 100%;
    overflow: auto;
    padding:3vw  !important;
    padding-top:0vw  !important;
    padding-bottom:0vw  !important;
    margin-right: 0vw  !important;
}

#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) {
    #scrollbarhide {
        top: 25.5%;
        right: 0px;
        width: 0px;
        height: 74.5%;
    }

    #bot-pane {
        position: fixed;
        top: unset;
        bottom: 0;
        left: 0;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 23% !important;
        max-height: 23% !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;
    }

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


    #list-pane {
        position: fixed;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 75% !important;
        max-height: 75% !important;
    }

    #toolbar {
        -webkit-font-smoothing: antialiased;
        top: unset;
        bottom: calc(- 2.5%);
        font-height: 10%;
        font-size: calc(2.9vw) !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;

    }

    #tweet {
    padding-left: 0vw;
	}

    #clock {
    padding-right: 0vw;
    }

    #list {
        max-width: 98vw !important;
        padding: 0vw  !important;
        margin: 0vw !important;
    }

   .modal-content, .modal-header, .modal-body, .modal-footer, #aboutLabel, #infoLabel, #tweetPreviewLabel {
    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;
}

.no-hl {
    background-color: white;
    padding-left:0vw !important;
    padding-right:0vw !important;
}

mark {
    background-color: white;
    padding-left:0vw !important;
    padding-right:0vw !important;
}

.hl {
    background-color: black;
    padding:0vw !important;
    padding-left:0.4vw !important;
    padding-right:0.4vw !important;
    color:white;
}

.landscape {
    display: inline-block;
    width: 100%;
    height: calc(100% - 2vw);
    position: absolute;
    top: 0;
    margin-top: 0vw;
    margin-bottom: 0vw;
    border-radius: 1vw;
    border: 0.3vw solid #000;
}

.portrait {
    display: inline-block;
    width: 100%;
    height: calc(100% - 3vw);
    position: relative;
    top: 0;
    margin-top: 0vw;
    margin-bottom: 0vw;
    border-radius: 2vw;
    border: 0.6vw solid #000;
}

.featured-img {
    object-fit: cover;
    left: 0;
    top: 0;
    width: 100%;
    height: 70%;
    margin: 0;
    padding: 0;
}

.landscape-featured-img {
    display: block;
    min-height: 70%;
    max-height: 70%;
    border-radius: 1vw 1vw 0 0;
}

.portrait-featured-img {
    display: block;
    min-width: 30%;
    max-width: 30%;
    min-height: 100%;
    max-height: 100%;
    border-radius: 2vw 0 0 2vw;
}

.featured-txt {
    width: 100%; 
    position:absolute;

    margin: 0;
    padding: 1vh;
    padding-top: 0.5vh;

    background-color: white;
    color: black;
}

.landscape-featured-txt {
    height: 30%;
    bottom: 0;
    border-radius: 0 0 1vw 1vw;
}

.portrait-featured-txt {
    height: 100%;
    min-width: 70%;
    max-width: 70%;
    top: 0;
    left: 30%;
    border-radius: 0 2vw 2vw 0;
}

.title {
    padding: 0;
    margin: 0;
    font-weight: bold;
    text-transform: capitalize;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
}

.landscape-title {
    height: 75% !important;
    font-size: calc(40vh / 20) !important;
    line-height: calc(53vh / 20) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-height:  calc(106vh / 20) !important;
    /* @include multiLineEllipsis($lineHeight: calc(53vh / 20) !important, $lineCount: 2 !important, $bgColor: white);  */
}

.portrait-title {
    height: 90% !important;
    text-overflow: hidden;
    font-size: calc(56vh / 20) !important;
    line-height: calc(75vh / 20) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    max-height:  calc(300vh / 20) !important;
    }

.source {
    position: relative;
    -webkit-font-smoothing: antialiased;
    /* padding: 0.5vw; */
    /* min-height: 3vh !important; */
    /* max-height: 3vh !important; */
    /* padding: 0; */
    /* margin-bottom: 0.25vh; */
    /* font-weight: normal !important; */
    color: #888 !important;
    white-space: nowrap; 
    width: 100% ;
    text-transform: uppercase ;
    text-overflow: ellipsis ;
    overflow: hidden;
    
    /* AJOUTS RECENTS NICO */
    border-top: 0.7vh solid white;
	
    top: calc(-0.6vh);
}

.landscape-source {
    /* height: calc(56vh / 10) !important; */
    font-size: calc(28vh / 16) !important;
    background-color: #;
    line-height: calc(28vh / 10) !important;
}


.portrait-source {
	position: absolute;
    /* height: 10% !important; */
    font-size: calc(37vh / 16) !important;
    line-height: calc(40vh / 16) !important;
    /* font-size: calc(3vw) !important; */
    background-color: #;
    line-height: calc(75vh / 20) !important;

    top: calc(100% - 3.75vh) !important;
}


@media screen and (min-aspect-ratio: 1/1) {
    .portrait {
        display: none;
    }
}

@media screen and (max-aspect-ratio: 1/1) {
    .landscape {
        display: none;
    }
}

/* GENERAL DECORATION */

#tweetit a, #tweet, #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;
}

#tweetit {
    color: white;
    text-transform: uppercase;
}

#tweetit a{
    color: white;
    text-transform: uppercase;
    background-color: black;
    /* padding-left:0.4vw !important; 
    padding-right:0.4vw !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; */
}

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