:root {
  --white--600: #ffffff;
  --white--500: #fbfbfb;
  --white--400: #f8f8f8;
  --white--300: #f3f3f3;
  --gray--600: #bebebe;
  --gray--500: #cecece;
  --gray--400: #e0e0e0;
  --gray--300: #efefef;
  --black--600: #545454;
  --black--500: #605f5f;
  --black--400: #747373;
  --black--300: #a8a6a6;
  --turquoise--700: #39b2ab;
  --turquoise--600: #3cc9c0;
  --turquoise--500: #8fd9d4;
  --turquoise--400: #a5ece8;
  --turquoise--300: #cff0ee;
  --blueberry--700: #1c81d4;
  --blueberry--600: #2491eb;
  --blueberry--500: #4cadfd;
  --blueberry--400: #85c7fe;
  --blueberry--300: #bcdaf3;
  --dragon-fruit--700: #b5409b;
  --dragon-fruit--600: #d44cb6;
  --dragon-fruit--500: #ea76d0;
  --dragon-fruit--400: #eea4de;
  --dragon-fruit--300: #efcee8;
  --grape--700: #856fe1;
  --grape---600: #9980fe;
  --grape--500: #b19dff;
  --grape--400: #c7bafc;
  --grape--300: #e5dfff;
  --lemon--700: #ddbb09;
  --lemon--600: #fed602;
  --lemon--500: #fee250;
  --lemon--400: #ffeb7e;
  --lemon--300: #fff4ba;
  --warning--700: #d62b49;
  --warning--600: #f03d5d;
  --warning--500: #fb5c78;
  --warning--400: #f67e94;
  --warning--300: #fcc6d0;
  --caution--700: #d86800;
  --caution--600: #e66f00;
  --caution--500: #ffa34d;
  --caution--400: #ffb46f;
  --caution--300: #ffddbd;
  --success--700: #179765;
  --success--600: #0fb575;
  --success--500: #2fcc8f;
  --success--400: #94dec1;
  --success--300: #daede6;
  --denim--700: #04306b;
  --denim--600: #1e4374;
  --denim--500: #295a9a;
  --denim--400: #3c74bf;
  --denim--300: #c9d8eb;

  --temporary-primary: #01fff0;
  --temporary-background: #2d2d2d;
}

.polly-bond {
  color: var(--white--600);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

.polly-bond a {
  color: var(--white--600);
}

.polly-bond a:active,
.polly-bond a:focus,
.polly-bond a:hover {
  color: var(--temporary-primary);
}

.polly-bond.container {
  margin: auto;
  max-width: 800px;
}

.polly-bond .polly-bond__content-container {
  background-color: var(--temporary-background);
  margin-top: 55px;
}

@media screen and (max-width: 768px) {
  .polly-bond.container {
    height: 100%;
  }

  .polly-bond .polly-bond__content-container {
    margin-top: 0;
    height: 100%;
  }
}

.polly-bond .primary,
.polly-bond .input-group .input-group-prepend.primary {
  color: var(--temporary-primary);
}

.polly-bond .primary .px-icon {
  color: currentColor;
  fill: currentColor;
  font-size: 1.125em;
  width: 18px;
  height: 18px;
  margin: auto;
}

.polly-bond .form-group {
  border-bottom: 1px solid var(--black--300);
}

.polly-bond .form-control-actions {
  font-size: 12px;
}

.polly-bond .input-group input {
  background-color: transparent;
  border-width: 0;
  color: var(--white--300);
}

.polly-bond .polly-bond__checkbox {
  cursor: pointer;
  padding-left: 24px;
}

.polly-bond .polly-bond__checkbox input[type='checkbox'] {
  position: absolute;
  height: 0;
  left: 0;
  width: 0;
  cursor: default;
}

.polly-bond .polly-bond__checkbox .polly-bond__checkbox_input {
  border-radius: 0.25em;
  height: 25px;
  left: 0;
  position: absolute;
  /* top: 0; */
  width: 25px;
}

.polly-bond .btn.btn-primary {
  background-color: var(--temporary-primary);
  border-color: var(--temporary-primary);
  color: var(--black--600);
  font-size: 16px;
}

.polly-bond .btn.btn-primary:not([disabled]):not(.disabled).active,
.polly-bond .btn.btn-primary:not([disabled]):not(.disabled):active {
  background-color: var(--turquoise--500);
  color: var(--black--500);
}

.polly-bond .hero-container {
  background-color: var(--temporary-background);
  font-weight: 400;
  display: inline-block;
  overflow: hidden;
}

.polly-bond .hero-container .hero-message {
  font-size: 1.375em;
  position: absolute;
  right: 0;
  top: 20%;
}

.polly-bond .hero-container .hero-image {
  bottom: 0;
  filter: saturate(0);
  opacity: 0.6;
  position: absolute;
  right: -50%;
  vertical-align: bottom;
  width: 800px;
}

.polly-bond .login-remember .custom-control.custom-checkbox {
  padding-left: 3em;
}

.polly-bond .login-remember .custom-control.custom-checkbox .custom-control-label {
  margin: auto;
}

.polly-bond
  .login-remember
  .custom-control.custom-checkbox
  .custom-control-label::before {
  border-color: var(--temporary-primary);
  border-radius: 4px;
  height: 18px;
  width: 18px;
}

.polly-bond
  .login-remember
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background-color: var(--temporary-primary);
}

.polly-bond .login-remember .custom-control-input:checked ~ .custom-control-label::after {
  color: var(--black--600);
  height: 16px;
  width: 16px;
  top: -2px;
}

.polly-bond .copy {
  color: var(--black--600)
}