.grecaptcha-badge {

    visibility: collapse !important;

}



html,

body {

    width: 100%;

    height: 100%;

    margin: 0px;

    padding: 0px;

    overflow-x: hidden;

}



@font-face {

    font-family: "Bohemain";

    src: url("../lib/fonts/Bohemian-Typewriter-2.ttf") format("truetype");

}



@font-face {

    font-family: "Lato";

    src: url("../lib/fonts/Lato-Regular.ttf") format("truetype");

}



h1,

h2,

h3,

h4,

h5,

h6,

.login-label {

    font-family: "Bohemain" !important;

}



.login-label {

    font-size: 15px;

}



.background-image {

    background-repeat: no-repeat;

    background-position: center center;

}



h2 {

    padding: 1em 0 1em 0;

}

p,

a,

li,

input,
.view-item-information-details {

    font-family: "Lato";

}



.small-input {

    margin: auto !important;

}

li {

    list-style: none;

    margin: 0 auto;

}



li::before {

    content: "\2022";

    color: #0069e7;

    display: inline-block;

    width: 1em;

}



#navigation-logo {

    padding: 0.2em;

    height: 120px;

}



.filter-bucketlist-search,

#analytics-search {

    width: 70%;

    color: #999;

    background-color: #eee;

    border: 0;

    padding: 12px;

    margin: 10px;

    font-size: 14px;

}

#mobile-navigation a {

    color: #6a6e75;

    padding: 1em;

    text-decoration: none;

}

.contact-col {

    display: flex;

    justify-content: flex-start;

}

#mobile-navigation .active,

.active {

    color: #0069e7;

}

/* Bucketlist Items */

.bucketlist-item {

    border: 1px solid #f0f0f0;

    border-radius: 5px;

    text-align: left;

    padding: 0 !important;

    margin: 1em;

    background-color: white;

    color: black;

}



.bucketlist-item-completed {

    border-color: #30b300;

}

.dataTables_length select {

    margin-left: 1em;

    margin-right: 1em;

}

#admin-table_filter {

    margin-right: 3em;

}



tbody {

    border-bottom: 1px solid #dee2e6;

}

.bucketlist-item-inner {

    padding: 0.2em 1em 0.5em 1em;

}



.bucketlist-important-information {

    background-color: #0069e7;

    color: white;

    padding: 0.5em;

}



.btn-tag {

    font-size: 0.7em;

    margin: 1em 0.1em 0 0.1em;

}



.bucketlist-modal {

    padding: 2em;

}



.bucketlist-modal-buttons {

    padding: 1em;

}



.bucketlist-item-row {

    display: flex;

    justify-content: center;

    margin: 3em 0 3em 0;

}



#navigation-icon {

    color: #0069e7;

}

.icon {

    margin-top: 0.25em;

}



.input {

    background-color: #fafafa;

}



.primary-link {

    color: #0069e7;

}



/* Navigation */



#mobile-links {

    display: none;

}



#mobile-links > a {

    border-bottom: 1px solid #eaeaea;

}



.topnav a.icon {

    color: #0069e7;

    display: block;

    position: absolute;

    right: 0;

    top: 0;

}



#mobile-navigation a.icon {

    color: #0069e7;

    display: block;

    position: absolute;

    right: 0;

    top: 0;

}



.navigation-bar {

    background-color: #fff;

    color: #696969;

    z-index: 1;

    position: fixed;

}



#desktop-navigation > a {

    padding: 1em;

}



#mobile-bar {

    display: flex;

    justify-content: space-between;

}



#navigation-hamburger {

    align-self: center;

}



thead {

    background-color: #0069e7;

    color: white;

    font-family: Bohemain;

}



.btn-form-primary,

.btn-form-secondary {

    text-align: center !important;

    outline: 0;

    border-radius: 5px;

    padding: 15px;

    color: #ffffff !important;

    width: 100%;

    -webkit-transition: all 0.3 ease;

    transition: all 0.3 ease;

    cursor: pointer;

}



.view-item-banner {

    padding-top: 8em;

}

.view-item-tags {

    display: flex;

    flex-wrap: wrap;

}



.view-item-tag-button {

    font-size: 1em;

}



.view-item-text {

    text-align: left;

    padding: 1em;

}



.view-item-information-container {

    padding: 0.5em 0 3em 0;

}



.view-item-information-title {

    font-family: "Bohemain";

}



.view-item-image-to-do {

    border: 5px solid #0069e7;

}



.view-item-image-done {

    border: 5px solid #30b300;

}



.view-item-hyperlink {

    color: #91d1f8;

}



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

    #desktop-navigation {

        display: inline;

    }



    #mobile-navigation {

        display: none;

    }

}



@media screen and (min-width: 300px) and (max-width: 849px) {

    #desktop-navigation {

        display: none;

    }



    #mobile-navigation a {

        display: block;

    }

}



/* Forms */



.form {

    margin: 3em;

}

/* Old Style */



button:focus {

    outline: 0 !important;

}



#back-to-top {

    position: fixed;

    bottom: 10px !important;

    right: 10px !important;

    width: 30px;

    height: 30px;

    text-align: center;

    padding: 6px 0;

    font-size: 12px;

    line-height: 1.42;

    border-radius: 15px;

    background-color: #0069e7;

    border-color: #0069e7;

    border-style: solid !important;

    color: white;

}



.tooltip .tooltiptext {

    width: 120px;

    bottom: 100%;

    left: 50%;

    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */

}



.banner {

    padding: 8em;

}



.banner-box {

    margin: 2em;

    padding: 4em;

    color: white;

    background-color: rgba(0, 104, 231, 0.8);

}



.logged-in-banner {

    padding: 10em 0 2em;

}



.bucketlist-image {

    width: 100%;

    height: auto;

}



.my-bucketlist-category {

    color: white;

    background-color: #0069e7;

}

.bucketlist-item-tags,

.bucketlist-item-bottom {

    text-align: center;

}



.bucketlist-item-bottom {

    display: flex;

    justify-content: space-between;

}

.event-image {

    width: 100%;

    height: 15em;

}



.event-text > p {

    padding: 0.5em 0 0.5em;

}

.black-colored-text {

    color: #6a6e75;

}



.primary-background {

    background-color: #0069e7;

    color: white;

}



.white-background {

    background-color: white;

}



.white-background > p {

    color: #6a6e75;

}



.event-item {

    text-align: left;

    margin-top: 1em;

    background-color: white;

    color: #6a6e75;

}



.event-item > p {

    padding: 1em;

    overflow-wrap: break-word;

}



.footer-container {

    background-color: #262522;

    padding: 2em 1em 0 1em;

    color: white;

}



.footer-col {

    margin: 0.5em 0 0.5em 0;

}



.footer-copyright {

    background-color: #262522;

    padding: 1em;

    color: white;

}



.footer-social-icons {

    margin: 1em 1em 0 0;

}

/* Login */



.heading,

h3 {

    text-align: center;

    padding: 20px 0 20px 20px;

}



.btn-form-primary {

    background-color: #0069e7;

}

.btn-form-primary:hover {

    background-color: #1d9aeb;

}

.btn-form-secondary {

    background-color: #1d9aeb;

}

.btn-form-secondary:hover {

    background-color: #91d1f8;

}

.btn-form-tertiary {

    font-family: "Bohemain";

}

.btn-form-tertiary:hover {

    color: #91d1f8;

}

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-box-shadow: 0 0 0 30px #fafafa inset !important;

    color: #1d9aeb !important;

}



/* List */



.bucket-item {

    border: 1px solid rgb(102, 102, 102);

}



.bucket-item-added {

    border: 2px solid #0069e7 !important;

}



.bucket-item-done {

    border: 2px solid #30b300 !important;

}



.bucket-item-bottom {

    text-align: center;

    margin: 10px;

}



.item-button-add {

    border: 2px solid #0069e7;

    background-color: #0069e7;

    color: white;

}



.item-button-remove {

    border: 2px solid #d60007;

    background-color: #d60007;

    color: white;

}



.item-button-done {

    border: 2px solid #30b300;

    background-color: #30b300;

    color: white;

}



.item-div,

.item-div-completed {

    display: inline-block;

    border-radius: 5px;

    overflow: hidden;

    align-content: center !important;

}



.item-button-done:hover,

.item-button-remove:hover,

.item-button-add:hover {

    cursor: pointer;

}



/* Landing Page */



.landing-div {

    padding-top: 2em;

}



#loading-div {

    text-align: center;

    padding: 10px;

    color: #0069e7;

}



#add-item-div {

    text-align: center;

    margin: 0 auto;

    padding-top: 50px;

}



.item-status,

.item-status-added,

.item-status-done {

    top: 0px;

    width: 100%;

    color: white;

    position: absolute;

}



.item-status-added {

    background-color: rgba(0, 104, 231, 0.8);

}



.item-status-added:hover {

    cursor: pointer;

    background-color: rgba(0, 104, 231, 1);

}



.item-status-done {

    background-color: rgba(48, 179, 0, 0.8);

}



.item-status-done:hover {

    cursor: pointer;

    background-color: rgba(48, 179, 0, 1);

}



.completed-div {

    text-align: center !important;

}



.add-items-button {

    cursor: pointer;

    margin: 0 auto;

    text-align: center;

    padding: 10px 20px 10px 20px;

    border: 1px solid #0069e7;

    border-radius: 5px;

    color: white;

    background-color: #0069e7;

}



.add-items-button:hover {

    border: 1px solid #1d9aeb;

    background-color: #1d9aeb;

}



@media screen and (min-device-width: 300px) and (max-device-width: 1023px) {

    .item-div,

    .item-div-completed {

        margin-left: 15%;

        margin-top: 10px;

    }

}



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

    .item-div,

    .item-div-completed {

        margin: 10px;

    }

}



.item-div {

    border: 1px solid #d6d6d6;

}



.item-div-completed h6,

.item-div h6 {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    line-height: 16px; /* fallback */

    max-height: 32px; /* fallback */

    -webkit-line-clamp: 2; /* number of lines to show */

    -webkit-box-orient: vertical;

    margin-bottom: 10px;

}



.item-div-completed {

    border: 1px solid #30b300;

}



.icon-check {

    cursor: pointer;

    padding: 10px;

    border: 0;

    background-color: #30b300;

    color: #ffffff;

}



.icon-check:hover {

    background-color: #2a9c00;

}



.icon-cross {

    cursor: pointer;

    clear: both;

    padding: 10px;

    border: 0;

    background-color: #0069e7;

    color: #ffffff;

}



.icon-cross:hover {

    background-color: #1d9aeb;

}



.icon-trash {

    cursor: pointer;

    padding: 10px;

    border: 0;

    background-color: #d60007;

    color: #ffffff;

}



.icon-trash:hover {

    background-color: #b30006;

}



.icon-search {

    cursor: pointer;

    padding: 10px;

    border: 0;

    background-color: #00a1c9;

    color: #ffffff;

}



.item-buttons {

    text-align: center;

    align-self: center;

}

.icon-search:hover {

    background-color: #0085a6;

}



.icon-add-image {

    cursor: pointer;

    clear: both;

    padding: 10px;

    border: 0;

    background-color: #07ad2d;

    color: #ffffff;

}



.icon-add-image:hover {

    background-color: #057a20;

}



.icon-update-image {

    cursor: pointer;

    clear: both;

    padding: 10px;

    border: 0;

    background-color: #28a745;

    color: #ffffff;

}



.icon-update-image:hover {

    background-color: #228c3a;

}



.icon-change-user-role-user,

.icon-change-user-role-admin,

.icon-view-users-bucketlist,

.icon-edit-bucketlist-item,

.icon-delete-bucketlist-item,

.icon-publish-bucketlist-item,

.icon-unpublish-bucketlist-item {

    cursor: pointer;

    padding: 0.5em;

    border: 0;

    border-radius: 50%;

    color: #ffffff;

}



.icon-change-user-role-user {

    background-color: #91d1f8;

}

.icon-change-user-role:hover {

    background-color: #1d9aeb;

}



.icon-change-user-role-admin {

    background-color: #1d9aeb;

}

.icon-change-user-role-admin:hover {

    background-color: #91d1f8;

}



.icon-change-user-role-user {

    background-color: #91d1f8;

}

.icon-change-user-role:hover {

    background-color: #1d9aeb;

}



.icon-view-users-bucketlist {

    background-color: #00a1c9;

}

.icon-change-users-bucketlist:hover {

    background-color: #0085a6;

}



.icon-edit-bucketlist-item {

    background-color: #f5e042;

}

.icon-edit-bucketlist-itemt:hover {

    background-color: #d1ba0f;

}

.icon-delete-bucketlist-item {

    background-color: #d60007;

}

.icon-delete-bucketlist-item:hover {

    background-color: #a3080d;

}

.icon-publish-bucketlist-item {

    background-color: #91d1f8;

}

.icon-publish-bucketlist-item:hover {

    background-color: #1d9aeb;

}

.icon-unpublish-bucketlist-item {

    background-color: #1d9aeb;

}

.icon-unpublish-bucketlist-item:hover {

    background-color: #91d1f8;

}

.item-text {

    padding: 5px 10px 0 10px;

    text-align: center;

    vertical-align: center;

}



.item-image {

    text-align: center;

    vertical-align: center;

}



.mini-box {

    margin: 0.5em 0;

}

.blue-icon {

    margin: 1em 0.5em;

    color: #0069e7;

}



/* Admin Page */



.cell {

    padding-top: 5px;

    padding-bottom: 5px;

}



.admin-button {

    background-color: #0069e7 !important;

    border-color: #0069e7 !important;

}



.admin-button-active {

    background-color: #1d9aeb !important;

    border-color: #1d9aeb !important;

}



.table-headers {

    margin-top: 10px;

    background-color: #0069e7;

    color: white;

    border-top-right-radius: 5px;

    border-top-left-radius: 5px;

}



.admin-summary-information {

    color: #0069e7;

    border: 1px solid #eee;

    border-radius: 5px;

    margin: 2px;

}
.ui-datepicker-title {

    background-color: #0069e7;

    color: white;

}



.ui-datepicker-calendar {

    background-color: #0069e7;

    color: white;

}



.ui-datepicker-month,

.ui-datepicker-year {

    background-color: white;

    color: #1d9aeb;

}



@media screen and (min-device-width: 200px) and (max-device-width: 320px) {

    .bucketlist-image {

        height: 200px;

    }



    .view-item-information-title {

        text-align: center;

    }

    .view-item-information-details {

        text-align: center;

        padding: 1em;

    }

    .bucketlist-item-bottom {

    }

}

@media screen and (min-device-width: 321px) and (max-device-width: 425px) {

    .bucketlist-image {

        height: 220px;

    }



    .view-item-information-title,

    .view-item-information-details {

        text-align: center;

    }

}

@media screen and (min-device-width: 425px) and (max-device-width: 500px) {

    .bucketlist-image {

        height: 250px;

    }



    .view-item-information-title,

    .view-item-information-details {

        text-align: center;

    }

}

@media screen and (min-device-width: 990px) and (max-device-width: 1024px) {

    .bucketlist-image {

        height: 150px;

    }

}

@media screen and (min-device-width: 200px) and (max-device-width: 375px) {

    .event-image {

        height: 15em;

    }

    h1 {

        font-size: 18px;

    }

    h2 {

        font-size: 16px;

    }

    p {

        font-size: 12px !important;

    }

    .banner {

        padding: 8em 0 2em;

    }



    .logged-in-banner {

        padding: 10em 0 2em;

    }



    .banner-box {

        margin: 2em;

        padding: 2em;

    }



    .padded-background {

        padding: 0.2em 0.8em 0.2em 0.8em;

    }

    .btn-tag,

    .bucketlist-item-bottom > a > button {

        font-size: 14px !important;

    }

    .bucketlist-item-inner > h5 {

        font-size: 16px;

    }

}



@media screen and (min-width: 300px) and (max-width: 374px) {

    p {

        font-size: 10px;

    }

    h2 {

        font-size: 22px;

    }

    h5 {

        font-size: 16px;

    }



    .form-control,

    .form-check,

    option {

        font-size: 0.6rem;

    }

    .login-label {

        font-size: 1rem;

    }

}



@media screen and (min-width: 375px) and (max-width: 499px) {

    h1 {

        font-size: 25px;

    }

    p {

        font-size: 12px;

    }

    h2 {

        font-size: 24px;

    }

    h5 {

        font-size: 18px;

    }

    .btn-tag,

    .bucketlist-item-bottom > button {

        font-size: 12px !important;

    }



    .padded-background {

        padding: 0.2em 1em 0.2em 1em;

    }



    .form-control,

    .form-check,

    option {

        font-size: 0.7rem;

    }

    .login-label {

        font-size: 1rem;

    }

}



@media screen and (min-width: 500px) and (max-width: 575px) {

    .bucketlist-image {

        height: 250px;

    }

    p {

        font-size: 16px;

    }

    h2 {

        font-size: 27px;

    }

    h5 {

        font-size: 18px;

    }

    .btn-tag,

    .bucketlist-item-bottom > button {

        font-size: 16px !important;

    }



    .padded-background {

        padding: 0.5em 2em 0.5em 2em;

    }

}



@media screen and (min-width: 576px) and (max-width: 630px) {

    .bucketlist-image {

        height: 200px;

    }

    p {

        font-size: 12px;

    }

    h2 {

        font-size: 27px;

    }

    h5 {

        font-size: 14px;

    }

    .btn-tag,

    .bucketlist-item-bottom > button {

        font-size: 8px !important;

    }



    .padded-background {

        padding: 0.5em 2em 0.5em 2em;

    }

}



@media screen and (min-width: 631px) and (max-width: 700px) {

    .bucketlist-image {

        height: 250px;

    }

    p {

        font-size: 16px;

    }

    h2 {

        font-size: 24px;

    }

    h5 {

        font-size: 20px;

    }

    .btn-tag {

        font-size: 10px !important;

    }

    .bucketlist-item-bottom > button {

        font-size: 13px !important;

    }



    .padded-background {

        padding: 1em 0.5em 1em 0.5em;

    }

}



@media screen and (min-width: 701px) and (max-width: 750px) {

    .bucketlist-image {

        height: 200px;

    }

    p {

        font-size: 14px;

    }

    h2 {

        font-size: 22px;

    }

    h5 {

        font-size: 20px;

    }

    .btn-tag,

    .bucketlist-item-bottom > button {

        font-size: 12px !important;

    }



    .padded-background {

        padding: 0.5em 1em 0.5em 1em;

    }



    .small-input {

        width: 80%;

    }

    .btn-form-primary,

    .btn-form-secondary {

        width: 60%;

    }

}



@media screen and (min-width: 751px) and (max-width: 850px) {

    .event-image {

        height: 10em;

    }

    .bucketlist-image {

        height: 200px;

    }

    p {

        font-size: 14px;

    }

    h2 {

        font-size: 24px;

    }

    h5 {

        font-size: 20px;

    }

    .btn-tag,

    .bucketlist-item-bottom > button {

        font-size: 12px !important;

    }

    .padded-background {

        padding: 1em 2em 1em 2em;

    }

    .small-input {

        width: 80%;

    }

    .btn-form-primary,

    .btn-form-secondary {

        width: 40%;

    }

}



@media screen and (min-width: 851px) and (max-width: 990px) {

    .bucketlist-image {

        height: 200px;

    }

    p {

        font-size: 12px;

    }

    h2 {

        font-size: 24px;

    }

    h5 {

        font-size: 18px;

    }

    .btn-tag,

    .bucketlist-item-bottom > button {

        font-size: 10px !important;

    }

    .padded-background {

        padding: 1em 0.5em 1em 0.5em;

    }



    .small-input {

        width: 80%;

    }



    .btn-form-primary,

    .btn-form-secondary {

        width: 50%;

    }

}



@media screen and (min-width: 991px) and (max-width: 1000px) {

    p {

        font-size: 14px;

    }

    h2 {

        font-size: 24px;

    }

    h5 {

        font-size: 18px;

    }

    .btn-tag {

        font-size: 8px !important;

    }

    .bucketlist-item-bottom > button {

        font-size: 10px !important;

    }

    .padded-background {

        padding: 1em 2em 1em 2em;

    }



    .small-input {

        width: 80%;

    }



    .btn-form-primary,

    .btn-form-secondary {

        width: 40%;

    }

}



@media screen and (min-width: 1001px) and (max-width: 1023px) {

    .btn-tag {

        font-size: 8px !important;

    }

    .bucketlist-item-bottom > button {

        font-size: 10px !important;

    }

    .padded-background {

        padding: 1em 2em 1em 2em;

    }



    .small-input {

        width: 80%;

    }



    .btn-form-primary,

    .btn-form-secondary {

        width: 40%;

    }

}



@media screen and (min-width: 1024px) and (max-width: 1050px) {

    .btn-tag {

        font-size: 8px !important;

    }

    .bucketlist-item-bottom > button {

        font-size: 10px !important;

    }

    .padded-background {

        padding: 1em 2em 1em 2em;

    }



    .small-input {

        width: 65%;

    }



    .btn-form-primary,

    .btn-form-secondary {

        width: 25%;

    }

}



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

    .small-input {

        width: 50%;

    }



    .btn-form-primary,

    .btn-form-secondary {

        width: 30%;

    }

}

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

    #navigation-logo {

        width: 200px;

        height: 200px;

    }

    .bucketlist-image {

        height: 400px;

    }

    a {

        font-size: 20px;

    }

    p {

        font-size: 21px;

    }

    h2 {

        font-size: 30px;

    }

    h5 {

        font-size: 24px;

    }

    .btn-tag,

    .bucketlist-item-bottom > button {

        font-size: 18px !important;

    }

    .padded-background {

        padding: 1em 2em 1em 2em;

    }



    .banner-box {

        margin-top: 10em;

    }



    button {

        font-size: 20px !important;

    }



    .small-input {

        width: 40%;

    }

    .btn-form-primary,

    .btn-form-secondary {

        width: 20%;

    }

}



@media screen and (min-device-width: 375px) and (max-device-width: 1024px) {

    .ui-datepicker {

        font-size: 8px !important;

        width: 25em !important;

    }



    .ui-datepicker-title {

        margin: 0 !important;

        font-size: 6px !important;

        padding: 0 0.2em;

    }



    .mobile-link-buttons {

        text-align: center;

        margin: 0 auto;

        visibility: visible;

    }



    .banner {

        padding: 7em 0 2em;

    }

}



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

    .ui-datepicker {

        width: 30em !important;

    }



    .ui-datepicker-title {

        margin: 0 !important;

        padding: 0 2.3em;

    }



    .mobile-link-buttons {

        visibility: hidden;

    }

    .padded-background {

        padding: 1em 2em 1em 2em;

    }



    .view-item-information-title {

        text-align: right;

    }

    .view-item-information-details {

        text-align: left;

    }

}