@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap";

@font-face {
    font-family: 'Trebuchet MS';
    font-style: normal;
    font-weight: normal;
    src: local('Trebuchet MS'), url('../fonts/trebuc.woff') format('woff');
}

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

h1{
    font-size: 53px;
}
h2{
    font-size: 30px;
}
h3{line-height: 1.5em;}
.no-display{
    display: none;
}
p{
    font-size: 16px;
    color: #6C6C6C;
    line-height: 25px;
}
body{
    font-family: 'Trebuchet MS', sans-serif; 
    margin: 0;
    padding: 0;
/*    height: 100vh;*/
}

body.landing-page{
    background-color: #00891A;
}

.landing-page-inner{
    margin: 200px;
    text-align: center;
    color: #fff;
}
.landing-page-inner p{
    font-size: 20px;
    color: #fff;
}

header a{
    text-decoration: none;
}
header h2{
    font-size: 53px;
    color: #00891A;
    text-align: center;
}
.user_data{
    background-color: #EDEDED;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 25px;
}
.user_data h3{
    font-size: 28px;
    line-height: 34px;
    color: #6C6C6C;
}
.user_data p{
    font-size: 16px;
    line-height: 24px;
    color: #6C6C6C;
    font-weight: 500;
}
.user_data h3, .user_data p{
    margin: 0;
}
.wht-i-need{
    padding: 35px 0 35px 0;
    text-align: center;
}
.wht-i-need .btn{
    padding: 8px 0;
}

.wht-i-need .btn p{
    margin: 14px 0 0 0;
    font-weight: 500;
}
form{
    padding: 25px 0;
    text-align: center;
}

.page-content{
    text-align: center;
}
.form-heading, .page-heading h1{
    background-color: #4500FF;
    text-align: center;
    color: #fff;
    font-size: 43px;
    line-height: 53px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 0;
}
.page-heading{background-color: #4500FF;}
.page-heading h1{    
    font-size: 40px;
    line-height: 50px;
    margin: 0; 
}
#bin_pickup p{
    font-weight: 500;
}
#bin_pickup button[type="submit"]{
    margin-top: 1.5em !important;
    margin-bottom: 0.7em !important;
    background-color: #00891A;
    font-family: inherit;
}
#bin_pickup button[type="submit"], .cancel-btn, #step_support_text_phone .phn-sup-cancel-btn{
    margin: 0 auto;
    display: block;
    width: 300px;
    padding: 10px 0;
    border: none;
    border-radius: 20px;
    font-size: 43px;
    color: #fff;
    font-weight: 700;
    font-family: inherit;
}
.cancel-btn, #step_support_text_phone .phn-sup-cancel-btn{
   background-color: #C10606; 
}
.three_btn_group{
    margin-top: 3em;
}
.three_btn_group button, .wht-i-need .btn button, #step_support .btn-group button, 
#step_support_text_phone button[type="submit"]{
    padding: 10px 0;
    background-color: #00891A;
    font-size: 43px;
    color: #fff;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    display: block;
    margin: 0 auto;
    width: 300px;
    font-family: inherit;
}
.three_btn_group button, #step_support .btn-group button{
    margin-bottom: 30px;
}
#step_support{
    border: none;
    margin-top: 20px;
}
#step_support_text_phone{
    border: none;
}
.topTitle{
    font-weight: 500;
}
.noTop h3{
    font-size: 32px;
    line-height: 40px;
    margin: 10px 0 30px 0;
    color: #6C6C6C;
}
.topTitle{
    margin-bottom: 0;
}
.no_inputfield p{
    margin-bottom: 10px;
    font-weight: 500;
}
.phone_num{
    border: 1px solid #6C6C6C;
    height: 45px;
    width: 315px;
    margin-bottom: 15px;
    padding: 0 15px;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    color: #6C6C6C;
    font-family: inherit;
}
.phone_num:focus{
    outline: none;
}
#step_support_text_phone button[type="submit"]{
    margin-bottom: 20px;
}



/** Registration page **/
.container{width: 100%;max-width: 1200px;padding: 0 15px;margin: 0 auto;}
.fd-user-register{max-width: 600px;margin: 0 auto;}
.form-group{margin-bottom: 20px;}
.form-group label{width: 100%;text-align: left;display: block;padding-bottom: 8px;}
.form-group label.error{padding-bottom: 0;padding-top: 5px;font-size: 14px;color: #c00;}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea{width: 100%;height: 40px;border: 1px solid #707070;margin-bottom: 0;padding: 4px 10px;font-size: 16px;text-align: left;color: #000;font-family: inherit;}
.form-group textarea{height: 100px;}
.fd-user-register button[type="submit"]{display: inline-block;padding: 14px 30px;font-size: 20px;font-weight: 600;text-transform: uppercase;background-color: #00891A;border: 1px solid #707070;border-radius: 6px;color: #fff;cursor: pointer;font-family: inherit;}
.fd-user-register button[type="submit"]:hover{background-color: #027718}
.error-data{display: inline-block;background-color: rgba(255, 0, 0, 0.2);padding: 10px 20px;border-radius: 6px;font-size: 16px;font-weight: 600;color: #000;text-align: center;margin-bottom: 20px;}


/** No data found **/
.no-data{margin-top: 30px}
.no-data img{max-width: 100px;height: auto;}

/* Button Styles */
.btn-green{display: inline-block;padding: 14px 30px;font-size: 20px;font-weight: 600;text-transform: uppercase;background-color: #00891A;border: 1px solid #707070;border-radius: 6px;color: #fff;text-decoration: none;font-family: inherit;}
.btn-green:hover{background-color: #027718}

.btn-white{display: inline-block;padding: 14px 30px;font-size: 20px;font-weight: 600;text-transform: uppercase;background-color: #4500FF;border: 1px solid #707070;border-radius: 6px;color: #fff;text-decoration: none;font-family: inherit;}
.btn-white:hover{background-color: #fff; color: #4500FF;}

/* Generate Your QR */
.generate-qrcode{max-width: 600px;margin: 0 auto;}
.generate-qrcode button[type="submit"]{display: inline-block;padding: 14px 30px;font-size: 20px;font-weight: 600;text-transform: uppercase;background-color: #00891A;border: 1px solid #707070;border-radius: 6px;color: #fff;cursor: pointer;font-family: inherit;}
.generate-qrcode button[type="submit"]:hover{background-color: #027718}
/*.qrcode_top{display: flex; align-items: center; justify-content: center;}
.qrcode_top .l-side h2{font-size: 62px !important; line-height: 72px !important;margin-bottom: 0; margin-top: 0;}
.qr-code{display: flex; align-items: center;width: 85%;margin: 0 auto;}
table tr.qr-code td.left{width: 57%;}
table tr.qr-code td.right{width: 43%;}
.qrcode-con{max-width: 820px;width: 100%;margin: 2.5em auto 2.5em auto;}
.qr-code{border: 2px solid #989898;margin-bottom: 30px;}
table tr.qr-code td.left svg{width: 95%;}
.sub_title{font-size: 30px; font-weight: 500; line-height: 40px; margin-bottom: 30px;margin-top: 10px; color: #111;padding: 0 10px;}
table tr.qr-code td.right p{font-size: 24px;font-weight: 500;line-height: 34px;margin: 0 0 5px 0;color: #111;}*/
.qr_call{margin: 5px 0;text-align: right;color: #585757;}
.qr_call a{color: #585757;}
.qrcode_top div:first-child{margin-right: 20px;}
.qr-code-second{margin-bottom: 0;}
#generate_qrcode_csv div.form-group label{text-align: center;margin-bottom: 15px;font-size: 22px;}
#generate_qrcode_csv div.form-group{text-align: center;}
#upload_qr_data{width: 200px; font-size: 14px; margin-bottom: 10px;}
#upload_qr_data-error{font-size: 14px !important;}
#generate_qrcode_csv div.form-group span{display: block;margin: 5px 0;font-size: 14px;}
.no-border{border: none !important;}
.idleft{width: 45%;}
.idright{width: 55%;}
.select2-group-wrap{display: flex;justify-content: center;align-items: top;}
.select2-group-wrap > div{width: 30%;padding: 0 20px 5px 0;text-align: left;}
.select2-group-wrap > div:first-child label, .select2-group-wrap > div:nth-child(2) label{width: 150px;}
.select2-group-wrap .select2-container{width: 100% !important;}
.select2-group-wrap > div:last-child{padding-right: 0;}
.select2-group-wrap > div:nth-child(2){width: 40%}
.select2-group-wrap > div:first-child .select2-selection--single, 
.select2-group-wrap > div:last-child .select2-selection--single{height: 32px;}

html{position: relative;}
.loader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 110%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    bottom: 0;
    visibility: hidden;
    flex-wrap: wrap;
    flex-direction: column;
}
.loader img{
    width: 100px;
}
.loader p{
    font-size: 52px;
    line-height: 62px;
    color: #fff;
    text-align: center;
    width: 100%;
    font-weight: 700;
}
.reg-error{
    text-align: center;
    margin-top: 60px;
}
.reg-error img{
    width: 100px;
    height: 100px;
}
.user-data table tr td{
    padding: 5px;
}
.user-data h2{text-align: center;}
.user-data table{margin: 0 auto 0 34%;}
/*****************responsive*********************/

@media(max-width: 767px){
    .wht-i-need .btn p{ font-size: 14px;}
    .qrcode_top{flex-wrap: wrap;}
    .qrcode_top div{width: 100%; text-align: center;}
    .qrcode_top div:first-child{margin-right: 0;}
    .qrcode_top .l-side h2{font-size: 28px !important;line-height: 38px !important;text-align: center;margin-bottom: 5px;}
    .sub_title{font-size: 24px;line-height: 34px;text-align: center;}
    .qr-code{width: 90%; text-align: center;flex-wrap: wrap;padding-bottom: 20px;}
    .qr-code div{width: 100% !important;}
    .qr_call{width: 90%; text-align: center;}
    .loader img{width: 60px;}
    .loader p{font-size: 38px;line-height: 48px;}
    .user-data table{margin: 0;}
    .user-data table tr td:first-child{width: 30%;}
    .user-data table tr td:last-child{width: 70%;}
    .select2-group-wrap{flex-wrap: wrap;}
    .select2-group-wrap > div, .select2-group-wrap > div:nth-child(2), 
    .select2-group-wrap > div:first-child label, .select2-group-wrap > div:nth-child(2) label{width: 100%;}
    .select2-group-wrap > div, .select2-group-wrap > div:nth-child(2){padding: 0 0 5px 0;}
}