@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@font-face{font-family:avo;src:url(/css/font/UTM-Avo.ttf)}
@font-face{font-family:avob;src:url(/css/font/UTM-AvoBold.ttf)}
html{height:100%;position:relative;}
body{background-color:#f4f7f9;position:relative;width:100%;height:100%;margin:0;padding:0;font-family:avo;}
.login-home{background:url(/css/img/bg-myoffice.jpg);background-size: cover;position: relative;height: 100vh;display: flex;align-items: center;color:#fff}
.login-home .title{font-weight: 300;text-align: center;text-transform: uppercase;font-size: 30px;margin-top: 0;margin-bottom: 35px;}
.login-home .content{display:flex;}
.login-home .imgz{background:rgb(255 255 255 / 40%);width:50%;flex:0 0 auto;display: flex;align-items: center;justify-content: center;}
.login-home .imgz img{max-width:90%}


.footer{color:#333;text-align: center;margin-top: 45px;position:absolute;bottom:0;background:#fff;left:0;right:0;padding:12px 0;font-size:14px;}
.footer a{color:#649b20;text-decoration:none}
.footer img{position:relative;top:5px;}
.bg-design{position:absolute;width:100%;height:62%;background-color:#d1e9d2;}
.container{position:relative;z-index:1;/* width:1150px; *//* height:100vh; */margin:auto;overflow:hidden;width: 100%;max-width: 800px;}
.bg-title{width:322px;/* height:88px; *//* background:url(/Assets/css/img/bg-title.png); */position:absolute;left:100px;top:53%;/* background-size:100%; */}
.bg-title img{width:100%;height:auto;}
.login-form {position:relative;padding: 44px 40px;background: #00000066;width: 50%;flex: 0 0 auto;box-sizing: border-box;}
.login-form .quote{font-size:14px;color:#67A716}
.login-form .textbox:before{content:"";font-family:fontawesome;position:absolute;color: rgb(255 255 255 / 70%);font-size:20px;right: 13px;bottom: 7px;background: url(/css/img/icon-user.png) no-repeat;background-size:contain;width: 24px;height: 24px;}
.login-form .password:before{background-image:url(/css/img/icon-pass.png)}


.container .content .imgW{margin:auto;margin-top:40px;width:322px;visibility:hidden;}

.login-form h2{font-size:27px;color:#f26522;font-weight:normal;text-transform:uppercase;text-align:center;margin:0;margin-bottom:30px;}
.login-form h2:before{content:"";display:inline-block;width:60px;background:linear-gradient(to right, transparent, #f26522 60%);height:1px;margin-bottom:9px;margin-right:10px;}
.login-form h2:after{content:"";display:inline-block;width:60px;background:linear-gradient(to left, transparent, #f26522 60%);height:1px;margin-bottom:9px;margin-left:10px;}
.login-form .textbox {margin-top:15px;position:relative;overflow: hidden;display: block;}

.login-form .txt{width:100%;font-size:14px;border-bottom: 1px solid rgb(255 255 255 / 70%);padding: 10px;padding-left: 14px;box-sizing:border-box;background: none;color:#fff;display: block;}
.login-form .txt::-webkit-input-placeholder {color:rgb(255 255 255 / 70%);}
.login-form input:focus{outline:1px solid #7ac5e5;outline-offset:0;}
.login-form .bottom{position:relative;margin-top:30px;}
.login-form .check-remember{font-size:15px;font-family: Roboto;}
.login-form .btnlogin{text-align:center}
.login-form .btnlogin .btn{background-color: #67A716;color:#fff;font-size:14px;padding:10px 20px;border-radius:5px;margin-top:17px;text-align:center;cursor:pointer}
.login-form .btnlogin .btn:active,.login-form .btnlogin .btn:hover{background-color:#7abd26}
@media only screen
  and (max-width :1279px){
      .container{width:96%;}
      .container .content .imgW{margin-top:100px;}
      .bg-title{width:250px;top:50.8%}
      .bg-design{height:55%}
  }
@media only screen
  and (max-width :1023px){
      .container .content .imgW{margin-top:120px;}
      .bg-design{height:75%}
      .container .content{float:none;margin:auto;}
      .bg-title{bottom:0;top:72%;left:0;right:0;margin:0 auto;}
      .login-form h2{margin-bottom:20px;}
      .login-form .quote{font-size:13px;}
      .login-form .txt{padding:8px;font-size:13px;}
}
@media only screen
  and (max-width :767px){
      .container .content {margin-top:40px;}
      .container .content .imgW{display:none;}
      .container .content{width:300px;}
      .bg-design{height:50%}
      .bg-title{display:none;}
  
.login-home .imgz{padding:10px 0}

      .login-form{padding:30px 20px;}
      .login-form:before{height:3px;}
      .login-form h2{font-size:18px;margin-bottom:10px;}      
      .login-form .textbox{margin-top:10px;}
      .login-form h2:before,.login-form h2:after{width:50px;margin-bottom:6px;}
      .login-form .bottom{margin-top:20px;}
      .login-form .bottom .check-remember{font-size:13px;}
      .login-form .bottom .btn{padding:8px 10px;font-size:13px;}
      .footer{font-size:13px;margin-top: 24px;}
    .container .content{display:block}
  .container .content >*{width:100%}
  }
@media only screen
  and (max-width :576px){
      .container .content {margin-top:0;}
      .container .content .imgW{display:block;margin-top:50px;}
      .bg-design{height:70%}
      .bg-title{display:block;width:170px;top:67%;}
  .login-home .title{font-size:20px;margin-bottom:20px}
  }