@font-face {
  font-family: 'HighTide-Sans';
  src: url('../fonts/fonts/HighTide-Sans.ttf');
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url('../fonts/fonts/Roboto-Regular.ttf');
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url('../fonts/fonts/Roboto-Medium.ttf');
}
 
html, body{
  font-family: Roboto-Regular, serif;
  width:100%;
  /* height: 100%; */
}



/* ----------------------------------------- */
/* FOOTER */
.footer{
  padding:10px;
  height: 40px;
 /*  margin-bottom: 0px;  */
}

.flex-wrapper {
  display: flex;
  min-height: calc(100vh - 61px);
  flex-direction: column;
  justify-content: space-between;
}



/* ----------------------------------------- */
/* TABLES */

.table-general td, .table-general > tbody >tr > th{
  border-top: 1px solid #eaeaea;
  white-space: nowrap;
  padding:1px;
  text-align: center;
}

.table-general th{
  text-align: center;
}

.page-header-title{
  margin : 0px 0px 20px;
  /* margin : 30px 0px 40px; */ 
}

.page-header-title .titre{
  font-family: Roboto-Medium, serif;
  margin : 15px;
}

.titre-kpi{
  font-family: Roboto-Medium, serif;
}

.page-header-title .titre-residence{
  font-family: Roboto-Medium, serif;
  margin : 30px 30px 20px 30px;
}

/* Hover effect */
.table-comparaison tbody tr:hover th{
  background-color:white;
}
.table-comparaison tbody tr:hover td{
  background-color: rgba(163, 137, 212, 0.2);
}


.table-hover tbody tr:hover{
  background-color: rgba(163, 137, 212, 0.2);
}

.table-striped tbody tr:nth-of-type(2n+1) th {
  background-color: white;
}


/* ----------------------------------------- */
/* DROPDOWNS */
.dropdown2 {
  display: none;
}


/* ----------------------------------------- */
/* RESIDENCE EFFECT */
.btn-residence {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  animation-fill-mode: forwards;
}
.btn-residence:hover {
  -webkit-transform : rotate(10deg);
  transform : rotate(10deg);
}

.daily-sales{
  min-height:543px;
}



/* ----------------------------------------- */
/* LOADER */
.span, .span_large{
  width: 80px;
  height: 80px;
  /* background-color: rgba(163, 137, 212,1) ; */
  background: linear-gradient(-135deg, #899FD4 0%, #A389D4 100%);
  box-shadow: 2px 3px 7px 5px rgba(40, 45, 56, 0.1);
  right: calc(50vw - 40px);
  top:calc(50vh - 40px);
  /* vertical-align: middle; */
  border-radius: 50px;
  z-index: 9;
  opacity: 0;
  position: fixed;
}


/*Typing Loader*/
.typing_loader{
  z-index: 9;
  opacity: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-animation: typing 1s linear infinite alternate;
     -moz-animation: Typing 1s linear infinite alternate;
          animation: typing 1s linear infinite alternate;
  margin: 36px auto;  
  position: relative;
  left: -12px;
}


.typing_loader.active, .span.active {
  -webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	opacity: 1
}

.span:hover, .span_large:hover{
  transform: scale(1.1, 1.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@-webkit-keyframes typing{
  0%{
    background-color: rgba(255,255,255, 1);
    box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                24px 0px 0px 0px rgba(255,255,255,0.2);
  }
25%{ 
    background-color: rgba(255,255,255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                24px 0px 0px 0px rgba(255,255,255,1);
  }
}


@keyframes typing{
  0%{
    background-color: rgba(255,255,255, 1);
    box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                24px 0px 0px 0px rgba(255,255,255,0.2);
  }
25%{ 
    background-color: rgba(255,255,255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                24px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                24px 0px 0px 0px rgba(255,255,255,1);
  }
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}


/* ----------------------------------------- */
/* COUNTER EFFECT */
.count {
  font: inherit;
  word-break: break-all;
  display: block;
  width: 0;
  padding: 0 0.52em 0 0;
  margin: 0 auto;
  overflow: inherit;
  animation: counting 0.4s steps(10) forwards infinite;
}

.count::before {
  content: attr(data-fake);
  display: inline-block;
  width: 100%;
  height: auto;
}

@keyframes counting {
  100% {
    transform: translate3d(0, -10em, 0);
  }
}

.count--1 {
  animation-iteration-count: 3;
}


/* ----------------------------------------- */
/* SELECT */
select {
  /* border: 3px solid #E6E6E6; */
  border:none;
  border-radius: 8px;
  font-weight: 400;
  /* color:#A389D4; */
  background: transparent;
  padding: 5px 3px;
  line-height: normal;
  transition: border-color 0.2s ease,outline 0.2s ease;

}
select:hover {
  /* box-shadow: 0 3px 4px rgba( #A389D4, 0.3) inset; */
  box-shadow: 0 3px 4px #A389D4 inset;
  outline: 3px  solid #A389D4;
  outline-offset: -3px;
}
select:focus {
  box-shadow: 0 4px 5px #A389D4 inset;
  /* text-shadow: 1px 1px 3px #1b1429; */
  outline: 3px  solid #A389D4;
  color:#A389D4;
  outline-offset: -3px;
}


/* ----------------------------------------- */
/* CHARTS */
.legend span {
  width: 33.333333%;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  color: white;
}


#chartdiv {
  width: 100%; 
  height: 400px; 
}

#chartdivMmm {
  width: 100%;
  height: 300px; 
}


/* ----------------------------------------- */
/* SCROLL BARS */
::-webkit-scrollbar-track
{
	border: 3px solid white;
	background-color: #b2bec3;
  /* width:2px; */
}

::-webkit-scrollbar
{
	width: 6px;
  height:6px;
}


::-webkit-scrollbar-thumb
{
	background-color: #5a6169;
	border-radius: 10px;
}


/* ----------------------------------------- */
/* LOADER */
.loader{
  background-color: #5a6169;
}



/* ----------------------------------------- */
/* PWA */
@media screen and (display-mode: standalone){
  nav{
    padding-top: 25px !important;
    z-index:1;
  }

  .fixed{
    position: sticky;
    /* position:-webkit-sticky; */
    top: 0;
  }
}