/*
//==========================================================================================================================
// SU = super user login styling.
//
// Last modified: 10.10.18
// Author: Romet Saarna (aka TheKuru) http://wizil.eu
//==========================================================================================================================
*/



/* -------------------------------------------------------------------------------------------------- */
/* super user login page; index.php */
/* -------------------------------------------------------------------------------------------------- */

/* login form positioning and styling */
.su-login-form {
/* Size & position */
 width: 350px;
 margin: 150px auto 30px;
 padding: 10px;
 position: relative; /* For the submit button positioning */
/* Styles */
 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 
             0 3px 7px rgba(0, 0, 0, 0.3), 
             inset 0 1px rgba(255,255,255,1),
             inset 0 -3px 2px rgba(0,0,0,0.25);
 border-radius: 5px;
 background: linear-gradient(#eeefef, #ffffff 10%);
}

/* title field inside login form */
.su-login-form-title {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 font-size: 15px;
 font-weight: 400;
 text-align: center;
}

/* input fields positioning */
.su-login-form-inputfield {
 position: relative; /* For the icon positioning */
}

/* icon styling and position on the left of input field */
.su-login-form-inputfield i {
 left: 0px;
 top: 0px;
 position: absolute;
 height: 36px;
 width: 36px;
 color: #777777;
 text-align: center;
 line-height: 42px;
 transition: all 0.3s ease-out;
 pointer-events: none;
/* separator line on the left */
 border-right: 1px solid rgba(0, 0, 0, 0.1);
 box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
}

/* input fields styling */
.su-login-form input[type=text],
.su-login-form input[type=password] {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 font-size: 13px;
 font-weight: 400;
 text-shadow: 0 1px 0 rgba(255,255,255,0.8);
/* Size and position */
 width: 100%;
 padding: 10px 18px 10px 45px;
 box-sizing: border-box;
/* Styles */
 border: none; /* Remove the default border */
 box-shadow: inset 0 0 5px rgba(0,0,0,0.1),
             inset 0 3px 2px rgba(0,0,0,0.1);
 border-radius: 3px;
 background: #f9f9f9;
 color: #777;
 transition: color 0.3s ease-out;
}

.su-login-form input[type=text] {
 margin-bottom: 10px;
}

.su-login-form input[type=text]:hover ~ i,
.su-login-form input[type=password]:hover ~ i {
 color: #52cfeb;
}

.su-login-form input[type=text]:focus ~ i,
.su-login-form input[type=password]:focus ~ i {
 color: #42A2BC;
}

.su-login-form input[type=text]:focus,
.su-login-form input[type=password]:focus,
.su-login-form button[type=submit]:focus {
 outline: none;
}

.su-login-form-submitfield {
/* Size and position */
 width: 65px;
 height: 65px;
 position: absolute;
 top: 48px;
 right: -25px;
 padding: 10px;
 z-index: 2;
/* Styles */
 background: #ffffff;
 border-radius: 50%;
 box-shadow: 0 0 2px rgba(0,0,0,0.1),
             0 3px 2px rgba(0,0,0,0.1),
             inset 0 -3px 2px rgba(0,0,0,0.2);
}

.su-login-form button {
/* Size and position */
 width: 100%;
 height: 100%;
 margin-top: -1px;
/* Icon styles */
 font-size: 1.4em;
 line-height: 1.75;
 color: white;
/* Styles */
 border: none; /* Remove the default border */
 border-radius: inherit;
 background: linear-gradient(#52cfeb, #42A2BC);
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),
             0 1px 2px rgba(0,0,0,0.35),
             inset 0 3px 2px rgba(255,255,255,0.2),
             inset 0 -3px 2px rgba(0,0,0,0.1);
 cursor: pointer;
}

.su-login-form button:hover,
.su-login-form button[type=submit]:focus {
 background: #52cfeb;
 transition: all 0.3s ease-out;
}

.su-login-form button:active {
 background: #42A2BC;
 box-shadow: inset 0 0 5px rgba(0,0,0,0.3),
             inset 0 3px 4px rgba(0,0,0,0.3);
}
/* -------------------------------------------------------------------------------------------------- */