@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: rgb(240,243,244); /* Light grey background */
    margin: 0;
}
#page-content{
    position: relative;
    z-index: 0;
}
img, div, button, a{
    user-select: none;
}
h1,h2,h3,h2,p,label{
    user-select: text;
}
#headerAllItems{
    background-color: white;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 1;
}
#HeaderLogoAndTitle{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    user-select: none;
}
#Investing21Logo{
    width: 10%;
}
#SeasonalityImagesection1{
    width: 22%;
}
#Investing21TitleMain{
    align-self: center;
    margin: 0 0 0 10px;
    color: black;
}
.WelcomeParagraph{
    width: 80%;
    max-width: 1170px;
}

.WelcomeParagraph, #headerSeasonality {
    padding: 2%;
    margin: 0% auto 2%;
}
.WelcomeParagraph h1, #SeasonalityMain-table h3, #headerSeasonality h3, #season-test-strategy-section h3, .WelcomeParagraph h2{
    font-size: 1.7rem;
    text-align: center;
    margin: 0 0 3%;
}
#flexApp, #alert-home{
    padding: 2%;
    width: 80%;
    margin: auto;
    max-width: 1170px;
}
#alert-home{
    padding: 1%;
    text-align: center;
    width: 82%;
}
.spanCategory{
    color: white;
    padding: 3px;
    border-radius: 3px;
    font-size: xx-small;
}
.open-modal-button{
    cursor: pointer;
    border-radius: 100%;
    border: 1px solid rgb(178 182 183);
    color: rgb(178 182 183);
    font-weight: bolder;
    padding: 0 8px;
    background-color: transparent;
    font-size: 15px;
}
.open-modal-button:hover{
    border: 1px solid black;
    color:white;
    background-color:black;
}
.tooltip-icon{
    display: inline-block;
    width: 100%;
    margin: 15px auto;
    text-align: center;
}
.tooltip-icon .basictargetboxText{
    display: inline;
    
}
.tooltip-icon .tooltip-div-icon{
    padding: 0 0 0 10px;
    display: inline;
}
.modal-title{
    text-align: center;
    margin-bottom: 10px;
}
.modal-body{
    text-align: left;
}

.Inputpercentage{
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 6px;
}

.horizontalRow{
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
    user-select: none;
    padding: 1%;
    flex-wrap: wrap;
}
#Maintitle{
    width: 100%;
}
.Select-control{
    font-family: 'Roboto';
}
#loading-content, #loading-output{
    margin: 2% 0;
}

/*First Row*/
.basictargetbox, #tableGeneralData, .PortfolioAllocation, 
.RelevantData, #flexApp, .warnings, .correlationItem, .efficientFrontier, .OptimizedandNormalGraph, .OptimizationInfo, .WelcomeParagraph, .SeasonalityItem, .drawdownItem, #SeasonalityMain-table, #season-test-strategy-section, #headerSeasonality {
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.warnings{
    padding: 1%;
    margin: 1%;
}
.PortfolioAllocation{
    width: 37%;
    padding: 0;
}
.PortfolioAllocation .piechart .js-plotly-plot{
    margin: auto;
}
#tableGeneralData{
    width: 35%;
}
.maindataflex{
    width: 20%;
    height: inherit;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.averageReturn{
    height: 47%;
}
.basictargetbox, .PortfolioAllocation, #PortfolioRisk, #tableGeneralData, .correlationItem, .SeasonalityItem, .drawdownItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow: hidden;
    margin: 0;
}
.basictargetboxText, .AllocationTitle, .RelevantData-Title {
    color: grey;
    font-size: 20px;
    padding-top: 20px;
    text-align: center;
    font-family: 'Roboto';
}
.basictargetboxNumber, .RelevantData-number{
    font-size: 50px;
    font-weight: bold;
    margin: 15%;
}
.OptimizedResults .basictargetboxNumber{
    font-size: 40px;
    margin: 10%;
}
.piechart{
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 500px;
    height: 100%;
}


/* Make column titles stand out */
#tableGeneralData .table-responsive{
    width: 95%;
    margin: auto;
    font-family: 'Roboto';
}

#tableGeneralData .table-responsive tr td:nth-child(3){
    text-align: center;
    
}
#tableGeneralData .table-striped tr th{
    border: 1px solid #dee2e6;
    text-align: center;
}
.table-striped{
    z-index: 2;
}

/*Second Row*/
#dailyreturngraph, #dailyReturnsHistogram, #annual-bar-info, #combined-returns, #MonthlyReturns{
    padding:0;
    margin: 0;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 5px;
    
}
#dailyReturnsHistogram{
    width: 35%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
}
#dailyreturngraph{
    width: 61%;
    height: 100%;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
}
#cumulative-graph, #histogramDailyGraph{
    width: 100%;
    height: 100%;
    padding: 0;
}
#dailyReturnsHistogram #histogram{
    height: 100%;
}

/*Third Row*/
#combined-returns{
    width: 70%;
    display: flex;
    flex-direction: column;
}
#combined-returns-graph{
    height: 100%;
}
#annual-bar-info{
    width: 26%;
    height: inherit;
    display: flex;
    flex-direction: column;
} 
#annual-bar-graph{
    height: 100%;
}
/*Fourth Row*/
#MonthlyReturns{
    width: 45%;
    display: flex;
    flex-direction: column;
}
#monthly-line-graph{
    height: 100%;
}
#RelevantDataSection{
    width: 16%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#correlationSection {
    width: 35%;
    max-width: 100%;
}
#seasonalitySection, #drawdownSection{
    max-width: 100%;
}
#seasonalitySection{
    width: 63%;
}
#drawdownSection{
    width: 35%;
}

#seasonalitySection .table-responsive, #drawdownSection .table-responsive{
    padding: 10px;
    font-family: 'Roboto';
    width: 100%;
}
#drawdownSection .table-responsive{
    max-height: 200px;
    margin-bottom: 10px;
}

#PortfolioRisk{
    height: 300px;
    align-self: center;
}
.RelevantData{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4%;
    height: 47%;
    margin: 0;
}
.RelevantData-number{
    margin: 2% 0 0 10%;
}
.RelevantData-Title{
    width: 30%;
}
.correlationItem, .SeasonalityItem, .drawdownItem{
    margin: 0;
    height: 100%;
    
    
}
#tableinsideCorrelation{
    max-height: 400px;
    width: 92%;
    margin: 8% auto 0;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 0;
}
/*Fifth row*/
#seasonalitySection .SeasonalityItem table td, .drawdownItem table td{
    padding: 5px;
    font-size: 14px;
}
/*Optimize Section*/
.optimizationResults{
    width: 60%;
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.optimizationResults .OptimizationInfo{
    height: 55%;
    overflow: hidden;
}
.optimizationResults .OptimizedResults{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    height: 42%;
}
.OptimizedResults .basictargetbox{
    width: 32%;
}
.OptimizationParagraphs{
    font-family: 'Roboto';
    font-size: 14px;
    padding: 20px 3%;
}
.basictargetboxText{
    margin: 0;
}
.OptimizedResults .basictargetboxText{
    font-size: 18px;
}
.efficientFrontier{
    width: 37%;
    display: flex;
    flex-direction: column;
    height: inherit;
}
.efficientFrontier .dash-graph, .OptimizedandNormalGraph .dash-graph {
    height: inherit;
}
.OptimizedandNormalGraph{
    width: 60%;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    height: inherit;

}

.Inputs{
    width: 100%;
    margin: 5% auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: 'Roboto';
    flex-wrap: wrap;
}
.Inputs .dash-dropdown{
    width: 57%;
}
.Inputs .dash-dropdown .assetdropdown{
    font-size: 13px;
}

.LabelstyleWeight{
    width: 10%;
    text-align: end;
}

/* Style the dropdowns */
#asset-dropdown, .dropdown-child {
    color: black;
    width: 50%;
}
.dropdownsoptions{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 2% 0%;
    
}
.dropdownsoptions .dash-dropdown{
    width: 50%;
}
.dropdownsoptions label {
    width: 15%;
}

.dropdown-child{
    margin-left: 20px;
}

/* Style the date picker range */
#date-range-picker {
    width: 300px;
    margin: 3% 14px;
}

/* Style the button */
#test-strategy-container {
    margin: 6% auto 3%;
    text-align: center;
}
#test-strategy-container-btn{
    text-align: center;
    margin: 2% auto 3%;
}
#alert_seasonality{
    margin: 3%;
    padding: 1% 6%;
    text-align: center;
}
.alert-dismissible .btn-close{
    padding: 0.8rem;
}
#test-strategy-button, #optimize-button, #season-test-strategy-button {
    background-color: #2979ff;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}
#test-strategy-button:hover, #optimize-button:hover, #season-test-strategy-button:hover{
    background-color: #125bda;
}
#optimize-button{
    width: 130px;
    margin: 3% auto;
}


/* Style the loading spinner */
#loading-output {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Style the strategy results div */
#strategy-results {
    margin-top: 20px;
}
#main-content{
    margin: 1%;
}
#main-content-container, #results-store{
    padding: 1%;
    margin: auto;
    max-width: 1500px;
}
Footer{
    box-shadow:  4px 3px 5px rgba(0,0,0,0.2);
}
#footerMain{
    background-color: rgb(32, 31, 31);
    color: white;
    user-select:auto;
    width: 100%;
    overflow: hidden;
    text-align: center;
    font-size: 17px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
#footerMain a{
    color: white;
    text-decoration: none;
}
#footerMain a:hover{
    text-decoration: underline;
}

#headerMain{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1170px;
    width: 80%;
    margin: 0 auto 3%;
    position: sticky;
}
.nav-bar{
    width: 30%;
    align-self: flex-end;
    display: flex;
    justify-content: end;
}
.nav-bar .nav-link{
    display: inline-flex;
    padding: 15px 10px;
    line-height: 60px;
    text-transform: uppercase;
    font-size: 20px;
}
.nav-bar .nav-link:hover{
    background-color: rgb(243,242,242);
}

.Maintitle{
    text-align: center;
    font-size: 30px;
    letter-spacing: .5px;
    font-weight: 700;
    line-height: 56px;
    margin: 5% 0 3%;
    color: #212121;
    text-transform: uppercase;
}


.RelevantDataContainer {
    position: relative;
}

.tooltiptext {
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
} 

/*Seasonality*/
#SeasonalityMain-table, #season-test-strategy-section{
    margin: 2% auto;
    padding: 2% 1%;
    max-width: 1170px;
    width: 80%;
}
.btn-group{
    display: flex;
    justify-content: center;
    width: 50%;
    margin: 3% auto 1%;
} 
.table-dataset-main{
    user-select:none;
    background-color: white;
    border-radius: 3px;
    padding: 1%;
}
.table-dataset-main #table-container-season tr{
    font-size: 13px !important;
    user-select:text;
}
.table-dataset-main #table-container-season th{
    user-select:none;
    cursor: pointer;
    text-align: left;
    padding-right: 20px;
}
.FixedColumn{
    min-width: 350px;
}
.table-container-season th:nth-child(-n+2),
.table-container-season td:nth-child(-n+2){
    position: sticky;
    left: 0;
    z-index: 2; /* Increase the z-index */
    background-color: #fff; /* Optional: Background color for sticky columns */
}

#season-header-table{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1%;
}
#season-header-table div:nth-child(1){
    width: 40%;
}
#season-header-table label{
    margin-right: 1%;
    font-weight: 500;
    user-select:unset;
}
#season-header-table input{
    border-radius: 3px;
    border:none;
    border-bottom: 1px solid grey;
    width: 50%;
    min-width: 150px;
}
#sortedby-label{
    font-weight: 500;
}
#season-strategy-inputs-container{
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 3% 0;
    padding: 2%;
    flex-wrap: wrap;
    width: 100%;
}
#season-strategy-inputs-container .labelANDinput{
    min-width: 15%;
    width: 30%;
    margin: 20px 10px;
}
#month-dropdown{
    width: 70%;
    padding-left: 2%;
    margin: 4% 0 0 ;
}
#season-test-strategy{
    margin-top: 10%;
}
.labelANDinput .dash-dropdown{
    font-size: 12px;
}
#No-results-found-id{
    font-size: 17px;
    text-align: center;
    padding: 10px 0;
}
#DivRecommendation-section{
    margin: 7% 0 0;
    display: flex;
    justify-content: space-evenly;
    align-items: normal;
}
#DivRecommendation-section-title-text{
    width: 50%;
}
#DivRecommendation-section-title-table{
    width: 40%;
    align-self: flex-end;
}
#TitleRecommendation{
    margin: 0 1% 5%;
}
.TextRecommendation{
    margin: 1%;
}
#DivRecommendation-section .InsideRelevantDataTable{
    width: 100%;
    margin-top: 2%;
}
#MessageAverageReturn{
    text-align: center;
}
#left-right-main-container{
    display: flex;
    justify-content: start;
    align-items: baseline;
    margin-top: 1%;
    
}
#left-right-main-container #left-container-seasonality{
    width: 70%;
}
#left-right-main-container #season-strategy-tester-div{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid grey;
    align-self: center;
}
#left-right-main-container #season-strategy-tester-div #MessageAverageReturnNumber{
    font-size: 50px;
    font-weight: 600;
}
/*Remove padding from sort symbol*/
.table-dataset-main th i{
    padding: 0;
}

#headerSeasonality{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1170px;
    width: 80%;

}
#headerSeasonality div:first-child{
    width: 75%;
}
#headerSeasonality h2{
    margin-bottom: 5%;
}
#headerSeasonality div span:first-child{
    font-weight: bold;
}
#SeasonalityMain-table p{
    padding: 0 1%;
    font-size: 14px;
}
#season-test-strategy-section p{
    padding: 0 2%;
}




/*Media queries*/
@media screen and (max-width: 1250px) {
    .OptimizedResults .basictargetboxText{
        font-size: 17px;
    }
    
}

@media screen and (max-width: 1124px) {
    .OptimizedResults .basictargetboxText{
        width: 75%;
        font-size: 17px;
    }
    #season-strategy-inputs-container .labelANDinput {
        width: 29%;
    }
    .optimizationResults .basictargetboxNumber{
        font-size: 30px;
        margin: 8%;
    }
    .tooltip-div-icon{
        align-self: center;
    }
    #tableGeneralData .table-responsive{
        font-size: 13px;
    }
    .piechart{
        width: 400px;
        height: 300px;
    }
    #flexApp, #alert-home, .WelcomeParagraph, #headerMain, #SeasonalityMain-table, #season-test-strategy-section {
        width: 86%;
      }
    #alert-home{
        width: 88%;
    }
    #page-content #headerSeasonality{
        width: 86%;
    }
    .OptimizedResults .basictargetboxText{
        font-size: 18px;
    }
    .OptimizedResults .tooltip-icon button{
        font-size: 13px;
    }
}


@media screen and (max-width: 1000px) {
    
    .basictargetboxText, .AllocationTitle{
        font-size: 17px ;
    }
    .basictargetboxNumber, .RelevantData-number{
        font-size: 40px;
    }
    #combined-returns{
        width: 62%;
    }
    #annual-bar-info{
        width: 35%;
    }
    #tableinside .column-0 .dash-cell-value, #tableinside .column-1 .dash-cell-value, #tableinside .column-2 .dash-cell-value{
        width: 90%;
    }  
}


@media screen and (max-width: 900px) and (min-width: 800px) {
    #headerMain{
        height: 80px;
    }
    .Inputs .dash-dropdown{
        width: 40%;
    }
    .LabelstyleWeight{
        width: 15%;
    }
    .Inputs .dash-dropdown .assetdropdown{
        font-size: 12px;
    }
    .horizontalRow{
        padding: 1%;
    } 
    .basictargetboxNumber{
        font-size: 30px;
        margin-top: 23%;
    }
    .piechart{
        width: 100%;
    }
    #tableGeneralData .table-responsive{
        font-size: 12px;
    }
    #tableinside .column-0 .dash-cell-value, #tableinside .column-1 .dash-cell-value, #tableinside .column-2 .dash-cell-value{
        width: 98%;
        font-size: 10px;
    }
    #MonthlyReturns{
        width: 70%;
    }
    #RelevantDataSection{
        width: 27%;
    }
    #correlationSection{
        margin-top: 5%;
        width: 50%;
        padding-bottom: 5%;
    }
    .correlationItem{
        padding-bottom: 5%;
    }
    .efficientFrontier, .OptimizedandNormalGraph{
        width: 100%;
        margin: 0 0 5% 0;
    }
    .warnings{
        padding: 1%;
        margin: 1%;
    }
    
}

@media screen and (max-width: 800px) {
    #flexApp, .WelcomeParagraph, #headerMain,
    #headerSeasonality, #SeasonalityMain-table, #season-test-strategy-section {
      width: 93% !important;
    }
    #alert-home{
        width: 95% !important;
    }
    .nav-bar .nav-link{
        font-size: 17px;
    }
    .WelcomeParagraph h1{
        font-size: 1.4rem;
    }
    .WelcomeParagraph p{
        font-size: small;
    }
    .Inputs .dash-dropdown{
        width: 45%;
    }
    .LabelstyleWeight{
        width: 10%;
    }
    .Inputs .dash-dropdown .assetdropdown{
        font-size: 10px;
    }
    .horizontalRow{
        padding: 1%;
    }
    #flexApp label{
        font-size: 14px;
    } 
    .maindataflex, #RelevantDataSection{
        width: 30%;
    }
    .PortfolioAllocation{
        width: 65%;
    }
    #tableGeneralData {
        margin-top: 5%;
        width: 100%;
    }
    #tableGeneralData .table-responsive {
        padding: 20px 0;
    }
    #dailyreturngraph, #annual-bar-info, #MonthlyReturns{
        width: 100%;
    }
    #dailyReturnsHistogram, #combined-returns{
        width: 100%;
        margin: 10% 0 0;
    }
    #RelevantDataSection{
        margin-top: 10%;
    }
    #correlationSection{
        margin-top: 10%;
        width: 60%;
    }
    .efficientFrontier, .OptimizedandNormalGraph{
        width: 100%;
    }
    .efficientFrontier{
       margin-bottom: 8%;
    }
    #results-store .PortfolioAllocation{
        order: 2;
        width: 100%;
        margin-top: 5%;
    }
    .optimizationResults .OptimizationInfo{
        width: 100%;
        margin-bottom: 5%;
        padding-bottom: 5%;
    }
    #results-store .optimizationResults{
        order: 1;
        width: 100%;
    }
    #seasonalitySection, #drawdownSection{
        width: 100%;
        margin-top: 5%;
    }
    .OptimizedResults .basictargetboxText{
        font-size: 16px;
    }
    .OptimizedResults .tooltip-icon button{
        font-size: 13px;
    }
    .alert-dismissible .btn-close{
        padding: 0.5rem;
    }
}

@media screen and (max-width: 600px) {
    #flexApp, .WelcomeParagraph, #headerMain,
    #headerSeasonality, #SeasonalityMain-table, #season-test-strategy-section {
      width: 98% !important;
    }
    #headerSeasonality, #headerMain{
        flex-direction: column;
    }
    .nav-bar{
        width: 100%;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .nav-bar .nav-link{
        padding: 7px 10px;
        font-size: 16px;
        line-height: 40px;
    }
    #headerSeasonality div{
        width: 90% !important;
    }
    #SeasonalityImagesection1{
        width: 50%;
    }
    #headerSeasonality h2{
        text-align: center;
        margin: 8% auto 15%;
    }
    #SeasonalityMain-table p, #season-test-strategy-section p{
        width: 90%;
        margin: 7% auto !important;
        font-size: 14px;
    }
    #SeasonalityMain-table h3, #season-test-strategy-section h3{
        text-align: center;
        margin: 8% auto 7%;
    }
    .basictargetboxNumber, .RelevantData-number{
        font-size: 30px;
    }
    .nav-bar{
        display: flex;
        justify-content: center;
    }
    .nav-bar .nav-link{
        font-size: 13px;
    }
    #month-dropdown{
        width: 98%;
        padding: 0;
        margin: auto;
    }
    #left-right-main-container{
        flex-direction: column;
    }
    #left-right-main-container #left-container-seasonality{
        width: 99%;
    }
    #season-strategy-inputs-container .labelANDinput{
        width: 43%;
    }
    #left-right-main-container #season-strategy-tester-div{
        width: 99%;
        margin: 5% auto;
        border: none;
    }
    #DivRecommendation-section{
        flex-direction: column;
    }
    #DivRecommendation-section #DivRecommendation-section-title-text, #DivRecommendation-section #DivRecommendation-section-title-table {
        width: 99%;
    }
    #DivRecommendation-section #TitleRecommendation{
        text-align: center;
    }
    #DivRecommendation-section-title-table .table-responsive{
        width: 90%;
        margin: auto;
    }
    .Inputs {
        width: 80%;
        justify-content: flex-start;
        margin: 9% 1%;
    }
    #season-header-table div:nth-child(1){
        width: 100%;
        margin-bottom: 2%;
    }
    #sortedby-label{
        font-size: 14px;
    }
    .FixedColumn{
        min-width: 200px;
    }
    .table-dataset-main #table-container-season tr{
        font-size: 11px;
    }
    #season-header-table input{
        width: 55%;
    }
    .Inputs .dash-dropdown{
        width: 70%;
    }
    .Inputs label{
        width: 30%;
    }
    .LabelstyleWeight{
        text-align: start;
        margin-top: 10px;
    }
    .Inputpercentage{
        margin: 3% 0;
        width: 50%;
        align-self: flex-start;
    }
    .percentage{
        width: 12%;
        text-align: right;
    }
    .dropdownsoptions label {
        width: 20%;
    }
    .optimizationResults .basictargetboxNumber{
        font-size: 30px;
        margin: 8%;
    }
    .optimizationResults .basictargetboxText{
        width: 95%;
    }
    .Maintitle{
        font-size: 25px;
    }
    .OptimizedResults .tooltip-div-icon{
        padding: 0 5px 0 0;
    }
    .OptimizedResults .basictargetboxText{
        width: 80%;
    }
    .OptimizedResults .basictargetboxText{
        font-size: 15px;
    }
    .SeasonalityItem .table-responsive{
        max-width: 100%;
    }
    

}
@media screen and (max-width: 450px) {
    #HeaderLogoAndTitle{
        justify-content: center;
        margin-top: 2%;
    }
    .WelcomeParagraph h1, .WelcomeParagraph h2{
        font-size: 1.2rem;
        margin: 5% 0;
    }
    .WelcomeParagraph p{
        font-size:12px ;
    }
    .dropdownsoptions .dropdown-child{
        width: 100%;
    }
    #test-strategy-container {
        margin: 10% auto 5%;
    }
    .maindataflex .basictargetboxNumber, .RelevantData-number{
        font-size: 25px;
    }
    .optimizationResults .OptimizationInfo{
        height: 60%;
        overflow: hidden;
    }
    .tooltip-div-icon{
       margin: 0;
    }
    .maindataflex .tooltip-icon button, #RelevantDataSection .tooltip-icon button, .OptimizedResults .tooltip-icon button{
        font-size: 8px;
        padding: 0 5px;
    }
    .maindataflex .tooltip-icon .basictargetboxText, #RelevantDataSection .tooltip-icon .basictargetboxText, .OptimizedResults .tooltip-icon .basictargetboxText{
        font-size: 12px;
    }
    .maindataflex .tooltip-icon .tooltip-div-icon, #RelevantDataSection .tooltip-icon .tooltip-div-icon, .OptimizedResults .tooltip-icon .tooltip-div-icon{
        padding: 0 0 0 4px;
    }
    .AllocationTitle{
        font-size: 15px;
    }
    .piechart{
        width: 200px;
        height: 300px;
    }
    #RelevantDataSection .basictargetboxText{
        width: 70%;
    }
    #optimize-button{
        margin: 13% auto;
    }
    #dailyreturngraph .AllocationTitle{
        width: 80%;
    }
    #dailyreturngraph .tooltip-div-icon{
        width: 20%;
    }
    .maindataflex .tooltip-div-icon{
        margin-right: 3px;
    }
    .optimizationResults .basictargetboxNumber{
        font-size: 25px;
    }
    #seasonalitySection .table-responsive th, #drawdownSection .table-responsive th{
        font-size: 12px;
    }
    #headerSeasonality div{
        width: 95% !important;
    }
    #SeasonalityMain-table p, #season-test-strategy-section p{
        width: 95%;
        margin: 7% auto !important;
        font-size: 14px;
    }
    
}
@media screen and (max-width: 330px) {
    .maindataflex .tooltip-icon button, #RelevantDataSection .tooltip-icon button, .OptimizedResults .tooltip-icon button{
        font-size: 6px;
        padding: 0 3px;
    }
    .maindataflex .tooltip-icon .basictargetboxText, #RelevantDataSection .tooltip-icon .basictargetboxText, .OptimizedResults .tooltip-icon .basictargetboxText{
        font-size: 11px;
    }
    .maindataflex .tooltip-icon .tooltip-div-icon, #RelevantDataSection .tooltip-icon .tooltip-div-icon, .OptimizedResults .tooltip-icon .tooltip-div-icon{
        padding: 0 0 0 4px;
    }
    .AllocationTitle{
        font-size: 13px;
    }
    .piechart{
        width: 200px;
        height: 200px;
    }
    
    
}