@font-face {
    font-family: Authenia;
    src: url(Authenia.otf);
}

body{
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 10px;
    max-width: 1920px;
    background-size: cover;
    margin-left: 20px;
}
label{
    cursor: pointer;
}

@import url('https://fonts.googleapis.com/css2?family=Changa:wght@800&display=swap');
#numeUtilizator{
    color: rgb(235, 235, 235);
    text-shadow: 0px 1px 2px rgb(119, 118, 118);
    font-family: 'Changa', sans-serif;
	/* opacity: 0.7; */
    font-size: 1.5em;
    font-weight: bold;
    /* float: left; */
}

#meniu{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    flex:0 0 auto;
    align-self:flex-end;
    width: 100%;
    margin: auto;
    margin-top: 25px;
   }
#meniu img, #recuperare img{
    width: 37px;
    height: 37px;
    cursor: pointer;
    margin: 5px;
    filter: invert(61%) sepia(77%) saturate(476%) hue-rotate(192deg) brightness(98%) contrast(91%);
}

.fieRosu{
    filter: invert(24%) sepia(92%) saturate(5158%) hue-rotate(353deg) brightness(90%) contrast(129%) !important;
}
.fieVerde{
    filter: invert(54%) sepia(57%) saturate(5353%) hue-rotate(109deg) brightness(107%) contrast(101%) !important;
}
#submeniu, #meniuProiect, #meniuSterse{
    display: flex; 
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    display: none;
}

#meniuProiect{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.meniuPasi{
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
}
.meniuPasi label, #meniuProiect label{
    color: darkslategrey;
}
.meniuPasi checkbox{
    cursor: pointer;
}
.meniuPasi label:hover{
    padding: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}
.meniuPasi img, #meniuProiect img, #meniuSterse img{
    /* margin-left: 25px; */
    width: 30px;
    height: 30px;
    /* margin-bottom: 0px; */
    cursor: pointer;
    filter: invert(61%) sepia(77%) saturate(476%) hue-rotate(192deg) brightness(98%) contrast(91%);
}
.pasRezolvate, .pasParinte{
    cursor: pointer;
}

.detalii{
    color: dimgrey;
    padding-top: 7px;
    margin-left: 16px;
    display: none;
}
#msgAT{
    display: flex; 
    border: 1px solid gray;
    padding: 10px;
    margin: 15px;
    display: none;
}
#filtruCuiburi{
    font-size: 1.2em;
    padding: 7px;
    border: none;
    /* transition: 1.5s ease-in-out; */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: fit-content;
    margin-bottom: 30px;
}
#filtruCuiburi:focus{
    outline: none;
}

#cuiburi{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.cuib, .cuiburi, .cuibProiect{
    padding: 10px;
    margin-left: 15px;
    margin-bottom: 30px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.cuiburi span{
    font-size: 2em;
    font-weight: bold;
    filter: invert(61%) sepia(77%) saturate(476%) hue-rotate(192deg) brightness(98%) contrast(91%);
    /* color: darkslategrey; */
}
.cuibProiect{
    /* width: 30%; */
    max-width: 30%;
    border-radius: 15px 0px 0px 0px;
}
.cuibProiect a{
    font-size: 1.5em;
    font-family: Authenia;
    text-decoration: none;
}
/* .sterse{

} */
/* .eEditez{
    border: 2px solid navy;
} */
/* .eModificate{
    background-color: darkturquoise;
} */
#pasi{
    display: flex;
    flex-direction: column;
}
#adaugaPas{
    display: flex;
    flex-direction: column;
}
#pasNou, #pasNouDescriere{
    width: 90%;
    padding: 7px;
}
#pasNou{
    font-size: 1.3em;
}

#pasNouDescriere{
    height: 75px;
}

.cbSiTitlu{
    display: flex;
    flex-direction: row;
}

.pasiDeschis{
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid navy;
}

#plusPasi{
    cursor: pointer;
    float: left;
    margin-right: 20px;
    width: 37px;
    height: 37px;
    filter: invert(61%) sepia(77%) saturate(476%) hue-rotate(192deg) brightness(98%) contrast(91%);
}
#pasPrioritate, #pasNouPrioritate, #proiectPrioritate{
    text-align: right; 
}
.pas{
    margin: 7px;
    border-radius: 0px 0px 7px 12px;
    border: 1px solid rgb(212, 211, 211);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    padding: 9px;
}
/* pasHeader cu checkbox si titlu */
.pasH{
    display: flex;
    flex-direction: row;
}
.pasSelectat{
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.pas checkbox{
    margin-left: 10px;
    cursor: pointer;
}
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.btn {
    border-radius: 14px;
    background-color: #5495f7;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.3em;
    padding: 7px;
    max-width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 15px;

}

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800;900&display=swap');
[id^="titluProiect"], #numeProiectNou{
    display: flex;
    position: relative;
    padding: 10px;
    font-size: 1.9em;
    font-weight: bold;
    font-family: 'Raleway', sans-serif;
    margin-bottom: 20px;
    background-color: #131212;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(148, 146, 146, 0.541) 0px 3px 2px;
}

#numeProiectNou, #scurtaDescriereProiectNou, #descriereProiectNou{
    padding: 7px;
    padding-left: 12px;
    border: none;
    outline-width: 0;
    color: black;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}
#scurtaDescriereProiectNou, #descriereProiectNou{
    margin-top: 30px;;
    font-size: 1.2em;
}

[id^="descriere-"]{
/* #descriere{ */
    position:relative;
    max-height: 100px;
    overflow: auto;
    transition: max-height 2s cubic-bezier(0, 1, 0, 1);
}

/* *************************** */
 #mesaj{
    padding: 25px;
    background: rgb(44,249,20);
    background: linear-gradient(37deg, rgba(44,249,20,.95) 0%, rgba(63,142,250,.95) 100%);
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border: 1px solid rgb(180, 180, 180);
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 301;
 }



 .e{
     display: initial;
 }
/* *************************************************************** */
/* MENIU AT  */
/* *************************************************************** */
.cuib-mAT{
    position: relative;
    display: flex;
    flex-direction: column;
}

.div-mAT{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* border: 1px solid green; */
}

.icon-mAT{
    /* border: 1px solid blue; */
    background-repeat: no-repeat;
    cursor: pointer;
    background-size: 16px;
    z-index: 100;
    position:absolute;
    top: 0px;
    left: 0px;
    width: 16px;
    height: 16px;
}
.mAT{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 25px;
}
/* GATA MENIU AT  */

/* ***************************************************************** */
/* FUM  */
/* ***************************************************************** */
 #fum{
     background-color: rgba(97, 255, 255, .9);
     z-index: 9999;
     position: fixed;
     top: 1px;
     left: 1px;
     right: 1px;
     bottom: 1px;
     display: flex;
     justify-content: center;
     flex-direction:column;
     align-items: center;
     border: 1px solid navy;
     /* display: none; */
 }
#fumRender{
    max-height: 45%;
    max-width: 95%;
    overflow: auto;
}

 #fumCod{
     width: 65%;
     max-height: 33%;
     margin-left: auto;
     margin-right: auto;
     margin-top: 25px;
     margin-bottom: 25px;
     border: 2px solid navy;
     background: rgba(97, 255, 255, .9);
 }
 #fumBtn{
    display: flex;
    width: 50%;
    justify-content: space-evenly;
}

 #fumSalveaza{
     cursor: pointer;
 }
/* GATA FUM  */

 @import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
#byAT{
    display: flex; 
    justify-content: flex-end;
    float:right; 
    margin: 25px;
}
#byAT a{
    text-decoration: none;
    font-family: Acme;
    font-size: .8em;
    color: lightslategray;
}
@media only screen and (max-width: 700px) {
    body{
        margin-left: 0px;
    }
    .cuib, .cuiburi, .cuibProiect{
        margin-left: 0px;
    }
    .cuibProiect{
        min-width: 40%;
    }
}