@font-face {
    font-family: "UbuntuRegular";
    src        : url("../font/Ubuntu-Regular.ttf");
}

* {
    font-family: "UbuntuRegular";
}

.bodycenterpage {
    height          : 100vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: #0A0B10;
    color           : #F0F1F5;
}

.bodypage {
    background-color: #0A0B10;
    color           : #F0F1F5;
    min-height: 100vh;
    height          : 100%;
}

.slug {
    font-variant: small-caps;
    text-align  : center;
}

.connect {
    background-color: #141720;
    border-radius   : 10px;
}

label {
    margin-top   : 10px;
    margin-bottom: 10px;
}

.btn {
    margin-top      : 20px;
    background-color: #4880f9;
    border-radius   : 10px;
    box-shadow      : 0 0 10px #2959b2;
    color           : black;
    font-weight     : bold;
}

.btn:hover {
    background-color: #0A0B10;
    box-shadow      : 0 0 10px #4880f9;
    color           : #F0F1F5;
}

.btn2 {
    box-shadow: none;
}

.lien-ligne {
    color: #2959b2;
}

.lien-ligne:hover,
.lien-ligne:focus {
    color: #4880f9;
}

.alert-error {
    background-color: rgb(94, 32, 32);
    color           : #F0F1F5;
    border          : none;
}

.alert-success {
    color           : #F0F1F5;
    background-color: rgb(34, 88, 39);
    border          : none;
}

.menu-principal {
    position        : fixed;
    width           : 100px;
    background-color: #12151C;
    color           : #F0F1F5;
    min-height      : 100%;
    border-radius   : 10px;
}

.content-principal {
    position: relative;
    float   : right;
    width   : calc(100% - 100px);
}

.navbar-nav {
    width     : 100%;
    text-align: center;
}

.nav-link {
    display      : inline-block;
    font-size    : 30px;
    width        : 70px;
    color        : #848FAE;
    margin       : 10px 10px 10px 10px;
    border-radius: 10px;
}

.nav-link.active {
    background-color: #232734;
    color           : #4880f9 !important;
}

.nav-link:hover {
    color: #4880f9 !important;
}

.slug-page {
    font-variant: small-caps;
}

.nombres {
    font-size: 50px;
    color    : #F0F1F5;
}

.compteur {
    position  : relative;
    float     : left;
    width     : 120px;
    text-align: center;
    color     : #848FAE;
    margin    : 10px 30px 30px 10px;
    font-size : 14px;
}

.progressbar,
.progressbar2 {
    position: absolute;
    top     : -10px;
    left    : 0;
    width   : 100%;
    height  : 100%;
}

.compteurbar {
    position  : relative;
    z-index   : 1;
    text-align: center;
}

a {
    text-decoration: none;
}

.card {
    position        : relative;
    text-decoration : none;
    background-color: #232734;
    border-radius   : 10px;
}

.card-status {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
}

.cart-slug,
.cart-content {
    color: #F0F1F5;
}

.cart-slug {
    margin     : 10px;
    text-align : center;
    font-size  : 13px;
    font-weight: bold;
    color      : #4880f9;
}

.cart-content {
    margin    : 10px;
    text-align: center;
    font-size : 12px;
}

.card-img-top {
    border-radius: 10px;
}

.vert {
    color: #848FAE;
}

.rouge {
    color: red;
}

.table {
    vertical-align: middle !important;
}

.table-custom {
    --bs-table-color: #848FAE;
    ;
    --bs-table-border-color : #373b3e;
    --bs-table-striped-bg   : #0A0B10;
    --bs-table-striped-color: #848FAE;
    ;
    --bs-table-active-bg   : #12151C;
    --bs-table-active-color: #848FAE;
    ;
    --bs-table-hover-bg   : black;
    --bs-table-hover-color: #4880f9;
    color                 : var(--bs-table-color);
    border-color          : var(--bs-table-border-color);
}

.select2-container .select2-selection--single {
    color : black;
    height: auto;
}

.select2-container {
    color  : black;
    display: block;
}

#loading {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index         : 9999;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.upload-circle {
    margin-top      : -210px;
    width           : 120px;
    height          : 120px;
    border-radius   : 50%;
    border          : 10px solid #12151C;
    border-top-color: #4880f9;
    animation       : spin 1s linear infinite;
    position        : fixed;
}

.btnupload {
    position     : fixed;
    margin-bottom: -50px;
}

.chargement {
    position  : fixed;
    margin-top: -20px;
    font-size : 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.bt-info {
    font-size       : 14px;
    background-color: #0A0B10;
    color           : #4880f9;
    border          : none;
}

.playlist-select {
    padding: 5px;
}

.form-check-input:checked {
    background-color: #4880f9;
    border-color    : #2278e9;
}

.form-switch .form-check-input {
    width       : 72px;
    height      : 25px;
    margin-top  : 10px;
    margin-right: 10px;
}