.main-form {
    position: relative;
    height: 37em;
    width: 98%;
    box-shadow: 1px 3px 8px 1px #808080;
    margin: 1em auto;
    border-radius: .6em;
    text-align: center;
}

.signup-form-header-data {
    padding-top: .9em;
    user-select: none;
}

.signup-form-header {
    font-size: 1.5em;
    font-weight: 900;
    color: var(--forecolor1);
}

.signup-form-caution {
    font-size: .85em;
    color: #055b36;
}

.signup-form-tabs {
    display: flex;
    font-weight: bold;
    color: #3eb0fb;
    justify-content: space-between;
    background: #22303a;
    white-space: nowrap;
    user-select: none;
}

.signup-form-tab {
    vertical-align: top;
    width: 50%;
    padding: .25em 0;
    cursor: pointer;
    text-align: center;
}

    .signup-form-tab:first-child {
        color: #22303a;
        background: #3eb0fb;
    }

    .signup-form-tab:hover {
        color: white;
    }

.form-contents {
    position: relative;
    width: 100%;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    text-align: left;
    position: absolute;
    bottom: 0em;
    width: 100%;
    user-select: none;
    white-space: nowrap;
    padding: 0.75em 1em;
}

.form-btn {
    text-align: center;
    font-size: 1.25em;
    width: 9em;
    background: linear-gradient(30deg,#119af3 , #22303a);
    color: white;
    cursor: pointer;
    padding: .1em;
    border-radius: 1em;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

    .form-btn:hover, .form-btn:checked {
        background: linear-gradient(30deg, #22303a, #119af3);
        transform:scale(1.02);
    }

.signup-content {
    width: 100%;
    height: 100%;
    display: flex;
    white-space: nowrap;
}

.control-content {
    padding: 2em 0.5em;
    width: 30%;
    text-align: center;
}

    .control-content:nth-child(2) {
        width: 20%;
    }

    .control-content:last-child {
        width: 50%;
    }

.txt-block {
    position: relative;
    margin: auto;
    width: fit-content;
    margin-bottom: 1em;
}

.txt-block-section {
    text-align: right;
}

    .txt-block-section:last-child {
        position: absolute;
        bottom: -1.5em;
        z-index: 10;
    }



.branch-Cflag {
    height: .9em;
    transform: translateY(2px);
    margin-right: .75em;
}

.txt-note {
    display: none;
}
.txt-block:hover .txt-note {
    display: block;
}

:root {
    --opjwidth: 16em;
}

input, select, textarea {
    text-align: right;
    display: block;
    outline: none;
    width: var(--opjwidth);
    border: 1px solid transparent;
    border-bottom-color: #22303a;
    transition: 1s;
    border-radius: 2em;
    padding: .2em .85em;
    font-size: 1em;
}

    input:focus, select:focus, textarea:focus {
        border-bottom-color: #3eb0fb;
        border-radius: 0;
    }

    input:hover, select:hover, textarea:hover {
        border-bottom-color: #3eb0fb;
    }

#map input {
    text-align: unset;
    display: unset;
    outline: unset;
    width: unset;
    border: unset;
    border-bottom-color: unset;
    border-radius: unset;
    padding: unset;
    font-size: unset;
}

.lbl, small {
    display: inline-block;
    vertical-align: bottom;
}

small {
    color: red;
    font-size: .8em;
    margin-right: .6em;
    transform: translateY(-4px);
}

.txt-left {
    direction: ltr;
    text-align: left;
}

.txt-pwd {
    -webkit-text-security: disc;
    text-security: disc;
}

.mobile-block {
    white-space: nowrap;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.inlineelm {
    display: inline-block;
    vertical-align: top;
    width: calc(var(--opjwidth) / 2 - 2px);
}

.country-list {
    position: absolute;
    background: white;
    box-shadow: 1px 2px 5px 2px #808080;
    transition: 4s;
    min-width: 12em;
    overflow-y: scroll;
    max-height: 10em;
    border-radius: 0 .2em .2em 0;
    z-index: 2;
    display: none;
}

.country-block {
    white-space: nowrap;
    font-size: .8em;
    cursor: pointer;
    user-select: none;
}

.country-list .country-block {
    padding: .3em .6em .6em;
}

    .country-list .country-block:first-child {
        margin-top: .5em;
    }

    .country-list .country-block:hover {
        background: #496579;
        color: white;
    }

.country-flag {
    width: 1.5em;
}

.country-flag, .country-name, .country-zipcode {
    display: inline-block;
    vertical-align: middle;
}

.country-name {
    margin-right: .3em;
}

.country-section, #Content_mobile {
    display: inline-block;
    vertical-align: top;
}

.country-section {
    width: calc(var(--opjwidth) / 2.3);
}

#Content_mobile {
    width: calc(var(--opjwidth) / 1.79);
}

.File-uplaod {
    display: none;
}

.avatar-style {
    width: 10em;
    height: 10em;
    border: 5px solid #808080;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

    .avatar-style:hover {
        border: 5px solid #119af3;
    }

.map-container {
    margin: auto;
    width: 93%;
    height: 20em;
}

.hidden {
    visibility: hidden;
}

.Full-View {
    position: fixed !important;
    top: 12.5vh;
    left: 5vw;
    width: 90vw;
    height: 80vh;
}

#toggleViewBtn {
    left: 43%;
}




.sub-container {
    padding: .5em 1em;
    width: 100%;
}

.sub-header {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5em;
}

    .sub-header h1 {
        margin: 0;
        font-size: 1.4em;
        letter-spacing: .1em;
    }

        .sub-header h1 i {
            margin-left: .5em;
        }

.plan-toggle {
    background: #22303a;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: .25em;
    border-radius: 5em;
    display: inline-flex;
    gap: .25em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

    .plan-toggle button {
        color: white;
        border: 1px solid #3eb0fb;
        background: transparent;
        padding: .5em 1em;
        border-radius: 5em;
        cursor: pointer;
        font-weight: 700;
    }

.chip {
    padding: 0 .5em;
    border-radius: 2em;
    margin-right: 1em;
    background: #0da764;
    border-color: #115e59;
    color: #99f6e4;
}

.sub-body {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content:unset;
}

.sub-col {
    width: 70%;
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    height: 26.5em;
    overflow-y: auto;
    justify-content:unset;
    align-items:unset;
}

    .sub-col:last-child {
        display: unset;
        width: 30%;
        border: 1px solid rgba(0, 0, 0, 0.24);
        border-radius: .75em;
        padding: .75em 1em;
        text-align: right;
        background: #22303a;
        color: white;
        box-shadow: 0 4px 7px #22303a;
        font-size: .88em;
        height: 30em;
        line-height: 1.7;
        overflow: hidden;
    }

.sub-item, .sub-item-det {
    border: 1px solid rgba(0, 0, 0, 0.24);
    width: calc(33.33% - .5em);
    height: 12.75em;
    border-radius: .75em;
    padding: .25em .75em;
    text-align: right;
    background: #162a39;
    color: white;
    box-shadow: 0 4px 7px #22303a;
    overflow:hidden;
}

.sub-itemname {
    margin: .25em 0;
    font-weight: 700;
    font-size: 1.1em;
    color: #3eb0fb;
}

    .sub-itemname i {
        margin-left: .5em;
    }

.sub-itemdesc {
    font-size: .82em;
    white-space: pre-wrap;
    text-align: justify;
    height: 5em;
    overflow-y: scroll;
    padding: 0 .4em;
    line-height: 1.4;
}

    .sub-itemdesc::-webkit-scrollbar {
        width: .3em;
        background: transparent;
    }

    .sub-itemdesc::-webkit-scrollbar-thumb {
        background-color: #119af3;
        border-radius: .5em;
    }

.sub-itemprice {
    margin-top: .3em;
    line-height: 1.4;
    padding: 0 .25em;
    font-weight: 800;
    color: #055b36;
    background: white;
    text-align: center;
    font-size: 1.3em;
    padding-bottom: .2em;
    border-radius: 2em;
}

    .sub-itemprice span {
        font-size: .65em;
        margin-right: .4em;
    }

.sub-itemselect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    margin-top: .5em;
}

    .sub-itemselect input[type="checkbox"] {
        width: 1.3em;
        height: 1.3em;
        accent-color: #22d3ee;
        cursor: pointer
    }

.sub-itemchip {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .2em .75em;
    border-radius: 2em;
    background: #0a1428;
    border: 1px solid #3eb0fb;
    font-size: .9em;
}

.sub-item-det .sub-itemselect {
    gap: 0;
}

.sub-item-det .sub-itemchip {
    gap: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    width: 80%;
    background: unset;
    overflow: hidden;
}

    .sub-item-det .sub-itemchip span {
        white-space: pre-wrap;
        line-height: 1.4;
        font-size: .94em;
        text-shadow: 0 1px 2px 5px #3eb0fb;
    }

.sub-item-det .sub-itemprice {
    font-size: .9em;
    padding-bottom: .1em;
}

    .sub-item-det .sub-itemprice span {
        font-size: .65em;
        margin-right: .2em;
    }

.sub-item-det .free-price span {
    font-size: .95em;
    padding: 0 .8em;
    color: red;
}

.sub-itemqty {
    display: flex;
    gap: .2em;
    align-items: center
}

    .sub-itemqty input {
        width: 3em;
        text-align: center;
        border-radius: 1em;
        border: 1px solid #3eb0fb;
        background: #119af3;
        padding: 0;
        font-size: 1.1em;
    }

.btn-PlusMin {
    width: 1.25em;
    height: 1.25em;
    font-size: 1.75em;
    line-height: 0;
}

.cal-item {
    display: flex;
    gap: 0.5em;
    justify-content: space-between;
}

    .cal-item div:first-child {
        width: 48.5%;
    }

    .cal-item div:last-child {
        margin: auto;
        width: 51.5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .cal-item div:last-child span{
            overflow:hidden;
        }

        .cal-item div:last-child span:not(:last-child) {
            width: 1.5em;
            text-align:center
        }

        .cal-item div:last-child span:last-child {
            color: #119af3;
            width: 7.5ch;
            text-align: left;
        }


button[data-plan].active {
    background-color: #007bff;
    color: #fff;
}

hr {
    line-height: 0;
    background: red;
    margin: .15em 0;
}

.cal-header {
    font-size: 1.2em;
    font-weight: bold;
    color: #119af3;
}

.cal-planname {
    justify-content: center !important;
    font-weight: 700;
    color: #07a360;
}
.divaddress {
    width: 93%;
    margin: 2.5em auto 0;
    padding: 0 1em;
}
.divaddress-flex {
    display: flex;
    gap: .25em;
    flex-wrap: wrap;
}
    .divaddress-flex div {
        font-family: inherit;
        font-size: inherit;
        border: 1px solid #ccc;
        padding: 0 .5em;
        text-align: center;
        border-radius: 0;
    }