html {
	height: 100vh;
}

body {
	aaafont-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
  color: rgb(0,200,200);
	text-decoration: none;
}

a:visited {
	color: rgb(0,80,160);
  text-decoration: none;
}


@font-face {
	font-display: auto;
	src:'';
	font-family:'';
}

html { /* xs : Extra small devices (portrait phones, less than 576px) */
	--infoSize:0;
	--infoMedia:xs;
}

@media (min-width: 576px) {/* sm : Small devices (landscape phones, less than 768px) */
  html {
		--infoSize:1;
		--infoMedia:sm;
  }
}

@media (min-width: 768px) {/* md : Medium devices (tablets, less than 992px) */
  html {
		--infoSize:2;
		--infoMedia:md;
  }
}

@media (min-width: 992px) { /* lg : Large devices (desktops, less than 1200px) */
  html {
		--infoSize:3;
		--infoMedia:lg;
  }
}

@media (min-width: 1200px) { /* xl : Large devices (desktops, less than 1400px) */
  html {
		--infoSize:4;
		--infoMedia:xl;
  }
}

@media (min-width: 1400px) { /* xxl : Large devices (desktops, more than 1400px) */
  html {
		--infoSize:5;
		--infoMedia:xxl;
  }
}

input:focus,
select:focus,
textarea:focus,
button:focus {
	box-shadow: none!important;
}

.xsmall{font-size: 0.82rem!important;}

/*******************************************************/

.fullScreen{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	height: 100%; /* not sure util again.. to test ? hack only for ios, to permit some button to be clickable at the left !!*/
	overflow: hidden;
}

.hide {display:none;}
.ghide{height:0;width:0;}
.invisible{visibility: hidden;}
.visible{visibility: visible;}

.scroll{
	overflow:auto;
}

.scrollX{
	overflow-x:auto;
	overflow-y:hidden
}

.scrollY{
	overflow-x:hidden;
	overflow-y:auto;
}

.scrollXY{
	overflow:auto;
}


.fs {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

.fsContent{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.fsScroll{
	flex-shrink: unset;/*to permit to have scroll in row col*/
	flex-grow: 1; /*to permit to extend scroll to all space - it's show border top and bottom*/
	align-content: flex-start;
	overflow-y: auto;
	overflow-x: hidden;
	border-top: 1px solid #f4f4f5;
	padding: 0.5rem 4px 0.5rem 0;
	border-bottom: 1px solid #f4f4f5;
	aamin-height: 0;
}
.fsScrollX{
	overflow-x: auto;
}

/* scrollbar in scroll */
/* Works on Firefox */
.fsScroll{
	scrollbar-width: thin;
	scrollbar-color: lightgray orange;
}
/* Works on Chrome, Edge, and Safari */
.fsScroll::-webkit-scrollbar { width: 10px; height: 10px; }
.fsScroll::-webkit-scrollbar-track { background: lightgray; }
.fsScroll::-webkit-scrollbar-thumb { background-color: gray; }

.fsContentHorizontal{
	align-items: center;
	justify-content: space-between;
	display: flex;
}
.fsContentHorizontal.around{
	justify-content:  space-around;
}
.fsContentHorizontal.center{
	justify-content: center;
}
.fsContentHorizontal.start{
	justify-content:  flex-start;
}

[class*=' perm_']{
	display:none;
}

.text-vertical {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);

	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
}

.ellipsis {
  white-space: nowrap;        /* Prevents text from wrapping to the next line */
  overflow-x: clip;           /* Ensures the text is cut off when it overflows and hide scrollbar place*/
  text-overflow: ellipsis;    /* Adds the ellipsis (...) when text is truncated */
  max-width: 150px;           /* Sets a max fixed width for the container */
}

.ucfirst{
	display: inline-block!important;
}
.ucfirst:first-letter{
	text-transform:capitalize;
}

.pointer {cursor:pointer;}
.pointer > * {cursor:pointer;}
.pointer:hover {opacity:0.8;}

.link {cursor:pointer;}
.link:hover {opacity:0.8;text-decoration: underline;}

.btn-xs {
	padding: .2rem .3rem;
	font-size: .6rem;
	border-radius: .2rem;
}

.btn-sq-lg {
	width: 140px !important;
	height: 140px !important;
}

.btn-sq {
	width: 100px !important;
	height: 100px !important;
	font-size: 10px;
}

.btn-sq-sm {
	width: 50px !important;
	height: 50px !important;
	font-size: 10px;
}

.btn-sq-xs {
	width: 25px !important;
	height: 25px !important;
	padding:2px;
}


/* effect blinking, pulse...*/
.one {
  transition: transform .2s;
}

.one:hover {
  transform: scale(1.05);
	z-index: 1;
}

.up {
  transition: transform .2s;
}

.up:hover {
  transform: translateY(-8px);
	z-index: 1;
}

.polaroid {
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.clip {
	clip-path: polygon(0 0, 0 100%, 100% 90%, 100% 0);
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 90%, 100% 0);
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1);
}


.blink {
    -webkit-animation: 2s linear infinite blink-effect; /* for android */
    animation: 2s linear infinite blink-effect;
}
.blinkHigh {
	-webkit-animation: 1s linear infinite blink-effect; /* for android*/
	animation: 1s linear infinite blink-effect;
}
.pulse {
	-webkit-animation: 1s linear infinite pulse-effect; /* for android */
	animation: 1s linear infinite pulse-effect;
}

.vibrate {
	-webkit-animation: vibrate-effect 50ms linear infinite forwards; /* for android */
	animation: vibrate-effect 50ms linear infinite forwards;
}

.shake {
  animation: shake-effect 0.83s infinite;
}

.jump {
	-webkit-animation: jump-effect 0.83s ease-in-out;
	animation: jump-effect 0.83s ease-in-out;
}
.jumpHover:hover {
	-webkit-animation: jump-effect 1s ease-in-out;
	animation: jump-effect 0.5s ease-in-out;
	animation-fill-mode: both;
	z-index: 1;
}

.shakeIt {
	animation: shakeIt-effect 6s;
	animation-delay: 2s;
	animation-iteration-count: infinite;
}
@keyframes shakeIt-effect {
	0% { transform: translateX(0) }
	1% { transform: translateX(8px) }
	2% { transform: translateX(-8px) }
	3% { transform: translateX(8px) }
	4% { transform: translateX(-8px) }
	5% { transform: translateX(5px) }
	6% { transform: translateX(0) }
	100% { transform: translateX(0) }
}


@keyframes blink-effect {
	0% {
			opacity: 0.2;
	}
	50% {
			opacity: 1;
	}
	100% {
			opacity: 0.2;
	}
}

@keyframes pulse-effect {
	0% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	50% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	100% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
}

@keyframes vibrate-effect{
	0% {
		-webkit-transform: translateX(-1px) translateY(1px);
		transform: translateX(-1px) translateY(1px);
	}
	100% {
		-webkit-transform: translateX(1px) translateY(-2px);
		transform: translateX(1px) translateY(-2px);
	}
}
@keyframes shake-effect {
 0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

@keyframes jump-effect {
	16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
	100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
	/*90% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
	95% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  100% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }*/
}

/*-- button --*/
button:disabled {
  cursor: not-allowed;
	pointer-events: unset!important;
}


.btn.sharp {
  border-radius:0;
}

.btn.round {
	border-radius: 24px;
}

.btn.material {
	border-radius: 0;
	background-color:transparent;
}

.btn.material:hover { color: #fff; }


.btn-primary.material{ color: var(--primary); border: 2px solid var(--primary); }
.btn-secondary.material{ color: var(--secondary); border: 2px solid var(--secondary); }
.btn-success.material{ color: var(--success); border: 2px solid var(--success); }
.btn-danger.material{ color: var(--danger); border: 2px solidvar(--danger); }
.btn-warning.material{ color:var(--warning); border: 2px solid var(--warning); }
.btn-info.material{ color:var(--info); border: 2px solid var(--info); }
.btn-light.material{ color:var(--light); border: 2px solid var(--light); }
.btn-dark.material{ color: var(--dark); border: 2px solid var(--dark);}
.btn-primary.material:hover{ background-color: var(--primary); }
.btn-secondary.material:hover{ background-color: var(--secondary); }
.btn-success.material:hover{ background-color: var(--success); }
.btn-danger.material:hover{ background-color: var(--danger); }
.btn-warning.material:hover{ background-color: var(--warning); }
.btn-info.material:hover{ background-color: var(--info); }
.btn-light.material:hover{ background-color: var(--light); }
.btn-dark.material:hover{ background-color: var(--dark);}

.btn.gradient {
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;
	box-shadow: 0 0 20px #eee;
	border-radius: 10px;
	background-image: linear-gradient(to right, var(--info), var(--primary));
 }

.btn.gradient:hover {
	background-position: right center; /* change the direction of the change here */
}