@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

html * { font-family: 'Source Code Pro', monospace; }


html,
body {
    width: 100%;
    height: 100%
}


#canvas {
    background: #000000;
    vertical-align: middle;
    cursor: pointer;
}

@media screen and (min-width: 576px) {
    #canvas { cursor: auto; }
}


.smallLabel, #participateModalForm #togetherlink {
    font-size: 0.8rem
}

#acceptOfferModal .modal-body div,
#participateModal .modal-body div.row,
#paymentSelectModal .modal-body div,
.modal-process .modal-body div,
.partContent { background: darkgray; }

.infoContent { background: white; }

.modal-content {
    -ms-border-radius: 0px;
    border-radius: 0px;
}


.logoImg {
    width: -webkit-calc(50vw - 500px);
    width: -o-calc(50vw - 500px);
    width: calc(50vw - 500px);
    margin-top: 20vh;
    position: fixed;
    -webkit-backface-visibility: hidden;
}

.menuImg {
    margin-top: 5vh;
    position: fixed;
    -webkit-backface-visibility: hidden;
}

.searchImg {
    margin-top: -webkit-calc(5vh + 50px);
    margin-top: -o-calc(5vh + 50px);
    margin-top: calc(5vh + 50px);
    position: fixed;
    -webkit-backface-visibility: hidden;
}

.fbImg {
    margin-top: -webkit-calc(95vh - 40px);
    margin-top: -o-calc(95vh - 40px);
    margin-top: calc(95vh - 40px);
    position: fixed;
    -webkit-backface-visibility: hidden;
}

.logoImg img {
    width: 100%;
    max-width: 250px;
    min-width: 100px;
}

.menuButton {
    cursor: pointer;
    width: 40px;
}


.searchInput {
    position: fixed;
}

.firstTop .searchInput {
    
    width: 150px;
}

.rightBottom .searchInput {
    width: 200px;
}


.searchButton {
    cursor: pointer;
    width: 30px;
}

.fbButton {
    cursor: pointer;
    width: 30px;
}


textarea#message { resize: none; }


.message-types .btn { width: 80px; }

.payment-types .btn { width: 150px; }

.btn, .form-control, .form-control-sm {
    -ms-border-radius: 0px;
    border-radius: 0px;
    font-size: 0.875rem;
}

#menuToggle { background: transparent; }

#menuContent span.description,
#menuContent span.description-end,
#acceptOfferModal div.description {
    white-space: pre-wrap;
}


#menuToggle:focus { outline: 0px; }


#acceptOfferModal .modal-body p, label, #btnPart { color: #000000; }

#menuContent a.mailLink,
a#togetherlink,
#acceptOfferModal .modal-body a,
#paymentSelectModal .modal-body a,
#participateModal .modal-body a {color: #000000;
}

.alertify .ajs-dialog, .ajs-content {
    margin: 0;
    padding: 0 !important;
}

.ajs-content div { border-width: 3px !important; }

#menu {
    width: 1000px;
    height: 1000px;
    max-width: 1000px;
    max-height: 1000px;
    min-width: 1000px;
    min-height: 1000px;
    background: darkgray;
    color: #000000;
}


.paypal-button-tagline { display: none !important; }



@media (min-width: 576px) {
    .modal-dialog.modal-participate { max-width: 400px !important; }

    .modal-dialog.modal-payment-select { max-width: 400px !important; }

    .modal-dialog.modal-acceptOffer { max-width: 800px !important; }

    .modal-dialog.modal-terms { max-width: 700px !important; }
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #ffffff;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background: dimgray;
    cursor: pointer;
    margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 0px 0px 0px #000000;
}

.custom-range::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 1px solid #ffffff;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background: dimgray;
    cursor: pointer;
}

.custom-range::-ms-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 1px solid #ffffff;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background: #ffffff;
    cursor: pointer;
}



.span_pseudo, .chiller_cb span:before, .chiller_cb span:after {
    content: "";
    display: inline-block;
    background: #000;
    width: 0;
    height: 0.2rem;
    position: absolute;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.chiller_cb {
    position: relative;
    height: 2rem;
    display: flex;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

.chiller_cb input { display: none; }

.chiller_cb input:checked ~ span {
    background: #fff;
    border-color: #fff;
}

.chiller_cb input:checked ~ span:before {
    width: 1rem;
    height: 0.15rem;
    -ms-transition: width 0.1s;
    -o-transition: width 0.1s;
    -webkit-transition: width 0.1s;
    transition: width 0.1s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.chiller_cb input:checked ~ span:after {
    width: 0.4rem;
    height: 0.15rem;
    -ms-transition: width 0.1s;
    -o-transition: width 0.1s;
    -webkit-transition: width 0.1s;
    transition: width 0.1s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.chiller_cb input:disabled ~ span {
    background: #ececec;
    border-color: #dcdcdc;
}

.chiller_cb input:disabled ~ label { color: #dcdcdc; }

.chiller_cb input:disabled ~ label:hover { cursor: default; }

.chiller_cb label {
    padding-left: 2rem;
    position: relative;
    white-space: pre-wrap;
    z-index: 2;
    cursor: pointer;
    margin-bottom: 0;
}

.chiller_cb span {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    z-index: 1;
    box-sizing: content-box;
}

.chiller_cb span:before {
    -ms-transform: rotate(-55deg);
    -webkit-transform: rotate(-55deg);
    transform: rotate(-55deg);
    top: 1rem;
    left: 0.37rem;
}

.chiller_cb span:after {
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    bottom: 0.35rem;
    left: 0.2rem;
}





.bd-example-modal-lg .modal-dialog {
    display: table;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 24px);
}

.bd-example-modal-lg .modal-dialog .modal-content {
    background-color: transparent;
    border: none;
}

#messageList {
    list-style: none;
}


#modelErrors ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.pagination > li > a {
    background-color: white;
    color: #5A4181;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    color: #5a5a5a;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a {
    color: white;
    background-color: dimgray !important;
    border: solid 1px dimgray !important;
}

.pagination > .active > a:hover {
    background-color: gray !important;
    border: solid 1px gray;
}



#adminDashboard .list-group .list-group-item-action.active {
    color: white !important;
    background-color: #343a40 !important;
    border-color: darkgray !important;
}

#wrapper.toggled #sidebar-wrapper { margin-left: -11.5rem; }

@media screen and (min-width: 768px) {
    #wrapper.toggled #sidebar-wrapper { margin-left: -11.5rem; }
}

#wrapper #sidebar-wrapper {
    min-height: 100vh;
    margin-left: 0rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
}

#wrapper #sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1rem;
    font-size: 1.2rem;
}

#wrapper #sidebar-wrapper .list-group { width: 15rem; }

@media screen and (min-width: 768px) {
    #wrapper #sidebar-wrapper { margin-left: 0; }
}

#wrapper #page-content-wrapper {
    min-width: 0;
    width: 100%;
}


tr td:hover { cursor: pointer; }

.table tbody tr.highlight td { background-color: lightgray; }

.table tbody tr td:hover { cursor: pointer; }



.social-link {
    width: 40px;
    cursor: pointer;
    height: auto;
}

#pixelsTable tbody {
    height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#pixelsTable tbody, #pixelsTable thead { display: block; }


.inverse-img {
    -moz-filter: invert(100%);
    -webkit-filter: invert(100%);
    filter: invert(100%);
}



@media (min-width: 576px) {
    .lr-column { min-width: 100px; }
    .card {
        width: 350px;
    }
    #message-list.list-group {
        width: 400px;
    }
}



@media (max-width: 575px) {
    .lr-column { min-height: 20vh; }


    #menu, #menuContent {
        max-width: 100%;
        min-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 2000px;
    }

    .card {
        max-width: 350px;
    }

   

    .menuImg {
        height: 40px;
        width: 40px;
        margin-top: calc(10vh - 35px);
        margin-left: calc(90vw - 20px);
    }

    .menuImg img {
        height: 20px;
        width: 20px;
    }

    .searchImg {
        height: 40px;
        width: 40px;
        margin-top: calc(10vh);
        margin-left: calc(90vw - 20px);
    }


    .searchImg img {
        height: 15px;
        width: 15px;
    }

    .fbImg.menu-show {
        height: 40px;
        width: 40px;
        position: static;
        -webkit-backface-visibility: hidden;
        margin-left: calc(90vw - 20px);
        margin-top: auto;
        margin-bottom: auto;
    }


    .fbImg:not(.menu-show) {
        
        height: 40px;
        width: 40px;
        margin-top: calc(30vh + 1000px - 10px);
        position: fixed;
        -webkit-backface-visibility: hidden;
        margin-left: calc(90vw - 20px);
        left: 0;
    }


    .fbImg img {
        height: 20px;
        width: 20px;
    }

    .logoImg {
        height: 20vh;
        min-height: 20vh;
        width: auto;
        margin-top: 0px;
        margin-left: calc(33vw - 20vh / 2);
    }

    .logoImg img {
        height: 20vh !important;
        width: auto;            
    }


    #messageList.list-group {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        
        
    }


    #messageListCol {
        width: calc(100% - 40px ) !important;
        max-width: calc(100% - 40px) !important;
        height: calc(100% - 40px) !important;
        max-height: calc(100% - 40px) !important;
    }

    .message-content {
        left: 0px;
        position: fixed;
        width: 100%;
        max-width: 100%;
        max-height: 450px;
        top: 2000px;
    }

    .message-row {
        max-height: 450px;
        height: 450px;
    }

}


@media screen and (min-width: 576px) and (max-width: 1216px) {
    #mainSection {
        width: 1200px;
        min-width: 1200px;
    }

    .menuImg { width: 40px; }

    .searchImg { width: 40px; }

    .fbImg { width: 40px; }

    .logoImg { width: 100px; }
}



#messageList.list-group {
    max-height: 330px;
    width: 400px;
    max-width: 400px;
    overflow: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    margin-left: 20px;
    margin-right: 20px;
    
}


.cross {
    height: 40px;
    max-height: 40px;
    width: auto;
}


.lcross {
    left: -20px;
    bottom: -20px;
    z-index: -1;
}


.rcross {
    right: -20px;
    top: -20px;
    z-index: -1;
}

#messageListCol {
    margin-top: 60px;
    margin-bottom: 60px;
}