@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/****** VARIABLES ******/

body.lightmode{
  --main-body-bg: #dbdbdb;
  /*--main-card-bg: #f5f5f5;*/
  --main-card-bg: #e9e9e9;
  --main-disabled-card-bg: #ffffff;
  --main-searchbar-bg: #f5f5f5;
  --main-toggle-color: #000000;
  --main-card-text: #4D4D4D;
  /*--main-tag-text: #ffffff;*/
  --main-tag-text: #000000;
  --main-tag-weight: 500;
  /*--main-color1: #FC887B;
  --main-color2: #D0E6A5;
  --main-color3: #FFDD95;
  --main-color4: #CCABDA;
  --main-color5: #F9BAC9;
  --main-color6: #86E3CE;*/
  --main-color1: #15A196;
  --main-color2: #5FBDC9;
  --main-color3: #DADA88;
  --main-color4: #ECBB2C;
  --main-color5: #D87F38;
  --main-color6: #CA3D3D;
  --text-card: #FFFFFF;
  --delivered-border-color: #b0b0b0;
}
body.darkmode{
    /* les variables ici */
  --main-body-bg: #242424;
  --main-card-bg: #373737;
  --main-disabled-card-bg: #282828;
  --main-searchbar-bg: #565656;
  --main-toggle-color: #f5f5f5;
  --main-card-text: #ffffff;
  --main-tag-text: #000000;
  --main-tag-weight: 500;
  /*--main-color1: #FF0088;
  --main-color2: #B357E4;
  --main-color3: #00D5FF;
  --main-color4: #FF79F5;
  --main-color5: #00FFE6;
  --main-color6: #FAFF7D;*/
  --main-color1: #37918A;
  --main-color2: #6CB0B8;
  --main-color3: #DADAA0;
  --main-color4: #E4BD4B;
  --main-color5: #CB6D21;
  --main-color6: #972828;
  --text-card: #FFFFFF;
  --delivered-border-color: #111111;
}



body{
    font-family: 'Rubik', serif;
    background-color: var(--main-body-bg);
}

/*.btn-dark{
    background: var(--main-bg-color);
    border-color: var(--main-bg-color);
    color: var(--main-text-color);
}*/

.btn-group{
    border: 0px solid #cdcdcd;
    border-radius: 0.2rem;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-light{
    background: #565656;
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0);
}
.btn-light:hover{
    background: #262626;
    border: 1px solid rgba(0, 0, 0, 0);
    color: #ffffff;
}
.btn-light:focus, .btn-dark:focus, .btn-warning:focus{
    box-shadow: none;
}
.btn-dark{
    background: #262626;
    color: #ffffff;
    border: none;
}
.btn-dark:hover{
    background: #000000;
    border:none;
}
.btn-warning, .btn-warning:active, .btn-warning:focus {
    color: #000000;
    background-color: var(--main-bg-color);
    border-color: var(--main-bg-color);
}
.btn-warning:hover {
    color: #000000;
    background-color: var(--main-bg-darken-color);
    border-color: var(--main-bg-darken-color);
}
.card{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15);
    color: var(--main-card-text);
    background-color: var(--main-card-bg);
    border-radius: 10px;
    transition: 0.3s ease !important;
}
.card-header{
    /*background: linear-gradient(137deg, #136bab, #30c9d2);
    background: linear-gradient(90deg, var(--main-bg-darken-color) 0%, var(--main-bg-darken-color) 75%, var(--main-bg-color) 95%);*/
    background: var(--main-bg-color);
    color: var(--text-card);
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    height: 40px;
    border-radius: 10px 10px 0 0 !important;
}
.card-header a{
    color:inherit !important;
}
.project-card .card-header::after{
    content: "";
    left: 0;
    top: 0;
    background-color: #1b1b1b;
    height: 40px;
    width: 80%;
    position: absolute;
    display: block;
    z-index: 0;
    border-radius: 10px 25px 25px 0px;
}
 .project_name, .note_title{
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    z-index: 1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 80%;
    padding-right: 0.5rem;
}

.project-card .project_tag{
    /*background: linear-gradient(90deg, var(--main-bg-darken-color) 0%, var(--main-bg-color) 100%);*/
    background: var(--main-bg-color);
    padding: 5px 10px 6px 10px;
    color: var(--main-tag-text);
    font-style: italic;
    border-radius: 3px;
    font-weight: var(--main-tag-weight);
    font-size: 12px;
}

.editCard{
    transition: opacity ease .6s;
}


.newOne .card-header{
    background: linear-gradient(137deg, #136bab, #30c9d2);
}
.clr-field{
    display: block;
}
.tag-livre{
    opacity:0.7;
    box-shadow: 0 .2rem 0.5rem rgba(0,0,0,0);
    filter: brightness(0.7);
    border: none;
    border-color: var(--delivered-border-color);
    background-color: var(--main-disabled-card-bg);
}
.tag-livre:hover{
    opacity:1;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.5);
    filter: brightness(1);
    border: none;
    background-color:  var(--main-card-bg); 
}

.tag-livre:focus-visible, .btn-light:focus-visible, .btn-dark:focus-visible, .btn-warning:focus-visible {
    outline: none !important;
}

.NotWorkinOnIt{
    opacity:0.3;
}

.AddButton{
    display: block;
    margin:auto;
    color: #ffffff;
    background-color: #454545;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.AddButton i{
    align-self: center;
    margin-top: -2px;
}

.AddButton:hover{
    background-color: #565656;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    transition: 0.3s ease;
}

.form-control{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15);
    background-color: var(--main-searchbar-bg) !important;
    color: var(--main-card-text) !important;
    border: none !important;
}
.form-control::placeholder{
    color: var(--main-card-text) !important;
    opacity: 0.8;
}
.form-control:focus{
    box-shadow: none;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15);
}

.movingPannel .card{
    opacity:0.5;
    border: 2px dashed var(--main-card-text);
}

#SwitchModeColor{
    color: var(--main-toggle-color);
    font-size: 1.4rem;
    --bs-btn-hover-color: var(--main-toggle-color);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb:transparent;
}
#SwitchModeColor:focus{
    box-shadow: none;
}

body.lightmode .fa-toggle-off {
    transform: rotate(180deg);
}

body.lightmode .btn-primary{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15);
}

a.biglink,
header a{
    font-size: 14px;
    text-transform : uppercase;
    color: var(--main-card-text);
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease;
}
a.biglink:hover,
header a:hover{
    color: var(--main-card-text);
    opacity: 0.6;
}

.AddToDo .hidden-at-first{
    width:auto;
    transition: all ease 1s;
}
.AddToDo .AddTodoBtn{
}
.AddToDo.inactive-form .hidden-at-first{
    width:0;
    display: none;
}
.AddToDo.inactive-form .AddTodoBtn{
    border-radius: .2rem !important;
}

.AddToDo.inactive-form .hidden-active,
.AddToDo .hidden-inactive{
    display:inherit;
}
.AddToDo .hidden-active,
.AddToDo.inactive-form .hidden-inactive{
    display:none;
}
.to-do-list .list-group-item{
    cursor: pointer;
    user-select:none;
    transition: all ease .1s;
}
.to-do-list .list-group-item .titreTodo{
    display:inline;
}
.to-do-list .list-group-item.done-todo{
    background:#eeeeee;
}
.to-do-list .list-group-item.done-todo .titreTodo{
    text-decoration: line-through;
}
.to-do-list .list-group-item .titreTodo + .todoActions{
    transition: all ease .1s;
    opacity:0;
}
.to-do-list .list-group-item:hover .titreTodo + .todoActions{
    opacity:1;
}

.to-do-list .list-group-item.movingTask{
    opacity: 0.8;
}
.MovableTask{
    box-shadow: 0px 0px 5px 1px rgb(57 188 202 / 58%);
}

.myacountImg .rounded-circle {
    border: 2px solid white;
    max-width: 40px;
    margin: 0 1rem;
}


.attachto-results {
    position: absolute;
    z-index: 3;
    background: var(--main-card-bg);
    border-radius: 0 0rem 0.6rem 0.6rem;
    border: 1px solid black;
    border-top: none;
    left: 0;
    right: 0;
    width: 100%;
}
.attachto-results:empty{
    display: none;
}

.attachto-results .attachuser {
    color:var(--main-card-text);
    border-bottom: 1px solid black;
    padding: 0.6rem;
    cursor:pointer;
}
.attachto-results .attachuser:last-child{
    border-bottom: none;
}
.attachto-results .attachuser img {
    max-width: 16%;
    border-radius: 50%;
    border: 2px solid var(--main-card-text);
    margin-right: 3%;
}

.userAT{
    border-radius: 50%;
    border: 2px solid #1b1b1b;
    max-width: 26px;
    vertical-align: middle;
    margin-left: 5px;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    position: relative;
}
.userAT img{
    width:100%;
    padding:4%;
}
.userAT:hover:after {
    content: '-';
    color:white;
    position: absolute;
    width: 26px;
    height: 26px;
    background: #e92535;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    left: -2px;
    top: 0px;
    opacity: 0.8;
}

.btn-primary{
    color: #000000;
    background: #f6e70a;
    border: none;
    outline: none;
}
.btn-primary:hover{
    color: #000000;
    background: #ded004;
}
.btn-primary:active{
    color: #000000;
    background: #ded004;
}
.btn-primary:focus{
    color: #000000;
    background: #ded004;
    box-shadow: none !important;
}
.btn-primary:focus-visible{
    outline: none;
}

.login-title{
    color: var(--main-card-text);
}