@font-face {
  font-family: "Source Sans ExtraLight";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/SourceSansPro-ExtraLight.ttf");
}
@font-face {
  font-family: "Source Sans Light";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/SourceSansPro-Light.ttf");
}
@font-face {
  font-family: "Source Sans Regular";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/SourceSansPro-Regular.ttf");
}
@font-face {
  font-family: "Source Sans SemiBold";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/SourceSansPro-SemiBold.ttf");
}

@media only screen and (min-width: 320px) {
  #app {
    /* border: 1px solid; */
    margin: 0px;
    padding: 0px 10px;
    top: 0px;
    left: 0px;
    margin-top: 20px;
  }
  /* #app h2 {
    font-size: 28px;
    text-align: center;
  } */
  #app footer {
    position: absolute;
    width: -webkit-fill-available;
    margin: 0 auto;
    bottom: 0px;
    left: 0px;
    font-size: 12px;
    text-align: center;
  }
  .footer-btn {
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    padding: 0px;
    bottom: 42px;
    left: 0px;
  }
  .btn {
    width: 130px;
    margin: 0 auto;
    height: 46px;
    padding: 0 14px;
  }
  .btn-cancel i {
    position: inherit;
    font-size: 20px;
  }
  .btn-cancel span {
    font-size: 20px;
  }
}

@media only screen and (min-width: 500px) {
  body #app {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 100%;
    height: 700px;
    margin: -24% 0 0 -25%;
    padding: 0 20px;
    /* border: 1px solid red; */
  }
  /* #app h2 {
    font-size: 42px;
  } */
  #app footer {
    position: fixed;
    bottom: 10px;
    width: 100%;
    margin-left: -20px;
    font-size: 14px;
  }
  footer i.icon {
    font-size: 12px;
  }
  .footer-btn {
    position: fixed;
  }
  .btn {
    margin: 0px;
    width: 180px;
    height: 60px;
  }
  .btn-cancel i {
    position: absolute;
    font-size: 26px;
  }
  .btn-cancel span {
    padding-left: 43px;
    font-size: 24px;
  }
}

html {
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background: #56ccf2;
  background: -webkit-linear-gradient(to top, #2f80ed, #56ccf2);
  background: linear-gradient(to top, #2f80ed, #56ccf2);
  overflow: hidden;
}
#app footer {
  color: #fff;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Sans Light';
  font-weight: 100;
}
h2.title {
  text-align: center;
}
input {
  font-family: 'Source Sans Light';
  font-weight: bold;
}
.btn {
  font-family: 'Source Sans Light';
  font-weight: bold;
}

.ui.button {
  font-family: 'Source Sans Light';
  font-weight: 100;
}
.white {
  color: #fff;
}


.footer-btn {
  bottom: 16px;
  padding: 0px 20px;
}
.btn {
  display: flex;
  align-items: center;
  font-size: 26px;
  border-radius: 500px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
  cursor: pointer;
}
.btn span {
  width: inherit;
}
.btn-cancel i {
  left: 34px;
  top: 14px;
  transform: rotate(180deg);
}
.btn-cancel span {
  position: inherit;
  width: fit-content;
  right: 46px;
}

ul.paginate-links {
  list-style: none;
  position: absolute;
  right: 20px;
  bottom: -14px;
  display: flex;
}
ul.paginate-links li {
  display: flex;
  width: 210px;
  height: 60px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 26px;
  border-radius: 500px;
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
  cursor: pointer;
}
ul.paginate-links li a {
  width: inherit;
  text-align: center;
}
ul.paginate-links li.prev {
  margin-right: 8px;
}
ul.paginate-links li.prev a {
  color: #000;
}
ul.paginate-links li.next a {
  color: #000;
}

ul.paginate-links li.prev.disabled {
  visibility: hidden;
}
ul.paginate-links li.next.disabled {
  visibility: hidden;
}

.swal2-popup.swal2-modal.swal2-icon-warning.swal2-show {
  width: 50%;
  height: 60%;
}

.swal2-icon.swal2-warning.swal2-icon-show {
  font-size: 18px;
}

#swal2-html-container {
  font-size: 36px;
}

.swal2-confirm.swal2-styled {
  font-size: 30px;
  background-color: #2f80ed;
}

.swal-overlay--show-modal .swal-modal {
  width: 50%;
  height: 336px;
}

.swal-text {
  font-size: 36px;
}

.swal-footer {
  text-align: center;
}

.swal-button.swal-button--confirm {
  width: 140px;
  margin-top: 26px;
  font-size: 26px;
}