* {
  -moz-user-select: none;
}

html {
  font-size: 10px;
  font-weight: 500;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: #fff;
}

input,
textarea,
[contenteditable="true"] {
  -moz-user-select: text;
}

#screen {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-size: cover; /* Possible memory over-consumption with huge images, it should be removed for improving stability*/
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/*
 *  Poweroff animation
 */
#screen > div#poweroff-splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

#screen > div#poweroff-splash.step1 {
  animation: poweroff-splash-fade-in var(--transition-duration);
}

@keyframes poweroff-splash-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#bottom-panel {
  position: absolute;
  display: none;
  bottom: 0;
  width: 100%;
  height: 1rem;
}

#bottom-panel.visible{
  display: block;
}

.poweroff-ring {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 19vw;
  height: 19vw;
  margin-inline-start: -9.5vw;
  margin-top: -9.5vw;
  offset-inline-start: 50%;
  opacity: 0;
}

#poweroff-ring-1 {
  top: 25%;
  background-color: #36a9e8;
}

#poweroff-ring-2 {
  top: 50%;
  background-color: #218bd1;
}

#poweroff-ring-3 {
  top: 75%;
  background-color: #1473b8;
}

.poweroff-ring > span {
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  offset-inline-start: 50%;
  margin: auto;
  background-color: black;
  width: 12vw;
  height: 12vw;
  margin-top: -6vw;
  margin-inline-start: -6vw;
}

@media all and (orientation:landscape) {
  .poweroff-ring {
    width: 19vh;
    height: 19vh;
    margin-inline-start: -9.5vh;
    margin-top: -9.5vh;
  }

  .poweroff-ring > span {
    width: 12vh;
    height: 12vh;
    margin-top: -6vh;
    margin-inline-start: -6vh;
  }
}

#poweroff-ring-2 > span {
  transform: scale(1.125);
}

#poweroff-ring-3 > span {
  transform: scale(1.25);
}

/* Ring 1 : inner diameter scales from 40 pixel to 58 pixel */
@keyframes ring1-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.45);
  }
}

/* Ring 2 : inner diameter scales from 45 pixel to 59.5 pixel */
@keyframes ring2-scale {
  0% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(1.4875);
  }
}

/* Ring 3 : inner diameter scales from 50 pixel to 59 pixel */
@keyframes ring3-scale {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.475);
  }
}

@keyframes ring-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ring-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-1 {
  animation: ring-fade-in  .4s ease-out  0s,
             ring-fade-out .5s linear   .4s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-2 {
  animation: ring-fade-in  .4s ease-out .25s,
             ring-fade-out .5s linear   .65s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-3 {
  animation: ring-fade-in  .4s ease-out .5s,
             ring-fade-out .5s linear   .9s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-1 > span {
  animation: ring1-scale   .5s linear   .4s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-2 > span {
  animation: ring2-scale   .5s linear   .65s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-3 > span {
  animation: ring3-scale   .5s linear   .9s;
}



#system-overlay,
#fullscreen-dialog-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

#system-overlay.volume {
  visibility: visible;
}

#windows {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  max-height: 100%;
  border: 0;
  overflow: hidden;
}

#windows .appWindow:not(.homescreen):not(.lockScreenInputWindow)::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: var(--statusbar-height);

  background: rgba(0, 0, 0, .15);
  content: '';
}

#secure-windows {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  max-height: 100%;
  border: 0;
  overflow: hidden;
}

#dialog-overlay {
  position: absolute;
  top: var(--statusbar-height);
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

#screen:-moz-full-screen-ancestor #dialog-overlay,
#dialog-overlay.fullscreen {
  top: 0;
  bottom: 0;
}

#screen:not(.crash-dialog) #crash-dialog,
#screen:not(.trustedui) #trustedui-container {
  display: none;
}

/* `.dialog` is set by system_dialog.js when a dialog is shown */
#screen.dialog #dialog-overlay {
  visibility: visible;
  pointer-events: auto;
}

#screen.crash-dialog #dialog-overlay,
#screen.crash-dialog #crash-dialog,
#screen.modal-dialog #dialog-overlay,
#screen.modal-dialog #modal-dialog,
#screen.popup #popup-container,
#screen.fxa-dialog #fxa-dialog,
#screen.trustedui #trustedui-container,
#screen.trustedui #dialog-overlay {
  visibility: visible;
  pointer-events: auto;
}

#screen.locked #dialog-overlay {
  visibility: hidden;
}

#screen iframe.communication-frame {
  visibility: hidden;
}

@media (min-width: 768px) {
  #dialog-overlay {
    background-color: rgba(0,0,0,0.6);
    background: url(../themes/default/images/ui/menu_bg.png) no-repeat;
  }
}

/* DIALOGS */
/* We'll potentially move this code into the components */

gaia-dialog > .dialog-content {
  padding: 1.8rem;
}