:root {
  --tcp-white: #fff;
  --tcp-bg: #fff;
  --tcp-bg-highlight: #fafbfc;
  --tcp-text: #212529;
  --tcp-text-highlight: #212529;
  --tcp-border: #eff2f5;
  --tcp-border-hover: #b2b8bf;
  --tcp-hover: #d4d4d5;
  --tcp-success: #41c55d;
  --tcp-danger: #ff4747;
  --tcp-primary: #2C70F4;
  --tcp-input-bg: #fff;
}

@font-face {
  font-family:"proxima-nova";
  src:url("/fonts/proxima-nova/proxima-nova-bold.woff2") format("woff2"),url("/fonts/proxima-nova/proxima-nova-bold.woff") format("woff"),url("/fonts/proxima-nova/proxima-nova-bold.otf") format("opentype");
  font-display:swap;font-style:normal;font-weight:700;
}

@font-face {
  font-family:"proxima-nova";
  src:url("/fonts/proxima-nova/proxima-nova-regular.woff2") format("woff2"),url("/fonts/proxima-nova/proxima-nova-regular.woff") format("woff"),url("/fonts/proxima-nova/proxima-nova-regular.otf") format("opentype");
  font-display:swap;font-style:normal;font-weight:400;
}

@font-face {
  font-family:"proxima-nova";
  src:url("/fonts/proxima-nova/proxima-nova-light.woff2") format("woff2"),url("/fonts/proxima-nova/proxima-nova-light.woff") format("woff"),url("/fonts/proxima-nova/proxima-nova-light.otf") format("opentype");
  font-display:swap;font-style:normal;font-weight:300;
}

@font-face {
  font-family:"proxima-nova";
  src:url("/fonts/proxima-nova/proxima-nova-semi-bold.woff2") format("woff2"),url("/fonts/proxima-nova/proxima-nova-semi-bold.woff") format("woff"),url("/fonts/proxima-nova/proxima-nova-semi-bold.otf") format("opentype");
  font-display:swap;font-style:normal;font-weight:500;
}


html.dark {
  --tcp-text: #A6B0C3;
  --tcp-border: #2A2F4A;
  --tcp-bg:  #0E111E;
  --tcp-hover: var(--tcp-border);
  --tcp-bg-highlight: rgb(27, 30, 50);
  --tcp-input-bg: #121624;
  --tcp-text-highlight: #becae0;
}

input, .form-control, .btn-more {
  transition-duration: 0s;
}

.cursor-pointer {
  cursor: pointer;
}
.overflow-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

body {
  font-family: 'proxima-nova', var(--bs-font-sans-serif);
}

body strong {
  font-weight:700;
}

body, html.dark body, html {
  background-color: var(--tcp-bg);
}

body:after, html.dark body:after {
  content: '';
  position: fixed;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  z-index: -1;
  background: var(--tcp-bg);
}

.tcp-bold {
  font-weight: 500;
}

html.dark body {
  color: #fff;
}

html.dark .card {
  background-color: var(--tcp-bg);
}

html.dark .form-control, html.dark .input-group-text, html.dark .form-control:focus {
  background-color: var(--tcp-input-bg);
  color: var(--tcp-tex);
}

html.dark .form-control::placeholder {
  color: var(--tcp-text);
  opacity:0.7;
}

html.dark .text-muted {
  color: var(--tcp-text) !important;
}

textarea {
  background-color:var(--tcp-bg-highlight);
  color:var(--tcp-text);
  border-color:var(--tcp-border);
}

.container {
  max-width: 980px;
}

.text-danger {
  color: var(--tcp-danger) !important;
}

.text-success {
  color: var(--tcp-success) !important;
}

.card, .border, 
.card-body, 
.border-2, 
.border-bottom, 
.form-control, 
.input-group-text, 
.modal, .modal-content, .modal-header  {
  border-color: var(--tcp-border) !important;
}

.input-group input.form-control, html.dark .input-group input.form-control  {
  border-right: none;
}

.input-group .input-group-text {
  border-left: none;
  opacity:0.6;
  background-color: transparent;
}

html.dark .input-group .input-group-text {
  opacity: 1;
}

html.dark .card, html.dark .border, html.dark .card-body, html.dark .border-2, html.dark .border-bottom, html.dark .form-control, html.dark .input-group-text {
  border-color: var(--tcp-border) !important;
}

hr {
  background-color: var(--tcp-border);
  opacity:90%;
}

html.dark hr {
  background-color: var(--tcp-text);
}

/* BUTTONS */

html.dark .btn-primary {
  background-color: var(--tcp-primary);
  border-color: var(--tcp-primary);
}

.nav-pills .nav-link {
  color: var(--tcp-text);
  font-weight:600;
}

.nav-pills .nav-link.active, html.dark .nav-pills .nav-link.active {
  color: var(--tcp-primary);
  background-color: rgba(44, 112, 244, 0.15);
}

html.dark .btn-link {
  color: var(--tcp-white);
}

html.dark .btn-primary:hover {
  background-color: #131f3e;
  border-color: #131f3e;
}

.btn-more {
  background-color: var(--tcp-border);
  color: var(--bs-gray);
  border-bottom-left-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
}

.btn-more:hover {
  background-color: var(--tcp-hover);
}

html.dark .btn-more {
  color: var(--tcp-text);
  background-color: var(--tcp-bg-highlight);
}

.btn:focus {
  box-shadow: none !important;
}

html.dark .btn-outline-secondary {
  color: var(--tcp-text);
  border-color: var(--tcp-text);
}

html.dark .btn-outline-secondary:hover, .btn-check:active+html.dark .btn-outline-secondary, .btn-check:checked+html.dark .btn-outline-secondary, html.dark .btn-outline-secondary.active, html.dark .btn-outline-secondary.dropdown-toggle.show, html.dark .btn-outline-secondary:active {
  color: var(--tcp-text);
  border-color: var(--tcp-text);
  background-color: var(--tcp-bg-highlight);
}

.tcp-btn {
  padding: 4px 10px;
  border-radius: 4px;
  background-color: rgba(44, 112, 244, 0.15) !important;
  color: var(--tcp-primary) !important;
  font-weight: 700;
  opacity:0.9;
}

.tcp-btn-warning {
  padding: 4px 10px;
  border-radius: 4px;
  background-color: #ffc107 !important;
  color: #000 !important;
  font-weight: 700;
  opacity:0.9;
}

.tcp-btn.small {
  line-height:inherit;
  font-size: 0.8rem;
  padding: 1px 6px;
}

.tcp-btn:hover {
  opacity:1;
}

.btn.tcp-btn.small.active {
  /* opacity: 0.5; */
  cursor: auto;
  background-color: rgb(15 110 253) !important;
  color: #eff4ff !important;
}

.legend {
  z-index: 1;
  font-size: 12px;
  line-height: 18px;
  font-weight: 300;
}

.icon-button {
  padding: 0px 5px;
}

html.dark .btn-more:hover {
  background-color: var(--tcp-border);
}

p.lead {
  margin-bottom:0;
}

strong.clickable {
  cursor:pointer;
  border-radius: 0.3rem;
}

strong.clickable:hover {
  background-color: var(--tcp-border);
}

.control-caption {
  line-height:1;
  font-size:0.8rem;
  margin:0;
  padding:0;
  color: var(--bs-secondary);
}

html.dark .control-caption {
  color: var(--tcp-text);
}

.selectContainer:hover {
  cursor:pointer;
}

.coin-select .selectContainer.focused ~ .logoContainer {
  border-color: #006fe8 !important;
}

.themed .selectContainer {
  line-height:1;
  vertical-align: middle;
  --background : var(--bs-white);
  --borderRadius : 6px;
  --border: 2px solid var(--tcp-border);
  --listBackground: var(--bs-white);
  --clearSelectTop: 0px;
  --clearSelectBottom: 0px;
  --clearSelectWidth: inherit;
  --indicatorTop: 9px;
  --indicatorHeight: inherit;
  --indicatorWidth: inherit;
  cursor:default;
}

html.dark .themed .selectContainer {
  --background : var(--tcp-input-bg);
  --inputColor: var(--tcp-text);
  --clearSelectColor: var(--tcp-border);
  --clearSelectHoverColor: var(--tcp-border);
  --border: 2px solid var(--tcp-border);
  --listBackground: var(--tcp-input-bg);
  --itemHoverBG: var(--tcp-bg-highlight);
  --itemActiveBackground: var(--tcp-bg-highlight);  
  --itemIsActiveBG : var(--tcp-primary);
}

.themed .selectContainer input, html.dark .themed .selectContainer input {
  --inputColor: var(--tcp-text);
  font-size: 16px;
} 

.xl-select .themed .selectContainer .selectedItem, 
html.dark .xl-select .themed .selectedItem,
.xl-select .themed .selectContainer input, 
html.dark .xl-select .themed input {
  --inputColor: var(--tcp-text);
  font-size: 18px;
} 

html.dark .themed .selectContainer input {
  --inputColor: #fff;
}

html.dark .bg-light {
  background-color: var(--tcp-bg-highlight) !important;
}

.bg-highlight {
  background-color: var(--tcp-bg-highlight);
  background: linear-gradient(135deg, var(--tcp-bg-highlight) 0%, var(--tcp-bg) 100%);
}

html.dark .bg-highlight {
  background-color: var(--tcp-bg-highlight);
  background: linear-gradient(135deg, rgb(27, 30, 50) 0%,  var(--tcp-bg) 80%);
}

.post p {
  color: var(--tcp-text)
}

.coin-logo {
  max-height: 1.25rem;
  vertical-align:middle;
  margin-top:-0.125rem; 
}

article h3 {
  margin-top: 2rem;
}

article a, html.dark article a {
  color: var(--tcp-primary);
}
article a:hover, html.dark article a:hover {
  color: var(--tcp-primary);
  opacity:0.8;
}
/*
--border : 
--borderFocusColor : 
--borderHoverColor : 
--borderRadius : 
--clearSelectBottom : 
--clearSelectColor : 
--clearSelectFocusColor : 
--clearSelectHoverColor : 
--clearSelectRight : 
--clearSelectTop : 
--clearSelectWidth : 
--disabledBackground : 
--disabledBorderColor : 
--disabledColor : 
--disabledPlaceholderColor : 
--disabledPlaceholderOpacity : 
--errorBackground : 
--errorBorder : 
--groupItemPaddingLeft : 
--groupTitleColor : 
--groupTitleFontSize : 
--groupTitleFontWeight : 
--groupTitlePadding : 
--groupTitleTextTransform : 
--height : 
--indicatorColor : 
--indicatorFill : 
--indicatorHeight : 
--indicatorRight : 
--indicatorStroke : 
--indicatorTop : 
--indicatorWidth : 
--inputColor : 
--inputFontSize : 
--inputLeft : 
--inputLetterSpacing : 
--inputPadding : 
--itemActiveBackground : 
--itemColor : 
--itemFirstBorderRadius : 
--itemHoverBG : 
--itemIsActiveBG : 
--itemIsActiveColor : 
--itemPadding : 
--listBackground : 
--listBorderRadius : 
--listEmptyColor : 
--listEmptyPadding : 
--listEmptyTextAlign : 
--listMaxHeight : 
--listShadow : 
--multiClearBG : 
--multiClearFill : 
--multiClearHeight : 
--multiClearHoverBG : 
--multiClearHoverFill : 
--multiClearPadding : 
--multiClearRadius : 
--multiClearTextAlign : 
--multiClearTop : 
--multiClearWidth : 
--multiItemActiveBG : 
--multiItemActiveColor : 
--multiItemBG : 
--multiItemBorderRadius : 
--multiItemDisabledHoverBg : 
--multiItemDisabledHoverColor : 
--multiItemHeight : 
--multiItemMargin : 
--multiItemPadding : 
--multiLabelMargin : 
--multiSelectInputMargin : 
--multiSelectInputPadding : 
--multiSelectPadding : 
--padding : 
--placeholderColor : 
--placeholderOpacity : 
--selectedItemPadding : 
--spinnerColor : 
--spinnerHeight : 
--spinnerLeft : 
--spinnerRight : 
--spinnerWidth : 
--virtualListHeight : 
*/


/* STYLING THUMB */

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  margin-top:-6px;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 20px;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 20px;
  width: 20px;
}


html.dark input[type='range']::-webkit-slider-runnable-track {
  background-color: var(--tcp-bg-highlight);
}

html.dark input[type="range"]::-moz-range-track {  
  background-color: var(--tcp-bg-highlight);
}

html.dark input[type=range]::-webkit-slider-thumb {
  background-color: var(--tcp-primary);
}


.logo {
  border-radius: 50%!important;
}

html.dark .progress {
  background-color: var(--tcp-bg-highlight);
}

html.dark .progress-bar {
  background-color: rgba(44, 112, 244, 0.9)
}


.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

/* Gradient for goal amounts */
.trophy-bg {
  background: linear-gradient(to right, #41c55d 0%, #2b68e1 100%);
  -webkit-background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -ms-background-clip: text;
  -ms-text-fill-color: transparent;
  background-clip: text;
}

.cursor-pointer {
  cursor: pointer !important;
}

.dropdown-item.active, .dropdown-item:active {
  color: #4480f6;
  text-decoration: none;
  background-color: #e3ecfd;
  font-weight: 700;
}

html.dark .dropdown-item.active, html.dark .dropdown-item:active {
  font-weight: 700;
  color: #2967e0;
  background-color: #142247;
}

.icon-list {
  list-style:none;
  margin:0;
  padding:0;
}

.icon-list li {
  display:flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.icon-list li::before {
  display: block;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  margin-right: .5rem;
  content: "";
  color:inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2341c55d' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
}

.hidden {
  display: none;
}