:root{
	--color1:#C40000;
	--color1-rgba:rgb(196, 0, 0,0.3);
	--color1-hover:#a80909;
	--color1-active:#910b0b;
	--color1-text:#fff;

	--color1-pale:#f7dede;
	--color1-pale-hover:#f0cfcf;
	--color1-pale-active:#e0b4b4;
	--color1-pale-text:var(--color1);

	--color2:#1d66b9;
	--color2-rgba:rgb(29, 102, 185,0.3);
	--color2-hover:#1b5ba5;
	--color2-active:rgb(8, 53, 105);
	--color2-text:#fff;

	--color2-pale:#cde2fa;
	--color2-pale-hover:#aecdf0;
	--color2-pale-active:#8fb7e6;
	--color2-pale-text:var(--color1);


    --color-gris:#e5e5e5;
    --color-gris-hover:#d5d5d5;
    --color-gris-active:#ccc;
    --color-gris-text:#222;

    --color-noir:#111;
    --color-noir-hover:#222;
    --color-noir-active:#000;
    --color-noir-text:#fff;

    --color-gris-bg:#f0f0f0;
    --color-blanc:#fff;

    accent-color: var(--color1);
    --page-width:1200px;

    --input-size:34px;
    --input-size-resp:36px;

    --font-tiny:12px;
    --font-small:14px;
    --font-medium:16px;
    --font-large:18px;

    --size-tiny:24px;
    --size-small:36px;
    --size-medium:40px;
    --size-large:56px;
}

input[type='submit'],
input[type='button'],
button {
	background:var(--color1);
	color:var(--color1-text);
}

input[type='submit']:active,
input[type='button']:active,
button:active {
	background:var(--color1-active);
}

input:focus,
select:focus,
textarea:focus
{
	border-color:var(--color1);
	box-shadow:0 0 0 4px var(--color1-rgba);
}

input[type='radio'],
input[type='checkbox']
{
    accent-color: var(--color1);
}

.tbGridUI .trChecked,
#appMenuItem ul li.appMenuItem_on,
.tbGridUI tbody tr:hover{
    background:var(--color1-pale);
}
.tbGridUI tbody tr:active{
    background:var(--color1-pale-active);
}

#appMenuItem ul li.appMenuItem_on a{
	color:var(--color1);
}
a{
	color:var(--color2);
}

.clic-color1{
	background-color:var(--color1);
    color: var(--color1-text);
    cursor:pointer;
}
.clic-color1:hover{
	background-color:var(--color1-hover);
}
.clic-color1:active{
	background-color:var(--color1-active);
}

.clic-color1-pale{
	background-color:var(--color1-pale);
    color: var(--color1-pale-text);
    cursor:pointer;
}
.clic-color1-pale:hover{
	background-color:var(--color1-pale-hover);
}
.clic-color1-pale:active{
	background-color:var(--color1-pale-active);
}

.clic-color1-line{
	outline:1px solid var(--color1);
    outline-offset: -1px;
    color: var(--color1);
    background:#fff;
    cursor:pointer;
}
.clic-color1-line:hover{
	background-color:var(--color1-pale);
}
.clic-color1-line:active{
	background-color:var(--color1-pale-active);
}

.clic-color2{
	background-color:var(--color2);
    color: var(--color2-text);
    cursor:pointer;
}
.clic-color2:hover{
	background-color:var(--color2-hover);
}
.clic-color2:active{
	background-color:var(--color2-active);
}

.clic-color2-line{
	outline:1px solid var(--color2);
    outline-offset: -1px;
    color: var(--color2);
    background:#fff;
    cursor:pointer;
}
.clic-color2-line:hover{
	background-color:var(--color2-pale);
}
.clic-color2-line:active{
	background-color:var(--color2-pale-active);
}

.clic-color2-pale{
	background-color:var(--color2-pale);
    color: var(--color2-pale-text);
    cursor:pointer;
}
.clic-color2-pale:hover{
	background-color:var(--color2-pale-hover);
}
.clic-color2-pale:active{
	background-color:var(--color2-pale-active);
}

.clic-gris{
	background-color:var(--color-gris);
    color: var(--color-gris-text);
    cursor:pointer;
}
.clic-gris:hover{
	background-color:var(--color-gris-hover);
}
.clic-gris:active{
	background-color:var(--color-gris-active);
}

.clic-blanc-gris{
	background-color:#fff;
    cursor:pointer;
}
.clic-blanc-gris:hover{
	background-color:var(--color-gris);
}
.clic-blanc-gris:active{
	background-color:var(--color-gris-active);
}

.btn-tiny,
.btn-small,
.btn-medium,
.btn-large
{
    display:inline-flex;
    align-items: center;
    user-select: none;
    cursor:pointer;
    text-decoration: none !important;
}

.btn-tiny{
    height:var(--size-tiny) !important;
    font-size:var(--font-tiny) !important;
    padding:0 10px !important;
}
.btn-small{
    height:var(--size-small) !important;
    font-size:var(--font-small) !important;
    padding:0 12px !important;
}
.btn-medium{
    height:var(--size-medium) !important;
    font-size:var(--font-medium) !important;
    padding:0 16px !important;
}
.btn-large{
    height:var(--size-large) !important;
    font-size:var(--font-large) !important;
    padding:0 20px !important;
}