:root{
        --box-shadow: 0 7px 8px rgba(0,0,0,0.2) ;
      }
      .hidden{
        display: none !important;
      }
       .container{
        width: 95% !important;
        padding: 20px 0 !important;
       }
       .title div:first-child{
         font-weight: bold;
         font-size: 45px;
        }
        .title div:last-child{
          color: #7f7068;
          padding: 5px 10px;
        }
        .dashboard h1{
        font-size: 20px;
        margin-top: 20px;
 
        }
       .dashboard .currentbalance{
         width: 100%;
         
         box-shadow: 0 5px 8px rgba(0,0,0,0.2);
         border-radius: 30px;
         padding: 20px;
        }
       .dashboard .currentbalance div:first-child{
        font-weight: bold;
        font-size: 25px;
        color: rgba(0,0,0,0.8);
        padding-bottom: 20px;
      }
      .dashboard .currentbalance  div:last-child{
          font-weight: bold;
          font-size: 60px;
          padding-left: 35px;
        }
        .dashboard .currentbalance .displaycurrentbalance{
          display: flex;
          column-gap: 25px;
        }
        
        .dashboard .currentbalance:hover{
           transition: .5s;
           transform: translateY(-5px);
        }
        .incomeexpenses{
          display: flex;
          padding: 10px;
          margin-top: 20px;

        }
        .incomeexpenses .plus{
          width: 45%;
          
          padding: 20px;
          border-radius: 20px;
          margin-left: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-shadow:0 5px 8px rgba(0,0,0,0.2) ;
        }
        .incomeexpenses .plus:hover{
          transform: translateY(-4px);
          transition: .45s;
        }
        .incomeexpenses .plus i{
          font-size: 50px;
          opacity: 50%;
        }
        .incomeexpenses .expenses{
          border-left: 10px solid #DC2626;
          color: #DC2626;
          background-image: linear-gradient(to right bottom, white, rgba(250,0, 0, 0.2));;
        }
        .incomeexpenses .incomes{
          border-left: 10px solid #059669;
          color: #059669;
          background-image: linear-gradient(to right bottom, white, rgba(0, 250, 0, 0.1));
        }
        .incomeexpenses .plus div:first-child{
          font-size: 25px;
          font-weight: bold;
         
        }
        .incomeexpenses .plus div:last-child{
          font-weight: bold;
          font-size: 55px;
          margin: 5px 10px;
        }
        .addtransactions{
          border-radius: 20px;
          box-shadow: var(--box-shadow);
          display: flex;
          flex-direction: column;
          padding: 20px;
        }
        .addtransactions input , .addtransactions select , .addtransactions textarea {
          border-radius: 5px;
          padding: 15px 10px;
          font-size: 20px;
          margin: 12px 0;
          outline: .3px solid black;
        }
        .addtransactions label{
          margin-top: 20px;
          font-size: 20px;
        }
        .addtransactions button{
          padding: 10px;
          background-color: rgb(59, 130, 246 , 0.88) ;
          border-radius: 20px;
          color: white;
          text-transform: capitalize;
          font-weight: bold;
          cursor: pointer;
        }
         .addtransactions button:hover{
          background-color: rgb(50, 110, 250 );
          transition: .3s;
         }
         .hidden{
          display: none;
         }
       
         .displaytransactions .filter{
          display: flex;
          box-shadow: var(--box-shadow);
          border-radius: 20px;
          padding: 22px;
          margin: 25px 0;
          align-items: center;
         }
         .displaytransactions .filter .fil {
                width: 50%;
         }
         .displaytransactions .filter .fil div:first-child{
              margin-bottom: 10px;
              font-weight: bold;
              font-size: 20px;
         }
         .displaytransactions .filter .fil select{
              width: 95%;
              padding: 10px 10px;
              font-size: 20px;
              border-radius: 7px;
         }
         .filterbtn{
          margin-top: 35px;
          display: flex;
          column-gap: 15px;
         }
         .filterbtn button{
              padding: 12px;
              border-radius: 8px;
              background-color: rgba(230, 230, 227 , 0.5);
              font-size: 20px;
              cursor: pointer;
         }
         .filterbtn button:hover{
          background-color: rgba(230, 230, 227);
          box-shadow: var(--box-shadow);
          transform: translateY(-2px);
          transition: .3s;
         }
         .transactions{
              box-shadow: var(--box-shadow);
              padding: 21px;
              border-radius: 20px;
              margin-top: 25px;
              border-top: 1px solid rgba(0, 0, 0, 0.3);
         }
         .transactions .transactionsinfo{
              font-size: 20px;
              display: flex;
              justify-content: space-between;
         }
         .transactions .transactionsinfo span:first-child{
              font-weight: bold;
         }
         
         .alltransactions .notransactions{
           margin: 80px;
         }
         .alltransactions .notransactions h1{
              font-size: 1.5em;
              margin: 0.67em 0;
              text-align: center;
         }
         .alltransactions .notransactions p{
                text-align: center;
               letter-spacing: 1px;
         }

         .alltransactions .transaction{
              background: rgba(0, 250, 0, 0.1);
              padding: 15px;
              border-top: 1px solid rgba(0, 0, 0, 0.2);
              border-left: 8px solid #059669;
              border-radius: 10px;
              margin-top: 20px;
              word-break: break-word;
              box-shadow: var(--box-shadow);
         }
         .alltransactions .transaction:hover{
          transform: translateY(-3px);
          box-shadow: 0 9px 8px rgba(0,0,0,0.3) ;
          transition: .3s;
         }
         .alltransactions .transaction .nav{
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          font-size: 20px;
          margin-bottom: 10px;
          align-items: center;
         }
         .alltransactions .transaction .nav .left{
          display: flex;
          column-gap: 10px;
          align-items: center;
          font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          text-transform: uppercase;
         }
         .alltransactions .transaction .nav .left .transtype{
                background: #059669;
                border-radius: 40px;
                padding: 4px 8px;
                font-size: 0.95rem;
                color: white;
          }
          .alltransactions .transaction .nav .left .transcategory{
            font-size: 18px;
            color: #1f2937;
          }
          .alltransactions .transaction .nav .displaymoney{
                font-size: 35px;
                padding-right: 15px;
          }
          .alltransactions .transaction .transdescription{
                padding-left: 10px;
                font-size: 18px;
                color: #4b5563;
                line-height: 20px;
          }
          .transicon{
            margin-right:10px;
           font-size:40px;
          }