@font-face {
  font-family: 'Avenir-Medium';
  src: url("/fonts/Avenir-Medium.ttf");
}

@font-face {
  font-family: 'Avenir-Book';
  src: url("/fonts/Avenir-Book.ttf");
}

@font-face {
  font-family: 'Avenir-BookOblique';
  src: url("/fonts/Avenir-BookOblique.ttf");
}

@font-face {
  font-family: 'Avenir-Heavy';
  src: url("/fonts/Avenir-Heavy.ttf");
}

@font-face {
  font-family: 'Avenir-HeavyOblique';
  src: url("/fonts/Avenir-HeavyOblique.ttf");
}

@font-face {
  font-family: 'Avenir-Light';
  src: url("/fonts/Avenir-Light.ttf");
}

@font-face {
  font-family: 'Avenir-LightOblique';
  src: url("/fonts/Avenir-LightOblique.ttf");
}

@font-face {
  font-family: 'Avenir-Black';
  src: url("/fonts/Avenir-Black.ttf");
}

@font-face {
  font-family: 'Avenir-BlackOblique';
  src: url("/fonts/Avenir-BlackOblique.ttf");
}

@font-face {
  font-family: 'Avenir-MediumOblique';
  src: url("/fonts/Avenir-MediumOblique.ttf");
}

@font-face {
  font-family: 'Avenir-Oblique';
  src: url("/fonts/Avenir-Oblique.ttf");
}

@font-face {
  font-family: 'Avenir-Roman';
  src: url("/fonts/Avenir-Roman.ttf");
}

/* PRONTO CSS */

body {
  background-color: #287a9f;
}

h3 {
  font-family: Avenir-Light;
  font-size: 24px;
  line-height: 0.83;
  color: #DDD;
  font-weight: normal;
}

form {
  width: 100%;
}

.font-16-roman {
  font-family: Avenir-Roman;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.75;
  letter-spacing: normal;
  color: #4f5053;
}

.font-16-light {
  font-family: Avenir-Light;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.75;
  letter-spacing: normal;
  color: #4f5053;
}

.lms-banner {
  position: relative;
  height: 40px;
}

.lms-banner img {
  position: absolute;
  left: 115px;
}

.lms-banner h3 {
  position: absolute;
  left: 205px;
  top: 11px;
}

.lms-banner #breakLine {
  width: 2px;
  height: 36px;
  border: solid 1px #DDD;
  position: absolute;
  left: 185px;
  top: 2px;
}

.container {
  padding-top: 35px;
}

.white-card-sm {
  width: 70%;
  margin-left: 15%;
  height: 288px;
  border-radius: 15px;
  box-shadow: 0 7px 14px 0 #21A0C1;
  border: solid 1px transparent;
  background-origin: border-box;
  margin-top: 20px;
  padding-top: 40px;
  padding-left: 70px;
  background-color: #ffffff;
  min-width: 650px;}

.white-card-lg {
  width: 90%;
  margin-left: 5%;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 15px;
  box-shadow: 0 7px 14px 0 #21A0C1;
  border: solid 1px transparent;
  background-origin: border-box;
  margin-top: 20px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  background-color: #ffffff;
  min-width: 650px;}

.inner-container {
  width: 40%;
  height: 88px;
  border-radius: 8px;
  background-color: #ffffff;
  border: solid 1px #d1d2d4;
  min-width: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setupScreenshot {
  border: 1px solid black;
  margin-bottom: 20px;
}

#lmsOptions {
  width: 100%;
  margin-top: 45px;}
  #lmsOptions > div:first-of-type {
    margin-right: 10%;
  }

#setupOptions {
  margin-top: 25px;
  width: 100%;}
  #setupOptions span {
    width: 40%;
    font-family: Avenir;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 0.75;
    letter-spacing: normal;
    color: #8a8d93;}
    #setupOptions > span:first-of-type {
    margin-right: 10%;}
    #setupOptions img {
      margin-left: 5px;
    }

.pronto-input {
  height: 55px !important;
  border-radius: 10px;
  background-color: #ffffff;
  border: solid 1px #dee1e3}
  .pronto-input::placeholder {
    opacity: 0.9;
    color: #d1d2d4;
  }

#instanceURL {
  opacity: 0.9;
  font-family: Avenir-Light;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.88;
  letter-spacing: normal;
  color: #8a8d93;
  margin-top: 32px;
  margin-bottom: 16px;
}

.pronto-button {
  cursor: pointer;
  height: 48px;
  border-radius: 10px;
  background-color: #287a9f;
  font-family: Avenir-Roman;
  font-size: 16px;
  color: #ffffff;
  min-width: 85px;
  border: none;
  outline: none;
  margin-bottom:10px;
}

#nextButton {
  float: right;
  margin-top: 10px;
}

.pronto-link {
  font-family: Avenir-Roman;
  font-size: 14px;
  text-align: left;
  color: #10c7aa;
}

.numbered-row {
  margin-bottom: 27px;}
  .numbered-row span {
    margin-right: 12px;
  }

.example-image {
  width: 90%;
  margin-bottom: 27px;
  border-radius: 15px;
}

.unordered-list-margin > ul > li {
  margin-top: 10px;
  margin-bottom: 10px;
}