* {
    box-sizing: border-box;
}

html,body {
    display:flex;
    width:100%;
    height:100%;
}

body {
    display: block;
    position: relative;
    background-color: #F0F0F0;
    margin: 0px;
    background-color:black;
}

.logo {
    width: 100px;
    height: auto;
    display: inline-block;
    padding: 20px 10px;
    padding-left: 30px;
    float: left;      
}

.navbar-authenticated {
    height: 60px;
    background: #242223;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 100;
}

.nav-item {
    float: left;
    text-decoration: none;
    margin: 22px 10px 22px 10px;
    text-transform: uppercase;
}

.navbar-authenticated a.visited {
    color: #FFFFFF;
}

.navbar-authenticated a.active {
    color: #FFFFFF;
    opacity: 1;
    padding-bottom: 3px;
    border: 0px;
    border-bottom: 1px solid white;
    border-image: linear-gradient(101.15deg, #00b3ca -33.92%, #424361 143.08%) 25;
}

input[type=file] {
    color:white;
    margin-left:20px;
}

form {
    color:white;
}

#results {
    margin-top:80px;
}

.playpause {
    line-height: 30px;
    border-radius: 10px;
    width: 100px;
    height: 30px;
    background: #000000;
    font-family: Gilroy-Regular;      
    font-size: 16.1888px;
    text-align: center;
    color: #FFFFFF;
    margin: 10px;
    transition: 0.6s;
    margin:0px auto;
    cursor:pointer;
}

.generic-popup, .popup-video {
    display: none;
    background-color: white;
    /*
    width: 600px;
    min-height: 400px;
   */
    border-radius: 20px;
    padding: 10px;
}

.generic-loader {
    overflow: hidden;
}

.generic-loader > div {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 400px;
}

.featherlight-content {
    border-radius:10px;
}

.payment-loader {
    width: 400px;
    width: 80%;
}

#primitive {
    margin-left:auto;
    margin-right:auto;
}

#data {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin:10px;
}

.resultline {
    width:80%;
}

.resultline > div {
    width:100px;
    display:inline-block;
    text-align: left;
}

.resultline > div:first-child {
    width:800px;
    display:inline-block;
    text-align: left;
}

region {
    width:1px !important
}

.wavesurfer-handle {
    background-color: unset !important;
}

.container {
    display:flex;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    background-color:black;
}

#mynetwork {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
    line-height: 150%;
    /*
    width: 1000px;
    height: 600px;
    */
    width:100%;
    height:100%;
    background-color:black;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
}

#mynetwork.clickable {
    cursor:pointer;
}

#mynetwork.clickable > div {
    border:1px solid white;
    padding:10px;
}

#player {
    width:100%;
    margin-top:60px;
    background-color:black;
    position:relative;
}

#player > input {
    width:100%;
}

.triangle-droite {
    display : inline-block;
    height : 0;
    width : 0;
    border-top : 6px solid transparent;
    border-bottom : 6px solid transparent;
    border-left : 10px solid green;
    position:absolute;
}

.triangle-gauche {
    display : inline-block;
    height : 0;
    width : 0;
    border-top : 6px solid transparent;
    border-right : 10px solid red;
    border-bottom : 6px solid transparent;
}

.circle {
    border-radius:50%;
    width:6px;
    height:6px;
    background-color:blue;
}

#progress {
    position:absolute;
    width:100%;
    appearance:none;
    height:5px;
}

progress::-webkit-progress-bar {
    background: black;
}

progress::-webkit-progress-value {
    background: #00B3CA;
}


@keyframes pulse {
    0% {
	background-color: #001F3F;
    }
    100% {
	background-color: #FF4136;
    }
}

.version {
    position:fixed;
    right:0px;
    bottom:0px;
    color:#707070;
    padding:10px;
    font-size:0.8rem;
}

.version a {
    color:#707070;
    text-decoration:none;
}

svg {
    overflow:visible
}