html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #000;
    color: #fff;
    min-height:100vh;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/*
    --------------------------------------------------
   Flexor
    --------------------------------------------------
*/
.flex-h {
    display: flex !important;
    flex-direction: row !important;
}

.flex-v {
    display: flex !important;
    flex-direction: column !important;
}

.hide {
    display: none !important;
}
/*
    --------------------------------------------------
    Rounding
    --------------------------------------------------
*/
.r-3 {
    border-radius: 3rem !important;
    align-items: center;
    justify-content: center;
}

.r-30 {
    border-radius: 33% !important;
    align-items: center;
    justify-content: center;
}

.r-50 {
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
}

.r-60 {
    border-radius: 60% !important;
    align-items: center;
    justify-content: center;
}

.r-90 {
    border-radius: 90% !important;
    align-items: center;
    justify-content: center;
}

.r-100 {
    border-radius: 100% !important;
    align-items: center;
    justify-content: center;
}


/*bottom*/
.rb-30 {
    border-bottom-left-radius: 30% !important;
    border-bottom-right-radius: 30% !important;
}

.rb-50 {
    border-bottom-left-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}

.rb-60 {
    border-bottom-left-radius: 60% !important;
    border-bottom-right-radius: 60% !important;
}

.rb-90 {
    border-bottom-left-radius: 90% !important;
    border-bottom-right-radius: 90% !important;
}

.rb-100 {
    border-bottom-left-radius: 100% !important;
    border-bottom-right-radius: 100% !important;
}


/*top*/
.rt-30 {
    border-top-left-radius: 30% !important;
    border-top-right-radius: 30% !important;
}

.rt-50 {
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important;
}

.rt-60 {
    border-top-left-radius: 60% !important;
    border-top-right-radius: 60% !important;
}

.rt-90 {
    border-top-left-radius: 90% !important;
    border-top-right-radius: 90% !important;
}

.rt-100 {
    border-top-left-radius: 100% !important;
    border-top-right-radius: 100% !important;
}



/*top left*/
.rtl-30 {
    border-top-left-radius: 30% !important;
}

.rtl-50 {
    border-top-left-radius: 50% !important;
}

.rtl-60 {
    border-top-left-radius: 60% !important;
}

.rtl-90 {
    border-top-left-radius: 90% !important;
}

.rtl-100 {
    border-top-left-radius: 100% !important;
}


/*top right*/
.rtr-30 {
    border-top-right-radius: 30% !important;
}

.rtr-50 {
    border-top-right-radius: 50% !important;
}

.rtr-60 {
    border-top-right-radius: 60% !important;
}

.rtr-90 {
    border-top-right-radius: 90% !important;
}

.rtr-100 {
    border-top-right-radius: 100% !important;
}


.rr-30 {
    border-bottom-right-radius: 30% !important;
    border-top-right-radius: 30% !important;
}

.rr-50 {
    border-bottom-right-radius: 50% !important;
    border-top-right-radius: 50% !important;
}

.rr-60 {
    border-bottom-right-radius: 60% !important;
    border-top-right-radius: 60% !important;
}

.rr-90 {
    border-bottom-right-radius: 90% !important;
    border-top-right-radius: 90% !important;
}

.rr-100 {
    border-bottom-right-radius: 100% !important;
    border-top-right-radius: 100% !important;
}

.rl-30 {
    border-bottom-left-radius: 30% !important;
    border-top-left-radius: 30% !important;
}

.rl-50 {
    border-bottom-left-radius: 50% !important;
    border-top-left-radius: 50% !important;
}

.rl-60 {
    border-bottom-left-radius: 60% !important;
    border-top-left-radius: 60% !important;
}

.rl-90 {
    border-bottom-left-radius: 90% !important;
    border-top-left-radius: 90% !important;
}

.rl-100 {
    border-bottom-left-radius: 100% !important;
    border-top-left-radius: 100% !important;
}



/*bottom left*/
.rbl-30 {
    border-bottom-left-radius: 30% !important;
}

.rbl-50 {
    border-bottom-left-radius: 50% !important;
}

.rbl-60 {
    border-bottom-left-radius: 60% !important;
}

.rbl-90 {
    border-bottom-left-radius: 90% !important;
}

.rbl-100 {
    border-bottom-left-radius: 100% !important;
}



/*bottom right*/
.rbr-30 {
    border-bottom-right-radius: 30% !important;
}

.rbr-50 {
    border-bottom-right-radius: 50% !important;
}

.rbr-60 {
    border-bottom-right-radius: 60% !important;
}

.rbr-90 {
    border-bottom-right-radius: 90% !important;
}

.rbr-100 {
    border-bottom-right-radius: 100% !important;
}

.shadow-light {
    box-shadow: 0 4px 6px 0 #000, 0 4px 6px 0 #000 inset !important;
}

.shadow-dark {
    box-shadow: 0 4px 6px 0 #fff, 0 4px 6px 0 #fff inset !important;
}

.shadow-mixt-dark-light {
    box-shadow: 0 4px 6px 0 #000, 0 4px 6px 0 #fff inset !important;
}

.shadow-success {
    box-shadow: 0 4px 6px 0 #0e703b, 0 4px 6px 0 #0e703b inset !important;
}

.shadow-danger {
    box-shadow: 0 4px 6px 0 #c43500, 0 4px 6px 0 #c43500 inset !important;
}

:root {
    --dsi-1: #2e2d5b;
    --dsi-2: #4340a6;
    --dsi-3: #294d26;
    --dsi-4: #015311;
    --dsi-5: #5b472f;
    --dsi-6: #9c0303;
    --dsi-7: #b37227;
    --dsi-8: #b3b226;
    --dsi-1-light: #85849f;
    --dsi-2-light: #363498;
    --dsi-3-light: #133b10;
    --dsi-4-light: #025011;
    --dsi-5-light: #291f12;
    --dsi-6-light: #620202;
    --dsi-7-light: #8c581d;
    --dsi-8-light: #bab84e;
}


/*!
   * Background
*/
.txt-dsi-1 {
    color: var(--dsi-1);
}

.txt-dsi-2 {
    color: var(--dsi-2);
}

.txt-dsi-3 {
    color: var(--dsi-3);
}

.txt-dsi-4 {
    color: var(--dsi-4);
}

.txt-dsi-5 {
    color: var(--dsi-5);
}

.txt-dsi-6 {
    color: var(--dsi-6);
}

.txt-dsi-7 {
    color: var(--dsi-7);
}

.txt-dsi-8 {
    color: var(--dsi-8);
}


/*!
   * Background
*/
.bg-dsi-1 {
    background-color: var(--dsi-1);
}

.bg-dsi-2 {
    background-color: var(--dsi-2);
}

.bg-dsi-3 {
    background-color: var(--dsi-3);
}

.bg-dsi-4 {
    background-color: var(--dsi-4);
}

.bg-dsi-5 {
    background-color: var(--dsi-5);
}

.bg-dsi-6 {
    background-color: var(--dsi-6);
}

.bg-dsi-7 {
    background-color: var(--dsi-7);
}

.bg-dsi-8 {
    background-color: var(--dsi-8);
}
/*!
   * Background - Light
*/
.bg-dsi-1-l {
    background-color: var(--dsi-1-light);
}

.bg-dsi-2-l {
    background-color: var(--dsi-2-light);
}

.bg-dsi-3-l {
    background-color: var(--dsi-3-light);
}

.bg-dsi-4-l {
    background-color: var(--dsi-4-light);
}

.bg-dsi-5-l {
    background-color: var(--dsi-5-light);
}

.bg-dsi-6-l {
    background-color: var(--dsi-6-light);
}

.bg-dsi-7-l {
    background-color: var(--dsi-7-light);
}

.bg-dsi-8-l {
    background-color: var(--dsi-8-light);
}
/*!
   * Background - gradient
*/
.bg-gradient-dsi-1 {
    background: linear-gradient(45deg, var(--dsi-1), var(--dsi-1-light), #000, var(--dsi-1), #000, var(--dsi-1-light));
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}

.bg-gradient-dsi-2 {
    background: linear-gradient(45deg, var(--dsi-2), var(--dsi-2-light), #000, var(--dsi-2), #000, var(--dsi-2-light));
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}

.bg-gradient-dsi-3 {
    background: linear-gradient(45deg, var(--dsi-3), var(--dsi-3-light), #000, var(--dsi-3), #000, var(--dsi-3-light));
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}

.bg-gradient-dsi-4 {
    background: linear-gradient(45deg, var(--dsi-4), var(--dsi-4-light), #000, var(--dsi-4), #000, var(--dsi-4-light));
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}

.bg-gradient-dsi-5 {
    background: linear-gradient(45deg, var(--dsi-5), var(--dsi-5-light), #000, var(--dsi-5), #000, var(--dsi-5-light));
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}

.bg-gradient-dsi-6 {
    background: linear-gradient(45deg, var(--dsi-6), var(--dsi-6-light), #000, var(--dsi-6), #000, var(--dsi-6-light));
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}

.bg-gradient-dsi-7 {
    background: linear-gradient(45deg, var(--dsi-7), var(--dsi-7-light), #000, var(--dsi-7), #000, var(--dsi-7-light));
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}

.bg-gradient-dsi-8 {
    background: linear-gradient(45deg, var(--dsi-8), var(--dsi-8-light), var(--dsi-8-light), #000, var(--dsi-8), #000, var(--dsi-8-light));
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}

.bg-gradient-dsi-0 {
    background: linear-gradient(45deg, var(--dsi-1), var(--dsi-1-light),var(--dsi-2), var(--dsi-2-light),var(--dsi-3), var(--dsi-3-light),var(--dsi-4), var(--dsi-4-light),var(--dsi-5), var(--dsi-5-light),var(--dsi-6), var(--dsi-6-light),var(--dsi-7), var(--dsi-7-light),var(--dsi-8), var(--dsi-8-light) );
    background-size: 400% 400%;
    animation: gradient 15s linear infinite;
    color: white;
}