/* START accessibility styles, part 1 */
[role="switch"][aria-checked="true"] :first-child, [role="switch"][aria-checked="false"] :last-child {background:#2196f3;color:#fff;}
a{color:#1976D2;}
.visuallyhidden, .visually-hidden {border: 0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.required-star {color:#e80000;margin-right:5px;font-weight:900;margin-bottom:0px;}
[aria-required=true] { border: #324df4 thin solid !important; }
[data-required=true]:after {color: #e80000; content: ' *';display:inline; font-weight:900;}
/* END accessibility styles, part 1 */
/* START accessiblity styles for when a field, link or button has focus */
[aria-invalid=true] { border-color: red; border-right: 5px; }
input[type=text]:focus, input[type=password]:focus,input[type=email]:focus,textarea:focus, select:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); border: 1px solid rgba(81, 203, 238, 1); } 
.form-responsive input[type="submit"]:focus, .form-responsive input[type="button"]:focus, .form-responsive button:focus, .form-responsive .button:focus {font-weight:bold;box-shadow: 0 0 5px rgba(81, 203, 238, 1); border: 1px solid rgba(81, 203, 238, 1);}
a.tooltip:focus, a:focus {color:green;border-bottom: 1px solid green;}
a.no-underline:focus {border-bottom:none;} /* override: thumbnail focus underline was appearing in mid-line instead of below. Supress via class. */
/* .checkbox input[type="checkbox"]:focus {outline: rgb(59, 153, 252) auto 5px;} */
.error {margin-top:.5rem;margin-bottom:.5rem;display:block;color:#f44336;position:relative;}
.success {margin-top:.5rem;margin-bottom:.5rem;display:block;color:#a4c639;position:relative;}
#validationerrors h1, .maintext-alert h1{color:#f44336;font-size:1.4rem;margin-top:15px;}/* font-size: 1.0625rem;*/
#validationerrors ul {text-align:left;}
/* END accessiblity styles for when a field, link or button has focus */
/* START misc styles */
.page-title {padding:1rem 0;}
img{max-width:100%;}
#branding img {max-height:150px;}
.bg-slate-800 {background-color: #37474f;}
.sidebar-content .card {background-color:transparent;}
/* [class*=bg-]:not(.bg-transparent):not(.bg-light):not(.bg-white):not(.btn-outline):not(body) {color: #fff;} */ /* make button text white */
[class*=bg-]:not(.bg-transparent,.bg-light,.bg-white,.btn-outline,body,.bg-secondary) {color: #fff;} /* make button text white */
[class*=bg-]:not(.bg-transparent,.bg-light,.bg-white,.btn-outline,body,.bg-secondary) a {color: #eee;} /* make link text off-white */
.navbar-dark {background-color: #324148;}
.sidebar-dark .nav-sidebar>.nav-item-open>.nav-link:not(.disabled), .sidebar-dark .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar>.nav-item-open>.nav-link:not(.disabled), .sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar>.nav-item>.nav-link.active {background-color:#26a69a;color:#fff;}
.sidebar-dark .nav-sidebar .nav-item>.nav-link.active, .sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar .nav-item>.nav-link.active {background-color: rgba(0,0,0,.15); color: #fff;}
.form-control { scroll-margin-top: 50px; } /* when scrolling to a form field, display it 50 px down on the page (so top menu doesn't hide the label for form field). (Applies to all form elements with a form-control class. Maybe make this more specific to input fields?) another option: scroll-padding-top: 50px; */
.form-group {margin-bottom:6px;}
.formfield-instructions {font-style:italic;}
.legend-inline, legend.legend-inline {border-bottom:0px solid #fff;margin-bottom:0px;padding-bottom:3px;}
legend{font-size:1.1rem;}
@media (max-width: 749px) { .btn-popover, .btn.btn-popover {width:auto !important;} }
.nav-tabs .nav-item .nav-link {border-color:#ddd;} /* give non-active tabs a border, too */
table.stripe .even {background-color:#f5f5f5;} table.stripe .odd {background-color:#fff;} /* To alternate row colors, add class stripe to a table, and classes even and odd to rows (or just add class stripe to a datatable (row classes added automatically) */
/* END misc styles */

/* ////////////// START tweak wizard steps to stay on one line and be smaller (override styles) [Nikki's edits] ////////////// */
.wizard>.steps .number {border-radius: 20rem;}
.wizard> .steps > ul > li {font-size: .7em;}
/* .wizard > .steps > ul > li.current .number:after {font-size: 1em;} */
@media (max-width: 991.98px) {
  .wizard > .steps > ul > li { /* display: block; float: left; width: 50%; */ display:table-cell;float:none;width:auto; }
  .wizard > .steps > ul > li:first-child:before, .wizard > .steps > ul > li:last-child:after {content: none; }
}
@media (max-width: 768.98px) {
      .wizard > .steps > ul > li { /* width: 100%; */ width:auto; }		  
}	
.wizard>.steps>ul>li div.step{position:relative;padding-top:3rem;margin-top:1.25rem;margin-bottom:1.25rem;display:block;outline:0;color:#999;} /* format steps even when replacing the a tag with div.step tag instead (i.e. when no links/tabs/nav, just a step indicator) */	 	
/* ////////////// END tweak wizard steps to stay on one line and be smaller (override styles) [Nikki's edits] ////////////// */	

/* ---------- START colorswatch and optionthumbnail styles ---------- */
:root { --colorswatch-margin:7px 7px; --colorswatch-size:30px; --colorswatch-radius:50%; --colorswatch-selected-color:#000;}
.colorswatch {height:var(--colorswatch-size);width:var(--colorswatch-size);background-color:#bbb;border-radius:var(--colorswatch-radius);display:inline-block;margin:var(--colorswatch-margin);border:4px solid #ffffff;box-shadow:0 0 2px 2px #f3f3f3;}
.optionthumbnail {max-height:var(--optionthumbnail-size);width:auto;display:inline-block;margin:var(--colorswatch-margin);border:4px solid #ffffff;box-shadow:0 0 2px 2px #f3f3f3;}
.colorswatch:hover, .optionthumbnail:hover {box-shadow:0 0 1pt 1pt #ddd;}
.colorswatch-selected, .colorswatch-selected:hover, .optionthumbnail-selected, .optionthumbnail-selected:hover {box-shadow:0 0 2px 2px var(--colorswatch-selected-color);}
.colorswatches-wrapper a, .colorswatches-wrapper a:hover, .colorswatches-wrapper a:active, .colorswatches-wrapper a:focus {text-decoration:none;}
.category-grid .colorswatch, .category-grid .optionthumbnail {margin:2px;}
/* ---------- END colorswatch and optionthumbnail styles ---------- */

/* ---------- START flexible grid/tile layout w/cards, A ---------- */
.grid-a {display:grid;align-self: stretch;gap: 16px 8px;grid-template-columns: [start] repeat(2, minmax(0px, 1fr)) [end];} /* grid-template-columns: [start] repeat(2, minmax(0px, 1fr)) [end]; */
@media (min-width: 576px) { .grid-a {display:grid;align-self: stretch;gap: 16px 10px;grid-template-columns: [start] repeat(auto-fit, minmax(300px, 300px)) [end];} } /* grid-template-columns: [start] repeat(auto-fit, minmax(300px, 1fr)) [end]; */
/* .grid-a .product-card {border:none; } */ /* border: 1px solid rgb(234, 234, 234); */
/* .grid-a .product-card .product-photo {display: flex;position: relative;height: 0px;flex-shrink: 0;width: 100%;padding-top:calc(133.333% - 0px);} *//* The first percentage in the padding-top:calc() determines the aspect ratio of the photo container. A value of 100% is square, less than 100 is horizontal, more than 100% is vertical. 133.33% = 4:3 ratio (480:360). */
/* .grid-a .product-card .product-photo img {position:absolute;top:0px;left:0px;width:100%;height:100%;object-fit:cover;object-position:top center;}
.grid-a .product-card .product-title {padding:4px 4px;} */
/* ---------- END flexible grid/tile layout w/cards, A ---------- */
.btn-close{--btn-close-width: 1em;--btn-close-height: 1em;--btn-close-padding-y: 0.25em;--btn-close-padding-x: 0.25em;--btn-close-color: #000;--btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 20 20' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");--btn-close-opacity: 0.65;--btn-close-hover-opacity: 1;--btn-close-focus-opacity: 1;--btn-close-disabled-opacity: 0.25;box-sizing: content-box;width: var(--btn-close-width);height: var(--btn-close-height);padding: var(--btn-close-padding-y) var(--btn-close-padding-x);color: var(--btn-close-color);background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 20 20' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/var(--btn-close-width) auto no-repeat;border: 0;border-radius: .375rem;opacity: var(--btn-close-opacity);}
.checkbox-tight{margin-left:auto;margin-top:auto;margin-bottom:auto;}
/* START pull in styles from newer limitless CSS as needed */
.ms-auto{margin-left: auto!important;}.my-auto{margin-top: auto!important;margin-bottom: auto!important;}
/* END pull in styles from newer limitless CSS as needed */
/* START media queries that only apply when page is printed. FYI - use standard "d-print-none" class to hide something from print layout. */
@media only print {
 .print-col-12 {-ms-flex:0 0 100% !important;flex:0 0 100% !important;max-width: 100% !important;}
  body {height: auto;overflow: visible !important;} .page-content {overflow: visible !important;} /* ensure full data printable for reports, long pages */
  /* Ensure the table is not paginated during printing */
    .datatable-responsive .dataTables_wrapper .dataTables_paginate,.datatable-responsive-control-right-buttons-add .dataTables_wrapper .dataTables_paginate {display: none !important;}
  .dataTables_wrapper {margin-bottom:30px;}
  /* Ensure all rows are visible */
    .datatable-responsive table,.datatable-responsive-control-right-buttons-add table {width: 100% !important;}
    .datatable-responsive tbody,.datatable-responsive-control-right-buttons-add tbody {display: table-row-group !important;}
    .datatable-responsive tr,.datatable-responsive-control-right-buttons-add tr {display: table-row !important;}
    .datatable-responsive td,.datatable-responsive-control-right-buttons-add td {display: table-cell !important;border-top: 1px solid #E7E9EB !important;}
    .datatable-responsive th,.datatable-responsive-control-right-buttons-add th {display: table-cell !important;border-bottom: 2px solid #E7E9EB !important;background-color:#d6d6d7;}
  /* Hide unnecessary elements */
    .datatable-header,.datatable-footer,.dataTables_filter,.dataTables_length,.dataTables_info {display: none !important;}
	.datatable-responsive th.sorting::before,.datatable-responsive-control-right-buttons-add th.sorting::before,.datatable-responsive th.sorting::after,.datatable-responsive-control-right-buttons-add th.sorting::after {content:'';display: none !important;}
	.dtr-column tbody tr td.control:before, .dtr-column tbody tr th.control:before, .dtr-inline.collapsed tbody tr td:first-child:before, .dtr-inline.collapsed tbody tr th:first-child:before {content:'';display:none;}
  /* START ensure footer doesn't cover contents, all contents shown */
	#dashboard-footer {all:revert;} #dashboard-footer {display:none;height:0;width:0;background-color:transparent;}
	.btn-to-top, .btn-to-top-visible {display:none;}
	.content {margin-bottom:150px;} /* (main content area, above footer. Must be somewhere between 120px (too short) and 200px (works) to ensure content is not cut off/covered up with white. Some weird conflict somewhere, possibly with the footer, etc. */
  /* END ensure footer doesn't cover contents, all contents shown */
}
/* END media queries that only apply when page is printed. FYI - use standard "d-print-none" class to hide something from print layout. */