/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

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

body,
html {
    height: 100%;
    font-family: 'Lato' !important;
}

/*---------------------------------------------*/
a {
    font-family: 'Lato' !important;
    font-size: 14px;
    line-height: 1.7;
    color: #000;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
    color: #57b846;
}

/*---------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

p {
    font-family: 'Lato' !important;
    font-size: 14px;
    line-height: 1.7;
    color: #000;
    margin: 0px;
}

ul,
li {
    margin: 0px;
    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: #999999;
}
input:-moz-placeholder {
    color: #999999;
}
input::-moz-placeholder {
    color: #999999;
}
input:-ms-input-placeholder {
    color: #999999;
}

textarea::-webkit-input-placeholder {
    color: #999999;
}
textarea:-moz-placeholder {
    color: #999999;
}
textarea::-moz-placeholder {
    color: #999999;
}
textarea:-ms-input-placeholder {
    color: #999999;
}

/*---------------------------------------------*/
button {
    outline: none !important;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

iframe {
    border: none !important;
}

/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
    font-family: 'Lato' !important;
    font-size: 13px;
    line-height: 1.5;
    color: #999999;
}

.txt2 {
    font-family: 'Lato' !important;
    font-size: 13px;
    line-height: 1.5;
    color: #000;
}

/*//////////////////////////////////////////////////////////////////
[ login ]*/

.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;
    background: #6665FF;
    /*background: -webkit-linear-gradient(-135deg, #e24838, #ffffff);
    background: -o-linear-gradient(-135deg, #e24838, #ffffff);
    background: -moz-linear-gradient(-135deg, #e24838, #ffffff);
    background: linear-gradient(-135deg, #e24838, #ffffff);*/
}

.wrap-login100 {
    width: 1080px;
    background: #fff0;
    border-radius: 10px;
    overflow: hidden;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2% 0px;
}

/*------------------------------------------------------------------
[  ]*/
.form-column{padding: 10% 0px 0px 6%;}
.login100-pic {
    width: 40%;
    float: left;
    background-color: #FFF;
    min-height: 355px;
    border-radius: 20px 0px 0px 20px;
    padding: 10% 15px 0px 20px;
    border-right: 5px solid #b9b9b9;
}
.app-image{text-align: center;
    padding: 15px 0px 0px;}
.app-image img{transition: all 0.30s linear;}
.app-image img:hover{transform: scale(1.1,1.1)!important;}

.login100-pic img {
    max-width: 100%;
}

/*------------------------------------------------------------------
[  ]*/
.register100-pic {
    
    background-color: #FFF;
    border-radius: 20px 20px 0px 0px;
    padding: 1% 15px 20px 20px;
    border-bottom: 5px solid #b9b9b9;
}
.register100-form {    
    background-color: #FFF;
    min-height: 355px;
    border-radius: 0px 0px 20px 20px;
    padding: 2% 8% 20px;
}
.register100-form .form-control{border: 1px solid rgb(102 101 255) !important;}
.login100-form {
   width: 55%;
    float: left;
    background-color: #FFF;
    min-height: 355px;
    border-radius: 0px 20px 20px 0px;
    padding: 8% 8% 0px;
}

.login100-form-title {
    font-family: 'Lato' !important;
    font-size: 23px;
    color: #333333;
    line-height: 1.2;
    text-align: center;
	font-weight:bold;
    width: 100%;
    display: block;
    padding-bottom: 30px;
}

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

.input100 {
    font-family: 'Lato' !important;
    font-size: 15px;
    line-height: 1.5;
    color: #000;
	
    display: block;
    width: 100%;
    background: #e6e6e6;
    height: 45px;
    border-radius: 25px;
    padding: 0 30px 0 60px;
}

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

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

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

@keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 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: #000;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

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

/*------------------------------------------------------------------
[ Button ]*/
.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-size: 15px;
    line-height: 1.5;
    color: rgb(255, 255, 255);
    text-transform: capitalize;
    cursor: pointer;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Lato !important;
    border-radius: 25px;
    background: rgb(227, 77, 61);
    padding: 0px 25px;
    transition: all 0.4s ease 0s;
}

.reseller-registration-page .login100-form-btn {
   font-family: 'Lato' !important;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    width: auto;
    border-radius: 0;
    background: #6665FF;
    padding: 10px 25px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    margin: 20px 0px 0px;
height: auto;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
a, img{-webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;}

.login100-form-btn:hover {
    background: #333333;
}
/**/
.reseller-registration-page {background-color:#6665FF;padding: 55px 20px;position:relative;height:100%;}
.reseller-registration-page h1, .reseller-registration-page h2{font-size:25px;margin: 10px 0px 0px;padding: 0px}
.reseller-registration-page .container{background-color: #FFF;border-radius: 20px;max-width: 1150px;}
.reseller-registration-page .fixed-sidebar{background-image: url(../images/side-img.png);min-height: 570px;width: 28%;max-width: initial;flex: initial;background-repeat: no-repeat;background-size: cover;background-position: right;border-top-left-radius: 20px;border-bottom-left-radius: 20px;text-align:center;padding:20px 0px 0px;}
.reseller-registration-page .main-content{width:72%;max-width: initial;flex: initial;padding:45px 20px;height:570px;overflow:auto;}
.reseller-registration-page .form-control{background-color:#F8F8F8;border:1px solid #E8E8E8;color: #000;font-size: 16px;padding: 10px 20px;outline: #e8e8e8;border-radius: 0;}
.reseller-registration-page ::-webkit-input-placeholder {color:#A1A1A1;}
.reseller-registration-page .form-control:focus{border-color:#E8E8E8 !important;}
.reseller-registration-page .form-control label{float: left;color: #a1a1a1;}
.sidebar-applogo a{padding:0px 15px 0px;}
.sidebar-applogo a:hover img{transform:scale(1.1);}
.reseller-registration-page p{font-size:16px;}
.reseller-registration-page .main-content .col-md-4{padding:0px 5px;}

/* width */
.reseller-registration-page .main-content ::-webkit-scrollbar {
  width: 18px;
}

/* Track */
.reseller-registration-page .main-content ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 0px;border:1px solid #808080;
}
 
/* Handle */
.reseller-registration-page .main-content ::-webkit-scrollbar-thumb {
  background: #C1C1C1; border:1px solid #808080;
  border-radius: 0px;
}

/* Handle on hover */
.reseller-registration-page .main-content ::-webkit-scrollbar-thumb:hover {
  background: #B60808; 
}
/**/

/*------------------------------------------------------------------
[ Responsive ]*/

@media (max-width: 992px) {
	
	.form-column{padding: 0px;
    width: 100%;
    max-width: inherit;
    flex: initial;}
	.login100-form{}
	
    .wrap-login100 {
        padding: 0px;
    }

    .login100-pic {
        width: 40%;
    }

    .login100-form {
        width: 60%;
    }
}

@media (max-width: 768px) {
    .wrap-login100 {
        padding:0px;
    }
.reseller-registration-page .fixed-sidebar img{width:100%;}
    .reseller-registration-page .fixed-sidebar .sidebar-applogo img{width:auto;}

    
}

@media (max-width: 576px) {
    .wrap-login100 {
        padding: 0px;
    }
	.login100-pic, .login100-form{width:100%;min-height: auto;padding:20px;text-align: center;}
	.login100-pic{border-radius:20px 20px 0px 0px;border-bottom:5px solid #b9b9b9;border-right:none;}
	.login100-form{border-radius:0px 0px 20px 20px;}
	.reseller-registration-page .fixed-sidebar, .reseller-registration-page .main-content{width:100%;min-height: auto;padding: 20px;}
	.reseller-registration-page .fixed-sidebar img{width:auto;}
	.reseller-registration-page{height:auto;}
}

/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: white;
    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: 'Lato' !important;
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;

    visibility: hidden;
    opacity: 0;

    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f06a";
    font-family: FontAwesome;
    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;
    }
}