* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

p, label {
  font-size: 14px;
}

h1, h2 {
  margin: 0.5rem 0 0.5rem 0;
}

* + p {
  margin-top: 0.5em;
}

ol {
  margin-left: 2em;
}

ol > li {
  margin-top: 0.5em;
}

input[type=text], input[type=password], input[type=datetime-local] {
  padding: 0.5em;
}

button {
  font-family: Arial, sans-serif;
}

html, body {
  height: 100%;
}

.main {
  padding: 1rem 1rem;
  display: flex;
  justify-content: center;
}
.main--shoppa {
  user-select: none;
  padding: 14px 15px;
  height: 100%;
}

header {
  background: #324d5e;
  color: #cfdefc;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
header .app__logo {
  font-family: Arial, sans-serif;
  font-size: 3rem;
  cursor: pointer;
}
header a {
  margin-top: auto;
  margin-bottom: auto;
  color: #cfdefc;
}
header .user__menu {
  margin-top: auto;
  margin-bottom: auto;
}
header .user__menu li {
  list-style-type: none;
  text-align: end;
}
header .user__menu li .user__greetings {
  font-size: 0.85rem;
  color: #8d9ebf;
}
header .user__menu li a {
  text-decoration: none;
  color: #cfdefc;
}

footer {
  background: #324d5e;
  color: #cfdefc;
  margin: 1rem 0 0 0;
  padding: 1rem;
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  width: 100%;
}
footer a {
  color: #cfdefc;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

textarea {
  color: #fcfcfc;
  font-family: Arial, sans-serif;
  background: #5682a1;
  padding: 0.5em;
  min-height: 10em;
  width: 100%;
  border-style: none;
  outline: none;
  resize: none;
  cursor: auto;
}

textarea::placeholder {
  color: #cfdefc;
}

input {
  color: #fcfcfc;
  font-family: Arial, sans-serif;
  background-color: #5682a1;
  padding: 0.5em;
  border-style: none;
  outline: none;
}

input[type=radio]:checked {
  background-color: #fcfcfc;
}

input[type=radio] {
  appearance: none;
  padding: 3px;
  margin-top: 3px;
  height: fit-content;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid #345569;
  box-shadow: 0 0 0 1px #fcfcfc;
}

select {
  width: 100%;
  color: #fcfcfc;
  font-family: Arial, sans-serif;
  background: #5682a1 url("../../Images/DownArrow.svg") no-repeat right 5px center;
  background-size: auto 5px;
  border: none;
  padding: 0.4rem 0.5rem;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
select::-ms-expand {
  display: none;
}

.button {
  padding: 5px 9px 6px;
  min-height: 27px;
  min-width: 100px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  border: none;
  text-decoration: none;
  cursor: default;
  background: #61a5b3;
  color: #fcfcfc;
}
.button:hover {
  background: #74b5c2;
}
.button--submit {
  background: #7db427;
}
.button--submit:hover {
  background: #94d03e;
}
.button--cancel {
  background: #377396;
}
.button--cancel:hover {
  background: #3a88b5;
}
.button + .button {
  margin-left: 7px;
}

.submit__buttons {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.submit__buttons .button {
  font-size: 0.875rem;
}
.submit__buttons__shoppa {
  justify-content: flex-end;
  margin-top: 15px;
}

*::-webkit-scrollbar {
  width: 17px;
}

*::-webkit-scrollbar-track {
  background: #2b4453;
}

*::-webkit-scrollbar-thumb {
  background: #3e728d;
  border: 2px solid #2b4453;
}

*::-webkit-scrollbar-thumb:hover {
  background: #477f9a;
}

*::-webkit-scrollbar-button:single-button {
  display: block;
  border-style: none;
  height: 17px;
  width: 17px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 5px;
  background-color: #2b4453;
}

*::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("../../Images/UpArrowBlue.svg");
}

*::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("../../Images/DownArrowBlue.svg");
}

.loading__animation {
  user-select: none;
  background: #3a6177;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading__animation img {
  display: block;
  width: 85px;
}

.groupbox {
  background: #324d5e;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
}
.groupbox > label {
  font-size: 14px;
  height: 15px;
  width: 100%;
  margin: 6px 9px 7px;
}
.groupbox > .groupbox__content {
  display: flex;
  flex: auto;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
  padding: 10px;
  background: #345569;
}
.groupbox > .text__danger {
  padding-left: 10px;
  padding-bottom: 5px;
  font-size: 12px;
  color: #ed9280;
  background: #345569;
}
.groupbox--single > .groupbox__content {
  padding: 15px;
}
.groupbox + .groupbox {
  margin-top: 10px;
}

.home--index {
  font-family: Arial, sans-serif;
  color: #fcfcfc;
  background: #3a6177;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home--index .main {
  padding: 0 0.5rem;
  flex-direction: column;
}
.home--index .main a {
  color: #fcfcfc;
}
@media screen and (min-width: 50rem) {
  .home--index .articles {
    display: flex;
    flex-direction: row;
    margin: auto;
    justify-content: center;
  }
  .home--index article {
    flex: 0 1 30rem;
  }
  .home--index article > h2 {
    text-align: center;
  }
  .home--index article + article {
    margin-left: 2rem;
  }
}
.home--index .welcome__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}
.home--index .goodluck__text {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.post--index {
  font-family: Arial, sans-serif;
  color: #fcfcfc;
  background: #3a6177;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*.image__alt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      margin: 0 auto;
      min-width: 10em;
      background-color: $color-overlay-light-300;
      border: none;
  }*/
}
.post--index .post__container {
  min-height: 0;
  min-width: 0;
  max-width: 80rem;
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: column-reverse;
  justify-content: center;
}
@media screen and (min-width: 50rem) {
  .post--index .post__container {
    flex-direction: row-reverse;
    justify-content: center;
  }
}
.post--index .post__container__details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.post--index .post__container__details .submit__buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}
.post--index .post__container__details .submit__buttons .button + .button {
  margin-left: 1rem;
}
@media screen and (max-width: 50rem) {
  .post--index .post__container__details {
    margin-top: 10px;
  }
}
@media screen and (min-width: 50rem) {
  .post--index .post__container__details {
    margin-left: 10px;
  }
}
.post--index .post__container__images {
  background: #345569;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 50%;
  scrollbar-color: #3e728d #2b4453;
}
.post--index .post__container__images .post__image {
  width: 191px;
  height: fit-content;
}
@media screen and (max-width: 50rem) {
  .post--index .post__container__images .post__image {
    width: 240px;
  }
}
.post--index .post__container__images .post__image img, .post--index .post__container__images .post__image video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.post--index .post__container__images .post__image:only-child {
  max-width: 100%;
  height: 100%;
  flex-grow: 1;
}
.post--index .main.main--shoppa .post__container__images {
  min-height: 0rem;
}
.post--index .main .post__container__images {
  min-height: 28rem;
}
.post--index #post-container {
  justify-content: space-between;
  align-content: flex-start;
  flex-direction: row;
}
@media screen and (max-width: ) {
  .post--index #post-container {
    justify-content: flex-start;
  }
}
.post--index .posted__container {
  min-height: 0;
  min-width: 0;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.post--index .posted__container .posted__images {
  min-width: 24rem;
  max-width: 24rem;
  background: #345569;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.post--index .posted__container .posted__images .post__image {
  width: 191px;
  height: fit-content;
}
@media screen and (max-width: 50rem) {
  .post--index .posted__container .posted__images .post__image {
    width: 240px;
  }
}
.post--index .posted__container .posted__images .post__image img, .post--index .posted__container .posted__images .post__image video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding-right: 0.25rem;
}
.post--index .posted__container .posted__images .post__image:only-child {
  max-width: 100%;
  height: 100%;
  flex-grow: 1;
}
@media screen and (min-width: 50rem) {
  .post--index .posted__container .posted__images {
    flex-basis: 11rem;
    flex-grow: 0;
    flex-shrink: 1;
  }
}
.post--index .footer__buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}
@media screen and (max-width: 50rem) {
  .post--index .footer__buttons {
    margin-top: 12px;
    margin-bottom: 13px;
  }
}

.result--body {
  font-family: Arial, sans-serif;
  color: #fcfcfc;
  background: #3a6177;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.result--body .result__container {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}
.result--body .result__container .copy__buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.result--body .result__container .copy__buttons .button + .button {
  margin-left: 15px;
}
.result--body .result__container p {
  text-align: center;
}
.result--body .result__container img {
  margin-top: 2rem;
  width: 32px;
}

.select-facebook-page {
  font-family: Arial, sans-serif;
  color: #fcfcfc;
  background: #3a6177;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.select-facebook-page__container {
  min-height: 0;
  min-width: 0;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 50rem) {
  .select-facebook-page__container {
    flex-direction: row-reverse;
  }
}
.select-facebook-page .select__description {
  margin-bottom: 1rem;
}
.select-facebook-page .pages__list {
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
}
.select-facebook-page .pages__list .facebook__page {
  display: flex;
  justify-content: flex-start;
}
.select-facebook-page .pages__list .facebook__page label {
  width: 100%;
  padding: 0 0.5em;
}
@media screen and (min-width: 50rem) {
  .select-facebook-page .pages__list .facebook__page {
    flex-grow: 0;
    flex-shrink: 1;
  }
}
.select-facebook-page .pages__list .facebook__page + .facebook__page {
  margin-top: 1em;
}
@media screen and (max-width: 50rem) {
  .select-facebook-page .pages__list {
    margin-bottom: 1rem;
  }
}
.select-facebook-page .footer__buttons {
  display: flex;
  justify-content: space-between;
}
.select-facebook-page .footer__buttons .change__account {
  margin-top: 15px;
}

.login__page {
  font-family: Arial, sans-serif;
  color: #fcfcfc;
  background: #3a6177;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login__page .login__container {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login__page .login__container .login__form {
  flex-grow: 1;
  min-width: 20rem;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
}
.login__page .login__container .login__form .shoppa__logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.login__page .login__container .login__form .text__danger {
  color: #ed9280;
}
.login__page .login__container .login__form .login__button button {
  width: -webkit-fill-available;
  width: -moz-available;
  font-size: 0.875rem;
  margin: 0.5rem 0;
}

.information-page {
  font-family: Arial, sans-serif;
  color: #fcfcfc;
  background: #3a6177;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.information-page__container {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.information-page__container p {
  text-align: center;
}
.information-page__container .submit__buttons {
  justify-content: center;
}