body,
td,
p,
input,
select,
textarea,
button {
    font-variant: normal;
    text-transform: none;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    font-family: Verdana, Arial, san-serif;
    color: #494949;
}

header,
section,
footer,
aside,
nav,
main,
figure {
    display: block;
    clear: both;
}

section {
    position: relative;
    padding-bottom: 1em;
    clear: both;
    overflow: hidden;
}

body {
    padding: 0;
    margin: 0;
    font-size: 62.5%;
}

body#tinymce {
    font-size: 0.75em;
}

form {
    clear: both;
    overflow: hidden;
}

table,
td,
p,
font {
    font-size: 1em;
}

table tbody td {
    padding: 0.2em 0.5em;
}

table tfoot {
    font-weight: bold;
}

#wrapper,
#page,
#main {
    height: 100%;
}

#page {
    margin: 1em;
    position: relative;
    font-size: 1.5em;
    overflow: visible;
}

#main {
    margin: auto;
    max-width: 1000px;
    width: 100%;
    line-height: 2em;
}

footer {
    padding: 1em;
    padding-left: 0;
    padding-right: 0;
    min-height: 2em;
    overflow: hidden;
    margin-top: 2em;
    clear: both;
}

a {
    text-decoration: none;
    color: #478cb0;
    outline: none;
}

a:hover {
    color: #478cb0;
}

a img {
    border: none;
}

a * {
    text-decoration: none;
}

h1,
.h1,
.title {
    font-family: arial, verdana, sans-serif;
    font-size: 2em;
    font-weight: normal;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    display: block;
    color: #478cb0;
    clear: both;
}

h2,
.h2,
.heading {
    font-family: arial, verdana, sans-serif;
    font-size: 1.6em;
    font-weight: normal;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: block;
    color: #494949;
}

h3,
.h3,
.subHeading,
.productCaption {
    font-family: arial, verdana, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #494949;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

div.hasSecondary aside {
    float: right;
    width: 30%;
    clear: none;
}

div.hasSecondary div.primary {
    float: left;
    width: 65%;
}

div.hasSecondary aside .product .productBody .image,
div.hasSecondary aside .product .productBody .googleMap {
    margin: 0;
    margin-bottom: 1em;
    float: none;
    width: auto;
}

#bodyText {
    position: relative;
}

.productCaption {
    margin-top: 0;
}

.productCaption a {
    text-decoration: none;
    color: inherit;
    display: block;
    font-size: 1em;
}

h4 {
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    padding: 0;
}

.controls select,
.controls textarea,
.controls .inputText {
    max-width: 200px;
    max-height: 200px;
}

.controls select.small,
.controls textarea.small,
.controls .inputText.small {
    width: 100px;
}

.controls input[type="number"] {
    width: 100px;
}

.controls input[type="number"].small {
    width: 70px;
}

.controls .dateField {
    width: 90px;
}

.controls .control {
    vertical-align: top;
    float: left;
    max-width: 220px;
    border-radius: 1em;
   /*min-height: 70px;*/
}

.controls .control:hover {
    background: #FFFFCC;
    color: #000000;
}

.controls .control.wide,
.controls .control.month,
.controls .control.textarea,
.controls .control.richtext {
    max-width: unset;
    clear: both;
    width: 100%;
    box-sizing: border-box;
    float: none;
}

.controls .control.wide {
    display: flex;
    flex-wrap: wrap;
}

.controls .control.wide .field {
    flex-grow: 2;
}

.controls .control.wide textarea {
    width: 100%;
  box-sizing: border-box;
  max-width: unset;

}

.controls label {
    padding: 0.5em;
    min-width: 18em;
}

.controls .field {
    padding: 0.5em;
    vertical-align: top
}

.controls p {
    clear: left;
}


/* --  Provides user feedback on screen details  -- */

.indicator {
    text-decoration: none;
    font-size: 0.8em;
    font-weight: normal;
    text-align: right;
}


/* --  Used to format attribute names for custom attributes Users, Products, Orders  -- */

span.attribute,
div.attribute {
    vertical-align: middle;
    display: block;
    margin: 0.25em 0em;
    clear: both;
}

.attribute .attName,
.attributeName,
tr .attName {
    padding-right: 1em;
    vertical-align: top;
}

.product .attribute .attName {
    padding: 0;
    color: #777777;
}

.product .attribute.textarea .attName {
    display: none;
}

.options .attribute .attName {
    display: block;
}

.attribute .attValue,
tr .attValue {
    padding-top: 0;
    padding-right: 30px;
}

.attribute .attValue p {
    margin: 0px;
    padding: 0px;
}

.attribute .attIcon {
    float: right;
    padding-right: 12px;
}

.attribute .discount {
    font-weight: bold;
    line-height: 20px;
    color: #00cc00;
}

.attribute .discount .saving {
    margin-left: 1em;
    padding: 0.5em;
    background: #ffcc00;
    color: #000000;
}

.order .attributes {
    float: left;
    margin-right: 2em;
    margin-bottom: 2em;
    font-size: 1.2em;
    line-height: 2em;
}

.user .attribute,
.orderDetails .attribute {
    clear: left;
    display: block;
    float: left;
}

.user .attribute .attName {
    width: 160px;
    text-align: right;
}

.user .attribute .attName,
.order .attribute .attName {
    clear: left;
    float: left;
}

.user .attribute .attValue,
.order .attribute .attValue {
    float: left;
    clear: right;
    display: block;
}

.orderStatus {
    float: right;
}

.orderStatus div,
.user .status {
    padding: 1em;
    padding-bottom: 3em;
    margin-bottom: 1em;
    color: rgba(0, 0, 0, 0.5);
    background: rgba(200, 200, 200, 0.5);
    border-radius: 1em;
    font-size: 1.1em;
    text-transform: uppercase;
}

.orderStatus div.canceled,
.user .userCancelled,
.status.off {
    background: #FFE4E3;
}

.orderStatus div.finished {
    background: #FFE4E3;
}

.orderStatus div.finalised {
    background: #E0FFD3;
}

.orderStatus div.invoiced {
    background: #E0FFD3;
}

.orderStatus div.paused {
    background: #FFF6BF;
}

.orderStatus div.reoccurring,
.user .userActive,
.status.on {
    background: #E0FFD3;
}

table.order tfoot select {
    text-align: right;
}

select#orderOccurance {
    width: 100%;
}

.shade,
.userDetails .altRow {
    background-color: rgba(0, 0, 0, 0.1);
}

.selectable {
    cursor: pointer;
}

.highlight {
    background-color: rgba(255, 242, 63, 0.5);
}

.tableBorder tbody tr:hover td tbody tr td {
    background-color: transparent;
}

.tableBorder a:link {
    text-decoration: none;
}

.dragging,
.tableBorder tbody tr.dragging:hover,
.tableBorder tbody tr.shade.dragging,
.tableBorder tbody tr:hover {
    background-color: #FFF6BF;
}

#banner a.logo {
    float: left;
    width: 8vw;
    min-width: 80px;
}

#banner a.logo img {
    width: 100%;
}

#banner #simpleSearch {
    display: block;
    float: left;
}

nav#nav {
    clear: none;
    float: right;
    font-size: 1.2em;
    margin-top: 3em;
}

nav#nav ul {
    margin: 0;
    padding: 0;
}

nav#nav ul li {
    float: left;
    clear: none;
    margin-right: 1px;
    margin-bottom: 1px;
    border-bottom: none;
}

nav#nav ul li div {
    background: #478cb0;
    border-radius: 0 0 0.5em 0.5em;
    border-top: medium none;
    display: none;
    position: absolute;
    white-space: normal;
    min-width: 200px;
    z-index: 999;
    font-size: 0.8em;
}

nav#nav ul ul li div {
    position: static;
    width: auto;
}

nav#nav ul li.selected div {
    background: #494949;
}

nav#nav ul li div li {
    float: none;
    border: none;
    border-top: solid 1px #ffffff;
    margin: 0;
}

nav#nav ul li div span.description {
    display: none;
    padding: 0.8em;
    color: #ffffff;
}

nav#nav ul li:hover div,
nav#nav ul li.hover div {
    display: block;
}

nav#nav li {
    height: 1%;
    clear: both;
    display: block;
    margin: 0;
    line-height: 1.4em;
    border-bottom: solid 1px #ffffff;
    padding: 0;
}

nav#nav a.toggle {
    display: block;
    float: right;
    clear: right;
}

nav#nav a.toggle i {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

nav#nav li li {
    background: none;
    border: 0;
    padding: 0;
    font-weight: normal;
    line-height: 1.6em;
}

nav#nav a,
nav#nav a:link,
nav#nav a:visited {
    text-decoration: none;
    display: block;
    margin: 0;
    color: #ffffff;
    padding: 0.5em 0.8em;
    background: #478CB0;
}

nav#nav li.selected a,
nav#nav li.selected a:hover {
    background: #494949;
    color: #ffffff;
}

nav#nav a:hover,
nav#nav a:active {
    color: #494949;
    background: #ABDBF2;
}

#childCategoryMenu {
    display: block;
    padding-top: 4px;
}

#childCategoryItem {
    margin-bottom: 1px;
    float: right;
    margin-left: 10px;
}

.left {
    float: left;
    margin: 2em;
    margin-left: 0;
    margin-right: 5em;
}

.right {
    float: right;
    margin: 1em;
    margin-right: 0;
}

.clear {
    clear: both;
}

.clearfix:before,
.clearfix:after {}

.clearfix:after {}

.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}

.hide {
    display: none;
}

.mobileOnly {
    display: none !important;
}

.nowrap {
    white-space: nowrap;
}

.negative {
    color: #ff0000;
}

#searchOwnerUser #ownerId {
    height: 150px;
    overflow: auto;
}

.loading {
    background-image: url(images/admin/loading.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    text-align: center;
    padding-top: 20px;
    color: #6FACCB;
}

.showNextRow {
    cursor: pointer;
}

tr.showNextRow td.state {
    padding-left: 20px;
    background-image: url(images/admin/plus.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

tr.showNextRow.open td.state {
    background-image: url(images/admin/minus.png);
}

span.icon {
    float: left;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


/*
.googleMap .gm-style a, .googleMap .gm-style-cc span {
	display: none !important;
}
*/

.googleMap .googleMap {
    display: none;
}

.toolbar {
    background: #DBDBD5;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}

.toolbar a.button {
    float: left;
}

.toolbar .textControl {
    padding-left: 8px;
    margin-left: 8px;
    border-left: dotted 1px #A3A3A3;
}

.toolbar .textControl label {
    padding-right: 6px;
}

.toolbar .textControl,
.toolbar .textControl a.button {
    float: right;
}


/* Buttons for an item */

.product .popupMenu,
.user .popupMenu,
.order .popupMenu,
{
    float: left;
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 22px;
}

.productBody .colour .attValue {
    display: block;
    height: 20px;
}

.productStatus {
    background: #eeeeee;
    padding: 0.5em;
    float: left;
    border-radius: 0.5em;
}

.productStatus.CANCELED {
    background: #FFE4E3;
}

.productStatus.CURRENT {
    background: #E0FFD3;
}

.productStatus.EXPIRED {
    background: #fbf2be;
}

.product .buttons .button,
.product .buttons .button:link,
.product .buttons .button:visited,
.user .buttons .button,
.user .buttons .button:link,
.user .buttons .button:visited,
.order .buttons .button,
.order .buttons .button:link,
.order .buttons .button:visited,
.button,
.button:link,
.button:visited,
.openClose,
ul.tabs li,
.bar,
.bar:link,
.bar:visited,
.inputBoxButton,
button,
form input[type=submit] {
    display: inline-block;
    float: right;
    z-index: 80;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.05+0,0.25+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#40000000', GradientType=0);
    /* IE6-9 */
    border: 0.1em solid rgba(0, 0, 0, 0.3);
    border-radius: 0.5em;
    color: rgba(0, 0, 0, 0.5);
    font-family: verdana, sans-serif;
    padding: 0.4em 0.7em;
    margin: 0;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.2em;
    text-transform: uppercase;
}

.product .buttons .button:hover,
.user .buttons .button:hover,
.order .buttons .button:hover,
.button:hover,
.openClose:hover,
ul.tabs li:hover,
.bar:hover,
.inputBoxButton:hover,
button:hover,
form input[type=submit]:hover {
    background-color: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: none;
}

.button.red,
.openClose.red {
    background-color: rgba(200, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #000000;
}

.button.green,
.openClose.green {
    background-color: rgba(0, 200, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #000000;
}

.button.blue,
.openClose.blue {
    background-color: rgba(0, 0, 200, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #000000;
}

.button.yellow,
.openClose.yellow {
    background-color: rgba(200, 200, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #000000;
}

.button.active {
    background-color: #ABDBF2;
}

.button.left {
    float: left;
    margin-right: 0.5em;
    margin-left: 0;
}

.openClose.open,
.product .buttons .button.openClose.open,
.product .buttons .button.openClose.open:link,
.product .buttons .button.openClose.open:visited {
    border-bottom: none;
    clear: both;
    margin: 0;
    margin-top: 0.5em;
    float: left;
    border-radius: 0.5em 0.5em 0 0;
}

.openClose h3 {
    font-size: 1em;
    margin: 0;
    padding: 0;
    font-weight: inherit;
}

.sectionOpen {
    border: 0.1em solid rgba(0, 0, 0, 0.3);
    padding: 0.5em;
    margin-bottom: 1em;
    overflow: hidden;
    clear: both;
    border-radius: 0 0.5em .5em 0.5em;
}

td.buttons {
    vertical-align: middle;
    white-space: nowrap;
}

td.buttons a.button {
    float: none;
    display: inline-block;
}

.bar .buttons {
    float: right;
    margin-top: 3px;
}

td.buttons .button span,
.bar .buttons .button span {
    display: inline-block;
    text-indent: -9999px;
}

.product .buttons .button img,
.user .buttons .button img,
.order .buttons .button img,
.button img {
    vertical-align: text-bottom;
}

.bar,
.bar:link,
.bar:visited {
    float: none;
    text-align: left;
    margin: 4px 0 4px 0;
    line-height: 28px;
    font-size: inherit;
}

.bar a:link,
.bar a:visited {
    float: left;
    text-decoration: none;
    color: inherit;
}

.product .details {
    position: relative;
    overflow: hidden;
}

#product iframe {
    width: 100%;
    border: none;
    overflow: auto;
    height: 400px;
}

.actionButtons {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

.buttons .menu a {
    text-decoration: none;
}

.product .buttons .menu .button,
.user .buttons .menu .button,
.order .buttons .menu .button,
.imageList .buttons .menu .button {
    text-align: left;
    float: left;
}

.product .buttons .button:hover,
.user .buttons .button:hover,
.order .buttons .button:hover,
.button:hover {
    color: #ffffff;
}

.menu span,
.order .buttons .button span {
    padding-left: 1em;
    word-break: break-all;
}

.button.image span,
.menu a.image span {
    display: inline;
    padding-left: 4px;
}

.adminAction {
    text-decoration: none;
    display: block;
    margin: 0;
    margin-bottom: 0.5em;
    padding: 1em;
    border: solid 0.1em;
    background: rgba(200, 200, 0, 0.3);
    color: rgba(0, 0, 0, 0.7);
    border-radius: 0.5em;
    clear: both;
    overflow: hidden;
}

.adminAction:hover {
    background: rgba(200, 200, 0, 0.5);
    color: rgba(0, 0, 0, 0.7);
}


/* --  Used For Site Exceptions and other errors  -- */

.notification,
.actionSuccess,
.exception,
.information,
.adminDetails,
.security,
.informationIT,
.actionFeedback div {
    border-radius: 0.5em;
    color: rgba(0, 0, 0, 0.6);
    font-family: verdana, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5em;
    margin: 0px 0px 0.5em 0px;
    text-align: left;
    padding: 0.5em;
    overflow: hidden;
}

div.notification,
div.actionSuccess,
div.exception,
div.information,
div.adminDetails,
div.security,
div.informationIT,
.actionFeedback div {
    clear: both;
}

span.notification,
span.actionSuccess,
span.exception,
span.information,
span.adminDetails,
span.security,
span.informationIT {
    float: left;
    padding: 0.2em 0.5em;
    border: solid 0.1em;
}

.actionSuccess,
.success,
.actionFeedback .success {
    background-color: rgba(0, 200, 0, 0.5);
}

.notification {
    background-color: rgba(200, 200, 0, 0.5);
}

.exception {
    background-color: rgba(200, 0, 0, 0.5);
}


/* --  Used For user information  -- */

.information,
.adminDetails {
    background-color: rgba(0, 100, 200, 0.3);
}

.information a,
.adminDetails a {
    color: rgba(0, 100, 200, 0.8);
}

.security,
.informationIT {
    background-color: rgba(100, 100, 100, 0.5);
}

.adminDetails .attName {
    color: #777777;
}

.adminDetails span {
    padding-right: 1em;
}

.adminDetails img {
    vertical-align: bottom;
}

.adminDetails h1,
.adminDetails h2,
.adminDetails h3,
.actionSuccess h1,
.actionFeedback h1,
.notification h1,
.exception h1,
.information h1,
.security h1,
.actionSuccess h2,
.actionFeedback h2,
.notification h2,
.exception h2,
.information h2,
.security h2,
.actionSuccess h3,
.actionFeedback h3,
.notification h3,
.exception h3,
.information h3,
.security h3 {
    margin: 0px;
    padding: 0px;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: none;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.6);
    font-family: verdana, sans-serif;
    line-height: normal;
    margin: 0 0 0.5em;
    padding-bottom: 0.5em;
    border-bottom: solid 0.1em rgba(0, 0, 0, 0.2);
}

.selectListIcon {
    padding-left: 20px;
    background-position: 2px 2px;
    background-repeat: no-repeat;
    width: 210px;
}

.selectListIcon option {
    padding-left: 23px;
    background-position: 2px 1px;
    background-repeat: no-repeat;
}

.inputText {
    width: 210px;
    line-height: 1.5em;
}

.code {
    width: 120px;
    text-transform: uppercase;
}

textarea.richtext,
textarea.inputText {
    width: 100%;
    box-sizing: border-box;
}

input.dateField,
input.small,
input.number,
input[type=number],
input.colour {
    width: 80px;
    text-align: right;
}

.default .inputText {
    width: 50px;
}

.datePicker img {
    border: solid 1px #cccccc;
    vertical-align: bottom;
}

input.datePicker {
    width: 150px;
}

.inputBoxButton {
    float: none;
    height: 24px;
    display: inline;
    margin: 0;
    text-align: center;
}

.tableBorder {
    margin-bottom: 1em;
    margin-top: 1em;
    clear: both;
    border-collapse: collapse;
}

table th,
.columnHeader {
    text-align: left;
    font-size: 1.1em;
    color: rgba(0, 0, 0, 0.5);
    border: 0.1em solid rgba(0, 0, 0, 0.3);
    font-weight: normal;
    padding: 0.2em 0.5em;
    text-shadow: 0.1em 0.1em rgba(255, 255, 255, 0.6);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.05+0,0.25+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#40000000', GradientType=0);
    /* IE6-9 */
}

.tableBorder tbody td {
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
}

.tableBorder td.number,
.tableBorder th.number {
    text-align: right;
}

.tableBorder tbody tr.open td {
    border-bottom: none;
}

.tableBorder tbody tr.dataOpen td {
    border-top: none;
}

.tableBorder tfoot td {
    font-weight: bold;
    border: none;
    padding: 0.2em 0.5em;
}

tr.credit td {
    background: #E0FFD3;
}

.tableBorder tr.credit td {
    border-top: solid 1px #8AD66A;
    border-bottom: solid 1px #8AD66A;
}

tr.debit td {
    background: #fcecec;
}

.tableBorder tr.debit td {
    border-top: solid 1px #E47E7A;
    border-bottom: solid 1px #E47E7A;
}

.tableBorder .tableBorder .columnHeader,
.tableBorder .tableBorder th {
    background-color: #ABDBF2;
}

.list .row {
    border-bottom: 1px solid #DDDDDD;
    padding: 0.5em;
}

.setUser .scroll {
    padding: 0;
    border: 0;
}

.linkPDF,
.attValue .pdf {
    background: url(images/icons/document-pdf.png) 0px 0px no-repeat;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.linkXLS,
.attValue .xls {
    background: url(images/icons/document-excel.png) 0px 0px no-repeat;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
}

span.help {
    font-size: 0.8em;
    font-style: italic;
}

.hint,
.tip {
    display: none;
    position: absolute;
    width: 200px;
    margin-top: -4px;
    margin-left: 10px;
    border: 1px solid #c93;
    padding: 10px 12px;
    border-radius: 5px;
    text-align: left;
    color: #333333;
    z-index: 9999;
    background: #ffc url(images/admin/pointer.gif) no-repeat -100px -100px;
}

.hint .hintPointer,
.tip .tipPointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(images/admin/pointer.gif) left top no-repeat;
}

.hint a.close {
    float: right;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
    margin-left: 6px;
    background: url(images/admin/close.png) no-repeat;
}

.hint.wide {
    width: 350px;
}

#pageBodyCalendar .date {
    background: #AAAAAA;
    padding: 6px;
    margin: 0px;
    margin-right: 20px;
    text-align: center;
}

#pageBodyCalendar .date .day {
    display: block;
    font-weight: bold;
    font-size: 20px;
}

#pageBodyCalendar .date .month {
    display: block;
    font-weight: normal;
    font-size: 12px;
}

#pageBodyCalendar .date .year {
    display: none;
}

.pageSplitSort .controls .contrtol select {
    width: auto;
}

#orderByAttribute {
    float: right;
}

#resultSets {
    float: left;
}

#accountStatement table,
#paymentResults table {
    border-collapse: collapse;
}

#accountStatement table td,
#paymentResults table td,
table tr.showNextRow td {
    vertical-align: top;
}

#accountStatement td p,
#paymentResults td p {
    margin: 0;
}

#accountStatement tr.debit .details {
    text-transform: uppercase;
}

#accountStatement tr.debit .details div.notes {
    font-size: 0.8em;
    text-transform: initial;
}


/*             styles for the star rater                */

.starRating {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 125px;
    height: 25px;
    position: relative;
    overflow: hidden;
    background: url(images/admin/starRating.png) top left repeat-x;
}

.starRating li {
    padding: 0px;
    margin: 0px;
    width: 25px;
    height: 25px;
    /*\*/
    float: left;
    /* */
}

.starRating li a {
    display: block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    text-indent: -9000px;
    z-index: 20;
    position: absolute;
    padding: 0px;
    overflow: hidden;
}

.starRating li a:hover {
    background: url(images/admin/starRating.png) left bottom;
    z-index: 2;
    left: 0px;
    border: none;
}

.starRating a.star1 {
    left: 0px;
}

.starRating a.star1:hover {
    width: 25px;
}

.starRating a.star2 {
    left: 25px;
}

.starRating a.star2:hover {
    width: 50px;
}

.starRating a.star3 {
    left: 50px;
}

.starRating a.three-stars:hover {
    width: 75px;
}

.starRating a.star4 {
    left: 75px;
}

.starRating a.star4:hover {
    width: 100px;
}

.starRating a.star5 {
    left: 100px;
}

.starRating a.star5:hover {
    width: 125px;
}

.starRating li.currentRating {
    background: url(images/admin/starRating.png) left center;
    position: absolute;
    height: 25px;
    display: block;
    text-indent: -9000px;
    z-index: 1;
}


/* remove halo effect in firefox   */

a:active {
    outline: none;
}

#sessionTimeout {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    z-index: 9999;
    display: none;
    border-radius: 5px;
    box-shadow: 0 0 150px 20px #000000;
    text-align: left;
    background: #fff;
    line-height: normal;
    color: #000;
}

.product .author {
    background: #ffffff;
    position: absolute;
    margin: 0.5em;
    padding: 0.2em;
    border-radius: 50%;
    right: 0;
}

.product .author a {
    text-decoration: none;
    display: block;
}

.product .author img {
    height: 30px;
    margin: 0px;
    border-radius: 50%;
    float: left;
    background: url(images/icons/user.png) 50% 50% no-repeat;
    min-width: 20px;
    width: auto !important;
    width: 20px;
}

.product .author span {
    float: left;
}

label {
    cursor: pointer;
}

#siteMap,
#siteMap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#siteMap a {
    font-size: 1.5em;
}

#siteMap li {
    border-top: solid 0.1em #A3A3A3;
    clear: left;
    margin-top: 1em;
    padding-top: 1em;
}

#siteMap li li li {
    border: solid 0.1em #A3A3A3;
    max-width: 25%;
    clear: none;
    float: left;
    margin: 1em;
    padding: 1em;
}

#siteMap li li li li {
    border: none;
    float: none;
    list-style: disc;
    max-width: none;
}

#siteMap li li {
    font-size: 0.9em;
}

article.product span.tags {
    background: rgba(255, 255, 255, 0.5);
    padding: 0.5em;
    border-radius: 0.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

span.tags a {
    padding-right: 1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.8em;
}

#scriptResult table {
    border: solid 1px #777777;
    border-collapse: collapse;
    width: 100%;
}

#scriptResult td {
    border-top: solid 1px #cccccc;
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin: 0px;
}

#scriptResult tr:hover td {
    border: none;
    border-top: solid 1px #438DB4;
    border-bottom: solid 1px #438DB4;
    background-color: #ACDCF3;
}

*.iconFile {
    padding-left: 20px;
    background: url(images/icons/document.png) no-repeat 2px 50%;
}

.iconPDF {
    background-image: url(images/icons/document-pdf.png);
}

.iconTXT,
.iconCSV {
    background-image: url(images/icons/document-text.png);
}

.iconFAL,
.iconSWF {
    background-image: url(images/icons/document-flash.png);
}

.iconDOC {
    background-image: url(images/icons/document-word.png);
}

.iconXSL {
    background-image: url(images/icons/document-excel.png);
}

.iconHTM,
.iconHTML {
    background-image: url(images/icons/document-code.png);
}

.iconJPG,
.iconPNG,
.iconGIF {
    background-image: url(images/icons/document-image.png);
}

.iconMP3,
.iconWAV {
    background-image: url(images/icons/document-music.png);
}

.iconAVI,
.iconMOV,
.iconFLV {
    background-image: url(images/icons/document-film.png);
}

ul.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
    margin-top: 1em;
}

ul.tabs li,
ul.filter li {
    border-radius: 0.5em 0.5em 0 0;
    border: solid 0.1em rgba(0, 0, 0, 0.3);
    border-bottom: none;
    float: left;
    margin: 0;
    margin-right: 0.5em;
}

ul.tabs li.selected,
ul.filter li.selected {
    background: #ffffff;
    border-bottom: 0.1em solid #fff;
    margin-bottom: -0.1em;
}

ul.tabs li a img,
ul.filter li a img {
    vertical-align: middle;
}

ul.tabs li a,
ul.filter li a {
    color: inherit;
    text-decoration: none;
}

ul.tabs li.selected a,
ul.filter li.selected a {
    color: #000000;
}

ul.tabs li a.disabled,
ul.filter li a.disabled {
    font-style: italic;
    cursor: default;
}

ul.tabs li a span,
ul.filter li a span {
    padding-left: 0.5em;
}

ul.filter {
    margin: 0;
    padding: 0;
    float: right;
    clear: both;
    list-style: none;
    overflow: hidden;
}

ul.filter li {
    border: solid 0.1em rgba(0, 0, 0, 0.3);
    border-radius: 0.5em;
    margin-right: 0;
    margin-left: 1em;
}

.tabContainer {
    padding: 1em;
    clear: both;
    border: solid 0.1em rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #ffffff;
}

hr {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0;
    height: 0.1em;
    border: none;
    border-top: solid 0.1em rgba(0, 0, 0, 0.5);
    clear: both;
}

.scroll {
    margin-bottom: 1em;
    overflow: auto;
    border: solid 0.1em rgba(0, 0, 0, 0.5);
    border-left: none;
    border-right: none;
    background: rgba(255, 255, 255, 0.5);
    padding: 1em;
}

#attributeKey h3 {
    margin: 0;
    margin-bottom: 5px;
    line-height: 22px;
}

#attributeKey h4 {
    clear: both;
    margin: 0;
    padding-top: 12px;
    padding-bottom: 6px;
}

#attributeKey div,
#attributeKey span {
    float: left;
    line-height: 18px;
    margin-bottom: 6px;
    margin-left: 30px;
}

#attributeKey div img,
#attributeKey span img,
#attributeKey h4 img {
    vertical-align: top;
}

.captcha,
.welcome {
    border: 0.1em solid #D0D0D0;
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.2);
    padding: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
    clear: both;
    overflow: hidden;
}

.captcha h4 {
    padding-top: 1.3em;
    padding-bottom: 1em;
}

.captcha span,
.captcha h4 {
    float: left;
}

.captcha h3 {
    margin: 0;
    margin-left: 1em;
    margin-right: 1em;
    font-size: 2em;
    line-height: 2em;
    float: left;
}

.captcha input {
    margin: 0;
    width: 90px;
    font-size: 2em;
    text-transform: uppercase;
}

.product {
    margin-bottom: 2em;
    float: none;
    overflow: hidden;
}

article.product .productBody .images,
article.product .productBody .image,
article.product .productBody .googleMap {
    display: block;
    float: left;
    width: 50%;
    margin-right: 5%;
}

article.product .productBody .image .frame,
article.product .productBody .googleMap {
    max-height: 400px;
    overflow: hidden;
    box-sizing: border-box;
}

.productList article.product .productBody .images .image {
    width: 50%;
    max-height: 200px;
    margin: 0;
    float: left;
}

article.product .productBody .images .image.active {
    width: 100%;
    margin-right: 0;
    max-height: 400px;
}

#productImagePicker {
    clear: both;
}

.productBody ul {
    list-style: inside disc;
    padding-left: 1.5em;
}

.product .attributes {
    vertical-align: top;
    width: 45%;
    float: left;
    padding-top: 1em;
}

.product h3.productCaption {
    padding-bottom: 0.5em;
    border-bottom: dotted;
}

.product .noImage .attributes {
    width: auto;
    float: none;
}

.attributes .textarea {
    display: block;
    margin-bottom: 8px;
}

.noImage .attributes {
    padding-left: 0;
}

.productBody {
    display: block;
}

.product .image a {
    display: block;
}

.product .image img {
    display: block;
    width: 100%;
    max-width: none;
}

.product.colLast {}

.productList article.product,
.productList .childItems .product {
    width: 46%;
    float: left;
    clear: left;
    padding: 1%;
    background: #CECECE;
    margin: 1%;
    margin-bottom: 1em;
}

.productList article.product.colLast {
    float: right;
    clear: none;
}

article.product.first .noImage .attributes {
    width: 100%;
    float: none;
}

.buttons {
    position: relative;
}

td.buttons {
    text-align: right;
}

.buttons a {
    padding-left: 1em;
}

.product .buttons,
.product .buttons .public,
.block .buttons {
    float: right;
    clear: both;
}

.product details {
    float: right;
}

.product details details {
    font-size: 0.9em;
    border-radius: 0.5em;
    color: rgba(0, 0, 0, 0.5);
    font-family: verdana, sans-serif;
    line-height: 2em;
    margin: 0.6em;
    padding: 0px 0.6em;
}

.product .buttons {
    position: static;
}

#objectBodyInfo .popupMenu {
    position: relative;
    float: right;
}

section.block:hover .popupMenu,
article.product:hover .admin .popupMenu {
    display: block;
}

.product .admin .popupMenu,
.block .popupMenu {}

.product .public .popupMenu {
    float: right;
}

.popupMenu div.menu {
    display: none;
}

.popupMenu.hover div.menu {
    display: block;
    background: #ffffff;
    border-radius: 0.5em;
    right: 0;
    max-width: 600px;
    width: 300px;
    z-index: 999;
    border: solid 0.1em rgba(0, 0, 0, 0.5);
}

.popupMenu div.menu h4 {
    padding: 8px;
    margin: 0;
    color: #000000;
    margin: 0.5em;
    clear: both;
}

.popupMenu div.menu ul {
    list-style: none;
    line-height: 2em;
    padding-left: 1em;
}

.popupMenu div.menu ul a {
    text-decoration: none;
}

.product .buttons .buttons {
    text-align: right;
    display: block;
    vertical-align: top;
    line-height: normal;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

.popupMenu .menu a.button:link {
    float: none;
    margin: 2%;
    width: 39%;
}

.popupMenu a.button span {
    text-align: left;
}

.product .buttons .buttons .publicButtons {
    margin-top: 10px;
}

.options td {
    padding: 5px;
}

.options td.attributeName {
    width: 250px;
    padding: 0;
    text-align: left;
    font-size: 11px;
}

.options .indent td.attributeName {
    padding-left: 40px;
    width: 210px;
}

.options h3 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    line-height: 1.3em;
    font-size: 1.3em;
}

.options h3 img {
    float: left;
    margin-right: 12px;
}

input.checkbox {
    margin-bottom: 5px;
    margin-top: 5px;
    vertical-align: sub;
    cursor: pointer;
}

div.dragAndDropFiles {
    background: none repeat scroll 0 0 rgba(171, 219, 242, 0.5);
    overflow: hidden;
    padding: 0.5em;
    text-align: center;
    border-radius: 1em;
}

div.dragAndDropFiles h3 {
    text-align: center;
}

div.dragAndDropFiles.dragOver {
    border-color: #478CB0;
    background: #ABDBF2;
    color: #478CB0;
}

div.dragAndDropFiles h5 {
    padding-left: 20px;
    background-position: 0px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    margin-top: 4px;
    margin-bottom: 4px;
}

div.dragAndDropFiles .status {
    padding: 4px;
}

div.dragAndDropFiles .progress {
    padding-right: 20px;
    background: #ffffff url(images/admin/loading.gif) right 50% no-repeat;
}

div.dragAndDropFiles .fileList {
    text-align: left;
}

.productList {
    clear: both;
}

.productList .childItems {
    clear: both;
    font-size: 0.8em;
}

.productList .childItems .product {
    width: 32%;
    min-width: 300px;
    float: left;
    margin-right: 2%;
}

.productList .childItems .product.col2 {
    margin: 0;
}

.productList .childItems .product.colLast {
    background: inherit;
    padding: inherit;
    margin-left: 2%;
    margin-right: 0;
    float: right;
}

.productList .childItems .product .productBody .image,
.productList .childItems .product .productBody .googleMap {}

.productList .childItems .product .productBody .attributes {}

.product .parentItem>h3,
.product .childItems>h3,
.product .relatedItems>h3 {
    margin-top: 1em;
    padding-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-top: solid 1px;
    border-bottom: solid 1px;
    text-transform: uppercase;
    text-align: center;
    clear: both;
}

.product .relatedItems article.product {
    width: 45%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    clear: left;
}

.product .relatedItems article.product:nth-child(2n+1) {
    float: right;
}

#itemTypeViewer .bar.info {
    display: none;
    top: 25px;
    position: absolute;
    z-index: 999;
    right: 0;
    line-height: 14px;
    font-size: 11px;
}

.itemImages {
    clear: both;
}

#gallery {
    margin-bottom: 2em;
    clear: both;
    float: left;
    width: 100%;
}

#gallery .author {
    display: none;
}

#gallery #photo {
    margin-bottom: 10px;
}

#gallery #photo .product .productBody .image {
    float: left;
    display: block;
    text-align: center;
    width: auto;
    max-height: unset;
}

#gallery #thumbnails .image .frame {
    padding: 0;
    border-width: 5px;
}

#gallery #photo .image img {
    max-width: none;
    display: block;
    margin: 0;
}

#gallery #thumbnails {
    padding: 0;
    margin: 0;
    border-top: solid 1px #AEAEAE;
    padding: 1em;
    clear: both;
}

#gallery #thumbnails .product {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    display: block;
    border: solid 1px #AEAEAE;
    border-radius: 3px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

#gallery #thumbnails .product .attributes {
    display: none;
}

#gallery #thumbnails .product.selected {
    border: solid 1px #000000;
    box-shadow: 0 0 5px 3px #000000;
}

#gallery #thumbnails .product .image {
    margin: 0;
    width: auto;
}

#gallery #thumbnails .product .image img {
    height: 85px;
    width: auto;
    display: block;
    margin: 0;
}

#gallery #thumbnails .product .buttons {
    display: none;
}

ul.actionList li.done {
    list-style: none;
    padding-left: 20px;
    background: url(images/icons/tick.png) 0 3px no-repeat;
    padding-top: 2px;
    padding-bottom: 2px;
}

.googleMap {
    height: 600px;
    border: 1em solid rgba(100, 100, 100, 0.5);
    margin-bottom: 1em;
}

a[rel="lightbox"] {
    cursor: url(images/icons/zoom_in.png), auto;
}

#menu .logo {
    background: url(images/logo.png) no-repeat scroll 50% 50% rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    height: 111px;
    margin-bottom: 20px;
    display: block;
}

#toolbar .logo:hover,
#menu .logo:hover {
    background-color: rgba(171, 219, 242, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.attribute .price .priceDetails {
    padding-left: 6px;
    font-size: 0.5em;
}

.red {
    color: rgb(200, 0, 0);
}

.yellow {
    color: rgb(200, 200, 0);
}

.green {
    color: rgb(0, 200, 0);
}

#actionProgress {
    position: fixed;
    width: 300px;
    height: 90px;
    box-shadow: 0 0 20px #000000;
    border: solid 0.2em;
    background: rgba(255, 255, 255, 0.8);
    color: black;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    top: 40%;
    left: 50%;
    border-radius: 1em;
    margin-left: -150px;
    padding: 20px;
}

#actionProgress .spinner {
    padding-top: 20px;
    font-size: 40px;
    color: #494949;
}

#dashboard ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#dashboard a.button {
    float: left;
    font-size: 0.8em;
    line-height: normal;
    max-width: 140px;
    min-height: 5em;
    padding: 1em;
    text-align: center;
    white-space: initial;
}

#dashboard a.button h3 {
    margin: 0;
}

span.tag {
    background: #ABDBF2;
    cursor: pointer;
}

.block .templateInstructions {
    max-width: 300px;
    float: left;
}

#clientMenu {
    float: right;
    line-height: 1.5em;
    padding: 0.8em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    z-index: 999;
    position: absolute;
    top: 0;
    right: 0;
    background: #eeeeee;
    width: auto;
}

#clientMenu ul {
    list-style: none;
    padding: 0;
    margin: 0
}

#clientMenu ul li {}

#clientMenu a {
    text-decoration: none;
    display: block;
}

#clientMenu h3 {
    margin: 0;
    font-weight: bold;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.4);
}

#clientMenu.hover {
    background: #eeeeee;
}

#clientMenu.hover h3 {
    color: rgba(0, 0, 0, 0.9);
}

#clientMenu span.userName {
    font-size: 0.8em;
    display: block;
    line-height: normal;
    padding-bottom: 0.5em;
}

#clientMenu div.userMenu {
    display: none;
    line-height: 2em;
}

#clientMenu.hover div.userMenu {
    display: block;
    overflow: auto;
}

#clientMenu.simple {
    position: absolute;
}

#clientMenu.simple.hover h3 {
    display: none;
}

#categoryPath {
    line-height: 2.5em;
    text-transform: uppercase;
    color: #555555;
    font-size: 1.2em;
    float: none;
    width: auto;
    margin-top: 2em;
}

#miniOrder {
    float: right;
    margin: 0.5em;
    margin-right: 0;
    margin-left: 0;
    width: auto;
    clear: both;
}

#miniOrder a {
    font-weight: 1.4em;
    padding: 0.5em;
    display: block;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 0.1em;
    text-align: center;
}

#miniOrder a:hover {
    background: #EDEDED;
}

#main.hasMenu {
    max-width: 760px;
    padding-left: 240px;
}

nav#menu {
    clear: both;
    width: 200px;
    position: absolute;
    left: 0;
}

nav#menu ul {
    padding: 0;
    margin: 0;
}

nav#menu ul li {
    clear: none;
    margin-bottom: 1px;
    border-bottom: none;
}

nav#menu ul li div {
    background: #478cb0;
    border-radius: 0 0 0.5em 0.5em;
    border-top: medium none;
    display: none;
    position: absolute;
    white-space: normal;
    width: 200px;
    z-index: 999;
    font-size: 0.8em;
}

nav#menu ul ul li div {
    position: static;
}

nav#menu ul li.selected div {
    background: #494949;
}

nav#menu ul li div li {
    float: none;
    border: none;
    border-top: solid 1px #ffffff;
    margin: 0;
}

nav#menu ul li div span.description {
    display: none;
    padding: 0.8em;
    color: #ffffff;
}

nav#menu li {
    height: 1%;
    clear: both;
    display: block;
    margin: 0;
    line-height: 1.4em;
    border-bottom: solid 1px #ffffff;
    padding: 0;
}

nav#menu li li {
    background: none;
    border: 0;
    padding: 0;
    font-weight: normal;
    line-height: 1.6em;
}

nav#menu a,
nav#menu a:link,
nav#menu a:visited {
    text-decoration: none;
    display: block;
    margin: 0;
    color: #ffffff;
    padding: 0.5em 0.8em;
    background: #478CB0;
}

nav#menu li.selected a,
nav#menu li.selected a:hover {
    background: #494949;
    color: #ffffff;
}

nav#menu a:hover,
nav#menu a:active {
    color: #494949;
    background: #ABDBF2;
}

nav.horizontal ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav.horizontal ul li {
    float: left;
    margin-right: 1em;
}

.pageWatch {
    border-top: solid 4px rgba(0, 0, 0, 0.1);
    border-bottom: solid 4px rgba(0, 0, 0, 0.1);
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 1em;
    line-height: 2em;
}

.smallText {
    font-size: 0.8em;
    line-height: normal;
}

span.key i {
    padding-right: 0.5em;
    font-size: 1.2em;
}

.column2 {
    float: left;
    width: 45%;
    min-width: 400px;
}

.product .attributes .icon {
    float: none;
    width: auto;
    display: block;
    text-align: center;
    height: auto;
    margin: 0px;
    line-height: 0em;
    font-size: 8em;
    text-shadow: 0.1em 0.1em 0.1em rgb(119, 119, 119);
}

.product .attributes .icon .attValue {
    padding: 0;
}

.order .item img.photo {
    width: 100%;
    max-width: 200px;
    margin-right: 1em;
    margin-bottom: 0.5em;
    float: left;
}

.order .item a {
    line-height: 1.5em;
}

.order .item a.remove {
    margin-left: 2em;
    white-space: nowrap;
}

#logon .controls .control {
    max-width: 400px;
}

#logon .controls .inputText {
    width: 100%;
    box-sizing: border-box;
}

footer nav a {
    padding: 0.5em;
    background: rgba(0, 0, 0, 0.1);
    display: block;
}

.cols .colHalf {
    float: left;
    width: 48%;
    min-width: 400px;
}

.cols .colHalf:nth-child(even) {
    float: right;
}

audio {
    width: 100%;
}

#objectBodyInfo ul {
    list-style: inside;
}

#objectBodyInfo ul li {
    margin-bottom: 0.5em;
}

#jumpTop {
    position: fixed;
    bottom: 1em;
    right: 1em;
    text-transform: uppercase;
    display: none;
    padding: 1em;
    background: #478cb0;
    color: #fff;
}

body #popup,
.popup {
    background: #000d;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    z-index: 99999;
}

body>#popup div.ajax,
body>#popup div.ajaxProgress,
.popup .inner {
    background: #fff;
    padding: 1em;
    min-width: 400px;
    max-width: 600px;
    height: 100%;
    margin: auto;
    box-sizing: border-box;
    position: relative;
    padding-top: 4em;
}

body>#popup div.ajax {
    text-align: left;
    overflow: scroll;
    font-size: 1.4em;
}

body>#popup div.ajax div.colHalf {
    float: none;
    width: auto;
    min-width: unset;
}

body>#popup a.close,
.popup .inner a.close {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 2em;
    font-size: 2em;
    cursor: pointer;
    text-align: center;
    background: #fff;
}

body>#popup a.close:after,
.popup .inner a.close:after {
    font: normal normal normal 1em/1 FontAwesome;
    content: "\f00d";
    padding: 0.5em;
}

.flexCols {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.flexCols > div {
    background: #ddd;
    padding: 0.5em;
}

.flexRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}