.blackcircle{

    border: 3px solid #000000;

    border-radius: 50%;

    height: 35px;

    width: 35px;

    margin-left: auto;

    margin-right: auto;

}

.bluecircle{

    border: 3px solid blue;

    border-radius: 50%;

    height: 35px;

    width: 35px;

    margin-left: auto;

    margin-right: auto;

}

.redcircle{

    border: 3px solid red;

    border-radius: 50%;

    height: 35px;

    width: 35px;

    margin-left: auto;

    margin-right: auto;

}

.scorecard.table td{

    padding: 0 !important;

    vertical-align:middle !important;

    text-align: center;

}

td.tcol {

    vertical-align: top;

}

td.tie {

    border-top: 5px solid green;

}

.darkred{

    color: darkred;

}

table.dataTable.List tbody tr{

    cursor: hand;

}

table.dataTable.List tbody tr:hover{

    background-color: lightgray;

}

.banker{

    border: 3px solid red;

    border-radius: 50%;

    height: 30px;

    width: 30px;

    margin-left: auto;

    margin-bottom: 6px;

    margin-right: auto;

    color: white;

    background-color: red;

}

.toteboard > .totetie {

    margin-top: -4px;

}

.toteboard > .totetie ~ .totetie {

    margin-top: 0px;

}

.totetie{

    border-top: 3px solid green;

    margin: 0 4px 0 6px;

    padding: 1.5px 0 .5;

}

.outcome{
    text-align: center;
}

.player{

    border: 3px solid blue;

    border-radius: 50%;

    height: 30px;

    width: 30px;

    margin-left: auto;

    margin-bottom: 6px;

    margin-right: auto;
    
    background-color: blue;

    color: white;

}

.black{

    border: 3px solid black;

    border-radius: 50%;

    height: 30px;

    width: 30px;

    margin-left: auto;

    margin-bottom: 6px;

    margin-right: auto;
    
    background-color: black;

    color: white;

}

.red{

    border: 3px solid red;

    border-radius: 50%;

    height: 30px;

    width: 30px;

    margin-left: auto;

    margin-bottom: 6px;

    margin-right: auto;
    
    background-color: red;

    color: white;

}

.toteboard{

    float: left;

    width: 36px;

    padding: 4px;

}

.navbar-fixed-top {

    position: fixed;

    z-index: 1000;

    width: 100%;

}

.loading {

    font-size: 20px;

    min-width:30px;

    display: block;

}



.loading:after {

    overflow: hidden;

    color: gray;

    vertical-align: bottom;

    -webkit-animation: ellipsis steps(4,end) 900ms infinite;      

    animation: ellipsis steps(4,end) 900ms infinite;

    content: '...'; /* ascii code for the ellipsis character */

    width: 0px;

    white-space:nowrap;

}

div.top-button a p {

    text-align: center;

    margin: 0;

    padding: 0px;

    background-color: #007bff;

    color: white;

    font-weight: 700;

    text-transform: uppercase;

    font-size: x-large;

}

.top-button.fullShoe.On a p, .top-button.oneHand.On a p {

    border-left: lightgreen 30px solid;

}

a#shoeEditToggle {

    font-size: 1rem;

}

div.top-button.handToggle a p {
    font-size: .8rem;
    padding: 8px;
}
div.top-button.active a p {

    border-left: 25px solid red;
    color: white;

}

div.top-button.inactive a p {

    border-left: 25px solid darkred;
    color: lightgray;
    background-color: #0056b3;

}

.login-box, .register-box {

    width: 600px;

    font-size: xx-large;

}

.login-box button.btn.btn-primary.btn-block {

    font-size: xx-large;

}

.login-card-body .input-group .form-control {

    border-right: 0;

    font-size: xx-large !important;

    height: inherit;

}

.greet a p {
    font-size: 1.2em;
    margin-bottom: 0px;
}

.stat, .hands .stat, div.hands span {
    font-size: 1.1rem;
}

@keyframes ellipsis {

    to {

    width: 1em;    

    }

}



@-webkit-keyframes ellipsis {

    to {

    width: 1em;    

    }

}



.custom-switch .custom-control-label::before {

    height: 1.5rem;

    border-radius: .75rem;

    left: -69.25px;

    width: 3rem;

}

.custom-switch .custom-control-label::after {

    left: calc(-4.25rem + 2px);

    width: calc(1.5rem - 4px);

    height: calc(1.5rem - 4px);

    border-radius: .75rem;

}

.custom-switch .custom-control-input:checked~.custom-control-label::after {

    background-color: #dee2e6;

    -webkit-transform: translateX(1.35rem);

    transform: translateX(1.35rem);

}

.datepicker.datepicker-dropdown {

    z-index: 1100 !important;

}

.form-group.row.shoeEdit {

    margin: 15px;

}



input.form-control.form-control-sm {

    background-color: whitesmoke;

    font-size: 1em;

}

.card.card-light.card-outline {

	width: max-content;

	min-width: 98vw;

}

.content.mt-5 {

	width: max-content;

}

.content-wrapper {

	width: max-content;		

}

.row.tote {

	flex-wrap: nowrap;

}

.scorecard-image {
    width: 100vw;
}

li.list-group-item.newReply {
    background-color: beige;
}

button.btn.btn-secondary.deleteComment {
    margin-bottom: 8px !important;
}

li.list-group-item.comments-card {
    background-color: lightgray;
    border: 1px gray solid;
}

.comments-head {
    border-bottom: 1px gray solid;
    font-size: small;
}

.comments-body {
    border-bottom: 1px gray solid;
    background-color: white;
    padding:20px;
}

.replies-head {
    border-bottom: 1px lightgray solid;
    margin-bottom: 10px;
    font-size: small;
}

input.replySubmit, input.commentSubmit, input.imageSubmit, input.noteSubmit  {
    background-color: #007bff;
    color: white;
    font-weight: 700;
}
/* X-Small devices (portrait phones, less than 576px) */

@media only screen and (max-width: 575.98px) { 

 }



/* Small devices (landscape phones, less than 768px) */

@media only screen and (max-width: 991.98px) and (orientation: portrait) { 

    .login-page, .register-page {

        justify-content: start;

        margin-top: 35%;

    }

        .login-box, .register-box {

            width: 90%;

        font-size: 3.5em;

        font-weight: 500;

    }

    .login-card-body .input-group .form-control {

        border-right: 0;

        font-size: 1.2em !important;

        font-weight: 500;

        height: inherit;

        background-color: lightgray;

    } 

    .login-page .input-group-text, .register-page .input-group-text{

        font-size: 4rem;

    }

    .login-box button.btn.btn-primary.btn-block {

        font-size: 1.2em;

        font-weight: 700;

    }

    button.btn.btn-primary.btn-block {

        margin-top: 25px;

    }

    .greet a p {

        font-size: 1.25em;
        font-weight: 700;

    }

    .pt-3, .py-3 {

        padding-top: 2.5rem!important;

    }

    tbody, th {

        font-size: 1.35em;

    }

    .card-body{

        font-size: 1em;

    }

    span.stat, .row span.stat {

        font-size: 1.6em;

        margin: 0 0 20px;

    }

    span#handno{

        font-size: 1em;

    }

    a#handFwd {

        font-size: 1.15em;

    }

    .card-title {

        font-size: 1.7em;

    }

    button.btn.btn-primary {

        font-size: 2rem;

    }

    .dataTables_filter {

        font-size: 2rem;

        margin-left: -100px

    }

    div.dataTables_wrapper div.dataTables_filter input {

        height: 4rem;

    }

}



/* Medium devices (tablets, less than 992px) */

@media (min-width: 767.98px) and (max-width: 991.98px) {  }



/* Large devices (desktops, less than 1200px) */

@media (min-width: 991.98px) and (max-width: 1199.98px) {  }



/* X-Large devices (large desktops, less than 1400px) */

@media (min-width: 1199.98px) and (max-width: 1399.98px) {  }