html {
    /*background-color: white;*/
    background-color: #102; /*#212121;*/
}

body {
    /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;*/
    color: #eee;
    background-color: #102;
    /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;*/
    font-family: 'Roboto', sans-serif;
    line-height: 1.5em;
    /*font-family: "Open Sans", sans-serif;*/
    /*font-family: 'Montserrat', sans-serif;*/
    /*font-family: 'Lato', sans-serif;*/
    /*font-family: 'Exo 2', sans-serif;*/
    /*font-family: "Bookman Old Style", sans-serif;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
    /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;*/
    /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;*/
    /*font-family: "Bookman Old Style", sans-serif;*/
    /*background: url('../images/smartcity.png') no-repeat center center fixed;
    background-size: 100% auto;*/
    /*text-shadow: 1px 1px 3px #CCC;*/
    /*font-weight: bold;*/
    /*    background-image: linear-gradient(#102, gold, #580303);*/

/*    background-image: url('../images/luminous-2380041243.jpg');
    background-repeat: no-repeat;
    background-size: cover;*/
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    min-height: 650px;
    margin-top: 80px;
    margin-bottom: 50px;
    padding-left: 0px;
    padding-right: 0px;
    border-top: 15px solid #102;
}

/*https://mdbootstrap.com/components/bootstrap-footer/*/
footer {
    /*border-top: 5px solid gold;*/
    padding-top: 50px;
    padding-bottom: 10px;
    /*text-align: center;*/
    background-color: #102;
    font-weight: bold;
    /*text-shadow: none;*/
    /*Box shadow*/
    /*-webkit-box-shadow: -1px -1px 10px #555;
    -moz-box-shadow: -1px -1px 10px #555;
    box-shadow: 0px -1px 10px #333;*/
    color: #eee;
    /*font-family: "Bookman Old Style", sans-serif;*/
    /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;*/
}

.footer-left h2{
    margin-top: 0px;
    margin-bottom: 0px;
}

.footer-left h4 {
    margin-top: 0px;
    margin-bottom: 0px;
}

footer a {
    color: #eee;
    font-weight: bold;
}

footer a:hover {
    color: gold;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width:767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

/*.input-lg {
    font-size: 20px;
}*/

/*.group1 {
    color: #333;
}*/

/*.g-recaptcha {
    margin-top: 15px;
}*/

.breadcrumb {
    margin-top: 0px;
    margin-bottom: 10px;
    background-color: gold; /*#ffcc00;*/ /*#ffcc00;*/
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 8px;
    /*text-align: left;*/
    /*padding-bottom: 5px;*/
    border-radius: 5px;
    font-size: 18px;
    /*Box shadow*/
    /*-webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;*/
    /*text-shadow: 2px 2px 4px #AAA;*/
}

.breadcrumb > .active {
    color: #102;
}

    /*.breadcrumb .label {

        padding-top: 15px;
        padding-bottom: 10px;
    }*/

.topheading {
    padding-top: 0px;
    margin-top: 0px;
}

h3 {
    /*font-weight: bold;*/
}

/*.media-body h2, h3, h4 {

}*/

h1, h2 {
    /*margin-top: 5px;*/
    /*font-family: Georgia, 'Times New Roman', Times, serif;*/
    /*font-family: "Bookman Old Style", sans-serif;*/
    font-family: 'Franklin Gothic Medium', Arial, sans-serif;
    /*font-family: 'Myriad Pro';*/
    /*font-family: 'Abril Fatface', cursive;*/
    /*font-family: 'Leckerli One', cursive;*/
    font-weight: bold;
    /*color: #000;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2);*/
}

hr {
    border-top: 1px solid #dadada;
}

h3, h4, h5, h6 {
    line-height: 1.5em;
}

table {
    color: #333;
    text-align: center;
    margin-top: 20px;
    background-color: white;
    border: 1px solid #dadada;
    /*font-family: "Open Sans", sans-serif;*/

}

    table th {
        text-align: center;
        /*height: 50px;*/
        background-color: #ddd; /*#ffcb2a*/ /*#fedd12;*/ /*#ffde25;*/ /*#ffe37f;*/ /*#ddd*/
        /*color: #333;*/ /*#333;*/
        /*text-shadow: 2px 2px 4px #AAA;*/
    }


.well { /*This is for the text field like URL when it does not have text will shrink*/
    min-height: 40px;
}

table td .check-icons {
    font-size: 16px;
    /*color: grey;*/
}

.alert-dismissible {
    margin-top: 20px;
}

/*table th a {
    color: white;
}*/
/*table th a:hover {
    color: gold;
}*/
/*table .btn:hover {
    background-color: gold;
    color: white;
}*/
/*table {
    border-collapse: collapse;
    width: 80%;
}

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

th {
    width: 25%;
    font-size: 120%;
}

td {
    vertical-align: top;
}*/
.form-control {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.form-floating > label { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #757575;
}

.form-floating > label { /* Internet Explorer 10-11 */
    color: #757575;
}

.form-floating > label { /* Microsoft Edge */
    color: #757575;
}

.btn {
    /*    font-weight: bold;*/
    text-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    /*border-radius: 0;*/
    /*Box shadow*/
    /*-webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;*/
}

/*table .btn:hover {
    background-color: gold;
}*/

    table .btn {
        border-radius: 0;
        /*Box shadow*/
        /*-webkit-box-shadow: 1px 2px 3px #a2a2a2;
    -moz-box-shadow: 1px 2px 3px #a2a2a2;
    box-shadow: 1px 2px 3px #a2a2a2;*/
        /*font-weight: bold;*/
        /*font-family: "Bookman Old Style", sans-serif;*/
        /*font-weight: bold;*/
        /*font-weight: normal;*/
    }


h5#Notice-Demo {
    color: #f68f35;
}

/*ForgotPasswordConfirmation*/
.notice-info {
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

h3#founder-quote {
    font-weight: normal;
}

div#thinking-emoji {
    padding-top: 10px;
}

button#upload-button {
    margin-top: 10px;
}

img#image {
    max-height: 320px;
    max-width: 320px;
}

.card-header.time-stamp {
/*    background-color: gold;
    color: black;*/
/*    font-size: 18px;*/
}

.well.team-member {
    background-color: white;
}


div#Team table {
    text-align: center;
    background-color: white; /*#f2f2f2*/
}

div#Team .thumbnail {
    text-align: center;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: white;
    /*min-height: 150px;*/
    /*border: 1px solid #bbb;*/
    /*border: 5px solid #8093ab;*/
    /*border: 5px solid #132437;*/
    border: 8px solid gold;
    /*Box shadow*/
    -webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;
    border-radius: 30px;
}

div#UserBadges {
    margin-bottom: 10px;
}

.hcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.vcenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vbottom {
    display: flex;
    align-items: flex-end;
}

.sync-vcenter {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*.right {
    display: flex;
    justify-content: right;
    align-items: right;
}*/

.info-sync-icon {
    font-size: 5em;

}

div#UserBadges .thumbnail {
    text-align: center;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    background-color: #f2f2f2;
    color: #102;
    min-height: 380px;
    border: 8px solid gold;
    /*Box shadow*/
    /*-webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;*/
    border-radius: 30px;
    /*box-shadow: 0px 0px 20px 5px #8e8e8e;*/
    -moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;
}

.lookup-user h4.shared-info {
    margin-top: 8px;
    margin-bottom: 8px;
    color: #555555;
}

.lookup-user .badge-sharing-label {
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
}

.current-user h6.shared-info {
    margin-top: 8px;
    margin-bottom: 8px;
    color: #ffd46b;
}

.current-user .badge-sharing-label {
    font-size: 18px;
    color: #888888;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
}

.badge-user-name-label {
    margin-top: 8px;
}


.btnshadow, .badgeshadow {
    /*Box shadow*/
    -webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;
}

/*.panel-value {
    background-color: black;
    color: yellow;
}*/
/*div#UserBadges .thumbnail:hover {
    box-shadow: 0px 0px 20px 5px #8e8e8e;
}*/
div#Team .btn {
    background-color: white;
    padding: 0;
    margin: 5px;
}


.team-member-panel {
    text-align: center;
    width: 380px;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
    /*Box shadow*/
    -webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;
}


/*home > index.cshtml*/
.badge-panel {
    text-align: center;
    width: 380px;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 30px;
    border-width: 10px;
    border-color: gold;
    /*Box shadow*/
    -webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;
}

.search-form {
    padding-top: 50px;
}

.badge-panel.lookup-user {
    background-color: lightgray;
}

/*https://dcp.ucla.edu/2011/04/tips-and-tools-for-creating-accessible-color-schemes/*/
.badge-panel.current-user {
    background-color: #5a5a5c;
}

.badge-image, .business-image {
    /*-moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;*/
    margin: 20px;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.badge-image:hover, .business-image:hover {
    -moz-box-shadow: inset 0 0 0px #000000;
    -webkit-box-shadow: inset 0 0 0px #000000;
    box-shadow: inset 0 0 0px #000000;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

/*.icon-social {
    width: 30px;
}*/

.demo {
    /*margin: 30px auto;*/
    padding: 0px;
    background-color: white;
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
    transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
}

.demo:hover {
    /*Box shadow*/
    /*-webkit-box-shadow: 0px 20px 5px #8e8e8e;
    -moz-box-shadow: 0px 20px 5px #8e8e8e;*/
    box-shadow: 0px 0px 20px 5px #8e8e8e;
}

/*.show-effect {
    width: 500px;
    height: 500px;
    position: absolute;
    top: -180px;
    left: -600px;
    transition: 1s;
    transform: rotate(30deg);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);
}

.demo:hover .show-effect {
    top: 0px;
    left: 0px;
    transform: rotate(0deg);
}*/


.searchfield {
    min-width: 250px;
}


.gender-select-group {
    margin-top: 20px;
    margin-bottom: 20px;
}

.form-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* register.cshtml */
.register-form-margin {
    margin-top: 10px;
}

.register-panel-title {
    margin-top: -10px;
    margin-left: -10px;
}

.reg-btn {
    margin-bottom: 10px;
}

.reg-bd-label {
    margin-top: 10px;
    margin-bottom: -5px;
    /*color: white;*/
}

/*input[type="radio"] {
    font-size: 25px;
}*/

blockquote.register {
    padding-top: 1px;
    padding-bottom: 1px;
}

.group1 {
    color: #333;
}

/*.register-panel .text-danger, .log-in .text-danger {
    color: gold;
}*/

/*.register-panel .btn-warning {
    color: #333;
    background-color: yellow;
}*/

.register-panel {
    /*text-align: center;*/
    /*background-color: #f9f9f9;*/
    /*min-height: 600px;*/
    /*margin-left: auto;
    margin-right: auto;*/
    background-color: #f2f2f2; /*#ecf0f5;*/
    color: #102;
    margin-top: 10px;
    border-color: #f2f2f2;
    /*padding-bottom: 10px;*/
    /*min-width: 400px;*/
    /*margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;*/
    /*Box shadow*/
    /*-webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;*/
    /*-webkit-box-shadow: 1px 1px 5px #555;
    -moz-box-shadow: 1px 1px 5px #555;
    box-shadow: 1px 1px 5px #555;*/
    /*-moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;*/
}

/*.log-in .btn, .register-panel .btn {
    -webkit-box-shadow: 1px 1px 5px #555;
    -moz-box-shadow: 1px 1px 5px #555;
    box-shadow: 1px 1px 5px #555;
}*/

/*.register-panel input {
    background-color: #f9f9f9;
}*/

/*login.cshtml*/
.login-form-margin {
    margin-top: 0px;
    margin-bottom: 0px;
}

/*.log-in input {
    background-color: #f9f9f9;
}*/

/*.log-in .input-inset, .register-panel .input-inset {
    -moz-box-shadow: inset 0 0 5px #000000;
    -webkit-box-shadow: inset 0 0 5px #000000;
    box-shadow: inset 0 0 5px #000000;
}*/

/*.log-in .text-warning {
    color: gold;
}*/

.panel {
    border-radius: 30px;
    -webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 20px;
    background-color: #f2f2f2;
    border: 8px solid gold;
    animation: colorchange 24s infinite;
    -moz-animation: colorchange 24s infinite;
    -webkit-animation: colorchange 24s infinite;
}

.BSworkaround {
    padding-left: 0px;
}

.log-in {
    margin-top: 20px;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #f2f2f2;
    border: 8px solid gold;
    color: #102;
/*    min-width: 430px;*/
    /*Box shadow*/
    /*-webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;*/
    border-radius: 30px;
    /*width: 380px;
    min-height: 525px;
    margin-top: 65px;*/
    /*margin-bottom: 50px;*/
    /*margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;*/
    /*Box shadow*/
    -webkit-box-shadow: 1px 1px 10px #555;
    -moz-box-shadow: 1px 1px 10px #555;
    box-shadow: 1px 1px 10px #555;
    /*    -moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: 1px 1px 5px #555;
    -moz-box-shadow: 1px 1px 5px #555;
    box-shadow: 1px 1px 5px #555;*/
    animation: colorchange 24s infinite;
    -moz-animation: colorchange 24s infinite;
    -webkit-animation: colorchange 24s infinite;
}


/*.log-in a {
    color: #888;*/ /*#d9534f;*/
/*}

.log-in a:hover {
    color: #333;
}*/


@keyframes colorchange {
    0% {
        border-color: #f5ad01;
    }

    20% {
        border-color: #e53238;
    }

    40% {
        border-color: #0070c0;
    }

    60% {
        border-color: black;
    }

    80% {
        border-color: white;
    }

    100% {
        border-color: #f5ad01;
    }
}

@-moz-keyframes colorchange /* Firefox */ {
    0% {
        border-color: #f5ad01;
    }

    20% {
        border-color: #e53238;
    }

    40% {
        border-color: #0070c0;
    }

    60% {
        border-color: black;
    }

    80% {
        border-color: white;
    }

    100% {
        border-color: #f5ad01;
    }
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0% {
        border-color: #f5ad01;
    }

    20% {
        border-color: #e53238;
    }

    40% {
        border-color: #0070c0;
    }

    60% {
        border-color: black;
    }

    80% {
        border-color: white;
    }

    100% {
        border-color: #f5ad01;
    }
}










/*https://stackoverflow.com/questions/24855438/transparent-bootstrap-panel?noredirect=1&lq=1 */
/*.transparent {
    background: rgba(46, 51, 56, 0.8) !important;
}*/


.media {
    padding-top: 10px;
    padding-left: 30px;
    padding-bottom: 30px;
    padding-right: 10px;
    /*margin-bottom: 20px;*/
}

.media .media-body {
    padding-left: 40px;
}

.badge-media {
    padding-top: 30px;
    padding-left: 180px;
    padding-bottom: 30px;
}

.business-logo-media {
    padding-top: 30px;
    padding-left: 180px;
    padding-bottom: 30px;
}


.dl-horizontal dt {
    white-space: normal;
    width: 350px;
    font-size: large;
}

.dl-horizontal dd {
    font-size: large;
}






/*https://blog.hubspot.com/website/scrolling-text-css */
.scroll-container {
/*    border: 3px solid black;
    border-radius: 5px;*/
    overflow: hidden;
}

.scroll-text {
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: my-animation 8s linear infinite;
    -webkit-animation: my-animation 8s linear infinite;
    animation: my-animation 8s linear infinite;
}

.scroll-text-slow {
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: my-animation 10s linear infinite;
    -webkit-animation: my-animation 10s linear infinite;
    animation: my-animation 10s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-100%);
    }
}

/* for Chrome */
@-webkit-keyframes my-animation {
    from {
        -webkit-transform: translateX(100%);
    }

    to {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}



.scroll-containerY {
/*    border: 3px solid black;
    border-radius: 5px;*/
    height: 200px;/*280px;*/
    overflow: hidden;
}

.scroll-textY {
    height: 100%;
    text-align: center;
    /* animation properties */
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -moz-animation: my-animationY 15s linear infinite;
    -webkit-animation: my-animationY 15s linear infinite;
    animation: my-animationY 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animationY {
    from {
        -moz-transform: translateY(100%);
    }

    to {
        -moz-transform: translateY(-100%);
    }
}

/* for Chrome */
@-webkit-keyframes my-animationY {
    from {
        -webkit-transform: translateY(100%);
    }

    to {
        -webkit-transform: translateY(-100%);
    }
}

@keyframes my-animationY {
    from {
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    to {
        -moz-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}