.close-modal {
  padding: 0;
  background: transparent;
  border: 0;
  position: absolute;
  top: 100px;
  right: 10px;
}

.modal-title {
  width: 100%;
  text-align: center;
}

body {
  background-color: #f2f2f2;
}

#content {
  color: #4A4A4A;
  background-color: #f2f2f2;
}

@media (min-width: 767px) {
  .content {
    width: 60%;
    float: left;
    position: relative;
  }

  .leftSidebar {
    width: 25%;
    float: left;
    padding: 0 30px 0 0;
    position: relative;
  }

  * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    line-height: 1.4;
  }

  .header {
    padding: 0 20px;
    margin: 0 auto;
    overflow: auto;
  }
}

#social {
  margin: 20px 10px;
  text-align: center;
}

.smGlobalBtn {
  /* global button class */
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 50px;
  -webkit-box-shadow: 0 2px 2px #999;
          box-shadow: 0 2px 2px #999;
  padding: 0px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 25px;
  font-weight: normal;
  line-height: 2em;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
}

/* facebook button class*/

.facebookBtn {
  background: #4060A5;
}

.facebookBtn:before {
  /* use :before to add the relevant icons */
  font-family: "FontAwesome";
  content: "\F09A";
  /* add facebook icon */
}

.facebookBtn:hover {
  color: #4060A5;
  background: #fff;
  text-decoration: none;
}

/* twitter button class*/

.twitterBtn {
  background: #00ABE3;
}

.twitterBtn:before {
  font-family: "FontAwesome";
  content: "\F099";
  /* add twitter icon */
}

.twitterBtn:hover {
  color: #00ABE3;
  background: #fff;
  text-decoration: none;
}

/* google plus button class*/

.googleplusBtn {
  background: #e64522;
}

.googleplusBtn:before {
  font-family: "FontAwesome";
  content: "\F0D5";
  /* add googleplus icon */
}

.googleplusBtn:hover {
  color: #e64522;
  background: #fff;
  text-decoration: none;
}

/* linkedin button class*/

.linkedinBtn {
  background: #0094BC;
}

.linkedinBtn:before {
  font-family: "FontAwesome";
  content: "\F0E1";
  /* add linkedin icon */
}

.linkedinBtn:hover {
  color: #0094BC;
  background: #fff;
  text-decoration: none;
}

/* pinterest button class*/

.pinterestBtn {
  background: #cb2027;
}

.pinterestBtn:before {
  font-family: "FontAwesome";
  content: "\F0D2";
  /* add pinterest icon */
}

.pinterestBtn:hover {
  color: #cb2027;
  background: #fff;
  text-decoration: none;
}

/* tumblr button class*/

.tumblrBtn {
  background: #3a5876;
}

.tumblrBtn:before {
  font-family: "FontAwesome";
  content: "\F173";
  /* add tumblr icon */
}

.tumblrBtn:hover {
  color: #3a5876;
  background: #fff;
  text-decoration: none;
}

/* rss button class*/

.rssBtn {
  background: #8E8E8E;
}

.rssBtn:before {
  font-family: "FontAwesome";
  content: "\F0C6";
  /* add rss icon */
}

.rssBtn:hover {
  color: #e88845;
  background: #fff;
  text-decoration: none;
}

.social {
  width: 300px;
}

.centered {
  display: block;
  margin: 0 auto;
}

.card {
  border-radius: 0.75em;
  border: 0.75em;
}

.top5 {
  margin-top: 5px;
}

.top7 {
  margin-top: 7px;
}

.top10 {
  margin-top: 10px;
}

.top15 {
  margin-top: 15px;
}

.top17 {
  margin-top: 17px;
}

.top30 {
  margin-top: 30px;
}

.top50 {
  margin-top: 50px;
}

.top100 {
  margin-top: 100px;
}

.pointer {
  cursor: pointer;
}

input:checked ~ span,
input:checked ~ div {
  color: #007bff !important;
}

.was-validated .form-control:valid {
  border-color: #ced4da;
  background-image: none;
}

.was-validated .form-control:valid:focus {
  border-color: #ced4da;
  background-image: none;
}

.was-validated .form-control:invalid {
  border-color: #dc3545;
  background-image: none;
}

#qr-code-payment-modal {
  color: #4A4A4A;
}

#qr-code-payment-modal .custom-close-btn {
  font-size: 60px;
  position: absolute;
  right: 40px;
  top: 0;
}

#qr-code-payment-modal .qr-code-detail {
  margin-top: 40px;
  display: block;
  min-width: 284px;
  border: #D9D9D9 solid 1px;
  border-radius: 10px;
}

#qr-code-payment-modal .qr-code-detail .qr-header {
  background: #133d67;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#qr-code-payment-modal .qr-code-detail .qr-header img {
  margin: auto;
  display: block;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

#qr-code-payment-modal .remark {
  width: 90%;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  background: #F5F5F5;
  border-radius: 10px;
}