/**
 * @license
 *
 * Font Family: Satoshi
 * Designed by: Deni Anggara
 * URL: https://www.fontshare.com/fonts/satoshi
 * © 2023 Indian Type Foundry
 *
 * Font Styles:
 * Satoshi Variable(Variable font)
 * Satoshi Variable Italic(Variable font)
 * Satoshi Light
 * Satoshi Light Italic
 * Satoshi Regular
 * Satoshi Italic
 * Satoshi Medium
 * Satoshi Medium Italic
 * Satoshi Bold
 * Satoshi Bold Italic
 * Satoshi Black
 * Satoshi Black Italic
 *
*/


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 300.0 to 900.0)

*/

@font-face {
    font-family: 'Satoshi-Variable';
    src: url('./assets/fonts/Satoshi-Variable.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-Variable.woff') format('woff'),
         url('./assets/fonts/Satoshi-Variable.ttf') format('truetype');
         font-weight: 300 900;
         font-display: swap;
         font-style: normal;
  }
  
  
  /**
  * This is a variable font
  * You can controll variable axes as shown below:
  * font-variation-settings: 'wght' 900.0;
  *
  * available axes:
  
  * 'wght' (range from 300.0 to 900.0)
  
  */
  
  @font-face {
    font-family: 'Satoshi-VariableItalic';
    src: url('./assets/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-VariableItalic.woff') format('woff'),
         url('./assets/fonts/Satoshi-VariableItalic.ttf') format('truetype');
         font-weight: 300 900;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Light';
    src: url('./assets/fonts/Satoshi-Light.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-Light.woff') format('woff'),
         url('./assets/fonts/Satoshi-Light.ttf') format('truetype');
         font-weight: 300;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-LightItalic';
    src: url('./assets/fonts/Satoshi-LightItalic.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-LightItalic.woff') format('woff'),
         url('./assets/fonts/Satoshi-LightItalic.ttf') format('truetype');
         font-weight: 300;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Regular';
    src: url('./assets/fonts/Satoshi-Regular.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-Regular.woff') format('woff'),
         url('./assets/fonts/Satoshi-Regular.ttf') format('truetype');
         font-weight: 400;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Italic';
    src: url('./assets/fonts/Satoshi-Italic.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-Italic.woff') format('woff'),
         url('./assets/fonts/Satoshi-Italic.ttf') format('truetype');
         font-weight: 400;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Medium';
    src: url('./assets/fonts/Satoshi-Medium.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-Medium.woff') format('woff'),
         url('./assets/fonts/Satoshi-Medium.ttf') format('truetype');
         font-weight: 500;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-MediumItalic';
    src: url('./assets/fonts/Satoshi-MediumItalic.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-MediumItalic.woff') format('woff'),
         url('./assets/fonts/Satoshi-MediumItalic.ttf') format('truetype');
         font-weight: 500;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Bold';
    src: url('./assets/fonts/Satoshi-Bold.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-Bold.woff') format('woff'),
         url('./assets/fonts/Satoshi-Bold.ttf') format('truetype');
         font-weight: 700;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-BoldItalic';
    src: url('./assets/fonts/Satoshi-BoldItalic.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-BoldItalic.woff') format('woff'),
         url('./assets/fonts/Satoshi-BoldItalic.ttf') format('truetype');
         font-weight: 700;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Black';
    src: url('./assets/fonts/Satoshi-Black.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-Black.woff') format('woff'),
         url('./assets/fonts/Satoshi-Black.ttf') format('truetype');
         font-weight: 900;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-BlackItalic';
    src: url('./assets/fonts/Satoshi-BlackItalic.woff2') format('woff2'),
         url('./assets/fonts/Satoshi-BlackItalic.woff') format('woff'),
         url('./assets/fonts/Satoshi-BlackItalic.ttf') format('truetype');
         font-weight: 900;
         font-display: swap;
         font-style: italic;
  }

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    // font-family: "Plus Jakarta Sans", sans-serif !important;
}
html {
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden !important;
    font-family: "Satoshi-Variable", sans-serif !important;
    background-color: #FFFFFF;
    scroll-behavior: smooth;

    h1,h2,h3,h4,h5,p {
        padding: 0;
        margin: 0;
    }
}


.topNavigation {
    display: flex;
    // background-color: blue;
    // padding: .5rem 0;
    border-bottom: 1.2px solid #dedede;
    width: 100%;
    position: relative;
    gap: 2rem;
    height: 4rem;
    align-items: center;

    .topLastWrapper {
        display: flex;
        // background-color: red;
        position: absolute;
        right: 3rem;
        gap: 5rem;
    }


    .logoContainer {
        // background-color: black;
        border-right: 1.2px solid#dedede;
        height: 4rem;
        display: flex;
        align-items: center;
        // padding: .5rem 2rem;
        // margin-left: ;
        width: 14rem;

        .logo {
            height: 3.2rem;
            display: flex;
            margin-left: 1.5rem;
            // background-color: red;
        }
    }

    .navigationItems {
        display: flex;
        align-items: center;
        gap: 1rem;
        // background-color: red;
        
        .activeNav {
            color: #296EB4;
        }

        .navBtn {
            // background-color: red;
            border: 1.2px solid #dedede;
            transition: all .3s ease-in-out;
        }
        .navBtn:hover {
            background-color: #296EB4;
            color: #fff;
            border: 1.2px solid #296EB4;
        }

        li {
            list-style: none;

            a {
                display: flex;
                font-size: .8rem;
                color: hwb(0 10% 90% / 0.842);
                height: 2rem;
                align-items: center;
                padding: 0 .5rem;
                border-radius: 4px;
                text-decoration: none;
                font-family: 'Satoshi-Medium';
                gap: .3rem;
                transition: color .3s ease-in-out;

                span {
                    // background-color: red;
                    display: flex;
                    height: .8rem;
                    width: .8rem;
                }
            }
            a:hover {
                color: #296EB4;
            }
        }
    }
    .searchContainer {
        // background-color: red;
        display: flex;
        height: 2rem;
        width: 16rem;
        position: relative;
        align-items: center;

        .searchIcon{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1.5rem;
            width: 1.5rem;
            // background-color: black;
            position: absolute;
            left: .5rem;
        }

        input:focus {
            border: 1.2px solid #296EB4;
            background-color: #acd6ff17;
        }

        input {
            width: 100%;
            height: 100%;
            border: 1.2px solid #dedede;
            border-radius: 4px;
            font-family: 'Satoshi-Medium';
            padding-left: 2.5rem;
            outline: none;
        }
    }
    .shortcutItems {
        display: flex;
        // width: 8rem;
        align-items: center;
        // background-color: red;
        // height: 100% !important;
        gap: 1rem;
        // justify-content: space-between;

        div {
            height: 1rem;
            width: 1rem;
            // background-color: black;

            span {
                display: flex;
                height: 100%;
                width: 100%;
                align-items: center;
                justify-content: center;

                img {
                    height: 100%;
                    width: 100%;
                }
            }
        }
    }
    .accountDisplay {
        display: flex;
        align-items: center;
        gap: .5rem;

        .accountName{
            font-family: 'Satoshi-Medium';
            font-size: .8rem;
        }
        .avatar {
            display: flex;
            height: 2rem;
            width: 2rem;
            // background-color: black;
        }
    }
}
.myContainer {
    display: flex;
    // background-color: red;
    // height: calc(10vh- 40rem);
    overflow-y: auto;
    margin-top: 2rem;
    justify-content: space-between;
    position: absolute;
    right: 0;
    padding-bottom: 2rem;
    // margin-bottom: 2rem;
    width: calc(100% - 14rem);

    .navigationBtns {
        display: flex;
        // background-color: red;
        margin-top: 2rem;
        height: fit-content;
        width: fit-content;
        gap: 1rem;

        .previousBtn {
            border-radius: 0.25rem;
            border: 1px solid var(--Dashboard-Main, #296EB4);
            background: rgba(41, 110, 180, 0.49);
            color: #fff;
        }
        .nextBtn {
            border-radius: 0.25rem;
background: var(--Dashboard-Main, #296EB4);
color: #fff;
        }

        a {
            display: flex;
            height: 2.2rem;
            align-items: center;
            justify-content: center;
            align-items: center;
            // border: 1px solid black;
            padding: 0 1rem;
            font-size: .75rem;
            font-family: 'Satoshi-Bold';
            text-decoration: none;
            gap: .5rem;

            span {
                display: flex;
                // background-color: yellow;
                height: 1rem;
                width: 1rem;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .myContainerWrapper {
        width: 95%;
        margin-inline: auto;
        // background-color: blue;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;

        .navigationIndicator {
            display: flex;
            border-radius: 0.625rem;
            border: 1px solid rgba(41, 110, 180, 0.15);
            background: #F4F7FB;
            padding: .5rem;
            padding-bottom: 0;
            margin-bottom: 0;

            li.uk-active {
                background-color: #296EB4;
                border-radius: 4px;
                color: #fff;

                a{
                    color: #fff !important;
                }
            }

            .navigationWrapper {
                display: flex;
                
                .navItems {
                    display: flex;
                    flex-direction: column;
                    list-style-type: none;
                    padding: 0;
                    gap: .5rem;

                    a:hover {
                        border: 1.2px solid #296EB4;
                    }

                    a{
                        border-radius: 0.25rem;
                        // background: #FFF;
                        border: 1.2px solid #296fb400;
                        // color: rgba(70, 70, 70, 0.22);
                        color: #000000;
                    // font-family: Inter;
                    // border: 1.2px solid #eeee;
                    font-size: 0.75rem;
                    border-radius: 10px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                    padding-left: .5rem;
                    text-transform: capitalize;
                        display: flex;
                        height: 2.5rem;
                        align-items: center;
                        font-size: .75rem;
                        text-decoration: none;
                        font-family: 'Satoshi-Bold';
                        width: 15rem;
                        position: relative;

                        .iconCloser {
                            position: absolute;
                            right: .5rem;
                        }
                        .sliderCountNumber {
                            display: flex;
                            height: 2rem;
                            min-width: 2rem;
                            min-height: 2rem;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            color: var(--Dashboard-Icon, #464646);
font-family: Satoshi;
font-size: 0.63144rem;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: capitalize;
                            margin-right: .5rem;
                            border-radius: 1.20231rem;
                            border: 1.031px solid rgba(70, 70, 70, 0.12);
                            background: rgba(247, 247, 247, 0.59);
                        }
                    }
                }
            }
        }
    }

    .formWrapper {
        display: flex;
        // background-color: red;
        // border: 1px solid black;
        width: 60%;
        flex-direction: column;

        .topWrapper {
            .mainHeading {
                // display: flex;
                font-size: 2rem;
                font-family: 'Satoshi-Black';
                // background-color: red;
                width: 60%;
                color: #333;

                span {
                    color: #296EB4;
                }
            }
            .suheading {
                margin-top: .5rem;
                width: 60%;
                font-size: .9rem;
                font-family: 'Satoshi-Medium';
            }
        }
        form {
            margin-top: 2rem;

            .formInputWrapper > * {
                width: 50%;
            }

            .formInputWrapper {
                // background-color: red;
                display: flex;
                gap: 1rem;
                width: 100%;

                .inputsContained {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }

                .secondaryInputsWrapper {
                    // background-color: red;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;

                }

                .inputWrapped {
                    // background-color: red;
                    height: fit-content;
                    display: flex;
                    // gap: .5rem;
                    position: relative;
                    flex-direction: column;

                    .countryDrop {
                        position: absolute;
                        bottom: 0.5rem;
                        right: .5rem;
                    }
                    input {
                        display: flex;
                        height: 2.2rem;
                        padding-left: .5rem;
                        border-radius: 0.25rem;
                        border: 1px solid #e2e2e2;
                        background: #FFF;
                        margin-top: .5rem;
                        outline: none;
                    }
                    input:focus {
                        border: 1px solid #296EB4;
                        background-color: #296fb413;
                    }
                    ::placeholder {
                        font-size: .8rem;
                        font-family: 'Satoshi-Medium';
                        text-transform: capitalize;
                    }

                    .inputDisplayName {
                        font-size: .75rem;
                        font-family: 'Satoshi-Bold';
                        color: #333;
                        margin-left: .5rem;
                        padding: 0;
                        // background-color: blue;
                        display: flex;
                        width: fit-content;
                    }
                }
            }
        }
    }

}

.mainWrapperContainer {
    display: flex;

    .sideNavigation {
        // background-color: red;
        border-right: 1.2px solid #dedede;
        width: 14rem;
        position: absolute;
        bottom: 0;
        height: calc(100dvh - 4rem);
        
        

        .sideWrapper {
            // background-color: #296EB4;
            width: 90%;
            // padding: .5rem;
            border-radius: 10px;
            margin-inline: auto;
            margin-top: 2rem;

            .topMenu {
                background-color: rgba(41, 111, 180, 0.05);
                padding: .5rem;
                border-radius: 4px;
            }

            .menuHeading {
                font-size: .7rem;
                font-family: 'Satoshi-Bold';
                padding: 0;
                color: rgba(26, 26, 26, 0.546);
                margin: 0;
            }

            .helpMenu {
                margin-top: 1rem;
                background-color: rgba(41, 111, 180, 0.05);
                padding: .5rem;
                border-radius: 4px;

                .helpHeading {
                    font-size: .7rem;
                    font-family: 'Satoshi-Bold';
                    padding: 0;
                    color: rgba(26, 26, 26, 0.546);
                    margin: 0;
                }
            }

            .bottomDarkModeToggle {
                display: none;
            }
            .sideNavLinks {
                list-style: none;
                padding: 0;
                margin-top: 1rem;
                display: flex;
                flex-direction: column;
                gap: .5rem;
                
                .uk-nav-sub {
                    a {
                        font-size: .7rem;
                        text-transform: capitalize;
                        // font-weight: 500;
                        color: #1a1a1a;
                        font-family: 'Satoshi-Medium';
                        gap: .1rem !important;
                        padding-left: unset !important;
                        transition: all .3s ease-in-out;
                    }
                    a:hover {
                        color: #296EB4;
                        // font-family: 'Satoshi-Bold';
                        // font-weight: 600;
                    }
                }

                .active {
                    background-color: #296EB4;
                    border: 1.2px solid #296EB4;
                    color: #FFFFFF;

                    span {
                        background-color: #fff;
                    }
                }
                .active:hover {
                    background-color: #296EB4;
                    border: 1.2px solid #296EB4;
                    color: #FFFFFF;

                    span {
                        background-color: #fff;
                    }
                }

                a {
                    font-size: .8rem;
                    display: flex;
                    height: 2rem;
                    // background-color: red;
                    // justify-content: space-between;
                    padding-left: .5rem;
                    border-radius: 4px;
                    text-decoration: none;
                    align-items: center;
                    gap: .5rem;
                    font-family: 'Satoshi-Medium';
                    border: 1.2px solid #296fb400;
                    color: rgba(26, 26, 26, 0.8);
                    transition: all .3s ease-in-out;
                    position: relative;

                    .iconDrop {
                        // background-color: red;
                        position: absolute;
                        right: .5rem;
                    }

                    .linkIcon {
                        background-color: unset !important;
                        height: .9rem;
                        width: .9rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            height: 100%;
                            width: 100%;
                        }
                    }
                }
                a:hover {
                    background-color: #cee7ff;
                    border: 1.2px solid #8cc4ff;
                }
            }
        }
    }
}

.dashboardMainDisplay {
    // background-color: black;
    width: 85%;
    max-width: 1250px;
    margin-inline: auto;

    .topContainer {
        margin-top: 2rem;
        // padding-left: 1rem;
        display: flex;
        align-items: center;
        // background-color: red;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .balanceDisplay {
            // background-color: red;
            display: flex;
            flex-direction: column;
            min-width: 4rem;
            // align-items: left;
            position: relative;

            span{
                display: flex;
                font-size: .8rem;
                font-style: normal;
                font-family: 'Satoshi-Bold';
                font-weight: 500;
                line-height: normal;
                position: absolute;
                right: 0;
                top: 0;
                width: fit-content;
                // background-color: blue;
            }
            .Balance {
                padding-top: 1rem;
                font-family: 'Satoshi-Black';
                position:relative;
                // background-color: yellow;
                right: 0;
                font-size: 1.65781rem;
                font-style: normal;
                margin-left: 1rem;
                font-weight: 900;
                line-height: 135.189%; /* 2.24119rem */
                color: #F09000;
            }
        }

        .breadcrumbContainer {
            // background-color: red;
            height: fit-content;

            nav {
                // background-color: #1C7630;
                padding-bottom: unset !important;
                margin-bottom: unset !important;

                .activeLinkDashboard {
                    span {
                        // display: flex;
                        // background-color: red;
                        font-family: 'Satoshi-Bold';
                        color: #296EB4;
                    }
                }
            }

            .wrapper {
                display: flex;
                flex-direction: column;

                .welcomeMessage {
                   
                    // background-color: pink;
                    padding: 0;
                    font-family: 'Satoshi-Medium';
                    color: #1a1a1a;
                    margin: 0;
                    margin-top: -.5rem;
                    height: fit-content;
                    font-size: 1.3rem;

                    span {
                        font-size: 1.3rem;
                        font-family: 'Satoshi-Black';
                        color: #16154D;
                    }
                }
            }
        }
    }

    .kpiContainer {
        // background-color: black;
        margin-top: 1.5rem;
        // gap: 1.5rem;

        .flexWrapper {
            display: flex;
            justify-content: space-between;
            gap: 1.5rem;
        }
        .flexWrapper> div {
            background-color: #F9F9F9;
            width: 35%;
            border-radius:10px ;
            padding-bottom: 1rem;

            .mainCardContainer {
                // background-color: red;
                padding: 0 2rem;
                margin-top: .5rem;

                .bottomCardContainer {
                    // background-color: red;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 1rem;

                    .graphGrowthDisplay {
                        display: flex;
                        align-items: center;
                        gap: .312rem;
                        border-radius: 0.25rem;
                        background: rgba(41, 110, 180, 0.05);
                        padding: .3rem;
                        
                        span {
                            display: flex;
                            align-items: center;
                            width: 1.2rem;
                            height: 1.2rem;
                            // background-color: black;
                        }

                        p {
                            font-size: .7rem;
                            font-family: 'Satoshi-Medium';
                        }
                    }
                    .viewKPIBtn:hover {
                        background-color: #184572;

                        span {
                            transform: translateX(.3rem);
                        }
                    }
                    .viewKPIBtn {
                        display: flex;
                        background-color: #296EB4;
                        color: #fff;
                        font-family: 'Satoshi-Bold';
                        height: 2.3rem;
                        font-size: .8rem;
                        align-items: center;
                        padding: 0 1rem;
                        text-decoration: none;
                        gap: .5rem;
                        border-radius: 10rem;
                        transition: all .3s ease-in-out;

                        span {
                            display: flex;
                            height: 1rem;
                            width: 1rem;
                            align-items: center;
                            // background-color: red;
                            justify-content: center;
                            padding: .1rem;
                            transition: all .3s ease-in-out;

                            img {
                                height: 100%;
                                height: 100%;
                            }
                        }
                    }
                }

                .cardValueDisplay {
                    // background-color: red;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    
                    .dealsValueTop {
                        // background-color: red;
                        margin-top: 1rem;

                        .availableDeals {
                            font-size: .8rem;
                            font-family: 'Satoshi-Medium';
                        }
                        .dealsAvailable {
                            h2 {
                                font-size: 2.1875rem;
                                font-family: 'Satoshi-Black';
                                color: #16154D;
                            }
                        }
                    }

                    .optionsDropDateView {

                        a {
                            font-size: .7rem;
                            // font-family: 'Satoshi-Medium';
                            font-weight: 600;
                            display: flex;
                            gap: .2rem;
                            height: 2rem;
                            background-color:#eee;
                            display: flex;
                            color: #1a1a1abe;
                            
                            align-items: center;
                            padding: 0 .5rem;
                            text-decoration: none;
                            border-radius: 4px;
                        }
                    }
                }
            }

            .topCardContaier {
                border-bottom: 1.2px solid #dedede;
                display: flex;
                align-items: center;
                height: 3rem;
                padding: 0 2rem;
                justify-content: space-between;

                .cardDescription {
                    display: flex;
                    align-items: center;
                    gap: .5rem;

                    p {
                        font-family: 'Satoshi-Bold';
                        color: #333;
                    }

                    .newDisplay {
                        display: flex;
                        font-size: .6rem;
                        background-color: #296EB4;
                        color: #fff;
                        border-radius: 10rem;
                        height: 1rem;
                        font-family: 'Satoshi-Medium';
                        width: fit-content;
                        padding: 0 .5rem;
                        align-items: center;
                        justify-content: center;
                    }

                    .iconContainer {
                        height: 1.3rem;
                        width: 1.3rem;
                        border-radius: 50%;
                        justify-content: center;
                        display: flex;
                        align-items: center;
                        background: rgba(41, 110, 180, 0.15);
                    }
                }

                .dotsOptions {
                    display: flex;
                    height: 1rem;
                    width: 1rem;
                    align-items: center;
                    // background-color: black;
                }
            }
        }
    }
}

.hotDealsCompWatch {
    // background-color: blue;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row-reverse;
    // align-items: center;
    // justify-content: space-between;
    gap: 2rem;

    .comparisonWatchWrapper {
        // background-color: green;
        border-radius: 4px;
        height: fit-content;
        width: 100%;
        position: relative;


        .cardHeading {
            font-size: 1.3rem;
            font-family: 'Satoshi-Bold';
            margin-top: 1rem;
            color: #1a1a1a;

        }

        .pieChartContainer {
            // background-color: red;
            margin-inline: unset;
            width: 100%;
            // margin-top: 2rem;
        }
    }

    .discoverHotDeals {
        min-width: 60%;
        // background-color: red;
        height: 23rem;
        padding-right: 1rem;

        .wrapperHotDeals{
            display: flex;
            justify-content: space-between;
            // align-items: top;

            .creditCardDisplay {
                padding: 0 2rem;
                // background-color: blue;
                width: 60%;

                .heading {
                    margin-top: 2rem;
                    font-size: 1.2rem;
                    font-family: 'Satoshi-Bold';
                    color: #1a1a1a;
                }
                .cardContainer {
                    display: flex;
                    margin-top: 2rem;
                    width: 100%;
                    height: 15rem;
                    // background-color: red;
                    gap: 1rem;
                    align-items: end;

                    .pieChartWrapper {
                        display: flex;
                        // margin-top: -2rem;
                        transform: translateY(-1.5rem);
                        // background-color: red;
                        height: 14rem;
                    }
                    .keyContainer {
                        display: flex;
                        // background-color: red;
                        // margin-top: -3rem;
                        height: 6rem;
                        width: 12rem;
                        margin-left: 1rem;
                        transform: translateY(-6rem);

                        img {
                            height: 100%;
                            width: 100%;
                        }
                    }
                }
            }

            .dealsMore {
                // background-color: blue;
                width: 40%;
                position: relative;

                .spanheading {
                    display: flex;
                    background-color: #F09000;
                    color: #fff;
                    font-family: 'Satoshi-Medium';
                    width: fit-content;
                    font-size: .7rem;
                    height: 1.2rem;
                    align-items: center;
                    border-radius: 10rem;
                    margin-left: 1.5rem;
                    margin-top: 1rem;
                    padding: 0 .5rem;
                    align-items: center;
                
                    #svgIcon {
                        margin-left: .2rem;

                    }
                }
            }
            .dealsMore::before {
                content: '';
                position: absolute;
                height: 12rem;
                width: 100%;
                bottom: 0;
                // background-color: red;
                z-index: 2;
                background: linear-gradient(0deg, #F1F1F1 0%, rgba(241, 241, 241, 0.00) 100%);
            }

            .dealsScroll {
                list-style: none;
                // background-color: red;
                // width: 100%;
                width: 100%;
                height: 15rem;
                overflow-y: scroll;
                position: relative;

                a {
                    text-decoration: none;
                }
            }
            .discoverAllDeals {
                display: flex;
                background-color: #296EB4;
                height: 2.5rem;
                text-decoration: none;
                width: fit-content;
                padding: 0 1rem;
                align-items: center;
                font-size: .75rem;
                margin-inline: auto;
                border-radius: 10rem;
                color: #fff;
                font-family: 'Satoshi-Bold';
                position: relative;
                z-index: 3;
                gap: .5rem;
                transform: translateY(-1rem);

                span {
                    display: flex;
                    align-items: center;
                    height: 1rem;
                    width: 1rem;
                }
            }

            .dealDescription {
                .heading {
                    font-size: .9rem;
                    color: #1a1a1a;
                    font-family: 'Satoshi-Bold';
                }
                .description {
                    font-size: .75rem;
                    font-family: 'Satoshi-Medium';
                    margin-top: .5rem;
                    max-width: 95%;
                    color: rgba(26, 26, 26, 0.801);
                }
            }
        }
    }
}

.hotDealsCompWatch > div {
    background-color: #F9F9F9;
    height: 100%;
}
.globalReachPortfolio {
    // background-color: #f9f9f9;
    margin-top: 1rem;
    // padding: 0 2rem;

    .ReachBackground {
        // background-color: red;
        height: 100%;
        display: flex;
    }

    .globalPortfolioWrapper > div {
        background-color: #F9F9F9;
        // padding: 0 2rem;
        height: 20rem;

        .cardHeading {
            padding-left: 2rem;
        }
    }
    .globalPortfolioWrapper {
        // background-color: #f9f9f9;
        display: flex;
        gap: 2rem;

        .cardHeading {
            // background-color: red;
            width: fit-content;
            font-size: 1.5rem;
            font-family: 'Satoshi-Bold';
            color: #1a1a1a;
            margin-top: 1rem;
        }

        .globalReachContainer {
            // background-color: blue;
            width: 40%;
            position: relative;

            .sessionsCountry {
                background-color: #f2f2f2b2;
                // padding: .5rem;
                position: absolute;
                top: 1rem;
                right: 1rem;
                width: 14rem;
                padding-bottom: .5rem;

                .topContainer {
                    // background-color: red;
                    display: flex;
                    padding: 0 .5rem;
                    align-items: top;

                    span {
                        display: flex;
                        font-size: 1.1rem;
                        font-family: 'Satoshi-Medium';
                    }
                    .optionsToggle {
                        // background-color: black;
                        display: flex;
                        height: 1rem;
                        width: 1rem;
                    }
                }
                .topSessionFilter {
                    background-color: #eee;
                    display: flex;
                    width: fit-content;
                    margin-top: .5rem;
                    // padding-left: ;
                    margin-left: .5rem;
                    color: #1a1a1a;
                    font-family: 'Satoshi-Regular';
                    font-weight: 400;
                    border: 0.2px solid #dedede;
                    border-radius: 4px;
                    text-decoration: none !important;
                    // height: 2rem;
                    padding: 0.24831rem 0.20644rem;
                    justify-content: center;
                    align-items: center;
                    gap: .3rem;
                    font-size: .7rem;

                    span {
                        display: flex;
                        // background-color: red;
                        height: .8rem;
                        width: .8rem;
                        align-items: center;
                        justify-content: center;
                    }
                }
                .countryListDescription:before {
                    content: '';
                    position: absolute;
                    height: 10rem;
                    width: 100%;
                    background: linear-gradient(0deg, #F1F1F1 0%, rgba(241, 241, 241, 0.00) 100%);
                    bottom: 0;
                }
                .countryListDescription {
                    // background-color: red;
                    display: flex;
                    margin-top: 1rem;
                    border-bottom: 1.2px solid #dedede;
                    flex-direction: column;
                    gap: 1rem;
                    list-style: none;
                    padding: 0;
                    padding-bottom: 1rem;

                    li {
                        height: 1.5rem;
                        padding: 0 .5rem;
                        // background-color: blue;

                        a {
                            display: flex;
                            height: 100%;
                            width: 100%;
                            // background-color: black;

                            span {
                                display: flex;
                                height: 100%;
                                width: 100%;
                            }
                        }
                    }
                }
                .description {
                    padding: 0 .5rem;
                    // background-color: red;
                    position: relative;
                    z-index: 2;
                    margin-top: -1.5rem;
                    text-align: center;
                    font-size: .75rem;
                    font-family: 'Satoshi-Medium';
                }
                .viewFullCountryList {
                    display: flex;
                    background-color: #296EB4;
                    width: fit-content;
                    padding: 0 1rem;
                    height: 2.2rem;
                    align-items: center;
                    font-size: .75rem;
                    font-family: 'Satoshi-Bold';
                    border-radius: 10rem;
                    color: #fff;
                    gap: .5rem;
                    margin-inline: auto;
                    margin-top: .5rem;
                    position: relative;
                    z-index: 3;

                    span {
                        display: flex;
                        height: 1rem;
                        width: 1rem;
                        align-items: center;
                        justify-content: center;

                        img {
                            height: 100%;
                            width: 100%;
                        }
                    }

                }
            }
        }
        .investmentPortfolioWrapper {
            // background-color: blue;
            width: 60%;
            display: flex;
            gap: 1rem;
            position: relative;
            // padding: 1rem 0;

            .graphDisplayContainer {
                // background-color: red;
                width: 60%;
                height: 100%;
                position: relative;
                padding-left: 2rem;

                .investHeading {
                    font-size: 1.5rem;
                    font-family: 'Satoshi-Bold';
                    color: #1a1a1a;
                    margin-top: 1rem;
                }

                .graphWrapper {
                    // background-color: black;
                    height: 70%;
                    width: 90%;
                    position: absolute;
                    bottom: 0;

                    span {
                        display: flex;
                        // background-color: red;
                        width: 100%;
                        height: 100%;

                        img {
                            height: 100%;
                            width: 100%;
                        }
                    }
                }
            }

            .assetsManagment {
                display: flex;
                flex-direction: column;
                background-color: #F1F1F1;
                border-radius: 4px;
                width: 35%;
                height: fit-content;
                // padding-top: ;
                padding: 1rem 0;
                // padding-bottom: 2rem;
                position: absolute;
                bottom: 0;
                right: 0;

                .assetsWrapper {
                    // background-color: #296EB4;

                    .cardSubHeading {
                        // background-color: green;
                        font-size: 1rem;
                        padding: 0 .5rem;
                        font-family: 'Satoshi-Bold';
                        width: fit-content;
                        margin-inline: auto;
                        display: flex;
                        gap: .5rem;

                        span {
                            background-color: #296EB4;
                            display: flex;
                            height: 1.2rem;
                            width: fit-content;
                            font-size: .6rem;
                            align-items: center;
                            color: #fff;
                            padding: 0 .6rem;
                            border-radius: 10rem;
                        }
                    }
                }

                .listedStockOptions {
                    display: flex;
                    // background-color: yellow;
                    flex-direction: column;
                    gap: .5rem;
                    list-style: none;
                    padding: 0;

                    li {
                        // background-color: #1a1a1a;
                        height: 3rem;
                        width: 90%;
                        margin-inline: auto;

                        a {
                            display: flex;
                            // justify-content: space-between;
                            align-items: center;
                            position: relative;
                            gap: .5rem;
                            height: 100%;
                            width: 100%;
                            text-decoration: none;
                            background-color:#fff;
                            border-radius: 5px;
                            padding-left: .5rem ;

                            .CompanyName {
                                font-size: .8rem;
                                color: #1a1a1a;
                                font-family: 'Satoshi-Bold';
                            }

                            .stockGrowth {
                                position: absolute;
                                right: .5rem;
                                // padding-left: .5rem;
                                display: flex;
                                // background-color: blue;
                                align-items: center;
                                gap: .2rem;
                                // flex-direction: row-reverse;



                                .chartDisplay {
                                    display: flex;
                                    // background-color: blue;
                                    display: flex;
                                    height: 1.5rem;
                                    width: 1.5rem;
                                    align-items: center;
                                    justify-content: center;

                                    img {
                                        height: 100%;
                                        width: 100%;
                                    }
                                    // background-color: red;
                                }

                                .percentageGrowth {
                                    font-size: .6rem;
                                    font-family: 'Satoshi-Bold';
                                    color: #1C7630;
                                }
                            }

                            .logoContainer {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background-color: #00B0F012;
                                height: 2.3rem;
                                width: 2.3rem;
                                border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
}

// comparisonWatchWrapper
// pieChartContainer

.pieChartContainer {
    display: flex;
    flex-direction: column;
    // min-width: 40%;
    width: fit-content;
    // margin-left: 1rem;
    height: fit-content;
    background-color: #F9F9F9;
    // border: 1.2px solid black;
    position: relative;
    padding-bottom: 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: unset !important;

    .keyDealsComponent {
        display: flex;
        height: fit-content;
        width: 95%;
        margin-top: 1.5rem;
        margin-inline: auto;
        // background-color: red;
        // justify-content: space-between;
        gap: 2rem;

        a:hover {
            background-color: #16154D;

            .uk-icon {
                color: #fff;
            }
            .numberAvailable {
                color: #ffff;
                opacity: .9;
            }
            p {
                color: #cee7ff;
            }
        }

        a{
            display: flex;
            flex-direction: column;
            // background-color: black;
            // min-width: 10rem;
            width: 35%;
            gap: .5rem;
            border: 1.2px solid #e7e7e7;
            border-radius: 4px;
            padding: .5rem 0;
            text-decoration: none;
            align-items: center;
            transition: all .3s ease-in-out;

            .uk-icon {
                color: #16154D;
            }

            .numberAvailable {
                margin-top: .5rem;
                font-family: 'Satoshi-Bold';
                font-size: .75rem;
                width: 50%;
                text-align: center;
                color: #1a1a1a;
            }
            p {
                font-family: 'Satoshi-Black';
                font-size: 1.2rem;
                color: #296EB4;
            }
        }
    }
    

    .dealsWrapper {
        // border: 1.2px solid red;
        background-color: unset !important;
        background-color: #fff !important;
        margin-top: 1rem;
        margin-left: .5rem;
        height: fit-content;
        // padding: unset;
        width: 95%;
        padding: .5rem 0;

        .cardValueDisplay {
            // background-color: red;
            width: 100%;
        }
    }
    
    .topCardContaier {
        border-bottom: 1.2px solid #dedede;
        display: flex;
        align-items: center;
        height: 3rem;
        padding: 0 2rem;
        // margin-left: 1rem;
        justify-content: space-between;

        .cardDescription {
            display: flex;
            align-items: center;
            gap: .5rem;

            p {
                font-family: 'Satoshi-Bold';
                color: #333;
            }

            .newDisplay {
                display: flex;
                font-size: .6rem;
                background-color: #296EB4;
                color: #fff;
                border-radius: 10rem;
                height: 1rem;
                font-family: 'Satoshi-Medium';
                width: fit-content;
                padding: 0 .5rem;
                align-items: center;
                justify-content: center;
            }

            .iconContainer {
                height: 1.3rem;
                width: 1.3rem;
                border-radius: 50%;
                justify-content: center;
                display: flex;
                align-items: center;
                background: rgba(41, 110, 180, 0.15);
            }
        }

        .dotsOptions {
            display: flex;
            height: 1rem;
            width: 1rem;
            align-items: center;
            // background-color: black;
        }
    }
    
    .mainCardContainer {
        // background-color: red;
        padding: 0 2rem;
        margin-top: .5rem;

        .bottomCardContainer {
            // background-color: red;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;

            .graphGrowthDisplay {
                display: flex;
                align-items: center;
                gap: .312rem;
                border-radius: 0.25rem;
                background: rgba(41, 110, 180, 0.05);
                padding: .3rem;
                
                span {
                    display: flex;
                    align-items: center;
                    width: 1.2rem;
                    height: 1.2rem;
                    // background-color: black;
                }

                p {
                    font-size: .7rem;
                    font-family: 'Satoshi-Medium';
                }
            }
            .viewKPIBtn:hover {
                background-color: #184572;

                span {
                    transform: translateX(.3rem);
                }
            }
            .viewKPIBtn {
                display: flex;
                background-color: #296EB4;
                color: #fff;
                font-family: 'Satoshi-Bold';
                height: 2.3rem;
                font-size: .8rem;
                align-items: center;
                padding: 0 1rem;
                text-decoration: none;
                gap: .5rem;
                border-radius: 10rem;
                transition: all .3s ease-in-out;

                span {
                    display: flex;
                    height: 1rem;
                    width: 1rem;
                    align-items: center;
                    // background-color: red;
                    justify-content: center;
                    padding: .1rem;
                    transition: all .3s ease-in-out;

                    img {
                        height: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .cardValueDisplay {
            // background-color: red;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .dealsValueTop {
                // background-color: red;
                margin-top: 1rem;

                .availableDeals {
                    font-size: .8rem;
                    font-family: 'Satoshi-Medium';
                }
                .dealsAvailable {
                    h2 {
                        font-size: 2.1875rem;
                        font-family: 'Satoshi-Black';
                        color: #16154D;
                    }
                }
            }

            .optionsDropDateView {

                a {
                    font-size: .7rem;
                    // font-family: 'Satoshi-Medium';
                    font-weight: 600;
                    display: flex;
                    gap: .2rem;
                    height: 2rem;
                    background-color:#eee;
                    display: flex;
                    color: #1a1a1abe;
                    
                    align-items: center;
                    padding: 0 .5rem;
                    text-decoration: none;
                    border-radius: 4px;
                }
            }
        }
    }
}


.uploadContentscontainer {
    // background-color: red;

    .uploadWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #dedede;
        margin-top: 1.5rem;
        height: 20rem;
        width: 35rem;
        // background-color:;

        .cloudIcon {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 6rem;
            background-color: #fff;
            width: 6rem;
        }
        .uploadHeader {
            margin-top: 1rem;
            font-size: 1.4rem;
            width: 60%;
            margin-inline: auto;
            text-align: center;
            font-family: 'Satoshi-Bold';
        }

    }

    .headingHeaderContainer {
        display: flex;
        // background-color: black;
        flex-direction: column;
        width: fit-content;
        margin-inline: auto;
        margin-top: 1rem;

        .headingHeader {
            font-family: 'Satoshi-Bold';
            color: #1a1a1a;
            width: 35rem;
            text-align: center !important;
            // background-color: red;
            font-size: 2rem;
        }
        .paragraphHeader {
            font-size: .8rem;
            // background-color: red;
            margin-top: .5rem;
            width: fit-content;
            align-items: center;
            margin-inline: auto;
            font-family: 'Satoshi-Medium';
            text-align: center;

        }
    }
}
.chooseFilesBtn {
    margin-top: 2rem;
    height: 2rem;
    width: fit-content;
    padding: 0 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: unset;
    border: none;
    font-family: 'Satoshi-Bold';
    background-color: #296EB4;
    color: #fff;
}

.documentsUpload {
    // background-color: red;
    margin-top: 1rem;
    width: 35rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;

    .file-item{
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 2rem;
        border-radius: 4px;
        border: 1.2px solid #dedede;
        // background-color: red;
    }
}


.bottomWrapperContainer{

background-color: red;

}

.topRightHeading{
    background-color: purple;
}


.topHeading{
    background-color: green;
}

.profileContents{
    // background-color: blue;

}

.formGroup{

    // background-color: #000000;
    display: flex;
    width: fit-content;
}

.label{

    background-color: red;
}

.formGroup label{
    // background-color: green;
    font-family: 'Satoshi-Bold';
    color: #1a1a1a;
}

.formGroup .editBtn{

        // background-color: yellow;
        justify-content: center;
        font-family: 'Satoshi-Bold';
        position: relative;
        justify-content: center;
        
    
    
    }

    .formGroup   input {
       
            // background-color: #000000;
            width: max-content;
            justify-content: right;
            display: flex;
            border: none;
            // font-weight: 700;
            font-family: 'Satoshi-medium';
        }
       
.approveBtn{
    // background-color: purple;
    margin-top: 2rem;
    height: 2rem;
    width: fit-content;
    padding: 0 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: unset;
    border: none;
    font-family: 'Satoshi-Bold';
    background-color: #296EB4;
    color: #fff;

}  

.file-item{
    // background-color: red;
    
}

.file-itemm{
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 2rem;
        border-radius: 4px;
        border: 1.2px solid #FFFFFF;
        // background-color: red;
}