.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}




/* Margins */
.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.875rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.ml-4 {
    margin-left: 1.875rem !important;
}

.ml-5 {
    margin-left: 3rem !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mr-4 {
    margin-right: 1.875rem !important;
}

.mr-5 {
    margin-right: 3rem !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.mx-4 {
    margin-right: 1.875rem !important;
    margin-left: 1.875rem !important;
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Paddings */
.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.875rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pt-auto {
    padding-top: auto !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: 0.25rem !important;
}

.pl-2 {
    padding-left: 0.5rem !important;
}

.pl-3 {
    padding-left: 1rem !important;
}

.pl-4 {
    padding-left: 1.875rem !important;
}

.pl-5 {
    padding-left: 3rem !important;
}

.pl-auto {
    padding-left: auto !important;
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-4 {
    padding-right: 1.875rem !important;
    padding-left: 1.875rem !important;
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.px-auto {
    padding-right: auto !important;
    padding-left: auto !important;
}

:root {
    /* Opacité */
    --opacity: 0.1;
    /* Couleur Jade sombre */
    --color-Jade-sombre: 9, 152, 133;
    /* Couleur rouge */
    --color-red: 246, 17, 17;
    /* Couleur Orange */
    --color-orange: 255, 165, 0;
    --color-wihte :#fff;
    /* Couleur violet */
    --color-viole: 137, 59, 173;
}


:root{
    --btn-export : green;
    --btn-rounded : 0.5rem;
    --icon-margin-left : 0.2rem;
    --btn-create : #099885;
    --btn-delete :#fce8e4;
    --btn-info :#299cdb;
    --btn-read :#8000ff;

    --text-color-read : rgba(var(--color-viole));
    --color-read-transparent :rgba(var(--color-viole), var(--opacity));
    --bg-read-transparent :rgba(var(--color-viole), var(--opacity));

    --text-color-update : rgba(var(--color-orange));
    --color-update-transparent :rgba(var(--color-orange), var(--opacity));
    --bg-update-transparent :rgba(var(--color-orange), var(--opacity));

    --text-color-delete : rgba(var(--color-red));
    --color-delete-transparent :rgba(var(--color-red), var(--opacity));
    --bg-delete-transparent :rgba(var(--color-red), var(--opacity));

    --text-color-create : rgba(var(--color-Jade-sombre));
    --color-create-transparent :rgba(var(--color-Jade-sombre), var(--opacity));
    --bg-create-transparent :rgba(var(--color-Jade-sombre), var(--opacity));
}



.crud-list-button-export{
    background: var( --btn-export) !important;
    border-color: var( --btn-export) !important;
    /* color: var( --btn-export) !important; */
}

.crud-list-button-create{
    background-color: var(--btn-create) !important;
    border-color: var(--btn-create) !important;
    color: var(--color-wihte) !important;
}

.crud-list-button-update{
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text-color-update ) !important;
}

.crud-list-button-update:hover{
     background-color: var(--bg-update-transparent) !important;
    border-color: var(--bg-update-transparent) !important;
    color: var(--text-color-update ) !important;
}


/* BTN READ CSS */

.crud-list-button-read{
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text-color-read) !important;
}

.crud-list-button-read:hover{
    background-color: var(--bg-read-transparent) !important;
    border-color: var(--bg-read-transparent) !important;
    color: var(--text-color-read) !important;
}


/* BTN DELETE CSS */

.crud-list-button-delete{
    /* background-color: var(--bg-delete-transparent) !important;
    border-color: var(--bg-delete-transparent) !important; */
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text-color-delete) !important;
}

.crud-list-button-delete:hover{
    background-color: var(--bg-delete-transparent) !important;
    border-color: var(--bg-delete-transparent) !important;
    color: var(--text-color-delete) !important;
}

.ui-button{
    margin-right: 0.5rem !important;
    border-radius: var( --btn-rounded) !important;
}

.crud-list-button-export .ui-button-icon-left, .crud-list-button-create .ui-button-icon-left{

    margin-left: var( --icon-margin-left) !important;
}

.crud-list-button-export:focus {
    outline: none; /* Supprime la bordure par défaut du focus */
    box-shadow: 0 0 5px #4CAF50; /* Ajoute une ombre autour du bouton lorsqu'il est en focus */
}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
    overflow: visible !important;
    position: absolute !important;
    left: 50% !important;
    top: 30% !important;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
}

body .ui-dialog .ui-dialog-titlebar {
    background: #daf4f0 !important;
    color: #495057;
    font-weight: 700;
    border-bottom: 0 none;
    padding: 1.5rem;
}



.app-form-input input{
    display: block;
    width: 100%;
    padding: .5rem .9rem;
    font-size: var(--vz-font-base);
    font-weight: var(--vz-font-weight-normal);
    line-height: 1.5;
    color: var(--vz-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--vz-input-bg-custom);
    background-image: var(--vz-form-select-bg-img),var(--vz-form-select-bg-icon,none);
    background-clip: padding-box;
    border: var(--vz-border-width) solid var(--vz-input-border-custom);
    border-radius: var(--vz-border-radius);
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

.app-form-input .ui-selectonemenu, .app-form-input .p-datepicker , .app-form-input .ui-outputlabel, .app-form-input textarea{
	width: 100% !important;
}
.ui-datepicker{
    min-width: 0px !important;
}

.app-form-input select {
    --vz-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .5rem 2.7rem .5rem .9rem;
    font-size: var(--vz-font-base);
    font-weight: var(--vz-font-weight-normal);
    line-height: 1.5;
    color: var(--vz-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--vz-input-bg-custom);
    background-image: var(--vz-form-select-bg-img),var(--vz-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 16px 12px;
    border: var(--vz-border-width) solid var(--vz-input-border-custom);
    border-radius: var(--vz-border-radius);
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out
}


body .ui-commandlink span  {
    font-weight: var(--vz-font-weight-normal);
    color: var(--vz-dropdown-link-color) !important;
    font-size: 14px ;
}

.dropdown-item:hover {
    text-decoration: none !important;
}

body .ui-commandlink span:hover , .nav-item a:hover{
    text-decoration: none !important;
}


.br{
    border-right: 1px solid #d4d4d4 !important;
}

.toggle-btn {
    z-index: 10;
}


#showNavigatorButton,#hideNavigatorButton{
    position: absolute;
    padding: 3px !important;
}


/* Tooltip container */
[data-tooltip] {
    position: relative;
    cursor: pointer;
  }

  /* Tooltip text */
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%; /* Position the tooltip above the element */
    left: 50%;
    transform: translateX(-30%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    /* white-space: wrap; */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    font-size: 10px;
    z-index: 10;
  }

  /* Tooltip arrow */
  [data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
  }

  /* Show the tooltip text and arrow */
  [data-tooltip].show-tooltip::after,
  [data-tooltip].show-tooltip::before {
    opacity: 1;
  }


.datatable-default tr td, .datatable-default tr th {
    /* border-width: 1px !important; */
    padding: 0.5rem !important;
}

/* datatable-default table-striped */

.folder-list-title,
.folder-read-title,
.activity-read-title,
.task-read-title {
    font-size: 17px !important;
    font-weight: bold !important;
}

.navigator-link{
    color: #000;
}

.navigator-link:hover{
    color: #000 !important;
    text-decoration: none !important;
}

#folders{
    border: 0px !important;
}

body .ui-tree {
    border: 0px !important;
}

#navigator ul a{
    color: #000 !important;
    font-size: 14px !important;
}

#navigator .bx-left-arrow-alt{
    color: #ffffff !important;
}

#navigator .bxs-folder-open, #navigator .bxs-folder{
    color: #ed8600 !important;
}

#navigator .bxs-file-plus{
    color: #186af6 !important;
}

#navigator .bbx-list-plus{
    color: #792dfc !important;
}

#navigator .bxs-folder-open, #navigator .bxs-folder, #navigator .bx-list-plus, #navigator .bxs-file-plus{
    font-size: 18px !important;
}

#navigator a:hover{
    text-decoration: none !important;
}

#navigator .ui-treenode-leaf-icon{
    display: none;
}

body .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content {
 display: -ms-flexbox;
 display: block !important;
 -ms-flex-align: center;
 align-items: center;
}

/* .text-truncate-two-lines,
.text-truncate-one-lines  */

.capitalize-first-letter {
    text-transform: lowercase;
}

.capitalize-first-letter::first-letter {
    text-transform: uppercase;
}

body .ui-tree {
    background-color: #d3e2fd !important;
    background: #d3e2fd !important;
    padding: 1rem !important;
    border-radius: 10px !important;
}

.card{
    border-radius: 10px !important;
}

body .ui-datatable .ui-datatable-data>tr>td{
    font-size: 0.850rem !important;
    font-family: var(--vz-body-font-family) !important;
    padding: 1rem 1rem !important;
    background-color: transparent !important;
    background: transparent !important;
    /* border: 1px solid rgba(0, 0, 0, .08); */
    /* border-width: 0 0 1px 0; */
}

body .ui-datatable .ui-datatable-data>tr {
    background-color: transparent !important;
    background: transparent !important;
    color:  var(--vz-heading-color)!important;
}


body .ui-datatable .ui-datatable-data>tr>td .ui-tag {
    font-size: 0.850rem !important;
    font-family: var(--vz-body-font-family) !important;
    font-weight: 200;
    text-align: center !important;
}



body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem  a {
    color: #000 !important;
    font-size: 0.850rem !important;
    font-family: var(--vz-body-font-family) !important;
    font-weight: 200 !important;
    text-align: center !important;
    border-right: 1px solid #dee2e64b;
}

body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active a {
    color: #2196f3 !important;
    font-weight: bold !important;
    background-color: #f4f6f9 !important;
}



body .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-tree-toggler {
    width: 1rem !important;
    
}