@import url(WEB/css/general-sans.css); ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: none; } ::-webkit-scrollbar-thumb { background: #BDBDBD; border-radius: 1rem; } ::-webkit-scrollbar-thumb:hover { background: #6E6E6E; border-radius: 1rem; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input, textarea, button, select, a { -webkit-tap-highlight-color: transparent; } input[type=number] { -moz-appearance: textfield; } * { font-size: 14px; font-family: "GeneralSans-Variable"; font-weight: 500; color: #f0f2f5; box-sizing: border-box; text-decoration: none; -webkit-tap-highlight-color: transparent; } @media (max-width: 1400px) { * { font-size: 14px; } } @media (max-width: 900px) { * { font-size: 12px; } } body { display: flex; flex-direction: column; height: 100vh; margin: 0; background-color: #0d1117; overflow: hidden; } .main_box { flex-grow: 1; overflow-y: scroll; padding: 2vh; } .main_box .sidebar { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; height: 96vh; margin-right: 2vh; padding: 0; box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.452); border: 0; width: 20vh; overflow: visible; float: left; } .main_box .sidebar .sidebarMain { display: flex; flex-direction: column; flex-grow: 1; background-color: rgb(7.475, 9.775, 13.225); padding: 1rem; border-radius: 0.5rem; overflow: visible; } .main_box .sidebar .sidebarMain .sidebarMain_title { display: flex; justify-content: space-between; margin-bottom: 1.5rem; } .main_box .sidebar .sidebarMain .sidebarMain_title .appTitle { font-size: 1.5rem; margin-bottom: 1.5rem; font-weight: 550; margin: 0.5rem; margin-top: 0; } .main_box .sidebar .sidebarMain .sidebarMain_title .shortenSidebar { background-image: url("img/ViewColumns.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); width: 1.6rem; height: 1.6rem; opacity: 80%; margin-top: 0.45rem; } .main_box .sidebar .sidebarMain .dropdownMenu { display: none; } .main_box .sidebar .sidebarMain .sidebarContent { display: flex; flex-direction: column; flex-grow: 1; overflow: visible; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel { overflow: visible; height: -moz-fit-content; height: fit-content; position: relative; z-index: 99; display: flex; flex-direction: column; margin-bottom: 1rem; height: fit-content; background-color: rgb(18.525, 24.225, 32.775); border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); box-shadow: 0px 0px 10px -2px rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; max-width: 100%; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox { position: relative; display: flex; padding: 0.5rem; border-radius: 0.5rem; cursor: pointer; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .text { transition: all 200ms ease; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox:hover .text { background-color: #0088cc; color: #f0f2f5; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .text { display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.8); color: #0d1117; border-radius: 0.5rem; min-width: calc(1.6rem - 1px); min-height: calc(1.6rem - 1px); transform: translateX(-1px); font-size: 1rem; margin: auto 0; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .IDContent { position: relative; display: flex; flex-grow: 1; padding-left: 0.5rem; margin-left: calc(0.5rem - 2px); justify-content: space-between; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .IDContent .IDContent_name { display: flex; flex-direction: column; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .IDContent .IDContent_name .IDNickname { font-weight: 550; overflow-wrap: anywhere; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .IDContent .IDContent_name #ID { cursor: pointer; background: none; border: none; white-space: nowrap; padding: 0; opacity: 80%; margin-right: auto; font-size: 0.684rem; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .IDContent .IDContent_name #ID.no_id_connected { margin: auto 0; font-size: 0.786rem; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .IDContent .arrow { position: relative; left: 0.5rem; background-image: url("img/ChevronDown.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); min-width: 1.4rem; min-height: 1.4rem; opacity: 80%; margin: auto 0; margin-right: 0.3rem; transition: all 150ms ease; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDBox .IDContent .switchArrowIcon { transform: rotate(180deg); } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown { position: relative; overflow: visible; height: -moz-fit-content; height: fit-content; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container { overflow: visible; flex-direction: column; position: relative; z-index: 5; top: 0; background-color: rgb(18.525, 24.225, 32.775); box-sizing: border-box; width: 100%; display: none; transition: height 200ms ease-out; height: -moz-fit-content; height: fit-content; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .dividerBar { height: 1px; background-color: rgb(49.8333333333, 65.1666666667, 88.1666666667); width: 80%; align-self: center; margin: 0.25rem 0; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer { padding-bottom: 0; overflow: visible; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child { position: relative; overflow: visible; box-sizing: border-box; display: flex; justify-content: space-between; padding: 0.25rem; padding-left: calc(0.25rem - 2px); border-left: 2px solid #0088cc; margin-bottom: 0.4rem; transition: all 200ms ease; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .renameInput { transition: all 200ms ease; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child:hover:not(:has(.IDoptions:hover)) { background-color: rgb(31.4166666667, 41.0833333333, 55.5833333333); } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child:hover:not(:has(.IDoptions:hover)) .renameInput { background-color: rgb(31.4166666667, 41.0833333333, 55.5833333333); } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .connect_buttonGroup { display: flex; flex-direction: column; cursor: pointer; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .connect_buttonGroup .connect_buttonID_Nickname { font-size: 0.885rem; position: relative; padding-left: 1.3rem; overflow-wrap: anywhere; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .connect_buttonGroup .connect_buttonID_Nickname::before { content: ""; position: absolute; top: 0.1rem; left: 0.2rem; width: 0.9rem; height: 0.9rem; background-image: url("img/solid/Star.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); opacity: 0; transition: opacity 0.2s ease; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .connect_buttonGroup .connect_buttonID_Nickname.default-account::before { opacity: 1; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .connect_buttonGroup #connect_button { padding: 0; padding-left: 1.3rem; height: 1.5rem; cursor: pointer; border: none; background: none; font-size: 0.684rem; opacity: 80%; height: -moz-fit-content; height: fit-content; margin-right: auto; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .connect_buttonGroup .renameInput { position: absolute; left: 1.3rem; top: 2px; width: 80%; background: none; border: none; outline: none; font-size: 0.885rem; height: -moz-fit-content; height: fit-content; background-color: rgb(18.525, 24.225, 32.775); z-index: 100; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptionsButton { background-image: url("img/EllipsisVertical.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); min-height: 1.2rem; min-width: 1.2rem; margin: auto 0; padding: 0; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .active { display: flex !important; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; background-color: #0d1117; box-shadow: none; padding: 0.5rem; flex-direction: column; position: absolute; top: 0; left: 12.5rem; gap: 0.5rem; z-index: 99; display: none; width: -moz-fit-content; width: fit-content; } @media (max-width: 600px) { .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions { padding: 0.75rem; box-shadow: none; } } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .renameID, .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .saveAsdefault, .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .removeID_button { position: relative; border: none; background: none; padding: 0.25rem 0.5rem 0.25rem 2rem; font-size: 0.786rem; opacity: 80%; cursor: pointer; white-space: nowrap; width: 100%; text-align: left; transition: opacity 0.2s ease; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .renameID:hover, .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .saveAsdefault:hover, .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .removeID_button:hover { opacity: 60%; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .renameID::before, .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .saveAsdefault::before, .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .removeID_button::before { content: ""; position: absolute; top: 50%; left: 0.5rem; transform: translateY(-50%); filter: invert(1); height: 1rem; width: 1rem; opacity: 90%; transition: background-image 0.2s ease; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .renameID::before { background-image: url("img/PencilSquare.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .saveAsdefault:hover::before { background-image: url("img/solid/Star.svg"); } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .saveAsdefault::before { background-image: url("img/Star.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .buttonsContainer #account_box_child .IDoptions .removeID_button::before { background-image: url("img/Trash.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .add_id { cursor: pointer; background-image: url("img/Plus.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); align-self: center; min-height: 1.4rem; min-width: 1.4rem; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .IDdropdown .IDdropdown_container .add_id:hover { opacity: 60%; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel .show { display: flex !important; } .main_box .sidebar .sidebarMain .sidebarContent .dropdownMenu { display: none; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard { position: relative; display: flex; margin-top: 0.2rem; padding: 0.5rem; cursor: pointer; background: linear-gradient(to left, rgba(13, 17, 23, 0) 50%, rgb(18.525, 24.225, 32.775) 50%); border-radius: 0.5rem; background-size: 200% 100%; background-position: right; transition: all 0.15s ease-in; transform: translateX(-1px); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard:hover button { margin-left: 1rem; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard#active_sidebar_option button { margin-left: 1rem; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard .sectionIcon { background-image: url("img/Home.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1.8rem; max-width: 1.8rem; min-height: 1.8rem; max-height: 1.8rem; opacity: 80%; filter: invert(1); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard button { text-decoration: none; background: none; border: none; margin-left: 0.75rem; padding: 0; cursor: pointer; color: rgba(240, 242, 245, 0.9); font-weight: 500; font-size: 0.885rem; transition: margin 300ms ease; } @media (max-width: 600px) { .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard { margin: 0; height: -moz-fit-content; height: fit-content; flex-direction: column; justify-content: center; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard button { display: flex; margin: 0 !important; opacity: 80%; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard .sectionIcon { align-self: center; width: 2rem; height: 2rem; } } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard:hover .sectionIcon { background-image: url("img/solid/Home.svg"); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard#active_sidebar_option { background-position: left; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_dashboard#active_sidebar_option .sectionIcon { background-image: url("img/solid/Home.svg"); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings { position: relative; display: flex; margin-top: 0.2rem; padding: 0.5rem; cursor: pointer; background: linear-gradient(to left, rgba(13, 17, 23, 0) 50%, rgb(18.525, 24.225, 32.775) 50%); border-radius: 0.5rem; background-size: 200% 100%; background-position: right; transition: all 0.15s ease-in; transform: translateX(-1px); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings:hover button { margin-left: 1rem; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings#active_sidebar_option button { margin-left: 1rem; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings .sectionIcon { background-image: url("img/AdjustmentsHorizontal.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1.8rem; max-width: 1.8rem; min-height: 1.8rem; max-height: 1.8rem; opacity: 80%; filter: invert(1); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings button { text-decoration: none; background: none; border: none; margin-left: 0.75rem; padding: 0; cursor: pointer; color: rgba(240, 242, 245, 0.9); font-weight: 500; font-size: 0.885rem; transition: margin 300ms ease; } @media (max-width: 600px) { .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings { margin: 0; height: -moz-fit-content; height: fit-content; flex-direction: column; justify-content: center; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings button { display: flex; margin: 0 !important; opacity: 80%; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings .sectionIcon { align-self: center; width: 2rem; height: 2rem; } } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings:hover .sectionIcon { background-image: url("img/solid/AdjustmentsHorizontal.svg"); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings#active_sidebar_option { background-position: left; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_settings#active_sidebar_option .sectionIcon { background-image: url("img/solid/AdjustmentsHorizontal.svg"); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics { position: relative; display: flex; margin-top: 0.2rem; padding: 0.5rem; cursor: pointer; background: linear-gradient(to left, rgba(13, 17, 23, 0) 50%, rgb(18.525, 24.225, 32.775) 50%); border-radius: 0.5rem; background-size: 200% 100%; background-position: right; transition: all 0.15s ease-in; transform: translateX(-1px); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics:hover button { margin-left: 1rem; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics#active_sidebar_option button { margin-left: 1rem; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics .sectionIcon { background-image: url("img/ChartBarSquare.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1.8rem; max-width: 1.8rem; min-height: 1.8rem; max-height: 1.8rem; opacity: 80%; filter: invert(1); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics button { text-decoration: none; background: none; border: none; margin-left: 0.75rem; padding: 0; cursor: pointer; color: rgba(240, 242, 245, 0.9); font-weight: 500; font-size: 0.885rem; transition: margin 300ms ease; } @media (max-width: 600px) { .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics { margin: 0; height: -moz-fit-content; height: fit-content; flex-direction: column; justify-content: center; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics button { display: flex; margin: 0 !important; opacity: 80%; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics .sectionIcon { align-self: center; width: 2rem; height: 2rem; } } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics:hover .sectionIcon { background-image: url("img/solid/ChartBarSquare.svg"); } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics#active_sidebar_option { background-position: left; } .main_box .sidebar .sidebarMain .sidebarContent .sidebarContent_statistics#active_sidebar_option .sectionIcon { background-image: url("img/solid/ChartBarSquare.svg"); } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout { position: relative; display: flex; margin-top: 0.2rem; padding: 0.5rem; cursor: pointer; background: linear-gradient(to left, rgba(13, 17, 23, 0) 50%, rgb(18.525, 24.225, 32.775) 50%); border-radius: 0.5rem; background-size: 200% 100%; background-position: right; transition: all 0.15s ease-in; transform: translateX(-1px); margin-top: auto; } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout:hover button { margin-left: 1rem; } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout#active_sidebar_option button { margin-left: 1rem; } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout .sectionIcon { background-image: url("img/ArrowLeftStartOnRectangle.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1.8rem; max-width: 1.8rem; min-height: 1.8rem; max-height: 1.8rem; opacity: 80%; filter: invert(1); } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout button { text-decoration: none; background: none; border: none; margin-left: 0.75rem; padding: 0; cursor: pointer; color: rgba(240, 242, 245, 0.9); font-weight: 500; font-size: 0.885rem; transition: margin 300ms ease; } @media (max-width: 600px) { .main_box .sidebar .sidebarMain .sidebarContent .buton_logout { margin: 0; height: -moz-fit-content; height: fit-content; flex-direction: column; justify-content: center; } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout button { display: flex; margin: 0 !important; opacity: 80%; } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout .sectionIcon { align-self: center; width: 2rem; height: 2rem; } } .main_box .sidebar .sidebarUser { display: flex; align-items: center; position: relative; height: 3.5rem; padding: 0 1rem; box-sizing: border-box; } .main_box .sidebar .sidebarUser .user_box { display: flex; width: 100%; margin: 0; padding: 0.5rem; align-content: center; } .main_box .sidebar .sidebarUser .user_box:hover .poza_profil { background-image: url(img/solid/User.svg); } .main_box .sidebar .sidebarUser .user_box .poza_profil { background-image: url(img/User.svg); filter: invert(1); min-width: 1.8rem; max-width: 1.8rem; min-height: 1.8rem; max-height: 1.8rem; margin: auto 0; background-size: contain; background-repeat: no-repeat; background-position: center center; } .main_box .sidebar .sidebarUser .user_box .user_details { display: flex; flex-direction: column; margin-left: 1rem; } .main_box .sidebar .sidebarUser .user_box .user_details .username { margin: auto 0; font-size: 1rem; font-weight: 500; color: rgba(240, 242, 245, 0.9); } .main_box .sidebar .sidebarUser .user_box .user_details .ip_address { font-size: 0.786rem; opacity: 80%; } .main_box .narrow_mode { min-width: 3.8rem; max-width: 3.8rem; } .main_box .narrow_mode .sidebarMain { padding: 0.5rem; } .main_box .narrow_mode .sidebarMain .sidebarMain_title .appTitle { display: none; } .main_box .narrow_mode .sidebarMain .sidebarMain_title .shortenSidebar_outline { padding: 0.5rem; background: linear-gradient(to left, rgba(13, 17, 23, 0) 50%, rgb(18.525, 24.225, 32.775) 50%); border-radius: 0.3rem; background-size: 200% 100%; background-position: right; transition: all 0.15s ease-in; transform: translateX(-1px); } .main_box .narrow_mode .sidebarMain .sidebarMain_title .shortenSidebar_outline:hover { background-position: left; border-radius: 0.5rem; } .main_box .narrow_mode .sidebarMain .sidebarMain_title .shortenSidebar_outline .shortenSidebar { margin: 0; width: 1.8rem; height: 1.8rem; } .main_box .narrow_mode .sidebarMain .sidebarContent .IDPanel { width: -moz-fit-content; width: fit-content; } .main_box .narrow_mode .sidebarMain .sidebarContent .IDPanel .IDBox .IDContent { display: none; } .main_box .narrow_mode .sidebarMain .sidebarContent .show_minimized { min-width: 12.25rem; max-width: 12.25rem; margin-right: 1rem; } .main_box .narrow_mode .sidebarMain .sidebarContent .show_minimized .IDBox .IDContent { display: flex; } .main_box .narrow_mode .sidebarMain .sidebarContent_dashboard { width: -moz-fit-content; width: fit-content; } .main_box .narrow_mode .sidebarMain .sidebarContent_dashboard button { display: none; } .main_box .narrow_mode .sidebarMain .sidebarContent_settings { width: -moz-fit-content; width: fit-content; } .main_box .narrow_mode .sidebarMain .sidebarContent_settings button { display: none; } .main_box .narrow_mode .sidebarMain .sidebarContent_statistics { width: -moz-fit-content; width: fit-content; } .main_box .narrow_mode .sidebarMain .sidebarContent_statistics button { display: none; } .main_box .narrow_mode .sidebarMain .sidebarContent .buton_logout { width: -moz-fit-content; width: fit-content; } .main_box .narrow_mode .sidebarMain .sidebarContent .buton_logout button { display: none; } .main_box .narrow_mode .sidebarUser { padding: 0.5rem; } .main_box .narrow_mode .sidebarUser .user_box .user_details { display: none; } .main_box #contents { display: flex; flex-wrap: wrap; box-sizing: border-box; margin: auto 0; height: 96vh; position: relative; z-index: 0; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } .main_box #contents::-webkit-scrollbar { display: none; } .main_box #contents .generalDropdown legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; } .main_box #contents .generalDropdown .generalDropdown_triggerButton { padding: 0; text-align: left; width: 100%; border: none; background: none; transform: translateY(-0.7rem); font-size: 0.786rem; opacity: 60%; } .main_box #contents .generalDropdown .generalDropdown_triggerButton::after { content: ""; position: absolute; top: 10%; right: -0.5rem; background-image: url(img/ChevronDown.svg); filter: invert(1); height: 1.2rem; width: 1.2rem; transition: all ease-in-out 200ms; } .main_box #contents .generalDropdown .generalDropdown_triggerButton.rotateArrow::after { transform: rotate(180deg); } .main_box #contents .generalDropdown .generalDropdown_optionsTable { position: absolute; top: 2rem; left: 0; z-index: 10; width: 100%; background-color: rgb(18.525, 24.225, 32.775); border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); padding: 0.5rem; height: -moz-fit-content; height: fit-content; max-height: 10rem; overflow: auto; } .main_box #contents .generalDropdown .generalDropdown_optionsTable .generalDropdown_option { font-size: 0.885rem; opacity: 80%; margin-bottom: 0.5rem; cursor: pointer; } .main_box #contents .generalDropdown .generalDropdown_displayNone { display: none !important; } .main_box #contents legend:hover { opacity: 80% !important; text-decoration: underline; cursor: default; } .main_box #contents .dashboardSection { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 35vh calc(100% - 35vh); gap: 1.5rem; width: 100%; } .main_box #contents .dashboardSection .sendTrade { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; grid-row: 2; margin-left: 4vh; } @media (max-width: 600px) { .main_box #contents .dashboardSection .sendTrade { padding: 0.75rem; box-shadow: none; } } .main_box #contents .dashboardSection .sendTrade .sendTrade_header { display: flex; justify-content: space-between; border-bottom: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); padding-bottom: 0.5rem; margin-bottom: 1rem; } .main_box #contents .dashboardSection .sendTrade .sendTrade_header .sendTrade_title { color: rgba(240, 242, 245, 0.8); font-weight: 500; } .main_box #contents .dashboardSection .sendTrade .sendTrade_header .sendTrade_headerButtons { display: none; } .main_box #contents .dashboardSection .sendTrade .sendTrade_header .sendTrade_headerButtons .infoIcon { background-image: url("img/informationCircle.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); height: 1.5rem; width: 1.5rem; opacity: 80%; } .main_box #contents .dashboardSection .sendTrade .sendTrade_header .sendTrade_headerButtons .menuIcon { background-image: url("img/EllipsisVertical.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); height: 1.5rem; width: 1.5rem; opacity: 80%; } .main_box #contents .dashboardSection .sendTrade .big_buttons > fieldset, .main_box #contents .dashboardSection .sendTrade .inputs > fieldset { position: relative; height: 2.8rem; border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); margin: 0; margin-bottom: 0.75rem; } .main_box #contents .dashboardSection .sendTrade .big_buttons > fieldset legend, .main_box #contents .dashboardSection .sendTrade .inputs > fieldset legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; transition: all 200ms ease; } .main_box #contents .dashboardSection .sendTrade .big_buttons > fieldset input, .main_box #contents .dashboardSection .sendTrade .inputs > fieldset input { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } .main_box #contents .dashboardSection .sendTrade .big_buttons > fieldset input:focus, .main_box #contents .dashboardSection .sendTrade .inputs > fieldset input:focus { opacity: 80%; font-weight: 550; } .main_box #contents .dashboardSection .sendTrade .small_buttons { display: flex; position: relative; } .main_box #contents .dashboardSection .sendTrade .small_buttons .inputs { width: 50%; margin-right: 1rem; } .main_box #contents .dashboardSection .sendTrade .small_buttons .inputs fieldset:nth-of-type(2) { margin: 0; } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox { width: 50%; display: flex; } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset { width: 100%; position: relative; border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); display: flex; flex-direction: column; justify-content: space-between; align-self: center; height: 5.4rem; } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div { display: flex; } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:checked, .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:not(:checked) { position: absolute; left: -9999px; } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:checked + label, .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:not(:checked) + label { position: relative; padding-left: 1.5rem; cursor: pointer; line-height: 1.25rem; display: inline-block; color: rgba(240, 242, 245, 0.8); } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:checked + label:before, .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:not(:checked) + label:before { content: ""; position: absolute; left: 0; top: 0; width: 1rem; height: 1rem; border: 0.0625rem solid rgb(49.8333333333, 65.1666666667, 88.1666666667) !important; border-radius: 100%; background: none; } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:checked + label:after, .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:not(:checked) + label:after { content: ""; width: 0.75rem; height: 0.75rem; background: #0088cc; position: absolute; top: 0.1875rem; left: 0.1875rem; border-radius: 100%; transition: all 0.2s ease; } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:not(:checked) + label:after { opacity: 0; transform: scale(0); } .main_box #contents .dashboardSection .sendTrade .small_buttons .trade_typeBox fieldset div [type=radio]:checked + label:after { opacity: 1; transform: scale(1); } .main_box #contents .dashboardSection .sendTrade .send_trade_button { display: flex; justify-content: flex-end; height: -moz-fit-content; height: fit-content; margin-top: 0.75rem; } .main_box #contents .dashboardSection .sendTrade .send_trade_button .send_trade { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #0088cc; font-size: 0.885rem; border: 1px solid #00aaff; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin: 0; } .main_box #contents .dashboardSection .sendTrade .send_trade_button .send_trade:hover { background-color: #58b1dd; } .main_box #contents .dashboardSection .sendTrade .info_trade { z-index: 100; display: flex; align-self: center; position: absolute; top: 0; left: 50%; width: -moz-fit-content; width: fit-content; transform: translateX(-50%); } .main_box #contents .dashboardSection .sendTrade .info_trade p { display: inline-block; background-color: rgb(18.525, 24.225, 32.775); padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(0, 136, 204, 0.6); margin: 0.5rem auto; font-size: 0.885rem; } .main_box #contents .dashboardSection .chartBox { display: flex; flex-direction: column-reverse; position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; border: none; padding: 0; overflow: visible; grid-row: 1; grid-column: 1/3; margin-right: 3vh; } @media (max-width: 600px) { .main_box #contents .dashboardSection .chartBox { padding: 0.75rem; box-shadow: none; } } .main_box #contents .dashboardSection .chartBox .chartSettings { margin-top: 1rem; margin-left: 4vh; display: flex; align-items: center; gap: 1rem; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset { display: flex; flex-direction: column; position: relative; height: 2.8rem; border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); margin: 0; margin-bottom: 0.75rem; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset input { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset input:focus { opacity: 80%; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset select { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset button { padding: 0; text-align: left; width: 100%; border: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset button::after { content: ""; position: absolute; top: 10%; right: -0.5rem; background-image: url(img/ChevronDown.svg); filter: invert(1); height: 1.2rem; width: 1.2rem; transition: all ease-in-out 200ms; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset button.rotateArrow::after { transform: rotate(180deg); } .main_box #contents .dashboardSection .chartBox .chartSettings .chart_settings_box { display: flex; align-content: center; margin: auto 0; margin-left: auto; margin-right: 1rem; cursor: pointer; } .main_box #contents .dashboardSection .chartBox .chartSettings .chart_settings_box .icon { background-image: url(img/AdjustmentsHorizontal.svg); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); height: 1.8rem; width: 1.8rem; opacity: 60%; } .main_box #contents .dashboardSection .chartBox .chartSettings .chart_settings_box .icon:hover { background-image: url(img/solid/AdjustmentsHorizontal.svg); } .main_box #contents .dashboardSection .chartBox #chart { width: 100%; } .main_box #contents .dashboardSection .chartBox #chart .user-select-none { width: auto; height: auto; } .main_box #contents .dashboardSection .chartBox #chart .plot-container { height: 100%; } .main_box #contents .dashboardSection #trades_information_box { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; grid-row: 2; margin-right: 3vh; } @media (max-width: 600px) { .main_box #contents .dashboardSection #trades_information_box { padding: 0.75rem; box-shadow: none; } } .main_box #contents .dashboardSection #trades_information_box #no_trade { margin: auto 0; text-align: center; font-size: 1rem; font-weight: 400; opacity: 60%; padding: 3rem 0 2rem; } .main_box #contents .dashboardSection #trades_information_box table { border-collapse: collapse; width: 100%; table-layout: fixed; } .main_box #contents .dashboardSection #trades_information_box table tr th { opacity: 50%; font-weight: 500; padding-bottom: 0.75rem; } .main_box #contents .dashboardSection #trades_information_box table tr th:nth-child(1) { width: 23%; text-align: start; } .main_box #contents .dashboardSection #trades_information_box table tr th:nth-child(2) { width: 21%; text-align: start; } .main_box #contents .dashboardSection #trades_information_box table tr th:nth-child(3) { width: 22%; text-align: start; } .main_box #contents .dashboardSection #trades_information_box table tr th:nth-child(4) { width: 17%; text-align: start; } .main_box #contents .dashboardSection #trades_information_box table tr th:nth-child(5) { width: 17%; text-align: start; } .main_box #contents .dashboardSection #trades_information_box table .box-of-all { -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: top; border-bottom: 1px solid rgba(240, 242, 245, 0.4); } .main_box #contents .dashboardSection #trades_information_box table #trade_box_child { border-top: 1px solid rgba(240, 242, 245, 0.4); cursor: pointer; } .main_box #contents .dashboardSection #trades_information_box table #trade_box_child:hover { background-color: rgba(0, 136, 204, 0.2); } .main_box #contents .dashboardSection #trades_information_box table #trade_box_child td { padding-top: 0.75rem; padding-bottom: 0.75rem; } .main_box #contents .settings { width: 100%; } .main_box #contents .settings .settings_menu { margin-left: 1vw; position: relative; display: flex; margin-top: 1rem; padding: 0 1rem; padding-left: calc(1vw + 1rem); border-bottom: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); } .main_box #contents .settings .settings_menu .trade_details_box { position: relative; top: 2px; padding: 0.5rem; margin-left: 0.75rem; cursor: pointer; height: -moz-fit-content; height: fit-content; display: flex; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .main_box #contents .settings .settings_menu .trade_details_box:hover > div { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .settings .settings_menu .trade_details_box:hover > div::before { background-image: url("img/Filter.svg"); } .main_box #contents .settings .settings_menu .trade_details_box #option_selected { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .settings .settings_menu .trade_details_box #option_selected::before { background-image: url("img/Filter.svg"); } .main_box #contents .settings .settings_menu .trade_details_box > div { position: relative; margin-left: 1.2rem; padding-bottom: 2px; } .main_box #contents .settings .settings_menu .trade_details_box > div::before { content: ""; position: absolute; top: 50%; left: -1.7rem; transform: translateY(-50%); background-image: url("img/Filter.svg"); opacity: 60%; margin: auto 0; margin-right: 0.5rem; height: 1.2rem; width: 1.2rem; background-position: center; background-repeat: no-repeat; background-size: cover; filter: invert(1); stroke-width: 10px; } .main_box #contents .settings .settings_menu .trade_details_box .trade_details { margin: 0; } .main_box #contents .settings .settings_menu .trade_details_box .icon { display: none; } .main_box #contents .settings .settings_menu .statistics_settings_box { position: relative; top: 2px; padding: 0.5rem; margin-left: 0.75rem; cursor: pointer; height: -moz-fit-content; height: fit-content; display: flex; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .main_box #contents .settings .settings_menu .statistics_settings_box:hover > div { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .settings .settings_menu .statistics_settings_box:hover > div::before { background-image: url("img/Filter.svg"); } .main_box #contents .settings .settings_menu .statistics_settings_box #option_selected { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .settings .settings_menu .statistics_settings_box #option_selected::before { background-image: url("img/Filter.svg"); } .main_box #contents .settings .settings_menu .statistics_settings_box > div { position: relative; margin-left: 1.2rem; padding-bottom: 2px; } .main_box #contents .settings .settings_menu .statistics_settings_box > div::before { content: ""; position: absolute; top: 50%; left: -1.7rem; transform: translateY(-50%); background-image: url("img/Chart_Pie.svg"); opacity: 60%; margin: auto 0; margin-right: 0.5rem; height: 1.2rem; width: 1.2rem; background-position: center; background-repeat: no-repeat; background-size: cover; filter: invert(1); stroke-width: 10px; } .main_box #contents .settings .settings_menu .statistics_settings_box .statistics_settings { margin: 0; } .main_box #contents .settings .settings_menu .statistics_settings_box .icon { display: none; } .main_box #contents .settings #settings_box { position: relative; display: flex; padding: 0 2rem; margin-top: 1rem; gap: 6rem; width: 90%; margin-left: 2vw; margin-top: 2rem; } .main_box #contents .settings #settings_box fieldset { position: relative; height: 2.8rem; border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); margin: 0; margin-bottom: 0.75rem; width: 32%; } .main_box #contents .settings #settings_box fieldset legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; } .main_box #contents .settings #settings_box fieldset input { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } .main_box #contents .settings #settings_box fieldset input:focus { opacity: 80%; font-weight: 550; } .main_box #contents .settings #settings_box h1 { font-size: 1.272rem; font-weight: 530; padding-bottom: 0.75rem; width: 100%; border-bottom: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); } .main_box #contents .settings #settings_box .tradeDetails { width: 100%; } .main_box #contents .settings #settings_box .tradeDetails .save_box { display: flex; justify-content: flex-end; height: -moz-fit-content; height: fit-content; margin-top: 0.75rem; justify-content: center; width: 32%; justify-content: end; } .main_box #contents .settings #settings_box .tradeDetails .save_box button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #0088cc; font-size: 0.885rem; border: 1px solid #00aaff; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin: 0; } .main_box #contents .settings #settings_box .tradeDetails .save_box button:hover { background-color: #58b1dd; } .main_box #contents .settings #settings_box .statisticsSettings { flex-grow: 1; } .main_box #contents .settings #settings_box .statisticsSettings .vaultPath { display: flex; flex-direction: column; } .main_box #contents .settings #settings_box .statisticsSettings .statisticsDetails { display: flex; flex-direction: column; width: 100%; } .main_box #contents .settings #settings_box .statisticsSettings .statisticsDetails .statisticsDetails_section { width: 80%; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .main_box #contents .settings #settings_box .statisticsSettings .statisticsDetails .statisticsDetails_section fieldset { width: 100%; } .main_box #contents .settings #settings_box .statisticsSettings .statisticsDetails .statisticsDetails_note { white-space: normal; width: 100%; } .main_box #contents .settings #settings_box .statisticsSettings .statisticsDetails .numericalStatistics { white-space: normal; width: 100%; } .main_box #contents .settings #settings_box .statisticsSettings .save_box { display: flex; justify-content: flex-end; height: -moz-fit-content; height: fit-content; margin-top: 0.75rem; } .main_box #contents .settings #settings_box .statisticsSettings .save_box button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #0088cc; font-size: 0.885rem; border: 1px solid #00aaff; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin: 0; } .main_box #contents .settings #settings_box .statisticsSettings .save_box button:hover { background-color: #58b1dd; } .main_box #contents .settings #settings_box .statisticsLibrary { flex-direction: column; width: 30%; margin-top: 2rem; } .main_box #contents .settings #settings_box .statisticsLibrary p { margin: 0; } .main_box #contents .settings #settings_box .statisticsLibrary > div { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; padding: 0; width: 100%; flex-direction: column; margin-bottom: 0.75rem; box-shadow: none; } @media (max-width: 600px) { .main_box #contents .settings #settings_box .statisticsLibrary > div { padding: 0.75rem; box-shadow: none; } } .main_box #contents .settings #settings_box .statisticsLibrary > div > div { position: relative; background-color: #0d1117; border-radius: 0.5rem; padding: 0.5rem; padding-right: 1.9rem; font-size: 0.885rem; font-weight: 550; opacity: 80%; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .main_box #contents .settings #settings_box .statisticsLibrary > div > div::after { content: ""; position: absolute; top: 20%; right: 0.5rem; background-image: url(img/ChevronDown.svg); filter: invert(1); height: 1.4rem; width: 1.4rem; transition: all ease-in-out 200ms; } .main_box #contents .settings #settings_box .statisticsLibrary > div > div.rotateArrow::after { transform: rotate(180deg); } .main_box #contents .settings #settings_box .statisticsLibrary > div > section { transition: all 200ms ease; } .main_box #contents .settings #settings_box .statisticsLibrary > div > section > div { height: -moz-fit-content; height: fit-content; opacity: 1; } .main_box #contents .settings #settings_box .statisticsLibrary > div > section > div > div { display: flex; justify-content: space-between; margin: 0.5rem 0; padding: 0.5rem 1rem; padding-right: 0.25rem; height: -moz-fit-content; height: fit-content; margin: 0; } .main_box #contents .settings #settings_box .statisticsLibrary > div > section > div > div button { background: none; width: 1.5rem; height: 1.5rem; border: none; background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; } .main_box #contents .settings #settings_box .statisticsLibrary > div > section > div > div:hover { border-left: 2px solid #0088cc; padding-left: calc(1rem - 2px); } .main_box #contents .settings #settings_box .statisticsLibrary > div > section > div > div:hover button { background-image: url(img/XMark.svg); filter: invert(1); } .main_box #contents .settings #settings_box .statisticsLibrary > div > section > div > div p { max-width: 80%; max-height: 8rem; font-size: 0.885rem; margin: auto 0; height: -moz-fit-content; height: fit-content; opacity: 90%; word-break: break-all; overflow: auto; } .main_box #contents .settings #settings_box .statisticsLibrary > div > section .libraryPanel_hide { max-height: 0; opacity: 0; } .main_box #contents .statisticsMain { width: 100%; } .main_box #contents .statisticsMain .statisticsMenu { margin-left: 1vw; position: relative; display: flex; margin-top: 1rem; padding: 0 1rem; padding-left: calc(1vw + 1rem); border-bottom: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); } .main_box #contents .statisticsMain .statisticsMenu .file_statistics_box { position: relative; top: 2px; padding: 0.5rem; margin-left: 0.75rem; cursor: pointer; height: -moz-fit-content; height: fit-content; display: flex; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .main_box #contents .statisticsMain .statisticsMenu .file_statistics_box:hover > div { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .statisticsMain .statisticsMenu .file_statistics_box:hover > div::before { background-image: url("img/solid/DocumentPlus.svg"); } .main_box #contents .statisticsMain .statisticsMenu .file_statistics_box #option_selected { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .statisticsMain .statisticsMenu .file_statistics_box #option_selected::before { background-image: url("img/solid/DocumentPlus.svg"); } .main_box #contents .statisticsMain .statisticsMenu .file_statistics_box > div { position: relative; margin-left: 1.2rem; padding-bottom: 2px; } .main_box #contents .statisticsMain .statisticsMenu .file_statistics_box > div::before { content: ""; position: absolute; top: 50%; left: -1.7rem; transform: translateY(-50%); background-image: url("img/DocumentPlus.svg"); opacity: 60%; margin: auto 0; margin-right: 0.5rem; height: 1.2rem; width: 1.2rem; background-position: center; background-repeat: no-repeat; background-size: cover; filter: invert(1); stroke-width: 10px; } .main_box #contents .statisticsMain .statisticsMenu .generates_statistics_box { position: relative; top: 2px; padding: 0.5rem; margin-left: 0.75rem; cursor: pointer; height: -moz-fit-content; height: fit-content; display: flex; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .main_box #contents .statisticsMain .statisticsMenu .generates_statistics_box:hover > div { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .statisticsMain .statisticsMenu .generates_statistics_box:hover > div::before { background-image: url("img/solid/ChartBar.svg"); } .main_box #contents .statisticsMain .statisticsMenu .generates_statistics_box #option_selected { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .statisticsMain .statisticsMenu .generates_statistics_box #option_selected::before { background-image: url("img/solid/ChartBar.svg"); } .main_box #contents .statisticsMain .statisticsMenu .generates_statistics_box > div { position: relative; margin-left: 1.2rem; padding-bottom: 2px; } .main_box #contents .statisticsMain .statisticsMenu .generates_statistics_box > div::before { content: ""; position: absolute; top: 50%; left: -1.7rem; transform: translateY(-50%); background-image: url("img/ChartBar.svg"); opacity: 60%; margin: auto 0; margin-right: 0.5rem; height: 1.2rem; width: 1.2rem; background-position: center; background-repeat: no-repeat; background-size: cover; filter: invert(1); stroke-width: 10px; } .main_box #contents .statisticsMain .statisticsMenu .browser_statistics_box { position: relative; top: 2px; padding: 0.5rem; margin-left: 0.75rem; cursor: pointer; height: -moz-fit-content; height: fit-content; display: flex; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .main_box #contents .statisticsMain .statisticsMenu .browser_statistics_box:hover > div { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .statisticsMain .statisticsMenu .browser_statistics_box:hover > div::before { background-image: url("img/solid/Folder.svg"); } .main_box #contents .statisticsMain .statisticsMenu .browser_statistics_box #option_selected { border-bottom: 2px solid #0088cc; padding-bottom: 0; } .main_box #contents .statisticsMain .statisticsMenu .browser_statistics_box #option_selected::before { background-image: url("img/solid/Folder.svg"); } .main_box #contents .statisticsMain .statisticsMenu .browser_statistics_box > div { position: relative; margin-left: 1.2rem; padding-bottom: 2px; } .main_box #contents .statisticsMain .statisticsMenu .browser_statistics_box > div::before { content: ""; position: absolute; top: 50%; left: -1.7rem; transform: translateY(-50%); background-image: url("img/Folder.svg"); opacity: 60%; margin: auto 0; margin-right: 0.5rem; height: 1.2rem; width: 1.2rem; background-position: center; background-repeat: no-repeat; background-size: cover; filter: invert(1); stroke-width: 10px; } .main_box #contents .statisticsMain .contents_box { display: flex; gap: 1rem; padding: 0 2rem; margin-top: 1rem; width: 90%; margin-left: 2vw; margin-top: 2rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics { display: flex; flex-direction: column-reverse; gap: 1rem; width: 100%; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; background: none; margin: 0; width: 80%; margin-top: 1rem; padding: 0; } @media (max-width: 600px) { .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure { padding: 0.75rem; box-shadow: none; } } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure ul { list-style-type: none; padding: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure li { list-style-type: none; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure span { font-size: 0.885rem; opacity: 90%; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure span:hover { text-decoration: underline; color: #58b1dd; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #deleteButton { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #0088cc; font-size: 0.885rem; border: 1px solid #00aaff; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin: 0; font-size: 0.885rem; z-index: 10; margin: 1rem; margin-left: auto; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #deleteButton:hover { background-color: #58b1dd; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list { padding: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list .vaultHeader { margin: 1rem; display: flex; justify-content: space-between; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list .vaultHeader button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: rgb(31.4166666667, 41.0833333333, 55.5833333333); font-size: 0.885rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); font-weight: 480; margin: 0; z-index: 10; max-height: -moz-fit-content; max-height: fit-content; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list .vaultHeader button:hover { background-color: rgb(27.7333333333, 36.2666666667, 49.0666666667); } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list .vaultHeader .folder { font-size: 1.272rem; font-weight: 600; margin: auto 0; margin-right: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list .vaultHeader .vaultHeader_rename { position: relative; display: flex; gap: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list .vaultHeader .vaultHeader_rename input { width: 50%; box-sizing: border-box; padding: 0.75rem; color: white; font-weight: 500; text-align: left; border: 0; height: 2rem; border-radius: 0; background: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list .vaultHeader .vaultHeader_rename p { margin: auto 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list .vaultHeader .vault_buttons { display: flex; gap: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #folder_opened::after { content: ""; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); height: 80%; width: 2px; background-color: #0088cc; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #item_opened { background-color: rgb(40.625, 53.125, 71.875); } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure { position: relative; display: flex; flex-direction: column; margin-bottom: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .has-image-folder::after { content: ""; position: absolute; top: 50%; left: 2px; transform: translate3d(-70%, -50%, 0); height: 70%; width: 13px; background-image: url("img/photos.png"); background-size: contain; background-repeat: no-repeat; background-position: center; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder { position: relative; display: flex; justify-content: space-between; height: -moz-fit-content; height: fit-content; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 1px; background-color: rgb(31.4166666667, 41.0833333333, 55.5833333333); width: 98%; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_folder_name { position: relative; display: flex; padding: 0.75rem 0; padding-left: 2rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_folder_name:hover { cursor: pointer; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_folder_name .arrow_icon { content: ""; position: absolute; top: 0.75rem; left: 0.5rem; background-image: url("img/ChevronDown.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; transform: rotate(-90deg); filter: invert(1); opacity: 60%; height: 1.2rem; width: 1.2rem; transition: transform 200ms ease-in-out; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_folder_name #arrow_icon { transform: rotate(0deg); } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_folder_name .item-checkbox { margin-right: 1rem; height: 1rem; width: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons { position: relative; height: 1.5rem; width: 1.5rem; margin: auto 0; margin-right: 0.75rem; background-size: contain; background-repeat: no-repeat; background-position: center center; border-radius: 1rem; cursor: pointer; background-image: url(img/EllipsisVertical.svg); filter: invert(1); z-index: 999; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons:hover { cursor: pointer; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons div { display: none; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons .vault_buttons_show { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; position: absolute; top: 0; left: 3rem; width: -moz-max-content; width: max-content; gap: 0.5rem; background-color: #0d1117; padding: 0.5rem; filter: invert(1); } @media (max-width: 600px) { .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons .vault_buttons_show { padding: 0.75rem; box-shadow: none; } } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons .vault_buttons_show button { position: relative; border: none; background: none; padding: 0.25rem 0.5rem 0.25rem 2rem; font-size: 0.786rem; border-radius: 0.25rem; opacity: 80%; cursor: pointer; white-space: nowrap; width: 100%; text-align: left; transition: opacity 0.2s ease; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons .vault_buttons_show button:hover { opacity: 60%; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons .vault_buttons_show button:before { content: ""; position: absolute; top: 25%; left: 0.5rem; filter: invert(1); height: 1rem; width: 1rem; opacity: 90%; transition: background-image 0.2s ease; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons .vault_buttons_show .rename-button::before { background-image: url("img/PencilSquare.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure #vault-list #file_folderStructure li .vault_folder .vault_buttons .vault_buttons_show .create-button::before { background-image: url("img/FolderPlus.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box { display: flex; width: 70%; width: -moz-fit-content; width: fit-content; gap: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .profit_chart_box { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; padding: 0; margin-top: 1rem; flex-grow: 1; } @media (max-width: 600px) { .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .profit_chart_box { padding: 0.75rem; box-shadow: none; } } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .profit_chart_box .gradient { position: absolute; z-index: -100; } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; margin-top: 1rem; width: -moz-fit-content; width: fit-content; } @media (max-width: 600px) { .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab { padding: 0.75rem; box-shadow: none; } } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: rgb(18.525, 24.225, 32.775); font-size: 0.885rem; border: 1px solid rgb(36.9416666667, 48.3083333333, 65.3583333333); border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin-top: 1rem; white-space: nowrap; } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab button:hover { background-color: rgb(27.7333333333, 36.2666666667, 49.0666666667); } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab #years_box { display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab #years_box div label { cursor: pointer; padding: 0.75rem; background-color: #0d1117; border-radius: 0.5rem; width: -moz-fit-content; width: fit-content; margin-right: 0.5rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab #years_box div label:hover { opacity: 60%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab #years_box div input { display: none; } .main_box #contents .statisticsMain .contents_box #contents_statistics .generate_statistics_box .generate_statistics_tab #years_box div #year_press { background-color: #0088cc; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile { position: relative; display: flex; gap: 6rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes { display: flex; flex-direction: column; position: relative; width: 55%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .tradeForm_box { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; box-shadow: none; margin-bottom: 1rem; } @media (max-width: 600px) { .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .tradeForm_box { padding: 0.75rem; box-shadow: none; } } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .tradeForm_box #tradeImageContents img { max-width: 100%; max-height: 100%; border-radius: 0.5rem; margin: 0 auto; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .tradeForm_box .upload { margin-top: 0; border-bottom: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); padding-bottom: 0.75rem; margin-bottom: 1rem; display: flex; justify-content: space-between; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .tradeForm_box .upload input[type=file] { display: none; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .tradeForm_box .upload .trdeImage { color: rgba(240, 242, 245, 0.8); font-weight: 500; text-align: center; height: -moz-fit-content; height: fit-content; margin: auto 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .tradeForm_box .upload .custom-file-upload { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #0088cc; font-size: 0.885rem; border: 1px solid #00aaff; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin-top: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .tradeForm_box .upload .custom-file-upload:hover { background-color: #58b1dd; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .criteriaForm_box { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; box-shadow: none; } @media (max-width: 600px) { .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .criteriaForm_box { padding: 0.75rem; box-shadow: none; } } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .criteriaForm_box #criteriaImageContents img { max-width: 100%; max-height: 100%; border-radius: 0.5rem; margin: 0 auto; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .criteriaForm_box .upload { margin-top: 0; border-bottom: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); padding-bottom: 0.75rem; display: flex; justify-content: space-between; margin-bottom: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .criteriaForm_box .upload input[type=file] { display: none; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .criteriaForm_box .upload .criteriaImage { color: rgba(240, 242, 245, 0.8); font-weight: 500; text-align: center; height: -moz-fit-content; height: fit-content; margin: auto 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .criteriaForm_box .upload .custom-file-upload { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #0088cc; font-size: 0.885rem; border: 1px solid #00aaff; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin-top: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes .criteriaForm_box .upload .custom-file-upload:hover { background-color: #58b1dd; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs { display: flex; flex-direction: column; max-width: 40%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs h1 { font-size: 1.272rem; font-weight: 530; padding-bottom: 0.75rem; width: 100%; border-bottom: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); margin: 1.5rem 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs fieldset { position: relative; height: 2.8rem; border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); margin: 0; margin-bottom: 1rem; margin-left: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs fieldset legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs fieldset input { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs fieldset input:focus { opacity: 80%; font-weight: 550; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs fieldset select { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs > section { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs > section div { display: flex; flex-direction: column; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs > section .setDate { margin-left: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs > section .rightSection { justify-content: center; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .statisticsInputs_tradeDetails { flex-grow: 1; overflow: auto; margin-left: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .statisticsInputs_tradeDetails .tradeDetail_container { flex-direction: row; margin-right: auto; margin-bottom: 0.25rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .statisticsInputs_tradeDetails .tradeDetail_container > div { opacity: 60%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .statisticsInputs_tradeDetails .tradeDetail_container input { width: -moz-fit-content; width: fit-content; margin: auto 0; transform: none; opacity: 80%; margin-right: 0.75rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .numStatistics_file { display: grid; grid-template-columns: 3fr 1fr; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeContext { white-space: normal; height: 8rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeContext textarea { width: 100%; height: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; resize: none; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeContext textarea:focus { opacity: 80%; font-weight: 550; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData { margin-top: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox { font-size: 0.885rem; display: flex; flex-direction: row; gap: 1rem; margin: auto 0; margin-left: 0.75rem; padding: 0.5rem; padding-left: 0; padding-right: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox p { margin: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox .switch { display: inline-block; height: 22px; position: relative; width: 44px; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox .switch input { display: none; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox .slider { background-color: rgb(31.4166666667, 41.0833333333, 55.5833333333); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox .slider:before { background-color: #f0f2f5; bottom: 2px; left: 3px; content: ""; height: 18px; width: 18px; position: absolute; transition: 0.2s; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox input:checked + .slider { background-color: #0088cc; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox input:checked + .slider:before { transform: translateX(20px); } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox .slider.round { border-radius: 34px; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .checkbox .slider.round:before { border-radius: 50%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .save_box { display: flex; justify-content: flex-end; height: -moz-fit-content; height: fit-content; margin-top: 0.75rem; margin-top: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .save_box button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #0088cc; font-size: 0.885rem; border: 1px solid #00aaff; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeSendData .save_box button:hover { background-color: #58b1dd; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics div { font-size: 0.885rem; opacity: 98%; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; } @media (max-width: 600px) { .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div { padding: 0.75rem; box-shadow: none; } } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div > .statistics-title { font-size: 1.129rem; opacity: 100%; font-weight: 550; margin-bottom: 0.5rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div > .statistics-title:hover { opacity: 80% !important; text-decoration: underline; cursor: pointer; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section { position: relative; flex-direction: column; margin: 0.25rem 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section::before { content: ""; position: absolute; left: 0.6rem; top: 6px; height: 0.5rem; width: 0.6rem; background-color: rgb(49.8333333333, 65.1666666667, 88.1666666667); } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section::after { content: ""; position: absolute; left: calc(0.6rem + 2px); top: 4px; height: 0.5rem; width: 0.6rem; background-color: #0d1117; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-title { -webkit-user-select: none; -moz-user-select: none; user-select: none; width: -moz-fit-content; width: fit-content; cursor: pointer; margin: 0.25rem 0; padding-right: 1.25rem; opacity: 90%; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-title:hover { text-decoration: underline; cursor: default; color: #58b1dd; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-item { display: flex; font-size: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-item div { font-size: 1rem; margin: 0 0.25rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-item .tradesStatistics_total { color: #0088cc; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-item .tradesStatistics_win { color: #00b300; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-item .tradesStatistics_average { color: #ffae00; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-item .tradesStatistics_minimum { color: #cc0000; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-item .tradesStatistics_maximum { color: #00b300; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section .statistics-item .tradesStatistics_wr { color: #aea0d5; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades { grid-template-columns: repeat(5, 1fr); gap: 0.75rem; height: -moz-fit-content; height: fit-content; margin: 1rem 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades div { padding: 0; height: -moz-fit-content; height: fit-content; margin: auto 0; font-size: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_title { font-size: 1.129rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_win { color: #00b300; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_loss { color: #cc0000; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_be { color: #ffae00; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_total { color: #0088cc; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_wr { color: #aea0d5; } .main_box .accountBox { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); background-color: rgb(18.525, 24.225, 32.775); border-radius: 0.5rem; padding: 1.25rem; width: 50%; margin: 0 auto; height: -moz-fit-content; height: fit-content; } .main_box .accountBox .accountBox_title { color: rgba(240, 242, 245, 0.5); font-weight: 500; border-bottom: 1px solid rgba(240, 242, 245, 0.4); padding-bottom: 0.5rem; margin-bottom: 1rem; } .main_box .accountBox .accountBox_inputs fieldset { position: relative; height: 2.8rem; border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); margin: 0; margin-bottom: 0.75rem; } .main_box .accountBox .accountBox_inputs fieldset legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; transition: all 200ms ease; } .main_box .accountBox .accountBox_inputs fieldset input { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } .main_box .accountBox .accountBox_inputs fieldset input:focus { opacity: 80%; font-weight: 550; } .main_box .accountBox .accountBox_sendButton { display: flex; justify-content: end; } .main_box .accountBox .accountBox_sendButton button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #00b300; font-size: 0.885rem; border: 1px solid #00e600; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin-top: 0; } .main_box .accountBox .accountBox_sendButton button:hover { background-color: #58cd58; } .main_box .no_account { margin: 0 auto; margin-top: 35vh; display: flex; flex-direction: column; align-items: center; } .main_box .no_account #criteria_not_met { font-size: 1.5rem; opacity: 80%; } .main_box .no_account .connect_account { opacity: 60%; display: flex; } .main_box .no_account .connect_account .create_account { border-bottom: 1px solid white; cursor: pointer; } #background_modal { position: fixed; width: 100%; height: 100%; background-color: rgba(13, 17, 23, 0.1); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 99; display: flex; justify-content: center; align-items: center; } #background_modal #modal_trade_box { box-sizing: border-box; overflow: auto; display: flex; flex-direction: column; width: 30vw; height: 80vh; background-color: #0d1117; border-radius: 1rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); padding: 2rem; -ms-overflow-style: none; scrollbar-width: none; } #background_modal #modal_trade_box::-webkit-scrollbar { display: none; } #background_modal #modal_trade_box .close_buttons { display: flex; justify-content: space-between; margin-bottom: 2rem; } #background_modal #modal_trade_box .close_buttons button { background: none; padding: 0.25rem; border: none; border-bottom: 2px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); cursor: pointer; } #background_modal #modal_trade_box .close_buttons button:hover { border-color: #0088cc; } #background_modal #modal_trade_box fieldset { position: relative; height: 2.8rem; border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); margin: 0; margin-bottom: 0.75rem; } #background_modal #modal_trade_box fieldset legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; transition: all 200ms ease; } #background_modal #modal_trade_box fieldset input { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } #background_modal #modal_trade_box fieldset input:focus { opacity: 80%; font-weight: 550; } #background_modal #modal_trade_box .partial_whole { display: grid; grid-template-columns: 3fr 1fr; gap: 3rem; margin-bottom: 1rem; } #background_modal #modal_trade_box .partial_whole .partials-box fieldset { margin: 0; } #background_modal #modal_trade_box .partial_whole .close_button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: rgb(18.525, 24.225, 32.775); font-size: 0.885rem; border: 1px solid rgb(36.9416666667, 48.3083333333, 65.3583333333); border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); height: -moz-fit-content; height: fit-content; margin: auto 0; padding: 0.35rem 0.75rem; } #background_modal #modal_trade_box .partial_whole .close_button:hover { background-color: rgb(27.7333333333, 36.2666666667, 49.0666666667); } #background_modal #modal_trade_box .checkbox_box { font-size: 0.885rem; display: flex; justify-content: space-between; margin-bottom: 0.75rem; padding: 0.5rem; padding-left: 0; padding-right: 0; /*.box{ [type="checkbox"]{ opacity: 0; } [type="checkbox"] + label{ position: relative; cursor: pointer; padding-left: 1rem; display: inline-block; } [type="checkbox"] + label::before{ content: ""; position: absolute; top: -14px; left: -14px; width: 18px; height: 18px; outline: 2px solid $primary-color; background: lighten($bg, 5%); } [type="checkbox"]:checked + label::before{ content: ""; position: absolute; top: -14px; left: -14px; width: 18px; height: 18px; outline: 2px solid $primary-color; background: lighten($bg, 5%); } [type="checkbox"]:checked + label::after{ content: ""; position: absolute; top: -14px; left: -14px; width: 18px; height: 18px; background-image: url(img/Check.svg); background-size: contain; } }*/ } #background_modal #modal_trade_box .checkbox_box p { margin: 0; } #background_modal #modal_trade_box #save_settings { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: rgb(18.525, 24.225, 32.775); font-size: 0.885rem; border: 1px solid rgb(36.9416666667, 48.3083333333, 65.3583333333); border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); } #background_modal #modal_trade_box #save_settings:hover { background-color: rgb(27.7333333333, 36.2666666667, 49.0666666667); } #background_modal #image_box_modal { display: flex; flex-direction: row-reverse; display: flex; gap: 1.5rem; align-items: center; } #background_modal #image_box_modal #image_modal { max-width: 50vw; max-height: 90vh; border: 2px solid rgb(18.525, 24.225, 32.775); border-radius: 1rem; } #background_modal #image_box_modal button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: rgb(18.525, 24.225, 32.775); font-size: 0.885rem; border: 1px solid rgb(36.9416666667, 48.3083333333, 65.3583333333); border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); display: none; } #background_modal #image_box_modal button:hover { background-color: rgb(27.7333333333, 36.2666666667, 49.0666666667); } #background_modal #image_box_modal #json_trade_main_div { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; min-width: 35vw; overflow: scroll; background-color: #0d1117; padding-top: 0; } @media (max-width: 600px) { #background_modal #image_box_modal #json_trade_main_div { padding: 0.75rem; box-shadow: none; } } #background_modal #image_box_modal #json_trade_main_div p { margin: 0; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header { position: sticky; top: 0; left: 0; background-color: #0d1117; z-index: 99; display: flex; gap: 4rem; padding-top: 1rem; margin: 0 2rem; padding-bottom: 1.25rem; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header p { opacity: 60%; font-weight: 400; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header .imageBox_header1 { margin-top: auto; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header .imageBox_header1 div { font-size: 1.5rem; font-weight: 500; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header .imageBox_header2 div { font-size: 2.058rem; font-weight: 400; color: #00b300; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header .imageBox_header2 .browserModal_lossTrade { color: #dd5858; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header .imageBox_header2 .browserModal_beTrade { color: #ffae00; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header .imageBox_header3 div { font-size: 2.058rem; font-weight: 400; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header .imageBox_header4 p { opacity: 100%; font-size: 2.058rem; font-weight: 400; color: #00b300; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header .imageBox_header4 .browserModal_invalidTrade { color: #dd5858; } #background_modal #image_box_modal #json_trade_main_div .imageBox_details { display: flex; flex-direction: column; margin: 0 2rem; width: 80%; } #background_modal #image_box_modal #json_trade_main_div .imageBox_details > div { position: relative; display: flex; margin: 0.5rem 0; } #background_modal #image_box_modal #json_trade_main_div .imageBox_details > div div { opacity: 60%; font-weight: 400; } #background_modal #image_box_modal #json_trade_main_div .imageBox_details > div p { position: absolute; top: 0; left: 50%; opacity: 80%; word-break: break-all; } #background_modal #image_box_modal #json_trade_main_div .imageBox_details .imageBox_details5 { display: flex; flex-direction: column; } #background_modal #image_box_modal #json_trade_main_div .imageBox_details .imageBox_details5 > p { position: static; opacity: 60%; } #background_modal #image_box_modal #json_trade_main_div .imageBox_details .imageBox_details5 > div { position: relative; opacity: 100%; display: flex; justify-content: space-between; margin: 0.25rem 0; } #background_modal #image_box_modal #json_trade_main_div .imageBox_details .imageBox_details5 > div div { opacity: 60%; font-size: 0.885rem; } #background_modal #dashboardGraph_settings { display: flex; position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; background-color: rgb(18.525, 24.225, 32.775); width: 40vw; height: 80vh; overflow: auto; flex-direction: column; } @media (max-width: 600px) { #background_modal #dashboardGraph_settings { padding: 0.75rem; box-shadow: none; } } #background_modal #dashboardGraph_settings fieldset { position: relative; height: 2.8rem; border-radius: 0.25rem; border: 1px solid rgb(49.8333333333, 65.1666666667, 88.1666666667); margin: 0; margin-bottom: 0.75rem; width: 80%; margin: 0.75rem 1rem; } #background_modal #dashboardGraph_settings fieldset legend { padding: 0 0.5rem; font-size: 0.885rem; opacity: 60%; } #background_modal #dashboardGraph_settings fieldset input { width: 100%; border: none; outline: none; background: none; transform: translateY(-0.5rem); font-size: 0.885rem; opacity: 60%; } #background_modal #dashboardGraph_settings fieldset input:focus { opacity: 80%; font-weight: 550; } #background_modal #dashboardGraph_settings .dashboardGraph_closeButton { display: flex; justify-content: end; } #background_modal #dashboardGraph_settings .dashboardGraph_closeButton #chart_settings_close { cursor: pointer; background-image: url("img/XMark.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: invert(1); background-color: transparent; border: none; width: 1.6rem; height: 1.6rem; margin-bottom: 0.5rem; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList { width: 100%; display: flex; flex-direction: column; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; padding: 0; width: 100%; flex-direction: column; margin-bottom: 0.75rem; box-shadow: none; } @media (max-width: 600px) { #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect { padding: 0.75rem; box-shadow: none; } } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect > div { position: relative; background-color: #0d1117; border-radius: 0.5rem; padding: 0.5rem; font-size: 1rem; font-weight: 550; opacity: 80%; -webkit-user-select: none; -moz-user-select: none; user-select: none; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect > div::after { content: ""; position: absolute; top: 20%; right: 0.5rem; background-image: url(img/ChevronDown.svg); filter: invert(1); height: 1.4rem; width: 1.4rem; transition: all ease-in-out 200ms; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect > div.rotateArrow::after { transform: rotate(180deg); } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect .chartAspect_content > div { display: flex; flex-direction: column; margin: 0.75rem 1rem; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect .chartAspect_content > div section { display: flex; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect .chartAspect_content > div section > div { margin-right: 0.75rem; opacity: 80%; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartAspect .chartAspect_content > div section input { background: none; border: none; cursor: pointer; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs { position: relative; box-sizing: border-box; border: 1px solid rgb(31.4166666667, 41.0833333333, 55.5833333333); border-radius: 0.5rem; padding: 1rem; height: -moz-fit-content; height: fit-content; padding: 0; width: 100%; flex-direction: column; margin-bottom: 0.75rem; box-shadow: none; } @media (max-width: 600px) { #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs { padding: 0.75rem; box-shadow: none; } } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs > div { position: relative; background-color: #0d1117; border-radius: 0.5rem; padding: 0.5rem; font-size: 1rem; font-weight: 550; opacity: 80%; -webkit-user-select: none; -moz-user-select: none; user-select: none; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs > div::after { content: ""; position: absolute; top: 20%; right: 0.5rem; background-image: url(img/ChevronDown.svg); filter: invert(1); height: 1.4rem; width: 1.4rem; transition: all ease-in-out 200ms; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs > div.rotateArrow::after { transform: rotate(180deg); } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs .chartPairs_pairList { display: flex; flex-direction: column; margin: 0.75rem 1rem; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs .chartPairs_pairList .header_chart_pairs_box { opacity: 60%; font-size: 0.885rem; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs .chartPairs_pairList .chart_pairs_select > div { display: flex; justify-content: space-between; margin: 0.5rem 0; padding: 0.5rem 1rem; padding-right: 0.25rem; height: -moz-fit-content; height: fit-content; padding-bottom: 0.25rem; margin: 0; border-bottom: 1px solid rgb(51.2, 61.44, 76.8); } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs .chartPairs_pairList .chart_pairs_select > div button { background: none; width: 1.5rem; height: 1.5rem; border: none; background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs .chartPairs_pairList .chart_pairs_select > div:hover { border-left: 2px solid #0088cc; padding-left: calc(1rem - 2px); } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs .chartPairs_pairList .chart_pairs_select > div:hover button { background-image: url(img/XMark.svg); filter: invert(1); } #background_modal #dashboardGraph_settings .dashboardGraph_settingsList .dashboardGraph_settingsList_chartPairs .chartPairs_pairList .chart_pairs_select > div p { margin: 0; font-size: 0.885rem; } #background_modal #dashboardGraph_settings .saveBox { display: flex; justify-content: flex-end; height: -moz-fit-content; height: fit-content; margin-top: 0.75rem; } #background_modal #dashboardGraph_settings .saveBox button { background-clip: padding-box; margin-top: 1.5rem; padding: 0.25rem 0.75rem; background-color: #0088cc; font-size: 0.885rem; border: 1px solid #00aaff; border-radius: 0.3rem; cursor: pointer; font-weight: 520; transition: all 200ms ease; color: rgba(240, 242, 245, 0.9); margin: 0; } #background_modal #dashboardGraph_settings .saveBox button:hover { background-color: #58b1dd; } @media (max-width: 600px) { .main_box { display: flex; flex-direction: column; gap: 0; padding: 0; } .main_box * { font-size: 12px; } .main_box .sidebar { position: sticky; background-color: rgb(7.475, 9.775, 13.225); min-width: 100%; flex-direction: row; margin: 0; border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; height: -moz-fit-content; height: fit-content; } .main_box .sidebar .sidebarMain .sidebarMain_title { display: none; } .main_box .sidebar .sidebarMain .sidebarContent { flex-direction: row; justify-content: space-around; padding: 0.25rem; height: 5rem; } .main_box .sidebar .sidebarMain .sidebarContent .IDPanel { margin: auto 0; min-width: 0; max-width: 35%; } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout { margin: 0; } .main_box .sidebar .sidebarMain .sidebarContent .buton_logout button { display: flex; } .main_box #contents { margin-top: 1vh; margin-right: 1.5vh; margin-left: 1.5vh; overflow: scroll; padding-bottom: 10rem; } .main_box #contents .dashboardSection { display: flex; flex-direction: column; overflow: scroll; } .main_box #contents .dashboardSection .chartBox { margin: 0; padding: 0; } .main_box #contents .dashboardSection .chartBox .chartSettings { margin-left: 0; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset { width: -moz-fit-content; width: fit-content; } .main_box #contents .dashboardSection .chartBox .chartSettings fieldset legend { text-wrap: nowrap; } .main_box #contents .dashboardSection .chartBox .chartSettings .chart_settings_box { margin-right: 0; } .main_box #contents .dashboardSection .sendTrade { margin-left: 0; border: none; background: none; padding: 0; } .main_box #contents .dashboardSection #trades_information_box { margin-right: 0; border: none; background: none; padding: 0; } .main_box #contents .settings #settings_box { flex-direction: column; width: 90%; margin: 0 auto; padding: 0; } .main_box #contents .settings #settings_box .tradeDetails fieldset { width: 100%; margin-left: 0; } .main_box #contents .settings #settings_box .tradeDetails .save_box { justify-content: flex-end; } .main_box #contents .settings #settings_box .statisticsSettings .vaultPath fieldset { width: 100%; } .main_box #contents .settings #settings_box .statisticsSettings .statisticsDetails .statisticsDetails_section { width: 100%; } .main_box #contents .settings #settings_box .statisticsLibrary { align-self: center; width: 80%; margin-top: 0; } .main_box #contents .statisticsMain .contents_box { width: 100%; padding: 0; margin: 0 auto; } .main_box #contents .statisticsMain .contents_box #contents_statistics { width: 90%; margin: 0 auto; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile { flex-direction: column; padding: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs { max-width: 100%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .leftSection fieldset { margin-left: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .rightSection fieldset { width: 100%; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .rightSection fieldset input { font-size: 0.786rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .rightSection .statisticsInputs_tradeDetails .tradeDetail_container div { white-space: normal; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs section { gap: 1rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .tradeContext { margin-left: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .statisticsInputs .numStatistics_file .generalDropdown { margin-left: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics .statisticsFile .form_boxes { width: 100%; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics { margin-top: 1.5rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild { display: flex !important; flex-direction: column; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-title { font-size: 1.129rem; font-weight: 500; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades { gap: 0.75rem; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades > div { margin: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_title { grid-row: 1; grid-column: 1/2; width: -moz-fit-content; width: fit-content; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_win { grid-row: 2; grid-column: 1/3; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_loss { grid-row: 2; grid-column: 3/5; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_be { grid-row: 3; grid-column: 1/3; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statisticsTrades .tradesStatistics_total { grid-row: 3; grid-column: 3/5; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section::before { left: -2px; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-section::after { left: 0; } .main_box #contents .statisticsMain .contents_box #contents_statistics #text_statistics #text_statistics_secondchild > div .statistics-item { font-size: 0.786rem !important; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure { width: 100%; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure .vaultHeader { display: grid !important; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0.75rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure .vaultHeader .folder { grid-column: 1/4; grid-row: 1; width: -moz-fit-content; width: fit-content; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure .vaultHeader .vaultHeader_rename { align-self: center; grid-column: 3/7; grid-row: 2/4; margin-left: 2rem; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure .vaultHeader .vaultHeader_buttons { display: flex; flex-direction: column; width: 80%; gap: 0.5rem; grid-column: 1/4; grid-row: 2/4; } .main_box #contents .statisticsMain .contents_box #contents_statistics #folder-structure .vault_buttons_subfolder { left: -9rem !important; } #background_modal #dashboardGraph_settings { width: 90%; height: -moz-fit-content; height: fit-content; margin: auto 0; background-color: #0d1117; padding: 0.75rem; } #background_modal #image_box_modal { flex-direction: column-reverse; } #background_modal #image_box_modal #image_modal { max-width: 90%; } #background_modal #image_box_modal #json_trade_main_div { background: #0d1117; padding: 0.75rem; padding-top: 0; min-width: 90vw; max-width: 90vw; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header { margin: 0; gap: 0; justify-content: space-around; } #background_modal #image_box_modal #json_trade_main_div .imageBox_header div { font-size: 1.272rem !important; } } @media (max-width: 1400px) { .statisticsFile { flex-direction: column !important; } .statisticsFile .statisticsInputs { max-width: 100% !important; } .statisticsFile .form_boxes { width: 100% !important; } #folder-structure { width: 100% !important; } } #error_paragraph { z-index: 100; display: flex; align-self: center; margin-top: 0.5rem; margin-right: 1.5vh; position: fixed; display: none; width: -moz-fit-content; width: fit-content; } #error_paragraph p { display: inline-block; background-color: rgb(18.525, 24.225, 32.775); padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(0, 136, 204, 0.6); margin: 0.5rem auto; font-size: 0.885rem; } #ticket_input { width: 100px; } #no_data { display: flex; justify-content: center; margin: 3rem 0; } #no_data p { font-size: 1.272rem; font-weight: 500; margin: 0; } .js-fill { fill: url(#lsfillgradient) !important; } @media only screen and (max-width: 900px) { #error_paragraph p { font-size: 12px; } }/*# sourceMappingURL=css.css.map */