:root {
--dhn-blue: #004f82;
}
@media only screen and (max-width:767px){
.navbar-brand img{max-height:60px}
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body.beachhouse .navbar-brand img, body.golfhomes .navbar-brand img {
height:57px;
}
.lh-show,.bh-show,.gh-show,body.lakehouse .lh-hide,body.beachhouse .bh-hide,body.golfhomes .gh-hide{display:none !important}
body.lakehouse .lh-show,body.beachhouse .bh-show,body.golfhomes .gh-show{display:inline !important}
.font-color-primary {
color: var(--dhn-blue);
}
#menu {
margin-bottom: 0 !important;
border-bottom: 1px solid #DFDFDF;
box-shadow: none;
}
.side-bar {
background: #F2F6F8;
border:1px solid #DFDFDF;
border-top: 0;
}
.side-bar ul {
padding-left: 20px !important;
padding-top: 8px;
margin:auto;
}
.side-bar li.separator {
height:1px;
background: #DFDFDF;
margin-top: 10px;
margin-bottom: 10px;
padding:0;
}
.side-bar li.active a{
color: #004F82;
font-weight: 700;
}
.side-bar li {
list-style-type: none;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
.side-bar li a {
color: #4E4E4E;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22.4px;
letter-spacing: -0.32px;
text-decoration: none;
}
.back-btn {
border:1px solid #004F82;
color: #004F82 !important;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22.4px;
border-radius: 8px;
padding: 10px;
padding-top: 12px;
cursor:pointer;
}
.back-logo {
display: inline-flex;
align-items: center;
cursor: pointer;
}
@media (max-width: 991px) {
.navbar-content {
position: relative;
}
.back-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
.back-logo img {
height: 42px;
max-width: 360px;
object-fit: contain;
}
@media (min-width: 992px) {
.back-logo img {
margin-left: 1rem;
}
}
body.barrierfree .back-logo .barrierfree-logo {
display: inline-block !important;
}
body.mountainhomes .back-logo .mountainhomes-logo {
display: inline-block !important;
}
.initial-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #fff;
user-select: none;
text-transform: uppercase;
background: #004F82;
padding: 10px;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22.4px;
width: 48px;
height: 48px;
cursor: pointer;
}
.avatar-container {
position: relative;
display: inline-block;
margin-left: 0.75rem;
}
.avatar-menu {
position: absolute;
top: 60px;
right: 0;
min-width: 220px;
max-width: 400px;
background: #fff;
border-radius: 8px;
padding: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
z-index: 1000;
}
.avatar-menu.hide {
display: none;
}
.user-info {
margin-bottom: 10px;
}
.user-email {
font-weight: 600;
font-size: 14px;
color: #4E4E4E;
word-break: break-word;
}
.menu-divider {
height: 1px;
background: #eee;
margin: 10px 0;
}
.logout-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #004F82 ;
text-decoration: none;
font-weight: 500;
padding: 4px 0;
}
.logout-link svg {
color: #004F82 ;
}
.logout-link:hover {
color: #004F82 ;
}
.m-link {
color: #004F82 !important;
font-size: 16px !important;
font-weight: normal !important;
}
.navbar-toggler {
border:0;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler-icon {
background-image: url('data:image/svg+xml,') !important;
transition: transform 0.2s ease;
transform-origin: center;
}
#lostPasswordLabel {
color: #000 ;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 33.6px;
}
#lostPasswordForm p{
color: #4E4E4E;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.4px;
}
#lostPasswordForm label {
color: #000;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
}
#lostPasswordForm input {
border: 1px solid #DFDFDF;
border-radius: 8px;
height: 55px;
}
#lostPasswordForm button[type=submit]{
background: #004F82;
color: white;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
border: none;
outline: none;
width: 150px;
padding: 10px;
border-radius: 8px !important;
}
#lostPasswordForm button[type=submit]:hover,
#lostPasswordForm button[type=submit]:active {
border-radius: 8px;
}
#lostPasswordModal .modal-header {
border-bottom: 0;
}
#footer a {
text-decoration: none;
color: #fff;
}
#footer {
background: #1E1E1E;
color:#fff;
}
.link {
width: fit-content;
text-decoration: none;
color: #004F82;
font-size: 16px;
font-weight: 500;
line-height: 22.4px;
}
.form-label {
color: #1f3c56;
font-weight: bold;
}
.form-check-label {
color: #000;
}
#loginForm .form-check-label {
top:2px;
}
.link-arrow {
background-image: url('data:image/svg+xml,');
background-position: right;
background-repeat: no-repeat;
padding-right: 20px;
}
.form .btn-submit {
height: 56px;
background: #004F82 !important;
color: #fff;
font-size: 16px;
font-weight: 500;
outline: none;
border: none;
border-radius: 8px !important;
}
.form button:focus,
.form button:active{
outline: none;
border: none;
}
.form input[type=checkbox] {
border: 2px solid #4E4E4E;
border-radius: 2px;;
}
.form input.form-control ,
.form .form-select {
border: 1px solid #DFDFDF;
height: 48px;
border-radius: 8px;
}
.form textarea.form-control {
border: 1px solid #DFDFDF;
border-radius: 8px;
resize: none;
}
.form input[type="checkbox"]:checked {
background-color: #004F82;
}
.login-form-c p {
color: #4E4E4E;
}
.login-form-c .link {
color: #004F82 !important;
}
.login-form-c h1 {
color: #1E1E1E;
font-size: 26px;
font-weight: 500;
line-height: 44.8px;
}
.login-form-c--claim h1 {
margin-bottom: 1rem !important;
}
.portal-claim-listing-preview--login {
width: 100%;
}
.portal-claim-listing-preview--login .portal-claim-listing-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.95rem;
line-height: 1.35;
}
.portal-claim-listing-preview--login .portal-claim-listing-photo {
width: 120px;
height: 90px;
}
@media (max-width: 575.98px) {
.portal-claim-listing-preview--login .portal-claim-listing-photo {
width: 100%;
max-width: 100%;
height: 140px;
margin-right: 0;
margin-bottom: 0.75rem;
}
}
.hr-1 {
background: #DFDFDF;
height: 1px;
width: 100%;
}
/* testimonials */
#testimonialCarousel .d-flex.overflow-auto::-webkit-scrollbar{
display: none;
}
#testimonialCarousel .card-container {
scroll-snap-align: start;
}
#testimonialCarousel .d-flex.overflow-auto{
scroll-snap-type: x mandatory;
}
.testimonial .header {
color: #1E1E1E;
font-size: 32px;
font-weight: 500;
line-height: 44.8px;
}
.testimonial .card {
height: 500px;
background: #F2F6F8;
border:1px solid #F2F6F8;
}
.testimonial img {
width: 80px;
height: 102px;
border-radius: 5px;
object-fit: cover;
}
.testimonial .card-body p {
font-size: 16px;
font-weight: 400;
color: #000000;
}
.testimonial .card-body p.feedback {
color: #004F82;
font-size: 22px;
font-weight: 450;
line-height: 33.6px;
}
.testimonial .user-info {
border-top: 1px solid #DFDFDF;
padding-top: 25px;
min-height: 121px;
column-gap: 15px;
}
.testimonial .user-info h6 {
font-size: 14px;
font-weight: 500;
color: #000;
}
.testimonial .user-info .text-muted {
font-size: 12px;
font-weight: 400;
color: #4E4E4E !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.testimonial .user-info > .d-flex {
min-width: 0;
}
.testimonial .user-info .type {
border-radius: 4px;
background: rgba(0, 79, 130, 0.10);
color: #004F82 !important;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
line-height: 140%;
letter-spacing: -0.28px;
}
@media (max-width: 768px) {
.testimonial .header {
font-size: 28px;
}
.testimonial button {
width: 32px;
padding: 0 !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
}
}
/* carousel */
.carousel-btns .c-btn {
height: 32px;
width: 38px;
background-repeat: no-repeat;
background-position: 50%;
background-color: #fff;
}
.carousel-btns .c-btn.next {
background-image: url('data:image/svg+xml, ');
}
.carousel-btns .c-btn.prev {
background-image: url('data:image/svg+xml, ');
}
.carousel-btns .c-btn:hover,
.carousel-btns .c-btn:focus,
.carousel-btns .c-btn.focused,
.carousel-btns .c-btn:active{
background-color: #004F82;
color: white;
border-color: #004F82;
box-shadow: none;
}
.carousel-btns .c-btn.prev:hover,
.carousel-btns .c-btn.prev:focus,
.carousel-btns .c-btn.prev.focused,
.carousel-btns .c-btn.next.focused:active:focus {
box-shadow: none;
background-repeat: no-repeat;
background-position: 50%;
background-image: url('data:image/svg+xml, ');
}
.carousel-btns .c-btn.next:hover,
.carousel-btns .c-btn.next:focus,
.carousel-btns .c-btn.next.focused,
.carousel-btns .c-btn.next.focused:active:focus{
box-shadow: none;
background-repeat: no-repeat;
background-position: 50%;
background-image: url('data:image/svg+xml, ');
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.9));
}
.carousel-item .row,
.carousel-item .col,
.carousel-item img,
.carousel-item > * {
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
/**/
.arrow-back {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: 0% 100%;
padding-left: 1.5rem !important;
}
.dhn-blue {
color: #004F82;
}
#main>.container {
padding-top: 20px;
}
.terms, .privacy {
font-size: 12px;
color: #4E4E4E !important;
}
.terms p,
.privacy p {
margin-bottom : 30px;
}
.terms a,
.privacy a {
color: #004F82 !important;
font-weight: 500;
font-size:16px;
}
.nav-link {
color: #004F82 !important;
font-weight: 500;
font-size:16px;
}
.navbar .dropdown:not(#mobileNavBar .dropdown){
margin-right: 3rem!important;
}
.dropdown-menu {
border-radius: 0 0 4px 4px;
box-shadow: 25px 25px 25px -25px rgba(0, 0, 0, 0.1), 25px 25px 25px -25px rgba(0, 0, 0, 0.1), -25px 25px 25px -25px rgba(0, 0, 0, 0.1);
border: none;
}
.dropdown-toggle::after {
content: unset;
}
.dropdown-toggle {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: 100% 50%;
padding-right: 25px;
}
#menu .dropdown .dropdown-menu {
display: none;
padding-top: 15px;
background: transparent;
padding-bottom: 0;
position: absolute;
z-index:1000;
}
#mobileNavBar .dropdown-menu {
position: static !important;
}
.dropdown-menu li,
.navbar-nav li {
padding: 5px;
background: #FFF;
}
@media (min-width: 992px) {
#menu .dropdown:hover .dropdown-menu, #menu .dropdown.show .dropdown-menu {
display: block;
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.dropdown-menu .nav-link {
line-height: 10px ;
}
.dropdown-menu .nav-link:hover {
background: rgba(112, 112, 112, 0.05) !important;
}
#menu {
height: 85px;
}
#mobileNavBar {
position: fixed;
top: 58px;
width: 100%;
padding-left: 10px;
padding-right: 10px;
border-bottom: 1px solid #E9E9E9;
}
@media (max-width: 768px) {
.back-logo img {
height: 32px;
margin-left: 0;
}
.navbar-nav > li {
padding: 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dropdown-menu li, .navbar-nav li {
padding: 2px;
}
.dropdown-menu .nav-link {
line-height: 40px !important;
}
.dropdown-menu.show {
display: block !important;
}
#menu .dropdown .dropdown-menu {
padding-top: 0;
}
.navbar-nav {
background: #FFF;
padding-right: .5rem !important;
padding-left: .5rem !important;
}
.dropdown-toggle {
background-position: 94% 50%;
}
.nav-link {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
font-weight: 500 !important;
}
#menu .nav-item .nav-link {
border-bottom: 0;
}
.dropdown-menu {
border-radius: 6px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
margin-bottom: 10px;
}
#menu {
height: 67px;
position: fixed;
top: 0;
width: 100%;
}
#mobileNavBar {
top: 51px;
}
#main {
padding-top: 60px;
}
}
#menu .dropdown .dropdown-menu > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-toggler.is-open .navbar-toggler-icon {
background-image:url('data:image/svg+xml,') !important;
transform: rotate(90deg);
}
@media (min-width: 576px) {
#mobileNavBar {
display: none !important;
}
}
.form-check {
min-height: 1.5rem;
}
.gap-1 {
gap: .25rem !important;
}
.ps-4 {
padding-left: 1.5rem!important
}
.form-select {
--bs-form-select-bg-img : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
display: block;
width: 100%;
padding: .375rem 2.25rem .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
border: 1px solid #ced4da;
outline: none;
}
.form-check-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1em;
height: 1em;
}
.form-check-input:checked[type=checkbox] {
background-image : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}
.ps-2 {
padding-left: .5rem !important;
}
.fw-bold {
font-weight: 700 !important;
}
.nav-link-end {
margin-left: 1rem!important;
margin-right: 3rem!important;
}
/**/
#lostPasswordModal .btn-close {
--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
width: 32px;
height: 32px;
border: 0;
border-radius: .375rem;
opacity: 0.5;
background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
}
.portal-listings-title {
color: var(--dhn-blue);
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 1rem;
}
.portal-package-renewal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem 1.25rem;
margin: 0 0 1rem;
padding: 0.75rem 1rem;
border: 1px solid #e0c36a;
border-radius: 0.35rem;
background: #fff8dc;
}
.portal-package-renewal-cta {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0.45rem 1rem;
border: 1px solid #1f7a2e;
border-radius: 6px;
background: linear-gradient(180deg, #3cb54a 0%, #2d9a3a 55%, #268833 100%);
color: #fff;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.portal-package-renewal-cta:hover,
.portal-package-renewal-cta:focus {
color: #fff;
background: linear-gradient(180deg, #45c454 0%, #318f3d 55%, #287d33 100%);
text-decoration: none;
}
.portal-package-renewal-cta:focus-visible {
outline: 2px solid var(--dhn-blue);
outline-offset: 2px;
}
.portal-package-renewal-details {
color: #212529;
font-size: 1rem;
line-height: 1.35;
}
.portal-package-renewal-alert {
color: #c00;
font-weight: 700;
margin-bottom: 0.15rem;
}
.portal-package-renewal-plan {
font-weight: 600;
}
.portal-listing-subscription {
margin-top: 0.35rem;
font-size: 0.8rem;
line-height: 1.35;
color: #212529;
}
.portal-listing-subscription-status-row {
text-align: center;
}
.portal-listing-subscription-status {
display: inline-block;
padding: 0.38rem 0.8rem;
border: 1px solid #d7b55a;
border-radius: 999px;
background: #fff8dc;
color: #68521b;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
text-transform: capitalize;
}
.portal-listing-subscription-panel {
max-width: 11.5rem;
margin: 0.4rem auto 0;
text-align: left;
}
.portal-listing-subscription-meta {
margin-bottom: 0.4rem;
color: #6c757d;
font-size: 0.75rem;
}
.portal-listing-subscription-meta-row {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.4rem;
align-items: baseline;
}
.portal-listing-subscription-meta-label {
white-space: nowrap;
}
.portal-listing-subscription-meta-value {
min-width: 0;
}
.portal-listing-subscription-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
}
.portal-listing-subscription-actions .portal-listing-sub-btn {
width: 100%;
box-sizing: border-box;
text-align: center;
font-size:12px !important;
}
.portal-listing-sub-btn {
font-size: 0.75rem;
padding: 0.2rem 0.55rem;
white-space: nowrap;
}
.portal-listing-subscription-note {
margin-top: 0.3rem;
font-size: 0.7rem;
font-style: italic;
color: #6c757d;
line-height: 1.35;
text-align: center;
text-wrap: pretty;
}
.portal-listing-sub-renew-form {
margin: 0;
}
.portal-listing-sub-renew-form .portal-listing-sub-btn {
width: 100%;
box-sizing: border-box;
}
.portal-listing-ad-checkout {
margin-top: 0.45rem;
}
.portal-listing-activate-renew-pay {
white-space: nowrap;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
.portal-listings-tabs .btn {
margin-bottom: 0.35rem;
}
/*
* Segmented filters (Active/Inactive, All inactive/ListHub).
* Legacy /portal/assets5 overrides .btn-primary to a pale mint fill + dark text,
* which makes the selected option look quieter than outline. Force standard
* selected = solid brand blue / white text; unselected = white / blue border.
*/
.portal-listings-tabs .btn,
.portal-listings-subfilters .btn {
font-weight: 600;
border-width: 1px;
box-shadow: none;
}
.portal-listings-tabs .btn-outline-primary,
.portal-listings-subfilters .btn-outline-primary,
.portal-listings-tabs .btn[aria-pressed="false"],
.portal-listings-subfilters .btn[aria-pressed="false"] {
background-color: #fff;
border-color: var(--dhn-blue);
color: var(--dhn-blue) !important;
}
.portal-listings-tabs .btn-outline-primary:hover,
.portal-listings-subfilters .btn-outline-primary:hover,
.portal-listings-tabs .btn[aria-pressed="false"]:hover,
.portal-listings-subfilters .btn[aria-pressed="false"]:hover {
background-color: #e7eff7;
border-color: var(--dhn-blue);
color: var(--dhn-blue);
}
.portal-listings-tabs .btn-primary,
.portal-listings-subfilters .btn-primary,
.portal-listings-tabs .btn[aria-pressed="true"],
.portal-listings-subfilters .btn[aria-pressed="true"],
.portal-listings-tabs .btn-primary:hover,
.portal-listings-subfilters .btn-primary:hover,
.portal-listings-tabs .btn-primary:focus,
.portal-listings-subfilters .btn-primary:focus,
.portal-listings-tabs .btn-primary:active,
.portal-listings-subfilters .btn-primary:active,
.portal-listings-tabs .btn[aria-pressed="true"]:hover,
.portal-listings-subfilters .btn[aria-pressed="true"]:hover,
.portal-listings-tabs .btn[aria-pressed="true"]:focus,
.portal-listings-subfilters .btn[aria-pressed="true"]:focus {
background-color: var(--dhn-blue);
border-color: var(--dhn-blue);
color: #fff;
}
.portal-listings-tabs .btn-primary:hover,
.portal-listings-subfilters .btn-primary:hover,
.portal-listings-tabs .btn[aria-pressed="true"]:hover {
background-color: #003d66;
border-color: #003d66;
color: #fff;
}
.portal-listings-tabs .btn:focus-visible,
.portal-listings-subfilters .btn:focus-visible {
outline: 2px solid var(--dhn-blue);
outline-offset: 2px;
box-shadow: 0 0 0 0.15rem rgba(0, 79, 130, 0.25);
}
.portal-listings-table-wrap {
border: 1px solid #d0d7de;
border-radius: 0.5rem;
background: #fff;
overflow-x: auto;
}
.portal-listings-table {
--portal-listings-border: #d8e0e8;
margin-bottom: 0;
width: 100%;
min-width: 780px;
border-collapse: separate;
border-spacing: 0;
}
.portal-listings-table thead th {
background: #e8f0f8;
color: #1a3355;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
vertical-align: bottom;
padding: 0.55rem 0.5rem;
border-bottom: 1px solid #c5d0de;
}
.portal-listings-table td {
padding: 0.45rem 0.5rem;
vertical-align: top;
border-top: 0;
/* border-bottom: 1px solid var(--portal-listings-border); */
font-size: 0.875rem;
}
.portal-listings-table.is-active .portal-listings-main-row td,
.portal-listings-table.is-active .portal-listings-tools-row td,
.portal-listings-table.is-active .portal-listings-site-stats > td {
background: #f7f9fb;
}
.portal-listings-table.is-inactive .portal-listings-main-row td,
.portal-listings-table.is-inactive .portal-listings-tools-row td,
.portal-listings-table.is-inactive .portal-listings-site-stats > td {
background: #fff;
}
.portal-listings-main-row.table-warning td,
.portal-listings-tools-row.table-warning td,
.portal-listings-site-stats.table-warning > td {
background-color: #fff3cd;
}
.portal-listings-main-row.table-warning td,
.portal-listings-tools-row.table-warning td,
.portal-listings-site-stats.table-warning > td {
background-color: #fff3cd;
}
.portal-listings-col-listing {
min-width: 23rem;
}
.portal-listings-col-preview {
width: 5.5rem;
}
.portal-listings-col-date {
width: 5.75rem;
white-space: nowrap;
text-align: center;
}
.portal-listings-col-expires {
min-width: 11rem;
}
.portal-listings-expiry-date {
color: #343a40;
font-size: 0.8rem;
font-weight: 600;
text-wrap: wrap;
}
.portal-listings-col-stat {
width: 4.25rem;
text-align: center;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.portal-listing-identity {
display: flex;
align-items: flex-start;
gap: 0.65rem;
min-width: 0;
}
.portal-favorites-thumb {
display: block;
width: 180px;
height: 135px;
object-fit: cover;
}
.portal-listing-thumb {
display: flex;
flex: 0 0 185px;
align-items: center;
justify-content: center;
width: 185px;
height: 135px;
overflow: hidden;
border: 1px solid #cbd5df;
border-radius: 0.4rem;
background: #eef3f7;
color: #5a6278;
font-size: 0.7rem;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.portal-listing-thumb:hover,
.portal-listing-thumb:focus {
border-color: var(--dhn-blue);
}
.portal-listing-thumb.is-readonly {
cursor: default;
}
.portal-listing-thumb.is-readonly:hover,
.portal-listing-thumb.is-readonly:focus {
border-color: #cbd5df;
}
.portal-listing-thumb img {
display: block;
width: 185px;
height: 135px;
object-fit: cover;
}
.portal-listing-identity-details {
min-width: 0;
gap: 0.15rem;
display: flex;
flex-direction: column;
}
.portal-listing-title {
display: block;
color: #003d66;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
font-size: 1rem;
}
.portal-listing-title:hover {
text-decoration: underline;
}
.portal-listing-title.is-readonly {
cursor: default;
}
.portal-listing-title.is-readonly:hover {
text-decoration: none;
}
.portal-listing-address,
.portal-listing-geography,
.portal-listing-meta,
.portal-listing-user-note {
font-size: 0.9rem;
line-height: 1.35;
}
.portal-listing-address {
margin-top: 0.1rem;
color: #343a40;
}
.portal-listing-geography {
color: #5a6278;
}
.portal-listing-meta {
display: flex;
flex-wrap: wrap;
gap: 0.1rem 0;
margin-top: 0.2rem;
color: #68727d;
}
.portal-listing-meta span::before {
content: "ยท";
margin: 0 0.32rem;
color: #9aa5af;
}
.portal-listing-meta .portal-listing-ad-id::before {
content: none;
margin: 0;
}
.portal-listing-meta a {
color: var(--dhn-blue);
text-decoration: none;
}
.portal-listing-meta a:hover {
text-decoration: underline;
}
.portal-listing-ad-line {
margin-top: 0.2rem;
}
.portal-listing-mls {
margin-top: 0.1rem;
color: #68727d;
font-size: 0.8rem;
line-height: 1.35;
}
.portal-listing-ad-line .portal-listing-ad-id {
color: var(--dhn-blue);
font-weight: 700;
text-decoration: none;
}
.portal-listing-ad-line a.portal-listing-ad-id:hover {
text-decoration: underline;
}
.portal-listing-meta > span:first-child::before {
content: none;
margin: 0;
}
.portal-listing-user-note {
margin-top: 0.2rem;
color: #b02a37;
}
.portal-site-tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.portal-site-tag-form {
display: inline-block;
margin: 0;
}
.portal-site-tag {
display: inline-block;
border: 1px solid #9eb4c8;
border-radius: 0.25rem;
background: #f4f8fb;
color: var(--dhn-blue);
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
padding: 0.2rem 0.35rem;
cursor: pointer;
text-decoration: none;
}
.portal-site-tag:hover {
background: #e7eff7;
border-color: var(--dhn-blue);
color: #003a61;
}
.portal-listings-tools-row td {
padding-top: 0.4rem;
padding-bottom: 0.65rem;
/* border-bottom: 1px solid #b7c5d3; */
vertical-align: middle;
}
.portal-listings-stats-cell {
text-align: center;
white-space: nowrap;
}
.portal-listings-stats-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 100%;
margin: 0;
padding: 0.25rem 0.5rem;
border: 0;
color: var(--dhn-blue);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
background:none;
justify-content: flex-start;
padding-left: 0;
padding-right: 0;
}
/* .portal-listings-stats-toggle:hover,
.portal-listings-stats-toggle[aria-expanded="true"] {
background: #e7eff7;
border-color: var(--dhn-blue);
}
.portal-listings-stats-toggle-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 1.15rem;
height: 1.15rem;
border-radius: 0.2rem;
background: var(--dhn-blue);
color: #fff;
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
} */
.portal-listings-stats-toggle-icon {
display: block;
flex: 0 0 16px;
width: 16px;
height: 16px;
background: url("/assets/img/portal-mobile-menu-open.svg?1") center / contain no-repeat;
background-size: 70%;
}
.portal-listings-stats-toggle[aria-expanded="true"] .portal-listings-stats-toggle-icon {
background-image: url("/assets/img/portal-mobile-menu-close.svg?1");
}
.portal-listings-stats-toggle-label {
white-space: nowrap;
margin-top: 1px;
}
.portal-listings-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem 0.75rem;
}
.portal-listings-edit-link {
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
color: var(--dhn-blue);
}
.portal-listings-edit-link:hover {
text-decoration: underline;
}
.portal-listings-action-form {
display: inline;
margin: 0;
}
.portal-listings-site-stats-table thead th {
font-size: 0.85rem;
}
.portal-listings-group > tr:last-child td{
border-bottom: 1px solid #c5d0de;
}
.portal-listings-group > tr:first-child td{
padding-top: 1rem;
padding-bottom: 1rem;
}
.portal-listings-site-stats > td {
border-top: 0;
padding: 0 0.5rem 0.75rem;
vertical-align: top;
overflow: hidden;
}
.portal-listings-site-stats-spacer {
background: #eef4f8;
}
.portal-listings-site-stats[hidden] {
display: none !important;
}
.portal-listings-tools-row td.portal-listings-stats-cell:has(.portal-listings-stats-toggle) {
text-align: left;
}
.portal-listings-site-stats-inner {
margin: 0 auto;
padding: 0.55rem 0.65rem;
/* border: 1px solid #c5d2de; */
/* border-radius: 0.35rem; */
background: #fff;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin-left: auto;
margin-right: 0;
overflow-x: auto;
}
.portal-listings-site-stats-table {
margin-bottom: 0;
font-size: 0.82rem;
width: 100%;
max-width: 100%;
table-layout: fixed;
border: 1px solid #e6ebf0;
}
.portal-listings-site-stats-table th,
.portal-listings-site-stats-table td {
padding: 0.3rem 0.45rem;
border-bottom: 1px solid #e6ebf0;
text-align: center;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.portal-listings-site-stats-table th:first-child,
.portal-listings-site-stats-table td:first-child {
/* text-align: left; */
/* width: 40%; */
white-space: normal;
overflow-wrap: anywhere;
}
.portal-listings-site-stats-table th {
background: #eef3f7;
color: var(--dhn-blue);
font-weight: 700;
border-bottom-color: #c5d2de;
}
.portal-listings-emails-link {
font-weight: 700;
text-decoration: none;
color: #0d6efd;
}
.portal-listings-emails-link.is-zero {
color: #6c757d;
font-weight: 500;
}
.portal-listings-emails-link:hover {
text-decoration: underline;
}
@media (max-width: 767.98px) {
.portal-listings-searchbar .row.w-100.justify-content-end {
justify-content: flex-start !important;
width: 100% !important;
margin: 0;
}
.portal-listings-searchbar .d-flex.align-items-end {
width: 100%;
flex-wrap: wrap;
gap: 0.6rem;
align-items: flex-end !important;
}
.portal-listings-searchbar .d-flex.align-items-end > div {
min-width: 0;
padding: 0;
margin: 0 !important;
}
.portal-listings-searchbar .d-flex.align-items-end > .col-auto {
flex: 1 1 calc(50% - 0.3rem);
}
.portal-listings-searchbar .d-flex.align-items-end > .col-auto:last-child {
flex: 1 1 100%;
}
.portal-listings-searchbar .form-select,
.portal-listings-searchbar .form-control,
.portal-listings-searchbar .link-btn {
width: 100%;
}
.portal-listings-searchbar .search-input-container.d-flex {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap;
align-items: stretch !important;
width: 100%;
gap: 0.5rem;
}
.portal-listings-searchbar .search-input-container > div {
flex: 0 0 auto !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.portal-listings-searchbar .search-input-container input,
.portal-listings-searchbar .search-input-container button {
width: 100% !important;
height: 38px;
}
.portal-listings-searchbar .col-md-6,
.portal-listings-searchbar .col-md-6 .row,
.portal-listings-searchbar .col-md-6 form {
width: 100%;
max-width: 100%;
}
.portal-listings-searchbar .col-md-6 form.row {
display: block;
margin-left: 0;
margin-right: 0;
}
}
.portal-spotlight-table .portal-spotlight-emails-link {
color: var(--dhn-blue);
font-weight: 700;
text-decoration: underline;
}
.portal-spotlight-table .portal-spotlight-emails-link:hover {
color: #003d66;
}
.search-input-container input {
height: 38px;
width: 30vh;
}
.search-input-container button {
height: 38px;
}
.portal-listings-refresh-link {
background-image: url('data:image/svg+xml,') !important;
background-repeat: no-repeat !important;
background-position: 7% 55% !important;
background-color: transparent !important;
padding-left: 25px !important;
text-decoration: none !important;
}
.portal-listings-activity {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
gap: 1rem 1.5rem;
margin-top: 1.25rem;
padding-top: 0.75rem;
}
.portal-listings-wheres-ad {
display: flex;
align-items: flex-start;
gap: 0.75rem;
max-width: 22rem;
padding: 0.85rem 1rem;
border: 1px solid #f0c36d;
border-radius: 0.4rem;
background: linear-gradient(180deg, #fff8e1 0%, #ffefc2 100%);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.portal-listings-wheres-ad-badge {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--dhn-blue);
color: #fff;
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
}
.portal-listings-wheres-ad-body {
min-width: 0;
}
.portal-listings-wheres-ad-title {
color: var(--dhn-blue);
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 0.25rem;
line-height: 1.2;
}
.portal-listings-wheres-ad-copy {
color: #5a4630;
font-size: 0.85rem;
line-height: 1.35;
margin: 0 0 0.65rem;
}
.portal-listings-wheres-ad-btn {
font-weight: 700;
}
.portal-listings-activity-table {
min-width: 22rem;
border: 1px solid #c5d2de;
background: #fff;
}
.portal-listings-activity-table th,
.portal-listings-activity-table td {
border: 1px solid #c5d2de;
padding: 0.4rem 0.65rem;
text-align: center;
vertical-align: middle;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.portal-listings-activity-table thead th {
background: #dddddd;
color: #212529;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2;
}
.portal-listings-activity-table tbody th {
text-align: left;
color: var(--dhn-blue);
font-weight: 700;
background: #fff;
}
.portal-listings-activity-table tbody td {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-listings-activity-all th,
.portal-listings-activity-all td {
font-weight: 700;
}
@media (max-width: 767.98px) {
.portal-listings-activity-table {
border: 0;
}
.portal-listings-activity {
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
}
.portal-listings-wheres-ad {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.portal-listings-wheres-ad-btn {
display: block;
width: 100%;
text-align: center;
}
.portal-listings-activity .table-responsive {
width: 100%;
overflow: visible;
}
.portal-listings-activity-table {
min-width: 0;
width: 100%;
}
.portal-listings-activity-table thead {
display: none;
}
.portal-listings-activity-table,
.portal-listings-activity-table tbody,
.portal-listings-activity-table tr,
.portal-listings-activity-table th,
.portal-listings-activity-table td {
display: block;
width: 100%;
}
.portal-listings-activity-table tr {
margin: 0 0 0.75rem;
padding: 0.65rem 0.75rem;
border: 1px solid #c5d2de;
background: #fff;
}
.portal-listings-activity-table tr:last-child {
margin-bottom: 0;
}
.portal-listings-activity-table th,
.portal-listings-activity-table td {
border: 0;
padding: 0.25rem 0;
text-align: left;
white-space: normal;
}
.portal-listings-activity-table tbody th {
margin-bottom: 0.35rem;
font-size: 1rem;
}
.portal-listings-activity-table tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.portal-listings-activity-table tbody td::before {
content: attr(data-label);
color: #68727d;
font-weight: 700;
}
}
.portal-listings-loading {
opacity: 0.65;
pointer-events: none;
}
.portal-listings-footnote code {
font-size: 0.85em;
}
.portal-listings-sort {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
gap: 0.75rem;
}
.portal-listings-sort-field {
min-width: 0;
}
.portal-listings-sort .form-select {
width: auto;
min-width: 10rem;
}
@media (max-width: 767.98px) {
.portal-listings-sort {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
width: 100%;
}
.portal-listings-sort-field,
.portal-listings-sort-go {
width: 100%;
}
.portal-listings-sort .form-select,
.portal-listings-sort-go .link-btn {
width: 100%;
min-width: 0;
height: 38px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
.portal-listings-edit-desktop {
display: contents;
}
.portal-listings-edit-toggle,
.portal-listings-edit-menu {
display: none;
}
.portal-listings-header-row th {
background: #e8f0f8;
color: #1a3355;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
vertical-align: middle;
padding: 0.55rem 0.5rem;
border-bottom: 1px solid #c5d0de;
}
.portal-listings-header-row th.portal-listings-col-listing {
white-space: normal;
text-align: left;
}
.portal-listings-header-row th {
border-top: 1px solid #d0d7de;
}
@media (max-width: 767.98px) {
.portal-listings-header-row {
display: block;
width: 100%;
padding: 0.45rem 0.75rem;
background: #e8f0f8;
}
.portal-listings-header-row th {
display: none;
border: 0;
padding: 0;
background: transparent;
}
.portal-listings-header-row th:first-child {
display: block;
width: 100%;
white-space: normal;
font-size: 1rem;
font-weight: 700;
color: var(--dhn-blue);
}
.portal-listings-edit-desktop {
display: none;
}
.portal-listings-edit-toggle {
display: block;
width: 100%;
text-align: center;
}
.portal-listings-edit-menu {
display: none;
}
.portal-listings-actions,
.portal-listings-actions.mt-3 {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
margin-top: 0.5rem;
}
.portal-listings-action-form {
display: block;
width: 100%;
margin: 0;
}
.portal-listings-actions .primary-btn,
.portal-listings-actions .primary-link,
.portal-listings-actions .link-btn,
.portal-favorites-table .primary-btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.portal-listings-table-wrap {
overflow-x: visible;
background: #fff !important;
border: 0 !important;
border-radius: 0;
}
.portal-listings-table tr.portal-listings-card-spacer,
.portal-listings-table tr.portal-listings-card-spacer td {
display: block;
width: 100%;
height: 0.85rem;
margin: 0;
padding: 0;
border: 0;
/* background: #fff; */
}
.portal-listings-table {
min-width: 0;
}
.portal-listings-table thead {
display: none;
}
.portal-listings-table,
.portal-listings-table tbody,
.portal-listings-table tr,
.portal-listings-table td {
display: block;
width: 100%;
}
.portal-listings-main-row {
padding: 0.7rem 0.75rem 0;
border-bottom: 0;
}
.portal-listings-main-row td {
padding: 0;
border: 0;
background: transparent;
}
.portal-listing-identity {
flex-direction: column;
align-items: stretch;
}
.portal-listing-thumb {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
height: auto;
min-height: 135px;
}
.portal-listings-table tr.portal-listings-main-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem 0.75rem;
width: 100%;
border-bottom: 1px solid #DFDFDF;
padding-bottom: 20px;
}
.portal-listings-main-row .portal-listings-col-listing,
.portal-listings-main-row .portal-listings-col-preview,
.portal-listings-main-row .portal-listings-col-date {
grid-column: 1 / -1;
width: 100%;
margin: 0;
}
.portal-listings-main-row .portal-listings-col-preview,
.portal-listings-main-row .portal-listings-col-date,
.portal-listings-main-row .portal-listings-col-stat {
display: flex;
align-items: center;
gap: 0.5rem;
text-align: left;
}
.portal-listings-main-row .portal-listings-col-expires {
align-items: flex-start !important;
}
.portal-listings-main-row .portal-listings-col-stat:nth-last-child(4) {
grid-column: 1;
}
.portal-listings-main-row .portal-listings-col-preview::before,
.portal-listings-main-row .portal-listings-col-date::before,
.portal-listings-main-row .portal-listings-col-stat::before {
display: inline;
flex: 0 0 4.75rem;
margin: 0;
color: #68727d;
font-size: 0.9rem;
font-weight: 700;
}
.portal-listings-main-row .portal-listings-col-preview::before { content: "Preview"; }
.portal-listings-main-row .portal-listings-col-date:nth-child(3)::before { content: "Added"; }
.portal-listings-main-row .portal-listings-col-date:nth-child(4)::before { content: "Expires"; padding-top: 1px;}
.portal-listings-main-row .portal-listings-col-stat:nth-last-child(4)::before { content: "Hits"; }
.portal-listings-main-row .portal-listings-col-stat:nth-last-child(3)::before { content: "Total"; }
.portal-listings-main-row .portal-listings-col-stat:nth-last-child(2)::before { content: "Clicks"; }
.portal-listings-main-row .portal-listings-col-stat:last-child::before { content: "Emails"; }
.portal-listings-group > tr:first-child td {
padding-top: 0;
padding-bottom: 0;
}
.portal-listings-tools-row {
padding: 0 0.75rem 0.75rem;
border-bottom: 0;
}
.portal-listings-tools-row td {
display: block;
width: 100%;
padding: 0.6rem 0 0;
border: 0;
background: transparent;
text-align: left;
}
.portal-listings-group > tr:last-child td,
.portal-listings-tools-row td {
border-bottom: 0;
}
.portal-listings-stats-cell {
text-align: left;
}
.portal-listings-expiry-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
min-width: 0;
}
.portal-listings-col-expires .portal-listings-expiry-date {
white-space: nowrap;
}
.portal-listings-col-expires .portal-listing-ad-checkout {
margin-top: 0;
}
.portal-listings-main-row .portal-listings-col-date,
.portal-listings-main-row .portal-listings-col-expires {
flex-wrap: wrap;
align-items: flex-start;
}
.portal-listings-main-row .portal-listing-subscription {
flex: 1 1 100%;
width: 100%;
margin-top: 0.35rem;
}
.portal-listings-main-row .portal-listing-subscription-panel {
max-width: none;
margin-left: 0;
margin-right: 0;
}
.portal-listings-main-row .portal-listing-subscription-note {
text-align: left;
max-width: none;
}
.portal-listings-site-stats {
padding: 0 0.75rem 0.75rem;
background: #eef4f8;
}
.portal-listings-site-stats > td {
display: none;
}
.portal-listings-site-stats > td:last-child {
display: block;
width: 100%;
padding: 0;
background: transparent;
}
.portal-listings-table td,
.portal-listings-table td :not(.portal-listing-thumb):not(img),
.portal-listings-table td::before {
font-size: 1rem;
line-height: 1.35;
}
.portal-listing-mls{
font-size: 0.8rem !important;
}
.portal-listings-stats-toggle {
justify-content: flex-start;
padding-left: 0;
padding-right: 0;
}
.portal-listings-site-stats {
display: none !important;
}
.portal-listings-edit-sheet-body .portal-listings-edit-menu,
#portal-listings-edit-sheet .portal-listings-edit-menu {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
}
.portal-listings-actions .primary-btn,
.portal-listings-actions .link-btn,
.portal-listings-edit-sheet-body .primary-btn {
min-height: 2.5rem;
padding: 0.45rem 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.portal-listings-actions-links,
.portal-listings-actions.mt-3 {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 0.75rem 1.1rem;
margin-top: 0.65rem;
}
.portal-listings-actions-links .portal-listings-action-form,
.portal-listings-actions.mt-3 .portal-listings-action-form {
display: inline;
width: auto;
}
.portal-listings-actions-links .primary-link,
.portal-listings-actions.mt-3 .primary-link {
display: inline;
width: auto;
text-align: left;
}
#portal-listings-edit-sheet-title {
margin-bottom: 0.75rem;
}
#portal-listings-edit-sheet-ad {
margin-top: 0;
margin-bottom: 0.15rem;
}
.portal-listing-ad-checkout {
margin-top: 0;
}
#portal-listings-edit-sheet-title,
#portal-listings-stats-sheet-title {
margin-bottom: 0.75rem;
}
#portal-listings-edit-sheet-ad,
#portal-listings-stats-sheet-ad {
margin-top: 0;
margin-bottom: 0.15rem;
}
}
body.portal-listings-stats-sheet-open {
overflow: hidden;
}
.portal-listings-stats-sheet[hidden] {
display: none !important;
}
.portal-listings-stats-sheet {
display: none;
}
@media (max-width: 767.98px) {
.portal-listings-stats-sheet {
display: block;
position: fixed;
inset: 0;
z-index: 1040;
pointer-events: none;
}
.portal-listings-stats-sheet.is-open {
pointer-events: auto;
}
.portal-listings-stats-sheet-backdrop {
position: absolute;
inset: 0;
background: rgba(17, 24, 32, 0.45);
opacity: 0;
transition: opacity 0.2s ease;
}
.portal-listings-stats-sheet.is-open .portal-listings-stats-sheet-backdrop {
opacity: 1;
}
.portal-listings-stats-sheet-panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
max-height: min(80vh, 36rem);
padding: 0.4rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
background: #fff;
border-radius: 0.75rem 0.75rem 0 0;
box-shadow: 0 -8px 24px rgba(17, 24, 32, 0.18);
transform: translateY(100%);
transition: transform 0.24s ease;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.portal-listings-stats-sheet.is-open .portal-listings-stats-sheet-panel {
transform: translateY(0);
}
.portal-listings-stats-sheet-handle {
width: 2.5rem;
height: 0.28rem;
margin: 0.35rem auto 0.65rem;
border-radius: 999px;
background: #c5d0de;
}
.portal-listings-stats-sheet-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
text-align: left;
}
.portal-listings-stats-sheet-header > div {
flex: 1;
min-width: 0;
padding-left: 0;
}
.portal-listings-stats-sheet-title {
margin: 0;
color: var(--dhn-blue);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.portal-listings-stats-sheet-title,
.portal-listings-stats-sheet-listing {
text-align: left;
}
.portal-listings-stats-sheet-listing {
margin: 0.15rem 0 0;
color: #68727d;
font-size: 0.9rem;
line-height: 1.35;
}
.portal-listings-stats-sheet-close {
flex: 0 0 28px;
width: 28px;
height: 28px;
margin: 0;
padding: 0;
border: 0;
background: url("/assets/img/portal-mobile-menu-close.svg?1") center / 16px 16px no-repeat;
cursor: pointer;
}
.portal-listings-stats-sheet-body {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.portal-listings-stats-sheet .portal-listings-site-stats-table {
display: table;
width: 100%;
max-width: 100%;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
}
.portal-listings-stats-sheet .portal-listings-site-stats-table thead {
display: table-header-group;
}
.portal-listings-stats-sheet .portal-listings-site-stats-table tbody {
display: table-row-group;
}
.portal-listings-stats-sheet .portal-listings-site-stats-table tr {
display: table-row;
width: auto;
padding: 0;
border-bottom: 0;
}
.portal-listings-stats-sheet .portal-listings-site-stats-table th,
.portal-listings-stats-sheet .portal-listings-site-stats-table td {
display: table-cell;
padding: 0.4rem 0.3rem;
border-bottom: 1px solid #e6ebf0;
background: transparent;
text-align: center;
vertical-align: middle;
white-space: nowrap;
font-size: 0.85rem;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.portal-listings-stats-sheet .portal-listings-site-stats-table th {
background: #eef3f7;
color: var(--dhn-blue);
font-weight: 700;
border-bottom-color: #c5d2de;
}
.portal-listings-stats-sheet .portal-listings-site-stats-table th:first-child,
.portal-listings-stats-sheet .portal-listings-site-stats-table td:first-child {
width: 36%;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
font-weight: 700;
color: var(--dhn-blue);
}
.portal-listings-stats-sheet .portal-listings-site-stats-table td:not(:first-child),
.portal-listings-stats-sheet .portal-listings-site-stats-table td:not(:first-child)::before {
display: table-cell;
content: none;
flex: none;
}
.portal-listings-table tbody.portal-listings-group {
margin: 0 0 1.5rem;
/* background: #fff; */
border: 0;
border: 1px solid #c5d0de;
border-radius: 6px;
}
.portal-listings-table.is-active tbody.portal-listings-group {
background: #f7f9fb;
}
.portal-listings-table.is-inactive tbody.portal-listings-group {
background: #fff;
}
.portal-listings-table tbody.portal-listings-group:last-of-type {
margin-bottom: 0;
}
.portal-listings-table tbody.portal-listings-group:last-child {
margin-bottom: 0;
}
.portal-listings-main-row .portal-listings-col-listing {
min-width: 0;
max-width: 100%;
}
.portal-listing-identity {
flex-direction: column;
align-items: stretch;
max-width: 100%;
min-width: 0;
}
.portal-listing-thumb {
position: relative;
flex: 0 0 auto;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.portal-listing-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.portal-listing-thumb img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
}
.portal-listing-identity-details {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.portal-listing-identity-details,
.portal-listing-identity-details * {
font-size: 1rem;
line-height: 1.4;
}
.portal-listing-identity-details .portal-listing-title {
font-size: 1.15rem !important;
line-height: 1.35;
}
.portal-listing-title,
.portal-listing-address,
.portal-listing-geography,
.portal-listing-meta {
overflow-wrap: anywhere;
word-break: break-word;
}
}
@media (min-width: 768px) {
.portal-listings-searchbar {
margin-left: 0;
/* margin-right: 0; */
}
.portal-listings-searchbar > .col-md-6:first-child {
padding-left: 0;
}
.portal-listings-searchbar form.row {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
.portal-listings-stats-sheet-backdrop,
.portal-listings-stats-sheet-panel {
transition: none;
}
}
.portal-primary-nav .nav-link.active {
font-weight: 700;
text-decoration: underline;
}
.portal-subnav {
font-size: 0.9rem;
color: #5a6278;
}
.portal-subnav a {
color: var(--dhn-blue);
text-decoration: none;
font-weight: 600;
}
.portal-subnav a:hover {
text-decoration: underline;
}
.portal-subnav-sep {
margin: 0 0.35rem;
}
.portal-dashboard-page {
padding-bottom: 1rem;
}
.portal-dashboard-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.portal-dashboard-title {
color: var(--dhn-blue);
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
}
.portal-dashboard-subtitle {
margin: 0;
color: #5a6278;
max-width: 68ch;
line-height: 1.45;
}
.portal-buyer-network {
margin-top: 0.5rem;
}
.portal-buyer-network h2 {
color: #5a6278;
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.85rem;
}
.portal-buyer-network-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 1.25rem 1.75rem;
min-width: 0;
}
.portal-buyer-network-logos a {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 120px;
max-width: 168px;
min-width: 0;
height: 48px;
}
.portal-buyer-network-logos img {
max-width: 100%;
max-height: 40px;
width: auto;
height: auto;
object-fit: contain;
}
.portal-dashboard-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.portal-dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.portal-stat-card {
background: #f4f8fb;
border: 1px solid #d0d7de;
border-radius: 0.5rem;
padding: 0.9rem 1rem;
text-align: center;
}
.portal-stat-card strong {
display: block;
font-size: 1.5rem;
color: var(--dhn-blue);
line-height: 1.2;
}
.portal-stat-card span {
display: block;
font-size: 0.8rem;
color: #5a6278;
margin-top: 0.2rem;
}
.portal-stat-card .portal-stat-card-note {
font-size: 0.72rem;
color: #6e7781;
margin-top: 0.35rem;
font-weight: 400;
}
a.portal-stat-card-link {
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, background 0.15s ease;
}
a.portal-stat-card-link:hover {
border-color: var(--dhn-blue);
background: #e7eff7;
}
.portal-dashboard-section {
margin-bottom: 1.75rem;
}
.portal-buyer-tool-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
min-width: 0;
}
.portal-buyer-tool-card {
display: flex;
flex-direction: column;
min-width: 0;
max-width: 100%;
background: #f4f8fb;
border: 1px solid #d0d7de;
border-radius: 0.5rem;
padding: 1rem 1.1rem;
text-align: left;
}
.portal-buyer-tool-card h3 {
color: #056a21;
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.portal-buyer-tool-body {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.portal-buyer-tool-body p {
margin: 0;
color: #5a6278;
font-size: 0.9rem;
line-height: 1.4;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.portal-buyer-tool-body a {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.portal-buyer-tool-body p + p {
margin-top: 0.35rem;
}
.portal-buyer-tool-meta {
font-size: 0.82rem;
color: #6e7781;
}
.portal-buyer-preview-line {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.portal-buyer-tool-cta {
margin: 0.85rem 0 0;
min-width: 0;
max-width: 100%;
}
@media (min-width: 768px) {
.portal-buyer-tool-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.portal-dashboard-section h2,
.portal-section-heading h2 {
color: #056a21;
font-size: 1rem;
margin: 0 0 0.75rem;
}
.portal-section-heading {
margin-bottom: 0.75rem;
}
.portal-detail-grid {
display: grid;
grid-template-columns: minmax(140px, 200px) 1fr;
gap: 0.45rem 1rem;
font-size: 0.9rem;
margin: 0;
}
.portal-detail-grid dt {
font-weight: 600;
margin: 0;
}
.portal-subscription-meta {
line-height: 1.5;
}
.portal-subscription-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.portal-subscription-cancel-panel {
border: 1px solid #d0d7de;
border-radius: 0.375rem;
padding: 0.75rem 1rem;
background: #f8fafc;
max-width: 28rem;
}
.portal-subscription-cancel-actions {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.5rem;
}
@media (max-width: 767.98px) {
.portal-subscription-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 0.5rem;
width: 100%;
}
.portal-subscription-actions > .link-btn,
.portal-subscription-actions > .primary-btn {
flex: 1 1 calc(50% - 0.25rem);
max-width: calc(50% - 0.25rem);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Renew form (and other lone actions): full width so label stays on one line */
.portal-subscription-actions > form,
.portal-subscription-actions > .link-btn:only-child,
.portal-subscription-actions > .primary-btn:only-child {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
}
.portal-subscription-actions form .primary-btn,
.portal-subscription-actions > .primary-btn:only-child,
.portal-subscription-actions > .link-btn:only-child {
width: 100%;
max-width: 100%;
white-space: nowrap;
padding: 0.5rem 1rem;
font-size: 1rem;
line-height: 1.4;
}
.portal-subscription-cancel-panel {
max-width: none;
}
.portal-subscription-cancel-actions {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch;
gap: 0.5rem;
width: 100%;
}
.portal-subscription-cancel-actions .link-btn,
.portal-subscription-cancel-actions .primary-btn {
flex: 1 1 calc(50% - 0.25rem);
max-width: calc(50% - 0.25rem);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
}
.portal-active-by-site {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.portal-active-by-site-tile {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem 0.5rem 0.5rem;
background: #eee;
border-radius: 0.375rem;
color: #1a1a1a;
}
.portal-active-by-site-logo {
width: 175px;
max-width: 100%;
height: auto;
display: block;
}
.portal-active-by-site-count {
font-size: 1.25rem;
font-weight: 700;
color: var(--dhn-blue);
min-width: 1.5rem;
text-align: center;
}
@media (max-width: 575.98px) {
.portal-active-by-site-logo {
width: 120px;
}
}
.portal-detail-grid dd {
margin: 0;
font-size: 16px;
}
.portal-spotlight-table-wrap,
.portal-listings-table-wrap {
border: 1px solid #d0d7de;
border-radius: 0.5rem;
background: #fff;
}
@media (min-width: 768px) {
.portal-listings-table-wrap.portal-listings-table-wrap {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
overflow-x: auto;
}
.portal-listings-table {
display: block;
min-width: 0;
border-collapse: separate;
border-spacing: 0;
}
.portal-listings-table > tbody {
display: contents;
}
.portal-listings-table tbody.portal-listings-group {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid #d0d7de;
background: #fff;
margin: 0 0 1rem;
}
.portal-listings-table tbody.portal-listings-group:last-of-type {
margin-bottom: 0;
}
.portal-listings-table .portal-listings-col-listing {
width: 45%;
min-width: 0;
}
.portal-listings-table .portal-listings-col-preview {
width: 8%;
}
.portal-listings-table .portal-listings-col-date {
width: 8%;
}
.portal-listings-table .portal-listings-col-expires {
width: 14%;
min-width: 0;
}
.portal-listings-table .portal-listings-col-stat {
width: 6%;
}
.portal-listings-header-row th {
white-space: normal;
overflow-wrap: anywhere;
}
.portal-listings-group > tr:last-child td {
border-bottom: 0;
/* background: #f7f9fb; */
}
.portal-listings-table.is-active .portal-listings-group > tr:last-child td {
background: #f7f9fb;
}
.portal-listings-table.is-inactive .portal-listings-group > tr:last-child td {
background: #fff;
}
}
.portal-spotlight-support-note {
margin: 0.75rem 0 1rem;
font-size: 0.95rem;
}
.portal-spotlight-table thead th {
background: #eef6ee;
color: #056a21;
font-size: 1rem;
white-space: nowrap;
}
.portal-placement-line {
line-height: 1.35;
}
.portal-placement-lh { color: var(--dhn-blue); }
.portal-placement-gh { color: #1a6b2d; }
.portal-placement-bh { color: #9a6400; }
.portal-dashboard-footnote {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid #e0e6ef;
}
/* Listing edit wizard */
.portal-wizard-shell {
/* background: #f2f6f8; */
background: #fff;
min-height: calc(100vh - 120px);
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
.portal-wizard-sidebar-col {
display: flex;
flex-direction: column;
align-self: stretch;
}
.portal-wizard-sidebar-col .side-bar {
flex: 1 1 auto;
min-height: 0;
}
.portal-wizard-main {
align-self: stretch;
}
}
.portal-impersonation-banner {
background: #1a3f8f;
color: #fff;
text-align: center;
font-size: 0.875rem;
line-height: 1.4;
padding: 0.55rem 1rem;
}
.portal-impersonation-banner a {
color: #fff;
font-weight: 700;
text-decoration: underline;
}
.portal-impersonation-banner .portal-impersonation-meta {
font-weight: 400;
opacity: 0.9;
}
.portal-wizard-sidebar-col {
background: #f2f6f8;
border-right: 1px solid #dfdfdf;
}
.portal-wizard-sidebar-col .side-bar {
min-height: 100%;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.portal-wizard-main {
background: #fff;
padding: 1.5rem 1.25rem 2.5rem;
}
@media (min-width: 992px) {
.portal-wizard-main {
padding: 2rem 2.5rem 3rem;
}
}
.portal-sidebar-section-title {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #5a6278;
margin-bottom: 0.35rem;
}
.portal-sidebar-section {
padding: 0.75rem 0 0.25rem;
}
.portal-sidebar-items li {
padding: 0.35rem 0;
}
.portal-edit-title {
color: var(--dhn-blue);
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 0.35rem;
}
.portal-edit-back a {
color: var(--dhn-blue);
font-weight: 500;
text-decoration: none;
font-size: 0.8rem;
}
.portal-edit-back a:hover {
text-decoration: underline;
}
.portal-edit-lead {
color: #4e4e4e;
}
.portal-edit-required-note {
display: block;
margin-top: 0.25rem;
font-size: 0.9rem;
}
.portal-edit-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.5rem 2rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #e4eaef;
margin-bottom: 1.5rem;
}
.portal-edit-header-text {
flex: 1 1 280px;
min-width: 0;
}
.portal-edit-summary {
flex: 0 0 auto;
width: min(100%, 300px);
margin-left: auto;
background: #e8eef3;
border: 1px solid #b8c8d8;
border-radius: 0.625rem;
box-shadow: 0 2px 10px rgba(0, 55, 90, 0.12);
padding: 1rem 1.2rem;
font-size: 0.875rem;
line-height: 1.45;
}
.portal-edit-summary-line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.2rem 0;
}
.portal-edit-summary-line--stacked {
flex-direction: column;
align-items: stretch;
gap: 0.2rem;
padding: 0.35rem 0;
}
.portal-edit-summary-line--stacked .portal-edit-summary-value {
text-align: left;
}
.portal-edit-summary-line--plain {
justify-content: flex-end;
}
.portal-edit-summary-label {
flex-shrink: 0;
font-weight: 600;
color: #4e4e4e;
}
.portal-edit-summary-value {
color: #111;
text-align: right;
}
.portal-edit-summary-price {
font-weight: 600;
}
@media (max-width: 767px) {
.portal-edit-summary {
margin-left: 0;
width: 100%;
}
}
.portal-wizard-step-title {
font-size: 1.15rem;
color: #000;
line-height: 1.3;
margin-bottom: 0.75rem;
border-bottom: 1px solid #dfdfdf;
padding-bottom: 0.75rem;
}
.portal-wizard-step-heading .portal-wizard-step-title {
border-bottom: 0;
padding-bottom: 0;
}
.portal-wizard-step-desc {
color: #4e4e4e;
margin-bottom: 1rem;
}
.portal-site-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0.875rem;
}
@media (min-width: 576px) {
.portal-site-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.portal-site-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.portal-edit-wizard .portal-site-card {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.85rem;
min-height: 88px;
padding: 1rem 1.15rem;
border: 1px solid #b8c8d8;
border-radius: 0.625rem;
background: #e8eef3;
box-shadow: 0 2px 8px rgba(0, 55, 90, 0.1);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
margin: 0;
user-select: none;
}
.portal-edit-wizard .portal-site-card:hover {
border-color: #7a9bb5;
background: #dfe8f0;
box-shadow: 0 3px 12px rgba(0, 55, 90, 0.14);
}
.portal-edit-wizard .portal-site-card.is-selected {
border: 2px solid var(--dhn-blue);
background: #d4e6f3;
box-shadow: 0 2px 12px rgba(0, 79, 130, 0.18);
}
.portal-edit-wizard .portal-site-card:has(.portal-site-checkbox:focus-visible) {
outline: 2px solid var(--dhn-blue);
outline-offset: 2px;
}
.portal-edit-wizard .portal-site-checkbox {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.portal-edit-wizard .portal-site-card-check {
position: relative;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
border: 2px solid #8fa3b5;
border-radius: 0.25rem;
background: #fff;
pointer-events: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.portal-edit-wizard .portal-site-card.is-selected .portal-site-card-check {
border-color: var(--dhn-blue);
background: var(--dhn-blue);
}
.portal-edit-wizard .portal-site-card.is-selected .portal-site-card-check::after {
content: '';
position: absolute;
left: 0.3rem;
top: 0.05rem;
width: 0.35rem;
height: 0.65rem;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.portal-edit-wizard .portal-site-card-logo {
display: block;
flex: 1 1 auto;
max-width: calc(100% - 2rem);
max-height: 52px;
width: auto;
height: auto;
object-fit: contain;
object-position: left center;
pointer-events: none;
}
.portal-site-questions-panel {
margin-bottom: 1.5rem;
}
.portal-edit-wizard .portal-site-questions-inner {
background: #e8eef3;
border: 1px solid #b8c8d8;
border-radius: 0.625rem;
box-shadow: 0 2px 8px rgba(0, 55, 90, 0.1);
padding: 1rem 1.15rem;
height: auto;
}
.portal-site-questions-title {
font-size: 1rem;
font-weight: 700;
color: var(--dhn-blue);
margin: 0 0 1rem;
}
.portal-wizard-divider {
border-color: #dfdfdf;
margin: 1.5rem 0;
}
.portal-wizard-step-collapsed .portal-wizard-step-title {
margin-bottom: 0;
cursor: pointer;
}
.portal-wizard-step-toggle:hover {
text-decoration: underline;
}
.portal-wizard-step-actions {
margin-top: 1.5rem;
}
.portal-edit-wizard .portal-wizard-step-actions .btn-primary,
.portal-edit-wizard .portal-wizard-step-actions .btn-primary.portal-wizard-next {
background: var(--dhn-blue);
border-color: var(--dhn-blue);
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
color: #fff !important;
font-weight: 600;
min-width: 120px;
}
.portal-edit-wizard .portal-wizard-step-actions .btn-primary:hover,
.portal-edit-wizard .portal-wizard-step-actions .btn-primary:focus,
.portal-edit-wizard .portal-wizard-step-actions .btn-primary:active,
.portal-edit-wizard .portal-wizard-step-actions .btn-primary.portal-wizard-next:hover,
.portal-edit-wizard .portal-wizard-step-actions .btn-primary.portal-wizard-next:focus,
.portal-edit-wizard .portal-wizard-step-actions .btn-primary.portal-wizard-next:active {
background: #003d66;
border-color: #003d66;
color: #fff !important;
}
.portal-edit-save-wrap .portal-edit-save {
background: var(--dhn-blue);
border-color: var(--dhn-blue);
color: #fff;
/* min-width: 260px; */
}
.portal-edit-save-wrap .portal-edit-save:hover,
.portal-edit-save-wrap .portal-edit-save:focus,
.portal-edit-save-wrap .portal-edit-save:active {
background: #003d66;
border-color: #003d66;
color: #fff;
}
.portal-edit-wizard .portal-edit-dirty-bar {
position: sticky;
bottom: 0;
z-index: 1020;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1rem;
padding: 0.75rem 1rem;
background: #fff8e6;
border: 1px solid #e0c36a;
border-radius: 0.5rem 0.5rem 0 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}
.portal-edit-wizard .portal-edit-dirty-bar[hidden] {
display: none !important;
}
.portal-edit-wizard .portal-edit-dirty-bar .btn-primary {
background: var(--dhn-blue);
border-color: var(--dhn-blue);
color: #fff;
font-weight: 600;
white-space: nowrap;
}
.portal-phone-row .form-select {
font-size: 0.85rem;
}
.portal-edit-support {
font-size: 0.9rem;
color: #5a6278;
}
.portal-edit-support a {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-edit-help-link a,
.portal-edit-help-link-btn {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-edit-help-link-btn {
display: inline;
padding: 0;
border: 0;
background: none;
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: 600;
text-align: left;
text-decoration: underline;
cursor: pointer;
}
#portalAdPlacementHelpModal .portal-ad-placement-help-close {
padding: 0.5rem;
margin: -0.5rem -0.5rem -0.5rem auto;
border: 0;
background: transparent;
color: #000;
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
opacity: 0.5;
cursor: pointer;
}
#portalAdPlacementHelpModal .portal-ad-placement-help-close:hover,
#portalAdPlacementHelpModal .portal-ad-placement-help-close:focus {
opacity: 0.85;
}
.portal-wizard-step-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid #dfdfdf;
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
}
.portal-edit-wizard#portal-edit-wizard .portal-wizard-step .portal-wizard-step-heading {
cursor: pointer;
}
.portal-wizard-step-heading .portal-wizard-step-title {
margin-bottom: 0;
}
.portal-wizard-step-done .portal-wizard-step-heading {
margin-bottom: 0;
border-bottom: 0;
padding-bottom: 0;
}
.portal-wizard-step-collapsed:not(.portal-wizard-step-done) .portal-wizard-step-heading {
margin-bottom: 0;
border-bottom: 0;
padding-bottom: 0;
}
.portal-wizard-edit-step {
color: var(--dhn-blue);
font-weight: 600;
text-decoration: none;
padding: 0;
}
.portal-wizard-edit-step:hover {
text-decoration: underline;
}
.portal-optional {
font-weight: 400;
color: #5a6278;
}
.portal-edit-checkboxes {
background: #e8eef3;
border: 1px solid #b8c8d8;
border-radius: 0.625rem;
box-shadow: 0 2px 8px rgba(0, 55, 90, 0.1);
padding: 1rem 1.15rem;
margin-top: 0.5rem;
}
.portal-user-managed-panel {
background: #fff8eb;
border: 2px solid #c9922a;
border-radius: 0.625rem;
box-shadow: 0 2px 10px rgba(140, 90, 0, 0.12);
padding: 1rem 1.2rem 1.1rem;
}
.portal-user-managed-panel--top {
margin: 0 0 1.25rem;
}
.portal-user-managed-title {
margin: 0 0 0.4rem;
font-size: 1.05rem;
font-weight: 700;
color: #7a4a00;
}
.portal-user-managed-desc {
margin: 0 0 0.85rem;
font-size: 0.92rem;
line-height: 1.45;
color: #5c4a28;
}
.portal-user-managed-check {
padding-top: 0.15rem;
border-top: 1px solid rgba(201, 146, 42, 0.35);
}
.portal-photos-takeover-note {
background: #fff8eb;
border: 1px solid #c9922a;
border-radius: 0.5rem;
padding: 0.65rem 0.85rem;
margin: 0 0 1rem;
font-size: 0.92rem;
line-height: 1.45;
color: #5c4a28;
}
.portal-photos-dirty-notice {
background: #fff8eb;
border: 1px solid #c9922a;
border-radius: 0.4rem;
padding: 0.45rem 0.75rem;
font-size: 0.88rem;
line-height: 1.4;
color: #5c4a28;
}
.portal-photos-dirty-notice[hidden] {
display: none !important;
}
.portal-takeover-banner p {
margin-bottom: 0.75rem;
}
#portal-takeover-btn {
font-weight: 600;
}
#portalListingTakeoverModal .btn-close {
background: none;
border: 0;
font-size: 1.5rem;
line-height: 1;
opacity: 0.7;
}
#portalListingTakeoverModal .btn-close::before {
content: "\00d7";
}
#portalListingSubCancelModal .portal-listing-sub-cancel-close {
padding: 0.5rem;
margin: -0.5rem -0.5rem -0.5rem auto;
border: 0;
background: transparent;
color: #000;
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
opacity: 0.5;
cursor: pointer;
}
#portalListingSubCancelModal .portal-listing-sub-cancel-close:hover,
#portalListingSubCancelModal .portal-listing-sub-cancel-close:focus {
opacity: 0.85;
outline: none;
}
#portalListingSubCancelModal .portal-listing-sub-cancel-actions {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch;
gap: 0.75rem;
width: 100%;
}
#portalListingSubCancelModal .portal-listing-sub-cancel-actions .link-btn,
#portalListingSubCancelModal .portal-listing-sub-cancel-actions .primary-btn {
flex: 1 1 0;
min-width: 0;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: nowrap;
padding-top: 0.6rem;
padding-bottom: 0.6rem;
padding-left: 0.85rem;
padding-right: 0.85rem;
}
@media (max-width: 767.98px) {
#portalListingSubCancelModal .portal-listing-sub-cancel-actions {
flex-wrap: wrap;
gap: 0.5rem;
}
#portalListingSubCancelModal .portal-listing-sub-cancel-actions .link-btn,
#portalListingSubCancelModal .portal-listing-sub-cancel-actions .primary-btn {
flex: 1 1 calc(50% - 0.25rem);
max-width: calc(50% - 0.25rem);
white-space: normal;
}
}
#portalListingTakeoverModal .btn-primary {
background-color: var(--dhn-blue);
border-color: var(--dhn-blue);
color: #fff;
}
#portalListingTakeoverModal .btn-outline-secondary {
background-color: #fff;
border-color: #6c757d;
color: #334155;
}
.portal-edit-check-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
min-height: 2rem;
}
.portal-edit-wizard .form-check.portal-edit-check-item,
.portal-profile-page .form-check.portal-edit-check-item {
padding-left: 0;
margin-bottom: 0;
display: flex;
}
.portal-edit-wizard .portal-edit-checkbox,
.portal-edit-wizard .portal-edit-check-item .form-check-input[type="checkbox"],
.portal-profile-page .portal-edit-checkbox,
.portal-profile-page .portal-edit-check-item .form-check-input[type="checkbox"] {
position: static;
float: none;
margin: 0.1rem 0 0 0;
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
border: 2px solid var(--dhn-blue);
border-radius: 0.3rem;
background-color: #fff;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 55, 90, 0.15);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
opacity: 1;
}
.portal-edit-wizard .portal-edit-checkbox:focus,
.portal-edit-wizard .portal-edit-check-item .form-check-input[type="checkbox"]:focus,
.portal-profile-page .portal-edit-checkbox:focus,
.portal-profile-page .portal-edit-check-item .form-check-input[type="checkbox"]:focus {
border-color: var(--dhn-blue);
box-shadow: 0 0 0 0.2rem rgba(0, 79, 130, 0.2);
outline: none;
}
.portal-edit-wizard .portal-edit-checkbox:checked,
.portal-edit-wizard .portal-edit-check-item .form-check-input[type="checkbox"]:checked,
.portal-profile-page .portal-edit-checkbox:checked,
.portal-profile-page .portal-edit-check-item .form-check-input[type="checkbox"]:checked {
background-color: var(--dhn-blue);
border-color: var(--dhn-blue);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
background-size: 1.15rem 1.15rem;
background-position: center;
background-repeat: no-repeat;
}
.portal-edit-wizard .portal-edit-checkbox:disabled,
.portal-edit-wizard .portal-edit-check-item .form-check-input[type="checkbox"]:disabled,
.portal-profile-page .portal-edit-checkbox:disabled,
.portal-profile-page .portal-edit-check-item .form-check-input[type="checkbox"]:disabled {
opacity: 1;
background-color: #fff;
border-color: #5a7a94;
cursor: not-allowed;
}
.portal-edit-wizard .portal-site-questions-inner .portal-edit-checkbox,
.portal-edit-wizard .portal-site-questions-inner .portal-edit-check-item .form-check-input[type="checkbox"] {
width: 1.85rem;
height: 1.85rem;
}
.portal-edit-wizard .portal-edit-check-item .form-check-label,
.portal-profile-page .portal-edit-check-item .form-check-label {
flex: 1 1 auto;
float: none;
padding-left: 0;
margin: 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
color: #5a6278;
}
.portal-edit-wizard .portal-edit-check-item .form-check-label strong {
font-weight: 700;
}
.portal-check-help {
font-size: 0.875rem;
color: #5a6278;
font-weight: 400;
margin-top: 0.15rem;
}
.portal-wizard-step-body-inner > .row {
row-gap: 1.25rem;
}
.portal-wizard-step-body-inner .portal-edit-field-break {
margin-top: 0.25rem;
padding-top: 0.75rem;
border-top: 1px solid #e0e6ef;
}
.portal-wizard-step-body-inner .portal-edit-field .form-label {
margin-bottom: 0.4rem;
}
.portal-edit-field .form-label {
font-weight: 600;
color: #1f3c56;
font-size: 0.9rem;
}
.portal-edit-field .form-text {
font-size: 0.8rem;
color: #5a6278;
}
.portal-char-remaining {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
font-size: 0.8rem;
color: #5a6278;
}
.portal-char-remaining .portal-char-left {
width: 4.25rem;
max-width: 4.25rem;
padding: 0.15rem 0.35rem;
font-size: 0.8rem;
line-height: 1.3;
text-align: center;
color: #333;
background: #f4f5f7;
border: 1px solid #c5cad6;
border-radius: 2px;
}
/* Portal listing photo manager (drag-drop reorder) */
.portal-photos-section {
margin-top: 0.5rem;
}
.portal-photos-section-focus {
scroll-margin-top: 1rem;
}
.portal-photos-next {
gap: 1rem;
align-items: stretch;
}
@media (max-width: 767.98px) {
.portal-photos-next {
flex-wrap: nowrap;
justify-content: center;
gap: 0.5rem;
width: 100%;
}
.portal-photos-next .link-btn,
.portal-photos-next .primary-btn {
flex: 1 1 calc(50% - 0.25rem);
max-width: calc(50% - 0.25rem);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
}
.portal-photo-preview-hint {
font-size: 0.95rem;
color: #334155;
}
.portal-photo-preview-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.65rem;
align-items: stretch;
}
.portal-photo-preview-form {
display: inline-block;
margin: 0;
}
.portal-photo-preview-btn {
white-space: nowrap;
cursor: pointer;
}
.portal-photo-preview-btn-short {
display: none;
}
@media (max-width: 767.98px) {
.portal-photo-preview-hint {
font-size: 0.875rem;
margin-bottom: 0.65rem !important;
}
.portal-photo-preview-buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
.portal-photo-preview-form {
display: block;
min-width: 0;
}
.portal-photo-preview-btn {
width: 100%;
padding: 0.45rem 0.35rem;
font-size: 0.8125rem;
line-height: 1.25;
white-space: normal;
}
.portal-photo-preview-btn-full {
display: none;
}
.portal-photo-preview-btn-short {
display: inline;
letter-spacing: 0.02em;
}
}
.portal-photo-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: 12px;
}
.portal-photos-reorder-hint {
background: #f4f8fb;
border: 1px solid #c5d4e4;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
color: #334155;
}
.portal-photos-reorder-hint-list {
padding-left: 1.25rem;
margin: 0;
}
.portal-photos-reorder-hint-list li + li {
margin-top: 0.45rem;
}
.portal-photos-reorder-hint-desktop-only {
display: block;
}
.portal-photos-reorder-hint-mobile-only {
display: none;
font-size: 0.9375rem;
color: #334155;
line-height: 1.45;
}
@media (max-width: 767.98px) {
.portal-photos-reorder-hint-desktop-only {
display: none;
}
.portal-photos-reorder-hint-mobile-only {
display: block;
}
}
.portal-photos-cursor-icon {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 0.1rem;
vertical-align: text-bottom;
flex-shrink: 0;
}
.portal-photo-card {
position: relative;
background: #fff;
border: 1px solid #d5dbe6;
border-radius: 6px;
padding: 8px;
cursor: grab;
user-select: none;
}
.portal-photo-card.is-dragging {
opacity: 0.55;
cursor: grabbing;
background: #ecfdf5;
border: 3px dashed #059669;
box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.2);
}
.portal-photo-card.is-drag-over {
background: #fff8e1;
border: 1px solid #d4a017;
box-shadow: inset 0 0 0 1px rgba(212, 160, 23, 0.35);
}
.portal-photo-card-meta-leading {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.portal-photo-card-handle {
color: #475569;
font-size: 15px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1;
flex-shrink: 0;
}
.portal-photo-card:hover .portal-photo-card-handle {
color: #334155;
}
.portal-photo-thumb-link {
display: block;
cursor: pointer;
}
.portal-photo-thumb {
display: block;
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 4px;
background: #eef1f6;
}
.portal-photo-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: 6px;
font-size: 12px;
}
.portal-photo-rotate-row {
display: flex;
gap: 4px;
margin-top: 6px;
}
.portal-photo-rotate-form {
margin: 0;
flex: 1 1 0;
}
.portal-photo-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
color: var(--dhn-blue);
background: #fff;
border: 1px solid var(--dhn-blue);
border-radius: 6px;
font-weight: 700;
cursor: pointer;
box-shadow: none;
}
.portal-photo-action-btn:hover,
.portal-photo-action-btn:focus {
color: var(--dhn-blue);
background: #f4f8fb;
border-color: var(--dhn-blue);
}
.portal-photo-action-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
display: block;
object-fit: contain;
}
.portal-photo-rotate-btn {
width: 100%;
font-size: 0.75rem;
padding: 0.25rem 0.35rem;
line-height: 1.25;
}
.portal-photo-caption {
margin-top: 6px;
}
.portal-photo-caption-display {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.portal-photo-caption-text {
display: block;
font-size: 12px;
line-height: 1.35;
color: #0d6efd;
word-break: break-word;
min-height: 1.35em;
}
.portal-photo-caption-text.is-empty {
color: #6c757d;
font-style: italic;
}
.portal-photo-caption-edit-btn {
align-self: flex-start;
font-size: 0.75rem;
padding: 0.25rem 0.45rem;
line-height: 1.25;
max-width: 100%;
}
.portal-photo-caption-edit-btn .portal-photo-action-icon {
width: 14px;
height: 14px;
}
.portal-photo-caption-form {
display: flex;
flex-direction: column;
gap: 6px;
align-items: stretch;
margin-top: 0;
}
.portal-photo-caption-form[hidden] {
display: none !important;
}
.portal-photo-caption-input {
width: 100%;
min-width: 0;
min-height: 4.5rem;
font-size: 12px;
padding: 0.35rem 0.45rem;
line-height: 1.35;
resize: both;
overflow: auto;
}
.portal-photo-caption-actions {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.portal-photo-caption-actions .portal-photo-caption-save,
.portal-photo-caption-actions .portal-photo-caption-cancel {
flex: 0 0 auto;
font-size: 0.75rem;
padding: 0.25rem 0.45rem;
line-height: 1.25;
}
.portal-photo-card.is-editing,
.portal-photo-caption.is-editing {
z-index: 2;
}
.portal-photo-delete-form {
position: absolute;
top: 2px;
right: 2px;
z-index: 3;
margin: 0;
}
.portal-photo-delete-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #c0392b;
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.35);
}
.portal-photo-delete-btn:hover,
.portal-photo-delete-btn:focus {
background: #c0392b;
color: #fff;
outline: none;
}
.portal-photos-section .visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Portal for-sale email leads */
.portal-leads-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.portal-leads-title {
font-size: 1.5rem;
margin: 0 0 0.25rem;
color: #1a3355;
}
.portal-leads-subtitle {
font-size: 0.9rem;
}
.portal-leads-table-wrap {
border: 1px solid #d5dbe6;
border-radius: 6px;
background: #fff;
}
.portal-leads-table thead th {
background: #e8f0f8;
color: #1a3355;
font-weight: 600;
white-space: nowrap;
border-bottom: 1px solid #c5d0de;
}
.portal-leads-table td {
vertical-align: top;
border-color: #e4e9f0;
}
.portal-lead-listing-meta {
color: #5a6278;
max-width: 18rem;
line-height: 1.35;
}
.portal-lead-question {
max-width: 22rem;
line-height: 1.4;
}
.portal-lead-flagged {
background: #f7f8fa;
}
.portal-leads-pagination-wrap {
display: flex;
justify-content: center;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.portal-leads-pagination .pagination {
flex-wrap: wrap;
justify-content: center;
row-gap: 0.35rem;
}
.portal-map-canvas {
width: 100%;
max-width: 640px;
height: 420px;
border: 1px solid #d5dbe6;
border-radius: 6px;
background: #eef1f6;
}
.portal-edit-map-block {
margin-top: 0.25rem;
padding: 0.85rem 1rem 1rem;
background: #f7f8fb;
border: 1px solid #e2e6ee;
border-radius: 8px;
max-width: 640px;
}
.portal-signs-product {
padding: 1rem 0;
border-bottom: 1px solid #e2e6ee;
}
.portal-signs-product:last-child {
border-bottom: 0;
}
.portal-signs-product-main {
display: grid;
grid-template-columns: minmax(0, 1fr) 10rem;
column-gap: 2rem;
max-width: 64rem;
align-items: start;
}
.portal-signs-product-copy {
min-width: 0;
}
.portal-signs-product-img {
justify-self: center;
}
.portal-signs-product-img img {
display: block;
max-width: 150px;
height: auto;
border: 1px solid #e2e6ee;
border-radius: 4px;
background: #fff;
}
.portal-signs-qty {
max-width: 18rem;
}
@media (max-width: 575.98px) {
.portal-signs-product-main {
grid-template-columns: 1fr;
max-width: none;
row-gap: 0.75rem;
}
.portal-signs-product-img {
justify-self: start;
}
}
.portal-signs-checkout,
.portal-confirm-order-checkout {
margin-bottom: 1.5rem;
padding: 1rem 1.1rem;
background: #f7f8fb;
border: 1px solid #e2e6ee;
border-radius: 8px;
max-width: 64rem;
}
.portal-signs-page .portal-signs-form {
max-width: none;
}
.portal-signs-page .portal-signs-product-main {
max-width: none;
}
.portal-signs-total {
font-size: 1.1rem;
}
.portal-confirm-order-section {
margin-bottom: 1.5rem;
padding: 1rem 1.1rem;
background: #f7f8fb;
border: 1px solid #e2e6ee;
border-radius: 8px;
max-width: 64rem;
}
.portal-confirm-order-section-title {
margin: 0 0 0.85rem;
color: #004582;
font-weight: 700;
}
.portal-confirm-order-plan + .portal-confirm-order-plan {
margin-top: 0.65rem;
}
.portal-confirm-order-addons {
background: transparent;
border: 0;
padding: 0;
max-width: none;
}
.portal-confirm-order-prepaid {
max-width: 64rem;
padding: 1rem 1.1rem;
background: #f4f6fa;
border: 1px solid #e2e6ee;
border-radius: 8px;
}
.portal-confirm-order-alert {
max-width: 64rem;
margin-bottom: 1.5rem;
padding: 1rem 1.1rem;
background: #fff5f5;
border: 1px solid #f0caca;
border-radius: 8px;
color: #be0000;
font-size: 0.95rem;
line-height: 1.5;
}
.portal-confirm-order-alert a {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-confirm-order-page .form-check-label {
color: #1f3c56 !important;
font-weight: bold;
}
.portal-confirm-order-action-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
width: 14.5rem;
max-width: 100%;
}
@media (max-width: 767.98px) {
.portal-confirm-order-action-btn {
display: flex;
width: 100%;
}
}
.portal-flyers-summary {
display: flex;
align-items: center;
gap: 0.85rem;
margin-top: 0.75rem;
}
@media (max-width: 767.98px) {
.portal-edit-save-wrap .portal-edit-save {
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.portal-wizard-step-actions .link-btn{
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
}
.portal-flyers-summary-thumb {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 0.35rem;
border: 1px solid #d5dbe6;
background: #f4f6fa;
flex: 0 0 auto;
}
.portal-flyers-summary-id {
font-weight: 700;
color: var(--dhn-blue);
}
.portal-flyers-section {
margin: 1.5rem 0 0;
padding-top: 1.25rem;
/* border-top: 1px solid #dfdfdf; */
}
.portal-flyers-brands {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0.75rem;
}
@media (min-width: 576px) {
.portal-flyers-brands {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.portal-flyers-brands {
grid-template-columns: repeat(3, 1fr);
}
}
.portal-flyers-brand {
display: flex;
align-items: center;
justify-content: center;
min-height: 72px;
padding: 0.75rem 1rem;
border: 1px solid #b8c8d8;
border-radius: 0.625rem;
background: #e8eef3;
cursor: pointer;
margin: 0;
}
.portal-flyers-brand.is-selected {
border: 2px solid var(--dhn-blue);
background: #d4e6f3;
}
.portal-flyers-brand-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.portal-flyers-brand-logo {
max-height: 40px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.portal-map-address {
padding: 0.65rem 0.85rem;
background: #f4f6fa;
border: 1px solid #e2e6ee;
border-radius: 6px;
max-width: 640px;
}
.portal-photo-upload-controls {
max-width: 28rem;
position: relative;
}
.portal-photo-upload-loading {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 0.75rem;
padding: 0.65rem 0.85rem;
background: #f4f6fa;
border: 1px solid #d5dbe6;
border-radius: 6px;
color: #3a4256;
font-size: 0.9rem;
}
.portal-photo-upload-loading[hidden] {
display: none !important;
}
.portal-photo-upload-spinner {
width: 1.1rem;
height: 1.1rem;
border: 2px solid #c5ccd8;
border-top-color: #0d6efd;
border-radius: 50%;
animation: portal-photo-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes portal-photo-spin {
to { transform: rotate(360deg); }
}
.portal-edit-flash {
margin-top: 1rem;
}
.portal-city-panel .portal-site-questions-inner {
margin-bottom: 0.5rem;
}
/* Portal profile edit */
/* .portal-profile-page {
max-width: 40rem;
} */
.portal-profile-page .portal-edit-flash{
max-width: 95vh;
}
.portal-edit-field {
margin-top: 0.5rem;
margin-bottom: 0.75rem;
}
.portal-profile-form .form-control,
.portal-profile-form .form-select {
max-width: 100%;
}
.portal-profile-form .form-select {
border: 1px solid #ced4da;
outline: none;
}
.portal-profile-section {
margin-bottom: 2rem;
max-width: 95vh;
}
.portal-profile-section .portal-wizard-step-title {
margin-bottom: 0.85rem;
}
.portal-profile-signin-email-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
.portal-profile-email-value {
font-weight: 500;
word-break: break-word;
}
.portal-profile-signin-password {
margin-top: 1.25rem;
}
.portal-profile-signin-password-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--portal-heading-color, #1a5276);
margin-bottom: 0.85rem;
}
.portal-password-wrap {
position: relative;
}
.portal-password-wrap .form-control {
padding-right: 2.5rem;
}
.portal-password-wrap .toggle-password {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
padding: 0;
border: 0;
background: transparent;
line-height: 0;
cursor: pointer;
color: #666;
}
.portal-password-wrap .toggle-password:hover,
.portal-password-wrap .toggle-password:focus {
color: #000;
}
.portal-password-wrap .toggle-password svg {
pointer-events: none;
}
.portal-profile-page .portal-profile-save-actions {
gap: 1rem;
}
/* Portal change email */
.portal-change-email-page {
max-width: 40rem;
}
.portal-change-email-form .form-control {
max-width: 100%;
}
.portal-change-email-sent-callout {
background: #e8eef3;
border: 1px solid #b8c8d8;
border-radius: 0.625rem;
padding: 1rem 1.15rem;
}
.portal-change-email-actions {
margin-top: 1.25rem;
gap: 1rem;
}
.portal-phone-row {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.portal-phonecode-select {
flex: 0 0 4.75rem;
width: 4.75rem;
max-width: 4.75rem;
padding-left: 0.4rem;
padding-right: 1.25rem;
}
.portal-phone-number {
flex: 1 1 0;
min-width: 0;
width: auto;
}
@media (max-width: 575.98px) {
.portal-phone-row {
flex-wrap: wrap;
}
.portal-phonecode-select {
flex: 0 0 5.5rem;
}
.portal-phone-number {
flex: 1 1 calc(100% - 6.5rem);
}
}
.portal-mls-picker {
border: 1px solid #ced4da;
border-radius: 0.375rem;
background: #fff;
overflow: hidden;
}
.portal-mls-filter {
border: 0;
border-bottom: 1px solid #ced4da;
border-radius: 0;
box-shadow: none;
}
.portal-mls-filter:focus {
box-shadow: none;
border-color: #86b7fe;
}
.portal-mls-list {
max-height: 14rem;
overflow: auto;
padding: 0.35rem 0;
}
.portal-mls-option {
display: flex;
gap: 0.55rem;
align-items: flex-start;
margin: 0;
padding: 0.3rem 0.75rem;
font-weight: 400;
cursor: pointer;
}
.portal-mls-option:hover {
background: #f4f7fb;
}
.portal-mls-option input {
margin-top: 0.2rem;
flex: 0 0 auto;
}
.portal-mls-option span {
line-height: 1.35;
}
.portal-mls-empty {
padding: 0.75rem;
}
.portal-mls-picker + .form-text,
.portal-edit-field .form-text {
margin-top: 0.4rem;
}
.portal-profile-upload {
max-width: 28rem;
}
.portal-profile-photo-card {
display: inline-block;
margin-right: 1rem;
margin-bottom: 0.5rem;
padding: 8px;
border: 1px solid #d5dbe6;
border-radius: 6px;
background: #fff;
text-align: center;
}
.portal-profile-photo-thumb {
max-width: 125px;
max-height: 125px;
display: block;
margin: 0 auto;
border-radius: 4px;
}
/* Portal Ad Entry Help */
/* .portal-help-page {
max-width: 46rem;
} */
.portal-help-guidelines-callout {
background: #eef4f8;
border: 1px solid #c5d6e4;
border-radius: 0.5rem;
padding: 0.85rem 1rem;
margin-bottom: 1.25rem;
color: #2a3a4a;
}
.portal-help-guidelines-callout a {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-help-jump {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.portal-help-jump a {
display: inline-block;
padding: 0.4rem 0.75rem;
border: 1px solid #b8c8d8;
border-radius: 999px;
background: #fff;
color: var(--dhn-blue);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
line-height: 1.3;
}
.portal-help-jump a:hover {
background: #e8eef3;
border-color: var(--dhn-blue);
}
.portal-help-intro {
margin-bottom: 1.5rem;
}
.portal-help-status-list {
margin: 0;
padding-left: 1.2rem;
color: #4e4e4e;
}
.portal-help-status-list li + li {
margin-top: 0.35rem;
}
.portal-help-section {
margin-bottom: 1.35rem;
border: 1px solid #d5dbe6;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.portal-help-section-title {
margin: 0;
padding: 0.7rem 1rem;
background: var(--dhn-blue);
color: #fff;
font-size: 1.05rem;
font-weight: 700;
}
.portal-help-section-body {
padding: 1rem 1.1rem 1.15rem;
color: #333;
line-height: 1.55;
}
.portal-help-section-body > p:last-child,
.portal-help-section-body > ol:last-child,
.portal-help-section-body > ul:last-child {
margin-bottom: 0;
}
.portal-help-section-body a {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-help-steps {
margin: 0.75rem 0 1rem;
padding-left: 1.25rem;
}
.portal-help-steps li + li {
margin-top: 0.4rem;
}
.portal-help-callout {
margin-top: 1rem;
padding: 0.85rem 1rem;
background: #f6f9fc;
border-left: 3px solid var(--dhn-blue);
border-radius: 0 0.35rem 0.35rem 0;
}
.portal-help-callout-title {
margin: 0 0 0.4rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--dhn-blue);
}
.portal-help-guidelines-list {
margin: 0 0 1rem;
padding-left: 1.2rem;
}
.portal-help-guidelines-list > li + li {
margin-top: 0.55rem;
}
.portal-help-guidelines-list ul {
margin: 0.35rem 0 0;
padding-left: 1.1rem;
}
.portal-help-policy-note {
margin: 0;
padding-top: 0.75rem;
border-top: 1px solid #e4eaef;
color: #4e4e4e;
font-size: 0.95rem;
}
.portal-help-section:target {
box-shadow: 0 0 0 2px rgba(0, 79, 130, 0.25);
}
.portal-help-section:target .portal-help-section-title {
background: #003a61;
}
/* Portal Ad Management Tools */
.portal-tools-mobile-title {
display: none;
}
@media (max-width: 575.98px) {
.portal-tools-mobile-title {
display: block;
}
}
.portal-tools-table-wrap {
border: 1px solid #d5dbe6;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.portal-help-section-body--flush {
padding: 0;
}
.portal-tools-table-wrap--nested {
border: 0;
border-radius: 0;
}
.portal-tools-table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.portal-tools-table th,
.portal-tools-table td {
padding: 0.85rem 1rem;
vertical-align: top;
border-top: 1px solid #e4eaef;
text-align: left;
line-height: 1.45;
}
.portal-tools-table thead th {
background: var(--dhn-blue);
color: #fff;
font-size: 0.9rem;
font-weight: 700;
border-top: 0;
}
.portal-tools-table tbody th {
width: 9.5rem;
background: #f6f9fc;
font-weight: 600;
color: var(--dhn-blue);
border-right: 1px solid #e4eaef;
}
.portal-tools-table tbody tr:first-child th,
.portal-tools-table tbody tr:first-child td {
border-top: 0;
}
.portal-tools-table tbody tr:hover td,
.portal-tools-table tbody tr:hover th {
background: #eef4f8;
}
.portal-tool-name {
display: inline-block;
font-weight: 700;
}
.portal-tools-table a {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-help-related {
color: #4e4e4e;
font-size: 0.95rem;
}
.portal-help-related a {
color: var(--dhn-blue);
font-weight: 600;
}
@media (max-width: 575.98px) {
.portal-tools-table,
.portal-tools-table thead,
.portal-tools-table tbody,
.portal-tools-table th,
.portal-tools-table td,
.portal-tools-table tr {
display: block;
width: 100%;
}
.portal-tools-table thead {
display: none;
}
.portal-tools-table tbody th {
width: auto;
border-right: 0;
border-top: 1px solid #e4eaef;
padding-bottom: 0.25rem;
}
.portal-tools-table tbody td {
border-top: 0;
padding-top: 0.35rem;
}
.portal-tools-table tbody tr:first-child th {
border-top: 0;
}
}
/* Portal V2 for-sale ad submission meter (4 steps, --dhn-blue) */
.portal-ad-submission-meter-wrap {
margin: 0 0 1.25rem;
}
.portal-ad-submission-meter.meter {
--portal-meter-bar-height: 28px;
height: var(--portal-meter-bar-height);
position: relative;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
margin: 0;
box-sizing: border-box;
overflow: visible;
}
.portal-ad-submission-meter.meter ol {
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: var(--portal-meter-bar-height);
border-radius: 10px;
background-color: #ddd;
position: relative;
list-style: none;
box-sizing: border-box;
overflow: hidden;
}
.portal-ad-submission-meter.meter ol li {
flex: 1 1 25%;
min-width: 0;
height: var(--portal-meter-bar-height);
margin: 0;
padding: 0 0.85em 0 0.5em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 10px;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.12);
list-style: none;
box-sizing: border-box;
}
.portal-ad-submission-meter.meter ol li.active {
background-color: var(--dhn-blue);
background-image: none;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15);
}
.portal-ad-submission-meter.meter ol li .step {
position: absolute;
right: -0.75em;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 3px solid #ddd;
z-index: 2;
font-size: 14px;
line-height: 1;
color: #adb5bd;
width: 1.5em;
height: 1.5em;
font-weight: 700;
background-color: #fff;
border-radius: 50%;
box-sizing: content-box;
text-align: center;
}
.portal-ad-submission-meter.meter ol li.active .step {
color: #212529;
border-color: var(--dhn-blue);
}
.portal-ad-submission-meter.meter ol li.is-current .step {
background-color: #fff;
box-shadow: 0 0 0 2px var(--dhn-blue);
}
.portal-ad-submission-meter.meter ol li:last-child .step {
right: 0.5em;
}
@media (min-width: 768px) {
.portal-ad-submission-meter.meter ol li:last-child .stage {
transform: none;
padding-right: 0;
}
}
.portal-ad-submission-meter.meter ol li .stage {
color: #495057;
font-weight: 700;
line-height: 1.2;
font-size: 0.8125rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
text-align: center;
padding-right: 0.35em;
transform: translateX(-0.35em);
}
.portal-ad-submission-meter.meter ol li.active .stage {
color: #fff;
font-weight: 800;
}
.portal-ad-submission-meter.meter ol li .stage-short {
display: none;
}
@media (max-width: 1199.98px) {
.portal-ad-submission-meter.meter,
.portal-ad-submission-meter.meter ol {
--portal-meter-bar-height: 30px;
}
.portal-ad-submission-meter.meter ol li .stage-full {
display: none;
}
.portal-ad-submission-meter.meter ol li .stage-short {
display: block;
font-size: 0.7rem;
}
.portal-ad-submission-meter.meter ol li.active .stage-short {
color: #fff;
font-weight: 800;
}
}
@media (max-width: 767.98px) {
.portal-ad-submission-meter-wrap {
padding-bottom: 1.5rem;
}
.portal-ad-submission-meter.meter,
.portal-ad-submission-meter.meter ol {
--portal-meter-bar-height: 28px;
}
.portal-ad-submission-meter.meter ol {
overflow: visible;
}
.portal-ad-submission-meter.meter ol li {
overflow: visible;
}
.portal-ad-submission-meter.meter ol li .stage-short {
display: none;
}
.portal-ad-submission-meter.meter ol li .stage-full {
display: block;
position: absolute;
top: calc(100% + 0.35rem);
left: 50%;
right: auto;
transform: translateX(-50%);
flex: none;
padding: 0;
width: auto;
max-width: 4.75rem;
line-height: 1.2;
font-size: 0.65rem;
font-weight: 600;
text-align: center;
white-space: normal;
overflow: visible;
text-overflow: unset;
color: #6c757d;
align-self: auto;
z-index: 1;
}
.portal-ad-submission-meter.meter ol li.active .stage-full {
color: var(--dhn-blue);
font-weight: 700;
}
.portal-ad-submission-meter.meter ol li.is-current .stage-full {
font-weight: 800;
}
.portal-ad-submission-meter.meter ol li .step {
width: 1.65em;
height: 1.65em;
font-size: 15px;
}
.portal-ad-submission-meter.meter ol li:last-child .stage-full {
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
/* Public claim listing (portal/v2/claim) โ portal BS bundle lacks gap/g-* utilities */
.portal-claim-page {
margin-top: 0;
}
.portal-claim-listing-preview {
gap: 0;
}
.portal-claim-listing-photo {
width: 140px;
max-width: 100%;
height: 105px;
object-fit: cover;
margin-right: 1rem;
margin-bottom: 0.75rem;
background: #e9ecef;
}
@media (min-width: 576px) {
.portal-claim-listing-photo {
margin-bottom: 0;
}
}
.portal-claim-listing-photo--empty {
display: flex;
}
.portal-claim-listing-price {
color: #1a3a6b;
}
.portal-claim-options-heading {
color: navy;
font-size: 1.05rem;
}
.portal-claim-option-col {
margin-bottom: 1rem;
}
.portal-claim-option-card {
background: #f0f2f4;
border: 1px solid #d3d3d3;
border-radius: 10px;
}
.portal-claim-card {
background: #f8fafc;
border: 1px solid #d7e2ea;
border-radius: 4px;
padding: 1.25rem 1.5rem;
max-width: 40rem;
}
.portal-claim-card--save {
margin-bottom: 1.25rem;
background: #fff8f0;
border-color: #f0d9b8;
}
.portal-claim-title {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 0.5rem;
}
.portal-claim-meta,
.portal-claim-preview,
.portal-claim-note {
color: #4e4e4e;
margin: 0 0 0.35rem;
}
.portal-claim-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
}
.portal-claim-actions .btn-link {
padding-left: 0;
}
.portal-create-location-form .portal-wizard-step-actions .btn-primary {
min-width: 8rem;
}
.portal-create-blocked-card {
background: #fff8f0;
border: 1px solid #f0d9b8;
border-radius: 4px;
padding: 1.25rem 1.5rem;
max-width: 40rem;
color: #4e4e4e;
}
.portal-create-blocked-lead {
font-weight: 700;
color: #1a1a1a;
margin: 0 0 0.75rem;
}
.portal-create-blocked-card a {
color: var(--dhn-blue);
font-weight: 600;
}
/* Portal V2 For Sale Advertising Rates (DHN-1639) */
.portal-rates-header {
padding-bottom: 1.25rem;
border-bottom: 1px solid #e4eaef;
margin-bottom: 1.25rem;
}
.portal-rates-credit {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.portal-rates-credit-badge {
display: inline-block;
padding: 0.25rem 0.6rem;
border: 1px solid #cfe0ee;
border-radius: 999px;
background: #f4f8fb;
color: var(--dhn-blue);
font-weight: 600;
}
.portal-rates-subnav {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 1.15rem;
margin-bottom: 1.25rem;
}
.portal-rates-subnav-link {
display: inline-block;
padding: 0.15rem 0;
border: 0;
border-radius: 0;
background: transparent;
color: #6b7385;
font-size: 0.8125rem;
font-weight: 500;
text-decoration: none;
}
.portal-rates-subnav-link:hover,
.portal-rates-subnav-link:focus {
background: transparent;
border-color: transparent;
color: var(--dhn-blue);
text-decoration: underline;
}
/* DHN-1659: rates-page subnav only โ Our Mission still uses the muted default. */
.portal-advertising-rates .portal-rates-subnav-link {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-advertising-rates .portal-rates-subnav-link:hover,
.portal-advertising-rates .portal-rates-subnav-link:focus {
color: var(--dhn-blue);
text-decoration: underline;
}
/* Portal V2 seller information pages โ shared page vocabulary (DHN-1648) */
.portal-info-page {
/* max-width: 58rem; */
color: #384152;
}
.portal-info-header {
padding-bottom: 1rem;
border-bottom: 1px solid #e4eaef;
margin-bottom: 1rem;
}
.portal-info-subnav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
}
.portal-info-subnav-link {
display: inline-block;
padding: 0.4rem 0.9rem;
border: 1px solid #cddceb;
border-radius: 0.25rem;
background: #f4f8fb;
color: var(--dhn-blue);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
}
.portal-info-subnav-link:hover,
.portal-info-subnav-link:focus {
background: #e6f0f8;
border-color: #9fbdd7;
color: #003c63;
text-decoration: none;
}
.portal-info-subnav-link:focus-visible {
outline: 2px solid var(--dhn-blue);
outline-offset: 2px;
}
.portal-info-section {
margin-bottom: 2.5rem;
}
.portal-info-panel > h2 {
margin: 0 0 0.75rem;
color: var(--dhn-blue);
font-size: 1.2rem;
line-height: 1.3;
}
.portal-info-section > h2:not(#dhn-network) {
font-size: 1.15rem;
color: #000;
line-height: 1.3;
margin-bottom: 0.75rem;
border-bottom: 1px solid #eef2f6;
padding-bottom: 0.75rem;
}
#dhn-network {
margin: 0;
color: var(--dhn-blue);
font-size: 1rem;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.portal-info-section > p,
.portal-info-panel > p {
/* max-width: 46rem; */
margin: 0 0 0.85rem;
line-height: 1.6;
}
.portal-info-list-label {
margin-bottom: 0.4rem;
font-weight: 600;
color: #1f3c56;
}
.portal-info-brands {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.75rem;
margin: 0 0 1.15rem;
padding: 0;
list-style: none;
}
.portal-info-brands li {
white-space: nowrap;
color: #1f3c56;
font-weight: 600;
}
.portal-info-columns {
max-width: 46rem;
margin: 0 0 1rem;
padding-left: 1.15rem;
line-height: 1.6;
}
.portal-info-columns li {
break-inside: avoid;
margin-bottom: 0.25rem;
}
/* Buyer Lead Program is the page's key proposition, not a second hero. */
.portal-info-panel {
margin: 0 0 2.25rem;
padding: 1.35rem 1.5rem;
border: 1px solid #cfe0ee;
border-left: 4px solid var(--dhn-blue);
border-radius: 0.35rem;
background: #f4f9fd;
}
.portal-info-contact {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.85rem;
margin-top: 1.1rem;
padding-top: 0.9rem;
border-top: 1px solid #d8e6f1;
}
.portal-info-contact-label {
color: #1f3c56;
font-weight: 600;
}
.portal-info-contact-phone {
display: inline-block;
padding: 0.35rem 0.9rem;
border-radius: 0.25rem;
background: var(--dhn-blue);
color: #fff;
font-weight: 700;
text-decoration: none;
}
.portal-info-contact-phone:hover,
.portal-info-contact-phone:focus {
background: #003c63;
color: #fff;
text-decoration: none;
}
.portal-info-contact-phone:focus-visible {
outline: 2px solid var(--dhn-blue);
outline-offset: 2px;
}
.portal-info-contact-note {
margin-top: 1.25rem;
padding-top: 0.85rem;
border-top: 1px solid #eef2f6;
font-size: 0.95rem;
color: #4e5a6b;
}
.portal-info-contact-note a {
color: var(--dhn-blue);
font-weight: 600;
}
.portal-info-features {
margin: 0;
padding: 0;
list-style: none;
counter-reset: portal-info-feature;
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
}
.portal-info-features p {
max-width: none;
}
.portal-info-features > li {
counter-increment: portal-info-feature;
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
align-items: start;
align-content: start;
height: 100%;
padding: 0.9rem 0;
border-bottom: 1px solid #eef2f6;
margin-bottom: 0.5rem;
text-align: left;
}
.portal-info-features > li:last-child {
border-bottom: 1px solid #eef2f6;
}
.portal-info-features > li::before {
content: counter(portal-info-feature) ".";
grid-column: 1;
grid-row: 1;
color: #7d8ea0;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
.portal-info-features > li > * {
grid-column: 2;
}
.portal-info-features h3 {
margin: 0 0 0.3rem;
color: #1a2e44;
font-size: 1rem;
line-height: 1.5;
}
.portal-info-features p {
max-width: 44rem;
margin: 0 0 0.5rem;
line-height: 1.6;
}
.portal-info-features p:last-child {
margin-bottom: 0;
}
.portal-info-features ul {
margin: 0.4rem 0 0;
padding-left: 1.15rem;
line-height: 1.6;
}
.portal-info-benefits {
display: grid;
gap: 1.35rem 2.25rem;
margin-bottom: 1.35rem;
}
.portal-info-benefit {
padding-top: 0.5rem;
border-bottom: 1px solid #dce8f2;
padding-bottom: 0.9rem;
}
.portal-info-benefit h3 {
margin: 0 0 0.35rem;
color: var(--dhn-blue);
font-size: 1.02rem;
line-height: 1.4;
}
.portal-info-benefit p {
margin: 0;
line-height: 1.6;
}
.portal-info-benefit ul {
margin: 0.5rem 0 0;
padding-left: 1.15rem;
line-height: 1.6;
}
@media (min-width: 760px) {
.portal-info-columns {
columns: 2;
column-gap: 2.5rem;
}
.portal-info-benefits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portal-info-features {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 2.25rem;
}
}
@media (max-width: 600px) {
.portal-info-panel {
padding: 1.1rem;
}
.portal-info-brands {
gap: 0.3rem 1.15rem;
}
}
/* Portal V2 Our Mission (DHN-1648) */
.portal-our-mission-intro,
.portal-our-mission-search,
.portal-our-mission-benefits,
.portal-our-mission-statement {
max-width: 56rem;
margin: 0 auto 1.5rem;
padding: 1.25rem;
border: 1px solid #e4eaef;
border-radius: 0.35rem;
background: #fff;
color: #384152;
}
.portal-our-mission-intro {
text-align: center;
}
.portal-our-mission-intro h2,
.portal-our-mission-benefits > h2,
.portal-our-mission-statement h2 {
margin: 0 0 0.75rem;
color: var(--dhn-blue);
font-size: 1.2rem;
}
.portal-our-mission-intro-lead {
margin: 0 0 0.75rem;
color: #1f7a4d;
font-size: 1.1rem;
font-weight: 700;
}
.portal-our-mission-search {
background: #f4f8fb;
text-align: center;
}
.portal-our-mission-search p {
margin: 0 0 0.75rem;
font-weight: 600;
}
.portal-our-mission-search-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem 1.25rem;
}
.portal-our-mission-benefit-grid {
display: grid;
gap: 0.75rem;
}
.portal-our-mission-benefit {
display: grid;
grid-template-columns: 5.625rem minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
padding: 0.75rem;
border: 1px solid #e4eaef;
border-radius: 0.25rem;
}
.portal-our-mission-benefit img {
display: block;
max-width: 100%;
height: auto;
}
.portal-our-mission-benefit h3 {
margin: 0 0 0.35rem;
color: var(--dhn-blue);
font-size: 1rem;
}
.portal-our-mission-benefit p {
margin: 0;
}
.portal-our-mission-statement {
scroll-margin-top: 1rem;
background: #eff9ef;
}
@media (max-width: 480px) {
.portal-our-mission-benefit {
grid-template-columns: 1fr;
}
.portal-our-mission-benefit img {
width: 4rem;
}
}
.portal-rates-benefits {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.75rem;
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
font-size: 0.9rem;
color: #384152;
}
.portal-rates-benefits li {
position: relative;
padding-left: 1.4rem;
}
/* No icon font is loaded in the portal, so draw the check with borders. */
.portal-rates-benefits li::before {
content: "";
position: absolute;
left: 0.15rem;
top: 0.35rem;
width: 0.55rem;
height: 0.3rem;
border-left: 2px solid #1f7a4d;
border-bottom: 2px solid #1f7a4d;
transform: rotate(-45deg);
}
.portal-rates-network {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 0.7rem 1rem;
margin-bottom: 1.5rem;
background: #f7fafc;
border: 1px solid #e4eaef;
border-radius: 0.5rem;
}
.portal-rates-network-label {
margin: 0;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #5a6278;
text-align: center;
}
.portal-rates-network-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.65rem 1.35rem;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.portal-rates-network-logos img {
display: block;
width: auto;
height: auto;
max-width: 180px;
max-height: 60px;
}
.portal-rates-section {
margin-bottom: 2rem;
}
.portal-rates-section-head {
margin-bottom: 0.75rem;
}
.portal-rates-section-title {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: var(--dhn-blue);
}
.portal-rates-section-note {
margin: 0.25rem 0 0;
font-size: 0.875rem;
color: #5a6278;
}
.portal-rates-plans {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #d5dbe6;
border-radius: 0.75rem;
background: #fff;
overflow: hidden;
}
@media (min-width: 768px) {
.portal-rates-plan + .portal-rates-plan {
border-top: 1px solid #e4eaef;
}
}
.portal-rates-plan-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 11rem);
grid-template-areas:
"name price action"
"ads price action"
"details . .";
align-items: start;
gap: 0.35rem 1.5rem;
padding: 0.75rem 1.15rem;
}
@media (min-width: 768px) {
.portal-rates-plan-row {
row-gap: 0.1rem;
}
.portal-rates-plan-row:has(.portal-rates-plan-pricing) .portal-rates-plan-pricing {
grid-row: 1 / 3;
}
.portal-rates-plan-row:has(.portal-rates-plan-pricing) .portal-rates-plan-action {
grid-row: 1 / 3;
}
.portal-rates-plan-row:not(:has(.portal-rates-plan-pricing)) {
grid-template-columns: minmax(0, 1fr) minmax(0, 11rem);
grid-template-areas:
"name action"
"ads action"
"details .";
}
.portal-rates-plan-row:not(:has(.portal-rates-plan-pricing)) .portal-rates-plan-action {
grid-row: 1 / 3;
}
}
.portal-rates-plan-name {
grid-area: name;
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #1a2433;
}
.portal-rates-plan-tagline,
.portal-rates-plan-ads {
grid-area: ads;
margin: 0;
font-size: 0.85rem;
color: #5a6278;
}
.portal-rates-plan-tagline {
max-width: 36rem;
line-height: 1.35;
color: #384152;
}
.portal-rates-plan-details {
grid-area: details;
width: 100%;
min-width: 0;
}
.portal-rates-plan-pricing {
grid-area: price;
text-align: right;
min-width: 7.5rem;
align-self: start;
}
.portal-rates-plan-action {
grid-area: action;
align-self: start;
}
.portal-rates-price {
margin: 0;
white-space: nowrap;
}
.portal-rates-amount {
font-size: 1.2rem;
font-weight: 700;
color: #1a2433;
}
.portal-rates-amount-call {
font-size: 1rem;
color: #384152;
}
.portal-rates-term {
font-size: 0.8rem;
font-weight: 500;
color: #5a6278;
}
.portal-rates-price-alt {
margin: 0.15rem 0 0;
font-size: 0.8rem;
color: #5a6278;
}
.portal-rates-price-alt a {
color: var(--dhn-blue);
font-weight: 600;
white-space: nowrap;
}
.portal-rates-plan-action form {
margin: 0;
}
.btn.portal-rates-buy,
.btn.portal-rates-call {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.5rem;
padding: 0.45rem 1.1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.btn.portal-rates-buy {
border: 1px solid var(--dhn-blue);
background: var(--dhn-blue);
color: #fff;
}
.btn.portal-rates-buy:hover,
.btn.portal-rates-buy:focus {
background: #003a61;
border-color: #003a61;
color: #fff;
}
.btn.portal-rates-call {
border: 1px solid #d5dbe6;
background: #fff;
color: var(--dhn-blue);
text-decoration: none;
}
@media (min-width: 768px) {
.portal-rates-plan-action .btn.portal-rates-call {
width: fit-content;
}
}
.btn.portal-rates-call:hover,
.btn.portal-rates-call:focus {
border-color: var(--dhn-blue);
background: #f4f8fb;
color: #003a61;
}
.btn.portal-rates-buy:focus-visible,
.btn.portal-rates-call:focus-visible,
.portal-rates-plan-details summary:focus-visible,
.portal-rates-subnav-link:focus-visible {
outline: 2px solid var(--dhn-blue);
outline-offset: 2px;
}
.portal-rates-plan-details {
margin: 0;
padding: 0;
}
.portal-rates-plan-details summary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
color: var(--dhn-blue);
list-style: none;
}
.portal-rates-plan-details summary::-webkit-details-marker {
display: none;
}
.portal-rates-plan-details summary::after {
content: "\203A";
flex-shrink: 0;
margin-left: 0.1rem;
font-size: 1rem;
line-height: 1;
transform-origin: center center;
transition: transform 0.15s ease;
}
.portal-rates-plan-details[open] summary::after {
transform: rotate(90deg);
}
.portal-rates-plan-details summary:hover span:first-child {
text-decoration: underline;
}
.portal-rates-plan-features {
margin: 0.55rem 0 0.15rem;
padding: 0.65rem 0.85rem;
background: #f7fafc;
border: 1px solid #e4eaef;
border-radius: 0.5rem;
font-size: 0.85rem;
color: #384152;
list-style: none;
}
.portal-rates-plan-features li {
position: relative;
padding-left: 1rem;
}
.portal-rates-plan-features li + li {
margin-top: 0.25rem;
}
.portal-rates-plan-features li::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
width: 0.3rem;
height: 0.3rem;
border-radius: 50%;
background: #9aa7b5;
}
.portal-rates-payment {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
margin: 0.25rem 0 1.75rem;
text-align: center;
}
.portal-rates-payment-methods {
font-size: 0.85rem;
font-weight: 500;
color: #5a6278;
letter-spacing: 0.01em;
}
.portal-rates-payment-authnet {
display: block;
width: auto;
height: auto;
max-width: 140px;
max-height: 40px;
}
.portal-rates-payment-note {
font-size: 0.8rem;
color: #7a8494;
}
.portal-rates-why {
margin: 0 0 1.75rem;
padding: 1.15rem 1.25rem 1.25rem;
background: #fff;
border: 1px solid #e4eaef;
border-radius: 0.5rem;
}
.portal-rates-why-title {
margin: 0 0 0.5rem;
font-size: 1.15rem;
font-weight: 700;
color: var(--dhn-blue);
}
.portal-rates-why-proof {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
margin: 0 0 0.35rem;
font-size: 0.95rem;
color: #384152;
}
.portal-rates-why-google {
display: block;
width: auto;
height: auto;
max-width: 125px;
max-height: 32px;
}
.portal-rates-why-intro {
margin: 0 0 0.85rem;
font-size: 0.875rem;
color: #5a6278;
}
.portal-rates-why-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.55rem;
list-style: none;
margin: 0;
padding: 0;
}
.portal-rates-why-chip {
display: inline-block;
max-width: 100%;
padding: 0.35rem 0.75rem;
border: 1px solid #cddceb;
border-radius: 999px;
background: #f4f8fb;
color: var(--dhn-blue);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
overflow-wrap: anywhere;
}
.portal-rates-why-chip:hover,
.portal-rates-why-chip:focus {
background: #e6f0f8;
border-color: #9fbdd7;
color: #003c63;
text-decoration: none;
}
.portal-rates-why-chip:focus-visible {
outline: 2px solid var(--dhn-blue);
outline-offset: 2px;
}
/* Portal V2 Upgrade Credit (DHN-1640) */
.portal-credit-summary {
padding: 1rem 1.25rem;
margin: 0 0 1.75rem;
border: 1px solid #cfe0ee;
border-radius: 0.75rem;
background: #f4f8fb;
display: flex;
flex-direction: column;
gap: 1rem;
}
.portal-credit-summary-label {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #5a6278;
}
.portal-credit-summary-amount {
margin: 0.15rem 0;
font-size: 1.65rem;
font-weight: 700;
color: var(--dhn-blue);
}
.portal-credit-summary-current {
margin: 0;
font-size: 0.875rem;
color: #384152;
}
.portal-credit-callout {
padding: 1.25rem;
border: 1px solid #d5dbe6;
border-radius: 0.75rem;
background: #fff;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.portal-credit-callout h2 {
margin: 0;
font-size: 1.05rem;
color: #1a2433;
}
.portal-credit-callout p {
margin: 0.35rem 0 1rem;
color: #5a6278;
}
.portal-credit-call-button {
width: auto !important;
}
.portal-credit-plans .portal-rates-price-alt {
margin: 0 0 0.15rem;
}
.portal-prepaid-activated-message {
font-size: 1.05rem;
line-height: 1.5;
}
.portal-prepaid-activated-card .portal-payment-thank-you-actions {
margin-top: 1.25rem;
}
.portal-payment-thank-you {
max-width: 640px;
margin: 0 auto;
}
.portal-payment-thank-you-card {
background: #fff;
border: 1px solid var(--dhn-border, #e5e7eb);
border-radius: 12px;
padding: 2rem 1.75rem;
text-align: center;
}
.portal-payment-thank-you-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #ecfdf5;
color: #059669;
margin-bottom: 1rem;
}
.portal-payment-thank-you-title {
margin: 0 0 0.35rem;
color: #111827;
}
.portal-payment-thank-you-subtitle {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.portal-payment-thank-you-body,
.portal-payment-thank-you-support {
text-align: left;
font-size: 0.95rem;
line-height: 1.6;
}
.portal-payment-thank-you-body {
background: #f9fafb;
border-radius: 8px;
padding: 1.25rem 1rem;
margin-bottom: 1.25rem;
}
.portal-payment-thank-you-support {
border-top: 1px solid var(--dhn-border, #e5e7eb);
padding-top: 1.25rem;
margin-bottom: 1.5rem;
color: #374151;
}
.portal-payment-thank-you-phone {
font-weight: 700;
color: #059669;
text-decoration: none;
letter-spacing: 0.02em;
}
.portal-payment-thank-you-phone:hover {
text-decoration: underline;
}
.portal-payment-thank-you-actions {
justify-content: center;
gap: 1rem;
}
@media (max-width: 767px) {
.portal-rates-plans {
display: flex;
flex-direction: column;
gap: 1rem;
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
}
.portal-rates-plan {
border: 1px solid #d5dbe6;
border-radius: 0.75rem;
background: #fff;
overflow: hidden;
}
.portal-rates-plan-row {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"name"
"ads"
"price"
"details"
"action";
gap: 0.5rem;
}
.portal-rates-plan-row:has(.portal-rates-plan-pricing) .portal-rates-plan-pricing,
.portal-rates-plan-row:has(.portal-rates-plan-pricing) .portal-rates-plan-action,
.portal-rates-plan-row:not(:has(.portal-rates-plan-pricing)) .portal-rates-plan-action {
grid-row: auto;
}
.portal-rates-plan-row:not(:has(.portal-rates-plan-ads)):not(:has(.portal-rates-plan-tagline)) {
grid-template-areas:
"name"
"price"
"details"
"action";
}
.portal-rates-plan-row:not(:has(.portal-rates-plan-pricing)) {
grid-template-areas:
"name"
"ads"
"details"
"action";
}
.portal-rates-plan-row:not(:has(.portal-rates-plan-pricing)):not(:has(.portal-rates-plan-ads)):not(:has(.portal-rates-plan-tagline)) {
grid-template-areas:
"name"
"details"
"action";
}
.portal-rates-plan-pricing {
text-align: center;
justify-self: stretch;
width: 100%;
min-width: 0;
border-top: 1px solid #e4eaef;
border-bottom: 1px solid #e4eaef;
padding: 0.85rem 0;
margin: 0.15rem 0;
}
.portal-rates-plan-row .portal-rates-price {
text-align: center;
}
.portal-rates-plan-row .portal-rates-amount {
font-size: 1.65rem;
}
.portal-rates-plan-row .portal-rates-term {
font-size: 0.95rem;
}
.portal-rates-plan-row .portal-rates-price-alt {
text-align: center;
}
.portal-rates-section .portal-rates-plan-action {
display: flex;
flex-direction: column;
align-items: stretch;
justify-self: stretch;
grid-column: 1 / -1;
width: 100%;
max-width: 100%;
min-width: 0;
}
.portal-rates-section .portal-rates-plan-action form {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
}
.portal-rates-section .portal-rates-plan-action .btn.portal-rates-buy,
.portal-rates-section .portal-rates-plan-action .btn.portal-rates-call,
.portal-rates-section .portal-rates-plan-action .portal-rates-call-btn,
.portal-rates-section .portal-rates-plan-action form .btn.portal-rates-buy {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.portal-rates-network-logos img {
max-width: 165px;
max-height: 44px;
}
}
/* Portal V2 Auto Notify (DHN-1649) / Saved Search list (DHN-1650) */
.portal-auto-notify-page .portal-auto-notify-escape {
margin-bottom: 1rem;
}
@media (max-width: 767.98px) {
.portal-auto-notify-page > .d-flex.justify-content-between {
flex-direction: column;
align-items: stretch;
}
.portal-auto-notify-page > .d-flex.justify-content-between > .link-btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
}
}
.portal-auto-notify-row .portal-an-search-title {
font-weight: 600;
color: #243746;
}
.portal-auto-notify-row .portal-an-criteria-primary {
font-weight: 500;
color: #243746;
}
.portal-an-feature-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
border: 1px solid #c5d6e4;
border-radius: 0.3rem;
background: #eef4f9;
color: var(--dhn-blue);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.portal-auto-notify-table-wrap {
border: 1px solid #e4eaef;
overflow: hidden;
background: #fff;
}
.portal-auto-notify-table {
margin: 0;
font-size: 0.875rem;
}
.portal-auto-notify-table th {
white-space: nowrap;
background: #e8f0f8;
color: #1a3355;
font-weight: 600;
border-bottom: 1px solid #c5d0de;
}
.portal-auto-notify-table td {
vertical-align: top;
}
.portal-auto-notify-actions {
min-width: 10.5rem;
white-space: nowrap;
}
.portal-auto-notify-actions .btn {
margin: 0 0.35rem 0.25rem 0;
vertical-align: middle;
}
/* Beat legacy assets5 mint .btn-primary so Run/Edit stay solid brand primary. */
.portal-auto-notify-actions .portal-an-action-primary,
.portal-auto-notify-actions .portal-an-action-primary:visited {
background-color: var(--dhn-blue);
border: 1px solid var(--dhn-blue);
color: #fff;
font-weight: 600;
box-shadow: none;
text-decoration: none;
}
.portal-auto-notify-actions .portal-an-action-primary:hover,
.portal-auto-notify-actions .portal-an-action-primary:focus,
.portal-auto-notify-actions .portal-an-action-primary:active {
background-color: #003d66;
border-color: #003d66;
color: #fff;
}
.portal-auto-notify-actions .portal-an-action-primary:focus-visible {
outline: 2px solid var(--dhn-blue);
outline-offset: 2px;
box-shadow: 0 0 0 0.15rem rgba(0, 79, 130, 0.25);
}
/* Delete: quiet text control; stronger danger only on hover/focus. */
.portal-auto-notify-actions .portal-an-delete-form {
vertical-align: middle;
}
.portal-auto-notify-actions .portal-an-action-delete {
padding: 0.2rem 0.35rem;
border: 0;
background: transparent;
color: #8a6a6a;
font-weight: 500;
text-decoration: none;
box-shadow: none;
}
.portal-auto-notify-actions .portal-an-action-delete:hover,
.portal-auto-notify-actions .portal-an-action-delete:focus {
color: #b42318;
background: transparent;
text-decoration: underline;
}
.portal-auto-notify-actions .portal-an-action-delete:focus-visible {
outline: 2px solid #b42318;
outline-offset: 2px;
border-radius: 0.2rem;
}
@media (max-width: 767.98px) {
.portal-auto-notify-table-wrap {
border: 0;
background: transparent;
overflow: visible;
}
.portal-auto-notify-table,
.portal-auto-notify-table tbody,
.portal-auto-notify-table tr,
.portal-auto-notify-table td {
display: block;
width: 100%;
}
.portal-auto-notify-table thead {
display: none;
}
.portal-auto-notify-table tr {
margin: 0 0 0.8rem;
padding: 0.9rem 1rem;
border: 1px solid #e4eaef;
border-radius: 0.4rem;
background: #F2F6F8;
}
.portal-auto-notify-table td {
padding: 0.35rem 0;
border: 0;
}
.portal-auto-notify-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 0.1rem;
color: #627485;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
}
}
.portal-auto-notify-section {
margin: 0;
padding: 1rem 0 1.1rem;
border: 0;
border-radius: 0;
background: transparent;
}
.portal-auto-notify-section:last-of-type {
border-bottom: 0;
}
.portal-auto-notify-form > .portal-auto-notify-section:first-of-type {
padding-top: 0.6rem;
}
.portal-auto-notify-section h2 {
font-size: 1.15rem;
color: #000;
line-height: 1.3;
margin-bottom: 1rem;
border-bottom: 1px solid #dfdfdf;
padding-bottom: 0.75rem;
}
.portal-auto-notify-form-page .portal-auto-notify-form-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem 1rem;
margin-bottom: 0.5rem;
}
.portal-auto-notify-form-page .portal-auto-notify-form-heading {
max-width: 40rem;
}
.portal-auto-notify-form-page .portal-auto-notify-form-title {
margin: 0 0 0.3rem;
color: #16273a;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.portal-auto-notify-form-page .portal-auto-notify-form-lead {
margin: 0;
color: #43536a;
font-size: 0.95rem;
line-height: 1.45;
}
.portal-auto-notify-form-page .portal-auto-notify-form-note {
margin: 0.2rem 0 0;
color: #7a8798;
font-size: 0.8rem;
line-height: 1.4;
}
/* .portal-auto-notify-form-page .portal-auto-notify-criteria {
max-width: 52rem;
} */
/* .portal-auto-notify-form-page .portal-auto-notify-section:not(.an-loc-panel) {
max-width: 95vh;
} */
.portal-auto-notify-field-group {
margin: 0 0 1rem;
}
.portal-auto-notify-field-group:last-child {
margin-bottom: 0.25rem;
}
.portal-auto-notify-field-label {
margin: 0 0 0.4rem;
color: #1f3c56;
font-size: 0.9rem;
font-weight: 600;
}
.portal-auto-notify-field-row {
max-width: 44rem;
}
.portal-auto-notify-choice-inline {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.portal-auto-notify-choice-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
padding: 0.4rem 0.75rem;
border: 1px solid #d8e0e7;
border-radius: 0.3rem;
background: #fff;
color: #263544;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25;
transition: background-color 120ms ease, border-color 120ms ease;
}
.portal-auto-notify-choice-chip:hover {
border-color: #9db8cc;
background: #f7fafc;
}
.portal-auto-notify-choice-chip:has(input:checked) {
border-color: #4a85ad;
background: #edf6fb;
color: #173d59;
}
.portal-auto-notify-choice-chip:has(input:focus-visible) {
outline: 3px solid rgba(0, 79, 130, 0.24);
outline-offset: 2px;
}
.portal-auto-notify-choice-chip input[type="radio"] {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
margin: 0;
accent-color: #0071bc;
}
.portal-auto-notify-checklist.portal-auto-notify-choice-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 1.5rem;
row-gap: 1rem;
max-height: none;
overflow: visible;
padding: 0.2rem 0;
}
.portal-auto-notify-checklist.portal-auto-notify-choice-grid label {
min-width: 0;
display: flex;
align-items: center;
gap: 0.35rem;
min-height: 2.35rem;
margin: 0;
padding: 0.45rem 0.55rem;
border: 1px solid #d8e0e7;
border-radius: 0.3rem;
background: #fff;
color: #263544;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25;
transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.portal-auto-notify-checklist.portal-auto-notify-choice-grid label:hover {
border-color: #9db8cc;
background: #f7fafc;
}
.portal-auto-notify-checklist.portal-auto-notify-choice-grid label:has(input:checked) {
border-color: #4a85ad;
background: #edf6fb;
color: #173d59;
}
.portal-auto-notify-checklist.portal-auto-notify-choice-grid label:has(input:focus-visible),
.portal-auto-notify-section-additional label:has(input:focus-visible) {
outline: 3px solid rgba(0, 79, 130, 0.24);
outline-offset: 2px;
}
.portal-auto-notify-checklist.portal-auto-notify-choice-grid input[type="checkbox"],
.portal-auto-notify-section-additional input[type="checkbox"] {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
margin: 0;
accent-color: #0071bc;
}
.portal-auto-notify-checklist.portal-auto-notify-choice-grid-sale {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.portal-auto-notify-checklist-compact:not(.portal-auto-notify-choice-grid) {
max-height: 9rem;
}
.portal-auto-notify-range-grid {
display: flex;
flex-direction: column;
gap: 0.55rem;
max-width: 44rem;
}
.portal-auto-notify-range-head,
.portal-auto-notify-range-row {
display: grid;
grid-template-columns: 7.5rem minmax(7.5rem, 1fr) 1.25rem minmax(7.5rem, 1fr) 3.75rem;
gap: 0.35rem 0.55rem;
align-items: start;
}
.portal-auto-notify-range-head {
margin-bottom: -0.15rem;
align-items: end;
}
.portal-auto-notify-range-col-label {
color: #627485;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.portal-auto-notify-range-label {
color: #1f3c56;
font-weight: 600;
font-size: 0.9rem;
}
.portal-auto-notify-range-sep {
color: #8a97a8;
text-align: center;
font-weight: 500;
line-height: 1;
}
.portal-auto-notify-range-label,
.portal-auto-notify-range-sep,
.portal-auto-notify-range-unit {
padding-top: 0.35rem;
}
.portal-auto-notify-range-control {
min-width: 0;
}
.portal-auto-notify-range-control .form-select,
.portal-auto-notify-range-control .form-control {
width: 100%;
}
.portal-auto-notify-range-control-max {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
}
.portal-auto-notify-range-unit {
color: #627485;
font-size: 0.82rem;
white-space: nowrap;
}
.portal-auto-notify-range-row-price .portal-auto-notify-range-control {
min-width: 0;
}
.portal-auto-notify-open-max {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0;
color: #35526a;
font-weight: 400;
font-size: 0.82rem;
white-space: nowrap;
}
.portal-auto-notify-range-control-max:has(input:disabled) .form-control,
.portal-auto-notify-range-control-max:has(input:disabled) .form-select,
#an-lot-size-max:disabled,
#an-square-feet-max:disabled {
opacity: 0.45;
background-color: #f3f5f7;
}
.portal-auto-notify-range-err {
grid-column: 2 / -1;
margin: 0;
}
.portal-auto-notify-section-additional .portal-auto-notify-additional {
padding: 0.15rem 0;
}
.portal-auto-notify-section-additional label {
display: flex;
align-items: center;
gap: 0.4rem;
width: fit-content;
min-height: 2.35rem;
margin: 0;
padding: 0.45rem 0.65rem;
border: 1px solid #d8e0e7;
border-radius: 0.3rem;
background: #fff;
color: #263544;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25;
transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.portal-auto-notify-section-additional label:hover {
border-color: #9db8cc;
background: #f7fafc;
}
.portal-auto-notify-section-additional label:has(input:checked) {
border-color: #4a85ad;
background: #edf6fb;
color: #173d59;
}
.portal-auto-notify-form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
max-width: 52rem;
margin-top: 0.35rem;
padding-top: 1rem;
border-top: 1px solid #e4eaef;
}
.portal-auto-notify-form-actions .portal-auto-notify-save {
min-width: 9.5rem;
color: #fff !important;
background-color: var(--dhn-blue);
border-color: var(--dhn-blue);
border-radius: 0.3rem;
font-weight: 600;
text-shadow: none;
}
@media (max-width: 767.98px) {
.portal-auto-notify-form-actions .portal-auto-notify-save {
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
}
.portal-auto-notify-form-actions .portal-auto-notify-save:hover,
.portal-auto-notify-form-actions .portal-auto-notify-save:focus {
color: #fff !important;
background-color: #003a61;
border-color: #003a61;
}
.portal-auto-notify-form-actions .portal-auto-notify-save:focus-visible {
outline: 3px solid rgba(0, 79, 130, 0.3);
outline-offset: 2px;
box-shadow: none;
}
.portal-auto-notify-form-actions .portal-auto-notify-save:disabled,
.portal-auto-notify-form-actions .portal-auto-notify-save.disabled {
color: #6b7d8c !important;
background-color: #dce7ee;
border-color: #dce7ee;
cursor: not-allowed;
opacity: 1;
}
.portal-auto-notify-classic-link {
color: #5a6278;
font-size: 0.9rem;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.portal-auto-notify-classic-link:hover,
.portal-auto-notify-classic-link:focus {
color: var(--dhn-blue);
}
.portal-auto-notify-site-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.5rem;
align-items: stretch;
}
.portal-auto-notify-checklist.portal-auto-notify-loc-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 1.5rem;
row-gap: 0.625rem;
align-content: start;
max-height: 16rem;
overflow: auto;
padding: 0.35rem 0.25rem;
}
@media (max-width: 991.98px) {
.portal-auto-notify-site-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.portal-auto-notify-checklist.portal-auto-notify-loc-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.portal-leads-table td.text-nowrap {
white-space: normal !important;
}
}
@media (max-width: 767.98px) {
.portal-auto-notify-checklist.portal-auto-notify-choice-grid,
.portal-auto-notify-checklist.portal-auto-notify-choice-grid-sale {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portal-auto-notify-site-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portal-auto-notify-range-head {
display: none;
}
.portal-auto-notify-range-row {
grid-template-columns: minmax(0, 1fr) 1.1rem minmax(0, 1fr);
gap: 0.35rem 0.45rem;
padding: 0.4rem 0;
border-bottom: 1px solid #f0f3f6;
}
.portal-auto-notify-range-row:last-child {
border-bottom: 0;
}
.portal-auto-notify-range-label,
.portal-auto-notify-range-unit,
.portal-auto-notify-range-err {
grid-column: 1 / -1;
}
.portal-auto-notify-range-unit:empty {
display: none;
}
.portal-auto-notify-range-control-max .portal-auto-notify-open-max {
white-space: normal;
}
.an-loc-filter-label {
flex: 1 1 100%;
}
.an-loc-filter-label .an-loc-filter {
width: 100%;
}
.portal-auto-notify-checklist.portal-auto-notify-loc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.portal-auto-notify-checklist.portal-auto-notify-choice-grid,
.portal-auto-notify-checklist.portal-auto-notify-choice-grid-sale {
grid-template-columns: 1fr;
}
.portal-auto-notify-checklist.portal-auto-notify-loc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portal-auto-notify-site-logo {
max-width: 120px;
max-height: 40px;
}
}
@media (max-width: 479.98px) {
.portal-auto-notify-checklist.portal-auto-notify-loc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.portal-auto-notify-site-choice {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 3.75rem;
margin: 0;
padding: 0.55rem 0.5rem;
border: 1px solid #d8e0e7;
border-radius: 0.3rem;
background: #fff;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease;
}
.portal-auto-notify-site-choice:hover {
border-color: #9db8cc;
background: #f7fafc;
}
.portal-auto-notify-site-choice:has(input:checked) {
border-color: #4a85ad;
background: #edf6fb;
box-shadow: inset 0 0 0 1px #4a85ad;
}
.portal-auto-notify-site-choice:has(input:focus-visible) {
outline: 3px solid rgba(0, 79, 130, 0.24);
outline-offset: 2px;
}
.portal-auto-notify-site-choice input[type="radio"] {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
margin: 0;
accent-color: #0071bc;
}
.portal-auto-notify-site-name {
color: #263544;
font-size: 0.85rem;
font-weight: 500;
line-height: 1.25;
}
.portal-auto-notify-site-logo {
display: block;
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
max-height: 45px;
width: auto;
height: auto;
}
.portal-auto-notify-checklist {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
max-height: 16rem;
overflow: auto;
padding: 0.35rem 0;
}
/* Location pickers (cities/lakes/courses/counties): aligned grid, scrollable. */
.portal-auto-notify-checklist.portal-auto-notify-loc-grid label {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 0.4rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.35;
padding: 0.1rem 0;
overflow-wrap: anywhere;
}
.portal-auto-notify-checklist.portal-auto-notify-loc-grid label input[type="checkbox"] {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
margin: 0.12rem 0 0;
accent-color: #0071bc;
}
.portal-auto-notify-checklist.portal-auto-notify-loc-grid .an-loc-no-match,
.portal-auto-notify-checklist.portal-auto-notify-loc-grid .an-loc-empty {
grid-column: 1 / -1;
}
.portal-auto-notify-checklist label {
margin: 0;
font-weight: 400;
min-width: 10rem;
}
.portal-auto-notify-checklist.portal-auto-notify-choice-grid label {
min-width: 0;
}
.portal-auto-notify-checklist label[hidden] {
display: none !important;
}
.an-loc-selected-wrap {
margin-bottom: 0.75rem;
padding: 0.5rem 0.65rem;
border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: 0.375rem;
background: var(--bs-tertiary-bg, #f8f9fa);
}
.portal-auto-notify-selected {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
min-height: 1.5rem;
}
.portal-auto-notify-selected-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin: 0;
padding: 0.15rem 0.55rem;
border: 1px solid var(--bs-border-color, #ced4da);
border-radius: 999px;
background: #fff;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.3;
cursor: pointer;
}
button.portal-auto-notify-selected-chip {
color: inherit;
}
.an-loc-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.5rem 1.5rem;
margin-bottom: 0.5rem;
}
.an-loc-filter-label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0;
font-weight: 400;
font-size: 0.875rem;
flex: 1 1 auto;
min-width: 0;
}
.an-loc-filter-label .an-loc-filter {
width: min(100%, 16rem);
max-width: 100%;
}
.an-loc-select-all {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-weight: 400;
font-size: 0.875rem;
white-space: nowrap;
flex: 0 0 auto;
}
.portal-auto-notify-search-types .portal-auto-notify-choice-chip {
font-weight: 500;
}
.portal-mobile-sidebar {
position: relative;
z-index: 20;
margin: 0 0 1rem;
border-bottom: 1px solid #DFDFDF;
padding-bottom: 1rem;
}
.portal-mobile-sidebar-details {
position: relative;
background: transparent;
border: 0;
}
.portal-mobile-sidebar-details summary {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
height: 48px;
padding: 0 1rem;
list-style: none;
cursor: pointer;
font-weight: 600;
line-height: 1.2;
color: var(--dhn-blue);
background: #fff;
border: 1px solid var(--dhn-blue);
border-radius: 6px;
}
.portal-mobile-sidebar-details[open] summary {
border-radius: 6px 6px 0 0;
}
.portal-mobile-sidebar-details summary::-webkit-details-marker {
display: none;
}
.portal-mobile-sidebar-details summary::after {
content: none;
}
.portal-mobile-sidebar-icon {
display: block;
flex: 0 0 16px;
width: 16px;
height: 16px;
background: url("/assets/img/portal-mobile-menu-open.svg?1") center / contain no-repeat;
background-size: 70%;
}
.portal-mobile-sidebar-details[open] .portal-mobile-sidebar-icon {
background-image: url("/assets/img/portal-mobile-menu-close.svg?1");
}
.portal-mobile-sidebar-details .portal-wizard-sidebar {
display: none;
}
.portal-mobile-sidebar-details[open] .portal-wizard-sidebar {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 21;
height: auto !important;
max-height: min(500rem, 50vh);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: 0 1rem 0.75rem;
background: #f2f6f8;
border: 1px solid var(--dhn-blue);
border-top: 0;
border-radius: 0 0 6px 6px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.portal-mobile-sidebar-details .side-bar ul {
padding: 0 !important;
}
.link-btn {
background: var(--dhn-blue);
color: #FFF !important;
border: 0;
border-radius: 6px;
padding: 5px 10px;
text-decoration: none;
font-weight: 700;
transition: all .25s;
font-size: .875rem;
line-height: 1.5;
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
}
.primary-btn {
color: var(--dhn-blue);
background: #FFF;
border:1px solid var(--dhn-blue);
border-radius: 6px;
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
outline: none;
text-decoration: none;
font-weight: 700;
}
.primary-link {
border: 0;
text-decoration: underline;
color:var(--dhn-blue) !important;
font-weight: 700;
}
.disable-btn {
color: #BE0000;
border-color: #BE0000;
}
.portal-wizard-shell,
.portal-wizard-shell > .row,
.portal-wizard-main {
min-width: 0;
max-width: 100%;
}
@media (max-width: 991.98px) {
.portal-wizard-main {
overflow-x: hidden;
}
.portal-wizard-shell,
.portal-wizard-shell > .row,
.portal-wizard-main {
min-width: 0;
max-width: unset;
}
.portal-dashboard-stats,
.portal-dashboard-section,
.portal-spotlight-table-wrap {
min-width: 0;
max-width: 100%;
}
.portal-dashboard-stats {
display: flex;
flex-wrap: nowrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
margin-right: 1rem;
padding-left: 1rem;
padding-right: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.portal-dashboard-stats::after {
content: "";
flex: 0 0 1rem;
}
}
@media (max-width: 991.98px) {
.portal-wizard-main {
display: flex;
flex-direction: column;
}
.portal-dashboard-page {
display: contents;
}
.portal-dashboard-header {
order: -1;
margin-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
}
.portal-dashboard-subtitle {
font-size: 14px;
}
.portal-dashboard-actions {
display: none;
}
.portal-dashboard-title {
font-size: 1.1rem;
}
.portal-dashboard-stats,
.portal-dashboard-section {
padding-left: 1rem;
padding-right: 1rem;
}
.portal-dashboard-stats .portal-stat-card {
flex: 0 0 72%;
min-width: 150px;
max-width: 150px;
}
.portal-stat-card span {
margin-top:1rem;
font-size: 1rem;
}
.portal-stat-card strong {
margin-top: 0.5rem;
}
.portal-dashboard-section {
padding-left: 1rem;
padding-right: 1rem;
}
.portal-active-by-site {
flex-direction: column;
flex-wrap: nowrap;
}
.portal-active-by-site-tile {
width: 100%;
justify-content: space-between;
}
.portal-detail-grid {
grid-template-columns: 1fr;
gap: 0;
}
.portal-detail-grid dt {
margin: 0.85rem 0 0.15rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.portal-detail-grid dt:first-child {
margin-top: 0;
}
.portal-detail-grid dd {
margin: 0;
padding-bottom: 0.75rem;
border-bottom: 1px solid #eef1f4;
overflow-wrap: anywhere;
font-size: 1rem;
}
.portal-detail-grid dd:last-child {
padding-bottom: 0;
border-bottom: 0;
}
}
/* Dashboard - Spotlights table */
@media (max-width: 991.98px) {
.portal-spotlight-table-wrap {
overflow: visible;
border: 0;
background: transparent;
}
.portal-spotlight-table thead {
display: none;
}
.portal-spotlight-table,
.portal-spotlight-table tbody,
.portal-spotlight-table tr,
.portal-spotlight-table td {
display: block;
width: 100%;
}
.portal-spotlight-table tr {
margin: 0 0 0.8rem;
border: 1px solid #d0d7de;
border-radius: 0.4rem;
background: #fff;
}
.portal-spotlight-table td {
padding: 0.4rem 0;
border: 0;
text-align: left !important;
white-space: normal;
padding-left: 1rem ;
padding-right: 1rem;
background: #f7f9fb;
}
.portal-spotlight-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 0.15rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.portal-placement-line {
font-size: 1rem;
}
}
.btn-outline-danger {
color: #dc3545 !important;
background-color: #c6e2f5 !important;
}
.btn-outline-primary {
color: #007bff !important;
}
.portal-subtitle {
font-size: 0.9rem;
}
/* Leads Table */
@media (max-width: 991.98px) {
.portal-leads-table-wrap {
overflow: visible;
border: 0;
background: transparent;
}
.portal-leads-table thead {
display: none;
}
.portal-leads-table,
.portal-leads-table tbody,
.portal-leads-table tr,
.portal-leads-table td {
display: block;
width: 100%;
}
.portal-leads-table tr {
margin: 0 0 0.8rem;
border: 1px solid #e4eaef;
border-radius: 0.4rem;
background: #fff;
padding-top: 10px;
padding-bottom: 10px;
background: #F2F6F8;
}
.portal-leads-table td {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.4rem 1rem;
border: 0;
text-align: left !important;
white-space: normal;
}
.portal-leads-table td::before {
content: attr(data-label) ": ";
display: inline;
flex: 0 0 7.5rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #1a3355;
}
.portal-lead-listing-meta,
.portal-lead-question {
max-width: none;
}
.portal-lead-date div.small {
padding-top: 2px;
}
.portal-leads-table td.portal-lead-contact {
display: grid;
grid-template-columns: 7.5rem 1fr;
column-gap: 0.5rem;
align-items: start;
}
.portal-leads-table td.portal-lead-contact::before {
grid-column: 1;
grid-row: 1 / span 2;
flex: none;
}
.portal-leads-table td.portal-lead-contact > * {
grid-column: 2;
min-width: 0;
overflow-wrap: anywhere;
}
.portal-leads-table td.portal-lead-ad {
display: grid;
grid-template-columns: 7.5rem 1fr;
column-gap: 0.5rem;
align-items: start;
}
.portal-leads-table td.portal-lead-ad::before {
grid-column: 1;
grid-row: 1 / -1;
flex: none;
}
.portal-leads-table td.portal-lead-ad > * {
grid-column: 2;
min-width: 0;
overflow-wrap: anywhere;
}
}
.pagination {
margin-top: 0.5rem !important;
}
.pagination > .page-item .page-link {
width: 30px;
height: 30px;
line-height: 30px;
color: var(--dhn-blue) !important;
margin-top: 0;
}
.pagination > .page-item.active .page-link {
color: #FFF !important;
background: var(--dhn-blue) !important;
width: 30px !important;
height: 30px !important;
line-height: 30px !important;
}
.pagination > .page-item.active .page-link:focus,
.pagination > .page-item.active .page-link:hover {
width: 30px !important;
height: 30px !important;
line-height: 30px !important;
}
.portal-listings-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
}
.portal-listings-toolbar .portal-listings-subfilters {
margin-bottom: 0;
}
#portal-listings-pagination-top {
margin-left: auto;
}
@media (max-width: 767.98px) {
#portal-listings-pagination-top {
display: flex;
justify-content: center;
width: 100%;
margin-left: 0 !important;
margin-right: 0;
margin-bottom: 0.75rem;
}
}
@media (min-width: 768px) {
.portal-listings-stack {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 1rem;
}
.portal-listings-toolbar {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
}
#portal-listings-body {
display: contents;
}
.portal-listings-searchbar {
grid-column: 1 / -1;
grid-row: 2;
}
#portal-listings-pagination-top {
grid-column: 2;
grid-row: 1;
display: flex;
justify-content: flex-end;
width: auto;
margin: 0 0 0 0;
}
#portal-listings-body > *:not(.portal-listings-searchbar):not(#portal-listings-pagination-top) {
grid-column: 1 / -1;
}
}
.table-warning, .table-warning > th, .table-warning > td {
background-color: #fff3cd !important;
}
/* My Favorites */
.portal-favorites-table-wrap {
border: 1px solid #d5dbe6;
border-radius: 6px;
background: #fff;
}
.portal-favorites-table thead th {
background: #e8f0f8;
color: #1a3355;
font-weight: 600;
white-space: nowrap;
border-bottom: 1px solid #c5d0de;
}
@media (max-width: 991.98px) {
.portal-favorites-table-wrap {
overflow: visible;
border: 0;
background: transparent;
}
.portal-favorites-table thead {
display: none;
}
.portal-favorites-table,
.portal-favorites-table tbody,
.portal-favorites-table tr,
.portal-favorites-table td {
display: block;
width: 100%;
}
.portal-favorites-table tr {
margin: 0 0 0.8rem;
padding: 10px 0;
border: 1px solid #e4eaef;
border-radius: 0.4rem;
background: #f2f6f8;
}
.portal-favorites-table td {
display: block;
padding: 0.35rem 1rem;
border: 0;
text-align: left !important;
white-space: normal;
}
.portal-favorites-table td::before {
content: none;
}
.portal-favorites-table .portal-favorites-thumb {
width: 100%;
max-width: 100%;
height: auto;
max-height: 180px;
}
.portal-fav-previews {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.35rem !important;
font-size: 0.9rem;
}
.portal-favorites-table .remove-fav {
text-align: center !important;
padding-top: 1rem;
}
.portal-favorites-table .remove-fav a{
width: 95% !important;
}
}
.portal-detail-grid .plan-details {
display: flex;
flex-direction: column;
gap: 0.10rem;
font-size: 16px;
color: #384152;
font-weight: bold;
}
.portal-detail-grid .plan-details .portal-plan-details-empty {
font-weight: 400;
}
.portal-listings-table-wrap mark.portal-listings-search-hit {
background-color: #fff3a0;
color: inherit;
padding: 0 0.12em;
border-radius: 2px;
font-weight: inherit;
}