@extends('web.layout.master')
@section('title', 'Welcome! | House Runs For Me')
@section('home-active', 'active')
@section('content')
    <style type="text/css">
    .banr-head .login-sec {
    background: rgba(0,0,0,0.8);
    border-radius: 0 0 6px 6px;
    width: 100%;
    margin-top: -50px;
    min-height: 45rem;
}
a {
    color: black;
    transition: all 0.3s;
    text-decoration: none;
    font-weight: bold;
}
    .owl-carousel.owl-drag .owl-item {
    width: 300px !important;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
    height: 200px;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: 0.75rem;
    margin-bottom: -10px;
}
.check-label {
    margin-bottom: 0;
    font-size: 8px;
    color: #fff;
    margin-left: 2px;
    line-height: 15px;
    margin-bottom: 15px;
}
        .circleDivide {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            height: 18px;
            background: #6d0000b8;
            border-radius: 50%;
            cursor: pointer;
            width: 19px;
        }
        .dots{
            position: initial;
            bottom: 0px;
            display: flex;
            justify-content: center;
            width: 100%
        }
 


        .text-danger-alert {
            color: rgb(94, 85, 85);
            padding: 0px;
            margin: 0px;
            margin-bottom: -40px !important;
        }

        .circleDivideFocus {
            background: #6d0000 !important;
        }

        .circleDivide i:hover {
            color: white;
        }

        .mycontainer {
            margin-top: 56px;
            margin-bottom: 21px;
        }

        .opaclight {
            opacity: .6;
        }

        .text-white {
            color: white !important;
        }

        .mh2 {
            font-size: 37px;
            padding-top: 60px;
        }

        .mh6 {
            font-size: 14px;
            padding: 40px 58px;
            font-weight: 600 !important;
        }

        .banr-head .login-sec .uou-tabs .tabs li a {
            border: none;
            padding: 18px 4px 15px 4px;
            background: #6d0000;
            color: #fff;
            font-size: 13px;
            font-weight: bold;
        }

        .mt-6PX {
            margin-top: 6rem !important;
        }

        .banr-head {
            /* background-image: url({{ asset('assets/web/images/banner3.jpg') }}); */
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 54.5rem;
            width: 100%;
            padding: 10px;
            /* min-height: 60rem; */
            
        }
        @media only screen and (max-width: 992px) {
          .banr-head .login-sec input {
    background: #fff;
    border-radius: 30px;
    border: none;
    height: 39px;
    font-size: 14px;
    padding: 0 30px;
    margin-bottom: 15px !important;
    margin-top: 21px;
    margin-left: -8px;
}
.banr-head .login-sec button:hover {
    background: #6d0000b8;
    margin-top: -5px !important;
}
          input#blankRadio1 {
    margin-left: -200px;
}
            
            .owl-carousel.owl-drag .owl-item {
    width: 400px !important;
}
            .banr-head .login-sec button {
    border: none;
    background: #6d0000;
    border-radius: 30px;
    padding: 8px 30px;
    color: #fff;
    float: left;
    font-size: 14px;
    transition: all 0.3s;
    margin-top: 22px !important;
}
            input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    display: block;
    width: 100%;
    height: 31px;
    padding: 6px 12px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 24px;
    color: #333333;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cecece;
    transition: all 0.3s;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
            .banr-head {
            /* background-image: url({{ asset('assets/web/images/banner.png') }}); */
            /* background-size: 100% 100%; */
            background-repeat: no-repeat;
            height: 54.5rem;
            width: 100%;
            padding: 10px;
            /* min-height: 60rem; */
            background-size:cover;
            }
            .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    /* width: 68% !important; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


            .uou-block-2b {
    position: relative;
    display: block;
    background: #fff;
    padding: 10px 0;
    margin-top: 0px !important;
    font-family: 'Montserrat', sans-serif;
    /* padding-bottom: 2.4rem; */
}
    .dots {
    position: initial;
    bottom: 3px;
    -271px: ;
    display: flex;
    justify-content: center;
    width: 100%;
}
 
        div#owl-demo1 .item {
    padding: 0 15px;
    margin-right: 45px;
}

        .hide-this{
            display: none;
        }
        }

        .pro-inside h1 {
            font-size: 44px;
        }

        .ph6 {
            width: 102%;
            line-height: 23px;
        }

        .img-social {
            border-radius: 57px;
            height: 4rem;
            width: 5rem;
        }

        .owlcar {
            margin: 11px;
        }

        i.fa.fa-twitter.mt-5.fa-3x.text-pink {
            font-size: 46px;
        }

        .clients-says .section-title {
            text-transform: capitalize;
            font-size: 39px;
            margin-bottom: 40px;
            text-align: center;
            color: #6d0000;
        }

        .nav {
            position: relative;
            z-index: 99;
            margin: 20px 0px;
        }

        .uou-block-1a .authentication li a {
            display: block;
            font-size: 14px;
            line-height: 12px;
            color: white;
            font-weight: bold;
        }

        .uou-block-1a .language .toggle {
            display: block;
            font-size: 12px;
            color: white;
            line-height: 40px;
            height: 40px;
            margin-right: -17px !important;
        }

        .clients-says p {
            font-style: normal;
            font-size: 13px;
            color: #333333;
            margin-bottom: -7px;
            line-height: 28px;
        }

        2 .testdiv {
            margin-bottom: 18px;
        }

        .border-pink {
            border: solid #6d0000 2px;
            border-radius: 8px;
        }

        .text-pink {
            color: #6d0000;
        }

        .check-label {
            margin-bottom: 0;
            font-size: 8px;
            color: #fff;
            margin-left: 2px;
            line-height: 15px;
        }

        .banr-head .login-sec button {
            margin-left: -4px;
        }

        .banr-head .login-sec .login-with {
            float: right;
            margin-top: 5px;
            margin-right: 1px;
        }

        .banr-head .login-sec input {
            background: #fff;
            border-radius: 30px;
            border: none;
            height: 39px;
            font-size: 14px;
            padding: 0 30px;
            margin-bottom: 15px;
            margin-top: 21px;
            margin-left: -8px;
        }

        /*Today Changes CSS*/
        .banr-head .login-sec button {
            border: none;
            background: #6d0000;
            border-radius: 30px;
            padding: 8px 30px;
            color: #fff;
            float: left;
            font-size: 14px;
            transition: all 0.3s;
        }
		.abc {
    margin-left: 30%;
}

        .banr-head .login-sec .uou-tabs .tabs li.active .bg_cr,
        .banr-head .login-sec .uou-tabs .tabs li.active .bg_ur,
        .banr-head .login-sec .uou-tabs .tabs li.active .bg_lo {
            /*background: #e72428;*/
            color: #000;
        }

        .bg_lo {
            border-top-right-radius: 7px;
        }

        a#lc {
            margin-right: -1px;
        }

        .bg_cr {
            border-top-left-radius: 7px;
        }

        .banr-head .login-sec .login-with a {
            height: 34px;
            width: 34px;
            text-align: center;
            line-height: 34px;
            border-radius: 50%;
            display: inline-block;
            margin: -4px;
            font-size: 19px;
            color: #fff;
            background: transparent;
            transition: all 0.3s;
        }

        #login {
            background: #6d0000;
        }

        #login:hover {
            background: #6d0000b8;
        }

        .banr-head .login-sec .forget {
            border-top: 1px solid #fff;
            display: inline-block;
            width: 100%;
            padding-top: 20px;
            text-align: center;
            color: #191515;
            margin-top: 13px;
            font-size: 12px;
            font-weight: 600;
        }

        #clickbtn {
            color: #6d0000;
            font-size: 13px;
        }

        .social_icon {
            margin-top: 20px;
            color: #ffffff;
            font-size: 24px;
            width: 18px;
            margin: 8px;
        }

        .uou-block-1a {
            height: 85px !important;
        }

        .mt-55 {
            margin-top: 17px;
        }

        .mt-5PX {
            margin-top: 5px;
            padding-top: 24px !important;
        }

        .m-h4 {
            font-size: 26px;
        }

        .home-pro .services li .ser-inn h4 {
            font-weight: bold;
            color: #fff;
            font-size: 22px;
            margin: 0px;
            margin-bottom: 10px;
        }

        .app_img {
            position: absolute;
            right: -53%;
            top: -24px;
            width: 100%;
        }

        img#c-image {
            height: 23px;
            width: 15%;
            margin: 5px;
        }

        img#a-image {
            WIDTH: 32px !important;
        }

        .wc-3 {
            width: 50% !important;
        }

        .wu-3 {
            width: 50% !important;
        }

        .wl-3 {
            width: 50% !important;
        }
        /* .search1 {
    color: white;
    float:left !important;
    margin-top: 10px;
    font-size: 23px;
    
} */

        @media screen and (min-width:786px) {
            
          
            .nowrap-md {
                white-space: nowrap;
            }

            .testi {
                display: flex;
                justify-content: center;
            }

            .mt-md-inMinus {
                margin-top: -86px;
            }

            .pl-md-0 {
                padding-left: 0;
            }

            .p-md-0 {
                padding: 0 !important;
            }

            .pt-md-1 {
                padding-top: 38px !important;
            }

            .p-r-34 {
                padding-right: 34px !important;
            }

            .m-inM {
                margin-left: 18px !important;
            }

            .m-73 {
                margin-left: 73px !important;
            }

            .m-35 {
                margin-left: 35px !important;
            }

            .d-flex-align-items-center {
                display: flex !important;
                align-items: center !important;
            }

            .m-spons-1 {
                margin-left: 68px !important;
            }

            .m-spons-2 {
                margin-left: 78px !important;
            }

            .m-spons-3 {
                margin-left: 3rem !important;
            }
        }

        .mt-20 {
            margin-top: 20px !important;
            margin-top: 2px !important;
            margin-right: 4px !important;
        }

        .mt-2PX {
            margin-top: 2px !important;
        }

        .text-warning {
            color: #6d0000 !important;
        }

        .speacialBord {
            margin-top: 51px;
            border-top: white solid 1px;
        }

        .pb-0 {
            padding-bottom: 10px !important;
        }

        .pb-smooth {
            padding-bottom: 4.3rem !important;
            padding-top: 28px !important;
        }

        .bg-trans {
            BACKGROUND: TRANSPARENT !important;
        }

        .pt-34px {
            padding-top: 34px !important;
        }

        .mt-0 {
            margin-top: 0px;
        }

        .pt-0 {
            padding-top: 9px !important;
        }

        .d-flex-align-items-center {
            display: flex !important;
            align-items: center !important;
        }

        .m-spons-1 {
            margin-left: 68px !important;
        }

        .m-spons-2 {
            margin-left: 78px !important;
        }

        .m-spons-3 {
            margin-left: 3rem !important;
        }

        .bnr-head-img-1 {
            background-image: url({{ asset('assets/web/images/banner.png') }}) !important;
        }

        .bnr-head-img-2 {
            background-image: url({{ asset('assets/web/images/banner.png') }}) !important;
        }

        .bnr-head-img-3 {
            background-image: url({{ asset('assets/web/images/banner.png') }}) !important;
        }

        .setInside {
            margin-top: -2rem;
            DISPLAY: flex;
            color: #6d0000;
            align-content: center;
            align-items: center;
            justify-content: center;
            margin-top: -3rem;
            color: #6d0000;
        }

        .setInside div {
            margin-left: 20px;
        }

        .d-inline-block {
            display: inline-block;
            line-height: 1.3;
        }

        .fs-10 {
            margin-left: -49px;
        }

        .fs-11 {
            margin-left: 23px;
        }

        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        /* Next & previous buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Caption text */
        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background: #6d0000;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active_slide {
            background: #6d0000 !important;
        }

        /* Fading animation */
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        @keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }
    
        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 320px) {

            .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    width: 68% !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
            /* .form-check-input .input_height .position-static .abc{
                color: #000;
    font-weight: bold;
    font-size: 11px !important;
            }
            .form-check-input .input_height1 .position-static .abc1{
                color: #000;
    font-weight: bold;
    font-size: 11px !important;
            } */
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    /* margin-right: 8px; */
    width: 75% !important;
}

            .prev,
            .next,
            .text {
                font-size: 11px
            }
        }
        @media (min-width: 768px){
            
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right: 45px;
    width: 100%;
}
.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    width: 13% !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}







.owl-carousel.owl-drag .owl-item {
    /* width: 300px !important; */
}
            .owl-stage{
                transform: translate3d(-240px, 0px, 0px);
    transition: all 0s ease 0s;
    width: 200% !important;

            }
            .owl-item.active {
                width: 100%;
                min-width: 282px;
            }
            .abc{
            }
            .dots{
            position: initial;
    bottom: 0px;
    display: flex;
    justify-content: center;
    width: 100%;
}
 
        }
        @media (max-width: 767px){
            .tc{
                text-align: center;
            }
            .owl-item.active {
                width: 100%;
                min-width: 392px;
            }
        .uou-tabs .accordion-link.active {
            color: #fff;
            background: #6d0000 !important;
        } 
        img#a-image {
            display: none;
        }
        img#ua-image {
            display: none;
        }
}
.heading {
    text-align: center;
    color: #6d0000;
    font-size: 30px;
    font-weight: 700;
    position: relative;
    margin-bottom: 70px;
    text-transform: uppercase;
    z-index: 999;
}
.white-heading{
    color: #ffffff;
}
.heading:after {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 50%;
    height: 40px;
    width: 180px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: url("{{asset('assets/web/img/heading-line.png')}}");
    background-repeat: no-repeat;
    background-position: center;
}
.white-heading:after {
    background: url(img/heading-line-white.png);
    background-repeat: no-repeat;
    background-position: center;
}

.heading span {
    font-size: 18px;
    display: block;
    font-weight: 500;
}
.white-heading span {
    color: #ffffff;
}
/* clearfix */
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
/* display none until init */
.owl-carousel{
  display: none;
  position: relative;
  width: 100%;
  -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
  overflow: hidden;
  position: relative;
  width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item img{
    max-width: 100%;
    object-fit: contain;
}
.owl-carousel .item {
    padding: 0 7.5px;
}
.owl-carousel .owl-item{
  float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
  cursor: pointer;
}
.owl-controls {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

#demo1 .customNavigation, #demo2 .customNavigation {
    top: 50%;
    position: absolute;
    width: 100%;
    left: 0px;
    margin-top: -40px;
}
#demo1 .customNavigation .btn, #demo2 .customNavigation .btn {
    padding: 0px;
}
#demo1 .customNavigation .btn.prev, #demo2 .customNavigation .btn.prev {
    position: relative;
    left:-76px;
}
#demo1 .customNavigation .btn.next, #demo2 .customNavigation .btn.next {
    position: relative;
        right: -70px;
    float: right;
}
div#demo1 {
    position: relative;
}

.user-blog {
    background: #903f40;
    padding: 50px 0 50px;
}
.user-blog:before {
    position: absolute;
    top: -100px;
    left: 0;
    content: " ";
    background: url(img/user-blog.png);
    background-size: 100% 100px;
    width: 100%;
    height: 100px;
    float: left;
    z-index: 99;
}
div#owl-demo1 .item {
    padding: 0 15px;
}
.blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right:45px;
    width: 100% !important;
}

.discretion-blog {
    padding: 15px;
}

.discretion-blog p {
    font-size: 15px;
    color: #454343;
    min-height: 100px;
}

.discretion-blog h4 {
    color: #6d0000;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.discretion-blog .btn {
    color: #fefeff;
    background: #454343;
    width: 100%;
    text-transform: uppercase;
    border-radius: 0px;
    margin-top: 10px;
    -webkit-transform: perspective(1px) translateZ(0);
    -moz-transform: perspective(1px) translateZ(0);
    -o-transform: perspective(1px) translateZ(0);
    transform: perspective(122px) translateZ(0);
}


.discretion-blog .btn:hover {
    color: #ffffff;
}
.discretion-blog .btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #6d0000;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    border: 2px solid #6d0000;
}

.discretion-blog .btn:hover:before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
.date-blog {
    background: #6d0000;
    width: 70px;
    position: absolute;
    bottom: 0;
    left: 15px;
    color: #fff;
    text-align: center;
    padding: 10px 0px;
}
.date-blog:after {
    width: 0;
    height: 0;
    content: "";
    border-left: 0 solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 12px solid #6d0000;
    top: -11px;
    position: absolute;
    left: 0;
}
.img-date {
    position: relative;
}
.user-blog .owl-theme .owl-controls .owl-page span {
    width: 17px;
    height: 17px;
    background: #454343;
    opacity: 1;
}
.user-blog .owl-theme .owl-controls .owl-page.active span, .user-blog .owl-theme .owl-controls.clickable .owl-page:hover span {
    background: #82b53f;
}
.input_height{
    height: 13px !important;
}
.input_height1{
    height: 13px !important;
    margin-left: 10px !important;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 70%;
  left: 40%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.img-date:hover .image {
  opacity: 0.3;
}
.img-date:hover .middle{
  opacity: 1;
}
.text {
  background-color: #6d0000;
  color: white;
  font-size: 26px;
  padding: 16px 38px 16px 16px;
  border-radius: 100px;
}


/* .owl-item{
    width:6%;
}
div#owl-demo1 .item {
    padding: 0 15px;
    width: 50%;
} */
@media  (min-width:375px){
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right: 45px;
    width: 90% !important;
}
}
@media  (min-width:414px){
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right: 45px;
    width: 96% !important;
}
}

@media (min-width:280px){

    .banr-head .login-sec .uou-tabs form {
    padding: 0px 0px 20px 30px;
}

}


/* phone  */

.intl-tel-input {
  position: relative;
  display: block;
}

.intl-tel-input * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.intl-tel-input .hide {
  display: none;
}

.intl-tel-input .v-hide {
  visibility: hidden;
}

.intl-tel-input input,
.intl-tel-input input[type=text],
.intl-tel-input input[type=tel] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-right: 36px;
  margin-right: 0;
}

.intl-tel-input .flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1px;
}

.intl-tel-input .selected-flag {
  z-index: 1;
  position: relative;
  width: 36px;
  height: 100%;
  padding: 0 0 0 8px;
}

.intl-tel-input .selected-flag .iti-flag {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.intl-tel-input .selected-flag .iti-arrow {
  position: absolute;
  top: 50%;
  margin-top: -2px;
  right: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555;
}

.intl-tel-input .selected-flag .iti-arrow.up {
  border-top: none;
  border-bottom: 4px solid #555;
}

.intl-tel-input .country-list {
  position: absolute;
  z-index: 2;
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 0 -1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #CCC;
  white-space: nowrap;
  max-height: 200px;
  overflow-y: scroll;
}

.intl-tel-input .country-list.dropup {
  bottom: 100%;
  margin-bottom: -1px;
}

.intl-tel-input .country-list .flag-box {
  display: inline-block;
  width: 20px;
}

@media (max-width: 500px) {
  .intl-tel-input .country-list {
    white-space: normal;
  }
}

.intl-tel-input .country-list .divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #CCC;
}

.intl-tel-input .country-list .country {
  padding: 5px 10px;
}

.intl-tel-input .country-list .country .dial-code {
  color: #999;
}

.intl-tel-input .country-list .country.highlight {
  background-color: rgba(0, 0, 0, 0.05);
}

.intl-tel-input .country-list .flag-box,
.intl-tel-input .country-list .country-name,
.intl-tel-input .country-list .dial-code {
  vertical-align: middle;
}

.intl-tel-input .country-list .flag-box,
.intl-tel-input .country-list .country-name {
  margin-right: 6px;
}

.intl-tel-input.allow-dropdown input,
.intl-tel-input.allow-dropdown input[type=text],
.intl-tel-input.allow-dropdown input[type=tel],
.intl-tel-input.separate-dial-code input,
.intl-tel-input.separate-dial-code input[type=text],
.intl-tel-input.separate-dial-code input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}

.intl-tel-input.allow-dropdown .flag-container,
.intl-tel-input.separate-dial-code .flag-container {
  right: auto;
  left: 0;
}

.intl-tel-input.allow-dropdown .selected-flag,
.intl-tel-input.separate-dial-code .selected-flag {
  width: 46px;
}

.intl-tel-input.allow-dropdown .flag-container:hover {
  cursor: pointer;
}

.intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}

.intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover,
.intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover {
  cursor: default;
}

.intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover .selected-flag,
.intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover .selected-flag {
  background-color: transparent;
}

.intl-tel-input.separate-dial-code .selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
  display: table;
}

.intl-tel-input.separate-dial-code .selected-dial-code {
  display: table-cell;
  vertical-align: middle;
  padding-left: 28px;
}

.intl-tel-input.separate-dial-code.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel] {
  padding-left: 66px;
}

.intl-tel-input.separate-dial-code.iti-sdc-2 .selected-flag {
  width: 60px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel] {
  padding-left: 76px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
  width: 70px;
}

.intl-tel-input.separate-dial-code.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel] {
  padding-left: 74px;
}

.intl-tel-input.separate-dial-code.iti-sdc-3 .selected-flag {
  width: 68px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel] {
  padding-left: 84px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
  width: 78px;
}

.intl-tel-input.separate-dial-code.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel] {
  padding-left: 82px;
}

.intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag {
  width: 76px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] {
  padding-left: 92px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
  width: 86px;
}

.intl-tel-input.separate-dial-code.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel] {
  padding-left: 90px;
}

.intl-tel-input.separate-dial-code.iti-sdc-5 .selected-flag {
  width: 84px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel] {
  padding-left: 100px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag {
  width: 94px;
}

.intl-tel-input.iti-container {
  position: absolute;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: 1px;
}

.intl-tel-input.iti-container:hover {
  cursor: pointer;
}

.iti-mobile .intl-tel-input.iti-container {
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 30px;
  position: fixed;
}

.iti-mobile .intl-tel-input .country-list {
  max-height: 100%;
  width: 100%;
}

.iti-mobile .intl-tel-input .country-list .country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.iti-flag {
  width: 20px;
}

.iti-flag.be {
  width: 18px;
}

.iti-flag.ch {
  width: 15px;
}

.iti-flag.mc {
  width: 19px;
}

.iti-flag.ne {
  width: 18px;
}

.iti-flag.np {
  width: 13px;
}

.iti-flag.va {
  width: 15px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  .iti-flag {
    background-size: 5630px 15px;
  }
}

.iti-flag.ac {
  height: 10px;
  background-position: 0px 0px;
}

.iti-flag.ad {
  height: 14px;
  background-position: -22px 0px;
}

.iti-flag.ae {
  height: 10px;
  background-position: -44px 0px;
}

.iti-flag.af {
  height: 14px;
  background-position: -66px 0px;
}

.iti-flag.ag {
  height: 14px;
  background-position: -88px 0px;
}

.iti-flag.ai {
  height: 10px;
  background-position: -110px 0px;
}

.iti-flag.al {
  height: 15px;
  background-position: -132px 0px;
}

.iti-flag.am {
  height: 10px;
  background-position: -154px 0px;
}

.iti-flag.ao {
  height: 14px;
  background-position: -176px 0px;
}

.iti-flag.aq {
  height: 14px;
  background-position: -198px 0px;
}

.iti-flag.ar {
  height: 13px;
  background-position: -220px 0px;
}

.iti-flag.as {
  height: 10px;
  background-position: -242px 0px;
}

.iti-flag.at {
  height: 14px;
  background-position: -264px 0px;
}

.iti-flag.au {
  height: 10px;
  background-position: -286px 0px;
}

.iti-flag.aw {
  height: 14px;
  background-position: -308px 0px;
}

.iti-flag.ax {
  height: 13px;
  background-position: -330px 0px;
}

.iti-flag.az {
  height: 10px;
  background-position: -352px 0px;
}

.iti-flag.ba {
  height: 10px;
  background-position: -374px 0px;
}

.iti-flag.bb {
  height: 14px;
  background-position: -396px 0px;
}

.iti-flag.bd {
  height: 12px;
  background-position: -418px 0px;
}

.iti-flag.be {
  height: 15px;
  background-position: -440px 0px;
}

.iti-flag.bf {
  height: 14px;
  background-position: -460px 0px;
}

.iti-flag.bg {
  height: 12px;
  background-position: -482px 0px;
}

.iti-flag.bh {
  height: 12px;
  background-position: -504px 0px;
}

.iti-flag.bi {
  height: 12px;
  background-position: -526px 0px;
}

.iti-flag.bj {
  height: 14px;
  background-position: -548px 0px;
}

.iti-flag.bl {
  height: 14px;
  background-position: -570px 0px;
}

.iti-flag.bm {
  height: 10px;
  background-position: -592px 0px;
}

.iti-flag.bn {
  height: 10px;
  background-position: -614px 0px;
}

.iti-flag.bo {
  height: 14px;
  background-position: -636px 0px;
}

.iti-flag.bq {
  height: 14px;
  background-position: -658px 0px;
}

.iti-flag.br {
  height: 14px;
  background-position: -680px 0px;
}

.iti-flag.bs {
  height: 10px;
  background-position: -702px 0px;
}

.iti-flag.bt {
  height: 14px;
  background-position: -724px 0px;
}

.iti-flag.bv {
  height: 15px;
  background-position: -746px 0px;
}

.iti-flag.bw {
  height: 14px;
  background-position: -768px 0px;
}

.iti-flag.by {
  height: 10px;
  background-position: -790px 0px;
}

.iti-flag.bz {
  height: 14px;
  background-position: -812px 0px;
}

.iti-flag.ca {
  height: 10px;
  background-position: -834px 0px;
}

.iti-flag.cc {
  height: 10px;
  background-position: -856px 0px;
}

.iti-flag.cd {
  height: 15px;
  background-position: -878px 0px;
}

.iti-flag.cf {
  height: 14px;
  background-position: -900px 0px;
}

.iti-flag.cg {
  height: 14px;
  background-position: -922px 0px;
}

.iti-flag.ch {
  height: 15px;
  background-position: -944px 0px;
}

.iti-flag.ci {
  height: 14px;
  background-position: -961px 0px;
}

.iti-flag.ck {
  height: 10px;
  background-position: -983px 0px;
}

.iti-flag.cl {
  height: 14px;
  background-position: -1005px 0px;
}

.iti-flag.cm {
  height: 14px;
  background-position: -1027px 0px;
}

.iti-flag.cn {
  height: 14px;
  background-position: -1049px 0px;
}

.iti-flag.co {
  height: 14px;
  background-position: -1071px 0px;
}

.iti-flag.cp {
  height: 14px;
  background-position: -1093px 0px;
}

.iti-flag.cr {
  height: 12px;
  background-position: -1115px 0px;
}

.iti-flag.cu {
  height: 10px;
  background-position: -1137px 0px;
}

.iti-flag.cv {
  height: 12px;
  background-position: -1159px 0px;
}

.iti-flag.cw {
  height: 14px;
  background-position: -1181px 0px;
}

.iti-flag.cx {
  height: 10px;
  background-position: -1203px 0px;
}

.iti-flag.cy {
  height: 13px;
  background-position: -1225px 0px;
}

.iti-flag.cz {
  height: 14px;
  background-position: -1247px 0px;
}

.iti-flag.de {
  height: 12px;
  background-position: -1269px 0px;
}

.iti-flag.dg {
  height: 10px;
  background-position: -1291px 0px;
}

.iti-flag.dj {
  height: 14px;
  background-position: -1313px 0px;
}

.iti-flag.dk {
  height: 15px;
  background-position: -1335px 0px;
}

.iti-flag.dm {
  height: 10px;
  background-position: -1357px 0px;
}

.iti-flag.do {
  height: 13px;
  background-position: -1379px 0px;
}

.iti-flag.dz {
  height: 14px;
  background-position: -1401px 0px;
}

.iti-flag.ea {
  height: 14px;
  background-position: -1423px 0px;
}

.iti-flag.ec {
  height: 14px;
  background-position: -1445px 0px;
}

.iti-flag.ee {
  height: 13px;
  background-position: -1467px 0px;
}

.iti-flag.eg {
  height: 14px;
  background-position: -1489px 0px;
}

.iti-flag.eh {
  height: 10px;
  background-position: -1511px 0px;
}

.iti-flag.er {
  height: 10px;
  background-position: -1533px 0px;
}

.iti-flag.es {
  height: 14px;
  background-position: -1555px 0px;
}

.iti-flag.et {
  height: 10px;
  background-position: -1577px 0px;
}

.iti-flag.eu {
  height: 14px;
  background-position: -1599px 0px;
}

.iti-flag.fi {
  height: 12px;
  background-position: -1621px 0px;
}

.iti-flag.fj {
  height: 10px;
  background-position: -1643px 0px;
}

.iti-flag.fk {
  height: 10px;
  background-position: -1665px 0px;
}

.iti-flag.fm {
  height: 11px;
  background-position: -1687px 0px;
}

.iti-flag.fo {
  height: 15px;
  background-position: -1709px 0px;
}

.iti-flag.fr {
  height: 14px;
  background-position: -1731px 0px;
}

.iti-flag.ga {
  height: 15px;
  background-position: -1753px 0px;
}

.iti-flag.gb {
  height: 10px;
  background-position: -1775px 0px;
}

.iti-flag.gd {
  height: 12px;
  background-position: -1797px 0px;
}

.iti-flag.ge {
  height: 14px;
  background-position: -1819px 0px;
}

.iti-flag.gf {
  height: 14px;
  background-position: -1841px 0px;
}

.iti-flag.gg {
  height: 14px;
  background-position: -1863px 0px;
}

.iti-flag.gh {
  height: 14px;
  background-position: -1885px 0px;
}

.iti-flag.gi {
  height: 10px;
  background-position: -1907px 0px;
}

.iti-flag.gl {
  height: 14px;
  background-position: -1929px 0px;
}

.iti-flag.gm {
  height: 14px;
  background-position: -1951px 0px;
}

.iti-flag.gn {
  height: 14px;
  background-position: -1973px 0px;
}

.iti-flag.gp {
  height: 14px;
  background-position: -1995px 0px;
}

.iti-flag.gq {
  height: 14px;
  background-position: -2017px 0px;
}

.iti-flag.gr {
  height: 14px;
  background-position: -2039px 0px;
}

.iti-flag.gs {
  height: 10px;
  background-position: -2061px 0px;
}

.iti-flag.gt {
  height: 13px;
  background-position: -2083px 0px;
}

.iti-flag.gu {
  height: 11px;
  background-position: -2105px 0px;
}

.iti-flag.gw {
  height: 10px;
  background-position: -2127px 0px;
}

.iti-flag.gy {
  height: 12px;
  background-position: -2149px 0px;
}

.iti-flag.hk {
  height: 14px;
  background-position: -2171px 0px;
}

.iti-flag.hm {
  height: 10px;
  background-position: -2193px 0px;
}

.iti-flag.hn {
  height: 10px;
  background-position: -2215px 0px;
}

.iti-flag.hr {
  height: 10px;
  background-position: -2237px 0px;
}

.iti-flag.ht {
  height: 12px;
  background-position: -2259px 0px;
}

.iti-flag.hu {
  height: 10px;
  background-position: -2281px 0px;
}

.iti-flag.ic {
  height: 14px;
  background-position: -2303px 0px;
}

.iti-flag.id {
  height: 14px;
  background-position: -2325px 0px;
}

.iti-flag.ie {
  height: 10px;
  background-position: -2347px 0px;
}

.iti-flag.il {
  height: 15px;
  background-position: -2369px 0px;
}

.iti-flag.im {
  height: 10px;
  background-position: -2391px 0px;
}

.iti-flag.in {
  height: 14px;
  background-position: -2413px 0px;
}

.iti-flag.io {
  height: 10px;
  background-position: -2435px 0px;
}

.iti-flag.iq {
  height: 14px;
  background-position: -2457px 0px;
}

.iti-flag.ir {
  height: 12px;
  background-position: -2479px 0px;
}

.iti-flag.is {
  height: 15px;
  background-position: -2501px 0px;
}

.iti-flag.it {
  height: 14px;
  background-position: -2523px 0px;
}

.iti-flag.je {
  height: 12px;
  background-position: -2545px 0px;
}

.iti-flag.jm {
  height: 10px;
  background-position: -2567px 0px;
}

.iti-flag.jo {
  height: 10px;
  background-position: -2589px 0px;
}

.iti-flag.jp {
  height: 14px;
  background-position: -2611px 0px;
}

.iti-flag.ke {
  height: 14px;
  background-position: -2633px 0px;
}

.iti-flag.kg {
  height: 12px;
  background-position: -2655px 0px;
}

.iti-flag.kh {
  height: 13px;
  background-position: -2677px 0px;
}

.iti-flag.ki {
  height: 10px;
  background-position: -2699px 0px;
}

.iti-flag.km {
  height: 12px;
  background-position: -2721px 0px;
}

.iti-flag.kn {
  height: 14px;
  background-position: -2743px 0px;
}

.iti-flag.kp {
  height: 10px;
  background-position: -2765px 0px;
}

.iti-flag.kr {
  height: 14px;
  background-position: -2787px 0px;
}

.iti-flag.kw {
  height: 10px;
  background-position: -2809px 0px;
}

.iti-flag.ky {
  height: 10px;
  background-position: -2831px 0px;
}

.iti-flag.kz {
  height: 10px;
  background-position: -2853px 0px;
}

.iti-flag.la {
  height: 14px;
  background-position: -2875px 0px;
}

.iti-flag.lb {
  height: 14px;
  background-position: -2897px 0px;
}

.iti-flag.lc {
  height: 10px;
  background-position: -2919px 0px;
}

.iti-flag.li {
  height: 12px;
  background-position: -2941px 0px;
}

.iti-flag.lk {
  height: 10px;
  background-position: -2963px 0px;
}

.iti-flag.lr {
  height: 11px;
  background-position: -2985px 0px;
}

.iti-flag.ls {
  height: 14px;
  background-position: -3007px 0px;
}

.iti-flag.lt {
  height: 12px;
  background-position: -3029px 0px;
}

.iti-flag.lu {
  height: 12px;
  background-position: -3051px 0px;
}

.iti-flag.lv {
  height: 10px;
  background-position: -3073px 0px;
}

.iti-flag.ly {
  height: 10px;
  background-position: -3095px 0px;
}

.iti-flag.ma {
  height: 14px;
  background-position: -3117px 0px;
}

.iti-flag.mc {
  height: 15px;
  background-position: -3139px 0px;
}

.iti-flag.md {
  height: 10px;
  background-position: -3160px 0px;
}

.iti-flag.me {
  height: 10px;
  background-position: -3182px 0px;
}

.iti-flag.mf {
  height: 14px;
  background-position: -3204px 0px;
}

.iti-flag.mg {
  height: 14px;
  background-position: -3226px 0px;
}

.iti-flag.mh {
  height: 11px;
  background-position: -3248px 0px;
}

.iti-flag.mk {
  height: 10px;
  background-position: -3270px 0px;
}

.iti-flag.ml {
  height: 14px;
  background-position: -3292px 0px;
}

.iti-flag.mm {
  height: 14px;
  background-position: -3314px 0px;
}

.iti-flag.mn {
  height: 10px;
  background-position: -3336px 0px;
}

.iti-flag.mo {
  height: 14px;
  background-position: -3358px 0px;
}

.iti-flag.mp {
  height: 10px;
  background-position: -3380px 0px;
}

.iti-flag.mq {
  height: 14px;
  background-position: -3402px 0px;
}

.iti-flag.mr {
  height: 14px;
  background-position: -3424px 0px;
}

.iti-flag.ms {
  height: 10px;
  background-position: -3446px 0px;
}

.iti-flag.mt {
  height: 14px;
  background-position: -3468px 0px;
}

.iti-flag.mu {
  height: 14px;
  background-position: -3490px 0px;
}

.iti-flag.mv {
  height: 14px;
  background-position: -3512px 0px;
}

.iti-flag.mw {
  height: 14px;
  background-position: -3534px 0px;
}

.iti-flag.mx {
  height: 12px;
  background-position: -3556px 0px;
}

.iti-flag.my {
  height: 10px;
  background-position: -3578px 0px;
}

.iti-flag.mz {
  height: 14px;
  background-position: -3600px 0px;
}

.iti-flag.na {
  height: 14px;
  background-position: -3622px 0px;
}

.iti-flag.nc {
  height: 10px;
  background-position: -3644px 0px;
}

.iti-flag.ne {
  height: 15px;
  background-position: -3666px 0px;
}

.iti-flag.nf {
  height: 10px;
  background-position: -3686px 0px;
}

.iti-flag.ng {
  height: 10px;
  background-position: -3708px 0px;
}

.iti-flag.ni {
  height: 12px;
  background-position: -3730px 0px;
}

.iti-flag.nl {
  height: 14px;
  background-position: -3752px 0px;
}

.iti-flag.no {
  height: 15px;
  background-position: -3774px 0px;
}

.iti-flag.np {
  height: 15px;
  background-position: -3796px 0px;
}

.iti-flag.nr {
  height: 10px;
  background-position: -3811px 0px;
}

.iti-flag.nu {
  height: 10px;
  background-position: -3833px 0px;
}

.iti-flag.nz {
  height: 10px;
  background-position: -3855px 0px;
}

.iti-flag.om {
  height: 10px;
  background-position: -3877px 0px;
}

.iti-flag.pa {
  height: 14px;
  background-position: -3899px 0px;
}

.iti-flag.pe {
  height: 14px;
  background-position: -3921px 0px;
}

.iti-flag.pf {
  height: 14px;
  background-position: -3943px 0px;
}

.iti-flag.pg {
  height: 15px;
  background-position: -3965px 0px;
}

.iti-flag.ph {
  height: 10px;
  background-position: -3987px 0px;
}

.iti-flag.pk {
  height: 14px;
  background-position: -4009px 0px;
}

.iti-flag.pl {
  height: 13px;
  background-position: -4031px 0px;
}

.iti-flag.pm {
  height: 14px;
  background-position: -4053px 0px;
}

.iti-flag.pn {
  height: 10px;
  background-position: -4075px 0px;
}

.iti-flag.pr {
  height: 14px;
  background-position: -4097px 0px;
}

.iti-flag.ps {
  height: 10px;
  background-position: -4119px 0px;
}

.iti-flag.pt {
  height: 14px;
  background-position: -4141px 0px;
}

.iti-flag.pw {
  height: 13px;
  background-position: -4163px 0px;
}

.iti-flag.py {
  height: 11px;
  background-position: -4185px 0px;
}

.iti-flag.qa {
  height: 8px;
  background-position: -4207px 0px;
}

.iti-flag.re {
  height: 14px;
  background-position: -4229px 0px;
}

.iti-flag.ro {
  height: 14px;
  background-position: -4251px 0px;
}

.iti-flag.rs {
  height: 14px;
  background-position: -4273px 0px;
}

.iti-flag.ru {
  height: 14px;
  background-position: -4295px 0px;
}

.iti-flag.rw {
  height: 14px;
  background-position: -4317px 0px;
}

.iti-flag.sa {
  height: 14px;
  background-position: -4339px 0px;
}

.iti-flag.sb {
  height: 10px;
  background-position: -4361px 0px;
}

.iti-flag.sc {
  height: 10px;
  background-position: -4383px 0px;
}

.iti-flag.sd {
  height: 10px;
  background-position: -4405px 0px;
}

.iti-flag.se {
  height: 13px;
  background-position: -4427px 0px;
}

.iti-flag.sg {
  height: 14px;
  background-position: -4449px 0px;
}
h1, .h1 {
    font-size: 36px;
    color: white;
    text-align: CENTER;
    /* BORDER-BOTTOM: 1px solid; */
    /* font-weight: lighter; */
    padding-top: 5px;
}

.iti-flag.sh {
  height: 10px;
  background-position: -4471px 0px;
}

.iti-flag.si {
  height: 10px;
  background-position: -4493px 0px;
}

.iti-flag.sj {
  height: 15px;
  background-position: -4515px 0px;
}

.iti-flag.sk {
  height: 14px;
  background-position: -4537px 0px;
}

.iti-flag.sl {
  height: 14px;
  background-position: -4559px 0px;
}

.iti-flag.sm {
  height: 15px;
  background-position: -4581px 0px;
}

.iti-flag.sn {
  height: 14px;
  background-position: -4603px 0px;
}

.iti-flag.so {
  height: 14px;
  background-position: -4625px 0px;
}

.iti-flag.sr {
  height: 14px;
  background-position: -4647px 0px;
}

.iti-flag.ss {
  height: 10px;
  background-position: -4669px 0px;
}

.iti-flag.st {
  height: 10px;
  background-position: -4691px 0px;
}

.iti-flag.sv {
  height: 12px;
  background-position: -4713px 0px;
}

.iti-flag.sx {
  height: 14px;
  background-position: -4735px 0px;
}

.iti-flag.sy {
  height: 14px;
  background-position: -4757px 0px;
}

.iti-flag.sz {
  height: 14px;
  background-position: -4779px 0px;
}

.iti-flag.ta {
  height: 10px;
  background-position: -4801px 0px;
}

.iti-flag.tc {
  height: 10px;
  background-position: -4823px 0px;
}

.iti-flag.td {
  height: 14px;
  background-position: -4845px 0px;
}

.iti-flag.tf {
  height: 14px;
  background-position: -4867px 0px;
}

.iti-flag.tg {
  height: 13px;
  background-position: -4889px 0px;
}

.iti-flag.th {
  height: 14px;
  background-position: -4911px 0px;
}

.iti-flag.tj {
  height: 10px;
  background-position: -4933px 0px;
}

.iti-flag.tk {
  height: 10px;
  background-position: -4955px 0px;
}

.iti-flag.tl {
  height: 10px;
  background-position: -4977px 0px;
}

.iti-flag.tm {
  height: 14px;
  background-position: -4999px 0px;
}

.iti-flag.tn {
  height: 14px;
  background-position: -5021px 0px;
}

.iti-flag.to {
  height: 10px;
  background-position: -5043px 0px;
}

.iti-flag.tr {
  height: 14px;
  background-position: -5065px 0px;
}

.iti-flag.tt {
  height: 12px;
  background-position: -5087px 0px;
}

.iti-flag.tv {
  height: 10px;
  background-position: -5109px 0px;
}

.iti-flag.tw {
  height: 14px;
  background-position: -5131px 0px;
}

.iti-flag.tz {
  height: 14px;
  background-position: -5153px 0px;
}

.iti-flag.ua {
  height: 14px;
  background-position: -5175px 0px;
}

.iti-flag.ug {
  height: 14px;
  background-position: -5197px 0px;
}

.iti-flag.um {
  height: 11px;
  background-position: -5219px 0px;
}

.iti-flag.us {
  height: 11px;
  background-position: -5241px 0px;
}

.iti-flag.uy {
  height: 14px;
  background-position: -5263px 0px;
}

.iti-flag.uz {
  height: 10px;
  background-position: -5285px 0px;
}

.iti-flag.va {
  height: 15px;
  background-position: -5307px 0px;
}

.iti-flag.vc {
  height: 14px;
  background-position: -5324px 0px;
}

.iti-flag.ve {
  height: 14px;
  background-position: -5346px 0px;
}

.iti-flag.vg {
  height: 10px;
  background-position: -5368px 0px;
}

.iti-flag.vi {
  height: 14px;
  background-position: -5390px 0px;
}

.iti-flag.vn {
  height: 14px;
  background-position: -5412px 0px;
}

.iti-flag.vu {
  height: 12px;
  background-position: -5434px 0px;
}

.iti-flag.wf {
  height: 14px;
  background-position: -5456px 0px;
}

.iti-flag.ws {
  height: 10px;
  background-position: -5478px 0px;
}

.iti-flag.xk {
  height: 15px;
  background-position: -5500px 0px;
}

.iti-flag.ye {
  height: 14px;
  background-position: -5522px 0px;
}

.iti-flag.yt {
  height: 14px;
  background-position: -5544px 0px;
}

.iti-flag.za {
  height: 14px;
  background-position: -5566px 0px;
}

.iti-flag.zm {
  height: 14px;
  background-position: -5588px 0px;
}

.iti-flag.zw {
  height: 10px;
  background-position: -5610px 0px;
}

.iti-flag {
  width: 20px;
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/img/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  .iti-flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/img/flags@2x.png");
  }
}

.iti-flag.np {
  background-color: transparent;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* body {
  margin: 20px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #555;
} */

.hide {
  display: none;
}

pre {
  margin: 0 !important;
  display: inline-block;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  background: none;
}

/* input, */
/* button {
  height: 35px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 100%;
  color: inherit;
} */

/* input[disabled],
button[disabled] {
  background-color: #eee;
} */

/* input,
select {
  border: 1px solid #CCC;
  width: 250px;
}

::-webkit-input-placeholder {
  color: #BBB;
}

::-moz-placeholder {
  /* Firefox 19+ */
  /* color: #BBB;
  opacity: 1;
} */

:-ms-input-placeholder {
  color: #BBB;
}

button {
  color: #FFF;
  background-color: #428BCA;
  border: 1px solid #357EBD;
}

button:hover {
  background-color: #3276B1;
  border-color: #285E8E;
  cursor: pointer;
} 

#result {
  margin-bottom: 100px;
}

/* dropzone style*/
.dropzone {
    background: white;
    border-radius: 5px;
    border: 2px dashed rgb(0, 135, 247);
    border-image: none;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width:992px){
 .login-form{

   margin: 10% 26% auto;
 }
}
@media (max-width:726px){
 .login-form{

   margin: 5% 13% auto;
 }
}
@media (max-width:500px){
 .login-form{

   margin: 2.5% 6.5% auto;
 }
}

    </style>
    @include('web.pages.navbar')
    <!-- HOME PRO-->
    <div class="home-pro">

        <!-- PRO BANNER HEAD -->
        <div class="banr-head" id="slide-baner">
            <div class="container mycontainer p-md-0">
              
                <div class="row mt-5 pt-3">
                    <!-- CONTENT -->
                    <div class="col-md-3"></div>

                    <div class="col-sm-6 login-form">
                      <div class="login-sec bg-trans">

                          <!-- TABS -->
                          <div class="uou-tabs">
                              

                              <div class="content">
                                  <!--Company REGISTER -->
                                  <div id="company_register"
                                      style="border-bottom-right-radius: 9px;border-bottom-left-radius: 9px;">
                                      @if (Session::get('status'))
                                          <div class="alert alert-primary" style="color:white" role="alert">
                                              {{ Session::get('status') }}
                                          </div>
                                      @endif
                                      @if ($errors->any())
                                          <div class="alert alert-danger" style="color: white" role="alert">
                                              {{ implode('', $errors->all(':message')) }}
                                          </div>
                                      @endif
                                      <form action="{{ route('user.register') }}" method="post" class="pb-0 pt-34px"
                                          style="padding-bottom: 7px !important;">
                                          @csrf
                                          <input type="hidden" placeholder="Company Name" name="role_id" value="3">
                                          <input type="text" placeholder="Enter Your Full Name" name="fullname"
                                              style="margin-top: 0px !important;" required>
                                          <span class="`text-danger mt-0">{{ $errors->first('fullname') }}</span>
                                          <input  placeholder="Email Address" name="email"
                                              style="margin-top: 22px !important;" required>
                                          <span  id="asset_name_message" class="text-danger"></span>
                                          {{-- <input type="tel" placeholder="Phone" name="phone_no" required> --}}
                                          <span id="asset_name_message" class="text-danger"></span>
                                          <input type="password" placeholder="Password" name="password"
                                              style="margin-top: 0px !important;" required>
                                          <span class="text-danger">{{ $errors->first('password') }}</span>
                                          <div data-v-303fde06="" class="form-check form-check-inline"
                                              style="margin-top: -4px;">
                                              <input data-v-303fde06="" type="checkbox" id="toggleOn1"
                                                  onclick="toggleSubmit()" class="mt-2PX"
                                                  style="margin-top:25px !important;margin-right: 4px;margin-left: 2px;"
                                                  required>
                                              <label data-v-303fde06="" for="inlineCheckbox10"
                                                  class="form-check-label check-label"
                                                  style="padding-top: 0;margin-top: -16px;">
                                                  You agree to HouseRunsforme User Agreement, Privacy Policy, and Cookie
                                                  Policy.
                                              </label>
                                          </div>
                                          <div data-v-303fde06="" class="form-check form-check-inline"
                                              style="margin-top: -4px;">
                                              <input data-v-303fde06="" type="checkbox" 
                                                   class="mt-2PX"
                                                  style="margin-top:25px !important;margin-right: 4px;margin-left: 2px;"
                                                  required>
                                              <label data-v-303fde06="" for="inlineCheckbox10"
                                                  class="form-check-label check-label"
                                                  style="padding-top: 0;margin-top: -16px;">
                                                  You agree to HouseRunsforme User Agreement, Privacy Policy, and Cookie
                                                  Policy.
                                              </label>
                                          </div>
                                          <button type="submit" disabled id="submitBtn1" class="opaclight" disable
                                              style="width: 14rem;white-space: nowrap;padding-right: 43px;margin-top: 11px;">Agree
                                              & Join</button>
                                          {{-- <div class="login-with" style="margin-top: 12px;"> <span>Or login with:</span> <a href={{url("/log/facebook/3")}}><i class="fa fa-facebook"></i></a> <a href={{url("/log/google/3")}}><i class="fa fa-google"></i></a> <a href=url("/log/linkedin/3")> <i class="fa fa-linkedin"></i></a> </div> --}}
                                          {{-- <div class="forget pt-0 text-left" style="text-align: left;padding-top: 4px !IMPORTANT;margin-top: 17px;padding-bottom: 12px;">Forgot your password? <a href="#" style="color:#faa83e">Click Here</a></div> --}}
                                      </form>
                                  </div>
                                  <!--User REGISTER -->
                                  <div id="register" class="active"
                                      style="border-bottom-right-radius: 9px;border-bottom-left-radius: 9px;">
                                      <h1 style="color: white;">User Login </h1>
                                      @if (Session::get('status'))
                                      <div class="alert alert-primary" style="color:white" role="alert">
                                          {{ Session::get('status') }}
                                      </div>
                                  @endif
                                  @if ($errors->any())
                                      <div class="alert alert-danger" style="color: red" role="alert">
                                          {{ implode('', $errors->all(':message')) }}
                                      </div>
                                  @endif
                                  @if (Session::get('success'))
                                  <div class="alert alert-primary" style="color:white" role="alert">
                                      {{ Session::get('success') }}
                                  </div>
                              @endif
                                
                                    <form id="form-register" action="{{ route('user.login') }}" method="post"
                                          class="pt-0 pb-0 mt-5PX"
                                          STYLE="padding-top: 0px !important;padding-bottom: 10px !important;" enctype="multipart/form-data">
                                          @csrf
                                          <div class="row">
                                            
                                          <div class="col-md-3">
                                          <div class="form-check text-center">
                                              <input class="form-check-input input_height position-static " 
                                              type="radio" name="role_id" id="blankRadio1" value="3" aria-label="client"
                                               checked> <span style="color: #000;font-weight: bold;font-size: 19px;">Client</span>
                                              </div>
                                            </div>
                                          </div>
                                           <div class="row">
                                             
                                             <div class="col-md-12">
                                              <input class="form-check-input input_height1 position-static
                                               " type="radio" name="role_id" id="blankRadio1" value="2" aria-label="serviceProvider"> 
                                               <span style="color: #000;font-weight: bold;font-size: 19px;">Service Provider</span>
                                              </div>
                                            </div>
                                          
                                          <input type="text" placeholder="Enter your email" name="email"
                                              style="margin-top: 0px !important;" required>
                                          <span class="`text-danger mt-0">{{ $errors->first('email') }}</span>
                                          <input type="password" placeholder="Password" name="password"
                                              style="margin-top: 20px !important;" required>
                                          <span class="text-danger">{{ $errors->first('password') }}</span>
                                          <div class="row">
                                            <div class="col-md-8"></div>
                                            <div class="col-md-4">


                                           <p><a href="{{url('/forgot-password')}}">Forgot Password</a></p>
                      
                      
                                              
                                            </div>
                                           
                                          </div>
                                                                                
                                          
                                          <button  type="submit" class="opaclight" 
                                          style="width: 14rem;white-space: nowrap;padding-right: 43px;">Login</button>
                                          

                                          {{-- <div class="login-with btn_reg" style="MARGIN-TOP: 13PX;"> <span>Or login with:</span> <a href=""><i class="fa fa-facebook"></i></a> <a href={{url("/log/google/2")}}><i class="fa fa-google"></i></a> <a href={{url("/log/linkedin/2")}}><i class="fa fa-linkedin"></i></a> </div> --}}
                                          {{-- <div class="forget pt-0 text-left" style="text-align: left;padding-top: 4px !IMPORTANT;margin-top: 17px;padding-bottom: 12px;">Forgot your password? <a href="{{url('forgotPassword')}}" style="color:red">Click Here</a></div> --}}
                                      </form>
                                  </div>
                                </div>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-3"></div>
                   
                    </div>

                    <!-- FORM SECTION -->
                    
                </div>
            </div>
            {{-- <div class="col-sm-12 setInside">
      <div class="circleDivide" data-class="bnr-head-img-" data-eq="0" id="indicate">

      </div>
      <div class="circleDivide" data-class="bnr-head-img-" data-eq="1" id="indicate">

      </div>
      <div class="circleDivide" data-class="bnr-head-img-" data-eq="2" id="indicate">

      </div>
      <div class="circleDivide" data-class="bnr-head-img-" data-eq="3" id="indicate">
      </div>
    </div> --}}
        </div>


    </div>
    </div>
@endsection
@section('scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>

<script>
	var dropzone = new Dropzone('#demo-upload', {
  previewTemplate: document.querySelector('#preview-template').innerHTML,
  parallelUploads: 2,
  thumbnailHeight: 120,
  thumbnailWidth: 120,
  maxFilesize: 3,
  filesizeBase: 1000,
  thumbnail: function(file, dataUrl) {
    if (file.previewElement) {
      file.previewElement.classList.remove("dz-file-preview");
      var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
      for (var i = 0; i < images.length; i++) {
        var thumbnailElement = images[i];
        thumbnailElement.alt = file.name;
        thumbnailElement.src = dataUrl;
      }
      setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 1);
    }
  }

});


// Now fake the file upload, since GitHub does not handle file uploads
// and returns a 404

var minSteps = 6,
    maxSteps = 60,
    timeBetweenSteps = 100,
    bytesPerStep = 100000;

dropzone.uploadFiles = function(files) {
  var self = this;

  for (var i = 0; i < files.length; i++) {

    var file = files[i];
    totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));

    for (var step = 0; step < totalSteps; step++) {
      var duration = timeBetweenSteps * (step + 1);
      setTimeout(function(file, totalSteps, step) {
        return function() {
          file.upload = {
            progress: 100 * (step + 1) / totalSteps,
            total: file.size,
            bytesSent: (step + 1) * file.size / totalSteps
          };

          self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
          if (file.upload.progress == 100) {
            file.status = Dropzone.SUCCESS;
            self.emit("success", file, 'success', null);
            self.emit("complete", file);
            self.processQueue();
            //document.getElementsByClassName("dz-success-mark").style.opacity = "1";
          }
        };
      }(file, totalSteps, step), duration);
    }
  }
}
</script>

    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active_slide", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active_slide";
        }

    </script>

    <script type="text/javascript">
        let slider_i = 0;
        $(document).ready(function() {
            $("div.circleDivide").click(function() {
                let classname = $(this).data("class");
                let eq = $(this).data("eq");
                slider_i = eq;
                for (let i = eq; i <= 3; i++) {
                    $("#slide-baner").removeClass(classname + i);
                }
                $("div.circleDivide").removeClass("circleDivideFocus")
                for (let i = 0; i <= eq; i++) {
                    $("div.circleDivide").eq(i).addClass("circleDivideFocus");
                }
                $("#slide-baner").addClass(classname + eq);
            })
            $("#a-image").hide();
            $("#ua-image").hide();
            $("#ld-image").hide()
            $("#ac").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    $("#c-image").hide();
                    $("#a-image").show();
                    $("#ud-image").show();
                    $("#ua-image").hide();
                    $("#ld-image").show();
                    $("#la-image").hide();
                }
            });
            $("#uc").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    // alert("yes");
                    $("#ud-image").hide();
                    $("#ua-image").show();
                    $("#c-image").show();
                    $("#a-image").hide();
                    $("#ld-image").show();
                    $("#la-image").hide();
                }
            });
            $("#lc").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    // alert("yes");
                    $("#ud-image").show();
                    $("#ua-image").hide();
                    $("#c-image").show();
                    $("#a-image").hide();
                    $("#la-image").show();
                    $("#ld-image").hide();

                }
            });

            // alert();

        });
        $(document).ready(function() {
            $('.owl-carousel').owlCarousel({
                autoWidth: false
            })
        });

    </script>
    <script>
        function toggleSubmit() {
            var toggle = document.getElementById("toggleOn1")
            var toggleBtn = document.getElementById("submitBtn1")
            if (toggle.checked) {
                toggleBtn.removeAttribute("disabled")
                toggleBtn.classList.remove("opaclight")
            } else {
                toggleBtn.setAttribute("disabled", "true");
                toggleBtn.classList.add("opaclight")
            }
        }

        function toggleSubmit2() {
            var toggle = document.getElementById("toggleOn2")
            var toggleBtn = document.getElementById("submitBtn2")
            if (toggle.checked) {
                toggleBtn.removeAttribute("disabled")
                toggleBtn.classList.remove("opaclight")
            } else {
                toggleBtn.setAttribute("disabled", "true");
                toggleBtn.classList.add("opaclight")
            }
        }

    </script>
    <script>
        var slideBaner = document.querySelector("#slide-baner");
        var indicateVar = document.querySelectorAll("#indicate");
        setInterval(function runSlide() {
            indicateVar[slider_i].classList.add('circleDivideFocus')
            if (slider_i == 0) {
                slider_i++;
                slideBaner.classList.add('bnr-head-img-' + slider_i)
                slider_i--;
            } else {
                slideBaner.classList.add('bnr-head-img-' + slider_i)
            }
            if (slider_i == 3) {
                slider_i = 0;
                for (let d = 0; d < indicateVar.length; d++) {
                    slideBaner.classList.remove('bnr-head-img-' + d)
                    indicateVar[d].classList.remove('circleDivideFocus')
                }
            } else {
                slider_i++;
                console.log("i value : " + slider_i)
            }
        }, 2000)

    </script>
    <script>
 $(document).ready(function() {

            var owl = $("#owl-demo1");

            owl.owlCarousel({
                autoplay:true,
                items: 3, //10 items above 1000px browser width
                itemsDesktop: [1000, 3], //5 items between 1000px and 901px
                itemsDesktopSmall: [900, 2], // 3 items betweem 900px and 601px
                itemsTablet: [600, 1], //2 items between 600 and 0;
                itemsMobile: [500, 1] // itemsMobile disabled - inherit from itemsTablet option

            });

            // Custom Navigation Events
            $(".next").click(function() {
                owl.trigger('owl.next');
            })
            $(".prev").click(function() {
                owl.trigger('owl.prev');
            })
            $(".play").click(function() {
                owl.trigger('owl.play', 1000);
            })
            $(".stop").click(function() {
                owl.trigger('owl.stop');
            })

        });
    </script>
    <script>
        
var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput({

  allowExtensions: true,
  formatOnDisplay: true,
  autoFormat: true,
  autoHideDialCode: true,
  autoPlaceholder: true,
  defaultCountry: "auto",
  ipinfoToken: "yolo",

  nationalMode: false,
  numberType: "MOBILE",
  //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
  preferredCountries: ['sa', 'ae', 'qa','om','bh','kw','ma'],
  preventInvalidNumbers: true,
  separateDialCode: true,
  initialCountry: "auto",
  geoIpLookup: function(callback) {
  $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
    var countryCode = (resp && resp.country) ? resp.country : "";
    callback(countryCode);
  });
},
   utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"
});

var reset = function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
};

// on blur: validate
telInput.blur(function() {
  reset();
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
    }
  }
});

// on keyup / change flag: reset
telInput.on("keyup change", reset);

function fetchdata(){
  // alert('working');

  $('#country_code').val($("#phone").intlTelInput("getSelectedCountryData").dialCode);

  // alert($("#phone").intlTelInput("getSelectedCountryData").dialCode)
  $('#form-register').submit();
}


    </script>

    <script>
        $(document).ready(function(){
          $(document).on('click','#upload-proof',function(){
            event. preventDefault() 
              $( "#file_proff" ).trigger( "click" );
          });
        });
    </script>

@endsection