@import url(nice-select.css);

/* =====================================================
   REGISTRATION MODERN CSS
   Place AFTER style.css
===================================================== */

#reg_form,
#res_form{
    width:100%;
    margin:40px auto;
    color:#444;
/*    font-family:'Poppins',sans-serif;*/
}

#reg_form .registration-wrapper{
    background:#ffffff;
    border-radius:18px;
    padding:45px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

#reg_form .imp{color: #FFA500}

#reg_form h2,
#reg_form h3,
#res_form h2,
#res_form h3{
    color:var(--blue-ink);
/*    font-weight:700;*/
    margin-bottom:25px;
}

#reg_form h4{
    color:#222;
    font-weight:600;
    margin-top:35px;
    margin-bottom:15px;
    border-left:5px solid var(--blue-ink);
    padding-left:12px;
}

#reg_form .selection,
#reg_form .text-field,
#res_form .text-field{
    margin-bottom:22px;
}

#reg_form p,
#res_form p{
    font-size:15px;
/*    font-weight:600;*/
    margin-bottom:8px;
    color:#333;
}

#reg_form .mandatory,
#res_form .mandatory{
    color:#e53935;
    margin-left:3px;
}

#reg_form input[type=text],
#reg_form input[type=email],
#reg_form input[type=number],
#reg_form input[type=password],
#reg_form input[type=date],
#reg_form input[type=file],
#reg_form textarea,
#reg_form select,
#res_form input[type=text],
#res_form textarea,
#res_form select{

    width:100%;
    background:#fff;
    border:1px solid #d8d8d8;
    border-radius:10px;
    padding:13px 16px;
    font-size:15px;
    transition:.3s;
    box-sizing:border-box;
}

#reg_form textarea,
#res_form textarea{
    min-height:140px;
    resize:vertical;
}

#reg_form input:focus,
#reg_form textarea:focus,
#reg_form select:focus,
#res_form input:focus,
#res_form textarea:focus,
#res_form select:focus{

    outline:none;
    border-color:var(--blue-ink);
    box-shadow:0 0 0 4px rgba(33,200,255,.15);
}

#reg_form select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23777' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6.5 6 6.5-6' stroke='%23777' stroke-width='2' fill='none'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 15px center;
    padding-right:45px;
}

#reg_form input[type=file]{

    background:#fafafa;
    padding:10px;
    cursor:pointer;
}

#reg_form input[type=file]::file-selector-button{

    background:var(--blue-ink);
    color:#fff;
    border:none;
    padding:9px 18px;
    border-radius:8px;
    cursor:pointer;
    margin-right:15px;
    transition:.3s;
}

#reg_form input[type=file]::file-selector-button:hover{

    background:#0ca6da;
}

#reg_form label{

    display:inline-block;
    margin-bottom:6px;
    color:#333;
    font-weight:600;
}

#reg_form input[type=radio],
#reg_form input[type=checkbox]{

    accent-color:var(--blue-ink);
    transform:scale(1.15);
    margin-right:8px;
    cursor:pointer;
}

#reg_form span.radio_text{

    font-size:15px;
    color:#444;
}

#reg_form .information,
#res_form .information{
    background:#ecfff5;
    border-left:5px solid #2ecc71;
    color:#2e7d32;
    padding:6px 10px;
    border-radius:8px;
    margin-bottom:20px;
    font-size:14px;
}

#reg_form .error,
#res_form .error,
.admin_view .error{

    background:#fff3f3;
    border-left:5px solid #e53935;
    color:#c62828;
    padding:6px 10px;
    border-radius:8px;
    font-weight:600;
    font-size:14px;
    margin-top:8px;
}

h3.bounceerror{

    background:#ffe9e9;
    color:#d32f2f;
    padding:15px;
    border-radius:10px;
}

#reg_form img{

    border-radius:10px;
    border:1px solid #ddd;
    padding:6px;
    background:#fff;
}

#reg_form hr{

    border:none;
    border-top:1px solid #ececec;
    margin:35px 0;
}

#reg_form table{

    width:100%;
    border-collapse:collapse;
}

#reg_form table td{

    padding:12px;
    vertical-align:middle;
}

#reg_form table tr:nth-child(even){

    background:#fafafa;
}

#reg_form .reg-form-info-style{

    background:linear-gradient(135deg,var(--blue-ink),var(--coral));
    color:#fff;
    padding:22px;
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    margin-bottom:25px;
}

#reg_form .reg-form-info-style strong{

    font-size:18px;
}

#reg_form #pay_amount{

    font-size:26px;
    font-weight:700;
    color:var(--blue-ink);
}

/* =====================================================
   BUTTONS
===================================================== */

#reg_form input[type=submit],
#reg_form button,
#res_form input[type=submit],
#res_form button{

/*    background:linear-gradient(135deg,var(--blue-ink),#1699cb);*/
    color:#fff;
    border:none;
    border-radius:12px;
    padding:15px 35px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:.3s ease;
    display:inline-block;
    min-width:250px;
    box-shadow:0 10px 20px rgba(33,200,255,.25);
}

#reg_form input[type=submit]:hover,
#reg_form button:hover,
#res_form input[type=submit]:hover,
#res_form button:hover{

    transform:translateY(-2px);
/*    background:linear-gradient(135deg,#1699cb,#0f82af);*/
    box-shadow:0 15px 30px rgba(33,200,255,.35);
}

#reg_form input[type=submit]:active{

    transform:scale(.98);
}


/* =====================================================
   RADIO & CHECKBOX GROUPS
===================================================== */

#reg_form .selection{

    background:#fafafa;
    padding:18px;
    border-radius:12px;
    border:1px solid #ececec;
}

#reg_form .selection:hover{

    border-color:var(--blue-ink);
}

#reg_form .selection label{

    display:block;
    margin:10px 0;
    cursor:pointer;
}


/* =====================================================
   PAYMENT BOX
===================================================== */

#pay_amount{

    display:inline-block;
    padding:8px 18px;
    background:#e8f8ff;
    border-radius:8px;
    border:1px solid #bcecff;
    margin-left:8px;
}

.payment-box{

    background:#f9fdff;
    border:1px solid #d8eef8;
    border-left:5px solid var(--blue-ink);
    padding:25px;
    border-radius:15px;
    margin:30px 0;
}

.payment-box h4{

    margin-top:0;
}


/* =====================================================
   COUPON SECTION
===================================================== */

.coupon-box{

    background:#fffef8;
    border:1px solid #f2df8f;
    padding:20px;
    border-radius:12px;
    margin:20px 0;
}

.coupon-box input{

    margin-bottom:12px;
}

.coupon-box button{

    min-width:180px;
}


/* =====================================================
   IMAGE PREVIEW
===================================================== */

#reg_form img{

    max-width:220px;
    display:block;
    margin-top:15px;
}


/* =====================================================
   TABLES
===================================================== */

.admin_view{

    font-size:14px;
}

.admin_view table{

    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.admin_view th{

    background:var(--blue-ink);
    color:#333;
    padding:14px;
    text-align:left;
}

.admin_view td{

    padding:12px;
    border-bottom:1px solid #eee;
}

.admin_view tr:hover{

    background:#f7fcff;
}

.admin_view button{

/*    background:var(--blue-ink);*/
    color:#fff;
    padding:8px 15px;
    border:none;
    border-radius:8px;
}

.admin_view button:hover{

    background:#148dbd;
}


/* =====================================================
   DATE FIELDS
===================================================== */

#reg_form input.datemonth{

    width:70px;
    display:inline-block;
    text-align:center;
}

#reg_form input.year{

    width:100px;
    display:inline-block;
    text-align:center;
}


/* =====================================================
   TEXTAREA
===================================================== */

.form_fields_textarea{

    width:100%;
    min-height:170px;
}


/* =====================================================
   LINKS
===================================================== */

#reg_form a{

    color:var(--blue-ink);
    font-weight:600;
}

/* =====================================================
   SECTION TITLES
===================================================== */

#reg_form .section-title{

    font-size:22px;
    font-weight:700;
    color:var(--blue-ink);
    margin-top:40px;
    margin-bottom:20px;
    position:relative;
}

#reg_form .section-title:after{

    content:"";
    width:60px;
    height:4px;
    background:var(--blue-ink);
    display:block;
    margin-top:8px;
    border-radius:20px;
}


/* =====================================================
   SMOOTH ANIMATION
===================================================== */

#reg_form input,
#reg_form select,
#reg_form textarea,
#reg_form button{

    transition:all .25s ease;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:991px){

#reg_form{

    padding:10px;
}

#reg_form .registration-wrapper{

    padding:30px;
}

}


@media (max-width:768px){

#reg_form h2{

    font-size:28px;
}

#reg_form h3{

    font-size:24px;
}

#reg_form input,
#reg_form select,
#reg_form textarea{

    font-size:15px;
}

#reg_form input[type=submit],
#reg_form button{

    width:100%;
    min-width:100%;
}

#reg_form img{

    max-width:100%;
}

.payment-box,
.coupon-box{

    padding:18px;
}

}


@media (max-width:480px){

#reg_form{

    margin:20px auto;
}

#reg_form .registration-wrapper{

    padding:20px;
    border-radius:12px;
}

#reg_form p{

    font-size:14px;
}

#reg_form h2{

    font-size:24px;
}

#reg_form h3{

    font-size:20px;
}

}


/* =====================================================
   OPTIONAL PREMIUM CARD EFFECT
===================================================== */

#reg_form{

    animation:fadeIn .5s ease;
}

@keyframes fadeIn{

from{

    opacity:0;
    transform:translateY(20px);

}

to{

    opacity:1;
    transform:translateY(0);

}

}


/* =====================================================
   SMALL UTILITIES
===================================================== */

.text-center{

    text-align:center;
}

.text-right{

    text-align:right;
}

.mt-10{

    margin-top:10px;
}

.mt-20{

    margin-top:20px;
}

.mt-30{

    margin-top:30px;
}

.mb-10{

    margin-bottom:10px;
}

.mb-20{

    margin-bottom:20px;
}

.mb-30{

    margin-bottom:30px;
}

.rounded{

    border-radius:12px;
}

.shadow{

    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

#reg_form select{
    display: none;
}

/* Hide empty messages */
#reg_form span:empty,
#reg_form div:empty,
#reg_form p:empty{
    display:none;
}

/* Hide empty error/info messages */
#reg_form .error:empty,
#reg_form .information:empty,
#reg_form .success:empty{
    display:none;
}

#reg_form #coupon{
	margin-bottom: 20px;
}

#reg_form .nice-select{ 
    background-color: #ffffff; 
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 8px 0;
    display: block;
}

#reg_form .nice-select .list { max-height: 350px; overflow: scroll; }
#reg_form .nice-select .option { font-size: 16px; }

/* Force each form field onto a new line */
#reg_form .text-field,
#reg_form .selection,
#reg_form #main_country,
#reg_form #country_elem,
#reg_form #state_elem,
#reg_form #city_elem {
    display: block;
    clear: both;
    width: 100%;
    float: none;
    margin-bottom: 22px;
}


/* ==========================================
   Registration Success Page
========================================== */

.registration-success{

    max-width:850px;
    margin:60px auto;
    background:#fff;
    border-radius:20px;
    padding:45px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    text-align:center;

}

.success-icon{

    width:90px;
    height:90px;
    line-height:90px;
    margin:0 auto 30px;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    font-size:46px;
    font-weight:bold;

}

.registration-success .title{

    padding-bottom:20px;

}

.registration-success .title h2, .titlereg .title h2{

    color:#FFA500;
    font-size:42px;
    margin-bottom:10px;

}

.registration-success .black, .titlereg .black{

    color:#222;

}

.success-content{

    color:#555;
    font-size:18px;
    line-height:1.9;

}

.success-content h3{

    color:#22a547;
    font-size:30px;
    margin-bottom:25px;

}

.success-alert{

    margin:35px 0;
    padding:28px;
    background:#fff9e8;
    border-left:6px solid #ffb300;
    border-radius:14px;
    text-align:left;

}

.success-alert strong{

    color:#d97706;

}

.phone-list{

    margin:20px 0;
    text-align:center;
    font-size:26px;
    color:var(--blue-ink);
    line-height:1.8;

}

.warning-box{

    background:#ffecec;
    border-left:6px solid #ef4444;
    padding:22px;
    margin:30px 0;
    border-radius:14px;
    color:#b91c1c;
    font-weight:600;

}

.whatsapp-box{

    background:#e9fff1;
    border-left:6px solid #22c55e;
    padding:30px;
    margin:40px 0;
    border-radius:14px;

}

.whatsapp-box strong{

    display:block;
    margin-bottom:18px;
    font-size:22px;
    color:#166534;

}

.whatsapp-box a{

    display:inline-block;
    background:#25D366;
    color:#fff;
    padding:15px 40px;
    border-radius:50px;
    font-size:18px;
    font-weight:600;
    transition:.3s;

}

.whatsapp-box a:hover{

    background:#1aa34a;
    color:#fff;

}

.thank-you{

    margin-top:35px;
    font-size:32px;
    color:var(--blue-ink);
    font-weight:700;

}

.thank-you span{

    display:block;
    margin-top:12px;
    font-size:18px;
    color:#666;
    font-weight:400;

}

@media(max-width:768px){

.registration-success{

    padding:30px 20px;
    margin:30px 15px;

}

.registration-success .title h2{

    font-size:30px;

}

.success-content{

    font-size:16px;

}

.success-content h3{

    font-size:24px;

}

.phone-list{

    font-size:22px;

}

.whatsapp-box a{

    width:100%;

}

.thank-you{

    font-size:26px;

}

}

.radio_option{
    display:block;
    margin:10px 0;
    cursor:pointer;
    font-size:16px;
    color:#555;
}

.radio_option input{
    margin-right:10px;
    transform:scale(1.15);
    accent-color:var(--blue-ink);
}

.text-field small{
    display:block;
    margin-top:4px;
    color:#888;
    font-size:13px;
    line-height:1.4;
}

/* ===========================
   END OF FILE
=========================== */