.explore_sponso-card-body #openbeat {
	display:none;
}

.explore_sponso-card-body:hover #openbeat {
	display: inline-flex!important;
	cursor:pointer;
}

.explore_sponso-card-body:hover #sponso {
	display:none!important;
}

.explore_sponso-title {
	font-family: Poppins;
	font-size: 25px;
	cursor:pointer;
}

.explore_sponso-subtitle {
	font-family: Poppins;
	font-size: 15px;
}

.explore_sponso-username:hover {
	text-decoration: underline!important;
}

.explore_sponso-username {
	cursor:pointer;
}

.col.explore_sponso-colpadding {
	padding-top: 3px;
}

.explore_sponso-colright {
	text-align: right;
	text-align: -webkit-right;
}

.explore_sponso-tag {
	padding: 8px;
    background-color: #e0e0e0;
    border-radius: 32px;
	width: fit-content;
    font-size: 12px;
}

.explore_sponso-card-body:hover {
	background-color: #f7f7f7;
}

.explore_sponso-card-body {
	border-bottom: 1px solid #e2e2e2;
}

.explore_sponso-playbtn {
	margin-right: 5px;
    margin-top: 3px;
	cursor:pointer;
}

.explore_sponso-playbtn:hover {
	color:black!important;
}

.pop {
	font-family: 'Poppins', sans-serif;
	letter-spacing: .2px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.poppins {
	font-family: 'Poppins', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.avatar-busy::before, .avatar-idle::before, .avatar-offline::before, .avatar-online::before {
	z-index:1!important;
}

.sidenav-dark {
    background-color: #1d1d1d!important;
}

@media print {    
    .no-print, .no-print * {
        display: none !important;
    }
}

.ud:hover {
	text-decoration: underline;
}

.rfilt {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: normal;
}

.overlaysb {
  position: relative;
}
.overlaysb:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.35;
}

.overlaysb2 {
  position: relative;
}

.overlaysb2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.65;
}

.overlay-primary:before {
  background-color: #0061f2 !important;
}

.overlay-secondary:before {
  background-color: #6900c7 !important;
}

.overlay-success:before {
  background-color: #00ac69 !important;
}

.overlay-info:before {
  background-color: #00cfd5 !important;
}

.overlay-warning:before {
  background-color: #f4a100 !important;
}

.overlay-danger:before {
  background-color: #e81500 !important;
}

.overlay-light:before {
  background-color: #eff3f9 !important;
}

.overlay-dark:before {
  background-color: #1f2d41 !important;
}

.overlay-black:before {
  background-color: #000 !important;
}

.overlay-white:before {
  background-color: #fff !important;
}

.overlay-red:before {
  background-color: #e81500 !important;
}

.overlay-orange:before {
  background-color: #f76400 !important;
}

.overlay-yellow:before {
  background-color: #f4a100 !important;
}

.overlay-green:before {
  background-color: #00ac69 !important;
}

.overlay-teal:before {
  background-color: #00ba94 !important;
}

.overlay-cyan:before {
  background-color: #00cfd5 !important;
}

.overlay-blue:before {
  background-color: #0061f2 !important;
}

.overlay-indigo:before {
  background-color: #5800e8 !important;
}

.overlay-purple:before {
  background-color: #6900c7 !important;
}

.overlay-pink:before {
  background-color: #e30059 !important;
}

.overlay-red-soft:before {
  background-color: #eec7c7 !important;
}

.overlay-orange-soft:before {
  background-color: #f1d6c7 !important;
}

.overlay-yellow-soft:before {
  background-color: #f0e3c7 !important;
}

.overlay-green-soft:before {
  background-color: #bfe5dc !important;
}

.overlay-teal-soft:before {
  background-color: #bfe8e5 !important;
}

.overlay-cyan-soft:before {
  background-color: #bfecf2 !important;
}

.overlay-blue-soft:before {
  background-color: #bfd6f8 !important;
}

.overlay-indigo-soft:before {
  background-color: #d1c2f6 !important;
}

.overlay-purple-soft:before {
  background-color: #d4c2ef !important;
}

.overlay-pink-soft:before {
  background-color: #edc2d9 !important;
}

.overlay-primary-soft:before {
  background-color: #bfd6f8 !important;
}

.overlay-secondary-soft:before {
  background-color: #d4c2ef !important;
}

.overlay-success-soft:before {
  background-color: #bfe5dc !important;
}

.overlay-info-soft:before {
  background-color: #bfecf2 !important;
}

.overlay-warning-soft:before {
  background-color: #f0e3c7 !important;
}

.overlay-danger-soft:before {
  background-color: #eec7c7 !important;
}

.overlay-10:before {
  opacity: 0.1;
}

.overlay-20:before {
  opacity: 0.2;
}

.overlay-30:before {
  opacity: 0.3;
}

.overlay-40:before {
  opacity: 0.4;
}

.overlay-50:before {
  opacity: 0.5;
}

.overlay-60:before {
  opacity: 0.6;
}

.overlay-70:before {
  opacity: 0.7;
}

.overlay-80:before {
  opacity: 0.8;
}

.overlay-90:before {
  opacity: 0.9;
}


.sqr {
  --size: 200px;
  height: var(--size);
  width: var(100%);
  background-image: var(--img);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.sqr::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc(var(--size) * 0.05);
    left: 50%;
    transform: translateX(-50%);
    background-image: var(--img);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    filter: blur(20px) opacity(83%);
}


h1 {
  margin-bottom: 80px;
}

code {
  background-color: #343434;
  color: orange;
  border-radius: 4px;
}

.sqrs {
  display: flex;
  flex-flow: row wrap;
  justify-items: center;
  justify-content: center;
  align-items: center;
}

.module > header {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: inherit;
	background-attachment: fixed;
	overflow: hidden;
    padding-top: 5px;
    padding-bottom: 15px;
    padding-right: 10px;
    padding-left: 20px;
}
.module > header::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 200%;
  height: 200%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
.module > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25)
}
.module > header > .title {
  margin: 0;
  color: white;
  position: relative;
  z-index: 1;
  text-shadow: 0px 0px 10px rgb(0, 0, 0);
}

@media (max-width: 480px) {
	.rotate {
		display:block!important;
		z-index:99999!important;
	}
}

.text-sangre {
	color: #d81300;
    text-decoration: none;
    background-color: transparent;
}

.text-sangre:hover {
	color: #d81300!important;
    text-decoration: none;
    background-color: transparent;
}

a > .text-sangre {
	color: #d81300;
    text-decoration: none;
    background-color: transparent;
}

.btn-sangre {
    color: #fff!important;
    background-color: #d8121d!important;
    border-color: #d8121d!important;
}

.btn-sangre:hover {
    color: #fff;
    background-color: #c7010c!important;
    border-color: #c7010c!important;
}

[id="toggle-heart"] {
  position: absolute;
  left: -100vw;
}
[id="toggle-heart"]:checked + label {
  color: #e2264d;
  -webkit-filter: none;
          filter: none;
  will-change: font-size;
  -webkit-animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
          animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
[id="toggle-heart"]:checked + label:before, [id="toggle-heart"]:checked + label:after {
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
[id="toggle-heart"]:checked + label:before {
  will-change: transform, border-width, border-color;
  -webkit-animation-name: bubble;
          animation-name: bubble;
}
[id="toggle-heart"]:checked + label:after {
  will-change: opacity, box-shadow;
  -webkit-animation-name: sparkles;
          animation-name: sparkles;
}
[id="toggle-heart"]:focus + label {
  text-shadow: 0 0 3px white, 0 1px 1px white, 0 -1px 1px white, 1px 0 1px white, -1px 0 1px white;
}

[for="toggle-heart"] {
  align-self: center;
  position: relative;
  color: #888;
  font-size: 2em;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
[for="toggle-heart"]:before, [for="toggle-heart"]:after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: "";
}
[for="toggle-heart"]:before {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem #e2264d;
  width: 4.5rem;
  height: 4.5rem;
  -webkit-transform: scale(0);
          transform: scale(0);
}
[for="toggle-heart"]:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -3rem 0 -0.1875rem #ff8080, -0.32476rem -2.625rem 0 -0.1875rem #ffed80, 2.54798rem -1.61656rem 0 -0.1875rem #ffed80, 1.84982rem -1.89057rem 0 -0.1875rem #a4ff80, 2.85252rem 0.98418rem 0 -0.1875rem #a4ff80, 2.63145rem 0.2675rem 0 -0.1875rem #80ffc8, 1.00905rem 2.84381rem 0 -0.1875rem #80ffc8, 1.43154rem 2.22414rem 0 -0.1875rem #80c8ff, -1.59425rem 2.562rem 0 -0.1875rem #80c8ff, -0.84635rem 2.50595rem 0 -0.1875rem #a480ff, -2.99705rem 0.35095rem 0 -0.1875rem #a480ff, -2.48692rem 0.90073rem 0 -0.1875rem #ff80ed, -2.14301rem -2.12438rem 0 -0.1875rem #ff80ed, -2.25479rem -1.38275rem 0 -0.1875rem #ff8080;
}

@-webkit-keyframes heart {
  0%,
	17.5% {
    font-size: 0;
  }
}

@keyframes heart {
  0%,
	17.5% {
    font-size: 0;
  }
}
@-webkit-keyframes bubble {
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }
  30%,
	100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}
@keyframes bubble {
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }
  30%,
	100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: #cc8ef5;
    border-width: 0;
  }
}
@-webkit-keyframes sparkles {
  0%,
	20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}
@keyframes sparkles {
  0%,
	20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080, -0.32476rem -2.0625rem 0 0rem #ffed80, 2.1082rem -1.26585rem 0 0rem #ffed80, 1.41004rem -1.53985rem 0 0rem #a4ff80, 2.30412rem 0.85901rem 0 0rem #a4ff80, 2.08305rem 0.14233rem 0 0rem #80ffc8, 0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}


@media (min-width: 768px) {
  /* show 3 items */
  .carousel-inner .active,
  .carousel-inner .active + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item  {
    display: block;
  }

  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    -webkit-transition: none;
    transition: none;
  }

  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -25%;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* left or forward direction */
  .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* right or prev direction */
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}
.carousel-item { margin-right: auto !important; }
@media (min-width: 1600px) {
  #carou {
    display: block!important;
  }
}

.dasgootshit:hover {
	border-radius: 0.35rem!important;
}

.bg-animated {
	transition: left 0s ease-in-out, background-color 1s ease-out 0s;
}

.bg-night {
	background-color: #333!important;
}

.card {
	border: 0px!important;
}

.dasgootshit:hover {
  transform: scale(1.05);
  z-index:46545646546;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
}

#pills-cert-tab:hover
{
	background: linear-gradient(to right, #d6a8f9, #86e7e7, #8fc5f9);
	color: #000!important;
}
#pills-cert-tab:active
{
	background: linear-gradient(to right, #c283f3, #46ecec, #54a7f7);
	color: #000!important;
}

#pills-cert-tab .active
{
	background: linear-gradient(to right, #d6a8f9, #86e7e7, #8fc5f9);
	color: #000!important;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: white;
  #border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #ffffff;
}
::-webkit-scrollbar-track {
  background: #1a2738;
  #border: 0px none #ffffff;
  #border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.bg-gradient-sky {
	background: linear-gradient(to right, #E91E63, #9C27B0, #03A9F4);
}

.bg-gradient-abyss {
	background: linear-gradient(to right, #edd6ff, #86e7e7, #d6ebff);
}

.border-circle {
	border: 2px solid #5a5c69;
}

.profile-header-container{
    margin: 0 auto;
    text-align: center;
}

.profile-header-img {
    padding: 54px;
	padding-top: 0!important;
    padding-bottom: 0!important;
}

.profile-header-img > img.img-circle {
    width: 120px;
    height: 120px;
    border: 2px solid #51D2B7;
}


/**
 * Ranking component
 */
.rank-label-container {
    margin-top: -19px;
    /* z-index: 1000; */
    text-align: center;
}

.label.label-default.rank-label {
    background-color: #5a5c69;
	color: #fff;
    padding: 5px 10px 5px 10px;
    padding: 0.25em 0.4em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.35rem;
}

.emp-profile{
    padding: 3%;
    margin-top: 3%;
    margin-bottom: 3%;
    border-radius: 0.5rem;
    background: #fff;
}
.profile-img{
    text-align: center;
}
.profile-img img{
}
.profile-img .file {
    position: relative;
    overflow: hidden;
    margin-top: -20%;
    border: none;
    border-radius: 0;
    font-size: 15px;
    background: #212529b8;
}
.profile-img .file input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
}
.profile-head h5{
    color: #333;
}
.profile-head h6{
    color: #0062cc;
}
.profile-edit-btn{
    border: none;
    border-radius: 1.5rem;
    width: 70%;
    padding: 2%;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
}
.proile-rating{
    font-size: 12px;
    color: #818182;
    margin-top: 5%;
}
.proile-rating span{
    color: #495057;
    font-size: 15px;
    font-weight: 600;
}
.profile-head .nav-tabs{
    margin-bottom:5%;
}
.profile-head .nav-tabs .nav-link{
    font-weight:600;
    border: none;
}
.profile-head .nav-tabs .nav-link.active{
    border: none;
    border-bottom:2px solid #0062cc;
}
.profile-work{
    padding: 14%;
    margin-top: -15%;
}
.profile-work p{
    font-size: 12px;
    color: #818182;
    font-weight: 600;
    margin-top: 10%;
}
.profile-work a{
    text-decoration: none;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}
.profile-work ul{
    list-style: none;
}
.profile-tab label{
    font-weight: 600;
}
.profile-tab p{
    font-weight: 600;
    color: #0062cc;
}


.dropdown-list-image .status-indicator {
    background-color: #eaecf4;
    height: .75rem;
    width: .75rem;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    border: .125rem solid #fff;
}

.imggrp {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.imggrp:hover .overlay {
  opacity: 0.7;
}

.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.fa-pen-square {
	opacity:1;
}

.overlay-radius:before {
	border-radius: 6px;
}

.fa-pen-square:hover {
  color: #eee;
  opacity: 1;
}

/*#posts {
    opacity:0;
    animation: anim 0.3s linear forwards 0s;
}*/

.badge-purple {
    color: #fff;
    background-color:#9617b8;
}

@media only screen and (max-width: 1026px) 
{
	.hiddable {
		display:none!important;
	}
	.displayable {
		display:block!important;
	}
}

.centre {
    position:absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px; /* Cette valeur doit être la moitié négative de la valeur du width */
    margin-top: -100px; /* Cette valeur doit être la moitié négative de la valeur du height */
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}

html,body {
    height:100%;
}

*:focus
{
	outline: none;
}

/*body
{
	font-family: Helvetica, Arial;
	margin: 0;
	background-color: #ffeff5;
}*/

#app-cover
{
	/*position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	width: 430px;*/
	height: 100px;
	/*margin: -4px auto;*/
}

/*#bg-artwork
{
	position: fixed;
	top: -30px;
	right: -30px;
	bottom: -30px;
	left: -30px;
	background-image: url("https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	filter: blur(40px);
	-webkit-filter: blur(40px);
	z-index: 1;
}*/

/*#bg-layer
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	opacity: 0.51;
	z-index: 2;
}*/

#player
{
	position: relative;
	z-index: 3;
}

#player-track
{
	position: absolute;
	top: 0;
	right: 15px;
	left: 15px;
	padding: 13px 22px 10px 184px;
	background-color: #fff7f7;
	border-radius: 15px 15px 0 0;
	transition: 0.3s ease top;
	z-index: 1;
}

#player-track.active
{
	top: -92px;
}

#album-name
{
	color: #54576f;
	font-size: 17px;
	font-weight: bold;
}

#track-name
{
	color: #acaebd;
	font-size: 13px;
	margin: 2px 0 13px 0;
}

#track-time
{
	height: 12px;
	margin-bottom: 3px;
	overflow: hidden;
}

#current-time
{
	float: left;
}

#track-length
{
	float: right;
}

#current-time, #track-length
{
	color: transparent;
	font-size: 11px;
	background-color: #fff;
	border-radius: 10px;
	transition: 0.3s ease all;
}

#track-time.active #current-time, #track-time.active #track-length
{
	color: #f86d92;
	background-color: transparent;
}

#s-area, #seek-bar
{
	position: relative;
	height: 4px;
	border-radius: 4px;
}

#s-area
{
	background-color:#ffe8ee;
	cursor: pointer;
}

#ins-time
{
	position: absolute;
	top: -29px;
	color: #fff;
	font-size: 12px;
	white-space: pre;
	padding: 5px 6px;
	border-radius: 4px;
	display:none;
}

#s-hover
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	opacity: 0.2;
	z-index: 2;
}

#ins-time, #s-hover
{
	background-color: #3b3d50;
}

#seek-bar
{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background-color: #fd6d94;
	transition: 0.2s ease width;
	z-index: 1;
}

#player-content
{
	position: relative;
	height: 100%;
	background-color: #fff;
	box-shadow: 0 0px 20px #656565;
	border-radius: 15px;
	z-index: 2;
}

#album-art
{
	position: absolute;
	top: -40px;
	width: 115px;
	height: 115px;
	margin-left: 40px;
	transform: rotateZ(0);
	transition: 0.3s ease all;
	box-shadow: 0 0 0 10px #fff;
	border-radius: 50%;
	overflow: hidden;
}

#album-art.active
{
	top: -60px;
	box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}

#album-art:before
{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	width: 20px;
	height: 20px;
	margin: -10px auto 0 auto;
	background-color: #d6dee7;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #fff;
	z-index: 2;
}

#album-art img
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: -1;
}

#album-art img.active
{
	opacity: 1;
	z-index: 1;
}

#album-art.active img.active
{
	z-index: 1;
	animation: rotateAlbumArt 3s linear 0s infinite forwards;
}

@keyframes rotateAlbumArt
{
	0%{ transform: rotateZ(0); }
	100%{ transform: rotateZ(360deg); }
}

#buffer-box
{
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 13px;
	color: #1f1f1f;
	font-size: 13px;
	font-family: Helvetica;
	text-align: center;
	font-weight: bold;
	line-height: 1;
	padding: 6px;
	margin: -12px auto 0 auto;
	background-color: rgba(255, 255, 255, 0.19);
	opacity: 0;
	z-index: 2;
}

#album-art img, #buffer-box
{
	transition: 0.1s linear all;
}

#album-art.buffering img
{
	opacity: 0.25;
}

#album-art.buffering img.active
{
	opacity: 0.8;
	filter: blur(2px);
	-webkit-filter: blur(2px);
}

#album-art.buffering #buffer-box
{
	opacity: 1;
}

#player-controls
{
	width: 250px;
	height: 100%;
	margin: 0 5px 0 141px;
	float: right;
	overflow: hidden;
}

.control
{
	width: 33.333%;
	float: left;
	padding: 12px 0;
}

.button
{
	/*width: 26px;
	height: 26px;*/
	padding: 25px;
	background-color: #fff;
	border-radius: 6px;
	cursor: pointer;
}

.button i
{
	display: block;
	color: #d6dee7;
	font-size: 26px;
	text-align: center;
	line-height: 1;
}

.button, .button i
{
	transition: 0.2s ease all;
}

.button:hover
{
	background-color: #d6d6de;
}

.button:hover i
{
	color: #fff;
}

body {
	line-height: 1.2!important;
}

.imgbgcrop {
	width: 100%;
	height: 350px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.backgroundesque 
{
	background:url(https://contents.instrurap.fr/assets/images/pexels-photo-1707215.jpeg) no-repeat center center fixed;
	background-size:cover;
	transform: rotate(180dec);
}

@font-face {
 font-family: "Rap";
 src: url('https://contents.instrurap.fr/assets/fonts/RaphLanokFuture.otf') format('truetype');
}

.no-scroll {
	overflow:hidden;
}

@font-face {
 font-family: "Signature";
 src: url('https://contents.instrurap.fr/assets/fonts/sign.ttf') format('truetype');
}

.bg-login-image {
    background: url(https://contents.instrurap.fr/assets/images/beatmaklogin.jpg)!important;
    background-position: center!important;
    background-size: cover!important;
}

.bg-gradient-danger {
  background-color: #e74a3b;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #e74a3b), to(#be2617));
  background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
  background-size: cover;
}

.bg-gradient-dark {
  background-color: #333;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #333), to(#333));
  background-image: linear-gradient(180deg, #333 10%, #333 100%);
  background-size: cover;
}

.bg-gradient-secondary {
  background-image: linear-gradient(90deg, #a0a0a0 10%, #a0aaad 100%);
  background-size: cover;
}

.bg-gradient-tropical {
  background-image: linear-gradient(90deg, #a39867 10%, #034458 100%);
  background-size: cover;
}

.bg-snow {
	background-image: linear-gradient(to right, #311919, #7b1711, #670e00, rgb(37, 45, 51));
}

.bg-gradient {
	background-image: linear-gradient(to right, #311919, #7b1711, #670e00, rgb(37, 45, 51));
}

.bg-gradient-sangre {
	background: linear-gradient(to right, #6f0800, #7d0000, #790404);
}

.dropdown-menu
{
	margin-bottom: 15px;
}

.right 
{
	position:absolute;
	right:20px;
	top:20px;
}   
.right2 
{
	position:absolute;
	right:45px;
	top:20px;
}

.right3 
{
	float:right;
	margin-top: 8px;
}

/*@media only screen and (max-width: 1026px) {
    #tdsp {
        display: none;
    }
	div.card-body div.gne img
	{
		width:100%!important;
	}
}*/

.border-left {
  border-left: 1px solid #e3e6f0 !important;
}

.border-left-dark {
  border-left: 0.25rem solid #000 !important;
}

.border-bottom-dark {
  border-bottom: 0.25rem solid #000 !important;
}

.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

/*@media only screen and (max-width: 1026px) 
{
	#img_loc69 
	{
		max-width:800px!important;
	}
}	*/

div.card-body div.gne img
{
width:100%!important;
}

/*@media only screen and (max-width: 1200px) {
	body {
		font-size: larger!important;
		#background:url(https://contents.instrurap.fr/assets/images/pexels-photo-1707215.jpeg) no-repeat center center fixed;
		#background-size:cover;
		margin-bottom:20px;
	}
	.nav-scroller {
		margin-top: -32px!important;
	}
	.container {
		width:95%!important;
	}
    #posts {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
    }  
	#cardbd {
		max-width:800px!important;
    }  
	#fb {
		display:none;
    }
	.hide {
		display:none;
	}
	#sitelogo {
		font-size:1em !important;
	}
	#biglogo {
		font-size:4em !important;
		margin-left:-40px !important;
	}
	
}*/
/*@media only screen and (max-width: 992px) {
	h5 {
		font-size: 28px!important;
	}
	small {
		font-size: 14px!important;
	}
	h6 {
		font-size: 18px!important;
	}
	p {
		font-size: 24px!important;
	}
	span {
		font-size: 14px!important;
	}
	td {
		font-size: 14px!important;
	}
	
}*/
/*
@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition-timing-function: ease-in-out;
    transition-duration: .3s;
    transition-property: left, visibility;
  }
  .offcanvas-collapse.open {
    left: 0;
    visibility: visible;
  }
}*/

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.text-white-50 { color: rgba(255, 255, 255, .5); }

.bg-purple { background-color: #6f42c1; }

.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }