/*Breakpoints*/
/*All the colours within the design that can be used*/
.color-primary {
  color: #3f5b58;
}
.color-secondary {
  color: #FFFFFF;
}
.color-tertiery {
  color: #000;
}
.color-tertiaryOpaque {
  color: rgba(0, 0, 0, 0.5);
}
.color-quaternary {
  color: #8d1b3d;
}
.color-octonary, .icon-logo {
  color: rgb(200, 16, 16);
  -webkit-filter: invert(19%) sepia(55%) saturate(4445%) hue-rotate(337deg) brightness(85%) contrast(107%);
          filter: invert(19%) sepia(55%) saturate(4445%) hue-rotate(337deg) brightness(85%) contrast(107%);
}
@media (min-width: 768px) {
  .color-pcPrimary {
    color: #3f5b58;
  }
}
@media (min-width: 768px) {
  .color-pcSecondary {
    color: #FFFFFF;
  }
}
@media (min-width: 768px) {
  .color-pcTertiary {
    color: #000;
  }
}

/*How the various typografies should look. There is a basic one, defining font and color, and then a list of exceptions.*/
html,
body {
  font-size: 1rem;
  line-height: 1.55rem;
  color: #000;
  font-family: verdana;
}

h1 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5rem;
}
@media (min-width: 768px) {
  h1 {
    line-height: 0.8rem;
  }
}

h2 {
  font-size: 0.938rem;
  line-height: 1.356rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  h2 {
    line-height: 0.8rem;
  }
}

p.small {
  font-size: 0.75rem;
  line-height: 1.16rem;
}

p.medium {
  font-size: 0.875rem;
  line-height: 1.356rem;
}

p.notBold {
  font-weight: normal;
}

/*Defines that there should be content if the user is on tablet or larger screen*/
.lg-view {
  display: none;
}
@media (min-width: 768px) {
  .lg-view {
    display: block;
  }
}

/*Defines that there should be content if the user is on a mobile screen or any screen smaller than a tablet*/
.sm-view {
  display: block;
}
@media (min-width: 768px) {
  .sm-view {
    display: none;
  }
}

/*Various ways that divs and content in general can be placed on the page*/
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.alignCenter {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  text-align: right;
}

.left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  text-align: left;
}

.spaceBetween {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.bottom {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (min-width: 768px) {
  .pcLeft {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    text-align: left;
  }
}

@media (min-width: 768px) {
  .pcRight {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    text-align: right;
  }
}

/*How a link should loog in general*/
a {
  font-size: 0.75rem;
  line-height: 1.75rem;
  text-decoration: underline;
  color: #3f5b58;
}
a:hover {
  color: rgba(63, 92, 89, 0.5);
}

/*When a link contains a button*/
a.containButton {
  text-decoration: none;
}

/*When there should be space on both sides of the link*/
a.sideSpacing {
  margin: auto 2rem;
}

/*When the link is part of the text*/
a.text {
  font-size: 1rem;
  line-height: 1.55rem;
}

/*When a link should be the secondary color on any device that isn't a mobile*/
@media (min-width: 768px) {
  a.pcSecondary {
    color: #FFFFFF;
  }
  a.pcSecondary:hover {
    color: rgba(255, 255, 255, 0.5);
  }
}

/*When a link should have no decoration, e.i. no underlining*/
a.noDecoration {
  text-decoration: none;
}

/*When a link is beneath an input field (mail, password, etc.) and should look like a the class "description", but as a link*/
a.linkDescription {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: right;
  margin: -1.563rem 0 0.563rem;
}

a.socialProviders {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-style: solid;
  border-width: 0.15rem;
  border-color: #3f5b58;
  font-weight: bold;
  background-color: #FFFFFF;
  color: #3f5b58;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  height: 2.188rem;
  border-radius: 0.62rem;
  text-decoration: none;
}
@media (min-width: 768px) {
  a.socialProviders {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  a.socialProviders {
    height: 2.43rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  a.socialProviders {
    height: 2.6rem;
    line-height: 0.5rem;
  }
}

/*Sudo class informing the width of the button on non-mobile devices the button isn't the first or the last button with this class*/
@media (min-width: 1024px) {
  a.socialProviders:not(:first-child:last-child) {
    width: 10rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  a.socialProviders:not(:first-child:last-child) {
    width: 8.9rem;
  }
}

/*Sudo class informing how the button should look on non-mobile if it is the last button with this class, though this shouldnt be applied to the first class*/
@media (min-width: 768px) {
  a.socialProviders:last-child:not(:first-child) {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
  }
}

/*How it should look when the mouse is hovering over the button*/
a.socialProviders:hover {
  border-color: rgba(63, 92, 89, 0.5);
}

/*Different types of spacing that can be applied based on the rest of the design*/
/*Should be aplied in the content div when there is a need for a larger space between the content of the div and the top of the content div container*/
@media (min-width: 768px) {
  .contentTop {
    /*padding-top: 9.563rem;*/
    padding-top: 9.7rem;
  }
}

/*Should be aplied in the functionality div when there is a need for a larger space between the content of the div and the top of the functionality div container*/
@media (min-width: 768px) {
  .funcTop {
    padding-top: 1rem;
  }
}

/*Should be aplied in the footer div when there is a need for a larger space between the content of the div and the top of the footer div container*/
.footerTop {
  margin-top: 1.563rem;
}

/*Can be used whenever there is a need for minor spacing in a div, when the user is on any device that isn't a mobile*/
@media (min-width: 768px) {
  .pcMinorSpaceTop {
    margin-top: 0.5rem;
  }
}

/*How a list (often text) should look*/
li {
  font-size: 0.875rem;
  line-height: 1.356rem;
  list-style-position: outside;
  margin-left: 1.938rem;
}

/*How various messeage types should look*/
/*If an action was a success*/
.success {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(63, 92, 89, 0.1);
  border-style: solid;
  border-color: rgba(63, 92, 89, 0.7);
  border-width: 0.125rem;
  min-height: 2.8rem;
  width: 21.338rem;
  margin-bottom: 0rem;
  font-size: 0.75rem;
  color: rgb(89, 126, 80);
  font-weight: bold;
  line-height: 1rem;
}
@media (min-width: 768px) {
  .success {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (min-width: 1024px) {
  .success {
    width: 22.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .success {
    max-width: 20rem;
    margin: 0rem 0.1rem;
  }
}

/*If the user is given a neutral messeage or somehing to be aware of, i.e. that they have to create a 2-factor authentication*/
.message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(245, 130, 30, 0.1);
  border-style: solid;
  border-color: rgba(245, 130, 30, 0.7);
  border-width: 0.125rem;
  min-height: 2.8rem;
  width: 21.338rem;
  margin-bottom: 0rem;
  font-size: 0.75rem;
  color: rgb(245, 130, 30);
  font-weight: bold;
  line-height: 1rem;
}
@media (min-width: 768px) {
  .message {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (min-width: 1024px) {
  .message {
    width: 22.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .message {
    max-width: 20rem;
    margin: 0rem 0.1rem;
  }
}

/*If there was an error*/
.error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(200, 16, 46, 0.1);
  border-style: solid;
  border-color: rgba(200, 16, 46, 0.5);
  border-width: 0.125rem;
  min-height: 2.8rem;
  max-height: 3rem;
  width: 21.338rem;
  margin-bottom: 0rem;
  font-size: 0.75rem;
  color: rgb(200, 16, 46);
  font-weight: bold;
  line-height: 1rem;
}
@media (min-width: 768px) {
  .error {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (min-width: 1024px) {
  .error {
    width: 22.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .error {
    max-width: 20rem;
    margin: 0rem 0.1rem;
  }
}

.alert-warning {
  background-color: transparent;
}

/*How the overall strucure of the body should look*/
body {
  overflow-y: auto;
  text-align: center;
  max-width: 100vw;
  overflow-x: hidden;
  margin-left: auto;
  margin-right: auto;
}

/*Counteracts a class in keycloaks own theme. If it is not there, the layout will not match reset.fak.dk*/
* {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

/*How overall body should be structured when the user is on non-mobile devices. 
Information from the body class that is not explicitly countered here will be carried over to the design.*/
@media (min-width: 768px) {
  .loginFlow {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto auto 1fr auto;
    grid-template-rows: auto auto auto 1fr auto;
        grid-template-areas: "content header" "content headline" "content info" "content functionality" "footer links";
    border-style: solid;
    border-width: 0.15rem;
    border-color: #3f5b58;
  }
}
@media (min-width: 1024px) {
  .loginFlow {
    min-height: 39.588rem;
    width: 58.125rem;
    margin: 1.5rem auto 0rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .loginFlow {
    min-height: 39.588rem;
    margin: 1.5rem 0.5rem 0rem;
  }
}

/*How headers should look on mobile and non-mobile devices*/
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  height: 5rem;
}
@media (min-width: 768px) {
  header {
    grid-area: header;
    height: 6.688rem;
  }
}

/*How headlines should look on mobile devices*/
.headline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 1.25rem;
  padding-left: 4.125rem;
  padding-right: 4.125rem;
}

/*How headlines should look on non-mobile devices on loginFlow bodys*/
@media (min-width: 768px) {
  .pcHeadline {
    grid-area: headline;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 3.1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pcHeadline {
    margin: 0rem 1rem;
  }
}

/*How info divs should look on mobile and non-mobile devices. Is used as a space for messeages*/
.info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 3.5rem;
}
@media (min-width: 768px) {
  .info {
    grid-area: info;
    text-align: left;
  }
}

/*How sections contaning information should look*/
.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #3f5b58;
  border-radius: 0.62rem;
  height: 8.438rem;
  padding: 1.125rem 2.813rem;
  margin: auto 0.1rem 2.188rem;
}

/*How sections contaning information should look when on a non-mobile device when it is on a loginFlow*/
@media (min-width: 768px) {
  .pcContent {
    grid-area: content;
    background-color: #3f5b58;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    text-align: left;
    border-radius: 0rem;
    height: auto;
    padding-top: 2.75rem;
    padding-left: 1.938rem;
    padding-right: 3.375rem;
    margin: 0rem;
  }
}

/*How divs containing functionality (such as forms) should look on a mobile device*/
.functionality {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

/*How divs containing functionality (such as forms) should look on a non-mobile device in loginFlow body*/
@media (min-width: 768px) {
  .pcFunctionality {
    grid-area: functionality;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: left;
  }
}

/*How footers should look when on mobile devices*/
footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-grid-column-align: center;
      justify-self: center;
  margin: 0rem 1.719rem;
}

/*How fotters should look in loginflow on non-mobile devices*/
@media (min-width: 768px) {
  footer.pcLogin {
    grid-area: footer;
    background-color: #3f5b58;
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill;
    margin: auto auto auto;
    text-align: left;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 5.688rem;
    padding-left: 1.938rem;
    padding-right: 3.375rem;
  }
}

/*How pcLinks should look on mobile and non-mobile devices. Is used as a sort of footer for the right side of loginFlow*/
.pcLinks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .pcLinks {
    grid-area: links;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 5.688rem;
    margin-top: 0rem;
  }
}
@media (min-width: 768px) {
  header {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .pcHeadline {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  .info {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
  .pcContent {
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    -ms-grid-column: 1;
  }
  .pcFunctionality {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
  }
  footer.pcLogin {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .pcLinks {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
  }
}

.icon-logo {
  /*How the logo should look*/
  content: "";
  background-image: url(../img/fsvLogo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 2.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 2rem;
}
@media (min-width: 768px) {
  .icon-logo {
    height: 3.85rem;
    margin-top: 1.375rem;
    margin-bottom: 1.375rem;
    margin-left: 2.75rem;
  }
}
.icon-krone {
  /*How the crown in the content section should look an screens smaller than a tablet*/
  content: "";
  background-image: url(../img/krone.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (min-width: 768px) {
  .icon-krone {
    background-image: none;
  }
}
.icon-pcKrone {
  /*How the crown in the content section should look on non-monile devices*/
}
@media (min-width: 768px) {
  .icon-pcKrone {
    content: "";
    background-image: url(../img/krone.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: bottom;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .icon-pcKrone {
    background-size: 30rem;
    background-position: bottom;
  }
}
.icon-qrCode {
  /*How the mitID logo should look*/
  width: 7.938rem;
  height: 7.938rem;
}
.icon-mitID {
  /*How the mitID logo should look*/
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  height: 2.938rem;
  width: 5.25rem;
  margin-right: 1.813rem;
}
@media (min-width: 768px) {
  .icon-mitID {
    height: 3.438rem;
    width: 6.188rem;
  }
}
.icon-mail {
  /*How the mail icon should look*/
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  height: 2rem;
  width: 3.125rem;
  margin-right: 1.813rem;
}
@media (min-width: 768px) {
  .icon-mail {
    height: 2.375rem;
    width: 3.688rem;
  }
}
.icon-2Faktor {
  /*How the two factor icon should look*/
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  height: 2.189rem;
  width: 2.888rem;
  margin-right: 1.813rem;
}
@media (min-width: 768px) {
  .icon-2Faktor {
    height: 2.806rem;
    width: 3.701rem;
  }
}

/*How inputs with the types text, password and email should look*/
input[type=text],
[type=password],
[type=email] {
  border-color: #3f5b58;
  border-radius: 0.625rem;
  font-family: verdana;
  font-weight: bold;
  font-size: 0.75rem;
  height: 2.188rem;
  width: 20.338rem;
  margin-bottom: 1.563rem;
  padding: 0rem 0rem 0rem 0.6rem;
}
input[type=text]::-webkit-input-placeholder, [type=password]::-webkit-input-placeholder, [type=email]::-webkit-input-placeholder {
  opacity: 0.7;
}
input[type=text]::-moz-placeholder, [type=password]::-moz-placeholder, [type=email]::-moz-placeholder {
  opacity: 0.7;
}
input[type=text]:-ms-input-placeholder, [type=password]:-ms-input-placeholder, [type=email]:-ms-input-placeholder {
  opacity: 0.7;
}
input[type=text]::-ms-input-placeholder, [type=password]::-ms-input-placeholder, [type=email]::-ms-input-placeholder {
  opacity: 0.7;
}
input[type=text]::placeholder,
[type=password]::placeholder,
[type=email]::placeholder {
  opacity: 0.7;
}
@media (min-width: 768px) {
  input[type=text],
  [type=password],
  [type=email] {
    height: 2.438rem;
    margin-bottom: 1.3rem;
  }
}
@media (min-width: 1024px) {
  input[type=text],
  [type=password],
  [type=email] {
    width: 23rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  input[type=text],
  [type=password],
  [type=email] {
    min-width: 18rem;
    max-width: 22rem;
  }
}

/*How inputs with the type button should look*/
input[type=button] {
  cursor: pointer;
  background-color: #3f5b58;
  border-width: 0rem;
  border-radius: 0.625rem;
  font-family: verdana;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 1rem;
  height: 2.43rem;
  width: 20.938rem;
  margin-bottom: 1.563rem;
  padding: 0.1rem;
}
@media (min-width: 768px) {
  input[type=button] {
    height: 2.688rem;
    margin-top: 0.188rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  input[type=button] {
    width: 23.65rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  input[type=button] {
    min-width: 18.65rem;
    max-width: 22.65rem;
  }
}

/*A sudo class for buttons when the users mouse hovers over the button*/
input[type=button]:hover {
  background-color: rgba(63, 92, 89, 0.9);
}

/*A sudo class for buttons when the users can't click the button*/
input[type=button]:disabled {
  background-color: rgba(63, 92, 89, 0.5);
}

/*How inputs with the type submit should look*/
input[type=submit] {
  cursor: pointer;
  background-color: #3f5b58;
  border-width: 0rem;
  border-radius: 0.625rem;
  font-family: verdana;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 1rem;
  height: 2.43rem;
  width: 20.938rem;
  margin-bottom: 1.563rem;
  padding: 0.1rem;
}
@media (min-width: 768px) {
  input[type=submit] {
    height: 2.688rem;
    margin-top: 0.188rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  input[type=submit] {
    width: 23.65rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  input[type=submit] {
    min-width: 18.65rem;
    max-width: 22.65rem;
  }
}

/*A sudo class for inputs when the users mouse hovers over the input*/
input[type=submit]:hover {
  background-color: rgba(63, 92, 89, 0.9);
}

/*A sudo class for inputs when the users can't click the input*/
input[type=submit]:disabled {
  background-color: rgba(63, 92, 89, 0.5);
}

/*How checkboxs and radio buttons should look*/
input[type=checkbox],
[type=radio] {
  margin: 0rem 0.5rem 0rem 0rem;
}

/*How a button should look in general, primarelt on mobile*/
button {
  cursor: pointer;
  background-color: #3f5b58;
  font-family: verdana;
  color: #FFFFFF;
  border: none;
  border-radius: 0.62rem;
}

/*Miscellaneous design of how a button might look*/
button:hover {
  background-color: rgba(63, 92, 89, 0.9);
}

/*Miscellaneous design of how a button might look*/
.buttonMisc {
  /*Extra info for standard button design, including for desktop and tablet*/
  /*When the button should be short*/
  /*When a button should be taller than normal, e.i. if it has to contain several lines of text*/
  /*How buttons should look when there needs to be a list of them in a relatively contained space.
  On monile devices the button should fill the the given space (with some padding), and on non-mobile devices it should have grow to contain 1 portion of the space*/
  /*Sudo class informing the width of the button on non-mobile devices the button isn't the first or the last button with this class*/
  /*Sudo class informing how the button should look on non-mobile if it is the last button with this class, though this shouldnt be applied to the first class*/
  /*How it should look when the mouse is hovering over the button*/
}
.buttonMisc-standard {
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 20.938rem;
  height: 3rem;
  margin-bottom: 2.188rem;
}
@media (min-width: 768px) {
  .buttonMisc-standard {
    height: 3.625rem;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
  }
}
@media (min-width: 1024px) {
  .buttonMisc-standard {
    width: 23.65rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .buttonMisc-standard {
    min-width: 18.65rem;
    max-width: 22.65rem;
  }
}
.buttonMisc-short {
  width: 7.125rem;
  height: 2.75rem;
}
.buttonMisc-tall {
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 20.938rem;
  height: 3.688rem;
  margin-bottom: 1.563rem;
}
@media (min-width: 768px) {
  .buttonMisc-tall {
    height: 5rem;
    margin-bottom: 1.875rem;
  }
}
@media (min-width: 1024px) {
  .buttonMisc-tall {
    width: 23.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .buttonMisc-tall {
    min-width: 21.5rem;
    max-width: 22.75rem;
  }
}
.buttonMisc-flex {
  text-align: center;
  border-style: solid;
  border-width: 0.15rem;
  border-color: #3f5b58;
  font-family: verdana;
  font-weight: bold;
  background-color: #FFFFFF;
  color: #3f5b58;
  font-size: 0.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  height: 2.188rem;
}
@media (min-width: 768px) {
  .buttonMisc-flex {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: 2.438rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  .buttonMisc-flex:not(:first-child:last-child) {
    width: 10rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .buttonMisc-flex:not(:first-child:last-child) {
    width: 8.9rem;
  }
}
@media (min-width: 768px) {
  .buttonMisc-flex:last-child:not(:first-child) {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
  }
}
.buttonMisc-flex:hover {
  border-color: rgba(63, 92, 89, 0.5);
  background-color: #FFFFFF;
}

/*How the text above an input field should look*/
label {
  font-size: 0.75rem;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/*How the text below an input field should look*/
.description {
  font-size: 0.625rem;
  color: rgba(0, 0, 0, 0.5);
  text-align: right;
  margin: -1.563rem 0 0;
}

/*How a straight line should look. Mainly used for breaking up sections*/
hr {
  color: #3f5b58;
  border-radius: 1rem;
  margin-top: 1.563rem;
  margin-bottom: 1.563rem;
  min-width: 20.938rem;
}

/*How a form should look*/
form {
  width: 21.338rem;
}
@media (min-width: 1024px) {
  form {
    width: 23.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  form {
    max-width: 23.75rem;
    margin: 0rem 0.1rem;
  }
}

/*How vairous types of divs can look*/
.div {
  /*How a div should look on mobile and non-mobile devices, if its content should need be able to align itself, based on its content.
  Primarely used with buttonMisc.*/
}
.div-links {
  /*If the divs purpose is to contain links*/
  min-width: 23.438rem;
}
@media (min-width: 1024px) {
  .div-links {
    min-width: 27rem;
  }
}
.div-func {
  /*If the div is in the functionality section*/
  margin: 0rem 1.719rem;
}
@media (min-width: 768px) {
  .div-func {
    margin: 0rem 0rem;
  }
}
@media (min-width: 1024px) {
  .div-func {
    width: 23.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .div-func {
    /*max-width: 18.65rem;*/
    margin: 0rem 1rem;
  }
}
.div-textSpaceBottom {
  /*If there is need for extra space at the button of a div*/
  margin-bottom: -1rem;
}
.div-socialProviders {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 21.338rem;
  row-gap: 1rem;
}
@media (min-width: 768px) {
  .div-socialProviders {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
    row-gap: 0rem;
  }
}
@media (min-width: 1024px) {
  .div-socialProviders {
    width: 23.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .div-socialProviders {
    max-width: 23.75rem;
    margin: 0rem 0.1rem;
  }
}

/*If there is used a span instead of a div. Primarely used for various messeage types*/
span {
  font-size: 0.75rem;
  line-height: 1.163rem;
}
.span-link {
  font-size: 0.85rem;
}