body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: roboto;
  font-size: 14px;
  font-weight: 400;
  color: #1A2123;
}
body {
  background-color: #f1f1f1;
}

/**
 * COMMONS
 */

/**
  * Theme colors
  *
 - primary: #8378F4
 - secondary: #4E4BC6
 - success: #4CAF50
 - error: #F44336
 - grey: #E6E7E8
 - black: #1A2123
 - bckgrdDark: #424242
*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:focus, a:active {
  text-decoration: none;
  outline: none;
}

.primary {
  color: #8378F4;
}
.secondary {
  color: #4E4BC6;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background: url("../images/commons/icon-date-range-black.svg") center/80% no-repeat;
  color: rgba(0, 0, 0, 0);
}
input[type="time"]::-webkit-calendar-picker-indicator {
  background: url("../images/commons/icon-time-black.svg") center/80% no-repeat;
  color: rgba(0, 0, 0, 0);
}

.theme-night input:-webkit-autofill,
.theme-night input:-webkit-autofill:hover,
.theme-night input:-webkit-autofill:focus,
.theme-night input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #FFFFFF!important;
}
.theme-night input[type="date"]::-webkit-calendar-picker-indicator,
.theme-night input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background: url("../images/commons/icon-date-range-white.svg") center/80% no-repeat;
  color: rgba(0, 0, 0, 0);
}
.theme-night input[type="time"]::-webkit-calendar-picker-indicator {
  background: url("../images/commons/icon-time-white.svg") center/80% no-repeat;
  color: rgba(0, 0, 0, 0);
}
.theme-night .App-progress-wrapper {
  background-color: #424242;
}
.theme-light .App-progress-wrapper {
  background-color: #E6E7E8;
}
.theme-night {
  color: #FFFFFF;
}


/* root */
#actarus-root {
  height: 100%;
  width: 100%;
}
.App {
  height: 100%;
  width: 100%;
}
.App.loading {
  overflow: hidden;
}
.App-progress-wrapper {
  width: 100%;
  overflow: hidden;
}
.App-main {
  height: 100%;
  padding-top: 56px;
}
.App-router {
  height: 100%;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .App-main {
    padding-left: 200px;
    padding-top: 64px;
  }
}

/* forms */
.field-wrapper {
  width: 100%;
  margin-bottom: 27px;
}
.css-16pqwjk-indicatorContainer {
  padding: 0 8px!important;
  cursor: pointer;
}

/* others */
.scroll-to-top-btn {
  display: none;
  position: fixed;
  right: 20px;
  z-index: 8000;
  bottom: 20px;
}
.error-message {
  color: #F44336;
  margin-top: 20px;
}
.medium {
  font-weight: 500;
}
.bold {
  font-weight: 600;
}
.lg-space {
  display: block;
  height: 100px;
}
.md-space {
  display: block;
  height: 50px;
}
.sm-space {
  display: block;
  height: 25px;
}
.xs-space {
  display: block;
  height: 15px;
}
.xxs-space {
  display: block;
  height: 7px;
}
.btn-right-wpr {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: right;
}
#frame-payment {
  border: 0;
  box-shadow: none;
}

/* lists */

/* dev */
.react-hot-loader-error-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.error-list {
  display: block;
  text-align: center;
  margin: auto;
  max-width: 730px;
}
code {
  background: rgba(78, 75, 198, 0.05);
  display: inline-block;
  padding: 8px;
  border: 1px solid rgba(78, 75, 198, 0.1);
  border-radius: 4px;
}
code pre {
  margin: auto;
}
.loader-wpr {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  font-size: 12px;
  color: #b1b1b1;
}

/* KEYFRAMES */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fade-out {
  -webkit-animation: fadeOut 400ms;
  -moz-animation: fadeOut 400ms;
  -ms-animation: fadeOut 400ms;
  -o-animation: fadeOut 400ms;
  animation: fadeOut 400ms;
}

@keyframes pulse {
  0% {
    background-color: #dbdbdb;
    transform: scale(0.5);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    background-color: #dbdbdb;
    transform: scale(0.5);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}
@-webkit-keyframes pulse {
  0% {
    background-color: #dbdbdb;
    transform: scale(0.5);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}
@-ms-keyframes pulse {
  0% {
    background-color: #dbdbdb;
    transform: scale(0.5);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}
@-o-keyframes pulse {
  0% {
    background-color: #dbdbdb;
    transform: scale(0.5);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}
.avatar-pulse {
  -webkit-animation: pulse infinite 1s;
  -moz-animation: pulse infinite 1s;
  -ms-animation: pulse infinite 1s;
  -o-animation: pulse infinite 1s;
  animation: pulse infinite 1s;
}