/* Unopened CSS Modal */
.spark_modal {
    display: flex;
    position: fixed;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: top 0s .5s, opacity .5s 0s;
    transition: top 0s .5s, opacity .5s 0s;
    z-index: 999;
}

/* Opened CSS Modal */
.spark_modal.active {
    top: 0;
    opacity: 1;
    -webkit-transition: none;
    transition: none;
}

.spark_modal_content {
    width: 95%;
    max-width: 800px;
    max-height: 90vh;
    position: relative;
    padding: 1.5em;
    opacity: 0;
    background-color: white;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    z-index: 1001;
}

/* CSS Modal content when opened */
.spark_modal.active .spark_modal_content {
    opacity: 1;
}

/* style for small x link inside dialog modal */
.spark_modal .spark_modal_close {
    text-decoration: none;
    position: absolute;
    font-size: 20px;
    cursor: pointer;
    right: -1rem;
    top: -1rem;
    background-color: #DC2366;
    color: white;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    line-height: 1.75;
    text-align: center;
}

/* veil that covers page when CSS Modal is open */
.spark_modal .veil {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,.7);
    content: "";
    cursor: pointer;
    visibility: hidden;
    -webkit-transition: all .5s;
    transition: all .5s;
    z-index: 1000;
}

/* veil style when CSS Modal is open */
.spark_modal.active .veil {
    visibility: visible;
}

/* animate veil "x"  when CSS Modal is open */
.spark_modal.active .veil::before, .spark_modal.active .veil::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.spark_modal.active .veil::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

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

.spark-bucket-list-cats-wrapper {width: 100%; position: relative; overflow: hidden; border: 1px solid #CCC; margin-bottom: 1rem;}
.spark-bucket-list-cats-wrapper h3 {text-align: center;}
.spark-bucket-list-cats-wrapper ul {list-style: none; margin: 0; padding: 0;}
.spark-bucket-list-cats {position: relative;}
.spark-bucket-list-cats ul li {width: 44%; margin: 3%; float: left; cursor: pointer;}
.spark-bucket-list-cats ul li img {transition: 0.3s ease-in-out;}
.spark-bucket-list-cats ul li:hover img {border-radius: 50%;}
.spark-bucket-list-suggestions-wrapper {position: absolute; top: 0; left: 100%; width: 100%;}
.spark-bucket-list-suggestions-wrapper div.spark-bucket-list-suggestions {display: none;}
.spark-bucket-list-suggestions-wrapper li {cursor: pointer; padding: 0.5rem 1rem; text-align: center; text-decoration: underline;}
.spark-bucket-list-suggestions-wrapper p.spark-bucket-list-back {cursor: pointer;}
.spark-bucket-list {counter-reset: bucket-list;}
.spark-bucket-list-header input {width: 100%; border-radius: 0;}
.spark-bucket-list ol {margin: 0; padding: 0;}
.spark-bucket-list li {display: flex; margin-left: 3rem; border: 1px solid #ccc; border-left: none; position: relative;}
.spark-bucket-list li::before {counter-increment: bucket-list; content: counter(bucket-list) "."; position: absolute; left: -3rem; width: 3rem; height: calc(2.5rem + 2px); border: 1px solid #ccc; border-right: 0; top: -1px; text-align: center; line-height: 2.5rem;}
.spark-bucket-list li input, .spark-bucket-list li input:focus {flex-grow: 1; margin: 0; border: none; border-radius: 0; box-shadow: none; height: 2.5rem; padding: 0.5rem;}
.spark-bucket-list li span {display: inline-block; padding: 0 0.5rem; line-height: 2.5rem;}
.spark-bucket-list li span.sort-handle {cursor: move;}
.spark-bucket-list li span.remove {cursor: pointer;}
.spark-bucket-list li:first-of-type:last-of-type span {display: none;}
.spark-bucket-list p.spark-bucket-list-add-item {font-size: 2rem; text-align: center; cursor: pointer;}
.spark-bucket-list-outer-wrapper .button {width: 100%;}

.spark-bucket-list-preview {text-align: center; padding: 0.5rem; max-height: calc(88vh - 28rem); overflow: hidden;}
.spark-bucket-list-social-share {text-align: center;}
.spark-bucket-list-social-icons {padding: 0.75rem; font-size: 2.5rem; display: flex; margin-bottom: 1rem;}
.spark-bucket-list-social-icons > * {flex-grow: 1;}
.spark-bucket-list-email p {font-weight: bold; text-align: center;}
.spark-bucket-list-email input[type=email] {width: 100%;}

.autocomplete-suggestions {border: 1px solid #CCC; background: #FFF; overflow: auto;}
.autocomplete-suggestion {padding: 0.25rem 0.5rem; white-space: nowrap; overflow: hidden;}
.autocomplete-selected {background: #F0F0F0;}
.autocomplete-group {padding: 2px 5px;}
.autocomplete-group strong {display: block; border-bottom: 1px solid #000;}

@media only screen and (min-width: 640px) {
    .spark-bucket-list-cats-wrapper {width: 350px; float: left;}
    .spark-bucket-list-cats ul li {width: 154px; margin: 10px; float: left;}
    .spark-bucket-list-cats ul li:nth-of-type(2n+1) {clear: left;}
    .spark-bucket-list-wrapper {width: calc(100% - 400px); float: right;}
    .spark-bucket-list-outer-wrapper .button {width: auto;}
    .spark-bucket-list-preview {float: left; width: 30%; max-height: 100%;}
    .spark-bucket-list-social-share, .spark-bucket-list-email {float: right; width: 65%;}
}

@media only screen and (min-width: 1024px) {
    .spark-bucket-list-cats-wrapper {width: 600px;}
    .spark-bucket-list-cats ul li {width: 169px; margin: 15px;}
    .spark-bucket-list-cats ul li:nth-of-type(2n+1) {clear: none;}
    .spark-bucket-list-cats ul li:nth-of-type(3n+1) {clear: left;}
    .spark-bucket-list-wrapper {width: calc(100% - 650px);}
}

/* NBCF-specific styles */
@font-face{font-family:'ModernEraRegular';src:url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.svg#ModernEra-Regular') format('svg');font-style:normal;font-weight:normal;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraRegular';src:url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.svg#ModernEra-ExtraBold') format('svg');font-style:bold;font-weight:bold;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraRegular';src:url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.svg#ModernEra-Bold') format('svg');font-weight:bold;font-style:normal;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraBold';src:url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.svg#ModernEra-ExtraBold') format('svg');font-style:normal;font-weight:bold;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraExtraBold';src:url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era ExtraBold WEB/ModernEra-ExtraBold.svg#ModernEra-ExtraBold') format('svg');font-style:normal;font-weight:bold;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraLight';src:url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Regular WEB/ModernEra-Regular.svg#ModernEra-Light') format('svg');font-style:normal;font-weight:normal;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraLight';src:url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Bold WEB/ModernEra-Bold.svg#ModernEra-Light') format('svg');font-style:normal;font-weight:bold;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraLight';src:url('https://nbcf.org.au/assets/fonts/Modern Era Italic WEB/ModernEra-Italic.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Italic WEB/ModernEra-Italic.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Italic WEB/ModernEra-Italic.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Italic WEB/ModernEra-Italic.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Italic WEB/ModernEra-Italic.svg#ModernEra-Light') format('svg');font-style:italic;font-weight:normal;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraMedium';src:url('https://nbcf.org.au/assets/fonts/Modern Era Medium WEB/ModernEra-Medium.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Medium WEB/ModernEra-Medium.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Medium WEB/ModernEra-Medium.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Medium WEB/ModernEra-Medium.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Medium WEB/ModernEra-Medium.svg#ModernEra-Medium') format('svg');font-style:normal;font-weight:normal;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraRegular';src:url('https://nbcf.org.au/assets/fonts/Modern Era Medium Italic WEB/ModernEra-MediumItalic.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Medium Italic WEB/ModernEra-MediumItalic.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Medium Italic WEB/ModernEra-MediumItalic.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Medium Italic WEB/ModernEra-MediumItalic.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Medium Italic WEB/ModernEra-MediumItalic.svg#ModernEra-MediumItalic') format('svg');font-style:italic;font-weight:normal;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraMonoBold';src:url('https://nbcf.org.au/assets/fonts/Modern Era Mono Bold WEB/ModernEraMono-Bold.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Mono Bold WEB/ModernEraMono-Bold.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Mono Bold WEB/ModernEraMono-Bold.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Mono Bold WEB/ModernEraMono-Bold.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Mono Bold WEB/ModernEraMono-Bold.svg#ModernEraMono-Bold') format('svg');font-style:normal;font-weight:bold;text-rendering:optimizeLegibility}
@font-face{font-family:'ModernEraMonoExtraBold';src:url('https://nbcf.org.au/assets/fonts/Modern Era Mono ExtraBold WEB/ModernEraMono-ExtraBold.eot');src:url('https://nbcf.org.au/assets/fonts/Modern Era Mono ExtraBold WEB/ModernEraMono-ExtraBold.eot?#iefix') format('embedded-opentype'),url('https://nbcf.org.au/assets/fonts/Modern Era Mono ExtraBold WEB/ModernEraMono-ExtraBold.woff') format('woff'),url('https://nbcf.org.au/assets/fonts/Modern Era Mono ExtraBold WEB/ModernEraMono-ExtraBold.ttf') format('truetype'),url('https://nbcf.org.au/assets/fonts/Modern Era Mono ExtraBold WEB/ModernEraMono-ExtraBold.svg#ModernEraMono-ExtraBold') format('svg');font-style:normal;font-weight:bold;text-rendering:optimizeLegibility}

.spark-bucket-list-cats-wrapper {border-radius: 3px;}
.spark-bucket-list-cats-wrapper h3 {color: #1B3556;}
.spark-bucket-list-suggestions-wrapper li {color: #1B3556; font-weight: bold;}
.spark-bucket-list-header-wrapper {background-color: #DE1C65; padding: 1.5rem 1.5rem 2.5rem; margin-bottom: 1px; display: flex;}
.spark-bucket-list-header {border-top: 10px solid #1B3556; border-bottom: 10px solid #1B3556; font-size: 2rem; flex: 0;}
.spark-bucket-list-header input[type=text] {color: #1B3556; font-weight: bold; margin-bottom: 0;}
.spark-bucket-list-header input[type=text], .spark-bucket-list-header input[type=text]:focus {background-color: transparent; border: none; border-bottom: 4px dashed #1B3556; box-shadow: none; font-size: 2rem; height: auto; padding-left: 0; padding-right: 0;}
.spark-bucket-list-header input[type=text]:focus, .spark-bucket-list-header input[type=text]::placeholder {color: white; opacity: 1;}
.spark-bucket-list-header input[type=text]::placeholder {font-size: 1.7rem; font-weight: normal;}
.spark-bucket-list-header p {font-size: 4rem; font-family: ModernEraBlack, sans-serif; margin: 0; text-transform: uppercase; color: #1B3556; font-weight: bold; line-height: 1;}
.spark-bucket-list li {border-radius: 0 3px 3px 0;}
.spark-bucket-list li::before {border-radius: 3px 0 0 3px; background-color: #1B3556; color: white; font-weight: bold;}
.spark-bucket-list li input {color: #1B3556; background-color: #F8CACA;}
.spark-bucket-list li input:focus {background-color: white;}
.spark-bucket-list li span {background-color: #F8CACA; color: white; font-weight: bold;}
.spark-bucket-list-outer-wrapper .button, #spark_bucket_list_modal .button {border: none; background-color: #DE1C65; color: white; float: right; text-transform: uppercase; font-weight: bold; padding: 1rem 1.5rem; border-radius: 3px;}
#spark_bucket_list_modal_content {background-color: #F8CACA;}
#spark_bucket_list_modal .button {width: 100%; float: none;}
.spark-bucket-list-preview {background-color: white;}
.spark-bucket-list-social-icons, .spark-bucket-list-social-icons * {background-color: white; color: #DE1C65;}

.autocomplete-suggestions {border-radius: 3px; color: #1B3556;}
