/* ========== GENERAL SETTINGS ========== */
body {
    font-family: "Roboto", sans-serif;
    margin: 0;
    background-color: #f7f7f7;
    overflow: hidden;
}

:root {
    --gold: #b08442;
    --blue: #343741;
    --grey: #979797;
    --main-font-family: "Roboto", sans-serif;
}

.export {
    color: var(--blue);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: 100;
    border: 2px solid var(--blue);
    margin-top: 1rem;
    margin-bottom: .5rem;
    background-color: #fff;
    font-weight: bold;
    transition: all 250ms;
    box-shadow: 0px 8px 10px -9px var(--grey);
}

.export:hover {
    background-color: var(--blue);
    color: #fff;
    transform: scale(1.05);
}

/* =========== SCREEN LAYOUT SETTINGS =========== */

.pageWrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.fixedHeader {
    flex: 0 0 auto;
}

.pageContent {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    background-color: #f7f7f7;
    /* border:2px solid green; */
}

.pageContentInner {
    margin: 0 auto;
    margin-bottom: 0;
    width: 100%;
    position: relative;
}

.pageContentInnerWrapper {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 78vh;
    padding: 1rem;
}

@media (min-width: 1600px) {
    .pageContentInnerWrapper {
        height: 82vh;
    }
}

.pageContentAssets {
    flex: 1 1 auto;
    position: relative;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
}

.sessionsSection {
    display: none;
    width: 20%;
    background-color: #fff;
    border-left: 1px solid #d7d7d7;
    height: 90vh;
}

.pageFooter {
    font-weight: 100;
    background-color: var(--blue);
    color: #fff;
    margin-top: auto;
    padding: 0.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.backLink {
    position: absolute;
    left: 5px;
    text-decoration: none;
    color: var(--blue);
    background-color: var(--blue);
    border-radius: 50%;
    font-weight: bold;
}

.loadingDiv {
    background-color: rgba(138, 138, 138, 0.301) !important;
    top: 10vh !important;
    height: 90vh !important;
}

.chartHeaderWrapper {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#portfolio-drawdowns-table .dash-spreadsheet-menu {
    position: absolute;
    top: -80px;
    right: 0;
}

#rtns-table .dash-spreadsheet-menu {
    flex-direction: row-reverse;
}

.tableHeaderReturns {
    position: absolute;
    top: 25px
}
/* ========== BUTTONS ========== */
.headerButton {
    border: none;
    background-color: transparent;
    background-size: cover;
    cursor: pointer;
    outline: none;
    height: 34px;
    width: 34px;
}

.enterFullScreen {
    background: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M6 19q-.425 0-.713-.288T5 18v-3q0-.425.288-.713T6 14q.425 0 .713.288T7 15v2h2q.425 0 .713.288T10 18q0 .425-.288.713T9 19H6Zm0-9q-.425 0-.713-.288T5 9V6q0-.425.288-.713T6 5h3q.425 0 .713.288T10 6q0 .425-.288.713T9 7H7v2q0 .425-.288.713T6 10Zm9 9q-.425 0-.713-.288T14 18q0-.425.288-.713T15 17h2v-2q0-.425.288-.713T18 14q.425 0 .713.288T19 15v3q0 .425-.288.713T18 19h-3Zm3-9q-.425 0-.713-.288T17 9V7h-2q-.425 0-.713-.288T14 6q0-.425.288-.713T15 5h3q.425 0 .713.288T19 6v3q0 .425-.288.713T18 10Z"%2F%3E%3C%2Fsvg%3E');
}

.exitFullScreen {
    background: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M9 19q-.425 0-.713-.288T8 18v-2H6q-.425 0-.713-.288T5 15q0-.425.288-.713T6 14h3q.425 0 .713.288T10 15v3q0 .425-.288.713T9 19Zm-3-9q-.425 0-.713-.288T5 9q0-.425.288-.713T6 8h2V6q0-.425.288-.713T9 5q.425 0 .713.288T10 6v3q0 .425-.288.713T9 10H6Zm9 9q-.425 0-.713-.288T14 18v-3q0-.425.288-.713T15 14h3q.425 0 .713.288T19 15q0 .425-.288.713T18 16h-2v2q0 .425-.288.713T15 19Zm0-9q-.425 0-.713-.288T14 9V6q0-.425.288-.713T15 5q.425 0 .713.288T16 6v2h2q.425 0 .713.288T19 9q0 .425-.288.713T18 10h-3Z"%2F%3E%3C%2Fsvg%3E');
}

.addButton,
.linkButton {
    align-items: center;
    background-clip: padding-box;
    background-color: rgba(52, 55, 65, 0.9);
    border: 1px solid transparent;
    border-radius: 0.25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.25;
    margin: 1rem 0;
    min-height: 3rem;
    padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
    transition: all 250ms;
    width: auto;
}

.buttonRightMargin {
    margin-right: 0.5rem;
}


.addButton:disabled {
    background-color: rgba(52, 55, 65, 0.5);
    cursor: not-allowed;
    border: none;
}

.addButton:hover,
.addButton:focus {
    background-color: rgba(52, 55, 65);
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.addButton:hover {
    transform: translateY(-1px);
}

.addButton:active {
    background-color: rgba(52, 55, 65);
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
    transform: translateY(0);
}

.actionButton {
    color: #fff;
    background-color: var(--blue);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.actionButton:disabled {
    background-color: var(--grey);
    cursor: not-allowed;
}

.settingsButton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: all 250ms;
}

.addAssetBtnsWrapper {
    display: flex;
    align-items: center;
}

.addSessionButton {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin: 0;
}

.sessionsListButton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin-right: 0.5rem;
}

.sessionsListTextButton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 1rem 0;
}

.sessionIcon {
    width: 20px;
    height: 20px;
}

.actionsButton {
    background-color: #eaeaea;
    padding: 0.2rem;
    border: 2px solid var(--blue);
    width: 2rem;
    border-radius: 5px;
    height: 2rem;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    transition: all 250ms;
    position: relative;
    box-shadow: 0px 8px 10px -9px var(--grey);
}


.actionsButtonTooltip {
    visibility: hidden;
    width: 100px;
    background-color: rgb(47, 47, 47);
    color: #fff;
    text-align: center;
    font-size: 12px;
    position: absolute;
    bottom: 120%;
    left: -130%;
    padding: 0.3rem;
    border-radius: 5px;
}

.actionsButton:hover .actionsButtonTooltip {
    visibility: visible;
}

.actionsButton:hover {
    background-color: var(--blue);
    transform: scale(1.2);
}

.actionsButton svg {
    transition: all 250ms;
}

.actionsButton:hover svg {
    transform: rotate(360deg);
    color: #fff !important;
}

.downloadTemplateBtn {
    background-color: var(--gold);
    border: none;
    cursor: pointer;
    outline: none;
    font-weight: bold;
    border-radius: 5px;
    padding: 0.75rem 1.5rem;
    margin: 2rem 0;
}

.closeModalButton {
    border: none;
    background-color: var(--blue);
}
/* ========== HEADER ==========  */
.header {
    background-color: var(--blue);
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 10vh;
}

.headerImg {
    width: 100%;
}

.headerImgLink {
    width: 20%;
}

.headerTitle {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 300;
    text-align: center;
}

.headerInfo {
    width: 20%;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.headerInfoButton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}

.headerInfo svg {
    width: 2rem;
    cursor: pointer;
}

.infoSpan {
    font-style: italic;
    color: var(--grey);
}

.infoIcon {
    margin: 0 1rem;
}

.statusIcon {
    display: none;
}

/* ========== INPUTS SECTION ========== */
.mantine-InputWrapper-root {
    font-family: "Roboto", sans-serif;
}

.inputsSection {
    background-color: #ffffff;
    border-bottom: 1px solid #d7d7d7;
    height: 12vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}

@media (min-width: 1600px) {
    .inputsSection {
        height: 8vh;
    }
}

.inputsSection input {
    height: 35px !important;
}

.inputsSectionContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 95%;
}

.inputsSectionElement {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 1rem;
    text-align: center;
}

.inputsSectionElement:first-child {
    margin-left: 0;
}
.inputsSectionElement:last-child {
    display: flex;
    margin-right: 0;
    align-self: center;
    align-items: flex-end;
}

#risk_free_input,
#initial_balance {
    font-family: var(--main-font-family);
    font-weight: bold;
    text-align: right;
    background-color: #f5f5f5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: none;
    border-bottom: 1px solid #000;
    padding: 0.5rem;
    font-size: 1rem;
}

.initBalanceInput {
    position: relative;
}
.initBalanceInput::before {
    background-color: var(--blue);
    color: white;
    height: 35px;
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    padding: 0 0.5rem;
    top: 1.2rem;
    font-size: 1rem;
    font-weight: bold;
    content: "$";
    border-top-left-radius: 5px;
}

.backtestSlider {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#date {
    font-size: 15px;
}

.SingleDatePicker {
    width: 100%;
}

.SingleDatePickerInput {
    width: 100%;
}

#currency {
    margin-left: 0rem;
    font-size: 15px;
}

#risk_free {
    width: 100%;
}

.runBtn {
    font-family: var(--main-font-family);
    font-size: 17px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    width: 6rem;
    height: 50px;
    background-color: var(--gold);
    box-shadow: 0px 8px 10px -9px var(--grey);
    cursor: pointer;
    position: relative;
}

.runBtn:disabled {
    background-color: var(--grey);
    cursor: not-allowed;
}

.runBtnError {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.inputsError {
    margin-top: 0.5rem;
}

.questionIcon {
    position: absolute;
}

.mantine-ittua2 {
    font-size: 0.8rem;
}

/* ========== PORTFOLIOS TABLE ========== */
.column-header-name,
.dash-table-container {
    font-family: var(--main-font-family);
}

.portfoliosTableSummary {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
}

.portfoliosTable tr:nth-child(-n + 4) .dash-delete-cell {
    visibility: hidden;
}


.Select-arrow,
.Select-clear-zone,
.Select-menu-outer,
.dash-delete-cell,
.column-header--edit,
.column-header--edit,
.column-actions {
    --accent: rgb(52, 55, 65);
    --faded-dropdown: rgb(52, 55, 65);
}

/* Fix for dash table dropdown list not rendering when using bootstrap */
.dash-table-container .dropdown {
    position: static;
}

#new-portfolio-name,
#new-asset-dropdown {
    margin: 1rem 0;
}

/* ========== TOTAL TABLE ========== */
.actionsDropdown {
    width: 150px;
}
.totalTable {
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
}

.totalTableCell,
.actionsTableCell {
    color: #343741;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    background-color: #eaeaea;
    height: 100%;
    min-width: 100px;
    font-size: 1rem;
    padding-right: 10px;
    border-bottom: 1px solid #d3d3d3;
    font-weight: bold;
}

.totalTableCell::after {
    content: "%";
}

.totalTableMainCell p {
    margin: 0;
}

.totalTableOverweightCell {
    background-color: rgba(255 232 232 / 81%);
    border: 1px solid #8b000054;
    color: #901414;
    font-weight: bold;
}

.totalTableMainCell {
    border-bottom: 1px solid #d3d3d3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #eaeaea;
    font-size: 1rem;
    height: 100%;
    font-weight: bold;
    padding-left: 50px;
    min-width: 620px;
    justify-content: flex-start;
    margin-bottom: 0;
}

.addBtnsWrapper {
    margin: 1rem auto;
    display: flex;
    justify-content: space-between;
}

.linkWrapper {
    text-align: center;
}

/* SESSION LIST */
.sessionsHeader {
    width: 100%;
    text-align: center;
    margin: 1rem;
    font-weight: bold;
    font-size: 20px;
}

.sessionsHeaderWrapper {
    display: flex;
    align-items: center;
}

.sessionsBtn {
    background-color: transparent;
    border: none;
    position: absolute;
}

.sessionsBtnExpand {
    background-color: transparent;
    border: none;
    position: absolute;
    margin-top: 1rem;
}

.sessionsList {
    height: 90%;
    overflow-y: scroll;
    font-size: 1rem;
}


.sessionsListName {
    font-size: 1rem;
    width: 80%;
}

.sessionsListButtons {
    display: flex;
}

.sessionsListButton {
    margin: 0;
    padding: 0;
    padding-right: 0.3rem;
    cursor: pointer;
    transition: all 250ms;
}

.sessionsListButton svg {
    width: 1.2rem;
}

.sessionsListButton:hover {
    transform: scale(1.3);
}

.sessionsListItem {
    padding: 1rem;
    border-bottom: 1px solid #d3d3d3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sessionsListItem:first-child {
    border-top: 1px solid #d3d3d3;
}

.sessionsListTitle p {
    margin: 0;
}
/* ============ FORGE TABS ============ */

/* Hide the tabs that represent tab types. */
#builder-tabs-content {
    display: None;
}

.tabsWrapper {
    position: relative;
    min-height: 15vh;
    border: 1px solid #d3d3d3;
    padding: 0 20px;
    background-color: #fff;
}

.tabMessageWrapper {
    background-color: #eaeaea;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding-top: 20px;
    justify-content: center;
    align-items: flex-start;
}

.tabMessage {
    display: flex;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 90%;
    background-color: #fee9cc;
    border: 2px solid #f8910030;
    font-size: 20px;
}

.tabMessage p {
    margin: 0 1rem;
}

.infoTables {
    margin-bottom: 2rem;
}
#rtns-table {
    margin-top: 1rem;
    overflow-x: scroll;
}

.rtnsTableHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.downloadLink {
    background-color: var(--gold);
    color: #fff;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

.downloadLink:hover {
    color: var(--blue);
}

.frontierHeader {
    margin: 1rem 1.5rem;
    font-size: 28px;
    color: #384b69db;
}

.frontierBtnWrapper {
    text-align: center;
}

.spinnerPosition {
    position: absolute;
    top: 30px;
}
.mainSpinner {
    background-color: rgba(138, 138, 138, 0.404) !important;
    margin-top: 10vh;
}

/* ============ LOGIN PAGE ============ */
.loginFormWrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("background.jpg") no-repeat;
    background-size: cover;
}

.loginForm {
    width: 400px;
    height: 550px;
    border-radius: 10px;
    background-color: rgb(250, 250, 250);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.loginFormIcon img {
    margin-top: 2rem;
    width: 250px;
}

.loginFormContent {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.loginFormTitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #454545;
}

.loginFormInput {
    border-radius: 5px;
    width: 85%;
    margin-bottom: 1rem;
}

.loginFormInput input {
    border: 1px solid rgb(220, 220, 220);
    height: 50px;
}

.loginFormButtonWrapper {
    margin-top: 3rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginFormButton {
    font-size: 20px;
    height: 70px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    border: none;
    background-color: var(--gold);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* ============ ERROR PAGE ============ */
.errorContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.errorCode {
    font-size: 10vmax;
    color: var(--blue);
    margin-bottom: none;
}

.errorText {
    margin-top: none;
    font-weight: 500;
}

.errorSmallText {
    font-weight: 100;
}

.errorLink {
    text-decoration: none;
}

.errorBtn {
    margin-top: 2rem;
    font-size: 20px;
    padding: 1rem 2rem;
    cursor: pointer;
    color: white;
    border: none;
    background-color: var(--gold);
    border-radius: 10px;
}

/* ============ ASSETS MANAGEMENT PAGE ============ */
.assetsManagementContainer {
    padding: 2rem;
    display: flex;
}

.assetsManagementAssetsCard {
    width: 97%;
    height: 74vh;
}

.assetsManagementAssetsCardDetails {
    height: 64vh;
    overflow-y: scroll;
}

.tabContent {
    height: 56vh;
    overflow-y: scroll;
}
.uploadTabContent {
    max-height: 38vh;
    overflow-y: scroll;
}

.assetsManagementAssetsCardWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftCard {
    width: 60%;
}

.rightCard {
    width: 40%;
}

#def-assets-table,
#assets-details-table,
#int-assets-table {
    margin-top: 1rem;
}

.dash-belete-cell {
    position: absolute;
    right: 0;
}

.addAsset {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    background-color: var(--blue);
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 50%;
}

.uploadBox {
    display: flex;
    justify-content: space-around;
    padding: 1rem 5rem;
    border: 3px dashed rgb(218, 218, 218);
}

.uplaodAssetBtn {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    background-color: var(--blue);
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 50%;
}

.loadedInput {
    margin: 0.2rem;
    width: 20rem;
}

.loadedModalCard {
    display: flex;
    justify-content: space-between;
}

.detailsHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assetDate {
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    color: var(--grey);
}

.noDataAvailable {
    text-align: center;
}

/* =========== CUSTOMIZED SCROLL BAR ============ */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--gold);
}

/* ========== CALENDAR STYLINGS ========== */
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    background: var(--gold);
    border: 1px double #343741;
    color: #fff;
}

.CalendarDay__selected_span {
    background: #7785acff;
    border: 1px double var(--gold);
    color: #fff;
}

.DateInput_input__focused {
    border-bottom-color: #343741;
}

.DayPickerKeyboardShortcuts_show__bottomRight::before {
    border-right-color: var(--gold);
}

/* ========== SLIDER SETTINGS ========== */
.rc-slider-track,
.rc-slider-handle:hover,
.rc-slider-handle-active:active {
    background-color: var(--gold);
}

.rc-slider-dot-active {
    border-color: var(--gold);
    border: solid 2px var(--gold);
}

.rc-slider-handle {
    background-color: var(--gold);
    border-color: var(--gold);
}

.Select-value-label {
    border: none;
    display: flex;
    align-items: center;
}

/* ========== Charts ========== */

.chartsRow {
    display: flex;
}

.tableHeader {
    margin: 2rem 1rem;
    color: var(--blue);
    font-size: 1.6rem;
}

.chartHeader {
    margin: 1rem 1rem 0rem 1rem;
    color: var(--blue);
    font-size: 1.6rem;
}
/* Make a wider dropdownmenu just for portfolio table */
.Select-menu-outer {
    text-align: left;
    background-color: #fff;
    width: 360px !important;
}   

#new-asset-dropdown .Select-menu-outer,
#new-portfolio-type .Select-menu-outer,
#currency .Select-menu-outer,
#loaded-int-field .Select-menu-outer,
#rebalance .Select-menu-outer
#session-dialog-share-dropdown .Select-menu-outer {
    width: 100% !important;
}


#asset-weight-type-row .Select-control {
    border: 2px solid #343741;
    background-color: #eaeaea;
    font-weight: 700;
    color: #343741;
}

#asset-weight-type-row .Select-input {
    background-color: #eaeaea;
}
.Select-menu-outer {
    width: auto !important; 
    min-width: 100%; 
}

.Select-option {
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
}