/* Predefined Colors */
 /* lato-300 - latin-ext_latin */
 @font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 300;
   src: url("");
   /* IE9 Compat Modes */
   src: local("Lato Light"), local("Lato-Light"), url("?#iefix") format("embedded-opentype"), url("") format("woff2"), url("") format("woff"), url("") format("truetype"), url("#Lato") format("svg");
   /* Legacy iOS */
 }
 /* lato-regular - latin-ext_latin */
 @font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 400;
   src: url("");
   /* IE9 Compat Modes */
   src: local("Lato Regular"), local("Lato-Regular"), url("?#iefix") format("embedded-opentype"), url("") format("woff2"), url("") format("woff"), url("") format("truetype"), url("#Lato") format("svg");
   /* Legacy iOS */
 }
 /* lato-700 - latin-ext_latin */
 @font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 700;
   src: url("");
   /* IE9 Compat Modes */
   src: local("Lato Bold"), local("Lato-Bold"), url("?#iefix") format("embedded-opentype"), url("") format("woff2"), url("") format("woff"), url("") format("truetype"), url("#Lato") format("svg");
   /* Legacy iOS */
 }

 *{
 margin:0;
 padding:0;
 box-sizing:border-box
 }

 body,html{
 height:100%;
 font-family: "Lato", "Helvetica Neue", sans-serif;
 }

 a{
 font-family:inherit;
 font-size:14px;
 line-height:1.7;
 color:#666;
 margin:0;
 transition:all .4s;
 -webkit-transition:all .4s;
 -o-transition:all .4s;
 -moz-transition:all .4s
 }

 a:focus{outline:none!important}

 a:hover{
 text-decoration:none;
 color:rgb(150,119,184);
 }

 h1,h2,h3,h4,h5,h6{margin:0}

 p{font-family:inherit;
 font-size:14px;
 line-height:1.7;
 color:#666;
 margin:0}

 ul,li{margin:0;
 list-style-type:none}

 input{outline:none;
 border:none}

 textarea{outline:none;
 border:none}

 textarea:focus,input:focus{border-color:transparent!important}

 input:focus::-webkit-input-placeholder{color:transparent}

 input:focus:-moz-placeholder{color:transparent}

 input:focus::-moz-placeholder{color:transparent}

 input:focus:-ms-input-placeholder{color:transparent}

 textarea:focus::-webkit-input-placeholder{color:transparent}

 textarea:focus:-moz-placeholder{color:transparent}

 textarea:focus::-moz-placeholder{color:transparent}

 textarea:focus:-ms-input-placeholder{color:transparent}

 input::-webkit-input-placeholder{color:#999}

 input:-moz-placeholder{color:#999}

 input::-moz-placeholder{color:#999}

 input:-ms-input-placeholder{color:#999}

 textarea::-webkit-input-placeholder{color:#999}

 textarea:-moz-placeholder{color:#999}

 textarea::-moz-placeholder{color:#999}

 textarea:-ms-input-placeholder{color:#999}

 button{
     outline:none!important;
     border:none;
     background:0 0;
 }

 button:hover{cursor:pointer}

 iframe{border:none!important}

 .txt1{
     font-family:inherit;
     font-size:13px;
     line-height:1.5;
     color:#999
 }

 .txt2{
     font-family:inherit;
     font-size:13px;
     line-height:1.5;
     color:#666
 }

 .limiter{
     width:100%;
     margin:0 auto
 }

 .container-login100{
     width:100%;
     min-height:100vh;
     display:-webkit-box;
     display:-webkit-flex;
     display:-moz-box;
     display:-ms-flexbox;
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
     align-items:center;
     padding:15px;

 }

 .gradient {
 	background: -webkit-gradient(linear, left top, left bottom, from(#f9ce34), to(#6228d7) );
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 }

 .wrap-login100{
     /*width:960px;*/
     background:#fff;
     overflow:hidden;
     display:-webkit-box;
     display:-webkit-flex;
     display:-moz-box;
     display:-ms-flexbox;
     display:flex;
     flex-wrap:wrap;
     justify-content:space-between;
     /*padding:177px 130px 10px 95px;*/
     padding: 50px 80px 10px 80px;
     box-shadow: 0px 10px 15px 5px rgba(0,0,0,0.1);
     border-radius: 10px;

 }

 .login100-pic{
    /* width:316px;
     margin-top: 40px;*/
    text-align: center;
 }

 .login100-pic img{
     width:290px;
     max-width:100%
     text-align: center;
     margin-bottom: 40px;
 }

.login100-pic-forgot-password img{
     width:290px;
     max-width:100%
     text-align: center;
     /*padding-right:50px;*/
 }

 .login100-form{
     width:290px
  }

 .login100-form-title{
     font-family:inherit;
     font-size:24px;
     color:#333;
     line-height:1.2;
     text-align:center;
     width:100%;
     display:block;
 }

 .login100-form-subtitle{
     font-family:inherit;
     font-size:18px;
     color:#333;
     line-height:1.2;
     text-align:center;
     width:100%;
     display:block;
    /* padding-bottom:54px; */
 }

 .wrap-input100{
     position:relative;
     width:100%;
     z-index:1;
     margin-bottom:10px;
 }

 .input100{
     width:100%;
     height:40px;
     padding:0 30px 0 68px;
 }

 .focus-input100{
     display:block;
     position:absolute;
     border-radius:25px;
     bottom:0;
     left:0;
     z-index:-1;
     width:100%;
     height:100%;
     box-shadow:0 0;
     color:rgba(87,184,70,.8)
 }

 .input100:focus+.focus-input100{
     -webkit-animation:anim-shadow .5s ease-in-out forwards;
     animation:anim-shadow .5s ease-in-out forwards;
 }

 @-webkit-keyframes anim-shadow{to{box-shadow:0 0 70px 25px;
 opacity:0}
 }

 @keyframes anim-shadow{to{box-shadow:0 0 70px 25px;
 opacity:0}
 }

 .symbol-input100{
     font-size:15px;
     display:-webkit-box;
     display:-webkit-flex;
     display:-moz-box;
     display:-ms-flexbox;
     display:flex;
     align-items:center;
     position:absolute;
     border-radius:25px;
     bottom:0;
     left:0;
     width:100%;
     height:100%;
     padding-left:35px;
     pointer-events:none;
     color:#666;
     -webkit-transition:all .4s;
     -o-transition:all .4s;
     -moz-transition:all .4s;
     transition:all .4s;
 }

 .input100:focus+.focus-input100+.symbol-input100{
     color:#57b846;
     padding-left:28px;
 }

 .container-login100-form-btn{
     width:100%;
     display:-webkit-box;
     display:-webkit-flex;
     display:-moz-box;
     display:-ms-flexbox;
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
     padding-top:20px;
 }

 .login100-form-btn{
     font-family:inherit;
     font-size:15px;
     line-height:1.5;
     color:#fff;
     text-transform:uppercase;
     width:100%;
     height:40px;
     border-radius:5px;
     background:#57b846;
     display:-webkit-box;
     display:-webkit-flex;
     display:-moz-box;
     display:-ms-flexbox;
     display:flex;
     justify-content:center;
     align-items:center;
     padding:0 25px;
     -webkit-transition:all .4s;
     -o-transition:all .4s;
     -moz-transition:all .4s;
     transition:all .4s;
 }

 .login100-form-btn:hover{background:#333}

 @media(max-width:992px){.wrap-login100{padding:177px 90px 33px 85px}

 .login100-pic{width:35%}

 .login100-form{width:50%}

 }

 @media(max-width:768px){.wrap-login100{padding:100px 80px 33px}

 .login100-pic{
     width:80%;
     margin: auto;
     display: block;
     */display:none*/
 }

 .login100-pic img{
     padding-bottom: 20px;
     width: 100%;
     }

 .login100-pic-forgot-password {
    padding-bottom: 100px;
    width: 100%;
 }

 .login100-form{width:100%}

 }

 @media(max-width:576px){.wrap-login100{padding:30px 45px 30px}

 }

 .validate-input{position:relative}

 .alert-validate::before{content:attr(data-validate);
 position:absolute;
 max-width:70%;
 background-color:#fff;
 border:1px solid #c80000;
 border-radius:13px;
 padding:4px 25px 4px 10px;
 top:50%;
 -webkit-transform:translateY(-50%);
 -moz-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 -o-transform:translateY(-50%);
 transform:translateY(-50%);
 right:8px;
 pointer-events:none;
 font-family:inherit;
 color:#c80000;
 font-size:13px;
 line-height:1.4;
 text-align:left;
 visibility:hidden;
 opacity:0;
 -webkit-transition:opacity .4s;
 -o-transition:opacity .4s;
 -moz-transition:opacity .4s;
 transition:opacity .4s}

 .alert-validate::after{content:"\f06a";
 font-family:inherit;
 display:block;
 position:absolute;
 color:#c80000;
 font-size:15px;
 top:50%;
 -webkit-transform:translateY(-50%);
 -moz-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 -o-transform:translateY(-50%);
 transform:translateY(-50%);
 right:13px}

 .alert-validate:hover:before{visibility:visible;
 opacity:1}

 @media(max-width:992px){.alert-validate::before{visibility:visible;
 opacity:1}

 }

 .login-fail{
     background: #faccd0;
     border: 2px solid transparent;
     border-width: 0 0 0 6px;
     color: #b94a48;
     font-weight: 600;
     padding: 1.5rem;
     margin: 1rem 0;
     border-radius: 3px;
     font-size: 15rem;
     display: inline-block;
     position: relative;
     text-decoration: none!important;
     cursor: pointer;
     text-align: center;
     overflow: visible;
     width: 100%;

 }

 .p-t-12{padding-top:12px}

 .p-t-136{padding-top:136px}

 .text-white{color:#fff}

 .text-black{color:#000}

 .text-hov-white:hover{color:#fff}

 .text-up{text-transform:uppercase}

 .text-center{text-align:center}

 .text-left{text-align:left}

 .text-right{text-align:right}

 .text-middle{vertical-align:middle}

 .dis-none{display:none}

 .dis-block{display:block}

 .dis-inline{display:inline}

 .dis-inline-block{display:inline-block}

 .dis-flex{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex}

 .pos-relative{position:relative}

 .pos-absolute{position:absolute}

 .pos-fixed{position:fixed}

 .float-l{float:left}

 .float-r{float:right}

 .sizefull{width:100%;
 height:100%}

 .w-full{width:100%}

 .h-full{height:100%}

 .max-w-full{max-width:100%}

 .max-h-full{max-height:100%}

 .min-w-full{min-width:100%}

 .min-h-full{min-height:100%}

 .top-0{top:0}

 .bottom-0{bottom:0}

 .left-0{left:0}

 .right-0{right:0}

 .top-auto{top:auto}

 .bottom-auto{bottom:auto}

 .left-auto{left:auto}

 .right-auto{right:auto}

 .bgwhite{background-color:#fff}

 .bgblack{background-color:#000}

 .wrap-pic-w img{width:100%}

 .wrap-pic-max-w img{max-width:100%}

 .wrap-pic-h img{height:100%}

 .wrap-pic-max-h img{max-height:100%}

 .wrap-pic-cir{border-radius:50%;
 overflow:hidden}

 .wrap-pic-cir img{width:100%}

 .hov-pointer:hover{cursor:pointer}

 .hov-img-zoom{display:block;
 overflow:hidden}

 .hov-img-zoom img{width:100%;
 -webkit-transition:all .6s;
 -o-transition:all .6s;
 -moz-transition:all .6s;
 transition:all .6s}

 .hov-img-zoom:hover img{-webkit-transform:scale(1.1);
 -moz-transform:scale(1.1);
 -ms-transform:scale(1.1);
 -o-transform:scale(1.1);
 transform:scale(1.1)}

 .bo-cir{border-radius:50%}

 .of-hidden{overflow:hidden}

 .visible-false{visibility:hidden}

 .visible-true{visibility:visible}

 .trans-0-1{-webkit-transition:all .1s;
 -o-transition:all .1s;
 -moz-transition:all .1s;
 transition:all .1s}

 .trans-0-2{-webkit-transition:all .2s;
 -o-transition:all .2s;
 -moz-transition:all .2s;
 transition:all .2s}

 .trans-0-3{-webkit-transition:all .3s;
 -o-transition:all .3s;
 -moz-transition:all .3s;
 transition:all .3s}

 .trans-0-4{-webkit-transition:all .4s;
 -o-transition:all .4s;
 -moz-transition:all .4s;
 transition:all .4s}

 .trans-0-5{-webkit-transition:all .5s;
 -o-transition:all .5s;
 -moz-transition:all .5s;
 transition:all .5s}

 .trans-0-6{-webkit-transition:all .6s;
 -o-transition:all .6s;
 -moz-transition:all .6s;
 transition:all .6s}

 .trans-0-9{-webkit-transition:all .9s;
 -o-transition:all .9s;
 -moz-transition:all .9s;
 transition:all .9s}

 .trans-1-0{-webkit-transition:all 1s;
 -o-transition:all 1s;
 -moz-transition:all 1s;
 transition:all 1s}

 .flex-w{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-wrap:wrap;
 -moz-flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 -o-flex-wrap:wrap;
 flex-wrap:wrap}

 .flex-l{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:flex-start}

 .flex-r{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:flex-end}

 .flex-c{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:center}

 .flex-sa{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:space-around}

 .flex-sb{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:space-between}

 .flex-t{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -ms-align-items:flex-start;
 align-items:flex-start}

 .flex-b{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -ms-align-items:flex-end;
 align-items:flex-end}

 .flex-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -ms-align-items:center;
 align-items:center}

 .flex-str{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -ms-align-items:stretch;
 align-items:stretch}

 .flex-row{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:row;
 -moz-flex-direction:row;
 -ms-flex-direction:row;
 -o-flex-direction:row;
 flex-direction:row}

 .flex-row-rev{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:row-reverse;
 -moz-flex-direction:row-reverse;
 -ms-flex-direction:row-reverse;
 -o-flex-direction:row-reverse;
 flex-direction:row-reverse}

 .flex-col{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column}

 .flex-col-rev{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column-reverse;
 -moz-flex-direction:column-reverse;
 -ms-flex-direction:column-reverse;
 -o-flex-direction:column-reverse;
 flex-direction:column-reverse}

 .flex-c-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:center;
 -ms-align-items:center;
 align-items:center}

 .flex-c-t{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:center;
 -ms-align-items:flex-start;
 align-items:flex-start}

 .flex-c-b{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:center;
 -ms-align-items:flex-end;
 align-items:flex-end}

 .flex-c-str{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:center;
 -ms-align-items:stretch;
 align-items:stretch}

 .flex-l-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:flex-start;
 -ms-align-items:center;
 align-items:center}

 .flex-r-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:flex-end;
 -ms-align-items:center;
 align-items:center}

 .flex-sa-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:space-around;
 -ms-align-items:center;
 align-items:center}

 .flex-sb-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 justify-content:space-between;
 -ms-align-items:center;
 align-items:center}

 .flex-col-l{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column;
 -ms-align-items:flex-start;
 align-items:flex-start}

 .flex-col-r{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column;
 -ms-align-items:flex-end;
 align-items:flex-end}

 .flex-col-c{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column;
 -ms-align-items:center;
 align-items:center}

 .flex-col-l-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column;
 -ms-align-items:flex-start;
 align-items:flex-start;
 justify-content:center}

 .flex-col-r-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column;
 -ms-align-items:flex-end;
 align-items:flex-end;
 justify-content:center}

 .flex-col-c-m{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column;
 -ms-align-items:center;
 align-items:center;
 justify-content:center}

 .flex-col-str{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column;
 -ms-align-items:stretch;
 align-items:stretch}

 .flex-col-sb{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
 -o-flex-direction:column;
 flex-direction:column;
 justify-content:space-between}

 .flex-col-rev-l{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column-reverse;
 -moz-flex-direction:column-reverse;
 -ms-flex-direction:column-reverse;
 -o-flex-direction:column-reverse;
 flex-direction:column-reverse;
 -ms-align-items:flex-start;
 align-items:flex-start}

 .flex-col-rev-r{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column-reverse;
 -moz-flex-direction:column-reverse;
 -ms-flex-direction:column-reverse;
 -o-flex-direction:column-reverse;
 flex-direction:column-reverse;
 -ms-align-items:flex-end;
 align-items:flex-end}

 .flex-col-rev-c{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column-reverse;
 -moz-flex-direction:column-reverse;
 -ms-flex-direction:column-reverse;
 -o-flex-direction:column-reverse;
 flex-direction:column-reverse;
 -ms-align-items:center;
 align-items:center}

 .flex-col-rev-str{display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column-reverse;
 -moz-flex-direction:column-reverse;
 -ms-flex-direction:column-reverse;
 -o-flex-direction:column-reverse;
 flex-direction:column-reverse;
 -ms-align-items:stretch;
 align-items:stretch}

 .ab-c-m{position:absolute;
 top:50%;
 left:50%;
 -webkit-transform:translate(-50%,-50%);
 -moz-transform:translate(-50%,-50%);
 -ms-transform:translate(-50%,-50%);
 -o-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%)}

 .ab-c-t{position:absolute;
 top:0;
 left:50%;
 -webkit-transform:translateX(-50%);
 -moz-transform:translateX(-50%);
 -ms-transform:translateX(-50%);
 -o-transform:translateX(-50%);
 transform:translateX(-50%)}

 .ab-c-b{position:absolute;
 bottom:0;
 left:50%;
 -webkit-transform:translateX(-50%);
 -moz-transform:translateX(-50%);
 -ms-transform:translateX(-50%);
 -o-transform:translateX(-50%);
 transform:translateX(-50%)}

 .ab-l-m{position:absolute;
 left:0;
 top:50%;
 -webkit-transform:translateY(-50%);
 -moz-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 -o-transform:translateY(-50%);
 transform:translateY(-50%)}

 .ab-r-m{position:absolute;
 right:0;
 top:50%;
 -webkit-transform:translateY(-50%);
 -moz-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 -o-transform:translateY(-50%);
 transform:translateY(-50%)}

 .ab-t-l{position:absolute;
 left:0;
 top:0}

 .ab-t-r{position:absolute;
 right:0;
 top:0}

 .ab-b-l{position:absolute;
 left:0;
 bottom:0}

 .ab-b-r{position:absolute;
 right:0;
 bottom:0}

 /*INPUT LOGIN E SENHA*/
 body .ui-float-label > label {
   margin-left: 0.5rem;
   color: transparent;
   /*color: #6c757d;*/
 }

 /*CORES MSG LOGIN*/
 body .ui-messages .ui-messages-info {
   color: #3a87ad;
   background-color: #d9edf7;
   border-color: #bce8f1;
 }

 body .ui-messages .ui-messages-info .ui-messages-info-icon {
     display: none;
 }

 body .ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon {
     display: none;
 }

 body .ui-messages .ui-messages-error, body .ui-messages .ui-messages-fatal {
     color: #b94a48;
     background-color: #faccd0;
     border-color: #b94a48;
 }

        .containerx {
            display: flex;
            width: 100%;
            height: 100vh;
        }

        .image-section {
            flex: 1;
            /*DESKTOP*/
            background: url("/MIM/jakarta.faces.resource/images/login-tucson-3.jpg.xhtml?ln=mirage-layout") no-repeat center center;
            background-size: contain;
            background-repeat: no-repeat;
            background-color: #f0f0f0;
        }

        .login-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: white;
            padding: 20px;
        }

        .logo {
            width: 300px;
            margin-bottom: 50px;
            z-index: 1000;
        }

        form {
            width: 100%;
            max-width: 300px;
            display: flex;
            flex-direction: column;
        }
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .password-container {
            position: relative;
        }
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
        .forgot-password {
            text-align: center;
            margin-top: 10px;
            color: #007bff;
            text-decoration: none;
        }

        @media (max-width: 768px) {
                    .container {
                        flex-direction: column;
                        position: relative;
                    }
                    .image-section {
                        flex: 1;
                        /*MOBILE*/
                        background: url("/MIM/jakarta.faces.resource/images/login-tucson-3.jpg.xhtml?ln=mirage-layout") no-repeat center center;
                        background-size: cover;
                        background-repeat: no-repeat;
                        height: 100vh;
                        width: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    .logo {
                                width: 200px;
                                margin-bottom: 50px;
                    }

                    .login-section {
                        flex: 1;
                        background: rgba(255, 255, 255, 0.8);
                        padding: 20px 40px;
                        text-align: center;
                        position: absolute;
                        top: 21%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 90%;
                        max-width: 320px;
                        border-radius: 10px;
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    }
                    input, button {
                        background: rgba(255, 255, 255, 0.9);
                    }
                }

}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

body, html {
  height: 100%;
  background: white;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  background: url("") no-repeat center center;
  padding: 2rem;
  position: relative;
}

.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000;
  max-width: 60%;
  padding: 1rem 2rem;
}

.logo {
  width: 150px;
  margin-bottom: 10px;
}

.text-content h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.text-content p {
  font-size: 1.2rem;
}

.login-box {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  max-width: 350px;
  width: 100%;
  align-self: center;
  margin-left: auto;
}

.login-box h2 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.login-box form input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.reset-password {
  margin-bottom: 1rem;
}

.reset-password a {
  font-size: 0.9rem;
  color: #2e3e59;
  text-decoration: none;
}

.login-box button {
  width: 100%;
  background: #2e3e59;
  color: white;
  border: none;
  border-radius: 24px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    background-position: center;
    background-size: cover;
  }

  .left-panel {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .login-box {
    margin: 2rem auto;
  }
}