@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');


*{
    margin: 0;
    color: #ffffff;
    
}

html, body {
    overflow-x: hidden;
    overflow-y: hidden;
}





body{
    background: black;
    height: 100vh;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 3px;
}

header{
    display: flex;
    
}
.fac {
    display: flex;
    color: #ffffff;
    margin-left: 10px;
    font-size: 16px;
    margin-top: 15px;
}

.fac .one {
    overflow: hidden;
    filter: drop-shadow(2px 0px 0px  rgba(0, 0, 0, 0.9));
}

.fac .two {
    margin-left: -5px;
    
    
}
header .fac{
    width: 44%;
}


header .logo {
    font-family: "Dosis", sans-serif;
    font-size: 32px;
    font-weight: 500;
    transform: scaleX(1.2);
    width: 50%;
}

.upside{
    display: inline-block;
    transform: rotateX(180deg); /* Flip text vertically */
    transform-origin: center;
    vertical-align: -24%; 
    font-size: inherit;
    
}

.avatar{
    margin-top: 20px;
    background: black;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
}

.title h2{
    
    margin-top: 15px;
    margin-bottom: 20px;
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-size: 20px;
    transform: scaleX(1.1);
   
}

/**
   
    
**/
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.password-container {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}

.password-box {
    background-color: transparent;
    width: 8px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #cccccc88;
    text-align: center;
    color: transparent;
    caret-color: transparent;
    outline: none;
    transition: background-color 0.3s, border-color 0.3s;
    -moz-appearance: textfield;
}

.password-box::-webkit-inner-spin-button,
.password-box::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Hide spinner in WebKit browsers */
    margin: 0;
}



.password-box:nth-child(1):focus {
    border-color: #238647; /* Red */
}
.password-box:nth-child(2):focus {
    border-color: #89CC53; /* Green */
}
.password-box:nth-child(3):focus {
    border-color: #3DB8AD; /* Blue */
}
.password-box:nth-child(4):focus {
    border-color: #2872BC; /* Yellow */
}
.password-box:nth-child(5):focus {
    border-color: #F28825; /* Magenta */
}
.password-box:nth-child(6):focus {
    border-color: #F5C836; /* Cyan */
}



.password-box.filled {
    color: transparent; /* Text color when filled */   
}



.password-box:nth-child(1).filled {
    background: radial-gradient(circle, #238647 50%, transparent 50%); /* Red */
    border-color: #238647;
}
.password-box:nth-child(2).filled {
    background: radial-gradient(circle, #89CC53 50%, transparent 50%); /* Green */
    border-color: #89CC53;
}
.password-box:nth-child(3).filled {
    background: radial-gradient(circle, #3DB8AD 50%, transparent 50%); /* Blue */
    border-color: #3DB8AD;
}
.password-box:nth-child(4).filled {
    background: radial-gradient(circle, #2872BC 50%, transparent 50%); /* Yellow */
    border-color: #2872BC;
}
.password-box:nth-child(5).filled {
    background: radial-gradient(circle, #F28825 50%, transparent 50%); /* Magenta */
    border-color: #F28825;
}
.password-box:nth-child(6).filled {
    background: radial-gradient(circle, #F5C836 50%, transparent 50%); /* Cyan */
    border-color: #F5C836;
}


.external a{
    font-size: 14px;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    color: rgb(0, 132, 255);
}



/** Page 1 **/

.page{
    margin-top: 60px;
}

.page .title h2{
    font-size: 16px;
    font-weight: 400;
    color: rgba(219, 219, 219, 0.767);
}
.closer h1{
   
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 26px;
    width: 100%;
    margin: 0 auto 20px auto;
    color: #e6e6e6ea;
}

.learn a{
    text-decoration:  none;
    text-transform: uppercase;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2a7ed3;
    font-size: 16px;
    transform: scaleX(1.1);
}

footer {
    position: fixed;
    bottom: 5vh;
    gap: 52px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 20px;
    font-size: 15px;
}


div .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    box-sizing: border-box;
    margin-bottom: 10px;
    
}

footer div{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* Spinner Container */
.spinner-container {
        display: none; /* Hidden by default */
    position: fixed;
    top: 47%;
    right: 14%; /* Position spinner on the right side */
    z-index: 9999; 
}

/* Spinner Animation */
.spinner {
  
    width: 16px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid #ffffff; /* White color */
    animation:
        l20-1 0.8s infinite linear alternate,
        l20-2 1.6s infinite linear;
}




/* Spinner Container */

/* Rotation and flip animation (based on the first loader's animation) */
@keyframes l20-2 {
    0%    { transform: scaleY(1) rotate(0deg); }
    49.99% { transform: scaleY(1) rotate(135deg); }
    50%   { transform: scaleY(-1) rotate(0deg); }
    100%  { transform: scaleY(-1) rotate(-135deg); }
}




/**
    Statement Page
**/



    .header{
        display: flex;
        gap: 30px;
        padding: 10px;
        color: white;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 16px;
        margin-left: 10px;
    }

    .fav {
        font-size: 22px;
        font-weight: 400;
    }

    .title1{
        font-size: 22px;
        color: #ffffff;
        font-weight: bold;
    }


    .export{
        display: flex;
        justify-content: space-between;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-left: 20px;
        margin-top: 20px;
        max-width: 100%;
    }

    .icons{
        display: flex;
        gap: 10px;
    }

    .container {
       display: flex;
        justify-content: center;
        align-items: center;
       
        margin-right: 5px;
        
    }
    .container img{
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .details{
        font-size: 16px;
        font-weight: 300;
    }

    .details div{
        margin-bottom: 2px;
        font-weight: 500;
        color: white;
    }

    .details div:nth-child(2){
        color: rgba(179, 179, 179, 0.74);
        margin-top: 10px;
    }

    .country {
        margin-right: 20px;
        align-self: center;
        width: 40px;
        height: 40px;
       
        
    }

    .country img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .period {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

      .period h2{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 20px;
        color: white;
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
      }

      .period .icons{
        margin-left: 20px;
        margin-bottom: 15px;
      }
      
       .line{
            background-color: rgba(179, 179, 179, 0.404);
            width: 100%;
            height: 1px;
        }
      .extra{

        margin-top: 15px;
      }

      .attachment{
        margin-top: 40px;
      }

      .attachment h2{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 20px;
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
      }

        .attachment_container{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 20px;
            margin-right: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
        }



        .format h2{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20px;
            margin-left: 20px;
            margin-top: 40px;
            margin-bottom: 20px;
          }


          .format .icons{
            margin-left: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          }




          .text{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            line-height: 1.2;
            margin-left: 20px;
            margin-top: 20px;
            margin-right: 4px;
            

          }


          .text p{
            color: rgba(218, 218, 218, 0.658);
            font-weight: 300;
            
          }



          .footer{
            margin-top: 20px;
            
          }

          .footer a{
            text-align: center;
           text-decoration: none;
           font-weight: 300;
           font-size: 16px;
            
          }



          .button{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #2195f3;
            width: 100%;
            padding: 10px 0px 10px 0px;
          }




          

          #datePicker {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        #datePickerone {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }


        .foverlay{
            display: none;
            position: fixed;
            top: 0;
            height: 100%;
            background-color: #02020298;
            width: 100%;
        }

            .final{
                position: fixed;
                display: none;
                justify-content: space-around;
                width: 100%;
                height: 100px;
                bottom: 0px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

            .final.show {
                display: flex; /* Show when the show class is added */
            }

            .fnals{
               
                display: none;
                
            }

            .fnals.fnalshow {
                display: flex; /* Show when the show class is added */
            }
            

            .foverlay.show {
                display: block; /* Show when the show class is added */
                
            }


            .ficon{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transform: translateY(150%);
                animation: ficon-up 0.3s forwards;
            }

            @keyframes ficon-up{
                0% {
                    transform: translateY(150%);
                }
                100% {
                    transform: translateY(0%);
                }
            }

            .ficon img{
                width: 40px;
                height: 40px;
                object-fit: contain;
                margin-bottom: 10px;
            }

            .ficon p{
                color: #fff;
                font-size: 16px;
                font-weight: 300;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            
                .share-btn1{
                    background-color: #F28825;
                }

                .share-btn2{
                    background-color: #007bff;
                }

                .share-btn3{
                    background-color: #007bff;
                
                }
            /**
            Loader
            */


            .loader {
                display: none;
                position: fixed;
                top: 40%;
                left: 45%;
                transform: translate(-50%, -50%);   
                z-index: 1002;
                width: 40px;
                 aspect-ratio: 1;
                 border-radius: 50%;
                border: 6px solid #007bff;
                animation:
                 l20-1 0.8s infinite linear alternate,
                  l20-2 1.6s infinite linear;
    }
    @keyframes l20-1{
       0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
       12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
       25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
       50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
       62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
       75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
       100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
    }
    @keyframes l20-2{ 
      0%    {transform:scaleY(1)  rotate(0deg)}
      49.99%{transform:scaleY(1)  rotate(135deg)}
      50%   {transform:scaleY(-1) rotate(0deg)}
      100%  {transform:scaleY(-1) rotate(-135deg)}
    }




           


      /** Toggle CSS **/

      /* Basic styling */


/* The switch - the container */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 14px;
}

/* Hide the default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    transition: .4s;
    border-radius: 34px;
}

/* The slider before (round toggle) */
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0px;
    bottom: -2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* Checkbox checked - background color of the slider */
input:checked + .slider {
    background-color: #2195f348;
}

/* Move the slider to the right when checked */
input:checked + .slider:before {
    transform: translateX(15px);
    background-color: #2195f3;
}



.fnalshow{
    display: flex;
    width: 90%;
    margin: 10px auto;
    justify-content: space-between;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: 0.3s;
}


.b1{
width: 12%;
}

.b1 img{
    width: 34px;
}

.b2{
width: 78%;
text-align: left;
font-size: 16px;
color: white;
}

.b3{
width: 10%;
display: flex;
align-items: center;
justify-content: right;
}

.b3 img{
    width: 14px;
    height: 16px;
    
}




  /** Account List */
  
        
        .account_list{
            background-color: black;
            width: 100%;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding-top: 5px;
            transform: translateY(100%); /* Move the element up */
            transition: transform 0.3s ease;
        }
        
      
        
        
        .account_top{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 95%;
            margin: 0 auto 15px auto;
        }
        
        
        
        .account_top i{
            width: 5%;
            text-align: center;
            transform: scaleX(1.1);
            font-size: 16px;
        }
        
        
        .account_top h2{
            width: 95%;
            text-align: center;
        
            font-size: 20px;
            font-family: tahoma;
        }
        
     .account {
   
    display: flex;
    justify-content: space-between; /* Adjust spacing between items */
    align-items: center;
    width: 95%;
    margin: 0px auto 15px auto;
}

   .account:nth-of-type(4) {
    margin-top: 15px; /* Adds top margin to the second `.account` */
}
        

.ac_logo {
    width: 15%;
    max-width: 100%; /* Prevent overflow */
 
}

.ac_logo img {
    width: 46px;
    height: 46px; /* Maintain aspect ratio */
    object-fit: contain;
}



            
            .account_name{
                width: 80%;
               
                font-family: tahoma;
            }
            
            .account_name p{
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 5px;
            }
                .account_name h3{
                    font-size: 20px;
                }
                .account_name h3 span{
                    vertical-align: top;
                    font-size: 16px;
                }
                
                .tickmark{
                    width: 5%;
                
                }
                
                .tickmark i{
                    font-size: 19px;
                    color: #0390fc;
                     display: none; 
                }