﻿@media all {
    
    #ALOS { width: 750px; min-height: 400px; margin: 30px auto; }

    #ALOS div, #ALOS span, #ALOS header, #ALOS h1, #ALOS h2, #ALOS h4, #ALOS h5, #ALOS a:link, 
    #ALOS input[type='text'], #ALOS input[type='number'], #ALOS input[type='email'],
    #ALOS input[type='password'], #ALOS input[type='tel'], #ALOS select, #ALOS label,
    #ALOS ol, #ALOS ul, #ALOS li { 
        font-family: 'Mission Gothic', 'Arial Narrow', Arial; 
    }
    #ALOS ol, #ALOS ul, #ALOS li { 
        margin-left: 12px; 
        padding: 0; 
        list-style: none outside none; 
    }
    #ALOS ol > li, #ALOS ul > li  { 
        font-size: 14px;
        padding: 0px;
        margin: 0px 0px 16px 15px;
        list-style-position: outside;
    }
    #ALOS ul > li  { 
        list-style-image: url("/Assets/Images/Global/blue_bullet.png");
        list-style-type: none;
    }
    #ALOS a:link { color: #428BCA; text-decoration: underline; cursor: pointer; }
    #ALOS .toUpper { text-transform: uppercase; }
    #ALOS .clickable { cursor: pointer; }

    #ALOS > header > h1 { font-size: 40px; font-weight: bold; color: #2C68AB; line-height: 43px; font-style: italic; margin-bottom: 8px; }
    #ALOS > header > h4 { font-size: 18px; font-weight: bold; color: #000000; }
    #ALOS > header > h5 { font-size: 18px; font-weight: bold; color: #2C68AB; margin-bottom: 2px; }
    #ALOS > div.alt-header { font-size: 18px; line-height: unset; margin-top: 25px; }
    #ALOS > div.alt-header > span { color: #2C68AB; }

    /* Icons */
    #ALOS div.rad-ico, 
    #ALOS div.img-ico { 
        width: 20px; 
        height: 20px; 
        display: inline-block; 
        line-height: 20px; 
        text-align: center; 
        vertical-align: middle; 
    }
    #ALOS div.rad-ico { 
        -webkit-border-radius: 10px 10px;
        -moz-border-radius: 10px 10px; 
        border-radius: 10px 10px; 
        font-size: 15px; 
        font-weight: bold; 
        color: #FFFFFF; 
        background-color: #74ABE6; 
    }
    
    #ALOS div.rad-ico.help::after { content: '?'; margin-left: 2px; }
    #ALOS div.rad-ico.info::after { content: 'i'; margin-right: 1px; font-family: Georgia, 'Times New Roman', serif }
    #ALOS div.img-ico.phone::after { 
        content: url(/Assets/Images/Financial/Auto/icon-phone.png); 
    }
    #ALOS div.img-ico.pdf::after { 
        content: url(/Assets/Images/Financial/Auto/icon-pdf.png); 
    }

    /* CTA with Icon */
    #ALOS div.ico-cta, 
    #ALOS div.ico-cta a { 
        height: 20px; 
        font-family: 'Mission Gothic', 'Arial Narrow', Arial; 
        font-size: 15px; 
        line-height: 20px; 
        font-weight: bold; 
        color: #666666; 
        vertical-align: bottom; 
    }
    #ALOS > div.ico-cta { 
        margin-top: 36px; 
    }
    #ALOS > div.ico-cta + div.ico-cta { 
        margin-top: 8px; 
    }

    /* Icons within CTA containers */
    #ALOS div.ico-cta > div.rad-ico,
    #ALOS div.ico-cta > div.img-ico { 
        margin-right: 4px; 
    }
    #ALOS div.ico-cta > div.rad-ico { 
        background-color: #666666; 
    }
    
    /* Panels */
    #ALOS div.panel { -webkit-box-shadow: #B8B8B8 0 4px 9px; -moz-box-shadow: #B8B8B8 0 4px 9px; box-shadow: #B8B8B8 0 4px 9px; margin: 20px 0 0; overflow: hidden; background-color: #FFFFFF; }
    #ALOS div.panel > header { padding: 6px 15px 4px; background-color: #317ECE; display: block; }
    #ALOS div.panel > header > h2 { font-size: 16px; font-weight: bold; text-transform: uppercase; color: #FFFFFF; display: inline-block; vertical-align: middle; }
    #ALOS div.panel > header > div { font-size: 12px; color: #FFFFFF; display: inline-block; vertical-align: middle; }
    #ALOS div.panel > div { font-size: 14px; line-height: 17px; color: #666666; }
    #ALOS div.panel > div a { font-size: inherit; line-height: inherit; }
    #ALOS div.panel > div.cntBoxModel { padding: 25px; }
    #ALOS div.panel > div.cntBoxModel > div > p:first-of-type { margin-top: 0; }
    #ALOS div.panel > div.altRowModel { padding: 0; }
    #ALOS div.panel > div.altRowModel > div { padding: 15px 25px; }
    #ALOS div.panel > div.altRowModel > div:nth-child(odd) { background-color: #FFFFFF; }
    #ALOS div.panel > div.altRowModel > div:nth-child(even) { background-color: #FAFAFA; }
    #ALOS div.panel > div.altRowModel > div:nth-child(1n+2) { border-top: 1px solid #D4D4D4; }
    
    #ALOS div.panel > div.docImgModel { padding: 25px; }
    #ALOS div.panel > div.docImgModel > div { width: 694px; }
    #ALOS div.panel > div.docImgModel > div:first-child { 
        height: 360px; 
        padding: 2px; 
        margin: 0 auto; 
        border: 1px solid #D4D4D4; 
    }
    #ALOS div.panel > div.docImgModel > div:first-child > div { 
        height: 348px; 
        padding: 6px; 
        overflow-y: scroll; 
    }
    #ALOS div.panel > div.docImgModel > div:first-child > div > div { 
        min-height: 348px; 
        border-width: 5px;
        -moz-box-shadow: 0px 0px 4px 6px #808080; 
        -webkit-box-shadow: 0px 0px 4px 6px #808080; 
        box-shadow: 0px 0px 4px 6px #808080; 
    }
    #ALOS div.panel > div.docImgModel > div:first-child > div > div > img { width: 100%; }
    #ALOS div.panel > div.docImgModel > div.pdf-toolbar > div:first-child { 
        float: right;
        border-left: 1px solid #D4D4D4; 
        border-right: 1px solid #D4D4D4; 
        border-bottom: 1px solid #D4D4D4; 
        background-color: #EDEDED;
        -webkit-border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 4px;
    }
    #ALOS div.panel > div.docImgModel > div.pdf-toolbar > div:first-child > a { 
        display: block; 
        float: left;
        height: 27px;
        margin: 1px 0; 
    }
    #ALOS div.panel > div.docImgModel > div.pdf-toolbar > div:first-child > a ~ a { border-left: 1px solid #D4D4D4; }
    #ALOS div.panel > div.docImgModel > div.pdf-toolbar > div:first-child > a.pdf-reset { width: 33px; background: url(/Assets/Images/Financial/Auto/icon-pdf-reset.png) center center no-repeat; }
    #ALOS div.panel > div.docImgModel > div.pdf-toolbar > div:first-child > a.pdf-zoom-in { width: 29px; background: url(/Assets/Images/Financial/Auto/icon-pdf-zoom-in.png) center center no-repeat; }
    #ALOS div.panel > div.docImgModel > div.pdf-toolbar > div:first-child > a.pdf-zoom-out { width: 29px; background: url(/Assets/Images/Financial/Auto/icon-pdf-zoom-out.png) center center no-repeat; }
    #ALOS div.panel > div.docImgModel > div.pdf-toolbar > div:first-child > a.pdf-save { width: 32px; background: url(/Assets/Images/Financial/Auto/icon-pdf-save.png) center center no-repeat; }
    #ALOS div.panel > div.docImgModel > div.pdf-toolbar > div:first-child > a.pdf-open { width: 29px; background: url(/Assets/Images/Financial/Auto/icon-pdf-open.png) center center no-repeat; }

    #ALOS div.panel > div.button-container { margin: 0; text-align: center; }
    #ALOS div.panel > div.button-container.with-top-divider { border-top: 1px solid #D4D4D4; }
    #ALOS div.panel ~ div.panel { margin-top: 25px; }
    #ALOS div.text-only-panel { font-family: Verdana; font-size: 11px; line-height: 13px; margin-top: 25px; }

    #ALOS > div.panel.warning > header { background-color: #CC0000; }
    
    /* Modal Panels */
    #ALOS > .modal { display: none; margin: 0px auto; }
    #ALOS > .modal::before {
        content: '';
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.6;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 4000;
    }
    #ALOS > .modal > .panel {
        display: none;
        width: 620px; 
        margin: 0;
        position: fixed;
        padding: 0px 0px;
        top: 40%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 5000;
        background-color: transparent;
        -webkit-box-shadow: rgba(0,0,0,0.2) 2px 2px 2px; 
        -moz-box-shadow: rgba(0,0,0,0.2) 2px 2px 2px; 
        box-shadow: rgba(0,0,0,0.2) 2px 2px 2px;
        -webkit-border-radius: 4px 4px;
        -moz-border-radius: 4px 4px;
        border-radius: 4px 4px;
    }
    #ALOS > .modal > .panel > div { background-color: #FFFFFF; line-height: normal; }
    #ALOS > .modal > .panel > div a { font-size: inherit; line-height: inherit; }
    #ALOS > .modal > .panel.closable > header { padding-right: 10px; }
    #ALOS > .modal > .panel.closable > header > div { float: right; width: 20px; font-size: 16px; font-weight: bold; text-align: right; cursor: pointer; }
    #ALOS > .modal > .panel.closable > header::after { clear: both; }
    #ALOS > .modal > .panel.warning > header { background-color: #CC0000; }
    #ALOS > .modal > .panel > div.cntBoxModel { padding-left: 15px; padding-right: 15px; }
    #ALOS > .modal > .panel > div.cntBoxModel.scrollable { padding-right: 10px; }
    #ALOS > .modal > .panel > div.cntBoxModel.scrollable > div:first-child { overflow-y: auto; padding-right: 15px; }

    #ALOS > .modal > .panel > div.docImgModel { padding: 15px; }
    #ALOS > .modal > .panel > div.docImgModel > div { width: 584px; }
    #ALOS > .modal > .panel > div.docImgModel > div:first-child > div > div > img { width: 100%; }

    #ALOS > .modal > .panel > div.button-container { padding: 0 25px 25px; text-align: right; }
    #ALOS > .panel ~ .modal > .panel { margin: 0; }

    /* Panels within Modal Panels */
    #ALOS > div.modal > div.panel div.panel { -webkit-box-shadow: #B8B8B8 0 2px 5px; -moz-box-shadow: #B8B8B8 0 2px 5px; box-shadow: #B8B8B8 0 2px 5px; margin: 0; overflow: hidden; background-color: #FFFFFF; }
    #ALOS > div.modal > div.panel div.panel > header { padding: 4px 10px; background-color: #317ECE; display: block; }
    #ALOS > div.modal > div.panel div.panel > header > h2 { font-size: 14px; font-weight: bold; text-transform: uppercase; color: #FFFFFF; margin: 0; display: block; vertical-align: unset; }
    #ALOS > div.modal > div.panel div.panel > div.cntBoxModel { padding: 10px; }

    /* Forms */
    #ALOS select, 
    #ALOS input[type='text'],
    #ALOS input[type='number'],
    #ALOS input[type='email'],
    #ALOS input[type='password'],
    #ALOS input[type='tel'] {
        height: 34px;
        font-size: 15px;
        color: #666666; 
        border: 1px solid #D4D4D4;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #ALOS select, 
    #ALOS input[type='text'],
    #ALOS input[type='number'],
    #ALOS input[type='email'],
    #ALOS input[type='password'],
    #ALOS input[type='tel'],
    #ALOS .inputContainer span.del { 
        vertical-align: middle; 
    }

    #ALOS input[type='text'],
    #ALOS input[type='number'],
    #ALOS input[type='email'],
    #ALOS input[type='password'],
    #ALOS input[type='tel'] {
        padding: 4px 12px;
        width: 50px;
    }
    
    #ALOS input[type='number'] { 
        padding-right: 4px; 
    }
    #ALOS input[type="number"].noSpin::-webkit-outer-spin-button,
    #ALOS input[type="number"].noSpin::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    #ALOS input[type="number"].noSpin {
        -moz-appearance: textfield;
    }
    
    #ALOS input[type='email'], #ALOS input.emailType {
        width: 210px;
    }
    
    #ALOS select { 
        padding: 4px 8px; 
        cursor: pointer; 
        z-index: 1; 
    }
    #ALOS select:required:invalid { color: #A9A9A9; }
    #ALOS select option[value=""][disabled] { display: none; }
    #ALOS select option { color: #666666; }

    #ALOS input[type='checkbox'], 
    #ALOS input[type='radio'] { 
        width: 20px; 
        height: 20px; 
        margin: 0; 
    }

    #ALOS input::-webkit-input-placeholder { color: #A9A9A9; }
    #ALOS input::-moz-placeholder { color: #A9A9A9; }
    #ALOS input:-moz-placeholder { color: #A9A9A9; }
    #ALOS input:-ms-input-placeholder { color: #A9A9A9; }

    #ALOS .inputContainer span.del {
        display: inline-block; 
        width: 34px; 
        font-size: 15px; 
        line-height: 32px; 
        font-weight: bold; 
        color: #666666; 
        text-align: center; 
        border: 1px solid #D4D4D4; 
        background-color: #EDEDED; 
    }
    #ALOS .inputContainer span.del.pls {
        font-weight: normal; 
        font-size: 26px; 
        vertical-align: middle;
    }
    #ALOS .inputContainer span.del.hyp, 
    #ALOS .inputContainer span.del.dol, 
    #ALOS .inputContainer span.del.pls { 
        border-right: none; 
    }
    #ALOS .inputContainer span.del.hyp { border-left: none; }
    #ALOS .inputContainer span.del.hyp::after { content: '-'; }
    #ALOS .inputContainer span.del.dol::after { content: '$'; }
    #ALOS .inputContainer span.del.pls::after { content: '+'; }

    #ALOS .inputContainer label { /*font-size: 15px;*/ vertical-align: middle; }

    #ALOS .inputContainer input ~ span.ico.help { margin-left: 6px; }
    #ALOS .inputContainer .withDelimiters {word-spacing: -4px;}
    #ALOS .inputWarning { font-family: Verdana; font-size: 10px; line-height: 12px; color: #E00000; }

    #ALOS > div.panel > div.frmRowModel { padding: 25px;  }
    #ALOS > div.panel > div.frmRowModel > div { display: table; }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer:nth-child(1n+2) { padding-top: 15px; }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div, 
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div.sub-text { 
        display: table-cell; 
        vertical-align: middle; 
    }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div,
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div > label { 
        font-size: 15px; 
        line-height: 17px; 
    }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div.sub-text, 
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div > label.sub-text { 
        font-family: Verdana; 
        font-size: 10px; 
        line-height: 12px; 
    }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div:first-child { width: 225px; padding-right: 25px; text-align: right; }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div:last-child > input ~ input, 
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div:last-child > input ~ select, 
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div:last-child > select ~ input { margin-left: 10px; }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div:last-child > label ~ input { margin-left: 5px; }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div:last-child > input ~ label { margin-left: 5px; }
    #ALOS > div.panel > div.frmRowModel > div.inputContainer > div:last-child > span ~ input { margin-left: 0; }

    #ALOS > div.panel > div.frmRowModel > div.inputWarning { padding: 4px 0 0 250px; }
    #ALOS > div.panel > div.frmRowModel > div.priQuestion { font-size: 16px; line-height: 17px; }

    /* Buttons */
    #ALOS a.button, #ALOS a.button > span {
        font-family: Arial !important;
        font-weight: bold !important;
        text-transform: uppercase !important; 
        text-decoration: none !important;
        text-align: center !important;
    }
    #ALOS a.button { display: inline-block; }
    #ALOS a.button:hover { border: solid 2px #2C68AB; background-color: #2C68AB; cursor: pointer; }
    #ALOS a.button.selected { background-color: #2C68AB; color: #FFFFFF; }
    #ALOS a.button.size1, #ALOS a.button.size1 > span { font-size: 12px !important; }
    #ALOS a.button.size1 { padding: 4px 16px 3px; -webkit-border-radius: 15px 15px; -moz-border-radius: 15px 15px; border-radius: 15px 15px; }
    #ALOS a.button.size2, #ALOS a.button.size2 > span { font-size: 15px !important; }
    #ALOS a.button.size2 { padding: 5px 16px 5px; -webkit-border-radius: 20px 20px; -moz-border-radius: 20px 20px; border-radius: 20px 20px; }
    #ALOS a.button.blue1 { border: solid 2px #317ECE; background-color: #317ECE; color: #FFFFFF; }
    #ALOS a.button.blue1:hover { border: solid 2px #2C68AB; background-color: #2C68AB; }
    #ALOS a.button.blue2 { border: solid 2px #74ABE6; background-color: #74ABE6; color: #FFFFFF; }
    #ALOS a.button.blue2:hover { border: solid 2px #98CAFF; background-color: #98CAFF; }
    #ALOS a.button.blue3 { border: solid 2px #74ABE6; background-color: #FFFFFF; color: #74ABE6; }
    #ALOS a.button.blue3:hover { border: solid 2px #98CAFF; background-color: #98CAFF; color: #FFFFFF; }
    #ALOS a.button.blue3.selected { border: solid 2px #74ABE6; background-color: #74ABE6; color: #FFFFFF; }
    #ALOS a.button.red { border: solid 2px #E00000; background-color: #E00000; color: #FFFFFF; }
    #ALOS a.button.red:hover { border: solid 2px #CC0000; background-color: #CC0000; }
    #ALOS a.button.grey { border: solid 2px #ECECEC; background-color: #ECECEC; color: #666666; }
    #ALOS a.button.grey:hover { border: solid 2px #D4D4D4; background-color: #E0E0E0; }
    #ALOS a.button.grey1 { border: solid 2px #E0E0E0; background-color: #D4D4D4; }
    #ALOS a.button.grey1:hover { border: solid 2px #D4D4D4; background-color: #D4D4D4; }
    #ALOS a.button.green { border: solid 2px #5DCE31; background-color: #5DCE31; color: #FFFFFF; }
    #ALOS a.button.green:hover { border: solid 2px #50AB2C; background-color: #50AB2C; }
    #ALOS a.button.disabled { opacity: 0.40; filter: alpha(opacity=65); cursor: not-allowed; pointer-events: none; }
    #ALOS .buttonOptionGroup { text-align: center; vertical-align: middle; }
    #ALOS .buttonOptionGroup > a:nth-child(1n+2) { margin-left: 6px; }
    
    #ALOS .button-container { margin-top: 20px; text-align: right; }
    #ALOS .button-container > a.button:nth-child(1n+2) { margin-left: 12px; }
    #ALOS > .button-container { margin-top: 25px; }

    /* Disclaimers */
    #ALOS .pre-submit-disclaimer, #ALOS .pre-submit-disclaimer a,
    #ALOS .emphasized-disclaimer, #ALOS .emphasized-disclaimer a,
    #ALOS .post-submit-disclaimer, #ALOS .post-submit-disclaimer a { 
        font-family: Verdana; 
        color: #666666; 
        -ms-word-wrap: break-word; 
        word-wrap: break-word;
    }
    #ALOS .pre-submit-disclaimer, #ALOS .pre-submit-disclaimer a, 
    #ALOS .post-submit-disclaimer, #ALOS .post-submit-disclaimer a { 
        font-size: 10px; 
        line-height: 16px; 
    }
    #ALOS .pre-submit-disclaimer, #ALOS .emphasized-disclaimer { margin-top: 25px; }
    #ALOS .post-submit-disclaimer { margin-top: 15px; }
    #ALOS .post-submit-disclaimer.with-top-divider { padding-top: 15px; border-top: 1px solid #EEEEEE; }
    #ALOS .emphasized-disclaimer {
        -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 1px 1px;
        -moz-box-shadow: rgb(204, 204, 204) 0px 0px 1px 1px;
        box-shadow: rgb(204, 204, 204) 0px 0px 1px 1px;
        -webkit-border-radius: 3px 3px;
        -moz-border-radius: 3px 3px;
        border-radius: 3px 3px;
        border: solid 2px #666666;
        padding: 10px;
    }
    #ALOS .emphasized-disclaimer, #ALOS .emphasized-disclaimer a { 
        font-size: 11px; 
        line-height: 16px; 
        font-weight: bold; 
    }
    #ALOS .pre-submit-disclaimer a, #ALOS .emphasized-disclaimer a, #ALOS .post-submit-disclaimer a { 
        text-decoration: underline; 
    }
    
    /* Progress Bar */
    #ALOS div.progress-wrapper { margin-top: 20px; }

    /* Mobile (temporary until fully responsive)  */
    #ALOS .mob-768, #ALOS .mob-375, #ALOS .mob-320 { display: none; }
    #ALOS span.adp-def { display: inline; }
    #ALOS div.adp-def { display: block; }
}
