:root {
--body-color: #e4e9f7;
--sidebar-color: #144431;
--primary-color: #12C67C;
--primary-color-light: #23EB98;
--toggle-color: #DDD;
--text-color: #707070;
}

/* body and header */
body {margin: 0;padding: 0;box-sizing: border-box; font-family: 'Inter', sans-serif; color;#333}
.tt_header {font-size: 42px; font-style: normal; font-weight: 600; line-height: normal;}
.tt_action_btn{background-color:#23EB98;color: #333333;}
.tt_form {color:#3A5F4A}
.form-s {max-width: 450px;}
.mt-q {margin-top:25%;}
.mt-h {margin-top:50%;}
.he100 {min-height:900px;}
.bg-body-dark-olive {background-color: #074A2F!important;}
.nav-pills .nav-link.active {background-color: #063B26;}
.nav-pills .nav-link {color:#FFF;}
.init{background: var(--Black-bg, #F7F7F7);}
canvas {max-width: 100%;}

/*colors*/
.g0txt {color:#05774E;}
.g1txt {color:#0091F0;}
.g2txt {color:#D99334;}
.g3txt {color:#8930DE;}
.graytxt {color:#828282;}
.ttgreen {color: var(--Emerald-500, #11BB76);}
.bg1 {background: var(--Dodger-Blue-100, #DEF2FF); background-color: #DEF2FF;}
.bg2 {background: var(--Apache-50, #FFF8E8); background-color: #FFF8E8;}
.bg3 {background: var(--Electric-Violet-100, #EBDBFD); background-color: #EBDBFD}
.b1 {background: var(--Dodger-Blue-700, #0091F0); background-color: #0091F0;}
.b2 {background: var(--Apache/700, #D99334); background-color: #D99334;}
.b3 {background: var(--Electric-Violet-700, #8930DE); background-color: #8930DE;}

/* SVG */
svg {width: 100%;height: auto;display: block;}
.mainsvg {max-width: 100vw; max-height: 100vh;}
.square {max-width:150px;max-height:150px;}
.sqsm {max-width:32px;max-height:32px;}

/* talent tree sidebar and main */
.tt-container {padding: 0;margin: 0;display: flex;gap: 10px;align-items: start;flex-direction: column;width: 100%;max-width: 90%;}
.mainc {width: 100%; max-width: 776px; margin: 0 auto;padding: 12px 42px;box-sizing: border-box; overflow-x: hidden;}/* mainc would be an option to center the content, but it would mean the menu can go over the content on smaller screens */
.sidebar {position: fixed; top: 0; left: 0; height: 100vh; width: 248px; padding: 10px 5px; background: var(--sidebar-color); transition: var(--tran-05); z-index: 100; border-radius: 0px 12px 12px 0px;}
.main {position: absolute; top: 0; left: 248px; height: 100vh; width: calc(100% - 250px); padding: 12px 42px;max-width: 1200px;flex-grow: 1;margin: 0 auto;}
.main_tasks {position: relative; top: 0; left: 120px; height: 100vh; padding: 12px 5px;max-width: 1280px;flex-grow: 1;margin: 0 auto;}
.main_flex {position: absolute; top: 0; left: 120px; height: 100vh; padding: 12px 5px;flex-grow: 1;margin: 0 auto; width: calc(100% - 250px);max-width: 1200px}
.main_goals {position: relative; top: 0; left: 120px; height: 100vh; padding: 12px 5px;max-width: 1024px;min-width:940px; flex-grow: 1;margin: 0 auto;}
.main_goals_f {position: absolute; top: 0; left: 120px; height: 100vh; padding: 12px 5px;max-width: 964px;width:calc(100% - 120px); flex-grow: 1;margin: 0 auto;}
.sb {border-radius: 8px; background: var(--Emerald-700, #05774E); padding:10px 0;}
.dropdown-item:hover {color: white!important;}
.dropdown-menu.show {display: block;}
.dropdown-menu, #reflectDropdown::after {display: none;}
.sidebar.close {width: 92px;}
.sidebar.close .txt {opacity: 0;}
.sidebar .toggle {position: absolute; top: 40px; right: -14px; transform: translateY(-50%) rotate(180deg); height: 28px; width: 28px; padding: 6px; background-color: var(--primary-color); color: #11BB76; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: var(--tran-05); border-radius: 8px; border: 1px solid var(--emerald-500, #11BB76); background: var(--emerald-800, #144431);}
@media screen and (max-width: 768px) {.sidebar .toggle {right: -14px; height: 30px; width: 30px; top: 40px; position: absolute;}}
.profile {border-radius: 15px; background: var(--emerald-500, #11BB76); width:42px; height:42px; padding: 10px 7px 9px 7px; justify-content: center; align-items: center; flex-shrink: 0; color: #FFFFFF; font-size: 14px;}
.menu_txt {font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; color:#FEFEFE; margin: 5px; padding: 10px 5px;}
.sidebar.close .mx-3 {margin:0!important}
.top_tt {max-width:45px;}
.f_name {color:#23EB98;}
.inline {display:inline;}
.sidebar.close .gones {display:none;}
.tt_divider {border: none; color: #23EB98; background-color: #23EB98; height: 2px; border-radius: 2px; width: 80%; padding: 0 20px; margin:20px 0 20px 20px;}
.sidebar.close .tt_divider {width: 50px; margin:20px 0 20px 15px;}
.icon {height:24px; width:24px; color: #23EB98;}
.icon_s {height:18px; width:18px; color: #212529; padding-bottom:2px;}
.sidebar.close .toggle {transform: translateY(-50%) rotate(0deg);}
.sidebar.close ~ .main {left: 78px; height: 100vh; width: calc(100% - 78px);}
@media screen and (max-width: 768px) {.gone {display:none;}}
.c-bttm {position:absolute; bottom:5%; height:80px}
@media screen and (max-width: 768px) {.c-bttm {height:140px}}

/* support and boxes */
.sbox {max-width:350px;width: 350px;}
.fineline{border: none;height: 2px;background-color: #E0E0E0;margin: 0;}
.tt-flex .d-flex {display: flex;flex-wrap: wrap;align-items: flex-start;}

/* font size */
.fs-10 {font-size:10px}
.fs-11 {font-size:11px}
.fs-12 {font-size:12px}
.fs-14 {font-size:14px}
.fs-16 {font-size:16px}
.fs-18 {font-size:18px}
.fs-20 {font-size:20px}

/* boxen */
.box {border-radius: 16px;}
@media screen and (max-width: 1024px) {.mainbox, .colorbox {width:100%; max-width:766px;}}
@media screen and (min-width: 1024px) {.mainbox, .colorbox {width:100%;max-width:930px}}
/* pro boxen */
@media screen and (max-width: 1024px) {.mainboxpro, .colorboxpro {width:100%; max-width:800px;}}
@media screen and (min-width: 1024px) {.mainboxpro, .colorboxpro {width:100%;max-width:1320px}}
.mainbox, .mainboxpro {background: var(--Black-White, #FEFEFE);}
.sbox {max-width:350px;width: 350px;}
.round-green {background: var(--Emerald-50, #ECFDF4);color: var(--Emerald-700, #05774E);}

/* buttons */
.tt-btn {color:#FFF; padding: 12px 16px; justify-content: center; align-items: center; border-radius: 16px; border: 0; text-decoration: none; display: inline-flex;}
.btn-gf {border-radius: 16px;background: var(--Emerald-400, #23EB98);color:#022C1F;border:1px solid #11BB76;}
.btn-gf:hover {background: var(--Emerald-500, #11BB76);color:#022C1F;)}