@font-face {
  font-family: bold_font;
  src: url('../theboldfont.ttf');
}
@font-face {
  font-family: calibri;
  src: url('../calibri.ttf');
}
@font-face {
  font-family: coolvetica;
  src: url('../coolvetica.ttf');
}

* { 
  box-sizing: border-box; 
  transition-duration: 0.5s;
}
button:focus {outline:0;}
.invisible{ display: none; }
input, textarea, button, select, a, .player, div, span { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.cover, .player, .radio_genre, .replay_container{ transition-duration: 2s; }

body {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: #2f2f2f;
  /*background: url(../imgs/back) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover*/
  padding: 0; margin: 0;
  font-family: "bold_font", sans-serif;
  color: white;
  height: 100vh; width: 100vw;
}

/* Main Page */

.background_container {
    position: fixed;
    width: 100vw; height: 100vh;
    background-image: url(../imgs/back);
    background-size: auto 100%;
    background-repeat-y: no-repeat;
    background-repeat-x: repeat;
    background-position: center;
    overflow: hidden;
    filter: brightness(0.6);
}
.cover_background span{ 
	position: absolute;
	top: 50%; left: 50%;
	border-radius: 50%;
	content: " ";
    background-color: #000;
}
.cover_background span:nth-child(1){ transform: translate( calc(-50% - 18%) , calc(-50% - 83%) ); height: 17.5vh; width: 17.5vh; }
.cover_background span:nth-child(2){ transform: translate( calc(-50% - 103%) , calc(-50% - 178%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(3){ transform: translate( calc(-50% - -91%) , calc(-50% - 174%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(4){ transform: translate( calc(-50% - -93%) , calc(-50% - -2%) ); height: 20.5vh; width: 20.5vh; }
.cover_background span:nth-child(5){ transform: translate( calc(-50% - 243%) , calc(-50% - 140%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(6){ transform: translate( calc(-50% - 123%) , calc(-50% - -36%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(7){ transform: translate( calc(-50% - 256%) , calc(-50% - -8%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(8){ transform: translate( calc(-50% - 244%) , calc(-50% - -153%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(9){ transform: translate( calc(-50% - 55%) , calc(-50% - -172%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(10){ transform: translate( calc(-50% - -91%) , calc(-50% - -154%) ); height: 19.5vh; width: 19.5vh; }
.cover_background span:nth-child(11){ transform: translate( calc(-50% - -253%) , calc(-50% - -165%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(12){ transform: translate( calc(-50% - -260%) , calc(-50% - -5%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(13){ transform: translate( calc(-50% - -254%) , calc(-50% - 177%) ); height: 18.5vh; width: 18.5vh; }
.cover_background span:nth-child(n){ display: none; }

.main_frame{
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 100vw; height: 100vh;
}

/* Titre */
.title_container{
  position: absolute; top: 0; left: 0; right: 0;
}
.title{
  position: absolute;
  top: 20px; left: 20px;
  border: 4px solid #FFFFFF;
  padding: 7px; padding-top: 6px; padding-bottom: 0px;
  border-radius: 9px;
}
.title_text{
  text-align: center;
  color: #FFFFFF;
  font-size: 35px; font-family: "bold_font", sans-serif; font-weight: 800;
}

/* Platine */
.text{
  color: white;
  position: relative; text-align: center;
  padding: 4px; padding-left: 10px; padding-right: 10px; padding-top: 5px;
  border-radius: 10px; border: 4px solid #FFFFFF;
  font-size: 16px;
} .text:empty { display: none; }

.listeners{
  position: absolute; display: inline-block;
  width: 20%; top: 3%; left: 3%;
  transition-duration: 2s;
}
.listeners .icon{
  position: relative; display: inline-block;
  width: 34%; left: 10%;
}
.listeners .count{
  display: inline-block;
  left: 46%; top: 54%;
  width: 49%; font-size: 14px;
  position: absolute; color: white;
  transform: translateY(-50%);
}
.count:empty .icon{
  visibility: hidden;
}

.radio_name{
  position: relative;  
  width: 100%; height: 19px;
  top: -20px;
  text-align: center;
}  
.radio_name .text{ border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom: none; }
.radio_desc{
  position: absolute;
  width: 200%; height: 19px; bottom: 0;
  transform: translate(-25%,286%);
  text-align: center;
}
.radio_genre{
  position: absolute;
  width: 100%; height: 16px; bottom: 7px;
}
.radio_genre .text{ 
  font-family: "calibri";
  background: none !important; border: none;
  font-size: 11px; text-align: left;
  padding: 10px;
}

.platine {
  position: relative; cursor: pointer;
  width: 100vw; height: 100vh;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  display: -webkit-box; display: flex;
  -webkit-box-align: center; align-items: center;
  -webkit-box-pack: center; justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.player {
  position: absolute;
  height: 250px; width: 250px;
  border: 4px solid #FFFFFF;
  border-radius: 10%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 0;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
}
.player:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.player:before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  width: 100%; height: 100%;
  border-radius: 25%;
}

.record {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  width: 70%; height: 70%;
  background-color: #1f1f1f;
  background: linear-gradient(to right, #1f1f1f 0%, #363636 40%, #363636 60%, #1f1e1f 100%);
  border-radius: 100%;
  -webkit-transform: rotate(0) translateZ(0);
          transform: rotate(0) translateZ(0);
  border: 3px rgba(255, 255, 255, 0.3) solid;
}
.record:before, .record:after {
  content: ""; position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  background: linear-gradient(to right, #1f1f1f 0%, #363636 40%, #363636 60%, #1f1e1f 100%);
  border-radius: 100%;
}
.record:before {
  width: 88%; height: 88%; background-color: #505050;
}
.record:after {
  width: 48%;height: 48%;
  background: linear-gradient(to right, #1f1f1f 0%, #363636 40%, #363636 60%, #1f1e1f 100%);
  box-shadow: inset rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 0 2px 3px;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
}

.record .label {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  width: 36%; height: 36%;
  padding: 4.5% 6%;
  text-align: center;
  border-radius: 100%;
  z-index: 2;
}

.record .label.cover{
  background-image: url('../imgs/cover');
  background-position: center;
  background-size: cover;
  filter: brightness(0.8);
}

.record .label:before, .record .label:after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  border-radius: 100%;
  z-index: -1;
}
.record .label:before { width: 35%; height: 35%; }
.record .label:after { width: 30%; height: 30%; }

.spindle {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  width: 25%; height: 25%;
  background-color: black;
  border-radius: 100%;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 12px 2px;
  -webkit-transform: scale(0.2);
          transform: scale(0.2);
  z-index: 3;
}
.spindle:before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  width: 70%; height: 70%;
  background-color: #ededed;
  background: -webkit-gradient(linear, left top, right top, from(#e2e2e2), color-stop(51%, #d1d1d1), color-stop(51%, #dbdbdb), to(#fefefe));
  background: linear-gradient(to right, #e2e2e2 0%, #d1d1d1 51%, #dbdbdb 51%, #fefefe 100%);
  border-radius: 100%;
  z-index: 4;
}

.arm-container {
  position: absolute;
  width: 30%; height: 5%;
  top: 15%; right: 19%;
  -webkit-transform-origin: 94.2%;
          transform-origin: 94.2%;
  -webkit-transform: rotate(-120deg);
          transform: rotate(-120deg);
}

.arm {
  position: absolute;
  top: 0; right: -25%;
  width: 100%; height: 100%;
  background-color: #ededed;
  border-radius: 12px;
  z-index: 2;
}

.knob {
  position: absolute;
  background-color: #f2f2f2;
  border-radius: 100%;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 2;
}
.knob:after { content: ""; display: block; padding-bottom: 100%; }
.knob.bottom { background-color: #dedede; border: 1px solid #d9d9d9; border-radius: 100%; }
.knob.top {
  border: 1px solid #e3e3e3; 
  box-shadow: inset white 0 -1px 2px, inset rgba(0, 0, 0, 0.06) -6px -6px 18px, rgba(0, 0, 0, 0.06) -4px 4px 6px, rgba(0, 0, 0, 0.15) 2px 2px 6px;
}

.weight.bottom { top: -61%; right: -13.5%; width: 38%; }
.weight.top { width: 30%; top: -40%; right: -9.5%; }
.weight.top:before {
    content: "";
    position: absolute;
    top: 28%; right: 254%;
    width: 24%; height: 29%;
    border: 1px solid #171717;
    border-radius: 100%;
    box-shadow: inset rgba(0, 0, 0, 1) 2px 2px 4px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
}

button.play {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
  width: 100%; height: 100%;
  background-color: transparent;
  border: none; border-radius: 100%;
  font-family: "Open Sans", sans-serif;
  cursor: pointer; outline: none;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}

.speaker {
  position: absolute;
  left: 5%;
  bottom: 3%;
  width: 20%;
  -webkit-transform: scale(0.55);
          transform: scale(0.55);
}
.speaker:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.speaker .hole {
  margin-right: 12%;
  margin-bottom: 12%;
  width: 13%;
  float: left;
  background-color: #FFFFFF;
  border-radius: 100%;
}
.speaker .hole:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.offline_txt, .loading_txt{
  color: #FFFFFF;
  font-size: 23px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-35deg);
}
.loading_txt{ transform: translate(-50%,-50%) rotate(0deg); }


.loading{
  animation: loading 1.5s linear infinite;
}
.shake{
  animation: shake 1s linear 1;
}

.is-playing .record {
   animation: spin-on 4s .51s linear infinite;
}
.is-stopped .record {
  animation: spin-off 1s ease-out forwards;
}

.is-stopped .arm-container {
  animation: arm-off .51s ease-out forwards;
}
.is-playing .arm-container {
  animation: arm-on .5s .01s ease-out forwards, arm-playing 3s .51s linear infinite;
}

@keyframes spin-on {
  to { transform: rotate(360deg) translateZ(0); }
}
@keyframes spin-off {
  to { transform: rotate(360deg) translateZ(0); }
}
@keyframes arm-playing {
  0% { transform: rotate(-45deg); }
  50% { transform: rotate(-47deg); }
  100% { transform: rotate(-45deg); }
}
@keyframes arm-off {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(-120deg); }
}
@keyframes arm-on {
  100% { transform: rotate(-45deg); }
}
@keyframes loading {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
  }
}


/* Direct */
.direct .text_mode { transform: translateX(-50%); }
.direct .switch_mode { background-color: #ffffff2e; }
.cover_background.direct span { background-color: #F1F1F1; }
.direct .title, .direct .player, .direct .text, .direct .weight.top:before{ background-color: #00000069; }
.direct.replay_container{ position: absolute; top: 0; transform: translate(-50%,0); opacity: 0; pointer-events: none; }

/* Replay */
.replay .listeners, .replay .offline_txt, .replay .radio_genre{ opacity: 0; }
.replay .text_mode{ transform: translateX(-50%) rotate(180deg); }
.replay .switch_mode{ transform: translate(-50%,-50%) rotate(180deg); background-color: #00000069; left: calc(50% + 180px); }
.replay .title, .replay .player, .replay .text, .replay .weight.top:before{ background-color: #ffffff4d; }
.cover_background.replay span{ background-color: #fd5d02; }
.replay.replay_container{ display: initial; opacity: 1; background-color: #ffffff12; }

.replay_container{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,250px);
	width: 450px; max-width: 90%;
	height: auto;
	background-color: #00000069;
	border: 4px solid #FFFFFF;
	border-radius: 15px;
	padding: 10px;
	padding-bottom: 25px;
	padding-top: 0px;
}

.replay_container h1{
  text-align: center;
  font-size: 23px;
  margin-bottom: 15px;
}
.replay_container ul{ list-style-type: none; padding: 10px; margin-bottom: 0; }
.replay_container li{ text-align: left; margin: 3px;}
.replay_container .icon_replay{ 
	background: url("/imgs/cover") no-repeat center; background-size: cover; 
	display: inline-block; width: 35px; height: 35px; border-radius: 50%; }
.replay_container .title_replay{ position: absolute; transform: translate(10px,11px); }
.replay_container .date_replay{ position: absolute; right: 0; transform: translate(-15px,11px); }
.replay_container hr { position: relative; left: 50%; width: 100%; margin: 4px; margin-top: -1px; transform: translateX(-50%); }

/* admin page */

.main_container{
  width: 450px;
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 50px;
}

.main_container h1{
  text-align: center;
  font-size: 23px;
  margin-bottom: 0;
  margin-top: 6px;
}

.status_container{
  width: 100%;
  height: auto;
  position: relative;
  background-color: #00000069;
  border: 4px solid #FFFFFF;
  border-radius: 15px;
  padding: 10px;
  padding-bottom: 25px;
  margin-bottom: 25px;
}

.status_container h1{
  text-align: center;
  font-size: 23px;
  margin-bottom: 15px;
}

.status_container .infos{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.status_container .infos .info{
  height: 60px;
}

.stream_time {
    position: relative;
    left: -50%;
}

.listeners_count .status_content, .listener_peak .status_content{
  font-size: 24px;
  margin-bottom: 4px;
}
.listeners_count, .listener_peak{
  margin-bottom: 5px;
}
.status_title {
  font-family: "calibri";
  width: 100%;
  text-align: center;
  font-size: 16px;
}

.status_content {
  font-family: "coolvetica";
  width: 100%;
  vertical-align: middle;
  text-align: center;
  font-size: 19px;
}

.shortcuts_container{
  width: 100%;
  height: auto;
  position: relative;
  background-color: #00000069;
  border: 4px solid #FFFFFF;
  border-radius: 15px;
  padding: 10px;
  padding-bottom: 73px;
  margin-bottom: 35px;
}

.shortcuts_container h1{
  text-align: center;
  font-size: 23px;
  margin-bottom: 15px;
}

.shorcut{
  width: fit-content;
  background-color: #00000069;
  padding: 9px;
  padding-bottom: 4px;
  border: 4px solid #FFFFFF;
  border-radius: 20px;
  margin-bottom: 15px;
  display: inline-block;
}
.shorcut:hover{ background-color: #FFFFFF; }
.shorcut:hover a span{ color: #00000069; }
.shorcut.start{ position: absolute; left: 30px; top: 109px; }
.shorcut.stop{ position: absolute; right: 30px; top: 109px; }
.shorcut.onesignal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.notifications_container{
  width: 100%;
  height: auto;
  position: relative;
  background-color: #00000069;
  border: 4px solid #FFFFFF;
  border-radius: 15px;
  padding: 10px;
  padding-bottom: 16px;
  margin-bottom: 35px;
}

.notification_container h1{
  text-align: center;
  font-size: 23px;
  margin-bottom: 15px;
}

.notification_create{
  width: 100%;
  margin-top: 10px;
}

.notification_create form{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.notif_form div{
  height: 40px;
}

.notif_form div div {
  width: 100%;
  text-align: center;
  height: fit-content;
  margin-bottom: 4px;
}

.notif_form div div input {    
    width: 80%;
    height: 23px;
    border-radius: 10px;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px #AAAAAA solid;
    font-family: "calibri";
}

.notification_submit {
    position: relative;
    left: 50%;
}

.notification_submit button{
  width: fit-content;
  position: absolute; left: 50%; transform: translateX(-50%);
  border: 4px #FFF solid;
  border-radius: 20px;
  background-color: #00000069;
  color: #FFF;
  font-family: "bold_font";
  padding: 10px;
  padding-top: 8px;
  padding-bottom: 5px;
  font-size: 14px;
}

.notification_submit button:hover{
  background-color: #FFFFFF;
  color: #00000069;
}

.notification_track_button{
  width: fit-content;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  border: 4px #FFF solid;
  border-radius: 20px;
  background-color: #00000069;
  color: #FFF;
  font-family: "bold_font";
  padding-left: 10px;
  padding-top: 8px;
  font-size: 14px;
  padding-bottom: 4px;
  padding-right: 10px;
}

.notification_track_button:hover{
  background-color: #FFFFFF;
  color: #00000069;
}

.notification_track_result {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}


.notification_create{
  width: 100%;
  margin-top: 10px;
}

.notification_create form{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.notif_form div{
  height: 40px;
}

.notif_form div div {
  width: 100%;
  text-align: center;
  height: fit-content;
  margin-bottom: 4px;
}

.notif_form div div input {    
    width: 80%;
    height: 23px;
    border-radius: 10px;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px #AAAAAA solid;
    font-family: "calibri";
}

.notification_submit {
    position: relative;
    left: 50%;
}

.notification_submit button{
  width: fit-content;
  position: absolute; left: 50%; transform: translateX(-50%);
  border: 4px #FFF solid;
  border-radius: 20px;
  background-color: #00000069;
  color: #FFF;
  font-family: "bold_font";
  padding: 10px;
  padding-top: 8px;
  padding-bottom: 5px;
  font-size: 14px;
}

.notification_submit button:hover{
  background-color: #FFFFFF;
  color: #00000069;
}


.add_replay_container{
  width: 100%;
  height: auto;
  position: relative;
  background-color: #00000069;
  border: 4px solid #FFFFFF;
  border-radius: 15px;
  padding: 10px;
  padding-bottom: 16px;
  margin-bottom: 35px;
}

.add_replay_container h1{
  text-align: center;
  font-size: 23px;
  margin-bottom: 15px;
}

.add_replay{
  width: 100%;
  margin-top: 10px;
}

.add_replay form{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.replay_form div{
  height: 40px;
}

.replay_form div div {
  width: 100%;
  text-align: center;
  height: fit-content;
  margin-bottom: 4px;
}

.replay_form div div input {    
    width: 80%;
    height: 23px;
    border-radius: 10px;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px #AAAAAA solid;
    font-family: "calibri";
}

.replay_form div div input {    
    width: 80%;
    height: 23px;
    border-radius: 10px;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px #AAAAAA solid;
    font-family: "calibri";
}

.add_replay{
  width: 100%;
  margin-top: 10px;
}

.add_replay form{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.add_replay div{
  height: 40px;
}

.add_replay div div {
  width: 100%;
  text-align: center;
  height: fit-content;
  margin-bottom: 4px;
}


.replay_submit {
    position: relative;
    left: 50%;
}

.replay_submit button{
  width: fit-content;
  position: absolute; left: 50%; transform: translateX(-50%);
  border: 4px #FFF solid;
  border-radius: 20px;
  background-color: #00000069;
  color: #FFF;
  font-family: "bold_font";
  padding: 10px;
  padding-top: 8px;
  padding-bottom: 5px;
  font-size: 14px;
}

.replay_submit button:hover{
  background-color: #FFFFFF;
  color: #00000069;
}

.replay_submit {
    position: relative;
    left: 50%;
}

.replay_submit button{
  width: fit-content;
  position: absolute; left: 50%; transform: translateX(-50%);
  border: 4px #FFF solid;
  border-radius: 20px;
  background-color: #00000069;
  color: #FFF;
  font-family: "bold_font";
  padding: 10px;
  padding-top: 8px;
  padding-bottom: 5px;
  font-size: 14px;
}

.replay_submit button:hover{
  background-color: #FFFFFF;
  color: #00000069;
}

.settings_container{
  width: 100%;
  height: auto;
  position: relative;
  background-color: #00000069;
  border: 4px solid #FFFFFF;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 25px;
}

.settings_container input{
  display: none;
}

.settings_container .fileform{
  background-color: #00000069;
  width: fit-content;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px; padding-bottom: 4px;
  border: 4px solid #FFFFFF; border-radius: 20px;
  margin-bottom: 15px;
}

.settings_container .fileform:hover{
  background-color: #FFFFFF;
  color: #00000069;
}

.settings_container textarea{
  position: relative;
  border-radius: 10px;
  resize: none;
  border: none;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  color: #000000;
  font-family: "bold_font";
  padding: 4px;
  margin-top: 5px;
  font-size: 13px;
  text-align: center;
}

.settings_container .offlineform{ padding-top: 17px; }

.settings_container .offlinelabel{
  text-align: center;
  width: calc(100% - 20px);
  position: absolute;
}
.message{
  color: #BB86FC;
  text-align: center;
  font-size: 15px;
}

hr{
  width: 93%;
}
a {
    color: #FFF;
    text-decoration: none;
}

/* OneSignal */

.onesignal-popover-container{
  background-color: rgba(0, 0, 0, 0.85)!important;
  position: absolute !important;
  width: 100vw !important;
  height: 100vh !important;
  left: 0 !important; top: 0 !important;
}
#onesignal-popover-container.slide-up #onesignal-popover-dialog, #onesignal-popover-container.slide-down #onesignal-popover-dialog{
  border-radius: 20px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  max-width: 450px !important;
  animation-name: none !important;
  transform: translate(-50%, -50%) !important;
  background-color: #00000069 !important;
  border: 4px #FFF solid;
}

#onesignal-popover-container #onesignal-popover-dialog .popover-body .popover-body-message{
  color: #FFF !important;
  text-align: center;
  font-family: "bold_font";
  font-size: 19px;
  width: 100%;
  margin-bottom: 16px;
  margin-top: 18px;
  padding: 0;
}

#onesignal-popover-container #onesignal-popover-dialog .popover-footer .popover-button.primary{
  position: absolute;
  right: 2% !important;
  background-color: #FFF !important;
  color: #00000069 !important;
  font-family: "calibri";
  font-weight: 900;
  border-radius: 20px;
}
#onesignal-popover-container #onesignal-popover-dialog .popover-footer .popover-button.secondary{
  position: absolute;
  left: 2% !important;
  background-color: #FFF !important;
  color: #00000069 !important;
  font-family: "calibri";
  font-weight: 900;
  border-radius: 20px;
}

#onesignal-popover-container #onesignal-popover-dialog .popover-body .popover-body-icon{
  background-color: #00000069 !important;
  position: absolute !important;
  top: -53px !important;
  left: 50% !important;
  transform: translateX(-50%);
  border: 7px #fff solid;
  border-radius: 50%;
  width: 80px !important;
  height: 80px !important;
}

#onesignal-popover-container #onesignal-popover-dialog .popover-body-icon img{
  background: url(../imgs/alarm.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100% !important;
  height: auto !important;
}


.switch_mode{
  position: absolute;
  width: 45px;
  height: 45px;
  top: 50%;
  left: calc(50% - 180px); right: auto;
  z-index: 0;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1px #FFF solid;
  transition-duration: 2s;
}

.button_mode{
  position: relative;
  left: 10%; top: 15%;
  width: 70%; height: 70%;
  background: url("../imgs/arrow.svg");
  border: none;
  transition-duration: 2s;
}

.text_mode{
  position: absolute;
  left: 47%; bottom: -60%;
  padding: 3px;
  padding-bottom: 1px;
  border-radius: 8px;
  transition-duration: 2s;
}