#wrapper {
      background: #D8DFE9;
      background: linear-gradient(180deg, #D8DFE9 0%, #FFFFFF 97%);
      min-height: 100vh;
}

#login_wrapper {
      position: fixed;
      top: 46%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
}

#login_logo {
      text-align: center;
      width: 400px;
      margin-bottom: 20px;
}

#logo {
      height: 100px;
      margin-bottom: 20px;
      border-top-left-radius: 3px;
      border-top-right-radius: 26px;
      border-bottom-left-radius: 28px;
      border-bottom-right-radius: 14px;
}

#login_box {
      width: 450px;
      margin: 0 auto;
      padding: 20px 40px;
      background: #FFF;
      border-radius: 10px;
      -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);
      box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);
}

#register-box {
      width: 450px;
      text-align: right;
      padding-right: 8px;
      padding-top: 10px;
}

#register-box>a {
      color: #022831;
      font-size: 1em;
}

.login-textbox {
      /* width:60%; */
      border: none;
      border-radius: 0px;
      border-bottom: solid 1px #CCC;
      -webkit-transition: 0.2s;
      /* Safari */
      transition: 0.2s;
      transition-timing-function: linear;
      -webkit-transition-timing-function: linear;
}

.login-textbox:focus {
      -webkit-box-shadow: none;
      box-shadow: none;
      border-bottom: solid 3px #f36f2e;
      font-size: 1.2em;
}

.login-button-wrapper {
      padding-top: 10px;
      text-align: center;
}

#btn_login {
      width: 60%;
      border-color: #022831;
      border-radius: 15px;
      color: #FFF;
      -webkit-transition: 0.2s all ease;
      transition: 0.2s ease all;
      padding-left: 15px;
      padding-right: 15px;
      font-weight: bold;
      border: none;
}

#btn_login:hover {
      background: #022831;
      -webkit-box-shadow: 3px 3px 5px 0px rgba(105, 105, 105, 0.8);
      -moz-box-shadow: 3px 3px 5px 0px rgba(105, 105, 105, 0.8);
      box-shadow: 3px 3px 5px 0px rgba(105, 105, 105, 0.8);
      color: #fff;
      border: none;
}

.footer,
.footer>.container {
      background: transparent;
}

footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
}

.footer>.container>p {
      color: #022831;
}

.footer>.container>p>a {
      color: #04566E;
}

.form-control {
      box-shadow: none;
}

#remember {
      color: #022831;
}

.country-head {
      color: #ffffff;
      text-align: center;
      margin-bottom: 40px;
      margin-top: 80px;
      font-family: 'Kanit', sans-serif;
      font-family: 'Prompt', sans-serif;
}

.portfolio-item {
      margin-bottom: 30px;
}

.card {
      position: relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: #fff;
      background-clip: border-box;
      border: 1px solid rgba(0,0,0,.125);
      border-radius: .25rem;
  }

  .card-img-top {
      width: 100%;
      border-top-left-radius: calc(.25rem - 1px);
      border-top-right-radius: calc(.25rem - 1px);
  }
  
  img {
      vertical-align: middle;
      border-style: none;
  }
  
  .card-body {
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      padding: 1.25rem;
  }
  
  .card-title {
      margin-bottom: .75rem;
  }

  .card-text {
      margin-bottom: 0;
  }