:root {
  --generel-font: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  --logo-font: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  --info-bg-color: rgb(207, 244, 252);
  --info-border-color: rgb(172, 217, 227);
  --info-font-color: rgb(14, 80, 93);

  --success-bg-color: rgba(209, 231, 221);
  --success-border-color: rgb(84, 153, 122);
  --success-font-color: rgba(15, 81, 51);

  --error-bg-color: rgba(248, 215, 218);
  --error-border-color: rgb(231, 182, 186);
  --error-font-color: rgba(132, 37, 56);

  --warning-bg-color: rgba(255, 243, 205);
  --warning-border-color: rgb(237, 223, 179);
  --warning-font-color: rgba(102, 77, 3);

  --color-1-normal: rgb(36, 70, 157);
  --color-1-light: rgb(65, 104, 206);
  --color-1-bg-image: linear-gradient(var(--color-1-light), 50%, var(--color-1-normal));
  --color-1-hover-image: linear-gradient(var(--color-1-normal), 50%, var(--color-1-light));
  --color-1-font: rgb(255,255,255);

  --color-2-normal: rgb(93, 129, 99);
  --color-2-light: rgb(93, 146, 103);
  --color-2-bg-image: linear-gradient(var(--color-2-light), 50%, var(--color-2-normal));
  --color-2-hover-image: linear-gradient(var(--color-2-normal), 50%, var(--color-2-light));
  --color-2-border-color: rgb(121, 189, 133);
  --color-2-font: rgb(255,255,255);
  
  --color-3-normal: rgb(182, 103, 38);
  --color-3-light: rgb(206, 118, 47);
  --color-3-bg-image: linear-gradient(var(--color-3-light), 50%, var(--color-3-normal));
  --color-3-hover-image: linear-gradient(var(--color-3-normal), 50%, var(--color-3-light));
  --color-3-font: rgb(255,255,255);

  --color-4-normal: rgb(62, 72, 99);
  --color-4-light: rgb(140, 155, 169);
  --color-4-bg-image: linear-gradient(var(--color-4-light), 50%, var(--color-4-normal));
  --color-4-hover-image: linear-gradient(var(--color-4-normal), 50%, var(--color-4-light));
  --color-4-font: rgb(0,0,0);

  --color-5-normal: rgb(198, 168, 80);
  --color-5-light: rgb(224, 193, 101);
  --color-5-bg-image: linear-gradient(var(--color-5-light), 50%, var(--color-5-normal));
  --color-5-hover-image: linear-gradient(var(--color-5-normal), 50%, var(--color-5-light));
  --color-5-border-color: rgb(241, 204, 92);
  --color-5-border-color: rgb(185, 139, 0);
  --color-5-font: rgb(238, 238, 238);


  /* Ad form submit button */
  --submit-normal-bg-color: rgb(198, 117, 80);
  --submit-normal-font-color: rgb(238, 238, 238);
  --submit-normal-border-color: rgb(185, 139, 0);

  --submit-hover-bg-color: rgb(221, 130, 89);
  --submit-hover-font-color: rgb(255, 255, 255);
  --submit-hover-border-color: rgb(209, 157, 0);



  
  --body-bg-color: #eee;
  --body-font-color: #000;
  --body-link-color: #369;

  --header-bg-color: #f9f9f9;
  --header-bg-image: linear-gradient(#a1a1a1, 50%, #ffffff);
  --header-font-color: #000;

  --menu-main-bg-color: #369;
  --menu-main-bg-image: linear-gradient(var(--color-1-light), 50%, var(--color-1-normal));

  --menu-main-font-color: #eee;
  
  --menu-user-bg-color: var(--header-bg-color);
  --menu-user-bg-image: var(--header-bg-image);
  --menu-user-font-color: var(--header-font-color);
  --menu-user-link-color: var(--header-font-color);
  --menu-user-border-color: var(--header-bg-color);

  --user-name-bg-color: var(--color-3-light);
  --user-name-font-color: var(--color-3-font);

  --page-bg-color: #fff;
  --page-font-color: #000;

  --text-ad-normal: rgb(217, 246, 223);
  --text-ad-light: rgb(217, 246, 223);
  --text-ad-bg-image: linear-gradient(var(--text-ad-light), 50%, var(--text-ad-normal));
  --text-ad-hover-image: linear-gradient(var(--text-ad-normal), 50%, var(--text-ad-light));
  --text-ad-border-color: rgb(162, 224, 173);
  --text-ad-font: rgb(0, 0, 0);

  --button-bg-color: rgb(71, 199, 93);
  --button-bg-image: linear-gradient(rgb(71, 199, 93), 50%, rgb(36, 154, 56));
  --button-font-color: #fff;
  --button-border-color: #ccc;
}

html, body {
  font-family: var(--generel-font);
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: .87rem;
  background-color: var(--body-bg-color);
  color: var(--body-font-color);
  margin: 0;
  padding: 0;
  border: none;
}



/* Generel link farve */
a { color: #333; }

.hidden { display: none; }
.pointer { cursor: pointer; }


input[type="submit"] {
  margin: 0;
  padding: 5px 10px;
}

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }


.error {
  background-color: rgba(248, 215, 218);
  color: rgba(132, 37, 56);
  border-color: rgb(231, 182, 186);
}

p.error {
  display: block;
  margin: 0;
  padding: .66rem 1rem;
  border-radius: 5px;
}



.info {
  background-color: var(--info-bg-color);
  color: var(--info-font-color);
  border-color: var(--info-border-color);
}

p.info {
  display: block;
  margin: 0;
  padding: .66rem 1rem;
  border-radius: 5px;
}


.success {
  background-color: var(--success-bg-color);
  color: var(--success-font-color);
  border-color: var(--success-border-color);
}

p.success {
  display: block;
  margin: 0;
  padding: .66rem 1rem;
  border-radius: 5px;
}

.glyphicon.green {
  color: #070;
}

.border {
  border: 1px #ccc solid;
}

.rounded {
  border-radius: 6px;
}

.shadow {
  box-shadow: 3px 3px 6px #999;
}



/* User form */
.user-form {
  width: 90%;
  background-color: #fff;
  margin: 1rem 0;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.user-form label {
  display: block;
  margin: 1rem 0 .25rem 0;
  font-weight: 600;
}

.user-form input[type="text"],
.user-form input[type="email"],
.user-form input[type="password"] {
  margin: 0;
  padding: .33rem .66rem;
}

.user-form .delim.info {
  border-top: 1px #ccc solid;
  margin: 2rem 0 1rem 0;
}


/* User Account */
.user-account {
  width: 90%;
  background-color: #fff;
  margin: 1rem 0;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.user-account div {
  margin: 0 0 2rem 0;
  padding: 0 .5rem;
  border: 1px solid;
  border-color: #ccc;
  border-radius: 5px;
}

.user-account div input[type="text"],
.user-account div input[type="password"] {
  margin: 1px 0;
  padding: .33rem;
}






/* -----------------------------
  T H E  L A Y O U T
----------------------------- */

/* Banner wrapper */
.banner-wrapper.mobile {
  display: none;
}

.banner-wrapper {
  position: relative;
  background-color: #eee;
  background-image: url(../images/bg-image-2.jpg);  /* Gudhjem camping */
  background-position: 0 10%;
  background-size: cover;
  margin: 0;
  padding: 6rem 1rem;
}

.logo-wrapper {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  align-items: center;
  width: fit-content;
  background-color: hsla(0, 0%, 100%, 0.5);
  margin: 0;
  padding: 0 2rem;
  border-radius: 9px;
}

.banner-wrapper .logo {
  margin: 0;
  margin-left: 0;
  padding: 0;
  white-space: nowrap;
  cursor: pointer;
}

.banner-wrapper div.logo-text h2 {
  font-family: var(--logo-font);
  font-size: 3rem;
  font-weight: 400;
  margin: 0;
  padding: .5rem 0;
}

.banner-wrapper div.logo-text h2 a {
  text-decoration: none;
}


/* Navigation */
div.nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  background-color: rgb(244, 244, 244);
  padding: .66rem 0;
  border-top: 1px #ddd solid;
  border-bottom: 1px #ddd solid;
}

div.nav a {
  width: 6rem;
  font-size: 1.1rem;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  background-color: #369;
  color: #fff;
  margin: 0;
  padding: .5rem 1rem;
  border-radius: 5px;
}

div.nav a.logout {
  background-color: #c33;
  color: #fff;
}
div.nav a.login {
  background-color: rgb(29, 144, 29);
  color: #fff;
}



/* User wrapper */
.user-wrapper {
  display: flex;
  justify-content: center;
  gap: 2rem;
  background-color: rgb(70, 169, 208);
  background-image: linear-gradient(#48dfcd, 50%, #22ab9b);
  margin: 0;
  padding: 0;
}

.user-wrapper p {
  color: #fff;
  font-size: 400;
  margin: 0;
  padding: 5px;
}

.user-wrapper a {
  color: #fff;
}



/* Main Wrapper */
.main-wrapper {
  width: 100%;
  position: relative;
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.column {
  position: relative;
  width: 15%;
  text-align: left;
  margin: 0;
  padding: 0 0rem;
  opacity: 0.5;
  transition: all 200ms ease-in-out;
}

.column:hover {
  opacity: 1.0;
}

.col-content {
  position: sticky;
  top: 0;
  margin: 0;
  padding: .5rem 1rem;
}

.col-content h2 {
  font-size: 1.6rem;
  font-weight: 500;
  color: #369;
  margin: 5px 0 0 0;
  padding: 0;
}

.col-content p {
  color: #000;
  margin: .5rem 0 1.5rem 0;
  padding: 0;
}

.col-content:hover {
  opacity: 1.0;
}



/* Page Wrapper */
.page-wrapper {
  width: 60%;
  min-height: 89vh;
  background-color: var(--page-bg-color);
  color: var(--page-font-color);
  margin: 0 auto 1rem auto;
  margin-bottom: 5rem;
  padding: .5rem 2rem;
  border-radius: 10px;
  box-shadow: 0 0 15px #ccc;
}

.page-wrapper h1,
.page-wrapper h2,
.page-wrapper h3,
.page-wrapper h4 {
  font-weight: 400;
  margin: .5rem 0;
  padding: 0;
}

.page-wrapper p {
  line-height: 1.4;
  margin: .5rem 0;
}



.pager {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pager select {
  margin: 0;
  padding: .25rem .5rem;
}

.pager span.prev,
.pager span.next {
  display: inline-block;
  background-color: #f6f6f6;
  padding: 0;
  border: 1px #666 solid;
  border-radius: 3px;
}
.pager span.prev:hover,
.pager span.next:hover {
  background-color: #fff;
}
.pager span.prev a,
.pager span.next a {
  font-size: 1rem;
  text-decoration: none;
  padding: 0 10px;
}


/* Content */
.content {
  background-color: #fff;
  margin: 1rem 0;
  padding: .5rem 1rem;
  border: 3px green solid;
  border-radius: 6px;
}


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


.background-image {
  position: relative;
  display: flex;
  justify-content: center;
  background-image: url(../images/bg-image-2.jpg);  /* Gudhjem camping */
  background-size: cover;
  height: 40vh;
  overflow: hidden;
}

.background-image h1 {
  position: absolute;
  top: 1rem;
  right: 15vw;
  background-color: #626262de;
  color: #fff;
  font-size: 4rem;
  font-weight: 400;
  padding: 5px 20px;
  text-shadow: 1px 2px #000;
  border-radius: 6px;
}



/* Template List */
.template-list {
  background-color: #fff;
  margin: 1rem 0;
  padding: 1rem;
}

.template-list table {
  width: 100%;
}




/* --------------------
  PIN code form
-------------------- */
.pin-code {
  width: 90%;
  background-color: #fff;
  margin: 6rem auto;
  padding: 1rem;
  border: 1px #ccc solid;
  border-radius: 6px;
}

.pin-code input[type="number"] {
  width: 4rem;
  padding: 5px;
}




/* Ads view */
.XXads-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Ads view */
.ads-view {
  display: block;
}







/* ------------------------
  Table
------------------------ */
table {
  border-collapse: collapse;
}

table.w100 {
  width: 100%;
}

table thead {
  background-color: var(--color-1-normal);
  background-image: var(--color-1-bg-image);
  color: var(--color-1-font);
}

table thead th {
  font-weight: 400;
  text-align: left;
  margin: 0;
  padding: 3px 8px;
}

table td {
  margin: 0;
  padding: 3px 8px;
}

table.border {
  border-collapse: separate;
  border: 1px #999 solid;
}

table.shadow {
  box-shadow: 3px 3px 6px #999;
}

table.zebra tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}

table.hover tbody tr:hover:not(.ignore) {
  background-color: rgb(242, 242, 254);
  background-color: rgb(230, 248, 234);
}




/* ------------------------
  Login select boxes
------------------------ */
.login-wrapper {
  font-size: 100%;
  color: #eee;
  text-align: center;
  margin: 1rem 0;
  padding: 0;
}

.login-wrapper .login {
  width: 50%;
  margin: 5rem auto;
  padding: 2rem;
  border-radius: 5px;
  transition: all .5s ease;
  cursor: pointer;
}

.login-wrapper h2 {
  font-size: 140%;
  font-weight: 400;
}

.login-wrapper .login.user {
  background-color: var(--color-1-normal);
  background-image: var(--color-1-bg-image);
  color: var(--color-1-font);
}
.login-wrapper .login.user:hover {
  background-color: var(--color-1-light);
  background-image: var(--color-1-hover-image);
  color: var(--color-1-font);
}



.login-wrapper .login.pin {
  background-color: var(--color-2-normal);
  background-image: var(--color-2-bg-image);
}
.login-wrapper .login.pin:hover {
  background-color: var(--color-2-light);
  background-image: var(--color-2-hover-image);
  color: var(--color-2-font);
}
.login-wrapper .login.pin.valid {
  background-color: var(--color-2-normal);
  background-image: var(--color-2-bg-image);
  color: var(--color-2-font);
  cursor: default;
}
.login-wrapper .login.pin.valid:hover {
  background-color: var(--color-2-light);
  background-image: var(--color-2-hover-image);
}



.login-wrapper .login.register {
  background-color: var(--color-3-normal);
  background-image: var(--color-3-bg-image);
  color: var(--color-3-font);
}
.login-wrapper .login.register:hover {
  background-color: var(--color-3-light);
  background-image: var(--color-3-hover-image);
}



/* Login forms */
.login-form {
  font-family: var(--logo-font);
  width: fit-content;
  min-width: 20rem;
  text-align: left;
  background-color: #fff;
  color: #000;
  margin: 5rem auto 0 auto;
  padding: 1rem 2rem;
  border: 1px #ccc solid;
  border-radius: 6px;
}

.login-form h3 {
  font-weight: 600;
}

.login-form label {
  display: block;
  padding: 1rem 0 2px 0;
}
.login-form input {
  display: block;
  width: 96%;
  margin: 0;
  padding: .33rem;
}

.login-form input[type="submit"] {
  width: fit-content;
  margin: 1rem 0;
  padding: .5rem .75rem;
}






.text-ad,
.image-ad {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 94%;
  box-shadow: 2px 2px 8px #bbb;
}


.text-ad {
  max-width: 40rem;
  color: #000;
  margin: .5rem 0;
  padding: 0 .5rem;
  border: 1px #555 solid;
  border-radius: 4px;
}

.image-ad {
  max-width: 40rem;
  margin: .5rem 0;
  padding: .5rem;
  border: 1px #666 solid;
  border-radius: 4px;
}

.image-ad img {
  display: block;
  max-width: 100%;
  height: auto;
}

.image-ad h2,
.image-ad h3 {
  margin: 0;
  padding: 0;
}

.image-ad p {
  margin: 0;
  padding: 5px 0 0 0;
}

.submit-button,
#upload-submit {
  background-color: var(--color-2-normal);
  background-image: var(--color-2-bg-image);
  color: var(--color-2-font);
  margin: 0;
  padding: .5rem 1rem;
  border: 1px var(--color-2-border-color);
  border-radius: 3px;
}

.is_paired {
  font-weight: 700;;
  color: #c33;
}

.has_paired {
  font-weight: 700;;
  color: #393;
}



/* Ad form */
.ad-form {
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.ad-form h2 {
  color: #333;
  font-size: 2rem;
}

input.ad-title {
  width: 98%;
  font-size: 1.5rem;
  margin: .5rem 0;
  padding: .5rem;
}

input.title-suggest {
  background-color: #ffd;
  width: 98%;
  font-size: 1.25rem;
  margin: 0 0 1rem 0;
  padding: .5rem;
}

a#suggest-title {
  display: inline-block;
  color: rgb(10, 74, 143);
  font-size: 1rem;
  margin: .5rem 0 0 0;
  padding: 0;
}



/* Submit button */
.ad-form input[type="submit"] {
  background-color: var(--submit-normal-bg-color);
  color: var(--submit-normal-font-color);
  font-size: 1.1rem;
  font-weight: 400;
  border: 1px solid;
  border-color: var(--submit-normal-border-color);
  border-radius: 4px;
  transition: all 100ms ease-in-out;
}

.ad-form input[type="submit"]:hover {
  background-color: var(--submit-hover-bg-color);
  color: var(--submit-hover-font-color);
  border: 1px solid;
  border-color: var(--submit-hover-border-color);
  cursor: pointer;
}

.ad-form input[type="submit"] + span {
  color: #369;
  margin: 0 1rem;
}

p.approve {
  width: fit-content;
  background-color: rgb(16, 156, 16);
  padding: .66rem 1rem;
  border-radius: 4px;
}

p.disapprove {
  background-color: rgb(198, 9, 9);
}

p.approve a {
  text-decoration: none;
  color: #fff;
}



/* Top level box */
.box-wrapper {
  margin: 0;
  margin-top: 1rem;
  padding: 0;
  border: none;
  border: 1px solid;
  border-color: red;
  border-color: #ccc;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.box-wrapper:first-of-type {
  margin: 0;
}
.box-wrapper:last-of-type {
  margin-bottom: 2rem;
}

.box-wrapper h2 {
  background-color: rgb(9, 144, 38);
  background-image: linear-gradient(rgb(17, 199, 62), 50%, rgb(9, 144, 38));
  color: #fff;
  font-size: 1.25rem;
  margin: 0;
  padding: .5rem;
  border-color: rgb(29, 225, 71);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}




/* A group of fields (or just one) */
.field-box-wrapper {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem;
  padding: 5px 0;
  border: 1px #ccc solid;
  border-radius: 5px;
}

.field-box-wrapper:has(.depend) {
  display: flex;
  flex-wrap: nowrap;
}

.field-box-wrapper:has(.trigger) {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  border: 1px green solid;
}


.field-box-wrapper:has(.forced) {
  display: block;
}

.field-box-wrapper.forced {
  display: flex;
}



ul.ad-menu {
  display: flex;
  gap: 5rem;
  align-items: baseline;
  justify-content: center;
  background-color: rgb(255, 230, 167);
}

ul.ad-menu li {
  margin: 0;
  padding: .5rem;
}

ul.ad-menu li a {
  font-weight: 700;
}


/* The field itself */
.field-wrapper {
  margin: 0;
  padding: 0;
}

.field-wrapper p {
  margin: 0;
  padding: 0;
}

.field-wrapper.paired {
  display: inline-block;
}

.field-wrapper.depend {
  display: none;
}

.field-wrapper.depend.forced {
  display: block;
}

.field-box-wrapper.forced .field-wrapper {
  display: block;
}


/* ------------------ */
/* Styling the fields */
/* ------------------ */
.tip-icon {
  display: inline-block;
  height: 14px;
  width: 17px;
  background-color: rgba(255, 102, 0, 0.238);
  color: rgb(255, 102, 0);
  text-align: center;
  margin: 0;
  margin-left: .66rem;
  padding: 0 0 3px 0;
  border: 1px rgb(255, 102, 0) solid;
  border-radius: 50%;
  cursor: default;
}

.field-wrapper h3 {
  color: rgb(10, 107, 156);
}

.field-wrapper label {
  user-select: none;
}


/* Toggle */
.field-wrapper.ftype-toggle {
  margin: 0;
  padding: 1.5rem 0 0 0;
}


/* Radio */
.field-wrapper.ftype-radio {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-radio h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-radio p {
  display: inline-block;
  margin: 0;
  margin-top: .5rem;
  padding: 0;
}
.field-wrapper.ftype-radio label {
  margin: 0;
  margin-left: 2rem;
  padding: 0 1rem 0 0;
}
.field-wrapper.ftype-radio input[type="radio"] {
  margin: 0;
  padding: 0;
}


/* Checkbox */
.field-wrapper.ftype-checkbox {
  padding: .5rem;
}
.field-wrapper.ftype-checkbox h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-checkbox p {
  margin: 0;
  margin-top: .5rem;
  padding: 0;
}
.field-wrapper.ftype-checkbox label {
  margin: 0;
  margin-left: 2rem;
  padding: 0 1rem 0 0;
}
.field-wrapper.ftype-checkbox input[type="checkbox"] {
  margin: 0;
  padding: 0;
}


/* Select */
.field-wrapper.ftype-select {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-select h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-select select {
  background-color: #f9f9f9;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-select select option {
  background-color: #fff;
}
.field-wrapper.ftype-select input[type="text"] {
  min-width: 20rem;
  background-color: #f9f9f9;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}


/* Selectx2 */
.field-wrapper.ftype-selectx2 {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-selectx2 h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-selectx2 select {
  min-width: 10rem;
  background-color: #f9f9f9;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-selectx2 select option {
  background-color: #fff;
}


/* Year */
.field-wrapper.ftype-year {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-year h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-year select {
  background-color: #f9f9f9;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-year select option {
  background-color: #fff;
}


/* Month-year */
.field-wrapper.ftype-month-year {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-month-year h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-month-year select {
  width: 5.2rem;
  background-color: #f9f9f9;
  text-align: center;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-month-year select:first-of-type {
  width: 4.1rem;
}
.field-wrapper.ftype-month-year select option {
  background-color: #fff;
}


/* mmyy */
.field-wrapper.ftype-mmyy {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-mmyy h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-mmyy input {
  background-color: #f9f9f9;
  width: 5.5rem;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-mmyy input:focus {
  background-color: #fff;
}


/* Line */
.field-wrapper.ftype-line {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-line h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-line input[type="text"] {
  width: 22rem;
  background-color: #f9f9f9;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-line input:focus {
  background-color: #fff;
}


/* Number */
.field-wrapper.ftype-number {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-number h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-number input {
  background-color: #f9f9f9;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-number input:focus {
  background-color: #fff;
}
.field-wrapper.ftype-number label input {
  margin: 0 .5rem;
  padding: 0;
}


/* Date */
.field-wrapper.ftype-date {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-date h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-date input {
  background-color: #f9f9f9;
  width: 5.5rem;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-date input:focus {
  background-color: #fff;
}


/* Text */
.field-wrapper.ftype-text {
  padding: 0 1.5rem 0 .5rem;
}
.field-wrapper.ftype-text h3 {
  margin: 0;
  padding: 0;
}
.field-wrapper.ftype-text textarea {
  width: 30rem;
  height: 6rem;
  background-color: #f9f9f9;
  margin: 2px 0 5px 0;
  padding: 5px;
  border: 1px #999 solid;
  border-radius: 3px;
}
.field-wrapper.ftype-text textarea:focus {
  background-color: #fff;
}




/* ----------------------
  Card View (listing)
---------------------- */
.card-view {
  margin: 0;
  padding: 1rem 0;
}

.card-view.non-public {
  background-color: #00000012;
  border: 2px rgba(121, 121, 121, 0.597) dashed;
  border-radius: 4px;
  opacity: .66;
}

.card-view .image {
  width: 20rem;
  height: auto;
  margin: 0;
  padding: 5px;
  overflow: hidden;
}

.card-view .image img {
  display: block;
  width: 100%;
  height: auto;
}

.card-view .specs {
  display: flex;
  gap: 2px 5px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: .5rem;
  padding: 0;
}

.card-view .specs .important {
  display: flex;
  align-items: flex-start;
  justify-content: baseline;
  gap: 1rem;
  width: 23%;
  background-color: rgb(252, 252, 252);
  margin: 1px 0;
  border: 1px rgb(184, 184, 184) solid;
  border-radius: 3px;
}


.card-view .specs .important.search {
  background-color: transparent;
  border: 1px rgb(0, 0, 0) solid;
}


.card-view .specs .important.highlight {
  background-color: rgb(254, 239, 255);
  border: 1px rgb(176, 17, 176) solid;
}



.card-view .specs .important:not(:has(div)) {
  display: none;
}

.card-view .specs .important div {
  font-weight: 700;
  margin: 2px 0;
  padding: 1px .25rem 1px 0;
}

.card-view .specs .important div:first-of-type {
  font-weight: 400;
  text-align: right;
  margin: 2px 0;
  padding: 1px 5px;
  padding-right: 0;
}

.card-view .specs .important div:first-of-type:after {
  content: ":";
  font-weight: 700;
  padding: 0 1px 0 2px;
}


.card-view button.view-ad {
  width: 96%;
  background-color: rgb(9, 144, 38);
  background-image: linear-gradient(rgb(17, 199, 62), 50%, rgb(9, 144, 38));
  color: #fff;
  margin: 1rem 0;
  padding: 8px;
  border: 1px solid;
  border-color: rgb(14, 205, 87);
  border-radius: 4px;
  cursor: pointer;
}





/* Card Details */
.card-details {
  padding: .5rem;
}

.card-details h1 {
  color: #000;
}

.card-details .box {
  margin: 0 0 2rem 0;
  padding: 0 1rem .5rem 1rem;
  border: 2px #369 solid;
  border-radius: 5px;
  box-shadow: 0 0 5px 5px #eee;
}

.card-details h2 {
  color: #369;
}


.card-details .field-box {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  background-color: #ffffff;
  margin: 0 0 1rem 0;
  padding: .5rem;
  border: 1px #999 solid;
  border-radius: 4px;
}

.card-details .field-box>div {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  background-color: #fefefe;
  width: 30%;
  width:fit-content;
  margin: 0;
  padding: .25rem 2rem .25rem .25rem;
  border: 0px #ddd solid;
  border-radius: 3px;
}

.card-details .field-box>div>div.caption {
  font-weight: 700;
  margin: 0;
  padding: 0;
  padding-right: .5rem;
}

.card-details .field-box>div>div.caption:after {
  content: ":";
  font-weight: 400;
  margin-left: 3px;
}

.card-details .field-box>div>div.value {
  font-weight: 400;
  margin: 0;
  padding: 0;
  padding-right: 0rem;
}


.card-details .field-box.checkbox>div {
  display: block;
  width: fit-content;
  min-width: 20rem;
}

.card-details .field-box.checkbox>div>div.value {
  margin-left: .5rem;
}
.card-details .field-box.checkbox>div>div.value .glyphicon {
  margin-right: .5rem;
}

.card-details .field-box.checkbox>div>div.caption:after {
  content: "";
  font-weight: 400;
  margin-left: 0;
}

.card-details .field-box>div span {
  margin: 0 .5rem 0 0;
  padding: 0;
}





/* ----------------------------------
  Customized styling of radio buttons
---------------------------------- */
.field-wrapper input[type="checkbox"] + label {
  font-weight: 400;
  margin: 0;
  margin-left: .5rem;
}

.field-wrapper input[type="checkbox"]:checked + label {
  font-weight: 700;
}


/* ----------------------------------
  Customized styling of radio buttons
---------------------------------- */
.field-wrapper input[type="radio"] + label {
  font-weight: 400;
  margin: 0;
  margin-left: .5rem;
}

.field-wrapper input[type="radio"]:checked + label {
  font-weight: 700;
}


/* Image Upload */
.ad-images {
  margin: 0;
  padding: 0;
}

.ad-images .info ul {
  margin: 2rem 0 0 0;
}

.ad-images .info {
  text-align: center;
  margin: 0;
}

.ad-images ul {
  text-align: center;
  margin: 0;
  padding: 0;
}


#fileElem {
  display: none;
}


.ad-current-images {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
  padding: .5rem;
}

.ad-current-images .image {
  position: relative;
  width: 12rem;
  width: 15.9%;
  height: 8rem;
  margin: 0;
  padding: 0;
  border: 1px green solid;
  overflow: hidden;
}

.ad-current-images .image img {
  width: 100%;
  height: auto;
}

.ad-current-images .image .delete-image {
  position: absolute;
  display: none;
  top: .5rem;
  width: fit-content;
  right: .5rem;
  background-color: #fff;
  padding: .125rem 1rem;
  border: 1px #369 solid;
}

.ad-current-images .image:hover .delete-image {
  display: block;
}



/* Upload Preview */
#upload-preview:has(div) {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .5rem;
  border: 1px #ccc solid;
  border-radius: 6px;
}

#upload-preview .thumbnail {
  width: 8rem;
  height: 5.5rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#upload-preview .thumbnail img {
  width: 100%;
  height: auto;
}


.image-form {
  text-align: center;
  margin: 0;
  padding: 0;
}


.my-form {
  text-align: center;
  margin: 4rem auto 2rem auto;
  padding: 0;
}

.my-form button.upload {
  font-size: 2rem;
  color: #fff;
  margin: 0;
  padding: 1rem 1rem;
  background-color: #22a613;
  border: 1px rgb(0, 255, 76) solid;
  border-radius: 6px;
  transition: all 200ms ease-in-out;
}
.my-form button.upload:hover {
  background-color: #28c117;
  border: 1px rgb(10, 232, 76) solid;
}

.my-form label.button {
  font-size: 2rem;
  color: #fff;
  margin: 0;
  padding: .5rem 1rem;
  background-color: #136ba6;
  border: 1px rgb(0, 115, 255) solid;
  border-radius: 6px;
  transition: all 200ms ease-in-out;
}

.my-form label.button:hover {
  background-color: #1885cd;
}

.my-form input[type="file"] {
  display: none;
  margin: 0;
}

.my-form #upload-button {
  font-size: 2rem;
  background-color: #13a65a;
  color: #fff;
  padding: 1rem 2rem;
  border: 1px #0f0 solid;
  border-radius: 6px;
  transition: all 200ms ease-in-out;
}

.my-form #upload-button:hover {
  background-color: #2acb78;
}

.my-form input[type="submit"] {
  margin-top: 2rem;
}




/* Delete & Sort Images */
.delete-images {
  margin: 4rem 0;
}

.delete-images ul {
  display: flex;
  gap: 0;
  flex-direction: column;
}

.delete-images ul li {
  background-color: #eee;
  margin: .5rem 0;
  padding: 0;
  cursor: move;
}

.delete-images ul li:last-child {
  border: 1px red solid;
}

.delete-images ul li label {
  display: flex;
  gap: 1rem;
  width: 8.4rem;
  cursor: pointer;
}

.delete-images div.img {
  width: 6rem;
  height: 4rem;
  overflow: hidden;
}

.delete-images div.img img {
  width: 100%;
  height: auto;
}


.delete-images label input[type="checkbox"] + div img {
  opacity: 1.0;
}

.delete-images label input[type="checkbox"]:checked + div img {
  opacity: .5;
}

.delete-images img {
  width: 6rem;
  height: auto;
}






#update-error {
  padding: .5rem 1rem;
  border: 2px green dashed;
}




/* ----------------------------------
  My Ads
---------------------------------- */
.list-my-ads {
  opacity: 1;
}

.list-my-ads table {
  width: 100%;
}

.list-my-ads table thead th.date {
  width: 10rem;
  text-align: center;
}





/* ---------------------
  Slides
--------------------- */
.slide-wrapper {
  position: relative;
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  height: fit-content;
  margin: 0;
  margin-top: .5rem;
  padding: 1rem;
 }

.slide-container {
  position: relative;
  display: flex;
  align-items: baseline;
  width: 50%;
  height: fit-content;
  max-height: 40rem;
  margin: 0;
  padding: 0;
  margin-top: 10px;
  overflow: hidden;
}


.image-tiles {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  width: 50%;
  height: fit-content;
  margin: 0;
  padding: 0;
}

.image-tiles div {
  width: 32%;
  height: fit-content;
  height: 6rem;
  background-color: #cbcbcb;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 5px;
}

.image-tiles div img {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  border-radius: 4px;
  cursor: pointer;
}


.cycle-slideshow,
.cycle-slideshow * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cycle-slideshow {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}


.cycle-slideshow .cycle-prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: transparent;
  z-index: 200;
}
.cycle-slideshow .cycle-next {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  background-color: transparent;
  z-index: 200;
}



/* Make it sligthly visible when hovering the cyckle-next7prev area */
.cycle-slideshow .cycle-prev:hover a {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

.cycle-slideshow .cycle-next:hover a {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* Make it sligthly visible when hovering the slideshow container */
.cycle-slideshow:hover a {
  background-color: rgba(0,0,0,0.3);
  color: white;
}



.cycle-slideshow img { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  cursor: pointer;
}

.cycle-slideshow img:first-child {
  position: static;
  z-index: 1;
}

/* Next & previous buttons */
.cycle-prev a,
.cycle-next a {
  cursor: pointer;
  position: absolute;
  top: 17rem;
  width: auto;
  color: transparent;
  font-weight: bold;
  font-size: 16px;
  transition: 0.6s ease;
  margin-top: -20px;
  padding: 12px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 201;
}

.cycle-next a {
  right: 0;
}


/* Position the "next button" to the right */
.cycle-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.disabled {
  opacity: .5;
  filter:alpha(opacity=50);
}


/* display paused text on top of paused slideshow */
.cycle-paused:after {
  content: 'Paused';
  color: white;
  background: black;
  padding: 10px;
  z-index: 5;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 10px;
  opacity: .5;
  filter: alpha(opacity=50);
}

.swipe-info {
  font-size: 80%;
  text-align: center;
}




/* ---------------------------- 
  SEARCHING
---------------------------- */
.searching {
  display: flex;
  gap: .5rem 1rem;
  flex-wrap: wrap;
}

.searching .search-wrapper {
  padding: .5rem 1rem;
  border: 1px #ccc solid;
  border-radius: 6px;
}


/* ---------------------------- 
  SEARCH FIELDS
---------------------------- */
div.select-wrapper {
  margin: 0;
  margin-bottom: 0;
}

/* Caption */
div.select-main {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px #ccc solid;
}
div.select-main {
  position: relative;
  display: inline-block;
  width: 15rem;
  margin: 0;
  padding: 0;
  user-select: none;
}
div.select-main i {
  display: inline-block;
  font-style: normal;
  margin: 0;
  padding: 3px 10px;
}
div.select-main span {
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 0;
  width: 1rem;
  background-color: #eee;
  margin: 0 auto;
  padding: 3px 5px;
  border-left: 2px #fff solid;
}
div.select-main span:after {
  content: " ";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-bottom: 2px;
  border-left: 2px #000 solid;
  border-bottom: 2px #000 solid;
  transform: rotate(-45deg);
}


/* input field */
div.select-main-input {
  position: relative;
  display: none;
  width: 15rem;
  margin: 0;
  padding: 0;
  border: 1px #ccc solid;
}
div.select-main-input input[type="text"] {
  display: inline-block;
  margin: 0 2px;
  padding: 4px 10px;
  border: none;
}
div.select-main-input span {
  position: absolute;
  display: block;
  right: 0;
  bottom: 0;
  width: 1rem;
  background-color: #eee;
  margin: 0 auto;
  padding: 2px 5px;
  border-left: 2px #fff solid;
}
div.select-main-input span:after {
  content: " ";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-bottom: 2px;
  border-left: 2px #000 solid;
  border-bottom: 2px #000 solid;
  transform: rotate(-45deg);
}

div.select-inner {
  position: absolute;
  display: none;
  width: 15.2rem;
  max-height: 20rem;
  background-color: #fff;
  overflow-y: scroll;
  z-index: 20;
}
div.select-inner ul {
  padding: 2px;
  border: 1px #ccc solid;
}
div.select-inner ul li {
  background-color: #fff;
  margin: 2px 0;
}
div.select-inner ul li:hover {
  background-color: #eee;
  margin: 2px 0;
}
div.select-inner ul li:first-child,
div.select-inner ul li:last-child {
  margin: 0;
}
div.select-inner ul li label {
  display: block;
  border: 1px #ccc solid;
  cursor: pointer;
}

div.select-inner.open {
  display: block;
}



/* YEAR */
div.slider-wrapper {
  width: 10rem;
  padding: 0 1rem;
}
div.slider-wrapper .values span {
  font-weight: 700;
}
div.slider-wrapper .values span:nth-child(1) {
  padding: 0 0 0 .5rem;
}
div.slider-wrapper .values span:nth-child(2) {
  float: right;
  padding: 0 .5rem 0 0;
}



.footer {
  display: flex;
  justify-content: center;
  align-items: baseline;
  background-color: #222;
  margin: 0 auto;
  padding: 0;
  padding-bottom: 5rem;
  border-top: 6px #777 solid;
}

.footer div {
  width: 15%;
}

.footer h2 {
  color: #999;
  font-weight: 400;
  font-size: 2rem;
  margin: 1rem 0 1rem 0;
}

.footer p,
.footer a {
  color: #fff;
  text-decoration: none;
  margin: .33rem 0 0 0;
  padding: 0 0 0 .125rem;
}





@media screen and (min-width: 760px) {

  /* ---------------------
    Slides
  --------------------- */
  .description {
    position: relative;
    float: left;
    width: 30%;
    margin-right: 4%;
  }

  .slide-wrapper {
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
   }

   .slide-container {
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
   }

   .swipe-info {
    display: none;
  }

  .reset-wrapper {
    width: 40rem;
    background-color: #fff;;
    margin: 5rem auto;
    padding: 1rem;
    border-radius: 6px;
    box-shadow: 3px 3px 6px 3px #ccc;
  }

}




@media screen and (max-width : 800px) {

  .banner-wrapper.mobile {
    display: flex;
  }

  .banner-wrapper {
    display: none;
    background-color: #eee;
    color: #000;
    background-image: none;
    background-size: cover;
    margin: 0;
    padding: 0 1rem;
  }

  .logo-wrapper {
    margin: 0;
    padding: 0 1rem;
    border-radius: 6px;
  }
  
  .banner-wrapper .logo {
    margin: 0;
    margin-left: 0;
    padding: 0;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .banner-wrapper div.logo-text h2 {
    font-size: 2rem;
  }
  
  .page-wrapper {
    width: 98%;
    margin: 0;
    padding: 0 5px;
  }

  .column {
    display: none;
  }

  .card .button {
    display: none;
  }

  /* Text */
  .field-wrapper.ftype-text textarea {
    width: 22rem;
    height: 6rem;
  }
  
  .field-wrapper.ftype-line input[type="text"] {
    width: 20rem;
  }
  
  
}




@media screen and (max-width : 420px) {

  /* Navigation */
  div.nav {
    display: flex;
    justify-content: center;
    gap: .5rem;
    background-color: rgb(244, 244, 244);
    padding: .5rem;
    border-top: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
  }

  div.nav a {
    width: 6rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    background-color: #369;
    color: #fff;
    margin: 0;
    padding: .5rem 1rem;
    border-radius: 5px;
  }



  /* ----------------------
    Card View (listing)
  ---------------------- */
  .card-view {
    padding: .5rem;
  }

  .card-view .image {
    width: 98%;
  }

  .card-view .image img {
    width: 100%;
    height: auto;
  }

  .card-view .specs .important {
    gap: .5rem;
    width: 48%;
  }

  .card-view .button {
    width: 98%;
  }


  .slide-wrapper {
    position: relative;
    display: flex;
    gap: .5rem;
    flex-direction: column;
    flex-wrap: nowrap;
    height: fit-content;
    margin: 0;
    margin-top: .5rem;
    padding: 1rem;
   }
  
  .slide-container {
    width: 100%;
  }
  

  .image-tiles {
    width: 100%;
  }
  
  .image-tiles div {
    width: 48.5%;
  }
  
 
  /* Text */
  .field-wrapper.ftype-text textarea {
    width: 290px;
    height: 6rem;
  }
  
  .field-wrapper.ftype-line input[type="text"] {
    width: 290px;
  }
  
  
  

}