/* Nav Bar */
.con-navbar {
    display: flex;
    padding: 2rem 4em;
    border-bottom: 1px solid gray;
}

.con-navbar .con-navleft img {
    width: 9rem;
    height: 3rem;
}

.con-navbar .con-navright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.list-items {
    padding: 0 1rem;
}

.first-item {
    border-right: 1px solid;
}

.mobile {
    display: none;
}

/* Toggle Tabs */
.toggle-tabs {
    text-align: center;
}

.toggle-tabs ul.nav.nav-tabs {
    width: 65vw;
}

.toggle-tabs ul.nav.nav-tabs li {
    position: relative;
    pointer-events: none;
}

.nav-tabs>li>a {
    font-size: 1.2rem;
}

.toggle-tabs ul li i {
    position: absolute;
    top: -10px;
    right: -15px;
    font-size: 6.1rem;
    color: #CCCCCC;
    z-index: 999;
    filter: drop-shadow(6px 0 0 white);
}

.toggle-tabs ul li.active i {
    color: var(--contractor-primary);
}

.toggle-tabs .nav-tabs {
    border: unset;
}

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

input,
input[type=text],
input[type=password],
input[type=date] {
    border: 0.5px solid;
    padding: 1rem 0.5rem;
    text-align: left;
}

/* Tabs contents */
/* First Tabs */
.first-tab,
.second-tab,
.third-tab {
    width: 65vw;
}

.title {
    margin: 1rem 0;
}

.title h1 {
    padding: 1rem;
    background: var(--div-background);
}

.title .desc {
    font-size: 14px;
    margin: 2rem 0;
}

.title .email-input {
    display: flex;
    align-items: center;
}

.opening-rules .rules-details {
    border: 1px solid;
    height: 30rem;
    overflow: scroll;
}

.title .email-input h3 {
    font-weight: bold;
    margin-right: 2rem;
}

.title .email-input input {
    padding: 1rem 0;
    flex: 1;
}


.link-rules {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
}

.link-rules a {
    color: var(--body-color);
    text-decoration: underline;
}

.link-rules a:hover {
    color: var(--contractor-primary);
}

.agree {
    background: var(--div-background);
    height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}

.submit-button {
    display: flex;
    justify-content: center; 
}

.btn-back {
    margin-right: 10px;
}

.submit-button button {

    width: 30rem;
    padding: 1.5rem;
    font-size: 2rem;
    border-radius: 1rem;
    background: var(--contractor-primary);
}

/* Tab 2 */
.second-tab h1 {
    padding: 1rem;
    background: var(--div-background);
    margin: 1rem 0 2rem 0;
}

.second-tab h3,
.second-tab p {
    padding: 0 1rem;
    margin: 1rem 0;
}

.second-tab .registration-notes {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--div-background);
    padding: 1rem;
}

.second-tab .second-submit-button {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.second-tab .second-submit-button button {
    width: 30rem;
    background: none;
    color: black !important;
    border: 1px solid;
    padding: 1.5rem;
    border-radius: 1rem;
    font-size: 2rem;
}

/* Tab 3 */
.register-title {
    margin: 1rem 0;
}

.register-title h1 {
    padding: 1rem;
    background: var(--div-background);
}
.register-desc {
    margin-top: 2rem;
    padding: 1rem;
}

.register-desc-note {
    padding-top: 1rem;
    display: flex;
    align-items: center;
    color: red;
}

table {
    margin: 3rem 0;
}

table textarea {
    resize: none;
    height: 3em;
    width: 20em;
    vertical-align: middle;
    padding: 0.5rem;
}

table, tr {
    width: 100%;
}

table tr {
    border: 2px solid black;
}

table .label {
    width: 20%;
}

.table-rule-detail, td {
    border: none;
}

tr td p .fa-asterisk {
    font-size: 1rem;
    color: red;
}

td {
    vertical-align: middle;
    /* border: 1px solid var(--contractor-primary); */
}

.text-area-input {
    border-left: 2px solid black;
    display: flex;
    padding: 0.5rem;
    align-items: center;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: white !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid black;
    border-radius: unset;
    cursor: text;
    padding: 0.3rem; 
}

.onebox-input .text-area-input input,
.onebox-input .text-area-input textarea {
    width: 55%;
}

.gmail textarea {
    width: 10em;
}

.gmail p {
    margin: 0 1rem;
}

.telephone input,
.postcode input {
    width: 7em;
}

.telephone p {
    margin: 0 0.5rem;
}

.postcode p,
.postcode button {
    cursor: pointer;
    margin: 0 1rem;
}

.postcode button {
    padding: 1rem 3rem;
    border: unset;
    border-radius: 0.5rem;
    background: var(--contractor-primary);
    color: white;
}


.representative label {
    margin-left: 1rem;
}


.business-hours p {
    margin: 0 1rem;
}

.founding-date input,
.establishment-date input {
    width: 5em;
}

.founding-date label {
    margin: 0 1rem;
}

.establishment-date label {
    margin: 0 1rem;
}

.qualifications textarea {
    height: 5em;
}

.license textarea,
.certifications textarea,
.regis-notification textarea,
.payment-method textarea {
    height: 9em;
}

.onebox-input .vendors-comment textarea
{
    /* width: 100%; */
    height: 15em;
}

.form-submit {
    cursor: pointer;
    padding: 1.2rem 4rem;
    border: unset;
    border-radius: 0.5rem;
    background: var(--contractor-primary);
    width: 28rem;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 3rem;
}

.form-button {
    text-align: center;
}

.form-mobile-view {
    display: none;
}

.yago-info {
    margin-left: 5px;
}

.popover {
    background-color: #d4edda;
    border-color: #c3e6cb;
    position: relative;
    padding: .75rem 1.25rem;
    border-radius: .25rem;
}

.nav-tabs {
    display: flex;
}

.nav-tabs img {
    width: 100%;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0 0.2rem;}
  
    .tooltip .tooltip_text {
        visibility: hidden;
        width: 422px;
        background-color: white;
        text-align: left;
        border-radius: 6px;
        padding: 5px 0;
        /* top: 0; */
        right: 0px;
        border: 1px solid;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
  
    .tooltip.active .tooltip_text {
        visibility: visible;}
    
    .popover{
        width: 85%;
        left: 10%;
        background-color: white;
        text-align: left;
        border-radius: 6px;
        padding: 5px 0;
        border: 1px solid;
        z-index: 1;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
        .popover h3{
            font-size: 1.2rem;}


.prefecture-check-all {
    width: 10rem;
    font-size: 1rem;
    margin-left: 10px;
    border: none;
    color: white;
    border-radius: 5px;
    background: var(--contractor-primary);
    cursor: pointer;
    padding: 4px;
}

@media (max-aspect-ratio: 10/9) {
    .nav{
        margin-top: 3.2rem;
    }

    .desktop {
        display: none;
    }
    
    .mobile {
        display: block;
    }

    .con-navbar .con-navright {
        display: none;
    }
    .toggle-tabs ul.nav.nav-tabs,
    .first-tab, .second-tab, .third-tab {
        width: 100%;
    }

    /* Tab 1 */
    .title .email-input {
        flex-direction: column;
    }
    .title .email-input h3,
    .title .email-input input {
        width: 100%;
        margin: unset;
        padding: 1rem 0;
    }
    .title .email-input h3 {
        background: var(--highlight-box);
    }
    .link-rules a {
        font-size: 1.2rem;
    }
    .agree span {
        font-size: 1rem;
    }


    /* Tab 3 */
    .form-pc-view {
        display: none;
    }
    .form-mobile-view {
        display: flex;
        flex-direction: column;
    }
    .form-first-part,
    .form-second-part,
    .form-third-part,
    .form-fourth-part,
    .form-fifth-part {
        margin: 1rem;
    }

    .first-label,
    .second-label,
    .third-label,
    .fourth-label,
    .fifth-label {
        padding: 1rem;
        background: var(--contractor-primary);
        color: #fff;
    }
    .first-content-items,
    .second-content-items,
    .third-content-items,
    .fourth-content-items,
    .fifth-content-items {
        display: flex;
        flex-direction: column;
    }
    .first-content-items label,
    .second-content-items label,
    .third-content-items label,
    .fourth-content-items label,
    .fifth-content-items label {
        margin-top: 1rem;
        padding: 0.3rem 1rem;
    }
    .first-content-items label span,
    .second-content-items label span,
    .third-content-items label span,
    .fourth-content-items label span,
    .fifth-content-items label span {
        color: red;
    }

    .tel-number,
    .post-code-number {
        display: flex;
    }
    .tel-number {
        align-items: center;
    }
    .post-code-number .number-area {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex: 1;
    }
    .post-code-number .number-area input {
        width: calc(100%/3);
        /* margin: 0 1rem; */
    }
    .post-code-number button {
        border: unset;
        width: calc(100%/3);
        border-radius: 0.5rem;
        background: var(--contractor-primary);
        color: white;
    }
    .insurance textarea,
    .qualifications textarea,
    .license textarea,
    .various-identifications textarea,
    .registration-notification textarea {
        border: 0.5px solid;
        height: 6rem;
    }
    .comment textarea {
        height: 9rem;
        border: 0.5px solid;
    }

    .submit-button button,
    .second-tab .second-submit-button button,
    .form-mobile-view .form-submit {
        width: calc(100vw/2.5);
        padding: 0.5rem 0;
        font-size: 1.7rem;
        border-radius: 1rem;
    }
    .payment select {
        width: 100%;
    }

    .third-content-items .label{
        margin-top: 1rem;
        padding: 0.3rem 1rem;
    }
    .third-content-items .label p {
        font-size: 1.3rem;
        font-weight: 500;
    }
    .third-content-items .label span{
        color: red;
    }

    .popover {
        position: absolute !important;
        top: 674px !important;
        left: 20px !important;
    }
    
    .prefecture-select-all {
        display: flex;
        align-items: center;
    }
    
    .prefecture-select-all button {
        height: 4rem;
    }
}