/* Input standards warnings (Scripts/Odyssey/InputStandards.js). A warning never blocks a save unless
   InputStandards.Enforce is on. */
input.input-standard-warning {
    outline: 2px solid #c00;
    outline-offset: -1px;
}

/* The page's own phone/fax box, holding the whole stored number ("+44 20 7946 0958"). Hidden, NOT removed or retyped:
   it stays a type="text" input with its name and id, so saves, the unsaved-changes check, click-to-dial and every
   script that reads it by id are unchanged. The user types in the display box next to it. !important so a script's
   .show() cannot reveal it. */
input.phone-real {
    display: none !important;
}

/* Country code dropdown before every phone and fax box. The visible part is the short code ("+44"); the real
   <select> sits invisibly on top of it, so clicking opens the native list of full country names.
   The !important rules beat the contact page's "#ContactEditor ... select { float; margin }" rule and the inline
   width its Window_Resize() script writes onto every select in #ContactEditor. */
.phone-country {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 46px;
    height: 20px;
    line-height: 18px;
    margin-right: 0;
    padding: 0 12px 0 4px;
    border: 1px solid #cecece;
    border-radius: 2px;
    background: #fff;
    color: #333;
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.phone-country:after {
    content: "\25BE";
    position: absolute;
    right: 3px;
    top: 0;
    color: #777;
    font-size: 10px;
    pointer-events: none;
}

.phone-country-label {
    pointer-events: none;
}

.phone-country select {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    float: none !important;
    opacity: 0;
    cursor: pointer;
    font-size: 12px;
}

/* Selected: the browser's own focus ring, the same one every other field on the page gets. (Its border is copied from
   the phone box next to it in InputStandards.js, so it matches whatever the page uses.) */
.phone-country:focus-within {
    outline: -webkit-focus-ring-color auto 1px;
}

.phone-country.phone-country-disabled {
    background: #f2f2f2;
    color: #999;
    cursor: default;
}

/* Sits on its own line under the box (or under its Ext box). Floated + cleared so it also lays out inside the
   contact page's float-based field rows. */
.input-standard-message {
    display: block;
    float: left;
    clear: left;
    width: 100%;
    margin: 1px 0 4px 0;
    color: #c00;
    font-size: 11px;
    line-height: 13px;
    text-align: left;
}