/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 76px;
    padding-bottom: 20px;
}
    body.embed {
        padding-top: 20px;
    }

    body.legacy {
        padding-top: 0;
    }

    body.dashboard,
    main.dashboard {
        padding: 0;
        margin: 0;
        background-color: inherit;
    }

.g-0, .gx-0 {
    padding-left: 0;
    padding-right: 0;
}

.g-0, .gy-0 {
    padding-top: 0;
    padding-bottom: 0
}

/* Hamburger menu */
.navbar-light .navbar-toggler-icon {
    background-image: url("/image/hamburger.png");
}

.moveanchor-destination .dropdown-menu.show {
    position: inherit !important;
}

/* Website colour */
body {
    background-color: #f0f6ef; /* #c3dbc0; aliceblue */
}

#jssor_1 {
    background-color: rgba(255,255,255,0.5)
}

.article-title {
    font-size: 1.2em;
}

table.article-content {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8)
}

.article-background {
    background-size: cover;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    z-index: -1;
}

.article-navigation {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem
}

    .article-navigation .title {
        color: gray
    
    }

.flexgrow2 {
    flex-grow: 2
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px
}

/* Modal */
.modal-dialog {
    max-width: 75vw;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input:not(type=range),
select,
textarea {
    max-width: 280px
}

.oneline {
    vertical-align: middle !important
}

.oneline label {
    margin-bottom: 0
}

/* Quote */
div.quote {
    text-align: center;
    color: #17a2b8;
    margin-left: 20px;
    margin-right: 20px
}

quote {
    margin-left: 10px;
    margin-right: 10px
}

/* Color Picker */
div.color-picker-toggle img {
    max-height: 32px;
    max-width: 32px
}

/* myLightWorker */
.instance-link-panel {
    line-height: 3.5em;
}

.bg-medium {
    background-color: #d1e3ce; /* Grey #e9ecef; */
    border-radius: 5px;
}

    .bg-medium .col-md-6 {
        margin-top: 1rem;
    }

.jumbotron {
    color: white;
    background-color: darkgrey;
    background-image: url(/image/sky.jpg);
    background-position-x: center;
    background-position-y: center;
}

#MainContent_ForgotPasswordBtn {
    color: whitesmoke
}

.order-complete {
    background-color: #d1e3ce
}

.order-processing {
    background-color: #e6f2ff
}

.navbar-brand {
    padding: 5px 5px;
}

.wide {
    max-width: 100%;
}

.wide-image {
    width: 100%;
    height: auto
}

.max500 {
    width: 100%;
    max-width: 500px;
}

input.medium {
    max-width: 170px;
}

input.small {
    max-width: 50px;
}

.new-record {
    background-color: #bfdcbb;
}

.header-search {
    font-size: 1.5em;
    margin-top: 7px;
}

    .header-search.panel {
        background-color: transparent;
        margin-bottom: 0px;
    }

    .header-search .text {
        border-radius: 3px;
        padding-left: 10px;
    }

    .header-search .button {
        border-radius: 3px;
        margin-left: -5px;
    }

.searchbutton {
    color: #28a745 !important;
}

    .searchbutton:hover {
        color: white !important;
    }

.page-header {
    padding-bottom: 9px;
    margin: 20px 0 20px;
    border-bottom: 2px solid #eee;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.b-blue {
    background-color: lightskyblue;
}

.hidden {
    display: none;
}

.icon32 {
    width: auto;
    max-height: 32px;
}

.icon16-float {
    width: auto;
    max-height: 16px;
    position: absolute;
    margin-left: -10px;
}
.icon16-float-left {
    width: auto;
    max-height: 16px;
    position: absolute;
    left: 15px
}
main.dashboard .icon16-float-left {
    left: 0
}

/* Menu buttons */
#MainContent_ButtonPanel .btn-block {
    margin-top: 0px;
}

/* Everyone Has Map Search */
#map,
#ehMapSearch {
    height: 500px;
}

/* Profile */
.right {
    text-align: right;
}

.hlist {
    margin-left: 10px;
}

.hlistr {
    margin-right: 10px;
}

.cbox input[type|=checkbox],
.cbox input[type|=radio]
{
    margin-right: 10px;
}

.cbox label {
    display: inline-block;
}

/* Help */
#help-overview,
#help-website-layout,
#help-lightworker-menu,
#help-signed-in-menu,
#help-fancy-descriptions {
    margin-bottom: 60px
}

.help-image {
    width: 100%;
}

.paypal-help-bold {
    color: green !important;
    font-weight: bold;
}

.code-sample {
    font-family: Courier New, Courier, monospace;
    font-size: 0.7em;
    margin-left: 20px;
}

.navbar.profile {
    padding-left: 0px;
    padding-right: 10px;
}

table.order-report,
table.website-service,
table.instance-link,
table.website-page,
table.testimonial-list,
table.lw-statistics-page,
table.service-file,
table.edit-website-service,
table.subscription-report,
table.subpurchase-report,
table.everyonehas-report,
table.oldurl-link {
    width: 100%;
    background-color: rgba(255,255,255,0.5);
}

thead tr {
    border-bottom: 1px solid lightblue;
    font-weight: bold;
}

tfoot tr {
    border-top: 1px solid lightblue;
    font-weight: bold;
}

    tfoot td.ild-name {
        text-align: right;
        padding-right: 20px;
    }

td.ilh-edit {
    width: 40px;
}

td.ilh-enable,
td.ild-enable {
    text-align: center;
}

td.ilh-extprice,
td.ild-extprice {
    text-align: right;
}

table.testimonial-list td.ilh-title {
    width: 15%;
}

table.testimonial-list tr {
    vertical-align: top;
}

    table.order-report tr.order-queued:hover,
    table.website-service tr:hover,
    table.instance-link tr:hover,
    table.website-page tr:hover,
    table.testimonial-list tr:hover,
    table.lw-statistics-page tr:hover,
    table.service-file tr:hover,
    table.edit-website-service tr:hover,
    table.subscription-report tr:hover,
    table.subpurchase-report tr:hover,
    table.everyonehas-report tr:hover,
    table.oldurl-link tr:hover {
        background-color: cornsilk
    }

    table.service-file .ild-title {
        font-weight: bold;
    }

    table.order-report .ild-orderdate {
        font-size: 0.8em;
    }

    table.order-report .ild-txnid {
        text-align: right;
        font-size: 0.7em;
    }

        table.order-report .ild-txnid .label {
            font-size: 0.8em;
        }

    table.checkout-service {
        width: 100%;
        max-width: 700px;
    }

table.media-file {
    border: 1px solid gray;
    margin-bottom: 10px;
    background-color: beige;
}

tr.separator {
    border-top: 10px solid transparent;
}

.portrait-in-banner {
    max-height: 75px;
    position: relative;
    top: -78px;
    margin-bottom: -52px;
}

.ild-sort {
    min-width: 70px;
}

/* Search panels */
.search-banner {
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100px;
    min-width: auto;    /* was 350px */
    margin-right: 0; /* was 16px  */
}

    .search-banner .user-title {
        background-color: rgba(255,255,255,0.7);
        border-top-right-radius: 0.25rem !important;
        border-top-left-radius: 0.25rem !important;
    }

    .search-banner .portrait-in-banner {
        max-height: 50px;
        position: relative;
        top: 0;
        margin-bottom: -56px;
    }

.search-result .title {
    vertical-align: middle;
    height: 25px;
    overflow: hidden;
    line-height: normal;
    font-size: 1.1vw;
}

/* Website banner */
.website-banner {
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    height: 150px;
    min-width: 250px;
}

    .website-banner .portrait-in-banner {
        max-height: 75px;
        position: relative;
        top: 75px;
        margin-bottom: 0px;
    }

    .website-banner.no-banner {
        height: 75px;
        min-width: 250px;
    }

    .website-banner.no-banner .portrait-in-banner {
        top: 0px;
    }



.t-table table,
.t-table th,
.t-table td {
    /* border: 1px solid gray; */
}

    .wide-profile .t-table {
        width: 100%;
    }

.t-header {
    background-color: #cce5ff
}

.t-subheader {
    background-color: #99caff
}

.t-profile {
    vertical-align: top;
    text-align: right;
    min-width: 150px;
    width: 10%
}

    .t-profile h5 {
        margin-bottom: 0;
        line-height: inherit
    }

    .t-profile .website {
        text-align: right;
        font-size: 0.8em
    }

    .t-profile .service {
        text-align: right;
        font-size: 0.8em;
    }

.t-label {
    vertical-align: top;
    text-align: right;
    padding-right: 10px;
    width: 15%;
    font-weight:bold;
}

    .t-label.button {
        vertical-align: middle;
    }

.t-value {
    vertical-align: top;
    width: 50%;
}

    .t-value.button {
        vertical-align: middle;
        width: 50%;
    }

.t-wide,
.t-extra3 {
    width: 100%;
}

.inline, 
.payment-title {
    display: inline-block;
}

.payment-iframe {
    border: none;
    width: 100%;
    height: auto;
    min-height: 1000px;
}

.website-service tr.ilr-title {
    vertical-align: bottom;
}

.website-service td.ild-title {
    height: 50px;
    vertical-align: bottom;
}

/* Displaying the date for webpages */
h4.user-title .article-date {
    font-size: 0.8rem
}

/* Website images */
.user-links .image.row,
.user-links .ytvideo.row,
.user-links .mylvideo {
    text-align: center
}

.user-links .image.row img {
    max-height: 250px
}

/* Profile */
.row.profile-menu {
    margin-left: 0;
    margin-right: 0;
}

main.container.wide-profile {
    max-width: 100%;
}

/* Footer */
.footer-copy {
    float:left
}

.footer-social {
    float:right
}

.clearfix {
    clear: both;
}

/* Reports */
.website-page .page-disabled {
    background-color: lightgray;
}

/* Testimonials */
.testimonial-name {
    margin-top: 10px;
    font-style: italic;
    font-weight: bold;
}

.testimonial-slideshow.disabled {
    display: none;
}

/* Media Drag Drop */
.document-drag-drop {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: 2px dashed lightskyblue;
    padding: 10px 5px;
    margin: 10px 0;
}

    .document-drag-drop.drag-over {
        border-color: #28a745;
        border: 2px solid #28a745;
    }

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

/* Main container */
@media screen and (min-width: 576px) {
    .container {
        max-width: 100%;
    }
    .modal-dialog {
        max-width: 80vw;
    }
}

@media screen and (min-width: 768px) {
    .container {
        max-width: 100%;
    }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}



/* Small screen transition is around 750px (Firefox), 751px (Edge) */
@media screen and (max-width: 767px) {
    /* Jumbotron */
    h1.display-3 {
        font-size: 4.2rem;
    }

    .testimonial-content,
    .testimonial-name {
        font-size: 1.2em;
    }

    /* Small header */
    .navbar {
        padding: .1rem .5rem
    }

    .navbar-search {
        margin: 0 !important
    }

        .navbar-toggler,
        .navbar-search a {
            font-size: 0.7rem
        }

    #LogoImg {
        max-height: 32px
    }
}

@media screen and (max-width: 585px) {
    .header-search .text {
        float: none;
    }

    /* Phone search box and button */
    .navbar-search.form-inline {
        -ms-flex-flow: row;
        flex-flow: row;
    }

    .testimonial-content {
        font-size: 1.4em;
    }
}

@media screen and (max-width: 510px) {
    /* Jumbotron */
    h1.display-3 {
        font-size: 3.5rem;
    }

    .testimonial-content {
        font-size: 1.6em;
    }
}

@media screen and (max-width: 400px) {
    /* Jumbotron */
    h1.display-3 {
        font-size: 2.5rem;
    }
}

@media print {
    .do-not-print {
        display: none;
    }

    .print-only {
        display: block;
    }
}