﻿        body {
            color: rgb(51, 51, 102);
            font-family: Segoe UI, Arial, Helvetica, sans-serif;
            margin: 0px;
            background-color: lightgrey;
        }

        h1 {
            font-family: 'Franklin Gothic Heavy', Arial, Helvetica, sans-serif;
        }

        h2 {
            font-family: 'Franklin Gothic Demi', Arial, Helvetica, sans-serif;
            font-style: italic;
        }

        .links .documentation {
            flex-basis: 9em;
        }

        a {
            cursor: pointer;
            text-decoration: none;
        }

        nav {
            display: flex;
            background-color: white;
            color: rgb(26, 43, 109);
            height: 5em;
        }

        nav .links label {
            padding: 0px;
            padding-left: 1em;
            padding-right: 1em;
            font-weight: normal;
            border-radius: 0px;
        }

        nav .links label:hover {
            background-color: rgb(119,119,187);
        }

        nav .showUserBtn {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        nav .showUserBtn .name {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            font-size: smaller;
        }

        #RxTestLogo {
            padding-right: 1em;
            display: flex;
            align-items: center;
        }

        #RxTestLogo svg {
            height: 75px;
            width: 200px;
        }

        .showUserBtn .icon {
            width: 20px;
            height: 20px;
            fill: currentColor;
            margin-left: 1em;
        }

        .userMenu {
            position: absolute;
            right: 0px;
            top: 0px;
            background-color: white;
            border-left-width: 1px;
            border-left-color: rgb(51, 51, 102);
            border-left-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: rgb(51, 51, 102);
            border-bottom-style: solid;
            padding: 1em;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .userMenu .signOut {
            align-self: flex-end;
            padding-left: 1em;
            padding-right: 1em;
        }

        .userMenu label {
            margin-top: .75em;
        }

        nav .links {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            flex: 1 1 auto;
        }

        nav a, nav a:visited {
            flex: 0 0 5em;
            color: rgb(26, 43, 109);
        }

        .pathBar {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            background-color: rgb(26, 43, 109);
            color: white;
            min-height: 30px;
        }

        .pathBar .path {
            display: flex;
            flex-direction: row;
            align-items: stretch;
        }

        .pathBar .buttons {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            flex: 1 1 auto;
            justify-content: flex-end;
        }

        .pathPaneItem {
            color: white;
            border: none;
            border-radius: 5px;
            padding-top: .5em;
            padding-bottom: .5em;
            padding-left: 1em;
            padding-right: 1em;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            font-weight: bold;
            background: none;
        }

        .pathPaneItem:hover {
            text-decoration: underline;
        }

        .pathPaneItem:focus {
            outline: none;
            text-decoration: underline;
        }

        .pathBar .refresh {
            border-color: rgb(26, 43, 109);
            background-color: rgb(26, 43, 109);
            color: white;
            border-radius: 0px;
            border-style: solid;
        }

        .pathBar .refresh:focus {
            outline: none;
            border-style: dotted;
            border-color: gray;
        }
        .pathBar .refresh:hover {
            border-color: gray;
        }

        .pathBar .refresh svg {
            fill: currentColor;
        }

        header {
            background-image: url("BannerBackground.png");
            background-size: cover;
        }

        .headingContent {
            padding: 2em;
            background-color: rgba(240, 240, 240, 0.85);
            display: flex;
            align-items: center;
            max-width: 40em;
        }

        header h1 {
            padding: 1em;
        }

        button {
            border-radius: 5px;
        }

        button:not(:disabled) {
            cursor: pointer;
        }

        button.signIn {
            border: none;
            padding: 1em;
            padding-left: 3em;
            padding-right: 3em;
            font-weight: bold;
            cursor: pointer;
            color: white;
            background-color: rgb(51, 51, 102);
        }

        button:disabled {
            color: gray;
        }

        .emptyList {
            font-style: italic;
        }

        input.invalid {
            background-color: mistyrose;
        }

        .fieldLabel {
            font-size: smaller;
            font-weight: bold;
            display: block;
        }

        label {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .spinner {
            width: 20px;
            height: 20px;
        }

        .icon {
            width: 15px;
            height: 15px;
            fill: currentColor;
            flex: 0 1 auto;
            padding-right: .5em;
        }

        input:focus, button:focus, textarea:focus {
            outline-color: rgb(163, 163, 139);
        }

        .link {
            color: rgb(51, 51, 102);
            background: none;
            padding: 0px;
            cursor: pointer;
        }

        .link:hover {
            text-decoration: underline;
        }
        
        footer {
            margin-top: 2em;
            height: 15em;
            background-color: rgb(51, 51, 102);
            color: white;
            padding: 2em;
        }

        .banner h1 {
            font-size: 48px;
        }

        .content {
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap:wrap;
        }

        .content .paragraph {
            display: block;
            max-width: 25em;
            padding: 2em;
            flex: 1 1 25em;
        }

        footer .icon {
            width: 20px;
            fill: currentColor;
        }

        button.progress {
            background-color: white;
            color: rgb(51,51,102);
            border: 1px solid rgb(163, 163,139);
            border-radius: 5px;
            padding-top: .5em;
            padding-bottom: .5em;
            padding-left: 2em;
            padding-right: 2em;
            display: inline-flex; 
            flex-direction: row; 
            align-items: center;
        }

        button.progress svg {
            visibility: hidden;
        }

        button.busy.progress svg {
            visibility: visible;
        }

        button.progress:disabled {
            color: rgb(163, 163, 139);
        }

        button.progress .spinner {
            width: 15px;
            height: 15px;
        }

        button.progress:hover {
            background-color: rgb(51,51,102);
            color: white;
        }

        button.progress:focus {
            border-color: rgb(51,51,102);
            outline: none;
        }

        .checkButton {
            border: 1px solid rgb(163, 163, 139);
            width: 1.25em;
            height: 1.25em;
            background-color: white;
            padding: 0px;
            color: rgb(51,51,102);
        }

        .checkButton:focus:not(:disabled) {
            border-color: rgb(51,51,102);
            outline: none;
        }

        .checkButton:hover:not(:disabled) {
            border-width: 2px;
        }

        .checkButton:disabled {
            background-color: rgb(208, 208, 197);
        }

        .checkButton svg {
            width: 13px;
            height: 13px;
        }

        .checkButton .indeterminate {
            width: 9px;
            height: 9px;
            background-color: rgb(163,163,139);
            border-radius: 3px;
            margin-left: 2.5px;
        }

        .profile, .organizations {
            border: none;
            padding: 2em;
        }

        .claimPharmacy, .validatePharmacy, .manageAccount {
            background-color: white;
            padding: 1.5em;
            border: 2px solid rgb(26, 43, 109);
        }

        .claimPharmacy {
            margin-bottom: 1.5em;
        }

        .validatePharmacy {
            margin-bottom: 1.5em;
        }

        .profile {
            background-color: lightgray;
        }

        .profile_grid {
            display: inline-grid;
            grid-template-columns: 1fr 1fr;
        }

        .profile_grid label {
            font-weight: bold;
            justify-content: flex-end;
        }

        .profile_grid span {
            padding: .25em;
        }

        .organization {
            border: 1px solid rgb(26, 43, 109);
            padding: 1em;
            margin-bottom: 1.5em;
            background-color: white;
            position: relative;
        }

        .pharmacyChecked {
            width: .5em;
            height: .5em;
            color: green;
            top: .25em;
            right: .75em;
            position: absolute;
        }

        .pharmacyChecked svg {
            fill: currentColor;
        }

        .tab {
            font-weight: bold;
            color:#fff;
            display: inline;
            cursor: pointer;
            /*border-bottom: 1px solid rgb(163,163,139);*/
            padding: .75em 2em;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333366+0,333366+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(51,51,102,0) 0%, rgba(51,51,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(51,51,102,0) 0%,rgba(51,51,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(51,51,102,0) 0%,rgba(51,51,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00333366', endColorstr='#333366',GradientType=0 ); /* IE6-9 */
        }

        .tab.selected {
            color: rgb(51, 51, 102);
            border-top: 1px solid rgb(163,163,139);
            border-right: 1px solid rgb(163,163,139);
            border-bottom: none;
            border-top-right-radius: 5px;
            background: #f9f9f9;
        }

        .tab.selected:not(:first-child) {
            border-top-left-radius: 5px;
            border-left: 1px solid rgb(163,163,139);
        }

        .lowerblue {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333366+0,333366+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(51,51,102,0) 0%, rgba(51,51,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(51,51,102,0) 0%,rgba(51,51,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(51,51,102,0) 0%,rgba(51,51,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00333366', endColorstr='#333366',GradientType=0 ); /* IE6-9 */
        }

.fieldLabel {
    text-align: right
}

.contactInfo {
    margin-bottom: 1.5em; 
    padding-top: 1em;
    padding-bottom: 1em;
}

.errorMessage {
    margin-bottom: 1.5em;
    background-color: mistyrose;
    padding: .5em;
}
