:root
{
    --antic-font-size: calc(17px + 0.9vw);
    /**(rose) rgba(255, 139, 196, 1); (jaune)rgba(251, 193, 47, 1); (turquoise)rgba(0, 250, 250, 0.8);*/
    --antic-color-active: rgba(0, 250, 250, 0.7);
}

html, body
{
  background-color: #000;
  font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100vw;
}

* {-moz-box-sizing: border-box; box-sizing: border-box;}

.opac
{
  background-color: #000;
  opacity: 0.3;
}

.left
{
  float: left;
}

.right
{
  float: right;
}

.fullw
{
    width: 100%;
}

.fullh
{
    height: 100%;
}

.white
{
  color: #fff;
}

.black
{
  color: #000;
}

.blue-selected
{
  color: #4988de;
}

header .status-bar
{
  display: flex;
  width: calc(100vw - 3vw);
}

header .status-bar div
{
  margin-top: auto;
  margin-bottom: auto;
}

header .status-bar .right,
header .contextual-menu .right
{
  margin-right: 0;
  margin-left: 0.3vw;
}

header .status-bar .first,
header .contextual-menu .first
{
  margin-left: auto;
}

header .status-bar .text,
header .contextual-menu .text
{
  font-size: 3.6vw;
  margin-top: -2px;
}

header .status-bar .ico
{
  font-size: 80%;
  margin-top: 0;
}

.scalex-rotate90
{
  -webkit-transform: rotate(90deg) scaleX(-1);
  -moz-transform: rotate(90deg) scaleX(-1);
  transform: rotate(90deg) scaleX(-1);
}

.mirror-vert {
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}

.antic-background
{
  background: linear-gradient(-1deg, rgb(11 14 12) 0%, rgb(90 67 161) 55%, rgb(55 141 130) 100%);
  height: 100vh;
  width: 100vw;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
}

.antic-background-img
{
  height: 100vh;
  width: 100vw;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  object-fit: cover;
}

.antic-screen-title
{
  width: calc(100vw - 4vw);
  font-size: calc(24px + 0.9vw);
  line-height: 0.8em;
  margin: 2vw;
}

.antic-screen-title .antic-screen-sub-title
{
  width: calc(100vw - 4vw);
  font-size: calc(12px + 0.9vw);
  opacity: 0.6;
}

.antic-keyboard
{
  background: #d2d2d2;
  display: none;
  position: absolute;
  z-index: 50;
  bottom: 4vh;
  left: 0;
  width: 100vw;
  padding-top: 4vw;
}

.antic-keyboard-row
{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-right: 2vw;
  margin-left: 2vw;
  width: calc(100% - 4vw);
}

.antic-num-keyboard
{
  text-align: center;
  font-size: calc( 24px + 0.9vw );
  width: 16vw;
  height: 8vh;
  border-radius: 50%;
  user-select: none;
}

.antic-num-keyboard:active
{
}

.antic-letter-keyboard
{
  opacity: 0.6;
  font-size: calc( 8px + 0.9vw );
  margin-top: -5px;
}

.antic-call-keyboard
{
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background-color: rgb(76, 175, 80);
}

.antic-call-keyboard-containeur
{
  width: 14vw;
  height: 14vw;
  background-color: rgb(76, 175, 80);
  border-radius: 50%;
  margin-top: -3vw;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.antic_invisible
{
  visibility: hidden;
}

.antic_message_list_next
{
  border-bottom-left-radius: 0.3em !important;
}

.antic_message_list_next_owner
{
  border-bottom-right-radius: 0.3em !important;
}

.antic_message_list_prev
{
  border-top-left-radius: 0.3em !important;
}

.antic_message_list_prev_owner
{
  border-top-right-radius: 0.3em !important;
}

.icone-clavier
{
  position: absolute;
  z-index: 50;
  bottom: 9vh;
  right: 5vw;
  background-color: rgb(76, 175, 80);
  border-radius: 50%;
  height: 12vw;
  width: 12vw;
  display: flex;
}
.icone-clavier span
{
  margin: auto;
}

div[antic-mode="nuit"][class="row"] {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

div[antic-mode="nuit"] {
  background-color: #2e2b2b;
  color: #ffffff;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

.antic-modal
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(43,43,43,0.95);
  z-index: 2;
}

.button
{
  padding: 5vw;
  background-color: #222;
  font-size: 1.1em;
  border-radius: 2px;
  margin-right: 2vw;
  width: max-content;
}