/* RK, Jira 1342, Prime Web 2.0 specific css 
    dg: jira_4824 colors must be wcag 2.1 compliant (wcag 1.4.3)
*/

:root {

    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-body-color-rgb: 105,112,122;
    --bs-body-bg-rgb: 255,255,255;
    --bs-font-sans-serif: "Metropolis",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg,hsla(0,0%,100%,0.15),hsla(0,0%,100%,0));
    --bs-body-font-family: Metropolis,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #69707a;
    --bs-body-bg: #fff
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-Thin.otf');
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-ThinItalic.otf');
    font-weight: 100;
    font-style: italic
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-ExtraLight.otf');
    font-weight: 200;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-ExtraLightItalic.otf');
    font-weight: 200;
    font-style: italic
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-Light.otf');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-LightItalic.otf');
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-Regular.otf'); 
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-RegularItalic.otf');
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-Medium.otf');
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-MediumItalic.otf');
    font-weight: 500;
    font-style: italic
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-SemiBold.otf');
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-SemiBoldItalic.otf');
    font-weight: 600;
    font-style: italic
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-Bold.otf');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-BoldItalic.otf');
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-ExtraBold.otf');
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-ExtraBoldItalic.otf');
    font-weight: 800;
    font-style: italic
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-Black.otf');
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: Metropolis;
    src: url('fonts/metropolis/Metropolis-BlackItalic.otf');
    font-weight: 800;
    font-style: italic
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/MaterialSymbolsV83.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*dk: Jira_6324 : For SEO / Google search purposes */
.bug_report:after {
    content: attr(data-icon);
}
.lock:after {
    content: attr(data-icon);
}
.cottage:after {
    content: attr(data-icon);
}

* {
    box-sizing: border-box
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth
    }
}



body {
    margin: 0;
    font-family: Metropolis,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    font-size: var(--bs-body-font-size);
    font-weight: 400;
    font-weight: var(--bs-body-font-weight);
    line-height: 1.5;
    line-height: var(--bs-body-line-height);
    color: #69707a;
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: #fff;
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

hr {
    margin: 1rem 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25
}

hr:not([size]) {
    height: 1px
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #363d47
}

.h1, h1 {
    font-size: calc(1.275rem + .3vw)
}

@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 1.5rem
    }
}

.h2, h2 {
    font-size: calc(1.265rem + .18vw)
}

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 1.4rem
    }
}

.h3, h3 {
    font-size: calc(1.255rem + .06vw)
}

@media (min-width: 1200px) {
    .h3, h3 {
        font-size: 1.3rem
    }
}

/* dg: jira_4824 darken link color so there is enough contrast w/background colors like #fafafa */
a {
    color: #0256D4;
}

/*cn: jira-3135 - If the screen size is 450px wide or less, set the font-size of landing-agency-name to 1rem */
@media screen and (max-width:450px){
    #navbar_title .ms-2:first-child{
    font-size: 1rem !important;
    word-break:break-word;
    white-space:normal;
    overflow-wrap:break-word;
    line-height:20px !important;
    }
}


.h4, h4 {
    font-size: 1.2rem
}

.h5, h5 {
    font-size: 1.1rem
}

.h6, h6 {
    font-size: 1rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol, ul {
    padding-left: 2rem
}

ol, ul {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol, ol ul, ul ol, ul ul {
    margin-bottom: 0
}

b, strong {
    font-weight: bolder
}

.small, small {
    font-size: .875em
}

sup {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}


@media (min-width: 768px) {
    body > .navbar-transparent {
        box-shadow: none
    }

        body > .navbar-transparent .navbar-nav > .open > a {
            box-shadow: none
        }
}

    .navbar .fa, .navbar .fab {
        margin-right: .25rem;
        font-size: 1rem
    }

    #home .navbar, #help .navbar {
        background: #375ee3;
        background: linear-gradient(145deg, #375ee3 0%, #6543e0 80%);
        transition: box-shadow 200ms ease-in
    }

    #home .navbar-brand .nav-link, #help .navbar-brand .nav-link {
        display: inline-block;
        margin-right: -30px
    }

    #home {
        padding-top: 0
    }

    #home .btn {
        padding: .5rem .9rem
    }

    .bs-docs-section {
        margin-top: 4em
    }

    .bs-docs-section .page-header h1 {
        padding: 2rem 0;
        font-size: 3rem
    }


    .bs-component {
        position: relative
    }

    .bs-component + .bs-component {
        margin-top: 1rem
    }

    .bs-component .card {
        margin-bottom: 1rem
    }

    .bs-component .modal {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
        z-index: 1;
        display: block
    }

    .bs-component .modal-dialog {
        width: 90%
    }

    .bs-component .popover {
        position: relative;
        display: inline-block;
        width: 220px;
        margin: 20px
    }

 

    .nav-tabs {
        margin-bottom: 15px
    }

    .progress {
        margin-bottom: 10px
    }

    #footer {
        margin: 5em 0
    }

    #footer li {
        float: left;
        margin-right: 1.5em;
        margin-bottom: 1.5em
    }

    #footer p {
        clear: left;
        margin-bottom: 0
    }



/*RK, full desktop size stuff here*/
@media (min-width: 992px) {
    .navbar-transparent {
        background: none !important;
        box-shadow: none ;
    }

    .navbar{
        max-height:70px;
    }
}
/*RK, phone size stuff here*/
@media (max-width: 991px) {
    .navbar .fa {
        display: none
    }
}




.form-group {
    margin-top: 15px !important;
}



.card {
min-height:200px;
}

/*RK, change this globally so material icons align with text*/
.material-symbols-outlined {
    vertical-align: -3px; /*Change this to adjust the icon*/
}
/*RK, wrap pre-formatted text, this is needed for the existing PrimeWeb pages html text*/
pre {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.footer-roi {
    vertical-align:middle;
    padding: 0px 0px 60px 0px;
    background: #000;
    color: #777;
    max-height: 700px;
    background-color: #007167;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top:20px !important;
}

.footer-roi h2 {
    color: #fff;
    font-size: 22px;

}

.footer-roi li {
    font-size:18px;
    color: #fff;
}

.error, .required {
    color: #d60000;
}














/* vs: Address verification */

.AddressToolWrapper {
    font-size: 12px;

    /* dg: jira_4824 wcag 2.5.8 */
    margin: 6px;
}

.AddressToolWrapper img {
    height: 14px;
    vertical-align: top;
}

.AddressVerifMsgLoading {
    font-style: italic;
}

.AddressVerifMsgVerified {
    color: green;
}

.AddressVerifMsgNotValid,
.AddressVerifMsgWarning2 {
    color: #d60000;
}

.AddressVerifMsgWarning,
.AddressVerifMsgWarning1 { 
    color: #ad5f00;
}

.UspsSuggestion {
    font-size: 14px;
}

.UspsSuggestion .ui-dialog-titlebar {
    display: none !important;
}

.UspsSuggestion .ui-dialog-buttonpane {
    border: none !important;
}

.UspsSuggestion .ui-dialog-buttonset button {
    background-color: #4d78a3;
    width: 64px;
    padding: 5px 0 5px 0;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: #000000 0.5px 0.5px 0.5px;
}

.UspsSuggestion .UspsLogo {
    height: 38px;
    vertical-align: middle;
}

.UspsSuggestion .AddressSuggestionHint {
    font-size: 14px;
    margin-bottom: 20px;
}

.UspsSuggestion .AddressSuggestionVerified {
    color: green;
}

.UspsSuggestion .AddressSuggestionWarning {
    color: #d60000;
}

.UspsSuggestion .AddressSuggestionWarning1 {
    color: #d60000;
}

.UspsSuggestion .AddressSuggestionError {
    color: #d60000;
}

.UspsSuggestion .AddressSuggestionMsg {
    padding-top: 5px;
}

.UspsSuggestion .AddressSuggestionMsg img {
    height: 16px;
    vertical-align: middle;
}

.UspsSuggestion .AddressSuggestionSelectionUnitNo {
    width: 50px;
    font-size: 12px;
}

.UspsSuggestion .AddressSuggestionList ul {
    list-style: none;
}

.UspsSuggestion .AddressSuggestionList ul li {
    margin: 5px 0 5px 0;
    min-height: 100px;
}

.UspsSuggestion .AddressSuggestionRowRadio {
    float: left;
    margin-right: 20px;
    height: 100px;
}

.UspsSuggestion .AddressSuggestionRowRadio input[type="radio"] {
    margin-top: 5px;
}

.UspsSuggestion .AddressSuggestionErrorMsg {
    font-weight: bold;
    color: #d60000;
    padding: 10px 0 10px 0;
}

.UspsSuggestion .UnitNoSuggestion {
    font-size: 12px;
}

.UspsSuggestion .AddressSuggestionSelectionLine {
    width:290px;
    margin-bottom:5px;
}

/* vs: (END) Address verification */



/* vs: SIC input editable select to look like bootstrap form-select
    dg: jira_6361 - NAICS input to look like SIC input
*/

#SicParentDiv ul.es-list,
#NaicsParentDiv ul.es-list {
    background-color: white;
    border: 1px solid;
    padding-left: 0;
    list-style-type: none;
    max-height: 300px !important;
    overflow-y: auto;
}

#SicParentDiv li,
#NaicsParentDiv li {
    padding-left: 10px;
}

#SicParentDiv li:hover,
#NaicsParentDiv li:hover {
    background-color: darkgray;
    cursor: pointer;
}

/* vs: (END) SIC input editable select to look like bootstrap form-select */



/* vs: google captcha centering */
#captchaDiv > div {
    margin: 0 auto;
}



/* vs: server validated error, color (#dc3545) to match bootstrap 5 .invalid-feedback */
/* dg: jira_4824 wcag 1.4.3 darken to improve contrast */
.field-validation-error {
    color: #d60000;    
}
/* dk: Jira_5060 assign same color to jQuery error label messages that we use for our validation errors (above).  Default for jQuery was black (not very noticeable) */
label.error {
    color: #d60000;
}



/* vs: css to spin material icon */

.materialSymbolSpin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* vs: (END) css to spin material icon */

/* cn: Closure/Update/Renew/Pay styles */
.closure-message-container, .update-message-container, .renew-message-container, .pay-message-container {
    color: #d60000;
}

.closure-instruction-container, .update-instruction-container, .pay-instruction-container {
    padding-bottom: 8px; 
    margin-bottom: 8px;
}

.closure-additional-information-container, .update-additional-information-container{    
    margin: 25px 0;
}

.closure-signature-declaration-container, .update-signature-declaration-container {    
    margin: 25px 0;
}
.closure-hide{
    display:none;
}

#closure-container #BusinessClosedDate-error {
    color: #d60000;
}

.update-header, .renew-header{    
    margin: 25px 0;
}

.update-contacts-container{
    padding-left:0px;
    color:#000;
    border-bottom: 1px #dcdcdc solid;
    margin-bottom:25px;
}

.pay-align-right{
    text-align:right;
}

.container-divider{
     padding-top: 25px; 
     margin-top: 25px; 
     border-top: 1px #dcdcdc solid;
}

.apply-unit-header{    
    padding-bottom: 8px; 
    margin-bottom: 8px;
}

.apply-unit-info-table{
    padding:0px;
}

.apply-unit-info-table .table > :not(:first-child) {
    border-top-width: 0px !important;
}

.apply-unit-info-heading{
    background-color:#fafafa;
    margin: 0 !important;
    padding:5px 0;
    border-bottom:1px solid #dcdcdc;
}
.apply-unit-info-row{
    padding:0 10px;
}

.top-page-heading{
    font-size: 14pt; 
    margin-top: 0px; 
    padding-bottom: 4px; 
    border-bottom: 1px solid #dcdcdc;
}

.btn-circle-class {
    padding: 13px 18px;
    border-radius: 60px;
    font-size: 15px;
    text-align: center;
}

.cart-checkout-container .table > :not(:first-child) {
    border-top-width: 0px !important;
}

#search-result-container table th{
    vertical-align:top;
}

.apply-unit-container .table > :not(:first-child) {
    border-top-width: 0px !important;
}
 
#privacy-policy-container table {width:100%}
#privacy-policy-container table tr th {padding:10px;border:1px solid #000000;}
#privacy-policy-container table tr td {padding:10px;border:1px solid #000000;vertical-align:top;}

#footer .cookie-bottom-message-container {
    background: #007167;
    box-shadow: 0 3px 11px #515151;
    color: #FFFFFF;
    bottom: 0px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 10;
    padding: 20px 0;
}

#footer .cookie-bottom-message-container .btn {
    background: #FFFFFF;
    border-radius: 5px;
    color: #007167;
    font-size: 16px;
    padding: 2px 5px;
    transition: all 0.3s;
}

/* dg: jira_4824 kept #PrivacyPolicy id to keep compatibility with systems already using the old value their footer setting */
#footer .cookie-bottom-message #PrivacyPolicyCookie, #footer .cookie-bottom-message #PrivacyPolicy {
    cursor: pointer;
    color: #d6e6e2;
    text-decoration: underline;
}

.tooltip-help {
    margin-left: 5px;
    font-size: 19px;
    color: #6e6e6e !important;
}

.pweb2-label {
    text-decoration:none !important;
}

/*cn: disable arrows for number input in Chrome, Edge, Safari */
.disable-number-arrow::-webkit-outer-spin-button,
.disable-number-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*cn: disable arrows for number input in Firefox */
.disable-number-arrow{
    -moz-appearance: textfield;
}

/*cn: jira-5135 - lining up text boxes with the $ sign in renewal3a*/
td.fee-label + td input[type=text]{
    width:95% !important;
}

/* cn: (END) css */

/* SL: 5058 - print settings */
@media print {
    @page {
        min-width: 768px;
    }
    html {
        font-size: xx-small !important;
        line-height: 1 !important;
    }
    body {
        margin: 0;
        padding: 0 !important;
        min-width: 768px;
    }

    .form-group {
        margin: 0 !important;
    }

    .container {
        width: auto;
        min-width: 750px;
        margin: 0;
        padding: 0;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        width: 50%;
    }

    #AppInfoDiv {
        height: 100% !important;
    }

    #footer {
        display: none
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    .no-print {
        display: none;
    }
}