@media only screen and (max-width: 380px){ 
    #box_show {background-color: #f8cb43 !important; box-shadow: rgba(0, 0, 0, 0.5) 6px 6px 7px;}
    #background {background-image:none; background-color:#0c0444; background-size:cover;background-position-x:right;background-repeat:no-repeat;justify-content:left !important; }
    .submit_btn{min-width:60% !important;}
    .Submit_prevbtn{min-width:30% !important;}
    .summary_box{width:100% !important;}
    .site_summary_box{width:100% !important;}
    .package_summary_box{width:100% !important;display: block !important;}
    .package_name_box{width:100% !important;margin-bottom: 20px !important;}
    .package_quantity_box{width:100% !important;}
}

@media only screen and (min-width: 380px) and (max-width: 640px){
    #box_show {background-color: #f8cb43 !important; box-shadow: rgba(0, 0, 0, 0.5) 6px 6px 7px;}  
    #background {background-image:none; background-color:#0c0444; background-size:cover;background-position-x:right;background-repeat:no-repeat;justify-content:left !important; }
    .submit_btn{min-width:50% !important;}
    .Submit_prevbtn{min-width:40% !important;}
    .summary_box{width:100% !important;}
    .site_summary_box{width:100% !important;}
    .package_summary_box{width:100% !important;display: block !important;}
    .package_name_box{width:100% !important;margin-bottom: 20px !important;}
    .package_quantity_box{width:100% !important;}
}

@media only screen and (min-width: 640px) and (max-width: 780px){ 
    #box_show {background-color: #f8cb43 !important; box-shadow: rgba(0, 0, 0, 0.5) 6px 6px 7px;}
    #background {background-image:none; background-color:#0c0444; background-size:cover;background-position-x:right;background-repeat:no-repeat;justify-content:left !important; }
    #logo_image {margin-top:50px;}
    .summary_box{width:50% !important;}
    .site_summary_box{width:50% !important;}
    .package_summary_box{width:100% !important;}
    .package_name_box{width:50% !important;}
    .package_quantity_box{width:50% !important;}
}

@media only screen and (min-width: 780px) and (max-width: 1059.99px){
    #box_show {background-color: #f8cb43 !important; box-shadow: rgba(0, 0, 0, 0.5) 6px 6px 7px;}
    #background { background-image:none; background-color:#0c0444; background-size:cover;background-position-x:right;background-repeat:no-repeat;justify-content:left !important; }
    #logo_image {margin-top:50px;}
    .summary_box{width:50% !important;}
    .site_summary_box{width:50% !important;}
    .package_summary_box{width:100% !important;}
    .package_name_box{width:50% !important;}
    .package_quantity_box{width:50% !important;}
}


@media only screen and (min-width: 1060px) and (max-width: 1100px){
    #logo_image {top:13%;position:absolute;left:13.5%;}
    #box_show {background-color:#f8cb43 !important; box-shadow:rgba(0, 0, 0, 0.5) 6px 6px 7px; position:absolute; left:0%; transform:scale(0.8); top:210px;}
}

@media only screen and (min-width: 1100px) and (max-width: 1300px){
    #logo_image {top:13%;position:absolute;left:17.5%;}
    #box_show {background-color:#f8cb43 !important; box-shadow:rgba(0, 0, 0, 0.5) 6px 6px 7px; position:absolute; left:5%; transform:scale(0.8); top:210px;}
}

@media only screen and (min-width: 1300px) and (max-width: 1360px){
    #logo_image {top:8%;position:absolute;left:15%;}
    #box_show {background-color:#f8cb43 !important; box-shadow:rgba(0, 0, 0, 0.5) 6px 6px 7px; position:absolute; left:5%; transform:scale(0.8); top:180px;}
}

@media only screen and (min-width: 1360px) and (max-width: 1540px){
    #logo_image {top:8%;position:absolute;left:15%;}
    #box_show {background-color:#f8cb43 !important; box-shadow:rgba(0, 0, 0, 0.5) 6px 6px 7px; position:absolute; left:5%; transform:scale(0.8); top:180px;}
}

@media only screen and (min-width: 1540px){
    #logo_image {top:8%;position:absolute;left:11.5%;}
    #box_show {background-color:#f8cb43 !important; box-shadow:rgba(0, 0, 0, 0.5) 6px 6px 7px; position:absolute; left:5%; transform:scale(1.0); top:230px;}
}


@media only screen and (max-width: 767.98px){
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs > li > a.active, .nav-tabs > 
    li > a.active:hover, .nav-tabs > li > a.active:focus {
        border-bottom: 4px solid #ffffff;
    }
}


.modal-lg, .modal-xl{max-width: 100% !important;}
.nav-item_1 {background-color: transparent; width:50%; font-size: 20px; font-weight:bold;}
.nav-tabs {background-color: #f8cb43; border:none;}
.nav-tabs > li > a {color:#ffffff;}
.nav-item {background-color:#ffffff;width:25%;}
.nav-link.active {background-color: #f8cb43 !important; border:none; border-bottom: 4px solid #ffffff;}
.nav-link.dot-nav.active {background-color:#c8a90e !important;text-decoration: none;width: 20px;height: 20px;border-radius: 100%;padding: 0;margin:0 auto;text-align: center;position: relative;}
.nav-link.dot-nav {pointer-events: none;background-color: #c0c0c0 !important; border:none;text-decoration: none;width: 15px;height: 15px;border-radius: 100%;padding: 0;margin:0 auto;text-align: center;position: relative;}
.modal_tab.nav.nav-tabs {background-color:#ffffff; text-align:center; margin:0 auto;width:30%;display:flex;flex-direction:row; align-items:center;}
.nav-item.text-center {width:10%;text-align:center; margin:0 auto; cursor:pointer;}
.form-control.signup_modal {border:none; border-radius:10px; box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 3px; margin-bottom:12px;font-size:16px !important;}
.form-group {margin-bottom: 0px;background-color:#ffffff;;}
.table_td {background-color:#c8a90e;color:#fff;font-size:18px; width:20%; text-align:center; border:none; box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;}
.table-bordered.td {border:none !important;}
.modal {--scrollbarBG: #000; --thumbBG: #fff; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG);}
.modal::-webkit-scrollbar { width: 11px; }
.modal::-webkit-scrollbar-track { background: var(--scrollbarBG); }
.modal::-webkit-scrollbar-thumb { background-color: var(--thumbBG); border-radius: 6px; border: 3px solid var(--scrollbarBG);}
.form_mb{margin-bottom:20px;}
.form_mt{margin-top:30px;}
/* password */
#toggler1 {position: absolute;right: 40px;top: 30%;cursor: pointer;transform: scale(1.8);color:#444;}
#toggler2 {position: absolute;right: 40px;top: 30%;cursor: pointer;transform: scale(1.8);color:#444;}
/* package selection */
.package_title{font-size:2em;font-weight:700;}
.package_select{display:flex;justify-content:center;width:100%;padding:20px 0px;background-color:#c8a90e}
.owl-nav{display: flex;justify-content: space-evenly;margin-top: -10px !important;}
.owl-prev{font-size:40px !important;width: 30px;}
.owl-next{font-size:40px !important;width: 30px;}
.owl-item{transform: scale(0.9) !important;}

/* image upload */
.tab_5{width:100%;display:flex;margin-bottom:80px;justify-content:space-evenly;align-items: center;flex-direction: row;}
.box{display: block; width:100%; height:350px; margin:10px; background-color: white; border-radius: 5px; box-shadow: rgb(0, 0, 0, 50%) 0px 0px 10px; transition: all 0.3s cubic-bezier(.25,.8,.25,1); overflow: hidden;}
.image_preview{height: 275px;width: 100%;position: relative;overflow: hidden; background-size: contain; background-repeat: no-repeat; background-position: center;}
.image_preview::after {content: "Photo Preview";margin:50px;position: relative;font-size: 2em;color: #ddd;top:40%;z-index: 0;} 
.upload_options {position: relative;width:100%;height: 75px;background-color:#c8a90e;cursor: pointer;overflow: hidden;text-align: center;}
.upload_options .span {display: inline-block;width: 100%;height: 100%;overflow: hidden;vertical-align: middle;text-align: center;}
.input_label{display: flex;align-items: center;width: 100%;height: 100%;font-weight: 400;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;overflow: hidden;}
.input_label::after{content:'add';font-family: 'Material Icons';position: absolute;font-size: 2.5rem;color: #f8f9f9;left: calc(50% - 1.25rem);z-index: 0;}
.image_upload {margin-left:50px;width: 0.1px;height: 0.1px;;overflow: hidden;position: absolute;z-index: -1;}


/* package input */
.tab_on_6{width:100%;display:flex;margin-bottom:80px;justify-content:space-evenly;align-items: center;flex-direction: row;}
.input_top{width:100%;display:block;margin:0 auto;text-align:left;padding:10px 20px;}
.input_bottom{width:100%;text-align:left;padding:10px 20px;}
.quantity_box{ width:100%;text-align:left;}
.description_box{width:100%;margin-bottom:20px;text-align:left;}
.add_opacity{opacity:0.5;}

/* summary review */
.summary_logo{width:100%;padding:10px 20px;display: none;}
.summary_container_top{width:100%;padding:10px 20px;}
.summary_container_bottom{width:100%;height:fit-content;padding:10px 20px;display: flex;flex-flow: row wrap;align-content: flex-start;}
.summary_title{font-size:1.6em;font-weight:600;}
.summary_box{width:25%;height:min-content;display: block;margin-bottom:20px}
.site_summary_box{width:25%;height:min-content;display: block;margin-bottom:20px}
.package_summary_box{width:100%;height:min-content;display: flex;margin-bottom:20px}
.package_name_box{width:25%;height:min-content;display: block;}
.package_quantity_box{width:25%;height:min-content;display: block;}
.site_title{width:100%;font-size:16px;font-weight:500;margin-bottom:15px;}
.selected_package_title{width:100%;font-size:16px;font-weight:500;margin-bottom:15px;}
.content_data{font-size:12px;font-weight:500;color:#808080;width: 100%;}
.content_title{font-size:14px;font-weight:500;width: 100%;margin-bottom:10px;}
.site_container{width:100%;height:fit-content;display: block;}
.site_content{width:100%;height:fit-content;display: flex !important;flex-flow: row wrap;align-content: flex-start;}
.package_content{width:100%;height:fit-content;display: flex !important;flex-flow: row wrap;align-content: flex-start;}
@media only screen and(min-width: 768px) {
    .form-control.signup_modal{border:none; border-radius:10px; box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;}
    .form-group{margin-bottom: 1rem;background-color:#ffffff;}
    .table.table-bordered{width:100%;padding:10px;background-color:#ffffff;color:#000000;border:none;}
    .table_tr_td{border:none; padding:0px;}
}

@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    body * {visibility:hidden;width:100%;}
    #printSection, #printSection * {visibility:visible;}
    #printSection {position:absolute;left:0;top:0;}
    .summary_logo{width:100%;padding:10px 20px;display: flex;justify-content: center;}
    .summary_container_top{width:100%;padding:10px 20px;}
    .summary_container_bottom{width:100%;height:fit-content;padding:10px 20px;display: flex;flex-flow: row wrap;align-content: flex-start;}
    .summary_title{font-size:1.6em;font-weight:600;}
    .summary_box{width:25%;height:min-content;display: block;margin-bottom:20px}
    .site_summary_box{width:25%;height:min-content;display: block;margin-bottom:20px}
    .package_summary_box{width:100%;height:min-content;display: flex;margin-bottom:20px}
    .package_name_box{width:25%;height:min-content;display: block;}
    .package_quantity_box{width:25%;height:min-content;display: block;}
    .site_title{width:100%;font-size:16px;font-weight:500;margin-bottom:15px;}
    .selected_package_title{width:100%;font-size:16px;font-weight:500;margin-bottom:15px;}
    .content_data{font-size:12px;font-weight:500;color:#808080;width: 100%;}
    .content_title{font-size:14px;font-weight:500;width: 100%;margin-bottom:10px;}
    .site_container{width:100%;height:fit-content;display: block;}
    .site_content{width:100%;height:fit-content;display: flex !important;flex-flow: row wrap;align-content: flex-start;}
    .package_content{width:100%;height:fit-content;display: flex !important;flex-flow: row wrap;align-content: flex-start;}
}