﻿@media screen and (max-width: 767px){
    body {
        min-width: 500px;
        /*min-width: 767px;*/
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        overflow-x: hidden;
    }

    body, html {
        /*overflow-x: hidden;*/ /* Prevent horizontal scrolling */
        width: 100%; /* Ensure the body takes up 100% of the screen width */
    }

    .container {
        width: 100%;
        margin-top: -11px;
        padding: 0 15px;
    }

    .header-area {
        width: 100%;
        padding: 10px 0; /* Add some padding for spacing */
        text-align: center;
    }

    /* Ensure the header's content (logo and title) are centered */
    .main-nav .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    /* Logo Image Styling */
    .main-nav .logo img {
        /*display: block;
        margin-left: auto;
        margin-right: auto;*/
        width: 50%; /* Adjust logo size to 50% */
        max-width: 170px; /* Max width to avoid becoming too large */
        float: left;
        margin-left: 35px;
    }

    nav.main-nav h5 {
        /*display: none;*/
        float: left !important;
        margin-top: 8px;
    }

    .section-heading h2 {
        text-align: left !important;
        font-size: 37px;
        margin-top: 37px;
    }

    .download-text{
        margin-top: 0 !important;
    }

    /*.download-text p{
        font-size: 12px;
    }*/

    .keywordpart {
        margin-left: auto;
        margin-right: auto;
        float: none;
        width: 100%; /* Make sure this is 100% width */
    }

    /* Adjust the input field inside the keyword part */
    .keywordpart input {
        width: 100%; /* Full width of its container */
        max-width: 100%; /* Ensure it doesn't exceed the container's width */
        padding: 8px 15px; /* Adjust padding for better usability */
        /*font-size: 14px;*/ /* Adjust font size */
        /*border-radius: 5px;*/
        border: 1px solid #ddd;
        box-sizing: border-box; /* Ensure padding and border are included in the width calculation */
    }

    /* Make the select box 100% width on smaller screens */
    span.select2.select2-container.select2-container--default {
        width: 100% !important; /* Ensure the select box is responsive */
        max-width: 100%; /* Prevent it from exceeding the screen size */
    }

    .catpart {
        margin-right: 0;
        margin-bottom: 14px;
    }

    input.search_input {
        width: 100%; /* Ensure the input takes up the full width */
        /*font-size: 15px !important;*/
        /*border-radius: 5px !important;*/
        padding: 8px 15px; /* Adjust padding to fit better on small screens */
        box-sizing: border-box;
    }

    select#category {
        /*border-radius: 5px !important;*/
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        text-align: left;
    }

    .select2-container .select2-selection--single {
        /*border-radius: 5px !important;*/
    }

    li.select2-results__option {
        text-align: left;
        /*font-size: 14px;*/
    }

    .fancy-button {
        width: 100%; /* Make the button full width */
        max-width: 100%; /* Ensure button does not exceed the container's width */
        /*border-radius: 5px;*/
        padding: 10px; /* Add padding to the button */
        font-size: 16px; /* Increase font size for readability */
        display: block; /* Ensures the button takes up the available width */
    }

    .col-lg-12.footer_cad {
        margin-top: -32px;
    }

    footer p {
        font-size: 13px;
    }


    .floating-block {
        padding: 10px 12px; /* Adjust padding on small screens */
    }

    .floating-content {
        padding: 0; /* Optional: Adjust the padding for content inside the floating block */
    }

    .col-md-7, .col-md-5 {
        width: 100%; /* Allow columns to take full width on small screens */
    }

    .button_download {
        width: 100%; /* Make button take full width */
        text-align: center; /* Center the button */
    }

    .btn {
        /*border-radius: 5px;*/
        font-size: 16px;
    }

    button.btn.btn-secondary.send-request-download {
        position: absolute;
        right: 16px;
    }

    /* Ensure form is responsive */
    .download-search-form form {
        width: 100%; /* Ensure form takes up the full width */
    }

    /* Prevent horizontal scrolling in small screen devices */
    .download-search-form, .keywordpart, .catpart {
        width: 100%; /* Force all containers to use full width */
        max-width: 100%; /* Ensure no overflow */
        /*overflow-x: hidden;*/ /* Hide horizontal scroll */
        /*font-size: 14px;*/
    }

    /*.keywordpart input{
        font-size: 14px !important;
    }*/

    /* For Select2 styling */
    .select2-container {
        width: 100% !important;
    }

    .searchbar {
        width: 100%;
    }

    /* Make sure the search bar takes full width */
    .searchbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-x: hidden;
    }

    .header-area hr {
        width: 90%;
    }

    .footer hr {
        width: 95%;
    }

    .search-result nav {
        margin-bottom: 44px;
    }

    .floating-block h5 {
        /*font-size: 12px;*/
        margin-top: 12px;
    }

    /*.table > thead {
        font-size: 14px;
    }

    .table > tbody {
        font-size: 14px;
    }*/

    input.datacheck {
        width: 15px !important;
        height: 15px !important;
    }

    .custom-pagination .page-item .page-link {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    /* Table wrapper for scrolling */
    .table-wrapper {
        width: 100%; /* Full width */
        overflow-x: unset !important;  
        margin-top: 0px !important;
        margin-bottom: 13px;
        margin-left:auto;
        margin-right: auto;
    }

    /* Make the table responsive */
    .table {
        width: 100%; /* Ensure the table takes full width */
        table-layout: fixed; /* Fix the table layout */
        min-width: 440px; /* Make the table wider than the screen to trigger scrolling */
    }

    /* Table header style */
    .table thead {
        background-color: #17a2b8; /* Blue background */
        color: white; /* White text */
    }

    th, td {
        padding: 8px; /* Add padding to table cells */
        text-align: left; /* Align text to the left for better readability */
    }

    /* Make sure cells inside the table don't overflow */
    th, td {
        word-wrap: break-word;
        overflow: hidden;
    }

    #downloadForm{
        text-align: left;
    }

    /*#downloadForm h5{
        font-size: 16px;
    }*/

    .address_symbol{
        margin-left: -13px !important;
    }

    .address_dash {
        margin-left: -19px !important;
    }

/*    #postalcode1{
        width: 80% !important;
    }*/

    .addressdetails .prefecture{
        margin-bottom: 13px;
    }

/*    #postalcode2 {
        width: 65% !important;
    }*/

    select#purposetodownload {
        width: 100%; /* Full width */
        padding: 5px 8px; /* Smaller padding for compact size */
        border-radius: 5px; /* Rounded corners */
        box-sizing: border-box; /* Include padding and border in width */
        border: 1px solid #ddd; /* Light border color */
        /*font-size: 14px;*/
    }

    /* Optional: Adjust the option elements' padding and font size */
    select#purposetodownload option {
        padding: 5px 8px; /* Reduce padding of options */
        /*font-size: 12px;*/ /* Smaller font size for options */
        width: 50%;
    }

    .form-control.is-valid, .was-validated .form-control:valid {
        background-image: none;
        padding-right: unset;
    }

    .col-lg-12.footer_cad p {
        font-size: 15px;
    }

    /*  label.col-form-label {
        font-size: 14px;
    }*/

    label.col-form-label input {
        font-size: 14px;
    }

    /*#downloadForm input, #downloadForm input:focus {
        font-size: 14px;
    }*/

    /*label.form-check-label {
        font-size: 14px !important;
    }*/

   /* button.btn.btn-secondary.download_form_close {
        font-size: 14px;
    }

    button#sendRequest {
        font-size: 14px;
    }*/

    /*.terms-and-conditions ul li {
        font-size: 12px;
    }*/

    .search-result p {
        font-size: 14px;
        text-align: left;
    }

    .search-result h5 {
        text-align: left;
    }


    #bulkDownload {
        font-size: 14px;
    }

    .accordion-card {
        text-align: left;
    }

    .download_header {
        margin-top: 120px !important;
        text-align: left;
    }

    h5 label {
        font-size: 16px;
    }
   
    h3 label{
        font-size: 14px;
    }

    .floating-content {
        margin-top: -14px;
    }

    /*button#searchForm {
        font-size: 14px;
    }*/

    .modal-dialog {
        max-width: 800px;
    }

    .download_page_button {
        margin-top: -91px !important;
        text-align: left !important;
        /*margin-right: 142px !important;*/
    }

    .download_head h2 {
        margin-left: -9px;
        min-width: 500px;
    }


    table.table > thead > tr > th:nth-child(2) {
        width: unset !important;
    }

    table.table > tbody > tr > td:nth-child(2) {
        text-align: center;
    }

    .error_page {
        margin-top: 50px !important;
    }

  
}

@media screen and (min-width: 768px) {
    .modal-lg, .modal-xl {
        max-width: 800px;
    }
}


/*@media screen and (min-width: 768px) and (max-width: 850px) {
    .modal-lg, .modal-xl {
        max-width: 700px;
    }

    #downloadForm h5 {
        font-size: 19px;
    }
}

@media screen and (min-width: 576px) and (max-width: 730px) {
    .modal-lg, .modal-xl {
        max-width: 550px;
    }

  
}*/


    /*@media screen and (max-width: 360px) {

    .section-heading h2 {
        font-size: 20px;
    }

    #cityward, #prefecture, #apartmentbuilding{
        font-size: 13px;
    }

    .address_dash{
        display: none;
    }

    #postalcode1 {
        width: 92% !important;
    }

    #postalcode2 {
        width: 70% !important;
        margin-left: 154px;
        margin-top: -47px;
    }

    .col-lg-12.footer_cad p {
        font-size: 10px;
    }

    input#postalcode2 {
        margin-left: 181px;
    }

    .search-result p {
        font-size: 11px;
    }
    
}

@media screen and (min-width: 361px) and (max-width: 409px){
    .search-result p {
        font-size: 12px;
    }
}*/

    /*@media screen and (max-width: 1000px) {
    .floating_download_btn {
        text-align: right;
        margin-right: 27px;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1040px) {
    .button_download {
        margin-top: -10px;
    }
    .floating-content h5 {
        margin-top: -6px !important;
    }

    .button_download.floating_download_btn {
        float: right;
        margin-right: 32px;
    }
}

@media screen and (min-width: 768px) and (max-width: 999px){
    .floating-content {
        margin-left: 77px;
    }
    
}

@media screen and (min-width: 992px) and (max-width:999px){
    .floating-block h5 {
        margin-left: -176px;
    }
}


@media screen and (max-width: 823px) {
    .floating-content h5 {
        font-size: 13px;
    }

    #bulkDownload {
        font-size: 14px;
    }

    .floating-content {
        margin-left: 33px;
    }
}

@media screen and (max-width: 768px) {
    .floating-block .row {
        flex-direction: unset !important;
    }

    .floating-content {
        margin-left: -7px;
    }
}

@media (max-width: 767px) {
    .container {
        max-width: 720px;
    }

    .floating-content {
        margin-top: -14px;
    }
}

@media screen and (min-width: 575px) and (max-width: 991px) {
    .address_symbol {
        margin-left: 2px !important;
    }

    .form-control.is-valid, .was-validated .form-control:valid {
        background-image: none;
        padding-right: unset;
    }

    #postalcode1 {
        width: 80% !important;
    }

    .address_dash {
        margin-left: -9px !important;
    }

    #postalcode2 {
        width: 80% !important;
    }
}

@media screen and (min-width: 800px) and (max-width: 991px){
    .floating_download_btn {
        margin-right: 99px;
    }
}

@media screen and (min-width: 576px) and (max-width: 599px) {
    .download_page_button {
        margin-top: -93px !important;
        text-align: center !important;
        margin-right: 142px !important;
    }
}


@media screen and (max-width: 575px){
    .download_page_button {
        margin-top: -117px !important;
        text-align: center !important;
        margin-right: 0 !important;
    }
}

@media screen and (min-width: 600px) and (max-width: 991px){
    .section-heading h2 {
        font-size: 30px;
    }

    .table > thead{
        font-size: 14px;
    }

    .table > tbody {
        font-size: 14px;
    }
}*/