/*     Body     */
body {
	width: 100%;
    height: 100%;
	margin: 0.5rem auto;
	line-height: 1.5;
	font-family: "Open Sans", sans-serif;
}
a { margin: auto 0; }

/* Style personnalisé */
.neomo {
    background-color: var(--neomo) !important;
    color: #707070 !important;
}
.inset,
.inset input:-webkit-autofill,
.inset input:-webkit-autofill:active,
.inset input:-webkit-autofill:focus,
.inset input:-webkit-autofill:hover { box-shadow: inset 3px 3px 5px silver, inset -3px -3px 5px #fff !important }
.inset-neomo,
.neomo .checkbox-input:checked:after,
.neomo .radio-input:before,
.neomo input:-webkit-autofill,
.neomo input:-webkit-autofill:active,
.neomo input:-webkit-autofill:focus,
.neomo input:-webkit-autofill:hover,
.button.outset-neomo:hover,
input.inset-neomo:disabled,
input.inset-neomo:focus,
input.outset-neomo:disabled,
input.outset-neomo:focus {
    border: none;
    background: var(--neomo) !important;
    box-shadow: inset -3px -3px 7px hsla(0, 0%, 100%, .8980392156862745), inset 3px 3px 5px rgba(55, 114, 216, .288) !important;
}
.neomo .checkbox-input:before,
.neomo .checkbox-input:focus,
.outset-neomo {
    border    : none;
    background: var(--neomo) !important;
    box-shadow: -3px -3px 7px hsla(0, 0%, 100%, .8980392156862745), 3px 3px 5px rgba(58, 114, 211, .28627450980392155) !important;
}
.button.inset:hover { box-shadow: inset 3px 3px 5px #9c9da0, inset -3px -3px 5px #fff !important }
.button.inset-neomo:hover { box-shadow: inset -3px -3px 7px hsla(0, 0%, 100%, .8980392156862745), inset 3px 3px 7px rgba(8, 91, 235, .288) !important }

/* Définition pour l'objet HTML Checkbox */
.checkbox-input {
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
    position          : relative;
    width             : 20px;
    height            : 20px;
    vertical-align    : middle;
    outline           : none
}
.checkbox-input:focus { box-shadow: 3px 3px 7px #ababab, -3px -3px 7px #fff }
.checkbox-label { vertical-align: middle }
.checkbox-input:before {
    content   : " ";
    box-shadow: 3px 3px 7px #ababab, -3px -3px 7px #fff
}
.checkbox-input:before,
.checkbox-input:checked:after {
    text-align   : center;
    width        : 20px;
    height       : 20px;
    left         : 0;
    top          : 0;
    display      : inline-block;
    position     : absolute;
    border-radius: 20% !important
}
.checkbox-input:checked:after {
    content   : "✔";
    box-shadow: inset 3px 3px 5px #b8b9be, inset -3px -3px 5px #fff !important
}
.checkbox-input:hover:before {
    content      : "✔";
    text-align   : center;
    width        : 20px;
    height       : 20px;
    left         : 0;
    top          : 0;
    display      : inline-block;
    border-radius: 20% !important;
    position     : relative
}

/* Définition pour l'objet HTML radio */
.radio-input {
    margin            : 0;
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
    display           : inline-block;
    position          : relative;
    text-align        : center;
    width             : 20px;
    height            : 20px;
    border-radius     : 100%;
    box-shadow        : inset 3px 3px 5px #b8b9be, inset -3px -3px 5px #fff
}
.radio-input, .radio-label {
    vertical-align: middle;
    cursor        : pointer
}
.radio-input:before {
    content      : " ";
    width        : 20px;
    height       : 20px;
    left         : 0;
    top          : 0;
    border-radius: 100%;
    box-shadow   : inset 3px 3px 5px #b8b9be, inset -3px -3px 5px #fff
}
.radio-input:before, .radio-input:checked:before {
    text-align: center;
    display   : inline-block;
    position  : relative
}
.radio-input:checked:before {
    width         : 12px !important;
    height        : 12px !important;
    border        : 4px solid rgba(0, 0, 0, .3);
    vertical-align: middle
}
.radio-input:hover:before {
    content      : " ";
    text-align   : center;
    width        : 20px;
    height       : 20px;
    left         : 0;
    top          : 0;
    display      : inline-block;
    position     : relative;
    border-radius: 100%;
    box-shadow   : inset 3px 3px 5px #b8b9be, inset -3px -3px 5px #fff
}
.radio-input:focus { outline: 0 }

/* Définition pour l'objet HTML input */
.input {
	padding			: 15px;
	text-align		: left !important;
	font-size		: 15px;
	border			: none;
	border-radius	: 10px;
	background		: white;
	box-shadow		: 3px 3px 7px #ababab, -3px -3px 7px #ffffff;
}
.square { border-radius: 0px !important; }
.rounded { border-radius: 30px !important; }
input:focus,
input:disabled {
	outline			: 0;
	box-shadow		: inset 3px 3px 5px #b8b9be, inset -3px -3px 5px #fff !important;
}
input.small {
	padding-top		: 10px;
	padding-bottom	: 10px;
	font-size		: 13px;
}
input.medium { font-size: 20px; }
input.large { font-size: 25px; }

/* Définition pour l'objet HTML input-group */
.input-group {
    display: flex;
    width: fit-content;
    border-radius: 10px;
    box-shadow: 3px 3px 7px #ababab, -3px -3px 7px #ffffff;
}
.input-group > input { border: none; }
.input-group > .input-group-left {
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: none !important;
}
.input-group > .input-group-left:not(input) {
    border-right: 0.1px solid;
    border-color: rgb(235, 234, 234);
}
.input-group > .input-group-right {
    padding: 10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: none !important;
}
.input-group > .input-group-right:not(input) {
    border-left: 0.1px solid;
    border-color: rgb(235, 234, 234);
}
.input-group > input:not(.outset-neomo):not(.outset-gray):not(.outset-dark):not(.outset-orange):focus {
    box-shadow: inset 3px 3px 5px #b8b9be, inset -3px -3px 5px #fff !important;
}

/* Définition pour l'objet HTML select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  box-shadow: 3px 3px 7px #ababab, -3px -3px 7px #ffffff;
}
select:hover { cursor: pointer; }
select:focus { outline: 0; }
select {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
select::-webkit-scrollbar { display: none; }

/* Définition de la taille et épaisseur de la font */
.font-size-1 { font-size: 2.5rem }
.font-size-2 { font-size: 2rem }
.font-size-3 { font-size: 1.75rem }
.font-size-4 { font-size: 1.5rem }
.font-size-5 { font-size: 1.25rem }
.font-size-6 { font-size: 1rem }
.font-size-7 { font-size: 0.75rem }
.font-size-8 { font-size: 0.50rem }
.font-weight-1 { font-weight: 850 }
.font-weight-2 { font-weight: 620 }
.font-weight-3 { font-weight: 500 }
.font-weight-4 { font-weight: lighter }
.font-style-normal { font-style: normal }
.font-style-italic { font-style: italic }
.font-style-oblique { font-style: oblique }
.font-transform-lowercase { text-transform: lowercase }
.font-transform-uppercase { text-transform: uppercase }
.font-transform-capitalize { text-transform: capitalize }

/* Définition des marges, remplissages */
.p-0, .pl-0 { padding-left: 0 }
.p-1, .pl-1 { padding-left: 1rem }
.p-2, .pl-2 { padding-left: 1.2rem }
.p-3, .pl-3 { padding-left: 1.3rem }
.p-4, .pl-4 { padding-left: 1.4rem }
.p-5, .pl-5 { padding-left: 1.5rem }
.p-6, .pl-6 { padding-left: 1.6rem }
.p-7, .pl-7 { padding-left: 1.7rem }
.p-8, .pl-8 { padding-left: 1.8rem }
.p-9, .pl-9 { padding-left: 1.9rem }
.p-10, .pl-10 { padding-left: 2rem }
.p-48, .pl-48 { padding-left: 3rem }
.p-0, .pr-0 { padding-right: 0 }
.p-1, .pr-1 { padding-right: 1rem }
.p-2,.pr-2 { padding-right: 1.2rem }
.p-3, .pr-3 { padding-right: 1.3rem }
.p-4, .pr-4 { padding-right: 1.4rem }
.p-5, .pr-5 { padding-right: 1.5rem }
.p-6, .pr-6 { padding-right: 1.6rem }
.p-7, .pr-7 { padding-right: 1.7rem }
.p-8, .pr-8 { padding-right: 1.8rem }
.p-9, .pr-9 { padding-right: 1.9rem }
.p-10, .pr-10 { padding-right: 2rem }
.p-48, .pr-48 { padding-right: 3rem }
.p-0, .pt-0 { padding-top: 0 }
.p-1, .pt-1 { padding-top: 1rem }
.p-2, .pt-2 { padding-top: 1.2rem }
.p-3, .pt-3 { padding-top: 1.3rem }
.p-4, .pt-4 { padding-top: 1.4rem }
.p-5, .pt-5 { padding-top: 1.5rem }
.p-6, .pt-6 { padding-top: 1.6rem }
.p-7, .pt-7 { padding-top: 1.7rem }
.p-8, .pt-8 { padding-top: 1.8rem }
.p-9, .pt-9 { padding-top: 1.9rem }
.p-10, .pt-10 { padding-top: 2rem }
.p-48, .pt-48 { padding-top: 3rem }
.p-0, .pb-0 { padding-bottom: 0 }
.p-1, .pb-1 { padding-bottom: 1rem }
.p-2, .pb-2 { padding-bottom: 1.2rem }
.p-3, .pb-3 { padding-bottom: 1.3rem }
.p-4, .pb-4 { padding-bottom: 1.4rem }
.p-5, .pb-5 { padding-bottom: 1.5rem }
.p-6, .pb-6 { padding-bottom: 1.6rem }
.p-7, .pb-7 { padding-bottom: 1.7rem }
.p-8, .pb-8 { padding-bottom: 1.8rem }
.p-9, .pb-9 { padding-bottom: 1.9rem }
.p-10, .pb-10 { padding-bottom: 2rem }
.p-48, .pb-48 { padding-bottom: 3rem }
.m-auto { margin: auto !important }
.ml-auto { margin-left: auto !important }
.mr-auto { margin-right: auto !important }
.mt-auto { margin-top: auto !important }
.mb-auto { margin-bottom: auto !important }
.m-0, .ml-0 { margin-left: 0 }
.m-1, .ml-1 { margin-left: 1rem }
.m-2, .ml-2 { margin-left: 1.2rem }
.m-3, .ml-3 { margin-left: 1.3rem }
.m-4, .ml-4 { margin-left: 1.4rem }
.m-5, .ml-5 { margin-left: 1.5rem }
.m-6, .ml-6 { margin-left: 1.6rem }
.m-7, .ml-7 { margin-left: 1.7rem }
.m-8, .ml-8 { margin-left: 1.8rem }
.m-9, .ml-9 { margin-left: 1.9rem }
.m-10, .ml-10 { margin-left: 2rem }
.m-0, .mr-0 { margin-right: 0 }
.m-1, .mr-1 { margin-right: 1rem }
.m-2, .mr-2 { margin-right: 1.2rem }
.m-3, .mr-3 { margin-right: 1.3rem }
.m-4, .mr-4 { margin-right: 1.4rem }
.m-5, .mr-5 { margin-right: 1.5rem }
.m-6, .mr-6 { margin-right: 1.6rem }
.m-7, .mr-7 { margin-right: 1.7rem }
.m-8, .mr-8 { margin-right: 1.8rem }
.m-9, .mr-9 { margin-right: 1.9rem }
.m-10, .mr-10 { margin-right: 2rem }
.m-0, .mt-0 { margin-top: 0 }
.m-1, .mt-1 { margin-top: 1rem }
.m-2, .mt-2 { margin-top: 1.2rem }
.m-3, .mt-3 { margin-top: 1.3rem }
.m-4, .mt-4 { margin-top: 1.4rem }
.m-5, .mt-5 { margin-top: 1.5rem }
.m-6, .mt-6 { margin-top: 1.6rem }
.m-7, .mt-7 { margin-top: 1.7rem }
.m-8, .mt-8 { margin-top: 1.8rem }
.m-9, .mt-9 { margin-top: 1.9rem }
.m-10, .mt-10 { margin-top: 2rem }
.m-0, .mb-0 { margin-bottom: 0 }
.m-1, .mb-1 { margin-bottom: 1rem }
.m-2, .mb-2 { margin-bottom: 1.2rem }
.m-3, .mb-3 { margin-bottom: 1.3rem }
.m-4, .mb-4 { margin-bottom: 1.4rem }
.m-5, .mb-5 { margin-bottom: 1.5rem }
.m-6, .mb-6 { margin-bottom: 1.6rem }
.m-7, .mb-7 { margin-bottom: 1.7rem }
.m-8, .mb-8 { margin-bottom: 1.8rem }
.m-9, .mb-9 { margin-bottom: 1.9rem }
.m-10, .mb-10 { margin-bottom: 2rem }

/* Définition des couleurs */
:root {
  --blue     : #0056b3;
  --indigo   : #6610f2;
  --purple   : #6f42c1;
  --pink     : #e83e8c;
  --red      : #a91e2c;
  --orange   : #fd7e14;
  --yellow   : #f0b400;
  --green    : #18634b;
  --teal     : #0056b3;
  --cyan     : #17a2b8;
  --white    : #ecf0f3;
  --gray     : #93a5be;
  --gray-dark: #525480;
  --primary  : #e6e7ee;
  --secondary: #2d4cc8;
  --success  : #18634b;
  --info     : #0056b3;
  --warning  : #f0b400;
  --danger   : #a91e2c;
  --light    : #d1d9e6;
  --dark     : #31344b;
  --default  : #262833;
  --neutral  : #ecf0f3;
  --soft     : #e6e7ee;
  --black    : #262833;
  --gray-100 : #f3f7fa;
  --gray-200 : #fafbfe;
  --gray-300 : #e6e7ee;
  --gray-400 : #d1d9e6;
  --gray-500 : #b1bcce;
  --gray-600 : #93a5be;
  --gray-700 : #66799e;
  --gray-800 : #525480;
  --facebook : #3b5999;
  --dribbble : #ea4c89;
  --github   : #222;
  --behance  : #0057ff;
  --twitter  : #1da1f2;
  --slack    : #3aaf85;
  --neomo    : #eff8ff;
}