/* CSS Resets */
@import url("reset.css");

/* MAIN BODY */
html {position: relative; min-height: 100%; min-width:333px}
body {font-family: 'Roboto', sans-serif; font-size:0.85em; margin:0 0 8.5em; padding:0; color:#444; line-height:1.5em; font-weight:lighter;}

#main {margin:1em 2em;}
.home #main {margin-top:0em;}
body.home, body.dashboard {background-color:#EAEAEA;}
.clear {clear: both;}

.left {text-align:left}
.right {text-align:right;
        padding-right: 8px;
       }

.center {text-align:center !important;}
.rightf {float: right; margin-left: 15px; margin-bottom: 10px;}

/* PARAGRAPH SETTINGS */
a, .link {color:#006EA3; text-decoration: none; cursor: pointer;}
a:hover, .link:hover {text-decoration: underline; color:#005882}
p {margin-bottom:1em; text-align:justify; line-height: 200%}
.modal p {text-align:left;}

strong {color:#000000;}
.green {color:#487613}
.red {color:#990722}
.orange {color:#cf810c}
pre {font-family:inherit; font-size: inherit}

.small {font-size:0.8em}
.red_highlight { background: #f9cdd5; }
a.external::after {content: url(../imgs/icons/external.png); padding:0 0.4em;}

/* HEADERS */
h1 {margin-bottom: 1.5em; border-bottom: 1px solid #DDD; padding: 0; color:#555; font-size: 1.3em;  line-height: 2em; font-weight:bold}
h1 span {border-bottom: 3px solid #006EA3; padding-bottom:6px}
h2, h4 {font-weight:normal; font-size: 1.2em; line-height:1.5em; margin-bottom:0.5em;}
   
h3 {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2790b0;
    /*margin-bottom: 0.5em;*/
}

h2 {color: #246591}

.prosys-title h2 {padding: 0.3em 0 1em 3em;}
.prosys-title img {float:left;}

/* STYLING SECTIONS */
body.ordering h1 span {border-bottom: 3px solid #4090B3;}
body.provisioning h1 span {border-bottom: 3px solid #97BD49;}
body.management h1 span {border-bottom: 3px solid #D8B213;}
body.integration h1 span {border-bottom: 3px solid #E38B2E;}

body.ordering #header {border-top: #4090B3 2px solid}
body.provisioning #header {border-top: #97BD49 2px solid}
body.management #header {border-top: #D8B213 2px solid}
body.integration #header {border-top: #E38B2E 2px solid}

/* LISTS */
ul, ol {list-style-position: inside; margin-left:1em; margin-bottom:1.5em}
li {list-style-position: outside; margin-bottom:0.5em}

/* TABLES */

form table th {padding-right:2em}

form img.input-info {margin-left:-30px; top:5px; position:relative;}

table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #CCC;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom:1.2em;
}

.bootstrap-table th,
.bootstrap-table td,
th,
td {
  border: 1px solid #CCC;
  border-width: 0 1px 1px 0; 
  padding: 0.8em;
  vertical-align: middle;
  text-align: left;
}

th {
    background: #f5f5f5;
}

/* Remove bottom border for every cell in the very last row */
.bootstrap-table tbody:last-of-type tr:last-child > *,
.bootstrap-table > tr:last-child > *,
table > tr:last-child > *,
table tbody:last-of-type tr:last-child > * {
  border-bottom: 0;
}

/* Remove right border for the last cell of every row */
table tr > :last-child {
  border-right: 0;
}

/* Sticky header */
table.sticky th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f5f5;
}

/* Full width tables */
table.wide {
    width: 100%;  
}

table.wide th {
    border-bottom: 2px solid #2790b0;
}

table table td, 
table table {
    margin-bottom:0;
}

td.item-width-fix {
  width: 255px;
}

td.sn-width-fix {
  width: 180px;
}

table.item-width-inherit td.item-width-fix {
  width: 100%;
}

/* FORM */
input, textarea, select, radio, checkbox {border: 1px solid #CCC; padding:0.3em;}
select {min-width:186px}

input:focus, textarea:focus, select:focus {border: #D0AF34 1px solid}
input[readonly=""] {border:none; background:transparent}
textarea {width:95%}

form.contact {max-width:500px; background-color:#97BD49; padding :2em 1.5em 3em 1.5em; margin-bottom: 1em; border: 1px solid rgba(0, 0, 0, 0.1);}
form.contact input, form.contact textarea {width:100%; padding:0.75em}
form.contact .button, form.contact p:last-of-type {margin-bottom:0 !important;}
form.contact p {color:#FFF}


input:not([type="checkbox"],[type="radio"]), textarea, button, .button {display: inline-block;  padding: 8px; border-radius: 8px; -webkit-appearance: none;}
select {display: inline-block;  padding: 8px;   border-radius: 8px; background-color:white}



/* Fix for safari buttons */


/* HEADER AND FOOTER */
#footer {padding: 1.2em 15px 0 15px}
#header {padding: 2em 15px 2em 15px; border-top:2px solid #235889}
#nav, .fnav {margin-top:6px; float:right; position:relative; text-align:center;}
ul#nav li, ul.fnav li {margin:0 0.5em 0 0; float:left; position:relative; display:block; padding-top:10px;}
ul#nav li:last-child,  ul.fnav li:last-child {margin:0;}

#footer ul {margin:0;}
#footer ul li {padding:0;}
#footer {position: absolute; bottom: 0; width:100%; height: 4em}
#footer p {display:inline-block}

#header, #footer {background-color:#EAEAEA;}

#nav i {font-size: 130%;}
#nav a {color:#717171; text-decoration: none;}
#nav a:hover {color:#484848; text-decoration: none;}

/* BUTTONS */
.button, button, input[type="submit"] {
    color:#ffffff;
    background-color:#2790B0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin-right:5px;
    margin-bottom:1em;
    position:relative;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    padding: 8px;
}

.button.red, button.red {background-color:#c62828; color: #ffffff;}

.button.big {padding:15px 12px 12px 12px} /* Make the button bigger if the big class is added */

.button:hover, .button:active, button:hover, .button.active {
    background-color:#006EA3;
    color:#FFF;
    cursor: pointer;
    text-decoration:none;
}

.button.red:hover, button.red:hover {background-color:#A61F1F; color: #ffffff;}

.button:only-of-type, button:only-of-type {margin-right:0;} /* there will be no margin unless there is more than one button in a row */

/* BUTTONS WITH IMAGES */
.button span, button span {position: relative; top:-1px}
.button img, button img {position:absolute; top:4px; left:6px;}
.button.big img {position:absolute; top:12px; left:8px;}
.button img + span, button img + span {padding-left:19px}
.button.big img + span {padding-left:22px}

/* BUTTONS AND FORM ELEMENTS IN TABLES */

table .button,
table button,
table input:not([type="checkbox"]):not([type="radio"]),
table select {
    margin-bottom: -6px;
    margin-top: -6px;
    position: initial;
    padding: 4.5px 10px;
    height: auto;
}

table .input-group button {
    margin-right: 0;
}

/* PRICE LIST */
.class-buttons {border:#DDD solid 1px; margin:0 4px 4px 0; padding:5px; display:inline-block; border-radius:8px;}
.class-buttons:hover, .classLinks.active  {border-color:#006EA3;}
span.class-buttons {display:inline-block; margin-bottom:10px}

/*.inBasketNotification {font-size:0.9em; display:block;padding:5px; border: 1px solid; position:absolute; margin:6px 0; background-color: #EFFEB9; border: 1px solid rgba(0, 0, 0, 0.1); color:rgba(0, 0, 0, 0.5); line-height:1.2em}
.inBasketNotification a {color:rgba(0, 0, 0, 0.5);}
.toolbox {background-color: #eef4f7; border: 1px #dce9ef solid; padding:1.5em;}
.toolbox p:last-child {margin-bottom:0em;}
.attention {padding:1.5em; float:right; display:inline-block; width:33%; background-color:#FFFFB2; border: 1px solid rgba(0, 0, 0, 0.1)}
.product-image {border:#ccc solid 1px; padding:1em; margin-bottom:2em}*/

span.inBasket {position: relative; right: 7px; top: -10px; display: inline-block; min-width: 15px; height: 15px; padding:0 4px; line-height: 16px; text-align: center; font-size: 9px; color: #fff; -webkit-border-radius: 8px; border-radius: 8px; background-color:#4090B3;}

.tab {
    padding: 1em;
    margin: 0 1em -1px 0;
    display:inline-block;
}

.tab:first-child {
    margin-right:1em;
}

span.tab {
    border: 1px solid #CCC;
    border-bottom: 1px solid #FFF;
    border-top: #235889 1px solid;
}

.tab_details {
    border-top: 1px solid #CCC;
    padding-bottom: 1.5em;
}

/* Styling more tabs
body.ordering span.tab {border-top: #4090B3 1px solid}
body.provisioning span.tab {border-top: #97BD49 1px solid}
body.management span.tab {border-top: #D8B213 1px solid}
body.integration span.tab {border-top: #E38B2E 1px solid}
*/

.attention {width:50%; min-width:200px; padding:1em; margin-bottom:1em; background-color:#DFECF9; border: 1px solid rgba(0, 0, 0, 0.1); font-size:0.95em}
.attention ol {margin-bottom:0;}
.attention h2 {margin-bottom:.5em;}

.info-notification, .error-notification, .warning-notification, .success-notification {
    display: inline-block;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}

.info-notification    { background-color: #e6f4f8; border-left: 3px solid #2790b0; color: #1a4a5e; }
.error-notification   { background-color: #f9cdd5; border-left: 3px solid #c0392b; color: #721c24; }
.warning-notification { background-color: #fef3e2; border-left: 3px solid #ec8e13; color: #7a5500; }
.success-notification { background-color: #eef5da; border-left: 3px solid #98bc44; color: #4d6e10; }

.status-badge {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 3px;
font-weight: 600;
white-space: nowrap; 
border: 1px solid rgba(0, 0, 0, 0.1);
}

.status-badge.success, .status-badge.green   { background: #eef5da; color: #4d6e10; }
.status-badge.active, .status-badge.blue    { background: #e6f4f8; color: #1a4a5e; }
.status-badge.warning, .status-badge.yellow  { background: #fef3e2; color: #7a5500; }
.status-badge.cancelled, .status-badge.red { background: #f9cdd5; color: #721c24; }

a.download::after {content: url(../imgs/icons/download.png); padding:0 0.5em;}

/* Awards box on homepage */
.awards {height:10em; display: table; padding-bottom:2em}
.awards p {text-align:center !important; display: table-cell; vertical-align: middle;}


/* Accordian */
#accordion h3 {font-size:1em;}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {border:1px #CCC solid; border-radius:8px; padding:15px; margin:6px 0;}
.ui-state-default {background-color:#fff;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {border: 1px solid rgba(0, 0, 0, 0.1); background-color: #eaeaea; font-weight: normal;}
.ui-state-active {color:#2790b0; border: 1px solid #CCC;  border-bottom-left-radius:0px; border-bottom-right-radius:0px;}
.ui-widget-content {margin-top: -7px; border: 1px solid #CCC;  border-bottom-left-radius:8px; border-bottom-right-radius:8px; padding: 15px 30px 10px 15px;}
.ui-widget-content span {padding:2px 0; display:block}
.ui-accordion-header {cursor: pointer;}

.ui-accordion-header::before, .ui-state-active::before {
    font-family: "bootstrap-icons";
    font-size: 1.1em;
    padding-right: 0.6em;
    content: "";
    vertical-align: middle;
    color: #2790b0;
}

.ui-accordion-header::before {
  content: "\F4F9";
}

.ui-state-active::before  {
  content: "\F2E5";
}

.management .ui-state-active, .management .ui-widget-content .ui-state-active, .management .ui-widget-header .ui-state-active, .management a.ui-button:active, .management .ui-button:active, .management .ui-button.ui-state-active:hover {background-color: #D8B213; color: #ffffff;}
.management .ui-widget-content {border: 1px solid #D8B213; background-color:#FFF;}
.management .ui-corner-all, .management .ui-corner-top, .management .ui-corner-right, .management .ui-corner-tr {margin:-1px 0;}
.management .ui-widget-content {margin: 0 0 -1px 0;}
.management .ui-widget-content {margin: 0 0 1px 0;}
.management-on, .management-off {width: 18px; height: 18px;}
.management-on {background: #D8B213;}
.management-off {background: #AAA;}


.login-card{
  width: 30em; 
}



/* 2FA input */
.notification-grid {
  display: flex;
  justify-content: left;
  align-items: center;
}
.notification-grid .grid-item {
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  max-width: 500px;
  border: #2790b0 1px solid;
}

.home .notification-grid .grid-item {border: none;}
.home .notification-grid {justify-content: center;}

.notification-grid .grid-item .qr {text-align:center}

/* CSS Grid */
* {box-sizing: border-box;}

.home form input,
.notification-grid .grid-item form input {width: calc(100% - 4.6em); width: -webkit-calc(100% - 4.6em); width: -moz-calc(100% - 4.6em);}

.homepage-grid .grid-item {
    background-color:#fff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    min-width:268px;
    min-height:268px;
}

.homepage-grid #notifications {
    background-color:#fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.homepage-grid p {
    text-align:left
}

.homepage-grid ul {
    margin-bottom:0
}

.homepage-grid {
    max-width: 940px;
    margin: 0 auto; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    grid-gap: 10px;
    grid-auto-rows: minmax(auto, auto);
}

.homepage-grid #features {
    grid-column: 1 / span 2;
    grid-row: 1;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.home input,
.notification-grid .grid-item form input {border-radius: 8px 0 0 8px; -webkit-appearance: none; border-right:none; padding: 8px;}
.home button, .notification-grid .grid-item button {border-radius: 0 8px 8px 0; -webkit-appearance: none; padding: 8px;}

.homepage-grid ul li:last-child {margin:0;}
.homepage-grid p:last-child {margin:0;}

@media only screen and (max-width: 586px) {
    .homepage-grid #features {grid-column: span 1;}
    #features, ul#nav .welcome, #notifications {display:none}
    .fnav {float:left; display:block; margin-right:1em !important;}
	.fnav:after {content: ''; display: block; clear: both;}
    #footer p {display:inline-block}
    #footer {height:6.8em}
}

@media only screen and (max-width: 775px) {
    .attention {float:none; width:100%; margin-left:0}
    p {text-align:left; display:block}
}

.homepage-banner {
    width:100%; 
    display: block;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);}

#notifications h2 {background-color:#F5F5F5; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom:1px solid #CCC; padding:10px 15px; color:#2790b0; font-size:1.2em; margin-bottom:0}
#notificationsList {font-size:0.9em; color: #444;}
#notificationsList {list-style-type: none; margin-left:0}
#notificationsList li {border-bottom:1px solid #ccc; padding:10px 25px 10px 10px; margin-bottom:0}
#notificationsList li img {float:right; margin-right:-15px; margin-top:2px}
#notificationsList a:hover {text-decoration:none;}
#notifications-inner {overflow:auto; max-height:217px;}
#notifications .info-notification {margin:0.5em; display:block}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(latin-ext_roboto.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(latin_roboto.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Temporary CSS hack to make the recent upgrade table display better*/
.recent-upgrade-table td {text-align:left}
.recent-upgrade-table td:last-of-type {width:140px;}

/* FONTS */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(latin-ext_roboto.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(latin_roboto.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* BROWSER FIX CSS */
@supports (-ms-accelerator:true) {
   /* IE Edge 12+ CSS */
    html {min-width:980px;}
    .homepage-grid .grid-item {width:305px; height: 310px; float:left; margin-right:12px;}
    .homepage-grid .grid-item:nth-of-type(5), .homepage-grid .grid-item:nth-of-type(8) {margin-right:0;}
    .grid-item, #notifications, #features {margin-bottom:12px}
    #features {width: 622px; float:left; margin-right:12px}
    #notifications {width:305px; float:left;}
}

@supports (-ms-ime-align:auto) {
    /* IE Edge 16+ CSS */
    html {min-width:980px;}
    .homepage-grid .grid-item {width:305px; height: 310px; float:left; margin-right:12px;}
    .homepage-grid .grid-item:nth-of-type(5), .homepage-grid .grid-item:nth-of-type(8) {margin-right:0;}
    .grid-item, #notifications, #features {margin-bottom:12px}
    #features {width: 622px; float:left; margin-right:12px}
    #notifications {width:305px; float:left;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE 11/11 CSS */
    html {min-width:980px;}
    .homepage-grid .grid-item {width:305px; height: 310px; float:left; margin-right:12px;}
    .homepage-grid .grid-item:nth-of-type(5), .homepage-grid .grid-item:nth-of-type(8) {margin-right:0;}
    .grid-item, #notifications, #features {margin-bottom:12px}
    #features {width: 622px; float:left; margin-right:12px}
    #notifications {width:305px; float:left;}
}

/* Add config styles*/
table.config_table input, table.config_table select {height: 2.6em;}
table.config_table input[type="checkbox"] {height: 1.5em;}
table.config_table input{
    border: 1px solid transparent;
    background: white;
}
table.config_table td input:focus {border: #D0AF34 1px solid;}
table.config_table th {padding:0.6em}
table.config_table td {text-align:center; padding:0}
tr.conf_first {border-top: 2px solid #97BD49;}
table.config_table {border-bottom: 2px solid #97BD49;}

/* Order form styles */
#newitem_input {height:32px; border: 1px #2790b0 solid; border-right:none}
#newitem_input {border-radius: 8px 0 0 8px;}
#newitem_arrow {background:url("../imgs/icons/down.png") no-repeat; width:32px; height:32px; border-radius: 0 8px 8px 0;}
#newitem_arrow.over {background:url("../imgs/icons/down.png") no-repeat -32px; width:32px; height:32px}
#newitem_arrow.active {background:url("../imgs/icons/down.png") no-repeat -64px; width:32px; height:32px}


form.sgrid {
    display: grid;
    grid-template-columns: auto auto;
    max-width: 250px;
    row-gap: 12px;
}

form.sgrid label {
    grid-column: 1 / 2;
    min-width: 0;
}

form.sgrid input,
form.sgrid button,
form.sgrid select{
    grid-column: 2 / 3;
    min-width: 0;
}

.del-cross {
    background: #2790b0;
    height: 18px;
    position: relative;
    width: 4px;
    transform: rotate(45deg);
    margin-left: 8px;
    } 
    
    .del-cross:after {
    cursor: pointer;
    background: #2790b0;
    content: "";
    height: 4px;
    left: -7px;
    position: absolute;
    top: 7px;
    width: 18px;
    } 
    
    .del-cross:hover, .del-cross:hover:after {
      background:#006ea3
    }

    .del-cross-clicked,  .del-cross-clicked:after{
        background: #999;        
    } 

    .del-cross-clicked:hover,  .del-cross-clicked:hover:after{
        background: #666;        
    }     

.noMinWidth{
    min-width: 0;
}




/* Accordion */
.accordion button {margin-bottom  :0}
.accordion ul {list-style-position: inside; margin-left: 0; margin-bottom: 0; list-style-type:none;}
.accordion li {margin-bottom: 1em; border-bottom: 1px solid #dee2e6; padding-bottom: 1em;}
.accordion li:last-child {border-bottom: none; margin-bottom: 0; padding-bottom:0}
.accordion {--bs-accordion-border-color :#CCC; --bs-accordion-border-radius:8px;}
.accordion-button {color: #006ea3; border-bottom: 2px solid #EFEFEF; background-color:#EFEFEF; text-shadow: none; }
.accordion-button:hover {border-bottom: 2px solid #98bc44; background-color:#98bc4440; color: #006ea3;}
.accordion-button:not(.collapsed) {border-bottom: 2px solid #98bc44; background-color:#98bc4460; color: #006ea3}

/* Accordion colour options */
.yellow .accordion-button:hover {border-bottom-color: #dcb527; background-color:#dcb52740;}
.yellow .accordion-button:not(.collapsed) {border-bottom-color:  #dcb527; background-color:#dcb52760;}
.orange .accordion-button:hover {border-bottom-color: #ed9823; background-color:#ed982340;}
.orange .accordion-button:not(.collapsed) {border-bottom-color:  #ed9823; background-color:#ed982350;}
.blue .accordion-button:hover {border-bottom-color: #2790b0; background-color:#2790b040;}
.blue .accordion-button:not(.collapsed) {border-bottom-color:  #2790b0; background-color:#2790b060;}
.compact .accordion-button {border-bottom-color:white; background-color: white;}
.compact.accordion {--bs-accordion-btn-padding-x: 1rem;  --bs-accordion-btn-padding-y: .5rem;}

.float-end i.bi {margin-left:1em; color:#2790b0}
.float-end i.bi:hover {color:#006ea3}

.counter {background-color: #4090b3; min-width: 2em; height: 2em; text-align: center; padding: 2px 4px; font-size: 85%; margin-top: -2px; color:#FFFFFF; border-radius: 80px;}

/* Grid Layout */
.grid {display: grid;  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));  grid-gap: 1rem;}
.grid .info-notification {width:100%;}

/* tags */
.tag {float:right; padding: 2px 6px 3px 6px; border-radius:8px; font-size:85%; margin-bottom:8px; border:1px solid rgba(0, 0, 0, 0.1)}
.tag.red {background-color:#efd6e0;}
.tag.blue {background-color:#d4e0ee;}
.tag.green {background-color:#deecd3;}

.tag.returned {float:left; margin-bottom:0; color:#a1053e; background-color:#efd6e0;}

.promotion-feature {background-color: #d4e0ee; border: 1px solid rgba(0, 0, 0, 0.1); padding:.5em; text-align:center; border-radius:5px; margin-bottom:1em}
.img-border {text-align:center; border:#CCC 1px solid; border-radius:5px; padding:1em; margin-bottom:1em}
.img-border img {width:100%; height:auto; max-width:310px; max-height:195px}

/* ADDRESS LOOKUP */
#pcresults {list-style-type: none;}
#pcresults li {
    padding: 5px 10px;
    background-color: #dfecf9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 4px;
    border-radius: 5px;
    cursor: pointer;
}
   
#pcresults li:hover {background-color : #c3d6ea}

.absolute-button {
    color:white; 
    border-radius:5px; 
    background-color:#ec8e13; 
    padding:3px 8px;  
    position:absolute; 
    top: 20px; 
    left: 50%;
    transform: translateX(-50%);
}

.absolute-button:hover {background-color: #D37C12; text-decoration:none; color: white;}

/* EXPORT LINKS */
.export-links {
  float: right;
}

.export-link {
    background-color: #ea972e;
    color: #ffffff;
    display: inline-block;
    border: 2px solid transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 2px 7px;
    text-decoration: none;
    margin-left: 0.4em;
    cursor: pointer;
}

.export-link a:hover, .export-link a {
    color: #ffffff;
    text-decoration: none;
}

.export-link:hover, .help-link:hover {
  filter: brightness(90%);
}

/* INFO PANELS SUPORTS 2 OR 3 COLS */

  .info-panels {
    display: flex;
    margin-bottom: 24px;
    border: 1px solid #CCC;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
  }

  .info-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2em;
    flex: 1;
    border-right: 1px solid #CCC;
  }

  .info-panel:last-child {
    border-right: none;
  }

  /* Exactly two panels: first gets 2/3, second gets 1/3 */
  .info-panels:has(> .info-panel:nth-child(2):last-child) .info-panel:first-child {
    flex: 2;
  }

  .info-panels:has(> .info-panel:nth-child(2):last-child) .info-panel:last-child {
    flex: 1;
  }

  .info-panel-title {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2790b0;
    margin-bottom: 6px;
  }

  .info-panel-address {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.5;
  }

  .info-panel-address .name  { font-weight: 700; }
  .info-panel-address .muted { color: #6c7986; margin-top: 4px; }

  .info-panel-rows {
    display: flex;
    flex-direction: column;
  }

  .info-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #dedfdf;
    gap: 12px;
  }

  .info-panel-row:last-child { border-bottom: none; }

  .info-panel-label {
    color: #8a9aaa;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    font-weight: 400;
    flex-shrink: 0;
  }

  .info-panel-value {
    color: #1e2a35;
    font-weight: 500;
    text-align: right;
  }

  .info-panel-total {
    color: #2790b0;
    font-weight: 700;
  }

  .info-panel-actions {
    margin-top: 12px;
  }

  /* BOOTSTRAP TABLE LOADING DOTS */

/* BOOTSTRAP TABLE LOADING DOTS */

  .fixed-table-loading {
--bt-table-loading-color: #2a8fa0;
top: auto !important;
bottom: 0 !important;
height: calc(100% - 50px) !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.loading-text {
font-size: 1rem !important;
color: #666;
}
span.animation-dot,
.animation-wrap::before,
.animation-wrap::after {
padding: 0;
height: 8px !important;
width: 8px !important;
}