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

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: #191929;
  --tcp-text-highlight: #becae0;
}

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

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

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

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

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

html.dark body {
    background-color: var(--tcp-bg);
    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 .text-muted {
    color: var(--tcp-text) !important;
}

.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 {
    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 {
    border-radius:10px;
    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;
}

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



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

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

p.lead {
    margin-bottom:0;
}

.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);
}

.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);
}

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

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

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)
}

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; }