html {background-image: linear-gradient(70deg, #FF8955, #FF386B);}
body{font-weight: normal;line-height: 1.5;background: transparent;height: 100vh;}
.m-0{margin: 0px;}
.mt-0{margin-top: 0px;}
.mt-15{margin-top: 15px;}
.mt-20{margin-top: 20px;}
.mt-30{margin-top: 30px;}
.mt-40{margin-top: 40px;}
.mb-0 {margin-bottom: 0;}
.mb-10{margin-bottom: 10px;}
.mb-30{margin-bottom: 30px;}
.m-b-23 {margin-bottom: 23px;}
.mr_-9{margin-right: -9px;}
.padd-20 {padding: 20px;}
.p-10{padding: 10px;}
.pt-10{padding-top: 10px;}
.pt-20{padding-top: 20px;}
.pt-25{padding-top: 25px;}
.pt-30{padding-top: 30px;}
.pt-60{padding-top: 60px;}
.pt-70{padding-top: 70px;}
.pb-10{padding-bottom: 10px;}
.pb-20{padding-bottom: 20px;}
.pb-30{padding-bottom: 30px}
.pl-0{padding-left: 0px;}
.pl-5{padding-left: 5px;}
.pl-10{padding-left: 10px}
.pl-15{padding-left: 15px}
.pl-20{padding-left: 20px}
.pr-0 {padding-right: 0 ;}
.pr-5 {padding-right: 5px ;}
.pr-30 {padding-right: 30px ;}
.plr-0{padding-left: 0px;padding-right: 0px;}
.plr-5{padding-left: 5px;padding-right: 5px;}
.plr-20{padding-left: 20px;padding-right:20px}
.ptb-10{padding-top: 10px;padding-bottom: 10px}
.ptb-40{padding-top: 40px;padding-bottom: 30px} 
.pbt-25{padding-top: 20px;padding-bottom: 5px;}
.height80{height: 80px !important}
.font14{font-size: 14px;}
.font16{font-size: 16px;}
.font18{font-size: 18px;}
.font20{font-size: 20px}
.font24{font-size: 24px;}
.fontb{font-weight: bold}
.w-20{width: 20%}
.w-40{width: 40%}
.w-50{width: 50%}
.w-55{width: 55%}
.w-57{width: 57.6%}
.w-58{width: 58%}
.w-70{width: 70%}
.w-185p{width: 185px}

/*-------------Footer----------------------------*/
footer{padding-top: 70px;}
.height48{height: 48px;}
footer ul {margin: 0;padding: 0 0 20px;list-style: none;}
.second_footer{padding: 30px 0px 0px 0px;}
.footer_ul ul{text-align: right;}
.footer_ul ul li{display: inline-block;margin: 0 5px 10px;}
.footer_color{font-size: 14px;}
#social_footer{padding-top: 10px;}
#social_footer ul {margin: 0;padding: 0 0 10px;}
#social_footer ul li {display: inline-block;margin: 0 5px 10px;}
#social_footer ul li a { line-height: 36px;display: block;font-size: 16px;width: 35px;height: 35px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;text-align: center;}
.footer_headtext{font-size: 14px;letter-spacing: 1.5px;margin-top: 10px;}
.sublink li a{font-family: Helvetica;font-size: 12px;letter-spacing: 0.8px;}
.sublink li{padding: 5px 0px 0px 0px;}


/*------------Login ----------------*/
.login_height{
    webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px !important;
    margin: 0 auto;
    width: 90%;
    max-width: 480px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    /*text-align: center;*/
}
.loginlogos{
    text-align: center;
    padding: 10px 0 30px 0;
}
.btn-themecolor{
    background-image: linear-gradient(74deg, #FF8955, #FF386B);
    color: #ffffff;
    text-shadow: none;
    transition: color 500ms cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 150ms;
    border-radius: 40px;
    padding: 8px 40px;
    font-size: 20px;
    text-align: center;
    margin: 0px auto;
    border: 0px;
    display: block;
}
.btn-themecolor:hover{
    color: #fff;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none;
}
*:focus {
    outline: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s !important;
}
/*-------------------Custom Check box------------------------*/
.checkcontainer {display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 14px;font-weight: normal;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}

/* Hide the browser's default checkbox */
.checkcontainer input {position: absolute;opacity: 0;}

/* Create a custom checkbox */
.checkcontainer .checkmark {position: absolute;top: -2px;left: 0;height: 25px;width: 25px;background-color: #fff;border: 2px solid #ff5714;}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {background-image: linear-gradient(73deg, #FF8955, #FF386B);border: 2px solid #ff5714;}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {background-image: linear-gradient(73deg, #FF8955, #FF386B);border: 2px solid #ff5714;}

/* Create the checkmark/indicator (hidden when not checked) */
.checkcontainer .checkmark:after {content: "";position: absolute;display: none;}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {display: block;}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {left: 9px;top: 5px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
/*custom radio buttons*/
.radiocontainer {display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 14px;font-weight:normal;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

/* Hide the browser's default radio button */
.radiocontainer input {position: absolute;opacity: 0;}

/* Create a custom radio button */
.radiocontainer .checkmark {position: absolute;top: -3px;left: 0;height: 28px;width: 28px;background-color: #a1efca;border-radius: 50%;border:2px solid #4fa9cc}

/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .checkmark {background-color: #a1efca;border:2px solid #4fa9cc}

/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .checkmark {background-color: #a1efca;border:2px solid #4fa9cc}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiocontainer .checkmark:after {content: "";position: absolute;display: none;}

/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .checkmark:after {display: block;}

/* Style the indicator (dot/circle) */
.radiocontainer .checkmark:after {top: 5px;left: 5px;width: 14px;height: 14px;border-radius: 50%;background: white;}
.form-groupcustom .radiocontainer{float:left;padding-right:20px}

/*--------------------------------Start Material Style---------------*/
.materialstyle input[type="text"],.materialstyle input[type="mobile"],.materialstyle input[type="number"],.materialstyle input[type="email"],.materialstyle input[type="password"]{
    background-color:transparent;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:2px solid #E1E1E1;
    width:100%;
    color:#8C8C8C;
    outline: 0;
    box-shadow: inset 0 0px 0px rgba(0,0,0,.075), 0 0 0px rgba(152,203,232,.6);
    z-index:1;
    position:relative
}

.materialstyle input[type="text"]:focus, .materialstyle input[type="mobile"]:focus,.materialstyle input[type="number"]:focus, .materialstyle input[type="email"]:focus, .materialstyle input[type="password"]:focus{
    outline:none;
    color:#F33C3A;
    border-bottom:2px solid #FF8656;
    -webkit-transition:border-bottom .5s;
    -moz-transition:border-bottom .5s;
    -ms-transition:border-bottom .5s;
    -o-transition:border-bottom .5s;
    transition:border-bottom .5s;
    outline: 0;
    box-shadow: inset 0 0px 0px rgba(0,0,0,.075), 0 0 0px rgba(152,203,232,.6);
    z-index:1;
    position:relative;
}
.materialstyle input[type=number]::-webkit-inner-spin-button,
.materialstyle input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.materialstyle .control-label{position:absolute;transition: all .2s;z-index:0}
.materialactive{transform:translateY(-140%);font-size:14px;z-index:0;margin-top:20px}
.materialstyle .form-control {height: 48px;font-size: 15px;font-family: arial;border-radius: 0;}
.form-horizontal .form-group {margin:0 0 15px 0 !important;}
.form-horizontalcustom .form-group {margin:0 0 0px 0 !important;}
.control-label b, .control_required b {font-weight: normal;font-size: 16px;color: #ff0016;}
.control-label {font-weight: normal;margin-bottom: 2px;}
.control-label .fa-mobile {font-size: 22px;}
.control-label i {font-size: 20px;vertical-align: middle;color: #808080}
.error {color: red;font-size: 13px}
.error-keyup-3{font-weight: 500}
.btn-colored{padding: 6px 40px 10px 40px;font-size: 20px;text-align: center;margin: 0px auto;border: 0px;display: block;}
label.error, span.error{margin-bottom:0!important;line-height:14px;font-weight:500;display:block;padding-top:3px}

/*----------------------END Material Style---------------------*/

.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: 11px;
    position: relative;
    z-index: 2;
}
.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}
/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

@media (min-width: 768px){
    .form-horizontal .control-label {
        text-align: right;
        margin-bottom: 0;
        padding-top: 7px;
    }
}