@font-face {
	font-family: 'Roboto-Thin';
	src: url('/webfonts/Roboto-Thin.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
} 
@font-face {
	font-family: 'Roboto-Light';
	src: url('/webfonts/Roboto-Light.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
} 
@font-face {
	font-family: 'Roboto-Bold';
	src: url('/webfonts/Roboto-Bold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  
 @font-face {
	font-family: 'Roboto';
	src: url('/webfonts/Roboto-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  
 
:root{
	--header-height: 3rem;
	--nav-width: 50px;
	--link-hover-color: #0081ff;
	--first-color: #d0d0d0;
	--first-color-light: #858585;
	--black-color: #333335;
	--white-color: #fff;
	--gray-color: #343434;	
	--overlay-color: #0081ff;	
	--overlay-light-color: #9FBFFF;	
	--green-color: #19c703;		
	--tiler-color: #bf009f;		
	--filter-color: #83839f;	
	--body-bg-color: #f7f8fa;	
	--body-font: 'Roboto', sans-serif;
	--normal-font-size: .875rem;
	--small-font-size: .75rem;
	--big-font-size: 2rem;
	--z-fixed: 100;
}
*,::before,::after{box-sizing: border-box}

body{
	position: relative;
	margin: var(--header-height) 0 0 0;
	font-family: var(--body-font);
	font-size: var(--normal-font-size);
	color:var(--black-color);
	background:var(--body-bg-color);
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/****************************/
/******** LOGIN PAGE ********/
/****************************/
.container-login100{
	width:100%;min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-moz-box;
	display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center;
	align-items:center;padding:15px;
}
#logo_on {
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  max-width:300px;
}
#logo_on:hover {
    cursor: pointer;
}
#logo_on:active {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);   
}
.login {
	max-width: 600px;
	padding: 30px;
	margin:auto;
}
.login__field {
	padding: 20px 0px;	
	position: relative;	
}
.login__icon {
	position: absolute;
	top: 30px;
	color: var(--black-color);
	margin-left:5px;
}
.login__input {
	border: none;
	border-bottom: 1.5px solid var(--black-color);
	background: none;
	padding: 10px;
	padding-left: 40px;
	font-weight: 700;
	width: 75%;
	max-width: 300px;
	transition: .2s;
	text-align:center;
	color:var(--black-color);
	font-family:'Roboto-Thin', 'Arial';
	font-size:20px;
	letter-spacing: 1px;
}
.login__input:active,
.login__input:focus,
.login__input:hover {
	outline: none;
	border-bottom-color: var(--black-color);
}
.button__icon {
	position: absolute;
	font-size: 20px;
	top: 30px;
	color:var(--black-color);
}
.i_button:hover {
    cursor: pointer;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color:var(--black-color);
	opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:var(--black-color);
}
::-ms-input-placeholder { /* Microsoft Edge */
	color:var(--black-color);
}
span.error{
    position:absolute;
    top:80px;
	left: 50%;  
    transform: translateX(-50%); 
	color:var(--white-color);
    background-color:red;
    margin-bottom:-5px;
    padding-left:5px;
    padding-right:5px;
	font-size: var(--normal-font-size);
}

/*****************************/
/******** CONTENT PAGE *******/
/*****************************/

body-pd{
	color:var(--black-color);
	background:var(--body-bg-color);
}
a{
	text-decoration: none;
	color:var(--black-color);
}
h1{
	font-family: 'Roboto';
	font-size:var(--big-font-size);
}
h4 a{color: var(--white-color)}
h4 a:hover{color: var(--first-color-light)}
.header{
	width: 100%;
	height: var(--header-height);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px;
	background-color: var(--white-color);
	color: var(--black-color);
	z-index: var(--z-fixed);
	transition: .0s;
	box-shadow:0 2px 3px rgba(52,58,64,.06);
}
.header_toggle{
	color: var(--black-color);
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.header_img{
	width: 36px;
	height: 36px; 
	padding:0px; 
	border:0px;
	display: flex;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	margin-top:0px	
}
.header_img img{
	width: 100%;
	border-radius: 50%;
}
.header_pseudo{
	height: 40px; 
	line-height: 40px; 
	overflow: hidden;
	text-overflow: ellipsis;white-space: nowrap;
	text-align:right;
	font-family: 'Roboto-Light';
	font-size: var(--normal-font-size);
}
.l-navbar{
	position: fixed;
	top: 0;
	left: -30%;
	width: var(--nav-width);
	height: 100vh;
	background-color: var(--white-color);
	color: var(--black-color);
	padding: 0;
	overflow-y: scroll;
	z-index: var(--z-fixed);
	border-right:1px solid rgba(52,58,64,.06);
	transition: .0s;
}
.l-navbar::-webkit-scrollbar {
  display: none;
}
.shadow{
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);
}
.nav{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden
}
.nav_list{
	padding: 0;
 	list-style: none;
}

.nav_logo,
.nav_link, .nav_user_link{
	display: grid;
	grid-template-columns: max-content max-content;
	align-items: center;
	column-gap: .8rem;
	padding: .5rem 0 .5rem 1rem;
	font-family: 'Roboto';
	font-size: var(--normal-font-size);
	font-weight: 400;
}
.nav_logo_link
{
	display: grid;
	grid-template-columns: max-content max-content;
	align-items: center;
	column-gap: .8rem;
	padding: 0 0 .5rem 1rem;
	font-family: 'Roboto';
	font-size: var(--normal-font-size);
	font-weight: 400;
}
.nav_logo{
	margin-bottom: 2rem;
}
.nav_logo-icon{
	font-size: 1.25rem;
	color: var(--white-color)
}
.nav_logo-name{
	color: var(--black-color);
	font-weight: 700;
}
.nav_logo_link{position: relative;color: var(--first-color-light);margin-bottom: .2rem;transition: .3s}

.nav_link, .nav_user_link{position: relative;color: var(--first-color-light);margin-bottom: 0.4rem;transition: .3s}
.nav_link:hover, .nav_user_link:hover{
		color:var(--black-color);

	background-color:#e3effc;
}

.nav_icon{font-size: 1.25rem}
.show{left: 0}
.body-pd{
	padding-left: calc(var(--nav-width));
	background:var(--body-bg-color);
}
.header-pd{
	padding-left: calc(var(--nav-width));
	background:var(--white-color);
}
.active{
	background-color: var(--link-hover-color);
	color: var(--white-color);
}
.active ion-icon{
	--ion-item-background: #fff;
}
.active:hover{
	background-color: var(--link-hover-color);
	color: var(--white-color);
}
.active::before{
	content: '';
	position: absolute;left: 0;
	width: 2px;
	height: 32px;
	background-color: var(--white-color)
}
.height-100{
	height:100vh;
	padding:15px;
	background:var(--body-bg-color);
}
@media screen and (min-width: 768px){
	body{margin: calc(var(--header-height)) 0 0 0;padding-left: calc(var(--nav-width));background:var(--body-bg-color);}
	.header{height: calc(var(--header-height));padding: 0 1rem 0 calc(var(--nav-width) + 1rem)}
	.header_img{width: 36px;height: 36px}
	.header_img img{width: 100%}
	.l-navbar{left: 0;padding: .8rem 0 0 0}
	.showMenu{width: calc(var(--nav-width) + 186px)}
	.body-pd{
		padding-left: calc(var(--nav-width) + 186px);
	}
	.header-pd{
		padding-left: calc(var(--nav-width) + 196px);
	}
	
}

@media screen and (max-width: 641px){
	body{margin: calc(var(--header-height)) 0 0 0;padding-left: 0px;background:var(--body-bg-color);}
	.header{height: calc(var(--header-height));padding: 0 1rem 0 10px}	
	.l-navbar{left: 0;padding: .8rem 0 0 0; width : 0px;
}
	.l-navbar-showMenu{width: 100%}
	.newButton{display:none}
	.searchbox{width:110px}
	.submitButton{
		padding: 0px 5px 0px 5px;
		margin: 0px 0px 0px 0px;
	}
	
	.filterfield{
		margin: 0px 0px 0px 3px;
		min-width: 80px;
	}
	.body-pd{
		padding-left: 0px;
	}
	.header-pd{
		padding-left: 0px;
	}
	#logo_on {
		max-width:200px;
	  }
	  .login__input {
		width: 90%;
	}
	.modal-dialog-right {
		width:100% !important;
		left : 0 !important;
		right: 0 !important;
	}
}

.form-switch .form-check-input:checked {
    background-color: red;
    border-color: red;
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}
.form-switch .green:checked {
    background-color: #77D130;
    border-color: #77D130;
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

/*****************************/
/*********** TABLE ***********/
/*****************************/

.table-title {
        padding-bottom: 5px;
        margin: 0 0 5px;
}
table.table td a.edit {
        color: #4F4F4F;
}
table.table td a.delete {
        color: #4F4F4F;
}
table.table td a.edit:hover {
        color: #FFC107;
}
table.table td a.delete:hover {
        color: #E34724;
}
.table {
  --bs-table-striped-bg: #FCFCFC !important;
}
th {
	font-family: 'Roboto-Bold';
	font-size: var(--normal-font-size);
  border: 1px solid #EAEAFE !important;
}
td {
 height:38px !important;
 line-height:38px !important;
  max-height:38px !important;
  min-height:38px !important;
  padding-top:0px !important;
  padding-bottom:0px !important;
	font-family: 'Roboto';
	font-size: var(--normal-font-size);
	vertical-align: middle;
}

.filterfield{
	height:34px;
	line-height:34px;
	min-width: 100px;
	max-width:200px;
    border-radius:3px;
	margin: 0px 0px 0px 5px;
	border: 1px solid var(--first-color);
	font-size: var(--normal-font-size);
    color:var(--filter-color);
    vertical-align: top;
}
.filterfield::placeholder {
    color:var(--filter-color);
  opacity: 1; /* Firefox */
}
.filterfield::-ms-input-placeholder { /* Edge 12 -18 */
    color:var(--filter-color);
}
.searchbox{
	padding: 0px 15px 0px 30px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath fill='gray' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 8px center;
}
.submitButton{	
	height:34px;
	line-height:34px;
	padding: 0px 10px 0px 10px;
	margin: 0px 0px 0px 5px;

}
.page-container-title{
	width:100%;
	background: var(--overlay-color);
	color: var(--white-color);
	padding: 5px 30px;
	line-height:22px;
	}
.page-container-title a{
	color: var(--white-color);
	font-family:'Roboto';
	font-size: var(--normal-font-size);
}
.page-container-title a:hover{
	color: var(--white-color);
	text-decoration:underline;
}
.page-container-title ion-icon{
	position: absolute;
	top: 5px;
}
.page-container-title span{
	padding-left: 25px;
}

.add-new {
	height:34px;
	line-height:34px;
	padding: 8px 15px;
	font-family:'Roboto';
	font-size: var(--normal-font-size);
	color:var(--white-color);
	background-color:var(--overlay-color);
	transition: .3s;
	position: relative;
	right:0px;
	top:-1px;
	border-radius:2px;
}
.add-new:hover{
	color: var(--white-color);
	background-color:var(--tiler-color);
}
.add-new ion-icon{
	position:relative;
	top:6px;
}
.add-new-comment {
	height:34px;
	line-height:34px;
	padding: 8px 15px;
	font-family:'Roboto';
	font-size: var(--normal-font-size);
	color:var(--white-color);
	background-color:var(--overlay-color);
	transition: .3s;
	position: relative;
	right:0px;
	top:-1px;
	border-radius:2px;
}
.add-new-comment:hover{
	color: var(--white-color);
	background-color:var(--tiler-color);
}
.add-new-comment ion-icon{
	position:relative;
	top:6px;
}
.add-new-comment-answer {
	height:34px;
	line-height:34px;
	padding: 8px 15px;
	font-family:'Roboto';
	font-size: var(--normal-font-size);
	background-color:#F7F8FA;
	color:var(--overlay-color);
	transition: .3s;
	position: relative;
	right:0px;
	top:-1px;
	border-radius:2px;
}
.add-new-comment-answer:hover{
	color:var(--tiler-color);
}
.add-new-comment-answer ion-icon{
	position:relative;
	top:6px;
}



.gray {
    color: #ABB2B9;
 }
.orange {
    color: orange;
 }
.green {
    color: #18C700;
 }
 
 .modal-dialog {
    position: fixed;
    margin: auto;
    width: 40vw;
    height: 100%;
    right: 0px;
}
.modal-content {
    height: 100%;
}

.modal-content {
	color:var(--black-color);
	background-color:var(--white-color);
	border:none;
 }
.modal-header {
	height:36px;
	line-height:36px;
	background-color:var(--overlay-color);
	color:var(--white-color);
	font-family:'Roboto';
	font-size: var(--normal-font-size);
	border:none;
 }
.modal-footer{
	height:50px;
	line-height:50px;
	background-color:var(--white-color);
	color:var(--black-color);
	font-family:'Roboto';
	font-size: var(--normal-font-size);
	border:none;
	padding:0px;
	padding-right:10px;
 }
 .modal-body{
	margin-top:10px;
	font-size: var(--normal-font-size);
 }
 .home-card{
	font-size: var(--normal-font-size);
 }
 .modal-dialog-slideout {
  min-height: 100%;
}
.modal.fade .modal-dialog.modal-dialog-slideout {
  -webkit-transform:	translate(100%, 0)scale(1);
  -ms-transform:		translate(100%, 0)scale(1);
  -o-transform:			translate(100%, 0)scale(1);
  transform:			translate(100%, 0)scale(1);			                
}
.modal.fade.show .modal-dialog.modal-dialog-slideout {
  -webkit-transform:	translate(0, 0);
  -ms-transform:		translate(0, 0);
  -o-transform:			translate(0, 0);
  transform: 			translate(0, 0);
  height: 100%;
}

 
.btn{
	font-family:'Roboto';
	font-size: var(--normal-font-size);
 }

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

.form-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form-group label {
	display: block;
  	margin: 0 0 5px;
 	color: var(--black-color);
 	font-family: 'Roboto';
  	font-size: var(--small-font-size);;
  	font-weight: 500;
  	line-height: 0.1;
  	letter-spacing: 0.1em;
  	padding-left:3px;
}

.form-group label.error {
    background: red;
    height:20px;
    line-height:20px;
 	color: var(--white-color);
    font-size: var(--small-font-size);;
    display: block;
    text-transform: none;
    letter-spacing:0px;
    margin: 0px;
    margin: -30px 0px 0px 10px;
    padding : 0px 5px 0px 5px;
}
.form-group input.error {
    border: 1px dashed var(--black-color);

}
.form-group input, .form-group textarea, .form-group select {
	outline: none;
	display: block;
	background: var(--white-color);
	width: 100%;
	border:0px;
	border-bottom: 1px solid #c7d4e1;
	box-sizing: border-box;
	padding: 0px 3px;
	color: var(--black-color);
	font-family: 'Roboto';
	font-size: var(--normal-font-size);
	font-weight: 600;
	line-height: inherit;
	min-height:32px;
	transition: 0.3s ease;
	margin:0px 0px 20px;
}

.form-group input[type="text"]:focus{
	border-bottom: 1px solid var(--overlay-color);
}
.form-group_div {
  outline: none;
  display: block;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 12px 20px;
 	color: #ABB2B9;
 	font-family: 'Roboto';
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  transition: 0.3s ease;
  margin:0px 0px 20px;
}
ion-icon {
	font-size: 22px;
	margin:0px;
	padding:0px;
	pointer-events: none;
}
.menu-puce {
float:left;
height:24px;
color:var(--black-color);
}
.home-card {
	width:100%;
	min-height:180px;
	margin:20px;
	margin-left:0px;
	padding:15px 15px;
	background-color:#fff;
	border: 1px solid #eff0f2;
	border-radius:5px;
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
.home-card ion-icon{
	font-size: var(--big-font-size);
  margin:0px;
  padding:0px;
  bottom:0px;
}
.home-card h1{
	font-family: 'Roboto';
	font-size: var(--normal-font-size);
	font-weight:500;
	text-transform:uppercase;
}
.optionbox{
}
.optionbox select {
	font-family:'Roboto';
    font-size: var(--small-font-size);;
    background: #f5f6f8;
    color: #74788d;
    padding: 5px 10px;
    height: 30px;
    border: none;
    -webkit-appearance: button;
    outline: none;
    border-right: 6px solid transparent;
    border-radius:3px;
}
.optionbox select:hover{   
    background: #e9eaee;
    cursor:pointer;
}

/* Safari syntax */
:-webkit-full-screen {
  background-color: var(--body-bg-color);;
}

/* IE11 */
:-ms-fullscreen {
  background-color: var(--body-bg-color);;
}

/* Standard syntax */
:fullscreen {
  background-color: var(--body-bg-color);;
}

.modal-backdrop {
    background-color: rgba(0,0,0,.0001) !important;
    z-index: 1040 !important;
}

.submenu_item {
  cursor: pointer;
}
.submenu {
  display: none;
}
.submenu_item .arrow-left {
	position: absolute; right: 5px;
  	color:var(--black-color);
}

.submenu {
  display: none;
}
.show_submenu ~ .submenu {
  display: block;
}
.show_submenu .arrow-left {
  transform: rotate(90deg);
	color:var(--white-color);
}

.span_ion-icon {
 	border-radius: 50%;
 	width:28px;
 	height:28px;
 	padding-top:3px;
 	padding-left:3px;
}
.show_submenu .span_ion-icon,
.active .span_ion-icon {
 	background: #fff;
}

.default_loading_information {
	position: fixed;top: 0;	
	left: 0px;right: 0px;z-index: 101;width:110px;height:30px;
	padding:5px;text-align:center;margin:auto;color:#fff;
	background-color:#ef4444;border-radius:0px 0px 10px 10px;
	animation: fadeInAnimation ease 3s;
	animation-iteration-count: 3;
    animation-fill-mode: forwards;
}

.default_success_information {
	position: fixed;top: 0;	
	left: 0px;right: 0px;z-index: 101;width:180px;height:30px;
	padding:5px;text-align:center;margin:auto;color:#fff;
	background-color:#00a332;border-radius:0px 0px 10px 10px;
	animation: fadeInAnimation ease 3s;
	animation-iteration-count: 1;
    animation-fill-mode: forwards;
    display:none;
}

.default_error_information {
	position: fixed;top: 0;	
	left: 0px;right: 0px;z-index: 101;width:180px;height:30px;
	padding:5px;text-align:center;margin:auto;color:#fff;
	background-color:red;border-radius:0px 0px 10px 10px;
	animation: fadeInAnimation ease 3s;
	animation-iteration-count: 1;
    animation-fill-mode: forwards;
    display:none;
}
.shortcutBtnLeft {
	margin-left: 10px;
	position:relative;
	top:2px;
	cursor:pointer;
	display:none;
}
.shortcutBtnRight {	
	margin-right: 10px;
	position:relative;
	top:2px;
	cursor:pointer;
	display:none;
}
.shortCutPanel {
	position: relative;
	width:100%;
	overflow-x: scroll;
	white-space: nowrap; 
	scroll-behavior: smooth;
}
.shortCutPanel::-webkit-scrollbar {
  display: none;
}

.shortCutPanel ul {
	height:100%;
	display: inline-flex;
	list-style-type: none;
	overflow-x: scroll;
	padding: 0;	
	margin: 0;
 }
.shortCutPanel ul li{
	display: flex;
	align-items: center;
	cursor: pointer;
	flex: 0 0 auto;	
	height: 48px;
	line-height:48px;
	padding-left: 10px;
	padding-right: 10px;
	color:gray;
 }
 .shortCutPanel ul li ion-icon{
	position:relative;
	top:6px;
	margin-right:15px;
 }
 .shortCutPanel ul li button{
	position:relative;
	top:0px;
	margin-left:15px;
 }
 .shortCutPanel ul li a{
	color:var(--filter-color);
	font-family:'Roboto-Bold', 'Arial';
	letter-spacing:0.01rem;

 }
  .shortCutPanel ul li a:hover{
	color:var(--gray-color);
 }
   .shortCutPanel .active a {
	color:var(--gray-color);
 }
 
 .shortCutPanel .active{
	border-bottom : 4px solid var(--overlay-color);
	background-color: var(--white-color);
 }
 
.table_nav_link span{
	float:right;
	width:34px;
	height:34px;
	line-height:34px;
	color:var(--filter-color);
	border-radius:3px;
	text-align: center;
}
.table_nav_link span ion-icon{
	vertical-align: middle; 
}

.table_nav_link span:hover{
	color:var(--black-color);
	background-color:#e3effc;
}

#image-preview input {
  position: absolute;
  opacity: 0;
  z-index: 10;
}
#image-preview label {
  position: absolute;
  z-index: 5;
  opacity: 0.8;
  cursor: pointer;
  background-color: #bdc3c7;
  width: 200px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
	font-size:14px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
#progress-bar {
	height: 30px;
	line-height: 30px;
    background-color: #12CC1A;
    color: #FFFFFF;
    width: 0%;
    -webkit-transition: width .3s;
    -moz-transition: width .3s;
    transition: width .3s;
    border-radius: 5px;
    margin-top:20px;
}

.register_top_arrow {
	float:left;
	position: relative;
	font-family: "Roboto";
	border-top: 3px solid var(--overlay-light-color);
	border-bottom: 3px solid var(--overlay-light-color);
	border-radius:3px;
	color: var(--filter-color);
	font-size: .875rem;
	padding: 3px 10px 3px 20px;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	background-color:#fff;
}
.register_top_active{	
	font-family: "Roboto-bold";
	color: var(--overlay-color);
	border-top: 3px solid var(--overlay-color);
	border-bottom: 3px solid var(--overlay-color);
	background-color:#fff;
}
.register_top_arrow svg path {
	color:var(--overlay-light-color);
}
.register_top_arrow .svg_right {
  position: absolute;
  top: -3px;
  right: -21px;
}
.register_top_arrow .svg_left {
  position: absolute;
  top: -3px;
  left: -10px;
}
.register_top_active svg path {
  fill : var(--overlay-color);
}

.register_top_btn {
	float:left;
	width:40px;
	height:32px;
	line-height:32px;
	border-radius:3px;
	background-color:var(--overlay-light-color);
	text-align:center;
	cursor:pointer;
}
.register_top_btn ion-icon {
	color: #fff;
	position:relative;
	top:5px;
}

.register_top_btn_active {
	float:left;
	width:40px;
	height:32px;
	line-height:32px;
	border-radius:3px;
	background-color:var(--overlay-color);
	text-align:center;
	cursor:pointer;
}
.register_top_btn_active ion-icon {
	color: #fff;
	position:relative;
	top:5px;
}

  /* highlightTyped use mark */
  .autocomplete-menu mark {
    text-decoration: underline;
    background: none;
    color: currentColor;
    padding: 0;
  }

  /* Optional nicer scrollbars */
  .autocomplete-menu {
    --scroller-color: 0, 0%;
    --scroller-color-lightness: 80%;
    --scroller-bg-lightness: 90%;
    --scroller-hover-factor: 0.8;
    --scroller-thumb: hsl(var(--scroller-color), var(--scroller-color-lightness));
    /* Replicate hover for webkit */
    --scroller-thumb-hover: hsl(var(--scroller-color), calc(var(--scroller-color-lightness) * var(--scroller-hover-factor)));
    --scroller-background: hsl(var(--scroller-color), calc(var(--scroller-bg-lightness)));
    scrollbar-color: var(--scroller-thumb) var(--scroller-background);
    scrollbar-width: thin;
    position: relative;
    top:-22px;
  }

  .autocomplete-menu::-webkit-scrollbar {
    width: 8px;
  }

  .autocomplete-menu::-webkit-scrollbar-track {
    background: var(--scroller-background);
  }

  .autocomplete-menu::-webkit-scrollbar-thumb {
    background: var(--scroller-thumb);
  }

  .autocomplete-menu::-webkit-scrollbar-thumb:hover {
    background: var(--scroller-thumb-hover);
  }

.sort_order_by{
    cursor:pointer;
  }

.sort_order_by:hover{
	background-image:url('data:image/svg+xml;utf8,<?xml version="1.0" ?><svg height="16" viewBox="0 0 1792 1792" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
    background-repeat:no-repeat;
    background-position: right 5px center;
  }
.tache_pin{
	height:34px;
	float:right;
	cursor:pointer;
	border-radius:3px;
}

.tache_pin_number{
  	float:right;margin-top:5px;margin-left:-10px;width:18px;text-align:center;
  	height:18px;line-height:18px;background-color:#FF4B11;border-radius:50%;color:#fff;font-size:10px;
  }
  
.table-title{
	font-size: var(--normal-font-size);
}

td{
	max-width: 0;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 white-space: nowrap;
	}

	.yt-container {
		position:relative;
		padding-bottom:56.25%;
		padding-top:30px;
		height:0;
		overflow:hidden;
	  }
	  .yt-container iframe, .yt-container object, .yt-container embed {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	  }
	  .events_info_bottom{position:absolute;bottom:0;left:0;z-index:3;display:block;width:100%;height:80px;background-image:linear-gradient(to bottom,rgba(255,0,0,0),#fff)}