body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
.logPage{background-image: linear-gradient(90deg,rgb(1 49 68) 0,rgb(123 72 0) 100%);}
.logPage_box{width:360px;margin:10px auto}
.logPage_body{background:#fff;padding:10px 20px 0px 20px; border-top:0;color:#666}


.logPage .logPage_form_group{margin-bottom:7px;}
.logPage_logo,.register-logo{font-size:35px;text-align:center;margin-bottom:25px;font-weight:300}
.logPage_logo h4{
		font-size: 16px;
		margin-top: 10px;
	  margin-bottom: 10px;
		font-family: inherit;
	  font-weight: 500;
	  line-height: 1.1;
	  color: #fff;
}

.logPage_logo a,.register-logo a{color:#444}
.login-box-msg,.register-box-msg{
	font-size:24px;margin:0;text-align:center;padding:0 0 8px 0;
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(110, 5, 148, 0.75), rgba(0, 0, 0, 0));
	border-image-slice: 1;
}


.has-feedback {
    position: relative;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
.has-feedback .form-control {
    padding-right: 42.5px;
}

.error-msg{height:24px; margin-bottom:-18px!important; padding-left:10px;}
.error-msg label.error{position: relative; color:#ff0000; font-style:italic; font-weight:500; }#error-msg{color:red;}
.error-msg label.success {position: relative; color:#28a745; font-style:italic; font-weight:500; }

.logPage_body .input-type-title {
		color:rgb(111, 111, 117);
    font-size: 0.9rem;
    font-weight: 550;
    margin: 4px 0px;
    /*text-align: center;*/
    padding-bottom: 2px;
}

/* ==================== LOGPAGE_FORM_GROUP INPUT ==================== */
.logPage_form_group .logPage_container {
    position: relative;
    margin: 5px 0;
}

.logPage_form_group .logPage_container_input {
    width: 100%;
    padding: 8px 15px;
    border: 2px solid rgba(51, 51, 52, 0.3);
    border-radius: 8px;
		background: none;
    /*background: radial-gradient(circle at center, rgba(25, 25, 112, 0.8), rgba(0, 0, 0, 0.9));*/
    color:rgb(92, 92, 94);
		/*color: #ffa500;*/
    font-size: 16px;
    outline: none;
    transition: all 0.4s ease;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
}

.logPage_form_group .logPage_container_input::placeholder {
    color: rgba(92, 92, 94, 0.6);
		/*color: rgba(255, 165, 0, 0.6);*/
		font-size: 14px;
}

.logPage_form_group .neural-connections {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.logPage_form_group .neural-connections::before,
.logPage_form_group .neural-connections::after {
    content: '';
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent,rgb(0, 221, 255), transparent);
    animation: neural-pulse 2s ease-in-out infinite;
}

.logPage_form_group .neural-connections::before {
    top: 25%;
    left: 20%;
    right: 30%;
}

.logPage_form_group .neural-connections::after {
    bottom: 25%;
    left: 30%;
    right: 20%;
    animation-delay: 1s;
}

.logPage_form_group .neural-nodes {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  border-radius: 20px;
	  opacity: 0;
	  transition: opacity 0.4s ease;
	  z-index: 2;
}

.logPage_form_group .neural-nodes::before,
.logPage_form_group .neural-nodes::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            background:rgb(0, 221, 255);
            border-radius: 50%;
            box-shadow: 0 0 10px rgb(0, 221, 255);
            animation: neural-node-pulse 2s ease-in-out infinite;
        }

.logPage_form_group .neural-nodes::before {
            top: 22%;
            left: 15%;
        }

.logPage_form_group .neural-nodes::after {
            bottom: 22%;
            right: 15%;
            animation-delay: 1s;
        }

.logPage_form_group .logPage_container_input:focus {
            border-color:rgb(0, 221, 255);
            box-shadow:
                0 0 15px rgba(0, 221, 255, 0.4),
                inset 0 0 10px rgba(0, 221, 255, 0.1);
            /*text-shadow: 0 0 8px rgba(0, 221, 255, 0.6);*/
        }

.logPage_form_group .logPage_container_input:focus + .neural-connections,
.logPage_form_group .logPage_container_input:focus + .neural-connections + .neural-nodes {
            opacity: 1;
        }

        @keyframes neural-pulse {
            0%, 100% { opacity: 0.3; transform: scaleX(1); }
            50% { opacity: 1; transform: scaleX(1.2); }
        }

        @keyframes neural-node-pulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.5); opacity: 1; }
        }

.logPage_form_group .field-icon {
	  float: right;
	  margin-right: 2px;
	  margin-top: -36px;
	  position: relative;
	  z-index: 3;
	  cursor:pointer;
	  color: inherit;
	  background :none;
	  padding:9px;
	  color:#777;
	  font-size: 16px;
}
.logPage_body .link-center{text-align:center; padding-bottom:20px; margin-top:-10px;}
.logPage_body .cell > a{
  position: relative;
  width: 360px;
  font-size: 14px;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 24px;
	color: #198fff;
}
.logPage_body .cell > a:before, .logPage_body .cell > a:after{
  content: '';
  position: absolute;
  transition: transform .5s ease;
}
.logPage_body .cell > a:hover{
	color:rgb(67, 6, 198);
}
.logPage_body .hover-1:before {
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #492059;
  transform: scaleX(0);
}
.logPage_body .hover-1:hover:before {
  transform: scaleX(1);
}
.logPage_body .btn-parshi{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.logPage_body .btn-parshi-1{
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
.logPage_body .btn-parshi-1:hover{
    color: #fff;
    background-color: #ec971f; /* vivid orange */
    border-color: #d58512;
}
.logPage_body .btn-parshi-2{
    color: #fff;
    background-color: #2196F3;
    border-color: #1d87da;
}
.logPage_body .btn-parshi-2:hover{
    color: #fff;
    background-color: #2173F3; /* Vivid blue */
    border-color: #1a5cc2;
}

/* MAD-RIPPLE EFFECT */
.ripple{
  position: absolute;
  top:0; left:0; bottom:0; right:0;
  overflow: hidden;
  -webkit-transform: translateZ(0); /* to contain zoomed ripple */
  transform: translateZ(0);
  border-radius: inherit; /* inherit from parent (rounded buttons etc) */
  pointer-events: none; /* allow user interaction */
          animation: ripple-shadow 0.4s forwards;
  -webkit-animation: ripple-shadow 0.4s forwards;
}
.rippleWave{
  backface-visibility: hidden;
  position: absolute;
  border-radius: 50%;
  transform: scale(0.7); -webkit-transform: scale(0.7);
  background: rgba(255,255,255, 1);
  opacity: 0.45;
          animation: ripple 2s forwards;
  -webkit-animation: ripple 2s forwards;
}
@keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@-webkit-keyframes ripple-shadow {
  0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
  20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
  100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@keyframes ripple {
  to {transform: scale(24); opacity:0;}
}
@-webkit-keyframes ripple {
  to {-webkit-transform: scale(24); opacity:0;}
}


/* MAD-BUTTONS (demo) */
[class*=mad-button-]{
  display:inline-block;
  text-align:center;
  position: relative;
  margin: 0;
  white-space: nowrap;
  vertical-align: middle;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  border: 0; outline: 0;
  background: none;
  transition: 0.3s;
  cursor: pointer;
  color: rgba(0,0,0, 0.82);
}
[class*=mad-button-] i.material-icons{
  vertical-align:middle;
  padding:0;
}
.mad-button-raised{
  height: 34px;
  padding: 0px 16px;
  line-height: 34px;
  border-radius: 0px;
  box-shadow: /*amb*/ 0 0   2px rgba(0,0,0,0.15),
    /*key*/ 0 1px 3px rgba(0,0,0,0.25);
}.mad-button-raised:hover{
  box-shadow: /*amb*/ 0 0   2px rgba(0,0,0,0.13),
    /*key*/ 0 2px 4px rgba(0,0,0,0.2);
}
.mad-button-action{
  width: 56px; height:56px;
  padding: 16px 0;
  border-radius: 32px;
  box-shadow: /*amb*/ 0 0   2px rgba(0,0,0,0.13),
    /*key*/ 0 5px 7px rgba(0,0,0,0.2);
}.mad-button-action:hover{
  box-shadow: /*amb*/ 0 0   2px rgba(0,0,0,0.11),
    /*key*/ 0 6px 9px rgba(0,0,0,0.18);
}
[class*=mad-button-].mad-ico-left  i.material-icons{ margin: 0 8px 0 -4px; }
[class*=mad-button-].mad-ico-right i.material-icons{ margin: 0 -4px 0 8px; }

/* MAD-COLORS */
.bg-primary-Dark-violet{background:#6600cc; color:#fff;}
.bg-primary-Dark-violet:hover{background:#660099; color:#fff;}
.bg-primary-dark-lime-green{background:#009900; color:#fff;}
.bg-primary-dark-lime-green:hover{background:#006600; color:#fff;}
.bg-primary-Pure-orange{background:#ff9900; color:#fff;}
.bg-primary-Pure-orange:hover{background:#ff6600; color:#fff;}
.bg-primary-Vivid-pink{background:#ff33cc; color:#fff;}
.bg-primary-Vivid-pink:hover{background:#ff0099; color:#fff;}
.bg-primary-Vivid-blue{ background:#2196F3; color:#fff; }
.bg-primary-Vivid-blue:hover{ background:#2173F3; color:#fff; }
.bg-primary-Soft-blue{ background: #BBDEFB; color: rgba(0,0,0,0.82);}
.bg-primary-Soft-blue:hover{ background: #5b89f6; color: rgba(0,0,0,0.82);}
.bg-accented{ background:#FF4081; color:#fff; }

/* ========== msgBoxAlert =========== */
.msgBoxAlert {
    letter-spacing: .11em;
    word-spacing:.33em;
    text-rendering: optimizeSpeed;
    font-family: FreeSans, Arimo, Droid Sans, Helvetica, Arial, sans-serif;
    display: flex;
    display:-webkit-flex;display:-ms-flexbox;
}

.pure-u-1-8, .pure-u-2-5, .pure-u-7-8 {
    display: inline-block;
    zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto
}
.pure-u-2-5 { width: 21%; }
.pure-u-7-8 { width: 87.5%; }
.pure-u-1-8 { width: 12.5%; }

/* ---------- Alert Box ---------- */
.msgBoxAlert.msg_alert{
    position: absolute;
    margin-top: 0.0rem;
    width: 360px;
    height: auto;
    background: linear-gradient(to right, #3466f7 0%, #4529d9 100%);
    color: #fff;
    border-radius: 0px 0px 6px 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    padding: 2px 0;
}
/* ---------- Progress Bar ---------- */
.progress-responsive {

}
.progress-responsive figure {
    position: absolute;
    margin: 0;
    height: 3px;
    background: rgba(255,255,255,0.15);
    /*overflow: hidden;*/
    width: 100%;
}

/* Progress bar shape */
figure div:first-child {
  position: absolute;
	width: 0;
	height: 3px;
	border-radius: 1px;

}

/* Percent text */
figure div:last-child {
	position: absolute;
	top: 10px;
	right: 8px;
  text-align: center;
  align-items: center;
	font-weight: normal;
  font-family: sans-serif;
  color: #e1e1e1;

}
.progress-responsive__bar {
    width: 0%;
    height: 3px;
    background: #ffca28;
    border-radius: 0 0 8px 8px;
    transition: width 0.05s linear;
}
.progress-responsive__percent {
    position: absolute;
    top: 50%;          /* vertically center top: 8px;*/
    left: 50%;         /* horizontally center if needed */
    transform: translate(-50%, -50%); /* perfectly center */
    font-size: 0.8rem;
    color: #fff;
    opacity: 0.8;
    white-space: nowrap; /* prevent wrapping */
    pointer-events: none; /* optional, so it doesn't block clicks */
}

/* ---------- Inner Layout ---------- */
.msgBoxAlert .msgbox_support {
    text-align: left;
    padding-top:1.17647rem;padding-bottom:1.17647rem;
    color:#fff
}
.msgBoxAlert .msgbox_support_text {
    padding:0 15px 0px 15px;
    border-left: 2px solid rgba(255,255,255,0.25);
    font-size:2.42353rem
}

.msgBoxAlert .msgbox_message_title {
    font-weight: 500;
    font-size: 1.2rem;
}

.msgBoxAlert .msgbox_message {
    display: block;
    font-size: 0.935rem;
    color: #e0e4e9;
    margin-top: 0.35294rem;
}

.msgBoxAlert .msgbox_alert_icon {
    height: 55px;
    width: 55px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('alert-icon-v0.0.1.svg');
    margin: 0 auto;
}
.msgbox-alert-close-icon{float:right;height:2.55882rem;width:2.55882rem;}
.msgBoxAlert .msgbox_alert_close {
    width:1.75882rem;
  	height:1.75882rem;
  	position:absolute;
  	right:0px;
  	transition: background 0.3s;
  	-moz-transition: 0.3s;
  	-webkit-transition: 0.3s;
  	-o-transition: 0.3s;
}
.msgBoxAlert .msgbox_alert_close label{cursor: pointer;}
.msgBoxAlert .msgbox_alert_close:hover { background: rgba(178, 178, 178, 0.3);}

.msgBoxAlert .msgbox_alert_close_icon {
    display: block;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('close-alert-v0.0.1.svg');
    background-size: 0.8rem auto;
    transition: background-image 0.3s ease;
}
.msgBoxAlert .msgbox_alert_close_icon:hover {background-image:url('close-alert-red.svg')}
/* ========== END msgBoxAlert =========== */