html, body {
    height: 100%;
    background-color: #000000;
    font-family: 'sans serif';
    color: #666;
}

.navbar-purple {
  background-color: #5e2556;
  color: #e213c6;
  
}
.ycam-txt {
  color:#eaeaea;
}
a {
  text-decoration: none;
  color: white;
}

.btn-outline-search {
  color: #e213c6;
  border-color: #e213c6;
}

.navlink {
  color: #999 !important;
}

/*.nav-link, .nav-tabs .nav-link active{
  background-color: gold;
}*/
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  background-color: #e213c6;  
}

.nav-link :active{
  color: #e213c6;
  background-color: #4dd03c;
}


.top {
  color: #eeeeee !important;
}

.bg-primary {
  background-color:#6c757d !important;
}

.footer {
    background-color:#000 !important;
    color:white !important;
}

.spinner-div {
    display: inline-block;
    padding: 20px;
  }
  .spinner-circle {
    width: 56px;
    height: 56px;
    position: relative;
    margin: 20px;
  }
  .spinner {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 5px solid rgba(0,0,0,0.3);
    border-right: 5px solid #aa4444;
    animation: rotate--spinner 1.6s linear infinite;
    box-sizing: border-box;
  }
  .spinner-img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    font-size: 50px;
  }
  
  @keyframes rotate--spinner {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .profile-mini {
    border-radius: 50%;
    /*width:calc((64px * 2) + (32px * (2 - 1)));*/
  }
  .profile-mini-photo {
    border-radius: 10%;
    background-color: #aa4444;
  }
  
  .profiles-grid__container {
    width: 100%;
}
  .profiles-grid__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
  }
  .profile-mini__content--bottom {
    /*margin-top: .9375rem;*/
    width: auto;
}

.ratings {
  margin-right: 10px
}

.ratings i {
  color: #cecece;
  font-size: 32px
}

.rating-color {
  color: #fbc634 !important
}

.review-count {
  font-weight: 400;
  margin-bottom: 2px;
  font-size: 24px !important
}

.small-ratings i {
  color: #cecece;
  font-size: 10px
}

.review-stat {
  font-weight: 300;
  font-size: 18px;
  margin-bottom: 2px
}

/*.card{ border-radius: 10%;}*/
/*
.card-columns {
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}*/

body2{
  margin-top:20px;
  color: #1a202c;
  text-align: left;
  background-color: #e2e8f0;    
}
.main-body {
  padding: 15px;
}
.droparea .onHover{
  background-color: greenyellow;
}
.droparea:-moz-drag-over {
  border: 1px solid black;
  background-color: orange;
}
.card2 {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
}

.wh-16-10e {
  max-height: 238px;
}

/*
.col-12 mini-image img {
  height: unset;
  width: unset;
  padding: unset;
  margin: unset;
}*/
.mini-image{
  max-height: 24px;
  max-width: 24px;
  height: unset;
  width: unset ;
  padding: unset !important;
  margin: unset !important;
}

.prestationLogo{
  height: unset;
  width: unset;
  max-height: 30px;
  max-width: 30px;
  height: 30px;
  /*background-color: #eaeaea;*/
  border-radius: 5px;
  margin: 1px;
}
.prestationLogo :hover{
  background-color: #c8c7cc;
}
.prestationLogoBtn{
  height: unset;
  width: unset;
  max-height: 35px;
  max-width: 35px;
  height: 35px;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-left: unset;
}
.prestationLogoBtn :hover{
  background-color: #c8c7cc;
}
.card2 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0 solid rgba(0,0,0,.125);
  border-radius: .25rem;
}

.card-body2 {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1rem;
}

.gutters-sm2 {
  margin-right: -8px;
  margin-left: -8px;
}

.gutters-sm2>.col, .gutters-sm2>[class*=col-] {
  padding-right: 8px;
  padding-left: 8px;
}
.mb-3-2, .my-3-2 {
  margin-bottom: 1rem!important;
}

.bg-gray-300 {
  background-color: #e2e8f0;
}
.h-100 {
  height: 100%!important;
}
.shadow-none {
  box-shadow: none!important;
}

.reddot {
  height: 20vw;
  width: 20vw;
  background-color: #D03C3C;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 100vw;
  left: 100vw;
}
.greendot {
  height: 1vw;
  width: 1vw;
  background-color: #4dd03c;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 100vw;
  left: 100vw;
}
.online-indicator {
  display: flex;
  align-items: center;
}
.online-indicator__bullet {
  display: inline-block;
  border-radius: 50%;
  background-color: #00c2ab;
  width: .5rem;
  height: .5rem;
}

.state-indicator {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  position: absolute;
  background-color: #38f51f;
  top: 1.41176rem;
  left: 1.41176rem;
  border: 2px solid #fff;
}

 .sub-price{
  vertical-align: super;
  font-size: smaller;
  color: orange;
 }


/*****  profils ******/

.profile-info-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.friend-list,
.img-grid-list {
  margin: -1px;
  list-style-type: none;
}
.profile-info-list > li.title {
  font-size: 0.625rem;
  font-weight: 700;
  color: #8a8a8f;
  padding: 0 0 0.3125rem;
}
.profile-info-list > li + li.title {
  padding-top: 1.5625rem;
}
.profile-info-list > li {
  padding: 0.625rem 0;
}
.profile-info-list > li .field {
  font-weight: 700;
}
.profile-info-list > li .value {
  color: #666;
}
.profile-info-list > li.img-list a {
  display: inline-block;
}
.profile-info-list > li.img-list a img {
  max-width: 2.25rem;
  -webkit-border-radius: 2.5rem;
  -moz-border-radius: 2.5rem;
  border-radius: 2.5rem;
}
.coming-soon-cover img,
.email-detail-attachment .email-attachment .document-file img,
.email-sender-img img,
.friend-list .friend-img img,
.profile-header-img img {
  max-width: 100%;
}
.table.table-profile th {
  border: none;
  color: #000;
  padding-bottom: 0.3125rem;
  padding-top: 0;
}
.table.table-profile td {
  border-color: #c8c7cc;
}
.table.table-profile tbody + thead > tr > th {
  padding-top: 1.5625rem;
}
.table.table-profile .field {
  color: #666;
  font-weight: 600;
  width: 25%;
  text-align: right;
}
.table.table-profile .value {
  font-weight: 500;
}
.profile-header {
  position: relative;
  overflow: hidden;
}
.profile-header .profile-header-cover {
  background: url(https://bootdey.com/img/Content/bg1.jpg) center no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.profile-header .profile-header-cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.85) 100%);
}
.profile-header .profile-header-content,
.profile-header .profile-header-tab,
.profile-header-img,
body .fc-icon {
  position: relative;
}
.profile-header .profile-header-tab {
  background: #e213c6;
  list-style-type: none;
  margin: -1.25rem 0 0;
  padding: 0 0 0 8.75rem;
  border-bottom: 1px solid #c8c7cc;
  white-space: nowrap;
}
.profile-header .profile-header-tab > li {
  display: inline-block;
  margin: 0;
}
.profile-header .profile-header-tab > li > a {
  display: block;
  color: #000;
  line-height: 1.25rem;
  padding: 0.625rem 1.25rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.75rem;
  border: none;
}
.profile-header .profile-header-tab > li.active > a,
.profile-header .profile-header-tab > li > a.active {
  color: #007aff;
}
.profile-header .profile-header-content:after,
.profile-header .profile-header-content:before {
  content: "";
  display: table;
  clear: both;
}
.profile-header .profile-header-content {
  color: #fff;
  padding: 1.25rem;
}
body .fc th a,
body .fc-ltr .fc-basic-view .fc-day-top .fc-day-number,
body .fc-widget-header a {
  color: #000;
}
.profile-header-img {
  float: left;
  width: 7.5rem;
  height: 7.5rem;
  overflow: hidden;
  z-index: 10;
  margin: 0 1.25rem -1.25rem 0;
  padding: 0.1875rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  background: #fff;
}
.profile-header-info h4 {
  font-weight: 500;
  margin-bottom: 0.3125rem;
}
.profile-container {
  padding: 1.5625rem;
}
.profile-champ{
  background-color: #efefef;
  border-radius: 5px;
}
@media (max-width: 967px) {
  .profile-header-img {
      width: 5.625rem;
      height: 5.625rem;
      margin: 0;
  }
  .profile-header-info {
      margin-left: 6.5625rem;
      padding-bottom: 0.9375rem;
  }
  .profile-header .profile-header-tab {
      padding-left: 0;
  }
}
@media (max-width: 767px) {
  .profile-header .profile-header-cover {
      background-position: top;
  }
  .profile-header-img {
      width: 3.75rem;
      height: 3.75rem;
      margin: 0;
  }
  .profile-header-info {
      margin-left: 4.6875rem;
      padding-bottom: 0.9375rem;
  }
  .profile-header-info h4 {
      margin: 0 0 0.3125rem;
  }
  .profile-header .profile-header-tab {
      white-space: nowrap;
      overflow: scroll;
      padding: 0;
  }
  .profile-container {
      padding: 0.9375rem 0.9375rem 3.6875rem;
  }
  .friend-list > li {
      float: none;
      width: auto;
  }
}
.profile-info-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.friend-list,
.img-grid-list {
  margin: -1px;
  list-style-type: none;
}
.profile-info-list > li.title {
  font-size: 0.625rem;
  font-weight: 700;
  color: #8a8a8f;
  padding: 0 0 0.3125rem;
}
.profile-info-list > li + li.title {
  padding-top: 1.5625rem;
}
.profile-info-list > li {
  padding: 0.625rem 0;
}
.profile-info-list > li .field {
  font-weight: 700;
}
.profile-info-list > li .value {
  color: #666;
}
.profile-info-list > li.img-list a {
  display: inline-block;
}
.profile-info-list > li.img-list a img {
  max-width: 2.25rem;
  -webkit-border-radius: 2.5rem;
  -moz-border-radius: 2.5rem;
  border-radius: 2.5rem;
}
.coming-soon-cover img,
.email-detail-attachment .email-attachment .document-file img,
.email-sender-img img,
.friend-list .friend-img img,
.profile-header-img img {
  max-width: 100%;
}
.table.table-profile th {
  border: none;
  color: #000;
  padding-bottom: 0.3125rem;
  padding-top: 0;
}
.table.table-profile td {
  border-color: #c8c7cc;
}
.table.table-profile tbody + thead > tr > th {
  padding-top: 1.5625rem;
}
.table.table-profile .field {
  color: #666;
  font-weight: 600;
  width: 25%;
  text-align: right;
}
.table.table-profile .value {
  font-weight: 500;
}

.row.row-space-2 {
  margin: 0 -1px;
}
.m-b-2 {
  margin-bottom: 2px!important;
}
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.row.row-space-2>[class*=col-] {
  padding: 0 1px;
}


/****  gallerie photo en col et tab *****/

.close { /*pour le modal*/
  font-size: 1.5rem;
}
.btn-close-dark {
  color: rgba(255,255,255,.55);
}
.btn-close :hover{
  background-color: #38f51f;
  color: #fbc634;
}

.modal-body{
  background-color: #000000;
}
.modal-header{
  border-bottom: none;
}

.col-12 img {
  opacity: 0.7;
  cursor: pointer;
  margin: 2rem;
  width: 100%;
}

.col-12 img:hover {
  opacity: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/** Masonry ***/
.masonry { /* Masonry container */
  -webkit-column-count: 4;
-moz-column-count:4;
column-count: 4;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
 margin: 1.5em;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: .85em;
}
.itemMasonry {
  display: inline-block;
  background: #fff;
  padding: 1em;
  margin: 0 0 1.5em;
  width: 100%;
-webkit-transition:1s ease all;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 2px 2px 4px 0 #ccc;
}
.itemMasonry img{max-width:100%;}

@media only screen and (max-width: 320px) {
  .masonry {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      column-count: 1;
  }
}

@media only screen and (min-width: 321px) and (max-width: 768px){
  .masonry {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
  .masonry {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
  }
}
@media only screen and (min-width: 1201px) {
  .masonry {
      -moz-column-count: 4;
      -webkit-column-count: 4;
      column-count: 4;
  }
}

/*  Pour lecteur video */

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 3;
  }
  @include media-breakpoint-only(xl) {
    column-count: 2;
  }
}

.progress{
    height: 16px;
}
.video-chrome-controls {
  height:40px;
  line-height:40px;
  font-size:109%;
  text-align:left;
  direction:ltr;
  padding: 1px;
  padding-left: 1px;
  align-items: center;
 }

 #video-container {
	/*width: 640px;
	height: 365px;*/
	position: relative;
}
/***
.videoReader :not(:fullscreen :-ms-fullscreen :-webkit-full-screen :-moz-full-screen) {
  background-color: #afa;
}
.videoReader :fullscreen :-ms-fullscreen :-webkit-full-screen :-moz-full-screen{
  background-color: rgb(68, 184, 230);
  max-height: 100%;
  max-width: 100%;
}
#myvideoTEST :fullscreen :-ms-fullscreen :-moz-full-screen :-webkit-full-screen { max-height: 100%; max-width: 100%;}
***/
#video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 5px;
  max-height: 30px  ;
	opacity: 0;
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-o-transition: opacity .3s;
	-ms-transition: opacity .3s;
	transition: opacity .3s;
	background-image: linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
	background-image: -o-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.13, rgb(3,113,168)),
		color-stop(1, rgb(0,136,204))
	);
}

#video-container:hover #video-controls {
	opacity: .9;
}

/*#video-container:hover #video-controls {

  -webkit-animation: cssAnimation 5s forwards; 
  animation: cssAnimation 5s forwards;
}*/

.videoControlsVisible {

  -webkit-animation: cssAnimation 1s forwards; 
  animation: cssAnimation 1s forwards;
}

@keyframes cssAnimation {
  0%   {opacity: .9;}
  90%  {opacity: .9;}
  100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
  0%   {opacity: .9;}
  90%  {opacity: .9;}
  100% {opacity: 0;}
}

#video-container[hidden] {
  display: flex;
  opacity: 0;
  pointer-events: none;
}

#video-container[size="hidden"] {
  display: none;
}
/*
.controlsSpacer[hideCursor] {
  cursor: none;
}*/




.buttonVid {
	background: rgba(0,0,0,.5);
	border: 0;
	color: #EEE;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}

.buttonVid:hover {
	cursor: pointer;
}

#seek-bar {
	width: 360px;
}


#volume-bar {
	width: 60px;
}

.video-request-controls #video-request-container{
  background-color: #e213c6;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
  top: 0;
	/*left: 0;*/
  max-width: 48px;
	right: 50px;
	padding: 5px;
	opacity: 0;
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-o-transition: opacity .3s;
	-ms-transition: opacity .3s;
	transition: opacity .3s;
}
.video-request-controls:hover #video-request-container{
	opacity: .9;
}

/**** sid bars ****/

.b-example-divider {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
  vertical-align: -.125em;
  pointer-events: none;
  fill: currentColor;
}

.dropdown-toggle { outline: 0; }

.nav-flush .nav-link {
  border-radius: 0;
}

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, .65);
  background-color: transparent;
  border: 0;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, .85);
  background-color: #d2f4ea;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  display: inline-flex;
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #d2f4ea;
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }

.bg-opacity {
  background: rgba(94,37,86,0.5);
}

/**** chat *****/
#chat3 .form-control {
  border-color: transparent;  
}

#chat3 .form-control:focus {
  border-color: transparent;
  box-shadow: inset 0px 0px 0px 1px transparent;
}

.badge-dot {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  margin-left: 2.9rem;
  margin-top: -.75rem;
}
#chat4 .form-control {
  border-color: transparent;
}
  
#chat4 .form-control:focus {
  border-color: transparent;
  box-shadow: inset 0px 0px 0px 1px transparent;
}

.divider:after,
.divider:before {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}


/** Login modal*/

/* .container {
  padding: 2rem 0rem;
} */

/*
@media (min-width: 576px){
  .modal-dialog {
    max-width: 400px;
    
    .modal-content {
      padding: 1rem;
    }
  }
} */
.modal-dialog {
    min-width: 400px;
   
}
.loginModal{
  background-color: #38f51f;
}
.modal-dialog.loginModal.modal-content {padding: 1rem;}

.modal-header.close {
    margin-top: -1.5rem;
  }


.form-title {
  /*margin: -2rem 0rem 2rem;*/
}

.btn-round {
  border-radius: 3rem;
}

.delimiter {
  padding: 1rem;  
}

.social-buttons.btn {
    margin: 0 0.5rem 1rem;
  
}

.signup-section {
  padding: 0.3rem 0rem;
}

/**  +++++++++++++++ user profile +++++++++++++++ */



.cardUP {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
}

.cardUP {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0 solid rgba(0,0,0,.125);
  border-radius: .25rem;
}

.card-body.card-bodyUP {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1rem;
}

.gutters-smUP {
  margin-right: -8px;
  margin-left: -8px;
}

.gutters-smUP>.col, .gutters-sm>[class*=col-] {
  padding-right: 8px;
  padding-left: 8px;
}
.mb-3UP, .my-3UP {
  margin-bottom: 1rem!important;
}

.bg-gray-300UP {
  background-color: #e2e8f0;
}
.h-100UP {
  height: 100%!important;
}
.shadow-noneUP {
  box-shadow: none!important;
}

/** CURRENCY **/

.currency-pill{
  margin-top: .5em;
  margin-bottom: .05em;
  padding: 0px;
}

/** ++++++++++  gestion mots de passe **/
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}

#message p {
  padding: 5px 17px;
  font-size: 18px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -17px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -17px;
  content: "✖";
}

/****   purchases history table ****/
.minFontSize{
    font-size: x-small;
}