:root {
  --primary-color: transparent;
  --secondary-color: transparent;
  --font-color: transparent;
  --button-font-color: transparent;
  --start-font-color: transparent;
  --countdown-color: transparent;
  --background-countdown-color: transparent;
  --cheese-color: transparent;
  --panel-color: transparent;
  --hover-panel-color: transparent;
  --border-color: transparent;
  --box-color: transparent;
  --gallery-button-color: transparent;
  --background-default: none;
  --background-admin: none;
  --background-chroma: none;
  --background-ipcam: none;
  --fontSize: 16px;
  --preview-rotation: 0deg; }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 200;
  src: local("Dosis ExtraLight"), local("Dosis-ExtraLight"), url(../fonts/dosis/ExtraLight.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  src: local("Dosis Light"), local("Dosis-Light"), url(../fonts/dosis/Light.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: local("Dosis Regular"), local("Dosis-Regular"), url(../fonts/dosis/Regular.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 500;
  src: local("Dosis Medium"), local("Dosis-Medium"), url(../fonts/dosis/Medium.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 600;
  src: local("Dosis SemiBold"), local("Dosis-SemiBold"), url(../fonts/dosis/SemiBold.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 700;
  src: local("Dosis Bold"), local("Dosis-Bold"), url(../fonts/dosis/Bold.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 800;
  src: local("Dosis ExtraBold"), local("Dosis-ExtraBold"), url(../fonts/dosis/ExtraBold.woff) format("woff"); }

* {
  -ms-content-zooming: none;
  box-sizing: border-box; }

html,
body {
  font-size: var(--fontSize);
  width: 100%;
  height: 100%; }

h1,
h2 {
  font-weight: 300; }

h1 {
  font-size: 3rem;
  margin: 33px 0; }

h3 {
  font-weight: normal; }

.deselect ::selection {
  background: transparent;
  color: inherit; }

.deselect ::-moz-selection {
  background: transparent;
  color: inherit; }

.deselect {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

body {
  padding: 0;
  margin: 0;
  font-family: 'Dosis', sans-serif;
  font-weight: 300;
  color: #2b2127;
  font-size: 1em;
  line-height: 1.5;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  overflow: hidden; }

p.text-muted {
  font-size: 0.8em;
  opacity: 0.7; }

.accordion a,
.accordion a:active,
.accordion a:focus {
  color: var(--font-color);
  text-shadow: 0 0 5px black; }

.btn {
  padding: 20px 40px;
  border: 0 none;
  background: var(--primary-color);
  display: inline-block;
  color: var(--button-font-color);
  text-decoration: none;
  margin: auto;
  width: 200px;
  text-align: center;
  font-size: 1em; }
  .btn--small {
    padding: 12px 40px; }
  .btn--tiny {
    padding: 3px 6px; }
  .btn--flex {
    width: auto; }
  .btn--login {
    padding: 12px 18px;
    width: 50%; }
  .btn:active, .btn:focus, .btn:hover {
    background: var(--secondary-color); }

.btn.save-btn,
.btn.install-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  -ms-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear; }
  .btn.save-btn i,
  .btn.install-btn i {
    display: none; }
  .btn.save-btn:active, .btn.save-btn:focus,
  .btn.install-btn:active,
  .btn.install-btn:focus {
    outline: none; }
  .btn.save-btn span,
  .btn.install-btn span {
    display: none; }
    .btn.save-btn span.sv,
    .btn.install-btn span.sv {
      display: inline; }
  .btn.save-btn.error span.sv,
  .btn.save-btn.success span.sv,
  .btn.save-btn.saving span.sv,
  .btn.install-btn.error span.sv,
  .btn.install-btn.success span.sv,
  .btn.install-btn.saving span.sv {
    display: none; }
  .btn.save-btn.saving i,
  .btn.install-btn.saving i {
    display: inline-block; }
  .btn.save-btn.error,
  .btn.install-btn.error {
    background-color: #d93939 !important; }
    .btn.save-btn.error span.er,
    .btn.install-btn.error span.er {
      display: inline; }
  .btn.save-btn.success,
  .btn.install-btn.success {
    background-color: #81d939 !important; }
    .btn.save-btn.success span.su,
    .btn.install-btn.success span.su {
      display: inline; }

@media screen and (max-width: 1024px) {
  .takePic,
  .takeCollage {
    padding: 10px 10px; } }

.loginbody {
  display: block;
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  background-image: var(--background-admin);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; }

input[type='text'],
input[type='password'] {
  color: var(--font-color);
  background: var(--box-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  width: 100%;
  padding: 0 10px; }

.login-panel {
  color: var(--font-color);
  width: calc(31.25 * 1em);
  padding: 30px 30px 90px;
  height: auto;
  margin: 50px auto;
  background: var(--panel-color);
  position: relative;
  max-width: 100%; }

.password-toggle {
  float: right;
  margin-left: -25px;
  margin-top: 5px;
  position: relative;
  z-index: 2; }
