/* CSS Document For Cookie Management Tool - Worthi.org */
/*Typography*/
.cmt {
  font-family: 'Karla', Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-color: #fff;
  padding: 15px;
  max-height: 100vh; /*enables us to add vertical scrollbar*/
  overflow-y: scroll;/*adds vertical scrollbar */
  overflow-x: hidden;/*hides horizontal scrollbar */ }

.cmt h2, .cmt h3 {
  color: #009aa6;
  text-align: left;
  font-weight: bold;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.cmt h2{
  margin-top: 1ch;
  font-size: 30px;
}

.cmt h3{
  font-size: 24px;
}

.cmt p a:link, .cmt p a:visited {
  color: #f8b133;
  text-decoration: underline; }

.cmt p a:hover {
  color: #009aa6;
  text-decoration: underline; }

.cmt-dark {
  color: #f8b133; }

.cmt-light {
  color: #009aa6; }

.inverse-text {
  color: #fff; }

.inverse-link,
.inverse-link:hover,
.inverse-link:focus,
.inverse-link:active,
.inverse-link.active {
  color: #fff;
  text-decoration: underline; }

/*Cookie Alert*/
.cmt-obg {
  background-color: rgba(0, 154, 166, 0.8); /* opacque bg of cookie alert msg */ 
}

.top-pad {
  padding-top: 20px; }

/* Cookie button positioning - keeps buttons on desktop and tablet inline and stacks buttons on mobile */

@media (min-width: 1180px) and (max-width: 1389px) {/*Keeps the buttons from splitting on two lines*/
  .btn-cmt ul {
    width: 1100px; } }

@media (max-width: 785px) {/* was 991*/
  .btn-cmt li {
    display: block;
    list-style: none;
    padding: 5px 0px; }
  .btn-cmt ul {
    padding: 0px; } }

@media (min-width: 430px) {/* was 992 */
  .btn-cmt li {
    display: inline-block;
    padding-right: 6px;
    padding-left: 6px;
    list-style: none; }
  .btn-cmt ul {
    padding: 0px; } }

/*Buttons - Customise colours to fit brand*/
.btn-cmt-dark {
  background-color: #f8b133;
  border: solid 1px #f8b133;
  color: #fff; }

.btn-cmt-dark:hover {
  background-color: #f8b133;
  border: solid 1px #f8b133;
  color: #fff;
  -webkit-animation: bg-dark-animate 1s 1;
  animation: bg-dark-animate 1s 1; }

.btn-cmt-dark-inverse {
  background-color: transparent;
  border: solid 1px #f8cf86;
  color: #f8cf86; }

.btn-cmt-dark-inverse:hover {
  background-color: #fff;
  border: solid 1px #f8cf86;
  color: #f8b133;
  -webkit-animation: bg-inverse-animate 1s 1;
  animation: bg-inverse-animate 1s 1; }


/* Use btn-cmt-inverse on 'No customise settings'*/
.btn-cmt-inverse {
  background-color: transparent;
  border: solid 1px #f8cf86;
  color: #fff; }

.btn-cmt-inverse:hover {
  background-color: #fff;
  border: solid 1px #f8cf86;
  color: #f8cf86;
  -webkit-animation: bg-inverse-animate 1s 1;
  animation: bg-inverse-animate 1s 1; }


/*Animations - used for background of buttons on hover*/
@-webkit-keyframes bg-dark-animate {
  0% {
    background-color: rgba(248, 177, 51, 0.2); }
  100% {
    background-color: #f8b133; } }

@keyframes bg-dark-animate {
  0% {
    background-color: rgba(248, 177, 51, 0.2); }
  100% {
    background-color: #f8b133; } }

@-webkit-keyframes bg-inverse-animate {
  0% {
    background-color: rgba(255, 255, 255, 0.2); }
  100% {
    background-color: white; } }

@keyframes bg-inverse-animate {
  0% {
    background-color: rgba(255, 255, 255, 0.2); }
  100% {
    background-color: white; } }

/*Cookie Preference Centre*/
.cmt hr {
  border: 1px dotted #ccc;
  height: 0;
}

.cmt-checkbox-list ul {
  padding: 0; }

.cmt-checkbox-list li {
  /* font-family: 'roboto-reg', Arial, Helvetica, sans-serif;   */
  list-style: none; }

.cmt-label-title {
  font-size: 18px;
  color: #f8b133;/*label title text colour*/
  font-weight: bold; }

.cmt-info {
  padding: 8px 15px 15px; 
  font-family: 'Karla', Arial, Helvetica, sans-serif;
}

@media (max-width: 786px) {
  .cmt-info {
    padding: 8px 0px 15px 8px;
    margin-left: -56px; } }

.cmt-label {
  line-height: 1.25;
  color: #f8b133; /*label text colour*/
  display: block;
  margin-bottom: 5px; }

.cmt-checkboxes-item {
  line-height: 1.25;
  display: block;
  position: relative;
  min-height: 40px;
  margin-bottom: 10px;
  padding-left: 40px;
  clear: left; }

.cmt-checkboxes-input {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0; }

.cmt-checkboxes-label {
  display: inline-block;
  margin-bottom: 0;
  padding: 8px 15px 5px;
  cursor: pointer;
  touch-action: manipulation; }

.cmt-checkboxes-label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid #f8b133; /*Applies checkbox border colour*/
  border-radius: 5px;
  background: transparent; }

.cmt-checkboxes-label::after {/*top,left, width and height creates tick*/
  content: "";
  position: absolute;
  top: 12px;/*was 11*/
  left: 10px;/*was 9*/
  width: 22px;/*was 18*/
  height: 10px;/*was 7*/
  transform: rotate(-45deg);
  border: solid;
  border-width: 0 0 5px 5px;
  border-top-color: transparent;
  opacity: 0;
  background: transparent;
  color: #f8b133; /*Applies colour to tick*/ }

.cmt-checkboxes-input:focus + .cmt-checkboxes-label::before {
  border-width: 3px;
  box-shadow: 0 0 0 3px #009aa6; }

/*Applies colour on focus of checkbox*/
.cmt-checkboxes-input:checked + .cmt-checkboxes-label::after {
  opacity: 1; }

.cmt-checkboxes-input:disabled,
.cmt-checkboxes-input:disabled + .cmt-checkboxes-label {
  cursor: default;
  color: #f8b133; }

.cmt-checkboxes-input:disabled + .cmt-checkboxes-label {
  opacity: .5; }

/*CMT Collapsible Cookie Categories */
.cmt-collapsible {
  background-color: #fff;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0px 0px;
  text-align: left;
  outline: none;
  font-size: 16px; }

.cmt-collapsible:active, .cmt-collapsible:hover {
  background-color: #fff; }

.cookie-content {
  padding: 0 5px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border: 1px solid #ccc;
  border-radius: 0px 0px 4px 4px;
  font-family: 'Karla', Arial, Helvetica, sans-serif;
  margin-top: -2px;/*prevents double line under show cookies details panel*/ }

/*Cookie Table Styling*/
.table-cookie {
  border: 1px solid #ccc !important;
  margin-bottom: 10px; }

.table-cookie th {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #f8b133;
  border-right: 1px solid #ccc; }

.table-cookie tr {
  border-bottom: 1px dotted #009aa6;
  border-collapse: collapse; }

.table-cookie td {
  text-align: left !important;
  vertical-align: top !important;
  border-right: 1px solid #ccc !important;/*Do not remove !important - needed to overwrite tablesaw css*/
  word-wrap: break-word; }

.table-cookie .col-word-break {/* Applies for column 4 'Cookie Name'  */
  word-break: break-all; }

.source-bg {
  background-color: #ebebeb; }/*Apply on source rows only */

.tablesaw-divider-cmt-light {
  border-bottom: 1px solid #009aa6 !important; }/* Divider line for rows within a large table - use for mulitiple sources in table apply on last <tr> of source */

.cookie-content .tablesaw-bar {/*sets the height of the bar which contains the minimap*/
  height: 40px; }

@media screen and (max-width: 563px) {
  .cookie-content .tablesaw-bar {
    height: 40px;
    padding-right: 10px; } }

@media screen and (max-width: 406px) {
  .cookie-content .tablesaw-bar {
    height: 40px;
    padding-right: 10px; } }

/* Close icon */
.cmt .close {
  font-size: 40px;
  font-weight: normal;
  line-height: 1;
  color: #009aa6;/*Applies light colour to cross */
  text-shadow: 0 1px 0 #fff;
  border: 1px solid #009aa6;/*Applies light colour to circle */
  border-radius: 40px;
  width: 40px;
  opacity: 1; }

.cmt .close:hover, .cmt .close:focus {
  color: #f8b133;/*Applies dark colour to cross */
  cursor: pointer;
  border: 1px solid #f8b133;/*Applies dark colour to circle */ }

#cmt-wrapper-centre-close{
    height:40px;
    float: right;
    margin-top: 0.5ch;
}

#cmt-wrapper-centre-close span{
display:block;
margin-top:0px !important; /*Positions X vertically in the centre of icon - must be 0px if there is no displacement*/
}

/* Cookie Settings Access*/
.cmt-access {
  display: table;
  bottom: 0px;
  left: 0px;
  position: fixed;
  z-index: 998;
  cursor: pointer; }

.cmt-settings {
  width: 65px;
  height: 65px;
  background-color: #009aa6;
  border-radius: 0px 60px 0px 0px;
  display: table-cell;
  vertical-align: bottom;
  padding: 0px 3px 3px 3px; /*btm was 7px changed to 3px due to font*/
  font-size: 15px;
  /* font-family: 'roboto-reg', Arial, Helvetica, sans-serif;   */
  color: #fff;
  opacity: 0.8; }

/* Needed in cmt.js for animations */
#cmt-wrapper-banner {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0; }

#cmt-wrapper-banner.hidden 
{
    display: none;
}

#cmt-wrapper-centre {
  position: fixed;
  z-index: 99999;
  top: 0;
  width: 100%;
  transition: margin-left 0.4s ease;
  background: #fff;
  border-right: 1px solid #ccc;
  height: 100vh; }

#cmt-wrapper-centre.cmt-centre-hidden {
  margin-left: -100%; }

@media screen and (min-width: 992px) {
  #cmt-wrapper-centre {
    width: 60%; }
  #cmt-wrapper-centre.cmt-centre-hidden {
    margin-left: -60%; } }

/* 
  Plus - Minus Icons, code from https://codepen.io/El11/pen/gXxxYz?editors=0100 
  added a prefix cmt- to make sure we have a unique css class
  */

.cmt-plus-minus-toggle {
  cursor: pointer;
  height: 21px;
  position: relative;
  width: 21px;
  float: right;
  top: 8px; }

.cmt-plus-minus-toggle:before,
.cmt-plus-minus-toggle:after {
  background: #f8b133;
  content: '';
  height: 4px;
  left: 0;
  position: absolute;
  top: 0;
  width: 12px;
  transition: transform 500ms ease; }

.cmt-plus-minus-toggle:after {
  transform-origin: center; }

.cmt-plus-minus-toggle.cmt-plus-minus-collapsed:after {
  transform: rotate(90deg); }

.cmt-plus-minus-toggle.cmt-plus-minus-collapsed:before {
  transform: rotate(180deg); }