@charset "UTF-8";
/* Discover Blairgowrie Dec 2019 

Thunder -   #505160     rgba(80,81,96,1)
Raspberry -	#C60035		rgba(139,10,80,1)
Red -       #d13525     rgba(209,53,37,1)
Yellow      #FACD68     rgba(250,205,104,1)
Waterfall - #68829e     rgba(104,130,158,1)
New grass - #86ac41     rgba(134,72,165,1)
Reflection  #34675c     rgba(52,103,92,1)
Mist        #7da3a1     rgba(125,163,161,1)

*/

body, p {font-size:20px;}

a {color: #C60035;}
a:hover, a:focus {color:#505160;}
a.button:hover, a.button:focus {color:#fff;}

.event-card .text-holder h2 a:hover {color:#505160;}
.text-holder .img-holder {float:right;max-width:180px;max-height:150px;overflow:hidden;padding-left:10px}
.text-holder .prizeimg-holder {max-width:300px;max-height:400px;overflow:hidden}

.imgcap {text-align:center;font-size:18px;color:#C60035;}

.mb-50 {margin-bottom: 50px;}
.ml-50 {margin-left: 50px;}
.mb-20 {margin-bottom: 20px;}
.mb-5 {margin-bottom: 5px;}
.mb-0 {margin-bottom:0px;}
.mt-20 {margin-top:20px;}
.mt--20 {margin-top:-20px;}
.mt-50 {margin-top:50px;}
.mt--30 {margin-top:-30px;}
.mt-0 {margin-top:-10px;}
.p-20 {padding: 20px;}
.pr-10 {padding-right: 20px;}
.right {float:right;}

.bggreen {background-color: #86ac41; color:#ffffff;}
.bgcream {background-color: #FFFFBF;}
.bgorange {background-color: #FACD68; color:#f00;}
.bgorange a, .bgyellow a {text-decoration: underline;}
.bgyellow {background-color:#FBEA05 ; color:#f00;}
.bgred {background-color: #d13525; color:#ffffff;}

.amber {color:#FACD68;font-weight:bold;}
.darkblue {color:#0F204E !important;}
.yeseva {font-family: "Yeseva One", system-ui;}
.darkblue a:link {color:white ;}

.bold {font-weight: bold;}

.radio {display: block; font-size: 16px;}

.progbar {text-align:right;margin-bottom:0;}

table.data td, table.data th {text-align: center;}

.flat {margin: 0 !important;}
.flat hr {margin: 0 0 15px 0;}

.cms_cart_widget {padding: 0;margin: 0 10px 0 0;align-content: center;}
.login-bar .grid-x p.login-cart {margin-left: 20px;}

.product_price input, [type=number] {width: 50%; display: inline;}

#main .full-list .product_price, p.full-list, span.full-list {margin-top: 5px;}

#main .full-list .system_button {margin: 0;}
.full-list .product_price input, [type=number] {width: 25%;}

form.bg {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.form label {color: #777;font-weight: bold;}

[type=radio] {height: 10px;}
input.text {border:none;background:none;height:35px;color:#d13525;font-weight:bold;text-decoration:underline;}

.fullwidth li {width:100%;}
.bgrey li {background:#ddd;}

@media print,screen and (max-width:1024px){
	body {font-size: 14px;}
}

/****** Toilet Donation *******/

.donation {
    width:calc(25%) !important;
}

@media print,screen and (max-width:600px){
    .donation {
    width:calc(100%) !important;
    }   
}
.toiletb {
    background-color:#323850;
    color:#F26F77;
    padding:0;
}

.toiletb h1  {
    color:#F26F77;
    font-size:120px;
}

.bar {
    margin-top:-50px;
    font-size: 40px;
}

.pt {
    margin-top:-40px;
    font-size: 52px;
}

.soon {
    margin-top:-35px;
    font-size: 36px;
    font-family: "Caveat", cursive;
}

.help {
    color: white;
    font-weight: bold;
}

.spon {
    margin-top:35px;
    font-size: 16px;
}

.spons {
    color: white;
    font-weight: bold;
    font-size:20px;
    text-transform:capitalize;
    margin-bottom:0;
}

.toiletp {
    background-color:#F26F77;
    color:#1B2250;
}

.dblue {
    color:#1B2250;
}

.don {
    margin-top:-15px;
    font-size: 52px;
}

.now {
    margin-top:-60px;
    font-size: 50px;
    font-weight:bold;
    font-family: "Caveat", cursive;
}

.prog {
    margin:40px 0px 0px 0px;
    font-size: 14px;
    color:white;
}

.total {
    float:right;
    color:#1B2250;
    font-weight:bold;
    font-size:16px;
    margin-bottom:0;
}

.thank {
    margin-top:-30px;
    font-size: 30px;
    font-weight:bold;
    font-family: "Caveat", cursive;
}

.toiletphoto {
  background-image: url("/images/projects/public-toilets/toilets.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 646px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.toiletdot {
    background-image: url("/images/projects/public-toilets/dots80.fw.png");
    margin-top:323px;
    height: 323px;
}

.toiletpt {
    background-color: rgba(242, 111, 119, 0.9);
    margin-top:323px;
    height: 323px;
    color: white;
    text-align:left;
}

@media print,screen and (max-width:1200px){
    .toiletpt {
        margin-top:261px;
        height: 384px;
    }
    .toiletdot {
        margin-top:261px;
        height: 384px;
    }
}

@media print,screen and (max-width:1024px){
    .toiletpt {
        margin-top:323px;
        height: 323px;
    }
}

@media print,screen and (max-width:600px){
    .toiletpt {
        margin-top:223px;
        height: 423px;
    }
}
    
.toiletpt p {
    font-size:16px;
    line-height:1.3;
}

.toiletpt p.ta {
    font-weight:bold;
    color:#1B2250;
    font-size:20px;
    margin-bottom:5px;
}

.phase {
    background-color: white;
    color:#1B2250;
    padding:40px;
}

.next {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size:52px;
  color:#F26F77;
}

.phase img {
    padding:120px 0;
}

@media print,screen and (max-width:1024px){
    .phase img {
        padding:20px 0;
    }
}

.comm {
    font-size:32px;
}

.toiletfoot {
    padding:40px 0;
}

.inria {
  font-family: "Inria Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.monts {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.monts-bold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.monts-exbold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.caveat {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:36px;
}

/****** Walkathon - Stripey Divs *******/

.light {background-color:#7da3a1;border-right:1px solid #333;}
.dark {background-color:#505160;border-right:1px solid #333;}
.light h4, .dark h4 {padding:10px 0;margin:0;color:#fff}
.light h4 a, .dark h4 a {color:#FACD68;}



/****** Projects *******/

.page-intro {text-align: center;}
.big p {font-size: 20px;}
.big p.cap {font-size: 16px;}
.big .accordion-title {font-size: 16px;}

.proj {width: 20%;}
.proj:last-child {width: 20%;}

@media print,screen and (max-width:768px){
    .proj {width: 33%;}
	.proj:nth-child(3n - 1) {width: 34%;}
	.proj:last-child {width: 34%;}
	body, p {font-size:16px;}
	h2, .h2 {Line-height: 1.1;font-size:25px !important;}
}

.card-divider:hover, .card-divider:focus {background:#FACD68;}
.card-divider h5, .card-divider h5 a {margin: 0 auto;color:#ffffff;}
.card-divider h5:hover, .card-divider h5:focus {color:#C60035;}
.card-section h5 {margin-top:10px;}

.big .accordion-title {background-color: #FACD68;}

.filter {
  margin: 30px 0 10px;
}

.filter a {
  display: inline-block;
  padding: 10px;
  border: 2px solid #333;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.tabs-content .tabs-panel {color:#333;}


/****** CAP *******/

.big .accordion-title:hover, .big a.accordion-title:focus {background:#C60035;color:#fff;}


/****** JOBS *******/

.jobs p {color:#333;}
.white {color:#fff;}


/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.filter a.active:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #333 transparent transparent transparent;
}

.is-animated {
  animation: .6s rotate-right;
}


/* CUSTOM DATATABLE */
div#listDrivers_wrapper > .dataTables_info, div#listRoutes_wrapper > .dataTables_info {
    font-size: 15px !important;
    color: #C60035 !important;
}

div#listDrivers_wrapper > .dataTables_paginate  .paginate_button,
div#listDrivers_wrapper > .dataTables_paginate  .paginate_button.current, 
div#listDrivers_wrapper >  .dataTables_paginate  .paginate_button.disabled {
  font-size: 15px !important;
  color: #C60035 !important;
}

div#listRoutes_wrapper > .dataTables_paginate  .paginate_button,
div#listRoutes_wrapper > .dataTables_paginate  .paginate_button.current, 
div#listRoutes_wrapper >  .dataTables_paginate  .paginate_button.disabled {
  font-size: 15px !important;
  color: #C60035 !important;
}


/* .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #FFFFFF !important;
    background-color: #C60035!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C60035), color-stop(100%, #C60035))!important;
    background: -webkit-linear-gradient(top, #C60035 0%, #C60035 100%)!important;
    background: -moz-linear-gradient(top, #C60035 0%, #C60035 100%)!important;
    background: -ms-linear-gradient(top, #C60035 0%, #C60035 100%)!important;
    background: -o-linear-gradient(top, #C60035 0%, #C60035 100%)!important;
    background: linear-gradient(to bottom, #C60035 0%, #C60035 100%)!important;
} */

.outline-none {
    outline: none !important;
}

div#listDrivers_wrapper > .dataTables_filter, div#listRoutes_wrapper > .dataTables_filter {
    float: left !important;
    text-align: left !important;
    display: inline-block !important;
}

label {
    display: block !important;
    float: left !important;
    width: 100% !important;
}


/* radio buttons */
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
    font-size: 16px;
    font-weight: 500;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #C60035;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.radio-container {
    display: flex;
    justify-content: left;
    align-content: flex-end;
    align-items: flex-end;
    flex-direction: row;
    padding-right: 10px;
    margin-bottom: 20px;
}

label {
    font-weight: 600;
}

.fw-500 {
    font-weight: 500;
}

.close-button {
    outline: none !important;
}

.hr-modal {
    background-color: #C60035; height: 1px; border: 0;
}

/* Alert container */
.alert {
  padding: 10px 15px;
  border: 1px solid #c3e6cb; /* Border color for success */
  border-radius: 4px;
  margin-bottom: 20px;
  align-items: center;
  position: relative;
  font-size: 1rem;
}

/* Success alert background color and text color */
.alert.alert-success {
  display: none;
  background-color: #d4edda; /* Background color for success */
  color: #155724; /* Text color for success */
  opacity: 0;
  transition: opacity 0.5s; /* CSS transition for fading effect */
}

/* Icon style */
.alert i {
  font-size: 1rem; /* Adjust the icon size as needed */
}

/* Close button style */
.alert .btn-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

#cancel-btn:hover {
    background-color: #838080 !important; /* Change this to your desired hover color */
    color: #000000 !important; /* Change this to the text color for hover state */
}