/* TradingPlan */

:root {
    --header-height: 2.55rem;
    --menu-width: 68px;
    --menu-expand: 17rem;
    --body-font: 'Helvetica Neue', sans-serif;
    --normal-font-size: 0.875rem; /* 1rem */
    --z-fixed: 100;

    --white-color: #F7F6FB;
    --first-color: #474747;
    --first-color-light: #AFA5D9;

    --tp-dark-color: #474747; /* background dark color */
    --tp-dark-color-accent: #2b3035 ;  /* #6c757d #474747af #AFA5D9; #2c3034 */
    --tp-light-color: #F7F7F7; /* white color */
    --tp-light-color-accent: #e9ecef ; /* e9e9e9 #e9ecef #f0f0f0 */

    --tp-info: #0dcaf0; /* default #0085FF */
    --tp-info-hover: #31d2f2; /* lighter #329DFF */ 
    --tp-info-active: #0a58ca; /* darker #1172CC */

    --tp-orange: #ffa500;
    --tp-orange-hover: #ffbc42;
    --tp-orange-active: #f9a100;
    --tp-orange-light: #fff3cd;

    --bs-btn-active-border-color: var(--bs-info);
    --bs-tertiary-bg: var(--tp-accent-bg);
    --bs-border-color: var(--tp-border);
}

[data-bs-theme="light"] {

    --tp-primary-bg: var(--tp-light-color);
    --tp-accent-bg: var(--tp-light-color-accent);
    --tp-light-bg: white;

    --tp-bold: #1C1C1C; /* color-10 used mainly for titles and bold text */
    --tp-body: #585757; /* color-20 used primarily for body text */
    --tp-small: #969696; /* color-30 widely used for small text and to fill icons */
    --tp-border: #D3D3D3;/* #dee2e6 #E8E8E8 color-40 used for small details such as borders, dividers and line colors */ 

    --bs-body-color: #212529;
    --bs-body-bg: var(--white-color);
    --bs-link-color: var(--first-color);
}

[data-bs-theme="dark"] {

    --tp-primary-bg: var(--tp-dark-color);
    --tp-accent-bg: var(--tp-dark-color-accent);
    --tp-light-bg: #585757;

    --tp-bold: #FFFFFFE6;   /* 90% */
    --tp-body: #dee2e6;   /* 70% FFFFFF4D */
    --tp-small: #FFFFFF99;  /* 40% */
    --tp-border: #ffffff3f; /* 10% */

    --tp-orange-light: #6b4500; /* #8e5c00 */

    --bs-body-color: #dee2e6; /* sama mis (light) --bs-gray-300, --bs-border-color */
    --bs-body-bg: var(--first-color);

    --bs-alert-color: var(--white-color);
    --bs-danger-bg-subtle: var(--first-color); /* #f8d7da; */
    --bs-danger-border-subtle: #f8d7da;
    --bs-success-bg-subtle: var:(--first-color); /* #ced4da; var(--bs-dark-bg-subtle); --first-color */
    --bs-success-border-subtle: #d1e7dd;
    --bs-warning-text-emphasis: var(--white-color);
    --bs-link-color: var(--white-color);
    --bs-border-color: var(--first-color-light);
}

/* pagination */
.page-link.active, .active > .page-link {
  z-index: 2;
  color: var(--bs-body-color);
  background-color: var(--tp-accent-bg);
  border-color: var(--bs-border-color);
}
.page-link.disabled, .disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  background-color: var(--tp-primary-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

body { font-family: var(--body-font); font-size: var(--normal-font-size); transition: .5s; } /* background-color: var(--tp-primary-bg); */
a { text-decoration: none; }
td, th { color: var(--tp-body)!important; }

.bx-cube { color: var(--tp-orange); }
.bx-cube:hover { color: var(--tp-orange-hover); }

.form-label { margin-bottom: 0.2rem; }

.header { position: sticky; top: 0px; background-color: var(--bs-body-bg); padding: 0.75rem .5rem .5rem; z-index: var(--z-fixed); transition: .5s; } 
.navbar-brand { font-size: 1.25rem; font-weight: 500; }
.nav_icon{font-size: 1.25rem}
.nav_logo, .nav_link{display: grid;grid-template-columns: max-content max-content;align-items: center;column-gap: 1rem;padding: 0 0 .5rem 1.5rem; }
.nav_logo{margin-bottom: 2rem}
.nav_logo-icon{font-size: 1.25rem;color: var(--white-color)}
.nav_logo-name{color: var(--white-color);font-weight: 500;font-size:1.15rem;}
.nav_link{position: relative;color: var(--tp-small);margin-bottom: 1rem; transition: .3s} /* --tp-light-color-accent --first-color-light */
.nav_link:hover{color: var(--tp-light-color)} /*   --white-color */
.active{color: var(--tp-light-color)} /* --white-color */

.bottom_menu { background-color: var(--first-color); }
.navbar { height: var(--header-height); }
.navbar .active::before{content: '';position: absolute; right:50%; left: 18px; bottom: 0; width: 32px;height: 2px;background-color: var(--white-color)}
.brand-off {transition: opacity 0.25s; opacity: 0; }

.sidemenu { background-color: var(--first-color); width: var(--menu-width); height: 100vh; padding: 0 1rem 0 0; position: sticky; top: 0px; transition: .5s; } /* flex-basis: 60px; */
.sidenav{ height: 100%;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden; padding-top: 1rem; }
.sidenav .active::before{content: '';position: absolute;left: 0;width: 2px;height: 32px;background-color: var(--white-color)}

.main-body { margin-top: .5rem; margin-bottom: .5rem;}
.main-container { padding: 0 0.5rem; }

input.menuCb { display: none; }
input.menuCb:checked ~ .sidemenu { width: var(--menu-expand); transition: .5s; } /* flex-basis: 250px; */
input.menuCb:checked ~ * .hide-on-menu-extend { display: none; } 

#btn-date-collapse:checked ~ .hide-on-menu-extend { display: none; }
#btn-date-collapse:checked ~ * label[for="btn-date-collapse"] {   
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
 }

.hide-on-menu-extend { animation-delay: .5s; } /* TODO veel ei toimi, et tagsi ilmuks hiljem, kui menüü transition juba lõppenud  */

.date-select { width: 17.75rem; } /*  16rem */

.a-link:hover { text-decoration: underline; }
.a-circle { border-radius: 100%; display:inline-block; line-height:30px; width: 36px; padding: 6px 3px 0 0; background: var(--bs-info); color: var(--white-color); text-align:center; vertical-align: middle;}
.a-circle:hover {background: var(--bs-info); opacity:0.75; }

#link_a { color: var(--bs-body-color); text-decoration: underline; }

.btn-info { color: var(--white-color); }
.btn-info:focus { color: var(--white-color); }
.btn-info:hover { color: var(--white-color); }
.btn-info:active { color: var(--white-color)!important; }
.btn-info:disabled { color:var(--tp-body); background-color: var(--tp-accent-bg); border: var(--bs-border-width) solid var(--tp-border); opacity: 1; }

.btn-outline-info { background: var(--tp-primary-bg) }
.btn-outline-info:hover { color: var(--white-color); }
.btn-outline-info:active { color: var(--white-color)!important; }

.btn-warning { color: var(--white-color); background-color: var(--tp-orange)!important; } /* background-color: var(--tp-orange); */
.btn-warning:focus { color: var(--white-color); }
.btn-warning:hover { color: var(--white-color); background-color: var(--tp-orange-hover)!important; }
.btn-warning:active { color: var(--white-color)!important; background-color: var(--tp-orange-active)!important; }

.btn-login { color: var(--white-color);font-weight: 500; }
.btn-sign-up { width:5rem; --bs-btn-hover-color: var(--white-color); --bs-btn-hover-bg: var(--bs-info); }
.btn-circle {width:36px; height:36px; max-width:36px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 18px;}
.btn-circle-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height: 1.4; border-radius: 25px; }
.btn-outline-info.btn-circle-lg { border: 1px solid #0dcaf0; }
.btn-info.btn-circle-lg { border: 1px solid var(--white-color); }
.btn-circle.btn-xl {width: 70px;height: 70px;padding: 10px 16px;font-size: 24px;line-height: 1.33; border-radius: 35px;}
.btn-circle_ span {margin: 0 -2rem;}
.btn-circle-lg_ span { background-color: red;}
.no_arrow::after {content: none;}

.btn-rounded-sm { border-radius: 18px; color:var(--tp-body); background-color: var(--tp-accent-bg); }

.btn-plus { width: 32px; line-height: 0.8rem;  margin-top: -0.35rem; margin-bottom: -0.2rem; margin-right: -0.2rem;}
.btn-plus-text { padding-top: -6px; vertical-align: text-top;}

.submenu-content { z-index: 1; top: -0.5rem; margin-top: 0; right: 100%; left: auto; margin-right: var(--bs-dropdown-spacer); }
.submenu:hover .submenu-content { display: inline-block; }

.lang-btn { margin-right: 0.25rem; margin-left: 0.25rem; min-width: 4rem; }
.lang-item-w { display: inline-block; width: 103px; }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-dropdown-link-hover-bg); --bs-dropdown-link-active-color: var(--text-body); max-width: 90px;} 
/* ;--bs-dropdown-link-hover-bg: var(--bs-btn-hover-bg); --bs-dropdown-link-active-color: var(--text-body)  dark: --bs-dropdown-link-hover-bg*/
.dropdown-item {font-size: .875rem; }
.menu-icon { vertical-align: text-top; font-size: 1rem; }

.fix-bottom { margin-bottom: 1rem; }
.fix-left { margin-left: 5rem; }
._plus-left { margin-left: var(--menu-expand); transition: .5s; }

#editTable_ { display: none; }
#editForm { margin-right: 1.75rem; }
input_ { box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25); box-shadow: none !important; }
#editFormCb { display: none; }
#lockFormCb { display: none; }

#plusSubmit { display: none; }
#changedCb { display: none; }
input#changedCb:not(:checked) ~ .editButton { display: none; }
input#changedCb:checked ~ #plusCircle { display: none; }
input#changedCb:checked ~ #flagButton { display: none; }

/* make autocomplete input with tight corners when in input group */
.input-group .dropdown .form-control {border-top-left-radius: 0; border-bottom-left-radius: 0; }
.autocomplete-items { max-height: 20rem; overflow-y: scroll; }

.alert {
    --bs-alert-padding-x: .75rem;
    --bs-alert-padding-y: .25rem;
    font-size: 0.875em;
}

input::placeholder, textarea::placeholder {
    font-style: italic;
/*  font-weight: lighter; */
/*  opacity: 0.5; color: red; */
}
::-ms-input-placeholder { /* Edge 12 -18 */
    font-weight: lighter;
}

.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-25 { width: 25% !important; }
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-70 { width: 70% !important; }

/* direction (side: long/short button */
input.side { display: none; }
label.short { display: none; }
input.side:checked ~ .long { display: none; }
input.side:checked ~ .short { display: inline-block; }

/* selectTable  */
#selectTable tr { cursor: pointer; }
#selectTable_ tr:hover td { background: var(--bs-info); }
#selectTable th { font-weight: normal; color:var(--tp-body); background-color: var(--tp-accent-bg); }
#selectTable tfoot { border-bottom-style: hidden; }

#stockTable th { font-weight: normal; color:var(--tp-body); background-color: var(--tp-accent-bg); }
#stockTable tfoot { border-bottom-style: hidden; }
.stockTable th { font-weight: normal; color:var(--tp-body); background-color: var(--tp-accent-bg); }
.stockTable tfoot { border-bottom-style: hidden; }

#reportTable th { font-weight: normal; color:var(--tp-body); background-color: var(--tp-accent-bg); }
.selectFile { max-width:20%!important; }
.selectImage { max-width:25%!important; }

.table-divider {
  border-top: calc(var(--bs-border-width) * 2) solid lightgray;
}
.table-divider-bottom {
  border-bottom: calc(var(--bs-border-width) * 2) solid lightgray;
}

tr.defaultAccount td { background-color: #0dcaf0cc; } /* var(--tp-info) #0dcaf0cc var(--tp-orange-light)   --tp-accent-bg */
#selectTable tr.defaultAccount:hover td { background-color: #31d2f295; }
tr.rowAccent td { background-color: var(--tp-orange-light); } /*    --tp-accent-bg */

/* Edit Checkbox #5c636a */
label.edit { display: inline-block; }
label.edit-off { display: none; }
input.edit:checked ~ .edit { display: none; }
input.edit:checked ~ .edit-off { display: inline-block; }
input.edit ~ .edit:hover { background-color: var(--bs-btn-hover-bg); } /* õige: #5c636a;  vana:#88979c; */ 
input.edit:checked ~ .edit-off:hover { background-color: var(--bs-btn-hover-bg); }

button.focus { background-color: red; }

/*====== Login page =======*/
.input-icons{position: relative;}
.font-sm {font-size: 0.875rem;}
#loginForm input {font-size: 0.875rem;}
#searchInput { border-color: #6c757d;}
#searchInput:focus { background-color: var(--tp-orange-light); }
#tagsInput { border-color: #6c757d;}
#tagsInput:focus { background-color: var(--tp-orange-light); }
.searchInput { border-color: #6c757d;}
.searchInput:focus { background-color: var(--tp-orange-light); border-color: #6c757d; }

#uploadFile { border-color: var(--tp-border);} /*   #6c757d */

textarea:focus {background-color: var(--tp-orange-light)!important;} /* ei toimeta ? */

.eye-icon { font-size: 18px; color: #8b8b8b; cursor: pointer; padding: 7px; right: 10px; background-color: var(--tp-primary-bg); }
.eye-icon:hover { background-color: var(--tp-border); } /* #8b8b8b31 */

.lock-icon_ { font-size: 17px; margin-top: 0.15rem; margin-left: 0.18rem; display: none; } /*   */
#tradeStatusView { text-transform: uppercase; font-size: 12px; padding: 4px; margin-top: 0.3rem; margin-left: 0.18rem; height: 1.5rem; background-color: var(--tp-orange-light); display:none; }
#tradeLockView { display: none; }
#tradeStatusLock { display: none; }

.calendar { background-color: var(--bs-body-bg); border-color: var(--tp-border); cursor: pointer; }

/* form-row design */
.form-row { font-size: 0.875rem; margin-left: 1.25rem; margin-top: 0.25rem; padding: 0; }
.form-row > input[type="text"]:disabled { opacity: 1; }
.form-row > input[type="text"] { padding: 0.2rem; color: var(--tp-body); background-color: var(--bs-body-bg); border: var(--bs-border-width) solid var(--tp-border); border-radius: var(--bs-border-radius-sm); } /*  */
.form-row > input[type="text"]:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
.form-row > input[type="text"]:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.form-row-header > input[type="text"] { color:var(--tp-body); background-color: var(--tp-accent-bg); } /*  --bs-tertiary-bg */
.form-row > input[type="text"]:not([disabled]), .form-row * input[type="text"]:not([disabled]) { background-color: var(--tp-light-bg); border-color: var(--tp-border); } /*     --bs-border-color */
.form-row > input[type="text"]:focus, .form-row * input[type="text"]:focus { border: var(--bs-border-width) solid var(--bs-info) !important; background-color: var(--tp-orange-light); outline: 0; box-shadow: none; z-index: 5; }
.form-row > input[type="text"]:focus:not(:last-child) { padding-right: 2px!important; padding-left: 2px!important;/* to compensate padding 0.2rem(3px) and border 0 to border 1px */ }
.form-row > .btn-inline { border: var(--bs-border-width) solid var(--tp-border); border-left: 0; color: var(--tp-body);  }

.form-round-right-0 { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; }
.form-round-left-0 { border-top-left-radius: 0!important; border-bottom-left-radius: 0!important; }

.rounded-top-left { border-top-left-radius: var(--bs-border-radius-sm)!important; }
.rounded-top-right { border-top-right-radius: var(--bs-border-radius-sm)!important; }
.rounded-bottom-left { border-bottom-left-radius: var(--bs-border-radius-sm)!important; }
.rounded-bottom-right { border-bottom-right-radius: var(--bs-border-radius-sm)!important; }

.rounded-left { border-top-left-radius: var(--bs-border-radius-sm)!important; border-bottom-left-radius: var(--bs-border-radius-sm)!important; }
.rounded-right { border-top-right-radius: var(--bs-border-radius-sm)!important; border-bottom-right-radius: var(--bs-border-radius-sm)!important; }

.stock-row { font-size: 0.875rem; margin-left: 1.25rem; padding-left: 0; padding-right:0rem; 
    border: 1px solid lightgray; border-radius: 0.25rem; }
.stock-row > input[type="text"] { padding: 0.2rem; box-shadow: none !important; 
    border-radius: 0px; background: none; border: none;}
.table-header > input[type="text"] { background-color: var(--bs-tertiary-bg); }

.div-label {color:#585757; width:1.75rem; height: 1.75rem; padding-top: 0.15rem; margin: auto; cursor: pointer; }
.split-label-hr { margin-top: -0.7rem; margin-left: -.5rem; margin-bottom: -0.75rem; padding-left: 5px; height: 18px; width:18px; font-size: 0.75rem; cursor: pointer;}
.split-label { margin-top: 0.125rem; padding-left: 5px; height: 18px; width:18px; font-size: 0.75rem; cursor: pointer; }
.f-sm { font-size: 0.875rem; }

.back-esc {
  font-size: 0.75rem; padding-right: 0.25rem;
}
.bxs-left-arrow-circle-back:before {
  font-size: 1rem;
  content: "\ee06";
  vertical-align: middle;
}

.editable_ { background-color: var(--tp-light-bg)!important; } /* background-color: white!important; outline: -1px solid lightgray!important; */
.editable_:focus { outline-color: #86b7fe!important; background-color: yellow!important; z-index: 5;}

.find-date { min-width: 7.75rem; width: 7.75rem; }
.typeSelect { width: 6rem; }

.stock-symbol { width: 12%; }
.stock-date { min-width: 5rem; width: 15%; }
.stock-price { width: 11%; } 
.stock-total-day { width: 14%; }
.stock-price-day { width: 12%; }
.stock-price-pct { width: 12%; }
.stock-price-pct-day { width: 12%; }
.stock-profit { width: 12%; }

.cash-date { min-width: 5rem; width: 15%; }
.cash-cur { width: 15%; }
.cash-note { width: 50%; }
.cash-note-short { width: 0%; }
.cash-profit { width: 10%; }
.cash-fee { width: 10%; }
.cash-total { width: 15%; }

.ideas-symbol { width: 12%; }
.ideas-date { min-width: 5rem; width: 15%; }
.ideas-strategy { width: 20%; }
/*
.ideas-price
.ideas-type
.ideas-note
.ideas-total
.ideas-profit
.ideas-profit-pct
.ideas-ratio
.ideas-mrkt-pct
.ideas-plus
*/

.plans-date { min-width: 5rem; width: 15%; }
.plans-symbol { width: 12%; }
/*
.plans-price
.plans-total
.plans-profit
.plans-profit-pct
.plans-ratio
.plans-mrkt-pct
*/

.plan-symbol-flag { width: 12%; }
.plan-flag-btn { width: 6%; }
.plan-symbol { width: 18%; }
.plan-name { width: 24%; }
.plan-exchange { width: 16%; }
.plan-price { width: 12%; }
.plan-currency { width: 10%; }
.plan-group { width: 20%; }

.plan-sector { width: 18%; }
.plan-industry { width: 24%; }
.plan-index { width: 16%; }
.plan-fv { width: 12%; }
.plan-fv-pct { width: 10%; }
.plan-dividend { width: 10%; }
.plan-dividend-pct { width: 10%; }

.plan-date { width: 13%; }
.plan-note { width: 65%; }
.plan-date-price { width: 12%; }
.plan-note-btn { width: 10%; }

input[name="note_id"][value=""] ~* .plan-note { width: 75%; } 
input[name="note_id"][value=""] ~* .plan-note-btn { display: none; }

.plan-side { width: 16%; }
.plan-atr14 { width: 16%; }
.plan-volume { width: 18%; }
.plan-total { width: 18%; }
.plan-risk-max { width: 16%; }
.plan-ratio { width: 16%; }

.plan-stop { width: 16%; }
.plan-atr15 { width: 16%; }
.plan-max { width: 18%; }
.plan-shares { width: 18%; }
.plan-risk { width: 16%; }
.plan-risk_pct { width: 16%; }

.plan-target { width: 16%; }
.plan-10_pct { width: 16%; }
.plan-20_pct { width: 18%; }
.plan-30_pct { width: 18%; }
.plan-profit { width: 16%; }
.plan-profit_pct { width: 16%; }

.plan-strategy { width: 50%; }
.plan-tags { width: 50%; }

.trade-symbol { width: 13%; }
.trade-name { width: 27%; }
.trade-shares-sum { width: 12%; }
.trade-price-avg { width: 12%; }
.trade-price-sum { width: 16%; }
.trade-cur { width: 10%; }
.trade-side { width: 10%; }

.trade-plan-stop { width: 12%; }
.trade-risk-pct { width: 16%; } /* width: 10%; */
.trade-target-price { width: 12%; }
.trade-target-pct { width: 12%; }
.trade-price { width: 12%; }
.trade-profit { width: 16%; }
.trade-profit-pct { width: 10%; }
.trade-day-pct { width: 10%; }
  
.trade-date { width: 20%; }
.trade-time { width: 10%; padding-left: 0; padding-right: 0; }
.trade-bs { width: 10%; }
.trade-shares { width: 12%; } 
.trade-row-price { width: 12%; }
.trade-total { width: 16%; }
.trade-fee { width: 10%; }
.trade-row { width: 10%; }

.stop-date-from { width: 20%; }
.stop-date-to { width: 20%; }
.stop-shares { width: 12%; }
.stop-price { width: 12%; }
.stop-total { width: 16%; }
.stop-pct { width: 10%; }
.stop-row { width: 10%; }

.trade-open-shares { width: 20%; }
.trade-target-profit { width: 20%; }
.trade-stop-shares { width: 24%; }
.trade-filler_ { width: 12%; }
.trade-stop-sum { width: 16%; }
.trade-open-risk { width: 20%; }

.trade-date-open { width: 20%; }
.trade-date-close { width: 20%; }
.trade-exit-reason { width: 60%; }

.notes-symbol { width: 20%; }
.notes-name { width: 40%; }
.notes-name-2 { width: 53%; }
.notes-exchange { width: 12%; }
.notes-stock-price { width: 13%; }
.notes-currency { width: 15%; }
.notes-open-plan { width: 30%; min-width: 5.5rem; }
.notes-open-review { width: 30%; min-width: 7.5rem; }

.notes-date { width: 18%; }
.notes-status { display:none; }
.notes-note { width: 57%; }
.notes-price { width: 10%; }
.notes-ch { width: 20%; }

.notes-edit-date { width: 20%; }
.notes-edit-tags { width: 50%; }
.notes-edit-tags-2 { width: 65%; }
.notes-edit-price { width: 15%; }
.notes-edit-ch { width: 15%; }
.notes-edit-note { width: 100%; }

.notes-edit-created { width: 30%; }
.notes-edit-timezone { width: 40%; }
/*
.change-symbol
.change-div-profit
.change-profit-pct
.change-real-profit
.change-pos-pct
.change-pos-profit
.change-total-pct
.change-total-profit
*/
.gen-date { min-width: 5rem; width: 15%; }

.rev-date { width: 15%; }
.rev-shares { width: 10%; }
.rev-price { width: 12%; }
.rev-total { width: 16%; }
.rev-div { width: 10%; }
.rev-fee { width: 10%; }
.rev-profit { width: 15%; }
.rev-roi { width: 12%; }
.rev-tags { width: 50%; }

.strategies-name { width: 30%; }

.billing-date-actual { width: 20%; }
.billing-plan-actual { width: 20%; }
.billing-to-actual { width: 22%; }
.billing-date { width: 20%; }
.billing-plan { width: 20%; }
.billing-to { width: 22%; }
.billing-price { width: 18%; }
.billing-invoice { width: 20%; }
.billing-card { width: 20%; }

.price-date { width: 25%; }
.price-symbol { width: 20%; }
.price-mic { width: 15%; }
.price-close { width: 20%; }
.price-currency { width: 20%; }

  /*====== xs < Small sm =======*/  
  @media screen and (max-width: 576px){  /* ORIG: 768px, accounter PORTRAIT: max-width: 664px */
    .xs-off { display: none; }
    h5 { font-size: 1.2rem; }
    .trade-status { font-size: 11px;}
    .date-select_ { width: 17.75rem; }
    .selectFile { max-width: 50% !important; }
    .selectImage { max-width: 100% !important; border-top-right-radius: var(--bs-border-radius-sm)!important; border-bottom-right-radius: var(--bs-border-radius-sm)!important; }
    .import { width: 50% !important; }

    .alert {
      --bs-alert-padding-x: .75rem;
      --bs-alert-padding-y: .35rem;
      font-size: 0.875em;
    }

    .sidemenu { width: 0!important; padding: 0;}
    .fix-bottom { margin-bottom: 3rem; }
    .fix-left { margin-left: 1rem; }

    .stock-symbol { width: 18%; }
    .stock-shares { width: 14%; } /* todo delete */
    .stock-price { display: none; }
    .stock-total-day { width: 24%; }
    .stock-price-day { display: none; }
    .stock-price-pct { width: 22%; }
    .stock-price-pct-day { display: none; }
    .stock-profit { width: 22%; }

    .cash-date { min-width: 5rem; width: 15%; }
    .cash-cur { width: 15%; }
    .cash-note { width: 0%; }
    .cash-note-short { width: 50%; }
    .cash-fee { display: none; } /* width 10 */
    .cash-profit { width: 15%; }
    .cash-total { width: 20%; }
    
    .ideas-symbol { width: 12%; }
    .ideas-strategy { display: none; }
    .ideas-date  { display: none; }
    .ideas-price { display: none; }
    /*
    .ideas-note
    .ideas-total
    .ideas-profit
    .ideas-profit-pct
    .ideas-ratio
    .ideas-mrkt-pct
    .ideas-plus
    */

    .plans-price { display: none; }
    .plans-strategy { display: none; }

    .plan-symbol-flag { width: 15%; }
    .plan-flag-btn { width: 8%; }
    .plan-symbol { width: 23%; }
    .plan-name { width: 40%; }
    .plan-exchange { display:none; } /* width: 16%; */
    .plan-price { width: 21%; }
    .plan-currency { width: 16%; }
    .plan-group { display:none; } /* width: 24%; */
    
    .plan-sector { width: 23%; }
    .plan-industry { width: 40%; }
    .plan-index { display:none; } /* width: 16%; */
    .plan-fv { width: 21%; }
    .plan-fv-pct { display:none; } /* width: 12%; */
    .plan-dividend { width: 16%; }
    .plan-dividend-pct { display:none; } /* width: 12%; */

    .plan-side { width: 21%; }
    .plan-atr14 { width: 21%; }
    .plan-volume { display: none; } /* width: 18%; */
    .plan-total { width: 21%; }
    .plan-risk-max { width: 21%; }
    .plan-ratio { width: 16%; }

    .plan-stop { width: 21%; }
    .plan-atr15 { width: 21%; }
    .plan-max { display:none; } /* width: 18%; */
    .plan-shares { width: 21%; }
    .plan-risk { width: 21%; }
    .plan-risk_pct { width: 16%; } /* width: 16%; */

    .plan-target { width: 21%; }
    .plan-10_pct { width: 21%; }
    .plan-20_pct { display: none; } /* width: 18%; */
    .plan-30_pct { width: 21%; }
    .plan-profit { width: 21%; }
    .plan-profit_pct { width: 16%; }

    .trade-symbol { width: 26%; }
    .trade-name { display: none;  } /* width: 27%; */
    .trade-shares-sum { width: 14%; }
    .trade-price-avg { width: 20%; }
    .trade-price-sum { width: 25%; }
    .trade-cur { display:none; } /* widht: 10% */
    .trade-side { width: 15%; }

    .trade-plan-stop { width: 20%; }
    .trade-risk-pct { width: 15%; }
    .trade-target-price { display:none; }
    .trade-target-pct { display:none; }
    .trade-price { width: 25%; }
    .trade-profit { width: 25%; }
    .trade-profit-pct { width: 15%; }
    .trade-day-pct { display:none; } /* width: 10%; */
      
    .trade-date { width: 34%; }
    .trade-time { display:none; } /* width: 10%; */
    .trade-bs { width: 12%; }
    .trade-shares { width: 14%; } 
    .trade-row-price { width: 20%; }
    .trade-total { display: none; } /* width: 16%; */
    .trade-fee { width: 10%; }
    .trade-row { width: 10%; }
    
    .stop-date-from { width: 34%; }
    .stop-date-to { display: none; }
    .stop-shares { width: 17%; } /* width: 17%; */
    .stop-price { width: 18%; }
    .stop-total { width: 21%;  }
    .stop-pct { display: none; }
    .stop-row { width: 10%; }

    .trade-filler_ { display: none; }
    .trade-target-profit { width: 34%; }
    .trade-stop-shares { display: none; } /* width: 12%; */
    .trade-open-shares { display: none; } /* width: 17%; */
    .trade-stop-sum { width: 35%; }
    .trade-open-risk { width: 31%; }

    .trade-date-open { width: 25%; }
    .trade-date-close { width: 25%;  } /* width: 25%; */
    .trade-exit-reason { width: 50%; }

    .notes-symbol { width: 28%; }
    .notes-name { width: 42%; }
    .notes-name-2 { width: 57%; }
    .notes-exchange { display: none; }
    .notes-stock-price { width: 15%; }
    .notes-currency { width: 15%; }

    .notes-date { width: 22%; }
    .notes-status { display:none; }
    .notes-note { width: 78%; }
    .notes-price { display: none; } /* width: 15%; */
    .notes-ch { display: none; }
  
    .notes-edit-date { width: 34%; }
    .notes-edit-tags { width: 36%; }
    .notes-edit-tags-2 { width: 51%; }
    .notes-edit-price { width: 15%; }
    .notes-edit-ch { width: 15%; }
    .notes-edit-note { width: 100%; }    
/*
    .change-symbol
    .change-div-profit
    .change-real-profit
    .change-pos-profit
    .change-total-pct
    .change-total-profit
*/
    .change-profit-pct { display: none; }
    .change-pos-pct { display: none; }

    .gen-txn { display: none; }

    .rev-date { width: 22%; } /* min-width: 5rem; width: 22%; */
    .rev-shares { display: none; }
    .rev-price { display: none; }
    .rev-total { width: 18%; }
    .rev-div { width: 15%; } /* 12 */
    .rev-fee { width: 15%; } /* 12 */
    .rev-profit { width: 15%; }
    .rev-roi { width: 15%; }

    .billing-date-actual { display: none; } /* 20 */
    .billing-plan-actual { width: 25%; 
      border-top-left-radius: var(--bs-border-radius-sm)!important; border-bottom-left-radius: var(--bs-border-radius-sm)!important; 
      border-left: var(--bs-border-width) solid var(--tp-border)!important; }
    .billing-to-actual { width: 28%; }
    .billing-date { width: 25%; }
    .billing-plan { width: 28%; }
    .billing-to { display: none; } /* 22 */
    .billing-price { width: 22%; }
    .billing-invoice { width: 25%; }
    .billing-card { width: 25%; padding: 0.2rem!important; }

    .price-date { width: 25%; }
    .price-symbol { width: 25%; }
    .price-mic { display: none; }
    .price-close { width: 25%; }
    .price-currency { width: 25%; }
  }
  /*====== > Small sm =======*/
  @media screen and (min-width: 576px) { /* ORIG: 768px, accounter LANDSCAPE: min-width: 665px */
    :root{ --normal-font-size: 1rem; }
  }

  @media screen and (max-width: 664px){  /* ORIG: 768px, accounter PORTRAIT: max-width: 664px, sm-off */
    .xm-off { display: none; }
    .plan-date { display: none; }
    .plan-date-price { display: none; }
    .plan-note { width: 90%; }
    .plan-note-row { width: 90%; }
    .plan-note-btn { width: 10%; }
    input[name="note_id"][value=""] ~* .plan-note { width: 100%; }
    input[name="note_id"][value=""] ~* .plan-note-btn { display: none; }
  }
  /*====== sm < Medium md =======*/  
  @media screen and (max-width: 768px){  /* ORIG: 768px, accounter PORTRAIT: max-width: 664px, sm-off */    
    .sm-off { display: none; }
    .ideas-type { display: none; }
  }
  /*====== md < Large lg =======*/  
  @media screen and (max-width: 992px){  /* ORIG: 768px, accounter PORTRAIT: max-width: 664px, md-off */   
    .md-off { display: none; }
  }
  /*====== > Extra large xl =======*/  
  @media screen and (min-width: 1200px){ /* 992px, accounter LARGE SCREEN min-width: 920px */
    :root{ --normal-font-size: 1.125rem; }
  }