@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
   @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:wght@300;400;700&family=Rubik+Distressed&display=swap');
      body {
      /*background: url('site/img/bg-img/enter_bg.jpg');*/
      /*background-image: url(images/Eslite.jpg); background: image('myimage.gif', 'fallback.gif');
     
      /*background-image: url(images/meeting-experience.jpg);*/
       font-family: 'Poppins', sans-serif;
      background-repeat: no-repeat;
      background-size:cover;
      background-color:#a4b0be;
      /*background: -webkit-linear-gradient(to bottom, #FFB88C, #DE6262);
      /* Chrome 10-25, Safari 5.1-6 */
      /*background: linear-gradient(to bottom, #FFB88C, #DE6262);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }
      h2 {
      font-size: 23px;
      }
      .login-block {
      float: left;
      width: 100%;
      padding: 105px 0;
      }
      .banner-sec {
      background-color:#212529a6;
      /*background: url(https://static.pexels.com/photos/33972/pexels-photo.jpg) no-repeat left bottom;
      background-size: cover;*/
      min-height: 350px;
      /*border-radius: 0 10px 10px 0;*/
      padding: 8px;
      }
      .container {
      border-radius: 10px;
      /*box-shadow: 0 12px 15px 0 rgba(0,0,0,.24), 0 17px 50px 0 rgba(0,0,0,.19);*/
      }
      .carousel-inner {
      border-radius: 0 5px 5px 0;
      }
      .carousel-caption {
      text-align: left;
      left: 5%;
      }
      .login-sec {
      height: 400px;
      background-color: #fff;
      padding: 25px 30px;
      position: relative;
      font-family:"Poppins", sans-serif;
      }
      .login-sec .copy-text {
      position: absolute;
      width: 80%;
      bottom: 20px;
      font-size: 13px;
      text-align: center;
      }
      .login-sec .copy-text i {
      color:#343a40;
      }
      .login-sec .copy-text a {
      color: #343a40;
      }
      .login-sec h2 {
      margin-bottom: 30px;
      font-weight: 800;
      font-size: 23px;
      color:  #1e90ff;
      }
      .login-sec h2:after {
      content: " ";
      width: 200px;
      height: 2px;
      background:  #1e90ff;
      display: block;
      margin-top: 20px;
      border-radius: 3px;
      margin-left: auto;
      margin-right: auto
      }
      .btn-login {
      background-color: #1e90ff;
      color: #fff;
      font-weight: 600;
      }
      .btn-normal {
      background-color: #ffffff;
      color: #cccccc;
      font-weight: 600;
      border:1px solid #cccccc;
      }
      .btn-login:hover {
      background-color: #0c2461;
      color:#eeeeee;
      }
      .btn-normal:hover {
        background-color: #cccccc;
        color:#333333;
      }
      .banner-text {
      width: 70%;
      position: absolute;
      bottom: 40px;
      padding-left: 20px;
      }
      .banner-text h2 {
      color: #fff;
      font-weight: 600;
      }
      .banner-text h2:after {
      content: " ";
      width: 100px;
      height: 5px;
      background: #FFF;
      display: block;
      margin-top: 20px;
      border-radius: 3px;
      }
      .banner-text p {
      color: #fff;
      }
      .text-infomation{
      color:#fff;
      }
      .container { 
      width: 741px;
      }
      @media only screen and (max-width: 420px){
      .container{
      width: 100%;
      }
      .login-block {
      float: left;
      width: 100%;
      padding: 0px 0;
      }
      }
      /*sini css form label mcm startbucks*/
      .box {
      position: relative;
      top: 0;
      opacity: 1;
      float: left;
      padding: 60px 50px 40px 50px;
      width: 100%;
      background: #fff;
      border-radius: 10px;
      transform: scale(1);
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      z-index: 5;
      }
      .box.back {
      transform: scale(0.95);
      -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
      top: -20px;
      opacity: 0.8;
      z-index: -1;
      }
      .box:before {
      content: "";
      width: 100%;
      height: 30px;
      border-radius: 10px;
      position: absolute;
      top: -10px;
      background: rgba(255, 255, 255, 0.6);
      left: 0;
      transform: scale(0.95);
      -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
      z-index: -1;
      }
      .overbox .title {
      color: #fff;
      }
      .overbox .title:before {
      background: #fff;
      }
      .title {
      width: 100%;
      float: left;
      line-height: 46px;
      font-size: 34px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #ed2553;
      position: relative;
      }
      .title:before {
      content: "";
      width: 5px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -50px;
      background: #ed2553;
      }
      .input {
      transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .input label,
      .input input,
      .input .spin {
      transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      input[type=text],input[type=password] {
          width: 100%;
          padding: 12px 20px;
          margin: 5px 0;
          box-sizing: border-box;
          font-size:18px;
          border:1px #cccccc solid;
          border-radius:3px;
        }
      .button {
      transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .button button .button.login button i.fa {
      transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .material-button .shape:before, .material-button .shape:after {
      transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .button.login button {
      transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -webkit-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      -ms-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .material-button,
      .alt-2,
      .material-button .shape,
      .alt-2 .shape,
      .box {
      transition: 400ms cubic-bezier(0.4, 0, 0.2, 1);
      -webkit-transition: 400ms cubic-bezier(0.4, 0, 0.2, 1);
      -ms-transition: 400ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .input {
      width: 100%;
      float: left;
      }
      .input label,
      .input input,
      .input .spin {
      width: 100%;
      float: left;
      }
      .button {
      width: 100%;
      float: left;
      }
      .button button {
      width: 100%;
      float: left;
      }
      .input,
      .button {
      margin-top: 30px;
      height: 70px;
      }
      .input {
      position: relative;
      }
      .input input {
      position: relative;
      }
      .button {
      position: relative;
      }
      .button button {
      position: relative;
      }
      .input input {
      height: 60px;
      top: 10px;
      border: none;
      background: transparent;
      font-family: "Roboto", sans-serif;
      font-size: 15px;
      color: rgba(0, 0, 0, 0.8);
      font-weight: 300;
      }
      .input label {
      font-family: "Roboto", sans-serif;
      font-size: 15px;
      color: rgba(0, 0, 0, 0.47);
      font-weight: 300;
      }
      .button button {
      font-family: "Roboto", sans-serif;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.8);
      font-weight: 300;
      }
      .input:before,
      .input .spin {
      width: 100%;
      height: 1px;
      position: absolute;
      bottom: 0;
      left: 0;
      }
      .input:before {
      content: "";
      background: #6c757d;
      z-index: 3;
      }
      .input .spin {
      background: #28a745;
      z-index: 4;
      width: 0;
      }
      .overbox .input .spin {
      background: white;
      }
      .overbox .input:before {
      background: rgba(255, 255, 255, 0.5);
      }
      .input label {
      position: absolute;
      top: 26px;
      left: 0;
      z-index: 2;
      cursor: pointer;
      line-height: 60px;
      }
      .button {
      margin-top: 20px;
      margin: 40px 0;
      overflow: hidden;
      z-index: 2;
      }
      .button.login {
      width: 60%;
      left: 20%;
      }
      .button.login button {
      width: 100%;
      line-height: 64px;
      left: 0%;
      background-color: transparent;
      border: 3px solid rgba(0, 0, 0, 0.1);
      font-weight: 900;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.2);
      }
      .button button {
      width: 100%;
      line-height: 64px;
      left: 0%;
      background-color: transparent;
      border: 3px solid rgba(0, 0, 0, 0.1);
      font-weight: 900;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.2);
      }
      .button.login {
      margin-top: 30px;
      }
      .button button {
      background-color: #fff;
      color: #ed2553;
      border: none;
      }
      .button.login button.active {
      border: 3px solid transparent;
      color: #fff !important;
      }
      .button.login button.active span {
      opacity: 0;
      transform: scale(0);
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      }
      .button.login button.active i.fa {
      opacity: 1;
      transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      }
      .button.login button i.fa {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      line-height: 60px;
      transform: scale(0) rotate(-45deg);
      -webkit-transform: scale(0) rotate(-45deg);
      -ms-transform: scale(0) rotate(-45deg);
      }
      .button.login button:hover {
      color: #ed2553;
      border-color: #ed2553;
      }
      .button button {
      cursor: pointer;
      position: relative;
      z-index: 2;
      }
      .pass-forgot {
      width: 100%;
      float: left;
      text-align: center;
      color: rgba(0, 0, 0, 0.4);
      font-size: 18px;
      }
      .click-efect {
      position: absolute;
      top: 0;
      left: 0;
      background: #ed2553;
      border-radius: 50%;
      }
      .overbox {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: inherit;
      border-radius: 10px;
      padding: 60px 50px 40px 50px;
      }
      .overbox .title,
      .overbox .button,
      .overbox .input {
      z-index: 111;
      position: relative;
      color: #fff !important;
      display: none;
      }
      .overbox .title {
      width: 80%;
      }
      .overbox .input {
      margin-top: 20px;
      }
      .overbox .input input,
      .overbox .input label {
      color: #fff;
      }
      .overbox .material-button,
      .overbox .alt-2 {
      display: block;
      }
      .overbox .material-button .shape,
      .overbox .alt-2 .shape {
      display: block;
      }
      .material-button,
      .alt-2 {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: #ed2553;
      position: absolute;
      top: 40px;
      right: -70px;
      cursor: pointer;
      z-index: 100;
      transform: translate(0%, 0%);
      -webkit-transform: translate(0%, 0%);
      -ms-transform: translate(0%, 0%);
      }
      .material-button .shape,
      .alt-2 .shape {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      }
      .material-button .shape:before,
      .alt-2 .shape:before,
      .material-button .shape:after,
      .alt-2 .shape:after {
      content: "";
      background: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(360deg);
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      }
      .material-button .shape:before,
      .alt-2 .shape:before {
      width: 25px;
      height: 4px;
      }
      .material-button .shape:after,
      .alt-2 .shape:after {
      height: 25px;
      width: 4px;
      }
      .material-button.active,
      .alt-2.active {
      top: 50%;
      right: 50%;
      transform: translate(50%, -50%) rotate(0deg);
      -webkit-transform: translate(50%, -50%) rotate(0deg);
      -ms-transform: translate(50%, -50%) rotate(0deg);
      }
      /*xboleh*/
      .materialContainer {
      width: 100%;
      max-width: 460px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      }
      * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style-type: none;
      outline: none;
      }
      *:after, *::before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style-type: none;
      outline: none;
      }
      .input label {
      font-size: 15px;
      }
      label {
      line-height: 24px;
      font-size: 20px;
      font-weight: 300;
      top: 10px;
      }

      .btn:hover {
            /*color: #ccc;*/
            text-decoration: none;
    }

a {
    color: #343a40b8;
    text-decoration: none;
    background-color: transparent;
}

    .loginLoader {
            width : 100%;
            height : 100% ;
            top:0px;
            left:0px;
            /*
            top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              */
            background-color:rgba(0,0,0,0.5);
            position:absolute;
            z-index:30;
            display:none;
            FONT-FAMILY: Titillium, Arial;
        }
        .loaderInfo {
            position:relative;
            text-align:center;
            padding:20px;
            width:720px;
            top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
            color: #34495e;
            background-color:rgba(255,255,255,0.9);
            border-radius:5px;
        }


.timelabel {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 20pt; PADDING-BOTTOM: 1px; COLOR: #FFF; PADDING-TOP: 1px;  FONT-FAMILY: Titillium, Arial; TEXT-ALIGN: center; background-color:transparent; border:none; text-shadow:1px 1px 1px #333; -moz-text-shadow:1px 1px 1px #333; -webkit-text-shadow:1px 1px 1px #333; font-size:34px  }   
.link { cursor: pointer }
.spin { font-size:0.7em; color:#ed2553;}