@import url("reset.css") layer(reset);
@import url("visio-theme-1.css");
@import url("app-bootstrap.css");

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100%;
}

body{
	/*font-family: 'Work Sans', sans-serif;*/
	/*font-family: 'Comfortaa', cursive;*/
	font-family: 'Source Sans Pro', sans-serif;
	background-color: var(--body-bg-color);
	color: var(--body-color);
	height: 100%;
	/*padding-top: 103px; /* 51(topbarre) + 52(header-bar) */
}
body.loggedin{
	padding-top: 100px; /* Topbarre (header) + header secondary height */
}

/* Link */
a {
	text-decoration: none;
	color: var(--btn-color);
}
a:hover, a:focus {
    text-decoration: none;
    color: var(--primary-color);
}
/* HEADER navbar */
#header .auth-user-thumbnail {
	display: inline-block;
	height: 40px;
	width: 40px;
	margin-right: 10px;
	margin-top: -12px;
	margin-bottom: -10px;
	vertical-align: middle;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/** Search **/
#HeaderSearch{
	background-color: var(--header-2-bg-color) ;
	border-color: var(--header-2-bg-color);
}
.round-close {
    position: absolute;
    line-height: 18px;
    right: 9px;
    top: 9px;
    height: 20px;
    width: 20px;
    display: flex;
	justify-content: center;
	align-items: center;
    color: var(--sidebar-color);
    background: var(--sidebar-bg-color);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;    
    cursor: pointer;
}
.round-close:hover {
	text-decoration: none !important;
	color: white;
	background: grey;
}

/* HEADER SECONDARY */
header.header-bar{
	background: var(--header-2-bg-color);
	position: fixed;
	height: 52px;
	top: 50px;
	right:0;
	left:0;
	display:flex;
	justify-content: space-between;
	padding: 8px 15px;
	z-index: 1020;
}
header.header-bar .actions {display: flex;}
header.header-bar .actions > a,
header.header-bar .actions > .btn-group {margin-left: 5px;}
header.header-bar .dropdown-toggle::after {
	display: none;
}

/* LOGOS */
.logo-mini, .app-logo {
	display: block;
	background-repeat: no-repeat;
}

.logo-mini {
	float: left;
	background-size: contain;
	background-position: center;
	margin-right: 5px;
	width: 100px;
	height: 50px;
}
.app-logo{
	margin: auto;
	background-size: contain;
	background-position: center;
	width: 200px;
	height: 100px;
}

/* IMG */
img {
	max-width: 100%;
	height: auto;
}
img.circle, .circle {
    border-radius: 100%;
}
img.circle.border {
	border: 3px solid hsl(0,0%,50%);
}

/* FORM */
/* Pour ne pas avoir les champs input prérempli avec des couleurs différentes */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}
input::placeholder {
	color: var(--input-label-color);
	/*opacity: 0.5;*/
}
.switch-checkbox {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 15px;
}
label{
	color: var(--input-label-color);
}
.form-footer{
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
}

/* BTN */
.btn-discret, .btn-discret:visited {
	color: var(--body-color);
	background: none;
	border: none;
}
.btn-discret:hover, .btn-discret:focus{
	color: var(--btn-color);
	background-color: var(--body-color);
}

/** Notif overlay **/
#overlay-notif{
	position: fixed;
	z-index: 19000;
	top: 0%;
	right: 0%;
	display: flex;
	flex-direction: column;
    align-items: end;
	gap: .25rem;
	margin: 2rem;
}

/** LOADER **/
#canvasloader-container{
	display: none;
	position: fixed;
	z-index: 20000;
	width: 120px;
	height: 120px;
	margin-top: -60px;
	margin-left: -60px;
	top: 50%;
	left: 50%;
	background: rgba(0,0,0,0.7);
	padding: 20px;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	        border-radius: 10px;
}

/** FOOTER **/
#footer{
	position: fixed;
	pointer-events: none;
	bottom: 0;
	width: 100%;
	padding: 6px 10px;
	text-align: right;
	font-size: 0.7em;
}

/* SMARTPHONE */
@media (max-width: 767px) {
	header.header-bar {
		padding-left: 5px;
		padding-right: 5px;
	}
	.logo-mini {
		margin-left: 15px;
	}
	.navbar-toggle.user {
		padding: 6px 12px;
	}
	/* COMMENTS */
	#comment-list .comment-video {
		background-color: hsl(235,12%,32%) !important;
		color:#FFF !important;
	}
	#comment-list .comment-video.comment-current {
		background-color: hsla(0,0%,100%,.9) !important;
		color:hsl(0, 0%, 20%) !important;
	}
	/* FOOTER */
	#footer {
		position: relative;
	}	
}