/**
 * Estilos generales del login de iClientList
 * 
 * @author: https://webjrcode.com
 * @version: 1.0
 * @license: Open Source
 * @since: Abril 2018
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{ display: block; }
body{ line-height: 1; }
ol, ul{ list-style: none; }
blockquote, q{ quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea{ -webkit-appearance: none; -moz-appearance: none; appearance: none; }
a, a:hover, a:active{ text-decoration: none; }

/* ////// GENERAL ////// */
body { height: 100vh; line-height: 1; overflow: hidden; background: rgb(25, 181, 254) url(/assets/imgs/bg-login-icheck.jpg) no-repeat center / cover; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; }
.ic_login-wrap{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.ic_login-page { width: 360px; padding: 2% 0; margin: auto; }
.container { position: relative; z-index: 1; max-width: 300px; margin: 0 auto; }
.container:before, .container:after { content: ""; display: block; clear: both; }
.container .info { margin: 50px auto; text-align: center; }

/* ////// FORMS ////// */
.ic_container_form { position: relative; z-index: 1; background: #FFFFFF; max-width: 360px; margin: auto; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); }
.ic_container_form input, .ic_container_form select { font-family: 'Poppins', sans-serif; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; border-radius: 0; }
.ic_container_form select{ background: #f2f2f2 url(/assets/css/icons/select.png) no-repeat calc(100% - 15px) center / 10px !important; padding-right: 25px !important; }
.ic_container_form button { font-family: 'Poppins', sans-serif; text-transform: uppercase; outline: 0; background: #19B5FE; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; }
.ic_container_form button:hover,.form button:active,.form button:focus { background: #19B5FE; }
.ic_container_form .user-input,
.ic_container_form .user-input:-webkit-autofill:hover, 
.ic_container_form .user-input:-webkit-autofill:focus { background: #F2F2F2 url(/assets/css/icons/user-input.png) no-repeat calc(100% - 12.5px) center / 15px !important; padding-right: 40px !important; }
.ic_container_form .password-input,
.ic_container_form .password-input:-webkit-autofill:hover, 
.ic_container_form .password-input:-webkit-autofill:focus{ background: #F2F2F2 url(/assets/css/icons/password-input.png) no-repeat calc(100% - 12.5px) center / 15px !important; padding-right: 40px !important; }
.ic_container_form .ic_message { margin: 15px 0 0; color: #b3b3b3; font-size: 14px; }
.ic_container_form .ic_message a { color: #19B5FE; text-decoration: none; }
.ic_container_form .ic_resetpass-form { display: none; }
.ic_container_form .ic_message-error{ font-size: 15px; color: rgba(90,90,90,1); line-height: 1.5em; }
.ic_container_form .ic_message-error a, .ic_container_form .ic_message-error strong{ font-weight: 600; color: rgba(90,90,90,1); }
.ic_container_form .ic_message-error a{ text-decoration: underline; }
.ic_container_form .msg-timeout, .ic_container_form .msg-invalid{ font-size: 14px; line-height: 20px; color: red; padding-bottom: 15px; }
.ic_container_form .msg-invalid{ display: none; }
.ic_container_form .btn_to-login { display: none; text-decoration: none !important; font-family: 'Poppins', sans-serif; text-transform: uppercase; outline: 0; background: #19B5FE; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; }

/* ////// FONTS ////// */
.ic_login_title{ font-family: 'Poppins' !important; font-weight: 900; font-size: 45px; letter-spacing: 0; color: #ffffff; text-align: center; margin: 10px auto; }
.container .info h1 { margin: 0 0 15px; padding: 0; font-size: 36px; font-weight: 300; color: #1a1a1a; }
.container .info span { color: #4d4d4d; font-size: 12px; }
.container .info span a { color: #000000; text-decoration: none; }
.container .info span .fa { color: #EF3B3A; }

/* ////// LOADER ////// */
.preloader{ display: none; position: fixed; top: 0; left: 0; width:100vw; height: 100vh; background-color: rgba(255,255,255,.3); z-index:999; }
.preloader .position{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; -webkit-animation: rotation 10s linear infinite; animation: rotation 10s linear infinite; }
.preloader .center{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; -webkit-animation: rotation 1.75s ease-in-out infinite; animation: rotation 1.75s ease-in-out infinite; }
.preloader .first{ width: 70px; height: 34px; overflow:hidden; position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -35px; }
.preloader .left{ width: 70px; height: 70px; border: none; -webkit-animation: leftTurn 1.75s ease-in-out infinite; animation: leftTurn 1.75s ease-in-out infinite; }
.preloader .second{ width: 70px; height: 70px; overflow: hidden; position: absolute; top: 50%; left: 50%; margin-top: -35px; margin-left: -35px; }
.preloader .third{ width: 72px; height: 38px; position: absolute; top: 50%; left: 50%; margin-top: -38px; margin-left: -36px; }
.preloader .right{ width: 70px; height: 70px; border: none; -webkit-animation: rightTurn 1.75s linear infinite; animation: rightTurn 1.75s linear infinite; }
.preloader .left::before, .preloader .right::before{ content:''; position: absolute; top: 0; left: 0; width: 70px; height: 70px; border-style: solid; border-width: 6px; border-top-color: #FFF; border-right-color: #FFF; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-animation: colorChange 2s infinite alternate; animation: colorChange 2s infinite alternate; }
@-webkit-keyframes leftTurn{ 0%, 40%{ -webkit-transform: rotate(135deg); transform:rotate(135deg); } 100%{ -webkit-transform: rotate(490deg);transform:rotate(490deg); } }
        @keyframes leftTurn{ 0%, 40%{ -webkit-transform: rotate(135deg); transform:rotate(135deg); } 100%,100%{ -webkit-transform: rotate(490deg);transform:rotate(490deg); } } 
@-webkit-keyframes rightTurn{ 0%{ -webkit-transform: rotate(-40deg); transform:rotate(-40deg); } 15%{ -webkit-transform: rotate(0deg);transform: rotate(0deg); } 40%{ -webkit-transform: rotate(135deg); transform: rotate(135deg); } 70%, 80%{ -webkit-transform: rotate(316deg); transform: rotate(316deg); } 100%{ -webkit-transform: rotate(320deg); transform:rotate(320deg); } } 
        @keyframes rightTurn{ 0%{ -webkit-transform: rotate(-40deg); transform:rotate(-40deg); } 15%{ -webkit-transform: rotate(0deg);transform: rotate(0deg); } 40%{ -webkit-transform: rotate(135deg); transform: rotate(135deg); } 70%, 80%{ -webkit-transform: rotate(316deg); transform: rotate(316deg); } 100%{ -webkit-transform: rotate(320deg); transform:rotate(320deg); } }
@-webkit-keyframes rotation{ 0%{ -webkit-transform: rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform: rotate(360deg);transform: rotate(360deg); } }
        @keyframes rotation{ 0%{ -webkit-transform: rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform: rotate(360deg);transform: rotate(360deg); } }
@-webkit-keyframes colorChange { 0%, 100% { border-top-color:#19B5FE; border-right-color:#19B5FE } 50% { border-top-color: #4b77be; border-right-color: #4b77be; } }
        @keyframes colorChange{ 0%, 100% { border-top-color:#19B5FE; border-right-color:#19B5FE } 50% { border-top-color: #4b77be; border-right-color: #4b77be; } }

/* ////// RESPONSIVE ////// */
@media (max-width: 900px) and (orientation: landscape) {
  .ic_svg_logo, .ic_login_title{
    display: none !important;
  }
}
@media all and (max-width: 400px){
  .ic_login_title{ font-size: 30px !important; }
  .ic_login-page{ width: 300px !important; }
  .ic_svg_logo{ width: 100px !important; height: 100px !important; }
}