::selection{
      background-color: rgb(177, 28, 28);
      color:white;
      text-decoration: none;
      border-radius: 0px;
}
html{
      margin: 0;
      padding: 0;
      font-size: 73%;
      height: 100vh;
      
}
.login__body{
      background-image: linear-gradient(to left bottom, rgba(12, 103, 168, 0.673),rgba(165, 35, 76, 0.704)), url("../../img/Fancycrave.com01.jpg");
      background-repeat: no-repeat;
      background-position:middle right;
      background-size: 100%;
      height: 90vh;
      background-attachment:fixed;
}
.ani{
      animation-name: moveInBottom;
      animation-duration: .7s;
      animation-timing-function:cubic-bezier(0.39, 0.575, 0.565, 1)
}
 @keyframes moveInBottom {
       0% {
             opacity: 0;
             transform: translateY(5rem);
       }

       100% {
             opacity: 1;
             transform: translate(0);
       }
 }
.full-body{
      background-color:rgb(255, 255, 255);
      margin: 2.5rem auto;
      border-radius: .4rem;
      width:90%;
      box-shadow: 2rem 2rem 3rem rgba(0, 0, 0, 0.574);;
}
.back-img{
      height: 100%;
      width: 100%;
      position: absolute;
}


.top-nav{
      display: flex;
      background-image:linear-gradient(to left, rgba(177,28,28), rgb(179, 0, 0));
      align-items: center;
      padding:.5rem .7rem;
      /* margin: .5rem auto; */
      width: 100%;
      justify-content: space-around;;
      border-top-right-radius: .35rem;
      border-top-left-radius: .35rem;
     
}
.logo-style{
      box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.574);
}

.btnn, .btnn__add{
      text-transform: uppercase;
      border-radius: .5rem;;
      box-shadow: .3rem .3rem 1rem rgba(0, 0, 0, 0.574);
      transition: all .3s;
      text-decoration: none;
      background-color: rgb(177,28,28);
      color:white;
      font-weight: 600;
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      backface-visibility: hidden;
      height: 100%;
      border:none;
      padding:1rem 2rem;
      letter-spacing: 1.1px;
      backface-visibility:hidden;
      position:relative;
}
.btnn:hover {
      transform: translateY(-2px);
      background-color: rgb(131, 16, 16);
      box-shadow: .6rem .6rem 1rem rgba(0, 0, 0, 0.574);

}
.btnn:active {
      transform: translateY(1px);

}
.card-body, .card{
      background-color: rgb(255, 255, 255);
      border-radius: 1rem;
      box-shadow: .5rem .5rem 1.5rem rgba(0, 0, 0, 0.574);
}
.form-control{
      padding: 1rem 2rem;
      border:2px solid transparent;
      font-size: 1.2rem;
      font-weight: 500;
      background-color: rgb(255, 255, 255);
}

.form-control:active, .form-control:focus{
      border: 2px solid rgb(177, 28, 28);
      box-shadow: none;
}

.lpg:link, .lpg:visited{
      display:inline-block;
      justify-self: center;
      font-size:1.5rem;
      color:white;
      text-decoration:none;
      font-weight:500;
      letter-spacing:1px;
      transition:all .2s;
}
.lpg:hover{
      transform: translatey(-2px);
}
.lpg:active {
      transform: translatey(1px);
}

.footer{
      margin:0; 
      padding:0;
}

.logout:link, .logout:visited{
      text-decoration:none;
      color:white;

}
.form-group{
      position:relative;
      height:5rem;
}
.form-control:placeholder-shown + .form-label{
      position:absolute;
       opacity:0; 
       visibility: hidden; 
      transform:translateY(-3rem);
}
 .form-label {
      /* background-image: linear-gradient(to right,rgb(17, 17, 17), rgb(79, 79, 79));
      -webkit-background-clip: text;*/
      
      /* color:transparent; */
      /* text-decoration: underline; */
      color: rgb(255, 255, 255);
      font-size:1.5rem;
      transition: all .2s;
      display:inline-block;
      opacity:1;
      transform: translateY(-6rem);
}
.form-control::placeholder{
      color:#a1a1a1;
      font-size:1.2rem;
}

option{
      color:#6e6d6d;
      font-size:1.2rem;
      outline:none;
}

.bg-grey{
      background-image:url("../img/img1.png");
      Background-size: cover
}
h3{
      /* background-image: linear-gradient(to right,rgb(17, 17, 17), rgb(79, 79, 79));
      -webkit-background-clip: text;
      color:transparent; */
      color: rgb(0, 0, 0);
      text-decoration: underline;
      display:inline-block;
}
.headingcenter{
      text-align: center;
}

.tablevalue{
      font-size:1.2rem;
      font-weight: 500;
      padding:1rem 2rem;
}
.boxshadow {
      box-shadow: .5rem .5rem 2rem rgba(0, 0, 0, 0.574);
}

.btnn__add::before{
      visibility: visible;
      content: '+';
      height: 4rem;
      width: 4rem;
      display: block;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(11, 26, 162, 0.85);
      color:white;
      /* opacity: 0; */
      transition: opacity .2s;
      text-align: center;
      font-size:2.7rem;
      transition: all .2s;
      box-shadow: .3rem .3rem 1rem rgba(0, 0, 0, 0.574);

}
.btnn__add:hover::before{
      font-weight: 500;
      font-size: 1.21rem;
      width:10rem;
      border-radius: 3rem;
      content:"+ Add Application";
      text-transform: capitalize;
      text-align: center;
}
.btnn__smaller{
      padding: .8rem 1.6rem;
      font-size:90%;
}
.btnn__smallest {
      padding: .5rem 1rem;
      font-size: 80%;
}
.cont{
      display:flex;
      justify-content: center;
      align-items: center;
}
.right{
      margin-right: 0 auto;
}

.heading{
      font-size: 2.8rem;
      text-transform: capitalize;
      /* box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.574); */
      padding:1rem 2rem;
      border-radius: 2rem;
      /* background-image: radial-gradient(rgb(236, 234, 234), rgb(224, 219, 219), rgb(203, 195, 195)); */
      text-decoration: underline;
      color:#76f7ff;
}
.projname{
      text-align: center;
      display:inline-block;
      width: 100%;
}
.ref, .date{
      font-size:1.6rem;
      font-family:Arial, Helvetica, sans-serif;
      letter-spacing: 1px;
      font-weight: 600;
      color:white;
}

.container__first{
      background-color: rgb(27 49 87 / 92%);
      align-items: center;
      border-radius: 1rem;
      box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.574);
      padding:1.5rem 3rem;
      /* width:60%; */
}

.projstate{
      border-radius:1rem;
            background-color:rgb(27 49 87 / 92%);
      box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.574);
      padding: 1.5rem 3rem;
      z-index:2;
      position:relative;
}
.para{
      color:white;
}

.para::before{
      content:"-"; 
      display:inline-block;
      width:2rem;
      height:2rem;
      font-size:2rem;
      color:rgb(255, 255, 255)
}

.para_link:link, .para_link:visited {
      text-decoration:underline;
      color:rgb(177, 28, 28);
}

.notebody{
      background-color:white;
      border-radius: 1rem;
      box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.574);
      padding:1.5rem 3rem;
}

.response{
      background-color: rgba(238, 238, 238, 0.856);
}
.response:focus, .response:active{
      background-color: rgba(238, 238, 238, 0.856);
}
.key{
      font-size: 1.6rem;
      font-weight:600;
      text-decoration:underline;
      color:black;
}
.val{
      font-size:1rem;
      color:#6e6d6d;

}