html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    background: #93a9d2;
}

.actions-bar {
    margin-bottom: 10px;
}

.scrollable-actions-bar {
    overflow-x: auto;
    white-space: nowrap;
}

.scrollable-actions-bar a {
    display: inline-block;
}

.title-block{
    background-color: #334f80;
    margin: 10px 0 0 0;
    padding: 5px;
    text-align: center;
    color: white;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: solid 2px #344f7f;
    border-bottom: none;
}

.title-block h3 {
    margin: 0;
    font-weight: bold;
}

.navbar{
    background-color: #2c446d;
}

.dropdown-menu {
    background-color: #3a5a92;
    border: solid 2px #344f7f;
}

.dropdown-item {
    color: white;
}

.content {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border: solid 2px #344f7f;
    padding: 20px 10px;
    margin: 0 auto 10px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    background-color: white;
}

.footer {
    border-radius: 10px;
    border: solid 2px #344f7f;
    padding: 20px 10px;
    margin: 20px auto;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    background-color: #2f4471;
    box-shadow: 0 5px 15px 3px #334f80;
    color: rgba(255,255,255,.7);
}

.footer a, .footer a:visited, .footer a:active {
    color: rgba(153, 235, 255, 0.7);
}

.dropdown:hover > .dropdown-menu { /* Affichage du volet au survol */
    display: block;
}

.dropdown-menu:hover { /* Volet toujours ouvert si survol */
    display: block;
}

.btn {
    font-weight: bold;
    margin: 5px;
}

.table-auto {
    text-align: center;
    width: auto;
    margin: auto;
}

.table-auto td {
    text-align: center;
}

.table-auto-flex {
    text-align: center;
    width: 100%;
    margin: auto;
}

.table-auto-flex td {
    text-align: center;
}

.table-responsive img,
.table-responsive-sm img,
.table-responsive-md img,
.table-responsive-lg img,
.table-responsive-xl img {
    max-width: 100%;
}

.margin-auto {
    margin: auto;
}

.horizontal-margin-auto {
    margin: 0 auto;
}

.vertical-margin-auto {
    margin: auto 0;
}

.btn-violet {
    color: #ffffff;
    background-color: #B000FF;
}

.btn-violet:hover,
.btn-violet:focus,
.btn-violet:active,
.btn-violet.active,
.open .dropdown-toggle.btn-violet {
    color: #ffffff;
    background-color: #7a00b3;
}

.btn-violet:focus,
.btn-violet.focus{
    box-shadow:0 0 0 .2rem rgba(176,0,255,.5)

}

.btn-violet:active,
.btn-violet.active,
.open .dropdown-toggle.btn-violet {
    background-image: none;
}

.btn-violet.disabled,
.btn-violet[disabled],
fieldset[disabled] .btn-violet,
.btn-violet.disabled:hover,
.btn-violet[disabled]:hover,
fieldset[disabled] .btn-violet:hover,
.btn-violet.disabled:focus,
.btn-violet[disabled]:focus,
fieldset[disabled] .btn-violet:focus,
.btn-violet.disabled:active,
.btn-violet[disabled]:active,
fieldset[disabled] .btn-violet:active,
.btn-violet.disabled.active,
.btn-violet[disabled].active,
fieldset[disabled] .btn-violet.active {
    background-color: #B000FF;
}

.btn-violet .badge {
    color: #B000FF;
    background-color: #ffffff;
}

.btn-violet:focus {
    box-shadow:0 0 0 .2rem rgba(176, 0, 255, 0.5)
}

.btn-orange {
    color: #ffffff;
    background-color: #FF8000;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active,
.btn-orange.active,
.open .dropdown-toggle.btn-orange {
    color: #ffffff;
    background-color: #cc6600;
}

.btn-orange:active,
.btn-orange.active,
.open .dropdown-toggle.btn-orange {
    background-image: none;
}

.btn-orange.disabled,
.btn-orange[disabled],
fieldset[disabled] .btn-orange,
.btn-orange.disabled:hover,
.btn-orange[disabled]:hover,
fieldset[disabled] .btn-orange:hover,
.btn-orange.disabled:focus,
.btn-orange[disabled]:focus,
fieldset[disabled] .btn-orange:focus,
.btn-orange.disabled:active,
.btn-orange[disabled]:active,
fieldset[disabled] .btn-orange:active,
.btn-orange.disabled.active,
.btn-orange[disabled].active,
fieldset[disabled] .btn-orange.active {
    background-color: #FF8000;
}

.btn-orange .badge {
    color: #FF8000;
    background-color: #ffffff;
}

.btn-orange:focus {
    box-shadow:0 0 0 .2rem rgba(255, 128, 0, 0.5)
}

.btn-twitter {
    color: #ffffff;
    background-color: #1b95e0;
}

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter {
    color: #ffffff;
    background-color: #1679b6;
}

.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter {
    background-image: none;
}

.btn-twitter.disabled,
.btn-twitter[disabled],
fieldset[disabled] .btn-twitter,
.btn-twitter.disabled:hover,
.btn-twitter[disabled]:hover,
fieldset[disabled] .btn-twitter:hover,
.btn-twitter.disabled:focus,
.btn-twitter[disabled]:focus,
fieldset[disabled] .btn-twitter:focus,
.btn-twitter.disabled:active,
.btn-twitter[disabled]:active,
fieldset[disabled] .btn-twitter:active,
.btn-twitter.disabled.active,
.btn-twitter[disabled].active,
fieldset[disabled] .btn-twitter.active {
    background-color: #1b95e0;
}

.btn-twitter .badge {
    color: #1b95e0;
    background-color: #ffffff;
}

.btn-twitter:focus {
    box-shadow:0 0 0 .2rem rgba(27, 149, 224, 0.5)
}

.card-div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: solid 2px dimgrey;
    background-color: whitesmoke;
    margin: 5px;
    padding: 5px;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

.card-div:hover {
    background-color: lightgrey;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

.card-div img {
    max-width: 100%;
    max-height: 170px;
}

.card-div-static-background {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: solid 2px dimgrey;
    background-color: whitesmoke;
    margin: 5px;
    padding: 5px;
}

.border-primary {
    border-color: #0069d9;
}

.border-success {
    border-color: #218838;
}

.border-orange {
    border-color: #ff8000;
}

.border-danger {
    border-color: #c82333;
}

.border-violet {
    border-color: #B000FF;
}

.pagerfanta {
    margin-top: 15px;
}

.small-avatar {
    max-width: 90px !important;
    max-height: 90px !important;
}

.medium-img {
    max-width: 400px;
    max-height: 400px;
}

.slider-div {
    padding: .375rem .75rem;
}

.slider-div .slider {
    width: 100%;
}

.container-title-shadow {
    box-shadow: 0 5px 15px 3px #334f80;
}

.container-content-shadow {
    box-shadow: 0 10px 15px 3px #334f80;
}

.navbar-shadow {
    box-shadow: 0 0 15px 3px #2c446d;
}

.text-shadow-black {
    text-shadow: 0 0 5px black;
    color: white;
}

.userlist-title {
    padding: .375rem .75rem;
    border-radius: .25rem;
    font-weight: bold;
    text-shadow: 0 0 5px black;
    color: white;
}

.userlist-body {
    border-radius: 10px;
    border: solid 2px black;
    margin: 5px;
    padding: 5px;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

.userlist-body:hover {
    background-color: #efefef;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

.title {
    padding: .375rem .75rem;
    border-radius: .25rem;
    font-weight: bold;
}

.title-orange {
    color: white;
    background-color: #FF8000;
}

.title-success {
    color: white;
    background-color: #28a745;
}

.title-primary {
    color: white;
    background-color: #007bff;
}

.title-violet {
    color: white;
    background-color: #B000FF;
}

.title-secondary {
    color: white;
    background-color: #6c757d;
}

.title-danger {
    color: white;
    background-color: #dc3545;
}

.title-dark {
    color: white;
    background-color: #343a40 !important;
}

pre {
    font-family: inherit;
    font-size: 1rem;
}

.ul-no-bullet {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.comment-button {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.2em;
}

.popover {
    z-index: 0;
}

.small-text {
    font-size: 0.8rem;
}

.text-color-game {
    color: #28a745;
}

.text-color-extension {
    color: #B000FF;
}

.text-color-console {
    color: #FF8000;
}

.text-color-accessory {
    color: #007bff;
}

.text-color-toy {
    color: #dc3545;
}

.text-color-game-light {
    color: #98e6ab;
}

.text-color-extension-light {
    color: #d780ff;
}

.text-color-console-light {
    color: #ffbf80;
}

.text-color-accessory-light {
    color: #80bdff;
}

.text-color-toy-light {
    color: #ec939c;
}

.text-color-white-important {
    color: white !important;
}

.userlist-badge {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 1.2em;
}

.btn-round, .btn-round:active {
    border-radius: 25px;
    text-align: center;
    padding: 0;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    vertical-align: center;
    pointer-events: none;
}

.btn-round-small, .btn-round-small:active {
    border-radius: 25px;
    text-align: center;
    padding: 0;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    vertical-align: center;
    pointer-events: none;
}

.position-badge {
    position: absolute;
    bottom: -20px;
    right: -15px;
}

.vip-badge {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 4em;
    color: #ff2f48;
    transition: color 0.5s ease-out;
    text-decoration: none;
}

.vip-badge:hover {
    color: #bf2b3c;
    text-decoration: none;
}

.vip-badge-color {
    color: #ff2f48;
    transition: color 0.5s ease-out;
    text-decoration: none;
}

.vip-badge-color:hover {
    color: #bf2b3c;
    text-decoration: none;
}

.vip-badge-size-2 {
    font-size: 2em;
}

.tr-background-game-light {
    background-color: #eafaee;
}

.tr-background-game-light:nth-child(2n) {
    background-color: #d6f5de;
}

.tr-background-extension-light {
    background-color: #f7e6ff;
}

.tr-background-extension-light:nth-child(2n) {
    background-color: #efccff;
}

.tr-background-console-light {
    background-color: #fff2e6;
}

.tr-background-console-light:nth-child(2n) {
    background-color: #ffe5cc;
}

.tr-background-accessory-light {
    background-color: #e6f2ff;
}

.tr-background-accessory-light:nth-child(2n) {
    background-color: #cce5ff;
}

.tr-background-toy-light {
    background-color: #fbe9eb;
}

.tr-background-toy-light:nth-child(2n) {
    background-color: #f7d4d8;
}

.no-margin {
    margin: 0;
}

label.required:before, legend.col-form-label.required:before {
    content: "* ";
    color: red;
}

input[type="radio"] + label.required:before {
    content: "";
}

form:after {
    content: "* Champs requis";
    color: red;
    font-style: italic;
}

.twitter-logo {
    width: 16px;
    height: auto;
    margin-right: 5px;
}

.vertical-align {
    display: flex;
    align-items: center;
}

.fit-text {
    width: fit-content !important;
}
