/*
* Authors - Luke Bennis, Blake Brazier
*/

/* Fonts -----------------------------------------------------------------*/

@font-face 
{
  font-family: 'Soho-Bold';
  src: url('assets/SohoGothicStd-ExtraBold.ttf') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* Variables -----------------------------------------------------------------*/

:root
{
  --grey-100: #F1F4F5; /* neutral 5 */
  --grey-200: #dee2e3;
  --grey-300: #CBD6DB; /* neutral 10 */
  --grey-400: #A6B8C0; /* neutral 20 */
  --grey-500: #819AA5; /* neutral 40 */
  --grey-600: #5D7B89; /* neutral 60 */
  --grey-700: #395D6D; /* neutral 80 */
  --grey-800: #263f49;
  --grey-900: #152329;

  --blue-100: #AAE5FF; 
  --blue-200: #7CD8FF;
  --blue-300: #42C6FF; 
  --blue-400: #14B9FF; 
  --blue-500: #00A1E6; 
  --blue-600: #0081B8;
  --blue-700: #005073; 
  --blue-800: #003045;
  --blue-900: #001822;

  --green-50:rgb(238, 251, 220); 
  --green-100: #D9F2B6; 
  --green-200: #C5EB8F;
  --green-300: #ACE35F; 
  --green-400: #97DC38; 
  --green-500: #80C322; 
  --green-600: #679C1C;
  --green-700: #406211; 
  --green-800: #263B0A;
  --green-900: #131D05;

  --red-100: #EEB1B4; 
  --red-200: #E68C91;
  --red-300: #DC5E65; 
  --red-400: #D43A41; 
  --red-500: #B82830; 
  --red-600: #932026;
  --red-700: #5C1418; 
  --red-800: #4A1013;
  --red-900: #370C0E;

  --black: black;
  --white: white;

  /* Design Tokens ------------------------*/

  --primary: var(--black);
  --secondary: var(--blue-500);

  --text: var(--grey-900);

  --button-radius: 4px;
  --button-padding: 12px 20px 12px 20px;
  --button-gradient: linear-gradient(0deg, var(--black) 50%, var(--grey-800) 100%);
  --button-gradient-hover: linear-gradient(0deg, var(--black) 0%, var(--black) 100%);
}


/* Temporary Hide  -----------------------------------------------------------------*/

/* Hide Regular & Bin services boxes */

.wtss-component.wtss-regular-services,
.wtss-component.wtss-assets 
{
  display: none !important;
}

.wtss-voucher-type-name
{
  font-size: 0;
}

.wtss-voucher-type-name:after
{
  content: 'Waste Voucher';
  font-size: 16px !important;
}

/* Layout -----------------------------------------------------------------*/

*
{
  box-sizing: border-box;
}

*:focus
{
  outline: 1px solid var(--green-500);
}

img.logo {
  width: 100%;
  max-width: 600px;
}

body {
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
  margin: 0px;
  margin-bottom: 25vh;
}

div#wtss-main 
{
  width: min(800px, 85%);
  margin-top: 8px;
}

div.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 75vh;
}

.wtss-ticket-detail
{
  margin-block: 32px;
}

form
{
  margin-bottom: 80px;
}

/* Typography -----------------------------------------------------------------*/

h1, h2, h3
{
  font-family: "Soho-Bold", sans-serif;
}

.wtss-section-title-bar h1 {
  color: var(--black);
  font-size: 18px;
  margin-bottom: 0 !important;
}

.wtss-section-title-bar h1:before
{
  content: '';
  background: url('assets/mcc-wastetrack-icon-site.png');
  height: 32px;
  width: 32px;
  display: inline-block;
  background-size: contain;
  vertical-align: middle;
  margin-right: 6px;
  margin-bottom: 4px;
  background-repeat: no-repeat;
}


#wtss-dialog-create-ticket h1 {
  text-align: left;
  margin: 0px;
}

#wtss-dialog-show-ticket div.wtss-form-container h1 {
  text-align: left;
  margin: 5px 0px 5px 8px;
  padding: 8px 0px 5px 0px;
}

#wtss-dialog-show-ticket div.wtss-form-container h2 {
  text-align: left;
  margin: 8px;
  font-size: 18px;
  color: var(--green-500);
}

#wtss-dialog-create-ticket div.wtss-ticket-instructions h3 {
  color: #cc0000;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 22px;
}

div.wtss-dialog a {
  font-weight: bold;
  color: var(--text);
  text-decoration: underline var(--blue-500);
  text-underline-position: under;
  text-underline-offset: 2px;
}

    div.wtss-dialog a:hover,
    div.wtss-dialog  a:visited {
      color: var(--black);
      text-decoration-thickness: 2px;
    }

div#wtss-request-customer-details-instructions {
  margin: 15px;
  color: var(--text);
  font-weight: bold;
}

p,
div#wtss-request-phone-after {
  color: var(--text);
}

div#wtss-request-phone-after {
  margin-top: 44px;
  font-weight: 600;
  line-height: 1.6;
}

.wtss-ticket-detail-label label
{
  display: block;
  color: var(--black);
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--blue-500);
  font-size: 20px;
}

#wtss-dialog-customer-details label 
{
  color: var(--text);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}



/* Button Styles -----------------------------------------------------------------*/

input[type=submit],
button.wtss-action
{
  cursor: pointer;
  background-color: var(--black);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: var(--button-radius);
  padding: var(--button-padding);
}


input[type=submit]:active 
{
  background-color: var(--green-700);
}

input[type=submit]:disabled 
{
  background-color: var(--grey-400);
  color: var(--grey-700);
}

button.wtss-cancel 
{
  cursor: pointer;
  background-color: var(--grey-100);
  color: var(--grey-700);
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: var(--button-radius);
  padding: var(--button-padding);
}

#wtss-dialog-create-ticket input[type=submit] 
{
  margin-top: 8px;
  margin-bottom: 5px;
}

div.wtss-problem 
{
  color: var(--red-800);
  padding-bottom: 8px;
}

div.wtss-buttons 
{
  display: flex;
  margin-top: 8px;
  justify-content: right;
}




/* Inputs Styles -----------------------------------------------------------------*/

#wtss-verification-code,
input[type=text]#wtss-phone,
#wtss-dialog-customer-details input[type=text],
input[type=phone] 
{
  font-weight: bold;
  font-size: 20px;
  padding: 16px 8px;
  border-radius: 7px;
  border: 1px solid var(--grey-400);
  display: block;
  margin-bottom: 8px;
  width: 100%;
}

#wtss-verification-code,
input[type=text]#wtss-phone
{
  text-align: center;
}

#wtss-verification-code:hover,
#wtss-verification-code:active,
    input[type=text]#wtss-phone:hover,
    input[type=text]#wtss-phone:active
    {
      border-color: var(--green-500);
    }

    #wtss-verification-code:focus-visible,
    input[type=text]#wtss-phone:focus-visible
    {
      outline-color: var(--green-500);
      outline-offset: -1px;
      border-color: transparent !important;
    }


#wtss-dialog-create-ticket textarea
 {
  width: 100%;
  min-height: 100px;
  border-color: var(--grey-400);
  border-radius: var(--button-radius);
}

#wtss-dialog-create-ticket div.wtss-multi-checkboxes 
{
  padding:  5px;
  line-height: 24px;
}

#wtss-dialog-create-ticket select {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: var(--text);
  padding: var(--button-padding);
  border-radius: var(--button-radius);
  margin-block: 16px;
  border-color: var(--grey-400);
}

#wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
}




/* List Items & Selections Styles -----------------------------------------------------------------*/




/* Table Styles -----------------------------------------------------------------*/

#wtss-dialog-show-ticket table {
  text-align: left;
  width: 100%;
  border-radius: 10;
}

#wtss-dialog-show-ticket table td {
  padding-left: 5px;
  color: var(--text);
}

#wtss-dialog-show-ticket table td:first-child {
  width: 200px;
}

#wtss-dialog-show-ticket table td:last-child {
  font-weight: 400;
}

#wtss-dialog-create-ticket table {
  margin: 7px;
}

#wtss-dialog-create-ticket table td {
  padding:  3px;
  text-align: left;
  font-size:  13px;
  font-weight: bold;
  color: var(--text);
}










/* Wastetrack Styles -----------------------------------------------------------------*/







/**
 * Tickets
 */
#wtss-dialog-create-ticket ul.wtss-asset-group-selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
}



#wtss-dialog-create-ticket ul.wtss-asset-group-selector li {
  border: 2px solid #999;
  border-radius: var(--button-radius);
  padding: 13px;
  padding-left: 60px;
  margin-bottom: 5px;
  text-align: left;
  background-position: 5px 3px;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  cursor: pointer;
  background-image: url('assets/mcc-wastetrack-icon-bin.png');
  background-size: 32px;
  background-position: 5px 5px;
  font-weight: bold;
  color: var(--text);
  background-color: var(--white);
  min-width: 325px;
}

#wtss-dialog-create-ticket ul.wtss-service-selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#wtss-dialog-create-ticket ul.wtss-service-selector li {
  border: 2px solid #999;
  border-radius: var(--button-radius);
  padding: 13px;
  padding-left: 60px;
  margin-bottom: 5px;
  text-align: left;
  background-position: 5px 3px;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  cursor: pointer;
  background-image: url('assets/mcc-wastetrack-icon-bin.png');
  background-size: 32px;
  background-position: 5px 5px;
  font-weight: bold;
  color: var(--text);
  background-color: var(--white);
  min-width: 325px;
}

#wtss-dialog-create-ticket ul.wtss-service-selector li.wtss-selected {
  border: 2px solid var(--green-500);
  color: var(--green-500);
  background-image: url('assets/mcc-wastetrack-icon-bin-blue.png');
}

#wtss-dialog-create-ticket ul.wtss-asset-group-selector li.wtss-selected {
  border: 2px solid var(--green-500);
  color: var(--green-500);
  background-image: url('assets/mcc-wastetrack-icon-bin-active.png');
}

#wtss-dialog-create-ticket .wtss-form-container {
  background-color: var(--white);
  border-radius: 8px;
  padding-bottom:  15px;
}

#wtss-dialog-show-ticket .wtss-form-container {
  background-color: var(--white);
  border-radius: 8px;
  padding-bottom:  15px;  
}

#wtss-dialog-show-ticket div.wtss-details {
  background-color: var(--white);
  margin: 8px;
  border-radius: 8px;
}

.wtss-form
{
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
}

.wtss-form .wtss-field:nth-child(-n + 2) {
	width: 50%;
}

.wtss-form .wtss-field:nth-child(3) {
	width: 200%;
}
.wtss-form .wtss-field:nth-child(4) {
	width: 200%;
}

.wtss-form input[type="phone"] {
	background-color: rgb(243, 240, 240);
  cursor: not-allowed;
}

@media screen and (max-width: 800px)
{
  .wtss-form
  {
    flex-direction: column;
  }

  .wtss-user-section a {
    border-bottom: 2px solid var(--blue-500);
  }

  .wtss-user-section a:hover {
    border-bottom: 3px solid var(--blue-500);
  }
}

#wtss-dialog-show-ticket div.wtss-buttons .wtss-cancel-booking
{
  border: 1px solid red;
  background-color: white;
  color: black;
  padding: 8px 16px;
  border-radius: 6px;
  margin-top: -4px;
  margin-left: 8px;
  cursor: pointer;
}

button.wtss-cancel-voucher 
{
  border: 1px solid red;
  background-color: white;
  color: black;
  padding: 8px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
}

#wtss-dialog-show-ticket div.wtss-buttons .wtss-back {
  line-height: 22px;
  margin-right: 8px;
}


#wtss-dialog-create-ticket table td input {
  width:  100%;
}

ul.wtss-asset-selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.wtss-asset-selector li {
  position: relative;
  border: 2px solid #999;
  border-radius: var(--button-radius);
  padding: 13px;
  padding-left: 60px;
  margin-bottom: 5px;
  text-align: left;
  cursor: pointer;
  font-weight: bold;
  color: var(--text);
  background-color: var(--white);
  min-width: 100%;
}

ul.wtss-asset-selector img {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height:  24px;
}

#wtss-dialog-create-ticket ul.wtss-asset-selector li.wtss-selected {
  border: 2px solid var(--green-500);
  color: var(--green-500);
}


div.wtss-dialog {
  position: relative;
  text-align: center;
}



/*****************************************************************
 * Request Phone Number - Main Login
 *****************************************************************/



#wtss-dialog-request-phone {
  font-display: flex;
}

#wtss-dialog-request-phone h1 span {
  display: none;
}

#wtss-dialog-request-phone h1::after {
  content: "Login or register to continue";
}

#wtss-dialog-request-phone div.wtss-form-container {
  display: inline-flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

#wtss-dialog-request-phone div.wtss-form-container input[type=submit] {
  width: 100%;
}

#wtss-request-phone-instructions-replacement {
  font-size:  16px;
  color: var(--text);
  font-weight: bold;
  margin-bottom: 20px;
}

/*****************************************************************
 * Request Verification Code - Verify Phone Number
 *****************************************************************/
div#wtss-request-verification-code-instructions {
  margin-bottom: 15px;
}

#wtss-dialog-request-verification-code .wtss-form-container {
  width: 100%;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
}

#wtss-dialog-request-verification-code input[type=submit] {
  flex-grow: 1;
  margin-left: 8px;
}
#wtss-dialog-request-verification-code .wtss-cancel {
  flex-grow: 1;
}

/**
 * Request Customer Details
 */
#wtss-dialog-customer-details .wtss-instructions {
  color: var(--text);
  width: 570px;
  position: relative;
  left: 50%;
  margin-left: -285px;
  margin-bottom: 8px;
  font-size: 16px;
}

#wtss-dialog-customer-details form {
  width: 100%;
}

#wtss-dialog-customer-details div.wtss-field {
  text-align: left;
  display: inline-block;
  padding: 3px;
}

#wtss-dialog-customer-details div.wtss-buttons {
  margin-top: 15px;
}

#wtss-dialog-customer-details div.wtss-field input {
  width: 100%;
}

#wtss-dialog-customer-details div.wtss-form-container {
  display: flex;
  justify-content: center;
}

#wtss-dialog-customer-details div.wtss-form-container table td {
  text-align: left;
}




#wtss-dialog-customer-details .wtss-cancel {
  flex-grow: 1;
}

#wtss-dialog-customer-details input[type=submit] {
  flex-grow: 2;
  margin-left: 8px;
}

/**
 * Site Search / Find Address
 */
#wtss-dialog-site-search .wtss-instructions {
  color: var(--text);
  width: 570px;
  position: relative;
  left: 50%;
  margin-left: -285px;
  margin-bottom: 8px;
  margin-top: 8px;
  font-size: 16px;
}

#wtss-dialog-site-search div.wtss-form-container {
  display: flex;
  justify-content: center;
}

#wtss-dialog-site-search div.wtss-form-container table td {
  text-align: left;
}

#wtss-dialog-site-search label {
  color: var(--green-500);
  font-size: 13px;
  font-weight: bold;
}

#wtss-dialog-site-search input[type=text] {
  color: var(--green-500);
  font-size: 22px;
  font-weight: bold;
  padding: 5px;
  border: 2px solid #999;
  border-radius: var(--button-radius);
}

#wtss-dialog-site-search #wtss-street-no,#wtss-dialog-site-search #wtss-unit-no {
  color: var(--green-500);
  font-size: 16px;
  font-weight: bold;
  padding: 5px;
  width: 3em;
}

#wtss-dialog-site-search .wtss-cancel {
  flex-grow: 1;
}

#wtss-dialog-site-search input[type=submit] {
  flex-grow: 2;
  margin-left: 8px;
}

#wtss-dialog-site-search div#wtss-site-search-results {
  display: inline-block;
  margin-top: 8px;
  border-top: 2px solid #999;
}

#wtss-dialog-site-search ul.wtss-site-search-results {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#wtss-dialog-site-search ul.wtss-site-search-results li {
  border: 2px solid #999;
  border-radius: var(--button-radius);
  padding: 8px;
  padding-left: 60px;
  margin-bottom: 5px;
  text-align: left;
  background-image: url('assets/mcc-wastetrack-icon-site.png');
  background-position: 5px 3px;
  background-repeat: no-repeat;
  background-size: 40px;
  cursor: pointer;
}

#wtss-dialog-site-search ul.wtss-site-search-results li.wtss-selected {
  border: 2px solid var(--green-500);
  background-image: url('assets/mcc-wastetrack-icon-site-active.png');
}

#wtss-dialog-site-search ul.wtss-site-search-results li span.wtss-site-fullstreet {
  font-size: 16px;
  text-transform: capitalize;
  color: var(--text);
}
#wtss-dialog-site-search ul.wtss-site-search-results li.wtss-selected span.wtss-site-fullstreet {
  color: var(--green-500);
}
#wtss-dialog-site-search ul.wtss-site-search-results li span.wtss-site-fullstreet::after {
  content: "\a";
  white-space: pre;
}
#wtss-dialog-site-search ul.wtss-site-search-results li span.wtss-site-suburb {
  color: #999;
  font-size: 16px;
  font-weight: normal;
  text-transform: capitalize;
}

/**
 * Select Site / Select Address
 */

#wtss-dialog-select-site ul.wtss-select-site {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-block: 24px;
}

#wtss-dialog-select-site ul.wtss-select-site li {
  border: 2px solid var(--grey-200);
  border-radius: var(--button-radius);
  padding: 12px;
  padding-left: 70px;
  padding-right: 130px;
  margin-bottom: 8px;
  text-align: left;
  background-image: url('assets/mcc-wastetrack-icon-site.png');
  background-position: 12px 50%;
  background-repeat: no-repeat;
  background-size: 44px 44px;
  cursor: pointer;
  position: relative;
}

#wtss-dialog-select-site button.wtss-remove 
{
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background-color: var(--red-100);
  color: var(--red-800);
  font-weight: bold;
  border: none;
  border-radius: var(--button-radius);
  padding: var(--button-padding);
  cursor: pointer;
}

#wtss-dialog-select-site button.wtss-remove:hover {
  outline: 1px solid var(--red-600);
}

#wtss-dialog-select-site button.wtss-remove:active {
  outline: 1px solid var(--red-600);
}

#wtss-dialog-select-site ul.wtss-select-site li.wtss-selected {
  border: 2px solid var(--green-500);
  background-image: url('assets/mcc-wastetrack-icon-site-active.png');
}

#wtss-dialog-select-site ul.wtss-select-site li span.wtss-site-fullstreet {
  font-size: 16px;
  text-transform: capitalize;
  color: var(--text);
}
#wtss-dialog-select-site ul.wtss-select-site li.wtss-selected span.wtss-site-fullstreet {
  color: var(--green-500);
}
#wtss-dialog-select-site ul.wtss-select-site li span.wtss-site-fullstreet::after {
  content: "\a";
  white-space: pre;
}
#wtss-dialog-select-site ul.wtss-select-site li span.wtss-site-suburb {
  color: #999;
  font-size: 16px;
  font-weight: normal;
  text-transform: capitalize;
}
#wtss-dialog-select-site .wtss-buttons {
  align-items: baseline;
}
#wtss-dialog-select-site .wtss-submit {
  flex-grow: 2;
}
#wtss-dialog-select-site .wtss-add-address {
  flex-grow: 1;
}

/**
  Site Main
**/
.wtss-section-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--grey-200);
  gap: 16px;
}

.wtss-section-title-bar a {
    font-weight: 13px;
}
.wtss-title-actions {
  width:  165px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.wtss-section-title-bar h1 {
  font-size: 22px;
  margin-top: 0px;
}

.wtss-section-title-bar .wtss-user-section a {
  font-weight: normal;
}
.wtss-section-title-bar .wtss-user-section h2 
{
  color: var(--black);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: right;
}

    @media screen and (max-width: 800px)
    {
      .wtss-section-title-bar
      {
        flex-direction: column;
      }
      .wtss-section-title-bar .wtss-user-section h2 
      {
        text-align: center;
      }
    }



#wtss-dialog-site-main .wtss-component {
  background-color: var(--white);
  border: none;
  box-shadow: 0px 2px 4px rgba(0,0,60,0.12),
              0px 0px 12px rgba(0,0,60,0.12);
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 24px;
  position: relative;
}


#wtss-dialog-site-main .wtss-component button {
  font-size: 16px;
  font-weight: bold;
  padding: var(--button-padding);
  border-radius: var(--button-radius);
  background: var(--button-gradient);
  color: var(--white);
  border: 0px;
  margin-right: 0 !important;
  text-decoration: none;
  cursor: pointer;
}

#wtss-dialog-site-main .wtss-component button:hover
{
  background: black;
}

/* Temporary move content above both services - configuration should fix this in future */

.wtss-component .wtss-services-menu
{
  position: relative;
}

.wtss-entitlement {
  position: absolute;
  top: 18px;
  right: 5px;
  width: 300px;
}

@media screen and (max-width: 600px)
{
  
  #wtss-dialog-site-main .wtss-component .wtss-entitlement
  {
    top: 50px;
    left: 16px;
    right: auto;
  }

  #wtss-dialog-site-main .wtss-component h2
  {
    margin-bottom: 55px !important;
  }
}

/* Temp Finished */



.wtss-inner-container
{
  align-items: center;
  gap: 8px;
}

#wtss-dialog-site-main .wtss-component .wtss-entitlement {
  font-size: 14px;
  color: var(--green-800);
  background-color: transparent;
  border: 0px solid #999;
  padding: 4px 8px 4px 8px;
  border-radius: 4px;
}

#wtss-dialog-site-main .wtss-component button:active {
  background-color: #03B384;
  border: 1px solid #03B384;
}

#wtss-dialog-site-main .wtss-component .wtss-buttons {
  justify-content: flex-end;
}

#wtss-dialog-site-main .wtss-component h2 {
  text-align: left;
  color: var(--black);
  margin: 0px;
  font-size: 20px;
  margin-bottom: 16px;
}

#wtss-dialog-site-main .wtss-none {
  padding: 8px;
  color: var(--text);
}

#wtss-dialog-site-main .wtss-component table {
  border: 0px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px 5px;
}
#wtss-dialog-site-main .wtss-component table thead tr {
  background-color: transparent;
}

#wtss-dialog-site-main .wtss-component table thead th {
  font-size: 16px;
  color: var(--text);
}

#wtss-dialog-site-main .wtss-component table tbody tr {
  background-color: var(--grey-100);
}

#wtss-dialog-site-main .wtss-component table tbody td {
  font-weight: 400;
  color: var(--text);
  font-size: 16px;
  border: 1px solid var(--white);
  line-height: 1.6;
  padding: 8px;
}

@media screen and (max-width: 600px){
  #wtss-dialog-site-main .wtss-component table tbody td
  {
    font-size: 13px !important;
    padding: 4px !important;
  }
}


#wtss-dialog-site-main .wtss-component table tbody td:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#wtss-dialog-site-main .wtss-component table tbody td:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
#wtss-dialog-site-main .wtss-component table tbody td img {
  width: 24px;
  height: 24px;
  display: block;
  margin-left: 5px;
}

#wtss-dialog-site-main .wtss-component.wtss-regular-services table tbody td:first-child {
  width: 32px;
}

#wtss-dialog-site-main .wtss-component.wtss-booked-services table tbody td {
  font-size: 16px;
  font-weight: normal;
  padding: 3px;
}

#wtss-dialog-site-main .wtss-component.wtss-booked-services table tbody td span.wtss-booking-cancelled {
  color: var(--red-500);
}

#wtss-dialog-site-main .wtss-component.wtss-booked-services table tbody td:last-child {
  width: 80px;
}

#wtss-dialog-site-main div.wtss-service-menu div.wtss-ticket-type, #wtss-dialog-site-main div.wtss-service-menu div.wtss-voucher-type 
{
  display: flex;
  margin-top: 8px;
  padding: 8px;
  border-radius: var(--button-radius);
  border: 1px solid var(--green-200);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--green-900);
  font-weight: 400;
  font-size: 16px;
  padding-left: 68px;
  background-size: 46px;
  background-position: 10px 50%; 
  background-repeat: no-repeat; 
}

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

  #wtss-dialog-site-main div.wtss-service-menu div.wtss-ticket-type, #wtss-dialog-site-main div.wtss-service-menu div.wtss-voucher-type,
  .wtss-ticket-type .wtss-inner-container, .wtss-voucher-type .wtss-inner-container
  {
    flex-direction: column !important;
    align-items: flex-start;
    text-align: left !important;
  }

}


/* Bulk Waste Section */

.wtss-voucher-type.wtss-voucher-type-1206.wtss-voucher-type-bulkwaste
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--button-radius);
  padding: 8px;
  padding-left: 68px;
  background-size: 46px;
  background-position: 10px 50%;
  background-repeat: no-repeat;
  background-image: url('assets/mcc-wastetrack-icon-self-haul.png'); 
  background-color: var(--green-50);
}

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

  .wtss-voucher-type.wtss-voucher-type-1206.wtss-voucher-type-bulkwaste
  {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

.wtss-voucher-type-name
{
  font-weight: bold;
}

.wtss-voucher-type-1206 .wtss-voucher-type-bulkwaste .wtss-voucher-type-name,
.wtss-voucher-type-1206 .wtss-voucher-type-bulkwaste .wtss-inner-container
{
  display: inline-flex;
}



/* New Self Haul Content */

select
{
  padding: 8px;
  border-radius: var(--button-radius);
  margin-bottom: 16px;
  min-width: 300px;
  font-size: 16px;
}


/* Maitland Demo */

#wtss-dialog-site-main div.wtss-service-menu div.wtss-ticket-type, #wtss-dialog-site-main div.wtss-service-menu div.wtss-voucher-type
{
    background-image: url('assets/mcc-wastetrack-icon-bulk-waste.png');
    background-color: var(--green-50);
}

#wtss-dialog-site-main div.wtss-service-menu div.wtss-ticket-type button, #wtss-dialog-site-main div.wtss-service-menu div.wtss-voucher-type button 
{
  color: var(--green-500);
}

#wtss-dialog-site-main div.wtss-service-menu div.wtss-ticket-type button, #wtss-dialog-site-main div.wtss-service-menu div.wtss-voucher-type button 
{
  border-radius: var(--button-radius);
  background: var(--button-gradient);
  color: var(--white); 
  border: 0px; 
  text-decoration: none;
  cursor: pointer;
}

#wtss-dialog-site-main div.wtss-service-menu div.wtss-ticket-type button:hover, #wtss-dialog-site-main div.wtss-service-menu div.wtss-voucher-type button:hover
{
  background: var(--button-gradient-hover);
  border: 0px; 
}

#wtss-dialog-site-main div.wtss-service-menu div.wtss-ticket-type-name, #wtss-dialog-site-main div.wtss-service-menu div.wtss-voucher-type-name 
{
  font-weight: bold;
  line-height: 24px;
  text-align: left;
}

/* Job Booking Form --------------------------------*/

#wtss-dialog-book-collection div.wtss-form-container {
  background-color: var(--white);
  border: none;
  border-radius: var(--button-radius);
  padding: 8px;
  margin-bottom: 8px;
  position: relative;
  text-align: left;
}

#wtss-dialog-book-collection div.wtss-form-container h1 {
  text-align: left;
  margin-top: 0px;
}

#wtss-dialog-book-collection div.wtss-form-container h3 {
  margin: 8px 0px 8px 0px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
  text-align: left;
}

#wtss-dialog-book-collection div.wtss-form-container textarea {
  border: 2px solid var(--grey-200);
  border-radius: var(--border-radius);
  width: 100%;
  height: 5em;
}

#wtss-dialog-book-collection .wtss-entitlement {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 13px;
  color: var(--green-500);
  background-color: var(--white);
  border: 1px solid var(--text);
  padding: 5px;
  border-radius: 4px;
}

#wtss-dialog-book-collection ul.wtss-run-selection {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#wtss-dialog-book-collection .wtss-run-selection li 
{
  background-color: var(--white);
  border: 2px solid var(--grey-400);
  border-radius: var(--button-radius);
  padding: 16px;
  padding-left: 60px;
  margin-bottom: 5px;
  text-align: left;
  background-image: url('assets/mcc-wastetrack-icon-calendar.png');
  background-position: 0px -3px; 
  background-repeat: no-repeat; 
  background-size: 50px 50px; 
  cursor: pointer; 
  font-size: 16px; 
  color: var(--text);
  font-weight: bold;
}

#wtss-dialog-book-collection .wtss-run-selection li.wtss-selected {
  color: var(--green-500);
  border: 2px solid var(--green-500);
  background-image: url('assets/mcc-wastetrack-icon-calendar-active.png');
}

#wtss-dialog-book-collection .wtss-run-selection li.wtss-not-available {
  border: 2px solid var(--red-500);
  color: var(--red-500);
}

#wtss-dialog-book-collection .wtss-run-selection li div.wtss-not-available {
  background-color: var(--red-500);
  color: var(--white);
  float: right;
  padding: 4px 20px 4px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  margin-top: -5px;
}

#wtss-dialog-book-collection .wtss-buttons 
{
  justify-content: space-between;
}

#wtss-dialog-book-collection .wtss-buttons button 
{
  background-color: var(--button-gradient);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  padding: 6px 20px 46x 20px;
}

#wtss-dialog-book-collection .wtss-buttons button:hover {
  background-color: var(--button-gradient-hover);
}

#wtss-dialog-book-collection .wtss-buttons .wtss-submit {
  width: 40%;
}

#wtss-dialog-book-collection .wtss-detail {
  background-color: var(--white);
  border: 2px solid #999;
  padding: 8px;
  border-radius: 8px;
  font-weight: bold;
  color: var(--text);
}

#wtss-dialog-book-collection .wtss-buttons .wtss-cancel-booking {
  background-color: var(--red-500);
  border: 2px solid var(--red-500);
}

#wtss-dialog-book-collection .wtss-buttons .wtss-cancel-booking:active, #wtss-dialog-book-collection .wtss-buttons .wtss-cancel-booking:hover {
  background-color: var(--red-500);
}

/** 
 * Booking Confirmation / Updated Screen
 */

#wtss-dialog-booking-detail div.wtss-form-container {
  background-color: var(--white);
  border: none;
  border-radius: var(--button-radius);
  padding: 8px;
  margin-bottom: 8px;
  position: relative;
  text-align: left;
}

#wtss-dialog-booking-detail .wtss-detail {
  background-color: var(--white);
  border: 2px solid var(--grey-400);
  padding: 8px;
  border-radius: 8px;
  font-weight: bold;
  color: var(--text);
}

#wtss-dialog-booking-detail div.wtss-form-container h3 {
  margin: 8px 0px 8px 0px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
  text-align: left;
}

#wtss-dialog-booking-detail div.wtss-form-container h1 {
  margin: 0px;
}

#wtss-dialog-booking-detail div.wtss-booking-number {
  float: right;
  font-weight: bold;
  color: var(--green-500);
}

#wtss-dialog-booking-detail button {
  flex-grow: 1;
}

#wtss-dialog-booking-detail .wtss-booking-cancelled {
  color: var(--red-700);
}


/**
 * Tickets
 */

#wtss-dialog-create-ticket div.wtss-form-container {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0px;
  padding: 0px;
  margin-bottom: 8px;
  position: relative;
  text-align: left;
}

#wtss-dialog-create-ticket div.wtss-form-container h1 {
  margin: 0px; 
}

#wtss-dialog-create-ticket div.wtss-form-container div.wtss-ticket-detail-label {
  font-weight: bold;
  margin: 8px 0px 0px 0px;
  padding-top: 8px;
  color:  var(--text);
}

#wtss-dialog-create-ticket div.wtss-form-container div.wtss-ticket-detail-description {
  color:  var(--text);
  font-style: normal;
  margin: 8px 0px 8px 0px;
}

#wtss-dialog-create-ticket div.wtss-form-container div.wtss-ticket-detail-description p {
  margin: 0px;
  line-height: 1.6;
}

#wtss-dialog-create-ticket div.wtss-form-container div.wtss-ticket-detail-data input[type=text] {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
}

#wtss-dialog-create-ticket ul.wtss-asset-group-selector 
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#wtss-dialog-create-ticket ul.wtss-asset-group-selector li 
{
  border: 2px solid var(--grey-300);
  border-radius: var(--button-radius);
  padding: 16px;
  padding-left: 60px;
  margin-bottom: 16px;
  text-align: left;
  background-position: 5px 8px;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  cursor: pointer;
  background-image: url('assets/mcc-wastetrack-icon-bin.png');
  background-size: 32px;
  background-position: 12px 8px;
  font-weight: bold;
  color: var(--text);
  background-color: var(--white);
  min-width: 325px;
}

#wtss-dialog-create-ticket ul.wtss-asset-group-selector li.wtss-selected 
{
  border: 2px solid var(--blue-500);
  color: var(--blue-800);
  background-image: url('assets/mcc-wastetrack-icon-bin-active.png');
}

#wtss-dialog-create-ticket .wtss-form-container 
{
  background-color: transparent;
  border-radius: 8px;
  padding-bottom:  15px;
}

#wtss-dialog-create-ticket table 
{
  margin: 8px;
}

#wtss-dialog-create-ticket table td 
{
  padding:  4px;
  text-align: left;
  font-size:  16px;
  font-weight: bold;
  color: var(--text);
}

#wtss-dialog-create-ticket table td input 
{
  width: 100%;
}

ul.wtss-asset-selector 
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.wtss-ticket-run-date-selector.wtss-fancy-selector
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  margin-bottom: 16px !important;
}

    @media screen and (max-width: 800px)
    {
      ul.wtss-ticket-run-date-selector.wtss-fancy-selector
      {
        grid-template-columns: 1fr;
      }
    }

ul.wtss-asset-selector li 
{
  position: relative;
  border: 2px solid var(--grey-400);
  border-radius: var(--button-radius);
  padding: 16px;
  padding-left: 60px;
  margin-bottom: 0px;
  text-align: left;
  cursor: pointer;
  font-weight: bold;
  color: var(--text);
  background-color: var(--white);
  min-width: 325px;
}

ul.wtss-asset-selector img {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height:  24px;
}

#wtss-dialog-create-ticket ul.wtss-asset-selector li.wtss-selected {
  border: 2px solid var(--green-500);
  color: var(--blue-800);
}



#wtss-dialog-create-ticket div.wtss-multi-checkboxes label::after {
  content: "\a";
  white-space: pre;
}
#wtss-dialog-create-ticket div.wtss-multi-checkboxes label {
  margin-left: 8px;
}


#wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector li {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--grey-400);
  border-radius: var(--button-radius);
  padding: 16px;
  padding-left: 60px;
  padding-right: 134px;
  margin-bottom: 0px;
  text-align: left;
  background-image: url('assets/mcc-wastetrack-icon-calendar.png');
  background-position: 8px 50%;
  background-repeat: no-repeat;
  background-size: 38px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
  font-weight: bold;
}

.wtss-ticket-run-date-option span
{
  display: flex;
  align-items: center;
  min-height: 44px;
}

#wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector li:hover
{
  border-color: var(--green-500);
}

    #wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector li::after
    {
      position: absolute;
      content: "Select";
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      padding: 8px 16px;
      border-radius: var(--button-radius);
      background: var(--black);
      color: var(--white);
    }

    /* Change opacity of button */
    #wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector li.wtss-not-available::after
    {
      content: "Unavailable";
      opacity: 0.6;
      cursor: not-allowed;
    }

    #wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector li.wtss-selected
    {
      background: url('assets/mcc-wastetrack-icon-calendar-active.png'), var(--green-50);
      background-position: 8px 50%;
      background-repeat: no-repeat;
      background-size: 38px;
    }

    #wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector li.wtss-selected::after
    {
      content: "Selected \2713";
    }


#wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector li.wtss-selected {
  border: 2px solid var(--green-500);
  color: var(--green-800);
}
#wtss-dialog-create-ticket ul.wtss-ticket-run-date-selector li.wtss-not-available {
  border: 2px solid var(--red-500);
  color: var(--red-800);
}

#wtss-dialog-create-ticket button.wtss-more 
{
  margin-bottom: 8px;
  border: 1px solid var(--blue-500);
  background-color: var(--white);
  color: var(--text);
  border-radius: var(--button-radius);
  padding: var(--button-padding);
  cursor: pointer;
  font-weight: bold;
  display: none;
}

#wtss-dialog-create-ticket button.wtss-more:hover
{
  outline: 2px solid var(--blue-500);
  outline-offset: -2px;
}

/*** Standalone Service Locator */

div.wtss-service-locator {
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.wtss-service-locator input.wtss-service-locator-search-field {
  font-size: 36px;
  border-radius: 8px;
  border: 2px solid var(--green-500);
  width: 100%;
  text-align: center;
}

div.wtss-service-locator div.wtss-instructions {
  color: var(--text);
  padding-top: 8px;
  padding-bottom: 20px;
}

div.wtss-service-locator div.wtss-instructions::after {
  content: 'View the collection dates for your property by searching for your property\'s address below.'
}

div.wtss-service-locator h1 {
  color: var(--black);
  margin: 5px 0px 5px 0px;
  font-size: 32px;
}

div.wtss-service-locator ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 500px;
  display: inline-block;
  margin-top: 5px
}

div.wtss-service-locator ul li {
  border: 2px solid var(--text);
  font-weight: bold;
  margin-bottom: 5px;
  padding: 7px;
  border-radius: var(--button-radius);
  cursor: pointer;
}

div.wtss-service-locator ul li.wtss-selected {
  background-color: var(--green-500);
  color: var(--white);
  border: 2px solid var(--green-500);
}

div.wtss-service-locator ul li label {
  cursor: pointer;
}

div.wtss-search-again {
  display: inline-block;
  background-color: var(--black);
  color: var(--white);
  padding: 5px;
  border-radius: var(--button-radius);
  margin-top: 20px;
}

div.wtss-service-locator ul li span.hl {
  color: var(--blue-800);
}

div.wtss-service-locator ul li.wtss-selected span.hl {
  color: var(--blue-500);
}

div.wtss-service-locator table {
  margin-top: 15px;
  background-color: #fcfcfc;
  min-width: 768px;
  margin-bottom: 30px;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,60,0.33);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,60,0.33);
  box-shadow: 0px 0px 2px 0px rgba(0,0,60,0.33);
}

div.wtss-service-locator table td {
  padding: 0px 8px 0px 8px;
  font-weight: bold;
  color: var(--text);
  text-align: center;
  line-height: 40px;
  border-bottom: 1px solid var(--grey-100);
}

div.wtss-service-locator table th {
  border-bottom: 1px solid var(--blue-500);
  background-color: var(--grey-100);
  color: var(--blue-800);
}

div.wtss-service-locator table img {
  width: 24px;
  height: 24px;
  display: block;
  margin-top: 2px;
}

/* Errors */
div.wtss-errors {
  border: 2px solid #4A1013;
  border-radius: 8px;
  color: #4A1013;
  padding: 10px;
  font-weight: bold;
}

/* No Avilable runs - bulky waste */
div.wtss-no-available-runs {
  color:#4A1013;
  background-color: #FFF;
  padding: 16px;
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #4A1013;
  border-radius: 10px;
}


/* Change the content of 'no address found' */
#wtss-site-search-empty span {
  display: none;
}

#wtss-site-search-empty:after {
  content: 'No address could be found. Please contact customer service on 4934 9700.'
}

/*-- Validation styles --*/
.wtss-form-validation-problem {
  border: 2px solid red;
}

input[type=submit]:disabled,input[type=submit].wtss-disabled {
  background-color: #777;
  border: 1px solid #777;
}

/*-- No vouchers remaining --*/
div#wtss-dialog-create-voucher div.wtss-no-claims-remaining span {
  display: none;
}

div#wtss-dialog-create-voucher div.wtss-no-claims-remaining::after {
  content: "You have no bulky waste services remaining for the financial year";
}


/*
Final overrides
*/

.wtss-entitlement.all-gone {
  color: var(--red-700) !important;
}

/* 
Voucher Number
*/
.wtss-voucher-number {  
  font-size: 24px;
  font-weight: bold;
}

/*
  Error Message
*/
.errorMessage {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 25%;
  border: 2px solid red;
  font-weight: bold;
  width: 50%;
  background-color: rgba(240, 0, 0, 0.5);
}

@media screen and (max-width: 800px)
{  
  .errorMessage {
    margin-left: 0;
    width: 100%;
  }
}