:root {
    --brand-color: #20788C;
    --brand-dark: #0a242a;
    --brand-grey: #1a6070;
    --brand-grey-light: #79aeba;
    --brand-shadow: #20788C60;
    --brand-shadow-light: #20788C0F;
    --brand-secondary-color: #F2B84B;
    --brand-secondary-dark: #daa644;
    --brand-secondary-shadow: #F2B84B60;
    --brand-secondary-shadow-light: #daa644;
}

body,
.ui.table thead th,
.ui.form .field>label,
.ui.steps .active.step .icon {
    color: var(--brand-dark);
}

a,
.ui.header,
.ui.breadcrumb a,
.ui.card>.content>.header,
.ui.card>.content>a.header,
.ui.cards>.card>.content>a.header,
.ui.steps .step.active .title,
.ui.vertical.menu,
.ui.vertical.menu .item,
.ui.menu .ui.dropdown,
.ui.menu .ui.dropdown .item,
.ui.items>.item>.content>.header,
.sylius-grid-table-wrapper .ui.sortable.table thead th.sorted {
    color: var(--brand-color);
}

.ui.basic.button:hover,
.ui.basic.buttons .button:hover,
.ui.text.menu>.item:hover,
.ui.list:not(.inverted) .item,
.ui.list:not(.inverted) .item>.icon:not(.red),
.ui.styled.accordion .active.title,
.ui.styled.accordion .title:hover,
.stats .ui.basic.active.button,
.ui.menu:not(.inverted):not(.text):not(.vertical) .item .input>input {
    color: var(--brand-color) !important;
}

a:hover,
.ui.breadcrumb a:hover,
.ui.link.menu .item:hover,
.ui.vertical.menu:not(.inverted) .item:hover,
.ui.menu .dropdown.item:hover,
.ui.card>.content>a.header:hover,
.ui.cards>.card>.content>a.header:hover {
    color: var(--brand-grey);
}

.ui.basic.button,
.ui.basic.buttons .button,
.ui.text.menu>.item,
.ui.styled.accordion .title {
    color: var(--brand-grey-light) !important;
}

.ui.inverted.menu .item,
.ui.inverted.menu a.item:hover,
.ui.transparent.inverted.input,
.ui.transparent.inverted.input>input,
.ui.transparent.inverted.input>input::placeholder,
.ui.inverted.link.list.list .item a:not(.ui):hover,
.ui.inverted.link.list.list a.item:hover,
.ui.vertical.inverted.menu .item .menu a.item:hover {
    color: var(--brand-secondary-color);
}

.ui.inverted.link.list .item a:not(.ui),
.ui.vertical.inverted.menu .menu .item {
    color: var(--brand-secondary-shadow);
}

.ui.primary.button,
.ui.blue.button,
.ui.blue.buttons .button {
    background-color: var(--brand-color);
}

.ui.primary.button:hover,
.ui.blue.button:hover,
.ui.blue.buttons .button:hover,
.ui.primary.button:focus,
.ui.blue.button:focus,
.ui.blue.buttons .button:focus,
.ui.blue.button:active,
.ui.blue.buttons .button:active {
    background-color: var(--brand-grey);
}

.ui.button:hover,
.ui.button:focus,
.ui.active.button:active,
.ui.button:active {
    background-color: var(--brand-shadow);
}

.ui.inverted.menu,
.ui.inverted.segment,
.ui.primary.inverted.segment {
    background-color: var(--brand-dark);
}

.ui.blue.label,
.ui.blue.labels .label,
.ui.toggle.checkbox input:checked~.box:before,
.ui.toggle.checkbox input:checked~label:before,
.ui.toggle.checkbox input:focus:checked~.box:before,
.ui.toggle.checkbox input:focus:checked~label:before,
#sidebar.ui.sidebar.vertical.menu .item.active {
    background-color: var(--brand-color) !important;
}

.ui.card>.content,
.ui.menu:not(.inverted):not(.text):not(.vertical),
.ui.menu:not(.inverted):not(.text):not(.vertical) .item,
.ui.menu .ui.dropdown .menu>.item {
    color: var(--brand-color) !important;
    background-color: var(--brand-secondary-color) !important;
}

.ui.menu .ui.dropdown .menu>.item:hover,
.ui.menu:not(.inverted):not(.text):not(.vertical) .item:hover {
    color: var(--brand-grey) !important;
    background-color: var(--brand-secondary-shadow-light) !important;
}

#sylius-cart-button,
.ui.header .circular.icon,
.ui.button {
    color: var(--brand-color);
    background-color: var(--brand-shadow-light);
}

.ui.secondary.segment {
    color: var(--brand-grey-light);
    background-color: var(--brand-shadow-light);
}

.ui.transparent.inverted.input>input::placeholder {
    opacity: .5;
}

.ui.form .field>input:focus,
.ui.form .field>textarea:focus {
    border-color: var(--brand-shadow);
}

.ui.dropdown .menu {
    border-color: var(--brand-secondary-dark);
}

.ui.vertical.menu .item.api_cse,
.ui.purple.button,
.ui.purple.buttons .button {
    color: white;
    background-color: #6a208c;
}

.ui.vertical.menu .item.api_cse:hover,
.ui.purple.button:hover,
.ui.purple.buttons .button:hover {
    color: white;
    background-color: #551a70;
}

.ui.vertical.menu .item.api_salarie,
.ui.green.button,
.ui.green.buttons .button {
    color: white;
    background-color: #428c20;
}

.ui.vertical.menu .item.api_salarie:hover,
.ui.green.button:hover,
.ui.green.buttons .button:hover {
    color: white;
    background-color: #35701a;
}

.droit {
    width: 12em;
}

.exercices .ui.list{
    width: 8em;
}

.exercices .ui.list .item .ui.horizontal.label {
    float: right;
}

.ui.six.item.menu{
    margin: 0;
}

.ui.menu .item>i.icon{
    padding-left: 2%!important;
    padding-right: 2%!important;
}

.ui.centered.grid>.column:not(.aligned):not(.justified):not(.row), .ui.centered.grid>.row>.column:not(.aligned):not(.justified), .ui.grid .centered.row>.column:not(.aligned):not(.justified){
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 4%;
    background-color: #F2B84B;
}

.ui.column.grid>[class*="four wide"].column, .ui.grid>.column.row>[class*="four wide"].column, .ui.grid>.row>[class*="four wide"].column, .ui.grid>[class*="four wide"].column{
    width: 20%!important;
}

.ui.centered.grid>.column:not(.aligned):not(.justified):not(.row), .ui.centered.grid>.row>.column:not(.aligned):not(.justified), .ui.grid .centered.row>.column:not(.aligned):not(.justified){
    text-align: center;
    border-radius: 20px;
}

#bodyCompta{
    background-color: gainsboro!important;
}

/* --------------------------------------------------- léo, rien n'est sur ^^ ---------------------------------------------------  */


#wrapper_compta{
    padding: 0!important;
}

#wrapper.full.height{
    padding-bottom: 0!important;
}

#content_compta{
    padding: 0!important;
}

.menu_vertical_compta{
    background-color: #0a242a!important;
    border-radius: 0!important;
    width: 250px!important;
    height: 100%;
    margin-top: 0!important;
}

#bodyCompta{
    position: absolute;
    top: 0;
    right: 0;
    width: -webkit-fill-available;
    background-color: #fffcf4!important;
    margin-left: 250px;
    padding: 20px!important;
}

.ui.vertical.menu .menu_item_compta .item{
    border-radius: 10px;
    margin-bottom: 15%!important;
    color: #c7941b;
    font-size: 1.1em;
    padding: 10px!important;
}

.ui.vertical.menu .menu_item_compta .item:hover{
    background-color: #e1ad48!important;
    color: #20788c!important;
}

.item_compta{
    margin-top: 75%;
}

.item_compta, .dropdown_compta{
    color: #e1ad48!important;
}

.menu_item_compta{
    margin-top: 20%!important;
    width: 55%;
    margin: auto!important;
}

.menu_dropdown_compta{
    margin: 0.5%!important;
}

.p_titre_item_compta{
    text-align: center;
}

.menu_compta{
    position: initial!important;
    margin-top: 20px!important;
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------- TOPBAR / COMPTA ------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.a-compta-topbar{
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.a-compta-topbar:hover{
    background-color: var(--brand-secondary-shadow-light) !important;
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------- CSS MENU COMPTA ------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

#logo_compta{
    background-color: #0a242a;
    padding: 40px 40px 0 40px;
}

#div_logo_compta{
    width: 250px;
}

.menu_compta_header
{
    margin: 50px!important;
}

.menu_compta_filtre
{
    width: 95%!important;
    margin: auto!important;
}

.menu_compta_footer
{
    width: 95%;
    margin: auto;
}

.menu_compta_form
{
    width: 95%!important;
    margin: auto!important;
}
.btn_create_categorie
{
    margin-top: 50px;
}

.menu_compta_grid
{
    margin-left: 2.5%!important;
}

.menu_compta_grid_rib
{
    flex-direction: column-reverse!important;
}

.menu_compta_grid_rib1
{
    margin-left: 2%;
}

.menu_compta_segment
{
    width: 95%!important;
    margin: auto!important;
    margin-top: 20px!important;
}

.menu_compta_segment_sync
{
    width: 95%!important;
    margin: auto!important;
}

.menu_compta_segment_form2
{
    width: 95%!important;
    margin: auto!important;
    margin-bottom: 2.5%!important;
}

.menu_compta_gridnav
{
    width: 95%!important;
    margin: auto;
}

html
{
    background-color: #0a242a;
}

.p_compta
{
    margin: 0;
    font-size: 1.1em;
    padding: 10px;

}
.p_compta:hover
{
    border-radius: 10px;
    background-color: #20788C;
    color: #daa644;
}

.icon_p_compta
{
    float: right;
}

.bloc-page-compta
{
    padding-top: 20px!important;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------- ETAT IMPRIMABLE ------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.ImpButton{
    background-color: #7800b5!important;
}