html, body {
    height: 100%;
    font-size: 16px;
}
body{
    display: flex;
    flex-direction: column;
    background-color: #f0f0f0;
    font-family: Roboto, Helvetica, Arial,Sans-Serif;
    font-size: 1.25em;
}
h1,h2,h3,h4,h5,h6,#clicker,#reset,#apply,.set-button{
    font-family: Rubik, Tahoma, Arial, Sans-Serif;
}
.content {
    flex: 1 0 auto;
}
.footer-wrapper {
    flex-shrink: 0;
}
.header-wrapper
{
    background-image: linear-gradient(90deg,#e6304a,#e6304a,#3291ba,#3291ba);
    padding: 0 0 8px 0;
}

header, footer, .dark-wrapper, .dark-wrapper .container {
    background-color: #100e17;
}
#head {
    display: flex;
    color: #f0f0f0;
    height: auto;
    min-height: 100px;
}
.nav-link{
    color: #f0f0f0!important;
}
.nav-link:hover{
    color: #c2c2c2!important;
}

#logo {
    max-height:75px;
    margin:auto 0;
}

@media (max-width: 600px){
    #logo {
        max-height:55px;
    }
}

.low-ad-fixed {
    position: fixed;
    top: 109px;
}

.left-fixed{
    left:0px;
}

.right-fixed{
    right:0px;
}

@media (max-width:1300px){
    @media (max-height:750px){
        .low-ad-fixed {
            display: none;
        }
    }

}

@media (max-width:1800px){
    @media (max-height:500px){
        .low-ad-fixed {
            display: none;
        }
    }
}

.dropdown-menu *{
    color:#2e2f3e;
}

#navbarDropdown svg
{
    width: 1.2rem;
    height: 1.2rem;
    position:relative;
    top:-0.1rem;
}

h1 {
    margin: 15px 0;
}

a.stealth{
    color:inherit!important;
    text-decoration: inherit!important;
}

blockquote{
    padding: 0.2rem 2rem;
    margin-bottom: 1rem;
}

button,button:focus,button:active  {
    border:none;
    outline:none;
    display:block;
}

#click-test{
    margin-top: 5px;
    margin-bottom: 20px;
}

#clicker,#jitter-clicker, .submit-score{
    background-color: #3291ba;
    border-radius:15px;
    color: #f0f0f0;
}
#clicker:hover,#jitter-clicker:hover{
    border-color: #000;
    background-image: linear-gradient(to top,#2e7fa9,#3291ba);
}
#clicker:active,#jitter-clicker:active{
    border-color: #000;
    background-image:none;
    background-color: #2e7fa9;
}
#clicker,#result {
    width: 100%;
    height: 100%;
    min-height: 180px;
    max-height: 220px;
    font-size: 1.25em;
    flex: 0 0 auto;
}

#jitter-click-wrapper{
    height:400px;
    width:100%;
    min-width:400px;
    max-width:700px;
    margin:0 auto;
    clear:both;
}
#jitter-clicker{
    position: relative;
    width: 200px;
    height: 200px;
    font-size: 1.25em;
    flex: 0 0 auto;
    padding:0;
    transition-duration: 5000ms;
    transition-property: transform;
    transition-timing-function: linear;
    transform: translate(250px,100px);
    border-radius:50%;
}
#result{
    align-items: center;
    border-radius: 15px;
}
#result-body, button
{
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

#result-img img
{
    height: auto;
    width: auto;
    max-height:175px;
    border-radius:15px;
}

#result p{
    width: 100%;
    margin: 0;
    clear: both;
}

#result-text {
    font-size:1.25rem;
}
/*#result-cps,#result-cps-modal{
     background: linear-gradient(to right, #212529,#08c534,#212529);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: text_animation 10s ease-in-out infinite;
    background-size: 400% 100%;
}*/
#result-cps {
    color: #e6304a;
}
#result-cps-modal {
    color: #3291ba;
    margin: auto;
}

#result-cps>div {
    display:inline-block;
}
@keyframes text_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}



.modal-header .close
{
    margin: -1rem -1rem -1rem 0!important;
}

.modal-body .result-body
{
    align-content: center;
    justify-content: space-between;
    height: 100%;
}

.share-icon {
    display: inline-block;
    position: relative;
    height: 2rem;
    width: 2rem;
    background-repeat: no-repeat;
    background-position: right;
    background-image: url("data:image/svg+xml,<svg width='1.2em' height='1.2em' viewBox='0 0 16 16' class='bi bi-share' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M11.724 3.947l-7 3.5-.448-.894 7-3.5.448.894zm-.448 9l-7-3.5.448-.894 7 3.5-.448.894z'/><path fill-rule='evenodd' d='M13.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm-11-6.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/></svg>");
}

.share-button{
    max-height:2em;
    max-width:2em;
}
.share-button:hover{
    max-height:2em;
    max-width:2em;
    opacity:0.85;
}
.share-button-fixed{
    max-height:2em;
    max-width:2em;
    display:block;
    margin:5px 5px
}
#share-buttons-fixed{
    position:fixed;
    top:115px;
    padding: 3px 0;
    border-radius: 7px;
    background-color: rgba(240,240,240,0.85);
}
#share-buttons-fixed>p{
    font-size:0.75rem;
    margin:0;
    text-align: center;
}
#share-buttons-fixed>a:nth-child(2n){
    margin-top:0;
}
@media (max-width: 600px){
    #share-buttons-fixed{
        display:none;
    }
}

#result-submit, #result-submit div, #submit-score-1, #submit-score-2, #submit-done
{
    margin: auto;
    border: none;
    text-align: center;
}
#result-name{
    font-weight: 500;
}
#result-name button
{
    display:inline;
}
#username{
    background-color: #f0f0f0;
    border: 2px solid #dee2e6;
    ;
    color: #212529;
    font-weight: 500;
    margin-bottom: 15px;
    max-width: 190px;
}

#username-message{
    font-size: 0.8rem;
    font-weight: 300;
}

#username-message span.green
{
    color: #28a745;
}

#username-message span.red
{
    color: #e6304a;
    text-decoration: underline;
}

.submit-score{
    width:158px;
    min-height: 40px;
    height:auto;
    font-weight: 500;
    margin-bottom:5px;
}

.submit-score.disabled{
    cursor: not-allowed;
    background-color: var(--c-bg-ll);
    color: var(--c-p-d);
}

.cancel
{
    background-color:#e6304a;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    padding-top: 0px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 28 28' style='enable-background:new 0 0 28 28;' %3E%3Cg%3E%3Cpath style='fill:%23f0f0f0;' d='M0,24l4,4l10-10l10,10l4-4L18,14L28,4l-4-4L14,10L4,0L0,4l10,10L0,24z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 5px;
}

#submit-score-2{
    margin:0;
}


#reset, #apply,#reset-settings, #stop, .set-button{
    width: 100%;
    height: 85px;
    border-radius:15px;
    font-size: 1.25em;
    background-color: #f0f0f0;
}
#apply, .set-button{
    color: #29ba97;
    background-color: #f0f0f0;
    box-shadow: inset 0 0 0 0.25rem #29ba97;
}
#apply:hover, .set-button:hover{
    color: #eee;
    background-color: #29ba97;
    box-shadow: none;
}
#apply:active, .set-button:active{
    color: #ddd;
    background-color: #26ad8c;
}
#reset, #reset-settings, #stop{
    color:#e6304a;
    box-shadow: inset 0 0 0 0.25rem #e6304a;
}
#reset:hover, #reset-settings:hover, #stop:hover{
    color: #eee;
    background-color:#e6304a;
    box-shadow: none;
}
#reset:active, #reset-settings:active, #stop:active{
    border-color: #000;
    color: #eee;
    background-color:#d82d45;
}

#reset-settings{
    font-size: 1em;
}

#modal-ok{
    background-color: #29ba97;
    border-color: #29ba97;
}
.modal-content{
    background-color: #f0f0f0;
}

#jitter-func #click-data, #jitter-func #jitter-settings{
    margin-top:10px;
}
.slider{
    cursor:pointer;
}
#jitter-size, #jitter-speed{
    width: 100%;
}

#countdown{
    display: none;
}

#main-text {
    margin-top:1rem;
}
#main-text:empty{
    margin-top:0;
}
#click-chart{
    height: auto;
    width:100%;
}
#current, #clicks,.jitter-time,#missClicks, #moment{
    display: block;
    clear: both;
    font-size: 1.5rem;
}
#clicks .hits{
    font-size: 1.8rem;
    font-weight: 600;
}
#moment{
    font-size: 2rem;
}

#graphWrapper{
    margin: 25px 0 0;
}
#collapseGraph{
    background-color: #f0f0f0;
}
#graph-refresh{
    font-size: 1rem;
    color: #7b7c87;
}


#click-chart>p{
    color: #d7d8e1;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.dark-wrapper .accordion {
    margin: 0 0 20px;
}

.card{
    border-radius: 0.75rem;
    border: 1px solid rgba(0,0,0,.250);
}
.card-header {
    background-color: #dbdbdb;
    border-bottom: 1px solid rgba(0,0,0,.180);
}

.card-header [data-toggle="collapse"],.card-header [data-toggle="collapse"].collapsed {
    background-repeat: no-repeat;
    background-position:right;
    margin-bottom: 0;
}

.card-header [data-toggle="collapse"] {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/></svg>");
}
.card-header [data-toggle="collapse"].collapsed {
    background-image: url("data:image/svg+xml,<svg class='bi bi-chevron-down' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}

.card-header [data-toggle="collapse"].dark {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23c2c2c2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/></svg>");
}
.card-header [data-toggle="collapse"].collapsed.dark {
    background-image: url("data:image/svg+xml,<svg class='bi bi-chevron-down' viewBox='0 0 16 16' fill='%23c2c2c2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}

.card.dark{
    border: none;
    background-color: #2e2f3e;
    border-radius: 0.75rem;
}
.card-header.dark{
    background-color: #2e2f3e;
}
.card-header.dark *, .card-header *{
    display: block;
}
.collapse.dark,.collapsing.dark{
    background-color: #14151f;
    border: none;
}

.download-link {
    color: #fff!important;
    display: block;
    min-width: 300px;
    width: fit-content;
    height: auto;
    background-color: #3291ba;
    text-align: center;
    border-radius: 4px;
    padding: 3px 19px;
    margin-bottom: 25px;
}

.download-link:hover{
    background-color: #2a7fa4;
    text-decoration: underline!important;
    cursor: pointer;
}


.question-icon{
    display: inline-block;
    position:absolute;
    height: 1.2rem;
    width: 1.5rem;
    top: 0.2rem;
    right: -1.5rem;
    background-repeat: no-repeat;
    background-position:right;
    background-image: url("data:image/svg+xml,<svg fill='%237b7c87' width=\"1rem\" height=\"1.2rem\" class='bi bi-question-circle' viewBox='0 0 16 16'  xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/></svg>");
}

.question-icon:hover{
    cursor:pointer;
    background-image: url("data:image/svg+xml,<svg fill='%232e2f3e' width=\"1rem\" height=\"1.2rem\" class='bi bi-question-circle' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/></svg>");
}

.question-icon.dark
{
    background-image: url("data:image/svg+xml,<svg fill='%237a7a8c' width=\"1rem\" height=\"1.2rem\" class='bi bi-question-circle' viewBox='0 0 16 16'  xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/></svg>");
}
.question-icon.dark:hover
{
    background-image: url("data:image/svg+xml,<svg fill='%23c2c2c2' width=\"1rem\" height=\"1.2rem\" class='bi bi-question-circle' viewBox='0 0 16 16'  xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/></svg>");
}


.bi-question-circle
{
    position: relative;
    top: -0.5rem;
}

#records {
    margin-top:25px;
}
#records h2 {
    position: relative;
    display: inline-block;
}
#records-table {
    border-top: 1px solid rgba(0,0,0,.25);
    border-right: 1px solid rgba(0,0,0,.25);
    overflow: scroll !important;
    overflow-x: hidden !important;
    max-height: 500px;
}

#cardRanksWrapper
{
    max-width: 500px;
    margin: auto;
}
#cardRanksWrapper tr td:first-child,#cardRanksWrapper tr th:first-child {
    width: 83px;
    text-align: center;
}
#cardRanksWrapper tr td:nth-child(3)
{
    width: 100px;
    text-align: start;
}
#cardRanksWrapper tr td:nth-child(2),#cardRanksWrapper tr th:nth-child(2)
{
    text-align: center;
}

@media (max-width:550px)
{

    #cardRanksWrapper tr td:nth-child(2) {
        max-width:170px;
    }
}

#cardRanksWrapper tr td:nth-child(2) {

}

.dark-wrapper>*{
    color:#c2c2c2;
}
.dark-wrapper>.container
{
    padding-top:25px;
    padding-bottom:25px;
}
.dark-wrapper>.container:empty{
    padding: 0;
}

.dark-wrapper h1,.dark-wrapper h2,.dark-wrapper h3,.dark-wrapper h4,.dark-wrapper p a
{
    color:#f0f0f0;
}

.dark-wrapper p a
{
    text-decoration: underline;
    text-decoration-color:#7a7a8c;
}

.dark-wrapper p a:hover
{
    text-decoration: underline;
    text-decoration-color:#f0f0f0;
}

.footer-wrapper
{
    background-image: linear-gradient(90deg,#e6304a,#e6304a,#3291ba,#3291ba);
    padding: 8px 0 0 0;
}
footer {
    padding: 25px 0;
    height: 100px;
    color: #7a7a8c;
}

footer a,footer a:hover{
    color:#7a7a8c;
    text-decoration: underline;
}
footer a:hover {
    color:#9d9db2;
}

.video {
    position:relative;
    padding-bottom:56%;
    padding-top:25px;
    height:0;
}

.video iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.text-red{
    color:#ed494f;
}

table{
    border-collapse: collapse;
    margin-bottom: 10px;
    width: 100%;
}
td,th{
    border:1px solid  #c2c2c2;
    padding:5px 10px;
}

@media (max-width:400px)
{

    table{
        font-size: 1rem;
    }
    td,th{
        padding:3px 6px;
    }
}

/* SLIDER */
input[type=range] {
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 8px;
    height: 8px;

    background-image: -webkit-gradient(linear,
        left top,
        right top,
        color-stop(15%, #d2d6da),
        color-stop(15%, #d2d6da));

    background-image: -moz-linear-gradient(left center,
        #3291ba 0%, #3291ba 15%,
        #d2d6da 15%, #d2d6da 100%);
}


input[type=range]:focus {
    outline: none;
    border: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background-color: #3291ba;
    height: 18px;
    width: 18px;
    border-radius: 50%;
}

input[type=range]::-moz-range-thumb {
    -moz-appearance: none !important;
    background-color: #3291ba;
    border: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
}

/* CHECKBOX */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.2em;
    height: 1.15em;
    border: 0.11em solid currentColor;
    border-radius: 2px;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    margin-left: 0.05em;
    margin-bottom: 0.1em;
    width: 0.4em;
    height: 0.65em;
    transform:  scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    border-bottom: 0.2em solid #3291ba;
    border-right: 0.2em solid #3291ba;
    background: none;
}

input[type="checkbox"]:checked::before {
    transform: scale(1) rotate(45deg);
}