/* New Job Site plugin - matches the portal's dark panel styling (see
   new_vendor and status-change), scoped to the portal page the same way. */

@media (max-width: 750px) and (orientation: portrait) {
    div.new-job-site-form-div {
        zoom: 75%;
        -moz-transform: scale(100%);
        -moz-transform-origin: 0 0;
        -o-transform: scale(100%);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(100%);
        -webkit-transform-origin: 0 0;
        transform: scale(100%);
        transform-origin: 0 0;
        float: left;
    }
}

.page-id-15 div.new-job-site-form-div {
    display: inline-block;
    border: 5px solid #212121;
    outline: 2px ridge silver;
    padding: 15px;
    color: silver;
    background: rgb(61, 54, 30);
    background: radial-gradient(circle, rgba(61, 54, 30, 0.9808123933167017) 0%, rgba(47, 43, 35, 1) 75%);
    width: 400px;
}

.page-id-15 div.new-job-site-form-div p#jobsite-client-p,
.page-id-15 div.new-job-site-form-div p#jobsite-client-address-p,
.page-id-15 div.new-job-site-form-div p#jobsite-nick-p,
.page-id-15 div.new-job-site-form-div p#jobsite-site-address-p {
    color: #b8a680;
    margin-bottom: 10px;
    font-size: 20px;
}

.page-id-15 div.new-job-site-form-div select#jobsite-client-select,
.page-id-15 div.new-job-site-form-div input#jobsite-nick-input,
.page-id-15 div.new-job-site-form-div input#jobsite-site-address-input {
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    color: silver;
    border-radius: 4px;
    border: 1px solid black;
    outline: 2px ridge rgb(84, 84, 84);
    margin-top: 3px;
    margin-bottom: 10px;
    text-align: center;
    box-sizing: border-box;
}

/* The dropdown list itself needs a readable background - a transparent
   select renders its options on white in most browsers. */
.page-id-15 div.new-job-site-form-div select#jobsite-client-select option {
    background-color: #2f2b23;
    color: silver;
}

/* The client's address on file, shown for reuse. */
.page-id-15 div.new-job-site-form-div #jobsite-client-address-display {
    display: block;
    padding: 6px 8px;
    margin-bottom: 8px;
    color: silver;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    border: 1px solid black;
    outline: 2px ridge rgb(84, 84, 84);
    min-height: 1.2em;
    word-break: break-word;
}

.page-id-15 div.new-job-site-form-div #jobsite-use-client-address-btn,
.page-id-15 div.new-job-site-form-div #jobsite-submit-btn {
    background-color: #212121;
    color: silver;
    border-radius: 4px;
    border: 1px solid black;
    outline: 2px ridge rgb(84, 84, 84);
    cursor: pointer;
    height: 35px;
    padding: 0 12px;
}

.page-id-15 div.new-job-site-form-div #jobsite-use-client-address-btn:hover:enabled,
.page-id-15 div.new-job-site-form-div #jobsite-submit-btn:hover:enabled {
    background-color: #7e7853;
    -webkit-box-shadow: 0px 0px 17px 5px rgba(97, 93, 73, 0.9);
    -moz-box-shadow: 0px 0px 17px 5px rgba(97, 93, 73, 0.9);
    box-shadow: 0px 0px 17px 5px rgba(97, 93, 73, 0.9);
}

.page-id-15 div.new-job-site-form-div #jobsite-use-client-address-btn:disabled,
.page-id-15 div.new-job-site-form-div #jobsite-submit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Address parts: small labels above each box, State and ZIP side by side. */
.page-id-15 div.new-job-site-form-div .jobsite-part-label {
    display: block;
    color: #b8a680;
    font-size: 14px;
    margin-top: 4px;
}

.page-id-15 div.new-job-site-form-div input#jobsite-street-input,
.page-id-15 div.new-job-site-form-div input#jobsite-city-input,
.page-id-15 div.new-job-site-form-div input#jobsite-state-input,
.page-id-15 div.new-job-site-form-div input#jobsite-zip-input {
    width: 100%;
    background-color: transparent;
    color: silver;
    border-radius: 4px;
    border: 1px solid black;
    outline: 2px ridge rgb(84, 84, 84);
    margin-top: 3px;
    margin-bottom: 6px;
    text-align: center;
    box-sizing: border-box;
}

.page-id-15 div.new-job-site-form-div .jobsite-state-zip-row {
    display: flex;
    gap: 10px;
}

.page-id-15 div.new-job-site-form-div .jobsite-state-zip-col {
    flex: 1;
}

.page-id-15 div.new-job-site-form-div .jobsite-preview-label {
    color: #b8a680;
    font-size: 14px;
    margin: 6px 0 2px 0;
}

.page-id-15 div.new-job-site-form-div #jobsite-address-preview {
    display: block;
    padding: 6px 8px;
    color: silver;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    border: 1px solid black;
    font-style: italic;
    word-break: break-word;
}

.page-id-15 div.new-job-site-form-div #jobsite-address-preview.jobsite-preview-over {
    color: #e08b7a;
}

.page-id-15 div.new-job-site-form-div #jobsite-status-div label {
    color: silver;
    font-size: 16px;
}

.page-id-15 div.new-job-site-form-div #jobsite-submit-div {
    margin-top: 15px;
    text-align: right;
}

.page-id-15 div.new-job-site-form-div #jobsite-message {
    margin-top: 10px;
    min-height: 1.2em;
    font-size: 16px;
}

.page-id-15 div.new-job-site-form-div #jobsite-message.jobsite-ok {
    color: #b8a680;
}

.page-id-15 div.new-job-site-form-div #jobsite-message.jobsite-error {
    color: #e08b7a;
}