body, html {
  font-family: 'Roboto', sans-serif; }


.metroalert{
display:none;
}
.btn-green {
  background-color: #00AC5B;
  color: #ffffff;
  height: 50px;
  width: 280px;
  border-radius: 5px;
  font-size: 16px;
  border: none;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
  font-family: 'Roboto', sans-serif; }

.btn-blue {
  background-color: #0077AC;
  color: #ffffff;
  height: 50px;
  width: 280px;
  border-radius: 5px;
  font-size: 16px;
  border: none;
  display: block;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
  font-family: 'Roboto', sans-serif; }

.btn-greenLight {
  background-color: #9CCB3C;
  color: #ffffff;
  height: 50px;
  width: 280px;
  border-radius: 5px;
  font-size: 16px;
  border: none;
  display: block;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
  font-family: 'Roboto', sans-serif; }

#login {
  background-color: #334551;
  //height: 105vh;
}
  #login .row {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  #login .login-content {
    width: 280px; }
  #login .login-page {
    width: 280px;
    margin: 0 auto;
    position: relative; }
    #login .login-page .login-logo {
      width: 280px;
      margin-top: 80px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      #login .login-page .login-logo img {
        max-width: 100%; }
    #login .login-page .form-login {
      margin-top: 5px;
      width: 280px; }
      #login .login-page .form-login .form-control {
        height: 49px;
        margin-bottom: 20px;
        background-color: #485C6B;
        color: #ffffff;
        border-radius: 5px; }
      #login .login-page .form-login a.password-repair {
        text-decoration: none;
        color: #A5C1D6;
        margin-top: 30px;
        display: inline-block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }
    #login .login-page .login-reg {
      margin-top: 20px; }
      #login .login-page .login-reg a {
        text-decoration: none; }
        #login .login-page .login-reg a:hover {
          color: #ffffff; }
          .phone-input{

            width: 200px !important;

            display: inline-block !important;

        }

#register {
  position: relative;
  //height: 100vh;
  background-color: #334551; }
  #register .row {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  #register .reg-content {
    position: relative;
    width: 280px;
    margin: 0 auto; }
  #register .login-logo {
    margin-top: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
   .reg-title {
    width: 280px;
    margin-top: 33px;
    text-align: center; }
     .reg-title h4 {
      color: #ffffff;
      font-size: 32px;
      font-family: 'Roboto', sans-serif; }
  #register .reg-form {
    width: 280px;
    margin-top: 50px; }
    #register .reg-form .form-group {
      margin-bottom: 20px; }
    #register .reg-form .form-control {
      height: 49px;
      border-radius: 5px;
      background-color: #485C6B;
      color: #ffffff; }
    #register .reg-form button {
      margin-top: 30px; }
 



#comfirm {
  position: relative;
  height: 100vh;
  background-color: #334551; }
  #comfirm .row {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  #comfirm .comfirm-content {
    position: relative;
    width: 280px;
    margin: 0 auto; }
    #comfirm .comfirm-content .comfirm-title {
      width: 280px;
      margin-top: 33px;
      text-align: center; }
      #comfirm .comfirm-content .comfirm-title h4 {
        color: #ffffff;
        font-size: 32px; }
    #comfirm .comfirm-content .comfirm-form {
      width: 280px;
      margin-top: 40px; }
      #comfirm .comfirm-content .comfirm-form label {
        color: #ffffff;
        font-size: 20px;
        margin-bottom: 50px;
        width: 284px;
        font-family: 'Roboto', sans-serif;
        line-height: 24px;
        text-align: left; }
      #comfirm .comfirm-content .comfirm-form .form-control {
        height: 49px;
        background-color: #485C6B;
        color: #ffffff; }
      #comfirm .comfirm-content .comfirm-form button {
        margin-top: 40px; }


#appeal {
  position: relative;
  height: 100vh;
  background-color: #334551; }
  #appeal .appeal-now {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  #appeal .appeal-now-content .appeal-title {
    width: 280px;
    margin-top: 33px;
    text-align: center;
    margin-bottom: 50px; }
    #appeal .appeal-now-content .appeal-title h4 {
      color: #ffffff;
      font-size: 32px;
      font-family: 'Roboto', sans-serif;
      font-weight: 400; }
  #appeal .appeal-now-content .appeal-form {
    width: 280px; }
    #appeal .appeal-now-content .appeal-form label {
      color: #ffffff;
      font-size: 14px;
      margin-bottom: 14px; }
    #appeal .appeal-now-content .appeal-form .where {
      width: 280px;
      height: 49px;
      display: block;
      margin-bottom: 20px;
      border-radius: 5px;
      color: #ffffff;
      padding: 13px 0px;
      padding-left: 16px; }
    #appeal .appeal-now-content .appeal-form select {
      -moz-appearance: none;
      /* Firefox */
      -webkit-appearance: none;
      /* Safari and Chrome */
      appearance: none;
      background: url("../img/down.png") #485C6B no-repeat calc(100% - 10px) !important; }
    #appeal .appeal-now-content .appeal-form input {
      height: 49px;
      width: 280px;
      margin-bottom: 32px;
      display: block;
      background-color: #485C6B;
      border-radius: 5px;
      padding: 14px 0px;
      padding-left: 16px;
      color: #ffffff;
      background: url("../img/cal.png") no-repeat calc(100% - 10px) !important; }
  #appeal .appeal-title {
    width: 280px;
    margin-top: 33px;
    text-align: center;
    margin-bottom: 78px; }
    #appeal .appeal-title h4 {
      color: #ffffff;
      font-size: 32px;
      font-family: 'Roboto', sans-serif;
      font-weight: 400; }
  #appeal .appeal-last {
    margin-bottom: 10px; }
    #appeal .appeal-last .card {
      background-color: #485C6B;
      color: #ffffff;
      border: 1px solid #ffffff;
      border-radius: 5px;
      width:360px; }
      #appeal .appeal-last .card .card-body {
        padding: 0; }
      #appeal .appeal-last .card .date-time {
        padding-left: 15px;
        padding-top: 15px;
        margin-bottom: 10px; }
        #appeal .appeal-last .card .date-time span {
          margin-right: 10px; }
          #appeal .appeal-last .card .date-time span i {
            color: #FFFF00; }
      #appeal .appeal-last .card .fromto {
        float: left;
        padding-left: 15px;
        margin-right: 50px; 
        width:40%;}
      #appeal .appeal-last .card h5 {
        color: #FFFF00;
        font-size: 16px; }
      #appeal .appeal-last .card .goto {
        float: left; }
      #appeal .appeal-last .card .rate {
        float: right;
        text-align: center;
        padding-right: 14px; }
        #appeal .appeal-last .card .rate a {
          text-decoration: none;
          color: #ffffff;
          font-size: 12px; }
        #appeal .appeal-last .card .rate span.rate-count {
          color: #FFFF00;
          display: block;
          font-size: 12px; }
        #appeal .appeal-last .card .rate span.rate-star {
          display: block;
          color: #FCD029; }




/*# sourceMappingURL=style.css.map */


.phone-operator{

               width: 75px;

               height: 49px;

               background-color: #485C6B;

               border: 1px solid white;

               border-radius: 5px;

               color: white;

               padding-left: 10px;

               -moz-appearance:none; /* Firefox */

               -webkit-appearance:none; /* Safari and Chrome */

               appearance:none;

               background: url("../img/down.png") #485C6B no-repeat calc(100% - 10px) !important;            }

     .phone-input{

               width: 200px !important;

               display: inline-block !important;

           }
          


            .btncreate{
              margin-top: 0px !important;
              margin-bottom: 20px !important;
            }

            #password{
              margin-top: -15px;
            }

            a.password-repair{
              margin-top: 10px !important;
            }

          @media screen and (max-width: 320px) {
             #login {
              /*height: 100%;*/
              margin-left: -25px;
            }

            #password{
              margin-top: -20px;
            }

            .btnlogin{
              margin-top: -5px;
            }

            a.password-repair{
              margin-top: 10px !important;
            }

            a.btn-blue{
              margin-bottom: 20px !important;
            }

            .form-login {
              margin-top: -20px !important; 
            }


          #register {    
            height: 100%;  
            margin-left: -25px;
            margin-top: -45px !important;
          }

          .reg-form{
            margin-top: 10px !important;
          }

          .btncreate{
            margin-top: 0px !important;
          }




          #comfirm{
            margin-left: -25px;
          }

        }

        .forget{
            //margin-top: 75px !important;
        }

        .btnforget{
            margin-bottom: 0px !important;
            margin-top: -20px !important;
        }

/*        .phone-input{
          margin-bottom: 5px !important;
        }*/


        @media screen and (max-width: 360px) {
             #login {
              /*height: 100%;*/
            }

            #password{
              margin-top: -20px;
            }

            .btnlogin{
              margin-top: -5px;
              /*width: 200px !important;*/
            }

            a.password-repair{
              margin-top: 10px !important;
            }

            a.btn-blue{
              margin-bottom: 20px !important;
            }

            .form-login {
              margin-top: -20px !important; 
            }




          #register {    
            height: 100%;  
            /*margin-left: -25px;*/
            margin-top: -25px !important;
          }

          .reg-form{
            margin-top: 10px !important;
          }

          .btncreate{
            margin-top: 0px !important;
          }
        }

        @media screen and (max-width: 375px) {
             #login {
              /*height: 100%;*/
            }

            #password{
              margin-top: -20px;
            }

            .btnlogin{
              margin-top: -5px;
              /*width: 200px !important;*/
            }

            a.password-repair{
              margin-top: 10px !important;
            }

            a.btn-blue{
              margin-bottom: 20px !important;
            }

            .form-login {
              margin-top: -20px !important; 
            }



            #register {    
            height: 100%;  
            /*margin-left: -25px;*/
            margin-top: -15px !important;
          }

          .reg-form{
            margin-top: 10px !important;
          }

          .btncreate{
            margin-top: 0px !important;
          }
        }

        @media screen and (max-width: 414px) {
             #login {
              /*height: 100%;*/
            }

            #password{
              margin-top: -20px;
            }

            .btnlogin{
              margin-top: -5px;
              /*width: 200px !important;*/
            }

            a.password-repair{
              margin-top: 10px !important;
            }

            a.btn-blue{
              margin-bottom: 20px !important;
            }

            .form-login {
              margin-top: -20px !important; 
            }


          #register {    
            height: 100%;  
            /*margin-left: -25px;*/
            margin-top: 0px !important;
          }

          .reg-form{
            margin-top: 10px !important;
          }

          .btncreate{
            margin-top: 0px !important;
          }


        }


        @media screen and (max-width: 575px) {
             #login {
              /*height: 100%;*/
            }

            #password{
              margin-top: -20px;
            }

            .btnlogin{
              margin-top: -5px;
              /*width: 200px !important;*/
            }

            a.password-repair{
              margin-top: 10px !important;
            }

            a.btn-blue{
              margin-bottom: 20px !important;
            }

            .form-login {
              margin-top: -50px !important; 
            }


          #register {    
            height: 100%;  
            /*margin-left: -25px;*/
            margin-top: 0px !important;
          }

          .reg-form{
            margin-top: 10px !important;
          }






          .comfirm-form button{
            margin-top: 10px !important;
          }



        }