.material-symbols-outlined {
	font-size: 14.4px;
	font-size: 17.6px;
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

.material-symbols-outlined.lined {
  font-variation-settings:
  'FILL' 0;
}

.material-symbols-outlined.semibold {
	font-variation-settings:
	'wght' 600
}

* {
    box-sizing: border-box;
	user-select: none;
}

body {
	background-color: var(--color-graylight);
}

body::-webkit-scrollbar {
	width: 5px;
	height: 5px;
  }
  
body::-webkit-scrollbar-track {
	background-color: var(--color-light);
  }
  
body::-webkit-scrollbar-thumb {
	background-color: var(--color-mediumdark);
	border-radius: 10px;
  }
  
body::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-mediumdark);
  }

*::-webkit-scrollbar {
	width: 3px;
	height: 3px;
  }
  
*::-webkit-scrollbar-track {
	background-color: var(--color-light);
  }
  
*::-webkit-scrollbar-thumb {
	background-color: var(--color-mediumdark);
	border-radius: 10px;
  }
  
*::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-mediumdark);
  }

title {
	background-color: hotpink;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
}

h1 {
	font-weight: 600;
}

p {
	margin: 10px 0;
}

p, a, li, span, ol, ul, th, td, input, label, textarea, summary, .ts-control .item {
	font-family: var(--font-primary);
	font-weight: 400;
	width: fit-content;
	font-size: 9.6px;
	font-size: 11.2px;
}

textarea {
	resize: none;
    border-radius: 2px;
	border: solid 1px var(--color-gray);
	font-size: 11.2px;
	font-weight: 300;
    margin-bottom: 3px;
}

h2 {
	margin: 0;
    color: var(--color-dark);
    font-weight: 400;
}

h5 {
	font-family:  var(--font-primary);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 13.6px;
	margin: 10px 0;
}

ul {
	padding: 0;
}

a {
	text-decoration: none;
	color: var(--color-dark);
}

a:hover {
	text-decoration: underline;
}

a.nounderline:hover {
	text-decoration: none!important;
}

a:hover:has(.btn) {
	text-decoration: none;
}

a:hover p, a:hover span, a:hover li, a:hover ol, a:hover ul, a:hover label, a:hover summary, .bloc-actions a:hover {
	text-decoration: none!important;
}

input, select, .input, .fileName, .ts-wrapper > .ts-control, .custom-file-upload {
    width: 100%;
	max-width: -webkit-fill-available;
	border: solid 1px var(--color-gray)!important;
	background: none!important;
	outline: none;
	border-radius: 0 0 0 2px;
	padding: 0 15px!important;
    margin:  0px;
    font-size: 9.6px; /*14px*/
    font-size: 11.2px;
	transition: all 350ms ease;
	user-select: initial;
	font-weight: 300;
	resize: none;
    min-height: 25px!important;
	text-overflow: ellipsis;
    align-items: center!important;
	text-transform: uppercase;
}

.dateInput {
	margin-bottom: 0px!important;
}

.widgetFileAdd .fileName {
	border: none!important
}
.connexion input, .connexion select, .connexion .input, .connexion .fileName, .connexion .ts-wrapper > .ts-control, .connexion .custom-file-upload, .generateUsername, .password input {
	text-transform: none;
}

.ts-wrapper.white .item {
	color: var(--color-light)!important;
}

input[type="file"] {
	height: fit-content;
}

input[type="color"] {
	width: 25px;
    border: none !important;
    padding: 0 !important;
}

input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus, input[type="text"]:focus-visible, input[type="number"]:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: none;
	border-radius: 2px;
	background-color: var(--color-OPblue)!important;
}

input:read-only:focus, input:read-only:focus:focus-visible {
	background: none;
}

input::placeholder, textarea::placeholder {
	color: var(--color-medium);
	font-size: 11.2px;
}

input.semibold::placeholder, textarea.semibold::placeholder {
	font-weight: 400!important;
}

/* input[type="radio"] {
	appearance: none; 
    cursor: pointer;
    background-color: transparent!important;
    border-radius: 2px;
    border: 1px solid!important;
    color: transparent;
    outline: none;
    padding: 0;
    width: 0;
    height: 0!important;
    position: relative;
}*/

input[type="checkbox"] {
	margin-right: 10px;
	align-items: center;
	width: fit-content;
	display: none;
}

input[type="checkbox"].ag-checkbox-input {
	margin-right: 0;
	display: block;
}

input[type="file"] {
	border: none;
	background: none;
	color: transparent;
	box-shadow: none!important;
}

.non-editable input.input-nonvisible, .non-editable select.input-nonvisible, .non-editable .input.input-nonvisible, .non-editable .fileName.input-nonvisible, .non-editable .ts-wrapper.input-nonvisible > .ts-control, .custom-file-upload.input-nonvisible {
	border: none!important;
}

.file-wrapper {
    position: relative;
    /* overflow: hidden; */
    display: inline-block;
	height: 19px;
	margin-bottom: 3px;
}

.vich-file > input, .vich-image > input {
    font-size: 8.8px;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
	margin: 0!important;
}

.fileName {
	overflow: hidden;
}

/* .fileName {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 11.2px;
} */


label, label a {
	width: fit-content;
    font-size: 9.6px; /*14px*/
    font-size: 11.2px;
    font-weight: 600;
	white-space: nowrap;
}

button {
    appearance: none!important;
    border: none;
	white-space: nowrap;
}

input[type="file"] {
    display: none;
}

.vich-file input[type="file"] {
    display: block;
}

.custom-file-upload {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.custom-file-label {
    display: flex;
	align-items: center;
	justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: fit-content;
    padding: 0 5px;
    cursor: pointer;
    background-color: var(--color-gray);
    color: var(--color-medium);
    border-radius: 2px;
	font-weight: 400;;
}

.file-name {
    margin-left: 10px;
	height: fit-content!important;
	font-size: 10.4px;
}

.custom-file-label:hover {
    background-color: var(--color-medium);
    color: var(--color-mediumdark);
}

form, .form {
	margin-bottom: 15px;
}