/* ======================================
 * Import Font : Poppins
====================================== */
@font-face {
    font-family: "Poppins Thin Italic";
    src: url("../fonts/Poppins/Poppins-ThinItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Extra Light";
    src: url("../fonts/Poppins/Poppins-ExtraLight.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Extra Light Italic";
    src: url("../fonts/Poppins/Poppins-ExtraLightItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Light";
    src: url("../fonts/Poppins/Poppins-Light.o/ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Light Italic";
    src: url("../fonts/Poppins/Poppins-LightItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Regular";
    src: url("../fonts/Poppins/Poppins-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Italic";
    src: url("../fonts/Poppins/Poppins-Italic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Semi Bold";
    src: url("../fonts/Poppins/Poppins-SemiBold.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Semi Bold Italic";
    src: url("../fonts/Poppins/Poppins-SemiBoldItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Bold";
    src: url("../fonts/Poppins/Poppins-Bold.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Bold Italic";
    src: url("../fonts/Poppins/Poppins-BoldItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Extra Bold";
    src: url("../fonts/Poppins/Poppins-ExtraBold.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins Extra Bold Italic";
    src: url("../fonts/Poppins/Poppins-ExtraBoldItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

/* ======================================
 * Import Font : Source Sans Pro
====================================== */
@font-face {
    font-family: "SourceSansPro Extra Light";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-ExtraLight.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Extra Light Italic";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-ExtraLightItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Light";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-Light.o/ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Light Italic";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-LightItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Regular";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Italic";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-Italic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Semi Bold";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-SemiBold.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Semi Bold Italic";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-SemiBoldItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Bold";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-Bold.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Bold Italic";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-BoldItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Extra Bold";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-ExtraBold.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro Extra Bold Italic";
    src: url("../fonts/Source-Sans-Pro/SourceSansPro-ExtraBoldItalic.ttf");
    font-weight: normal;
    font-style: normal;
}

/* ======================================
 * CSS Variables
====================================== */
:root {
    --primary             : #7239EA !important;
    --secondary           : #663259 !important;
    --danger              : #F1416C !important;
    --success             : #05C270 !important;
    --warning             : #FFB300 !important;
    --info                : #19A3EC !important;
    --teal                : #00CFDD !important;
    --purple              : #6500CD !important;
    --dark                : #28293D !important;
    --light               : #FAF9FB !important;
    --white               : #FFFFFF !important;
    --heading             : #663259;
    --paragraph           : #707793;
    --rgb-primary         : 114, 57, 234;
    --rgb-secondary       : 102, 50, 89;
    --rgb-danger          : 241, 65, 108;
    --rgb-success         : 5, 194, 112;
    --rgb-warning         : 255, 179, 0;
    --rgb-info            : 0, 207, 221;
    --rgb-teal            : 0, 207, 221;
    --rgb-purple          : 101, 0, 205;
    --rgb-dark            : 40, 41, 61;
    --rgb-light           : 245, 248, 250;
    --rgb-heading         : 82, 59, 93;
    --rgb-paragraph       : 112, 119, 147;
    --box-shadow-h-offset : 0px;
    --box-shadow-v-offset : 25px;
    --box-shadow-blur     : 50px;
    --box-shadow-opacity  : 0.15;
}

/* ======================================
 * Global CSS
====================================== */
[anim="ripple"] {
    position: relative;
    overflow: hidden;
}

[anim="ripple"]:before {
    content: "";
    position: absolute;
    display: block;
    background: var(--ripple-background, #FFFFFF);
    border-radius: 50%;
    pointer-events: none;
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
    width: calc(var(--d) * 1px);
    height: calc(var(--d) * 1px);
    opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.3));
    transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
    transform: translate(-50%, -50%) scale(var(--s, 1));
    transform-origin: center;
}

[anim="ripple"].tbr_ripple--primary:before {
    background: var(--ripple-background, var(--primary));
    opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.1));
}

body {
    font-family: 'SourceSansPro Regular', sans-serif;
	font-size: 16px;
	letter-spacing: 0.2px;
	line-height: 1.6rem;
	color: var(--paragraph);
	background-color: var(--white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p { color: var(--paragraph); }

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading);
    letter-spacing: 0px;
    line-height: 1.2;
    font-family: "Poppins Bold", sans-serif;
}

h1 { font-size: 46px; }
h2 { font-size: 40px; }
h3 { font-size: 34px; }
h4 { font-size: 28px; }
h5 { font-size: 22px; }
h6 { font-size: 16px; }

@media only screen and (max-width: 767px) {
    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
}

a,
a:hover,
a:focus,
a:active {
    color: var(--primary);
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none;
}

a.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}

button.disabled {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.5 !important;
}

strong, b { font-family: "SourceSansPro Bold", sans-serif; }

.tbr_weight--thin             { font-family: "SourceSansPro Thin", sans-serif; }
.tbr_weight--extra-light      { font-family: "SourceSansPro Extra Light", sans-serif; }
.tbr_weight--light            { font-family: "SourceSansPro Light", sans-serif; }
.tbr_weight--regular          { font-family: "SourceSansPro Regular", sans-serif; }
.tbr_weight--italic           { font-family: "SourceSansPro Italic", sans-serif; }
.tbr_weight--medium           { font-family: "SourceSansPro Medium", sans-serif; }
.tbr_weight--medium-italic    { font-family: "SourceSansPro Medium Italic", sans-serif; }
.tbr_weight--semi-bold        { font-family: "SourceSansPro Semi Bold", sans-serif; }
.tbr_weight--semi-bold-italic { font-family: "SourceSansPro Semi Bold Italic", sans-serif; }
.tbr_weight--bold             { font-family: "SourceSansPro Bold", sans-serif; }
.tbr_weight--extra-bold       { font-family: "SourceSansPro Extra Bold", sans-serif; }

.tbr_text--primary   { color: var(--primary); }
.tbr_text--secondary { color: var(--secondary) !important; }
.tbr_text--danger    { color: var(--danger) !important; }
.tbr_text--success   { color: var(--success) !important; }
.tbr_text--warning   { color: var(--warning) !important; }
.tbr_text--info      { color: var(--info) !important; }
.tbr_text--teal      { color: var(--teal) !important; }
.tbr_text--purple    { color: var(--purple) !important; }
.tbr_text--dark      { color: var(--dark) !important; }
.tbr_text--light     { color: var(--light) !important; }
.tbr_text--white     { color: var(--white) !important; }

/* ======================================
 * Aside
====================================== */
.tbr_aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100vh;
    background-color: var(--primary);
    z-index: 2002; /* Fix warning bar for todo */
    /* z-index: 10; */
}

.tbr_aside--brand {
    width: 100%;
    height: 100px;
    background-color: transparent;
}

.tbr_aside--brand a {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tbr_aside--nav {
    width: 100%;
    height: 100px;
}

.tbr_aside--profile {
    width: 100%;
    height: 100px;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tbr_aside--profile .tbr_link--avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: block;
}

.tbr_aside--profile .tbr_link--avatar .tbr_avatar {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}

.tbr_nav--menu {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tbr_nav--menu li {
    padding: 0;
    margin: 0 0 12px 0;
    list-style-type: none;
}

.tbr_nav--menu li a {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tbr_nav--menu li a:hover,
.tbr_nav--menu li a:focus,
.tbr_nav--menu li a:active,
.tbr_nav--menu li a.tbr_active {
    background-color: rgba(0, 0, 0, 0.15);
}

/* ======================================
 * Dropdown Menu
====================================== */
.tbr_dropdown--menu {
    border: none;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    -moz-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
}

.tbr_dropdown--menu[data-popper-placement="top-start"] {
    bottom: 8px !important;
}

.tbr_dropdown--menu .dropdown-item {
    position: relative;
    font-family: 'SourceSansPro Regular', sans-serif;
	font-size: 16px;
    font-weight: initial;
	letter-spacing: 0.2px;
	line-height: 1.6rem;
    color: var(--paragraph);
    padding: 4px 24px;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.tbr_dropdown--menu .dropdown-item:hover {
    background-color: var(--light);
}

.tbr_dropdown--menu .dropdown-item:focus,
.tbr_dropdown--menu .dropdown-item:active {
    background-color: var(--secondary);
    color: var(--white);
}

/* Dropdown with bullet */
.tbr_dropdown--menu-bullet .dropdown-item:hover,
.tbr_dropdown--menu-bullet .dropdown-item:focus,
.tbr_dropdown--menu-bullet .dropdown-item:active {
    color: var(--paragraph);
    background-color: var(--light);
}

.tbr_dropdown--menu-bullet .dropdown-item::after {
    content: '';
    position: absolute;
    left: 24px;
    top: calc(50% - 3px);
    width: 6px;
    height: 6px;
    background-color: var(--light);
}

.tbr_dropdown--menu-bullet .dropdown-item {
    padding-left: calc(24px + 16px);
}

.tbr_dropdown--menu-bullet .dropdown-item.tbr_secondary.active { background-color: var(--secondary); }
.tbr_dropdown--menu-bullet .dropdown-item.tbr_warning.active { background-color: var(--warning); }
.tbr_dropdown--menu-bullet .dropdown-item.tbr_success.active { background-color: var(--success); }
.tbr_dropdown--menu-bullet .dropdown-item.tbr_danger.active { background-color: var(--danger); }

.tbr_dropdown--menu-bullet .dropdown-item.tbr_secondary::after { background-color: var(--secondary); }
.tbr_dropdown--menu-bullet .dropdown-item.tbr_warning::after { background-color: var(--warning); }
.tbr_dropdown--menu-bullet .dropdown-item.tbr_success::after { background-color: var(--success); }
.tbr_dropdown--menu-bullet .dropdown-item.tbr_danger::after { background-color: var(--danger); }

.tbr_dropdown--menu-bullet .dropdown-item.active {
    color: var(--white);
}

.tbr_dropdown--menu-bullet .dropdown-item.active::after {
    background-color: var(--white);
}

/* ======================================
 * Tooltip & Popover
====================================== */
.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    font-size: 16px;
	letter-spacing: 0.2px;
	line-height: 1.6rem;
	color: var(--paragraph);
    background-color: var(--white);
    border-radius: 10px;
    padding: 10px 16px;
    opacity: 1;
    -webkit-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    -moz-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--white);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--white);
}

.popover {
    border: none;
    z-index: 2003;
    border-radius: 10px;
    max-width: 350px;
    -webkit-box-shadow: 0px 10px 50px 0px rgba(102,50,89,0.20);
    -moz-box-shadow: 0px 10px 50px 0px rgba(102,50,89,0.20);
    box-shadow: 0px 10px 50px 0px rgba(102,50,89,0.20);
}

.popover-header {
    position: relative;
    z-index: 1;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #F0EEF2;
    font-size: 18px;
    text-align: center;
    font-family: "SourceSansPro Bold";
    background-color: var(--white);
}

.popover-header::before {
    display: none !important;
}

.popover-body {
    font-size: 16px;
	letter-spacing: 0.2px;
	line-height: 1.6rem;
	color: var(--paragraph);
    background-color: var(--white);
    text-align: center;
    border: none;
    border-radius: 10px;
    padding: 15px 20px 16px;
    opacity: 1;
}

.bs-popover-bottom > .popover-arrow,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
    top: -8px;
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
    border-bottom-color: var(--white);
}

.bs-popover-top > .popover-arrow,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
    bottom: -8px;
}

.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
    border-top-color: var(--white);
}

.bs-popover-end > .popover-arrow,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
    left: -8px;
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
    border-right-color: var(--white);
}

.bs-popover-start > .popover-arrow,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
    right: -8px;
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
    border-left-color: var(--white);
}

/* ======================================
 * List Group
====================================== */
.tbr_list--group {
    background-color: var(--white);
    padding: 16px 0;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.05);
    -moz-box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.05);
    box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.05);
}

.tbr_list--group .list-group-item {
    border: none;
    border-radius: 0;
    padding: 0;
}

.tbr_list--group .list-group-item a {
    position: relative;
    overflow: hidden;
    color: var(--paragraph);
    height: 46px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 24px;
}

.tbr_list--group .list-group-item a::after {
    content: '';
    position: absolute;
    top: calc(50% - 13px);
    left: -5px;
    width: 5px;
    height: 26px;
    background-color: var(--primary);
    opacity: 0;
    transition: all 0.3s ease;
}

.tbr_list--group .list-group-item a.tbr_active::after,
.tbr_list--group .list-group-item a:hover::after,
.tbr_list--group .list-group-item a:focus::after,
.tbr_list--group .list-group-item a:active::after {
    left: 0;
    opacity: 1;
}

/* ======================================
 * Toast
====================================== */
.toast {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    -moz-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
}

.toast-header {
    border-bottom: 1px solid #F2F2F2;
    padding: 6px 10px;
}

[data-bs-dismiss="toast"] {
    opacity: 0.4;
    transition: all 0.3s ease;
}

[data-bs-dismiss="toast"]:hover,
[data-bs-dismiss="toast"]:focus,
[data-bs-dismiss="toast"]:active {
    opacity: 1;
}

/* ======================================
 * Button
====================================== */
.btn,
.btn:hover,
.btn:focus,
.btn:active {
    border: none;
    box-shadow: none;
    outline: none;
}

.tbr_btn {
    font-size: 16px;
    min-height: 46px;
    padding-right: 24px;
    padding-left: 24px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    color: var(--paragraph);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Solid button */
.tbr_btn--primary {
    background-color: var(--primary);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-primary),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-primary),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-primary),0.2);
}

.tbr_btn--secondary {
    background-color: var(--secondary);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-secondary),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-secondary),0.2);
    -moz-box-shadow: 0px 8px 24px rgba(var(--rgb-secondary),0.2);
}

.tbr_btn--danger {
    background-color: var(--danger);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-danger),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-danger),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-danger),0.2);
}

.tbr_btn--success {
    background-color: var(--success);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-success),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-success),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-success),0.2);
}

.tbr_btn--warning {
    background-color: var(--warning);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-warning),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-warning),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-warning),0.2);
}

.tbr_btn--info {
    background-color: var(--info);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-info),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-info),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-info),0.2);
}

.tbr_btn--teal {
    background-color: var(--teal);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-teal),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-teal),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-teal),0.2);
}

.tbr_btn--purple {
    background-color: var(--purple);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-purple),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-purple),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-purple),0.2);
}

.tbr_btn--white {
    background-color: var(--white);
    color: var(--paragraph) !important;
    transition: all 0.3s ease;
    box-shadow: none;
}

.tbr_btn--light {
    background-color: var(--light);
    color: var(--paragraph) !important;
    transition: all 0.3s ease;
    box-shadow: none;
}

.tbr_btn--light-primary {
    color: var(--primary);
    background-color: rgba(var(--rgb-primary), 0.1);
}

/* Light button */
.tbr_btn--light-secondary {
    color: var(--secondary);
    background-color: rgba(var(--rgb-secondary), 0.1);
}

.tbr_btn--light-danger {
    color: var(--danger);
    background-color: rgba(var(--rgb-danger), 0.1);
}

.tbr_btn--light-success {
    color: var(--success);
    background-color: rgba(var(--rgb-success), 0.1);
}

.tbr_btn--light-warning {
    color: var(--warning);
    background-color: rgba(var(--rgb-warning), 0.1);
}

.tbr_btn--light-info {
    color: var(--info);
    background-color: rgba(var(--rgb-info), 0.1);
}

.tbr_btn--light-teal {
    color: var(--teal);
    background-color: rgba(var(--rgb-teal), 0.1);
}

.tbr_btn--light-purple {
    color: var(--purple);
    background-color: rgba(var(--rgb-purple), 0.1);
}

.tbr_btn--light-primary:hover,
.tbr_btn--light-primary:focus,
.tbr_btn--light-primary:active {
    background-color: var(--primary);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-primary),0.2) !important;
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-primary),0.2) !important;
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-primary),0.2) !important;
}

.tbr_btn--light-primary:hover img,
.tbr_btn--light-primary:focus img,
.tbr_btn--light-primary:active img {
    filter: brightness(0) invert(1);
}

.tbr_btn--light-secondary:hover,
.tbr_btn--light-secondary:focus,
.tbr_btn--light-secondary:active {
    background-color: var(--secondary);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-secondary),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-secondary),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-secondary),0.2);
}

.tbr_btn--light-danger.tbr_active,
.tbr_btn--light-danger:hover,
.tbr_btn--light-danger:focus,
.tbr_btn--light-danger:active {
    background-color: var(--danger);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-danger),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-danger),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-danger),0.2);
}

.tbr_btn--light-danger:hover img,
.tbr_btn--light-danger:focus img,
.tbr_btn--light-danger:active img {
    filter: brightness(0) invert(1);
}

.tbr_btn--light-success:hover,
.tbr_btn--light-success:focus,
.tbr_btn--light-success:active {
    background-color: var(--success);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-success),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-success),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-success),0.2);
}

.tbr_btn--light-success:hover img,
.tbr_btn--light-success:focus img,
.tbr_btn--light-success:active img {
    filter: brightness(0) invert(1);
}

.tbr_btn--light-warning:hover,
.tbr_btn--light-warning:focus,
.tbr_btn--light-warning:active {
    background-color: var(--warning);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(var(--rgb-warning),0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-warning),0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(var(--rgb-warning),0.2);
}

.tbr_btn--light-info:hover,
.tbr_btn--light-info:focus,
.tbr_btn--light-info:active {
    background-color: var(--info);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(25,163,236,0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(25,163,236,0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(25,163,236,0.2);
}

.tbr_btn--light-teal:hover,
.tbr_btn--light-teal:focus,
.tbr_btn--light-teal:active {
    background-color: var(--teal);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(0,207,221,0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(0,207,221,0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(0,207,221,0.2);
}

.tbr_btn--light-purple:hover,
.tbr_btn--light-purple:focus,
.tbr_btn--light-purple:active {
    background-color: var(--purple);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 24px 0px rgba(101,0,205,0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(101,0,205,0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(101,0,205,0.2);
}

/* Other button style */
.tbr_btn--square {
    width: 46px;
    min-width: 46px;
    padding-right: 0;
    padding-left: 0;
}

.tbr_btn svg .tbr_custom {
    transition: all 0.3s ease;
}

.tbr_btn.tbr_active svg .tbr_custom,
.tbr_btn:hover svg .tbr_custom,
.tbr_btn:focus svg .tbr_custom,
.tbr_btn:active svg .tbr_custom {
    fill: #FFFFFF;
}

.tbr_btn--icon-left > svg {
    margin-left: -6px;
    margin-right: 6px;
}

.tbr_btn .spinner-border {
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-right-color: transparent;
}

/* ======================================
 * Task List : To Do Label
====================================== */
.tbr_todo--label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 185px;
    height: 36px;
    border-radius: 6px;
    font-size: 15px;
    color: var(--white);
    letter-spacing: 0.5px;
    overflow: hidden;
    text-transform: uppercase;
    margin-bottom: 1px;
}

.tbr_todo--label > span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 36px);
    height: 100%;
    padding: 2px 8px;
    text-align: center;
    font-weight: 700;
}

.tbr_todo--label a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.05);
}

.tbr_todo--label a img {
    transition: all 0.3s ease;
}

[aria-expanded="true"] img {
    transform: rotate(180deg);
}

.tbr_todo--label-primary { background-color: var(--primary); }
.tbr_todo--label-secondary { background-color: var(--secondary); }
.tbr_todo--label-warning { background-color: var(--warning); }
.tbr_todo--label-success { background-color: var(--success); }
.tbr_todo--label-danger { background-color: var(--danger); }

/* ======================================
 * Task List : Listing
====================================== */
.tbr_task--list {
    margin-bottom: 20px;
}

.tbr_task--list .task-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 36px;
    border-radius: 8px;
    background-color: var(--white);
    padding: 0 4px 0 16px;
    margin-bottom: 1px;
}

.tbr_task--list .task-child:hover,
.tbr_task--list .task-child:focus,
.tbr_task--list .task-child:active {
    background-color: var(--light);
}

.tbr_task--list .task-child .tbr_btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 6px !important;
}

.tbr_task--list .task-child .tbr_btn svg {
    transition: all 0.3s ease;
}

.tbr_task--list .task-child .tbr_btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.tbr_task--list .task-child .tbr_dropdown--menu.show[data-popper-placement="bottom-end"] {
    top: 1px !important;
}

.tbr_task--list .task-child .tbr_dropdown--menu.show[data-popper-placement="top-end"] {
    bottom: 1px !important;
}

.tbr_task--list .task-child {
    width: 100%;
    cursor: pointer;
}

.tbr_task--list .task-modal-trigger {
    width: calc(100% - 40px);
}

.tbr_task--list .task-name {
    margin-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbr_task--list .task-modal-trigger .task-name {
    margin-left: 20px;
}

.tbr_task--list .task-action {
    margin-left: auto;
}

.tbr_task--list .task-name::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    top: calc(50% - 3px);
    left: 16px;
    background-color: var(--light);
}

.tbr_task--list .task-name.task-empties::before  { background-color: var(--secondary); }
.tbr_task--list .task-name.task-primary::before  { background-color: var(--primary); }
.tbr_task--list .task-name.task-done::before     { background-color: var(--success); }
.tbr_task--list .task-name.task-progress::before { background-color: var(--warning); }
.tbr_task--list .task-name.task-cancel::before   { background-color: var(--danger); }

/* ======================================
 * Card List : Suggestion
====================================== */
.tbr_card--list {
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: var(--white);
    -webkit-box-shadow: 0px 10px 50px 0px rgba(102,50,89,0.15);
    -moz-box-shadow: 0px 10px 50px 0px rgba(102,50,89,0.15);
    box-shadow: 0px 10px 50px 0px rgba(102,50,89,0.15);
}

.tbr_card-list--header {
    font-family: 'SourceSansPro Semi Bold', sans-serif;
    min-height: 44px;
    border-bottom: 1px solid #F0EEF2;
    padding: 5px 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.tbr_card-list--header img {
    margin-right: 12px;
}

.tbr_card-list--body {
    padding: 10px 0;
}

.tbr_card-list--item {
    width: 100%;
    min-height: 36px;
    padding: 0 0 0 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.tbr_card-list--item:hover {
    background-color: var(--light);
}

.tbr_card-list--item img {
    margin-right: 16px;
}

.tbr_card-list--item span {
    width: calc(100% - ((24px + 16px)*2));
    padding: 5px 16px 5px 0;
}

.tbr_suggestion--expanse {
    display: block;
    text-align: center;
    padding: 6px 0 0;
}

[aria-expanded="false"] .tbr_less {
    display: none;
}

[aria-expanded="true"] .tbr_more {
    display: none;
}

/* ======================================
 * Card
====================================== */
.tbr_card {
    border: none;
    border-radius: 10px;
    -webkit-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    -moz-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
}

/* ======================================
 * Progress
====================================== */
.tbr_progress .percent {
    position: relative;
    width: 58px;
    height: 58px;
}

.tbr_progress svg {
    position: relative;
    width: 58px;
    height: 58px;
    transform: rotate(-90deg);
}

.tbr_progress svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.tbr_progress svg circle:last-of-type {
    stroke-dasharray: 167px;
    stroke-dashoffset: calc(167px - (167px * var(--percent)) / 100);
}

.tbr_progress .circle-number {
    font-family: 'SourceSansPro Semi Bold', sans-serif;
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    position: absolute;
    top: 0;
    left: 0;
}

/* ======================================
 * Header
====================================== */
.tbr_header--demo {
    position: fixed;
    top: 0;
    left: 100px;
    height: 80px;
    background-color: var(--white);
    padding: 4px 30px;
    z-index: 2000;
    -webkit-box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.05);
    -moz-box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.05);
    box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.05);
}

.tbr_header--demo .tbr_header--demo-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ======================================
 * Workspace
====================================== */
body .tbr_workspace {
    position: relative;
    left: 100px;
    width: calc(100% - 100px);
    height: initial;
    padding-top: 0;
    background-color: var(--light);
}

.tbr_ui--presentation {
    margin-top: 80px;
    padding: 30px;
}

/* To do list area */
.tbr_tdl--area {
    width: 350px;
    min-width: 350px;
    height: calc(100vh - 80px);
    min-height: calc(100vh - 80px);
    margin-top: 80px;
    overflow-y: scroll;
    background-color: var(--light);
    z-index: 2001; /* Fix warning bar for todo */
}

.tbr_header--left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 100px;
    width: 350px;
    height: 80px;
    background-color: var(--white);
    padding: 4px 30px;
    z-index: 2000;
    -webkit-box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.1);
    -moz-box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.1);
    box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.1);
}

.tbr_page--title {
    font-family: 'Poppins Semi Bold', sans-serif;
    font-size: 25px;
    padding-top: 4px;
    padding-bottom: 0;
    margin-bottom: 2px;
    margin-left: -1px;
    color: var(--heading);
}

.tbr_create--todo {
    border-right: 1px solid #F0EEF2;
    border-bottom: 1px solid #F0EEF2;
}

.tbr_todo--list-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--light);
    height: 90px;
    padding: 16px 30px;
    transition: all 0.3s ease;
    box-shadow: none;
    cursor: pointer;
    border-right: 1px solid #F0EEF2;
    border-bottom: 1px solid #F0EEF2;
}

.tbr_todo--list-item.tbr_active {
    border-right: 1px solid #FFFFFF;
}

.tbr_todo--list-item.tbr_active {
    background-color: var(--white);
    z-index: 2;
}

.tbr_todo--list-item::after {
    content: '';
    position: absolute;
    background-color: var(--primary);
    top: calc(50% - 20px);
    left: -5px;
    width: 5px;
    height: 40px;
    opacity: 0;
    transition: all 0.3s ease;
}

.tbr_todo--list-item:hover::after,
.tbr_todo--list-item:focus::after,
.tbr_todo--list-item:active::after,
.tbr_todo--list-item.tbr_active::after {
    left: 0;
    opacity: 1;
}

.tbr_todo--load {
    padding: 30px 0 22px;
    display: none;
}

/* Highlight */
.tbr_highlight.tbr_todo--list-item.tbr_active .tbr_indicator {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 450px);
    min-height: 80px;
    padding: 24px;
    z-index: 2;
    opacity: .9;
    color: var(--white);
    background-color: var(--warning);
    font-family: "SourceSansPro Semi Bold", sans-serif;
}

.tbr_highlight.tbr_todo--list-item.tbr_active .tbr_indicator svg {
    min-width: 24px;
    max-width: 24px;
    margin-right: 10px;
}

.tbr_todo--list-item:not(.tbr_highlight) .tbr_indicator,
.tbr_todo--list-item:not(.tbr_active) .tbr_indicator {
    display: none;
}

@media only screen and (max-width: 1200px) {
    .tbr_highlight.tbr_todo--list-item.tbr_active .tbr_indicator {
        width: calc(100% - 80px);
        min-height: 79px;
        top: 60px;
        left: 80px;
    }
}

.tbr_highlight.tbr_highlight--danger.tbr_todo--list-item::after { background-color: var(--danger); }
.tbr_highlight.tbr_highlight--danger.tbr_todo--list-item .tbr_todo--li-left > div > span { color: var(--danger); }
.tbr_highlight.tbr_highlight--danger.tbr_todo--list-item .tbr_todo--li-mobile .tbr_day { color: var(--danger); }

.tbr_highlight.tbr_highlight--warning.tbr_todo--list-item::after { background-color: var(--warning); }
.tbr_highlight.tbr_highlight--warning.tbr_todo--list-item .tbr_todo--li-left > div > span { color: var(--warning); }
.tbr_highlight.tbr_highlight--warning.tbr_todo--list-item .tbr_todo--li-mobile .tbr_day { color: var(--warning); }

/* Detail to do list area */
.tbr_header--right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: calc(100px + 350px);
    width: calc(100% - (100px + 350px));
    height: 80px;
    background-color: var(--white);
    padding: 4px 30px;
    z-index: 2000;
    -webkit-box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.1);
    -moz-box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.1);
    box-shadow: 0px 3px 15px 0px rgba(102,50,89,0.1);
}

.tbr_header--right::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    height: 100%;
    background-color: var(--white);
}

.tbr_header--right .tbr_contents--hl {
    max-width: calc(100% - 287px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbr_todo--meta {
    padding: 0;
    margin: 0;
}

.tbr_todo--meta li {
    position: relative;
    padding: 0 8px;
    margin: 0;
    list-style-type: none;
    display: inline-block;
}

.tbr_todo--meta li:first-child {
    padding-left: 0;
}

.tbr_todo--meta li:first-child::before {
    display: none;
}

.tbr_todo--meta li::before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: -4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #707793;
    opacity: .5;
}

.tbr_task--area {
    width: 100%;
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px + 42px);
    padding: 0;
    margin-top: 80px;
    margin-bottom: 0;
    overflow-y: hidden;
    background-color: var(--white);
}

.tbr_todo--illustration {
    position: relative;
    width: 100%;
    padding: 25px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tbr_todo--illustration img {
    margin-bottom: 25px;
}

.tbr_body.tbr_clock--in .tbr_task--create {
    position: fixed;
    bottom: 0;
    right: 220px;
    width: calc(100% - (100px + 570px));
    height: 42px;
    z-index: 2001;
    padding-right: 0;
    background-color: var(--white);
    -webkit-box-shadow: 0px -3px 15px 0px rgba(102,50,89,0.05);
    -moz-box-shadow: 0px -3px 15px 0px rgba(102,50,89,0.05);
    box-shadow: 0px -3px 15px 0px rgba(102,50,89,0.05);
}

.tbr_body:not(.tbr_clock--in) .tbr_task--create {
    position: fixed;
    bottom: 0;
    right: 0;
    width: calc(100% - (100px + 350px));
    height: 42px;
    z-index: 2001;
    padding-right: 0;
    background-color: var(--white);
    -webkit-box-shadow: 0px -3px 15px 0px rgba(102,50,89,0.05);
    -moz-box-shadow: 0px -3px 15px 0px rgba(102,50,89,0.05);
    box-shadow: 0px -3px 15px 0px rgba(102,50,89,0.05);
}

.tbr_task--create input.form-control {
    height: 42px;
    min-height: 42px;
    border: 0;
    border-radius: 0;
    padding: 0 16px 2px;
    background-color: var(--white);
    outline: none !important;
    box-shadow: none !important;
    border: 3px solid transparent;
}

.tbr_task--create .form-control:focus {
    border: 3px solid rgba(var(--rgb-primary), 1);
}

.tbr_task--create button[type="submit"] {
    padding: 0;
    width: 60px;
    min-width: 60px;
    height: 42px;
    min-height: 42px;
    border-radius: 0;
    margin-left: -3px;
}

.tbr_task--create button[type="submit"][disabled] {
    background-color: var(--secondary);
}

.tbr_task--create button[type="submit"][disabled] svg path {
    fill: var(--white);
}

.tbr_task--create .tbr_task--create[disabled],
.tbr_task--create button[type="submit"][disabled] {
    opacity: 0.5;
}

.tbr_task--area .tbr_body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.tbr_task--area .tbr_body.tbr_clock--in .tbr_body--task {
    width: calc(100% - 220px);
    min-width: calc(100% - 220px);
    max-width: calc(100% - 220px);
    height: calc(100vh - (80px + 42px));
    padding: 25px 25px 5px 25px;
    overflow-y: auto;
}

.tbr_task--area .tbr_body.tbr_clock--in .tbr_body--rest {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    height: calc(100vh - 80px);
    overflow-y: hidden;
    padding: 0;
    background-color: var(--light);
    border-left: 1px solid #F0EEF2;
}

.tbr_task--area .tbr_body:not(.tbr_clock--in) .tbr_body--task {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: calc(100vh - (80px + 42px));
    padding: 30px 30px 10px 30px;
    overflow-y: auto;
}

/* ======================================
 * Rest
====================================== */
.tbr_body--rest .tbr_rest--actions {
    position: relative;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 4px;
    border-bottom: 1px solid #F0EEF2;
    background-color: var(--white);
}

.tbr_body--rest .tbr_rest--actions.tbr_disable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: .5;
    background-color: var(--white);
}

.tbr_body--rest .tbr_rest--actions div:first-child {
    margin-bottom: 14px;
}

.tbr_body--rest .tbr_rest--actions .tbr_page--title {
    font-size: 18px;
    margin-right: 5px;
    padding-top: 2px;
}

.tbr_body--rest .tbr_rest--actions span:not(.tbr_page--title) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tbr_body--rest .tbr_rests {
    height: calc(100vh - (140px + 80px));
    overflow-y: auto;
}

.tbr_body--rest .tbr_rests .tbr_rest--item {
    position: relative;
    background-color: var(--white);
    border-bottom: 1px solid #F0EEF2;
    padding: 14px 25px 13px;
}

.tbr_body--rest .tbr_rests .tbr_rest--item > span {
    display: block;
    margin-bottom: 2px;
}

.tbr_body--rest .tbr_rests .tbr_rest--item .tbr_rest--delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: .5;
    transition: all .3s;
}

.tbr_body--rest .tbr_rests .tbr_rest--item .tbr_rest--delete:hover {
    opacity: 1;
}

.tbr_body--rest .tbr_rests .tbr_rest--item .tbr_rest--delete[disabled] {
    opacity: .5;
    pointer-events: none;
}

.tbr_body--rest .tbr_rests .tbr_rest--item .tbr_rest--clock {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tbr_body--rest .tbr_rests .tbr_rest--item .tbr_rest--clock > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-left: -3px;
    opacity: .8;
}

.tbr_body--rest .tbr_rests .tbr_rest--item .tbr_rest--clock .tbr_start svg {
    width: 16px;
    height: 16px;
}

.tbr_body--rest .tbr_rests .tbr_rest--item .tbr_rest--clock .tbr_finish svg {
    width: 12px;
    height: 12px;
    margin-right: 1px;
}

.tbr_body--rest .tbr_rests .tbr_rest--item .tbr_rest--clock span {
    font-size: 15px;
}

.tbr_task--area .tbr_body.tbr_clock--in .tbr_body--rest.tbr_rest--flexible-info {
    background-color: var(--white);
}

/* ======================================
 * Without TDL
====================================== */
.tbr_body--no-tdl {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.tbr_body--no-tdl.tbr_clock--in .tbr_illustration {
    width: calc(100% - 220px);
    min-width: calc(100% - 220px);
    max-width: calc(100% - 220px);
    height: 100vh;
    padding: 25px 25px 5px 25px;
    overflow-y: auto;
}

.tbr_body--no-tdl:not(.tbr_clock--in) .tbr_body--rest {
    display: none;
}

.tbr_body--no-tdl.tbr_clock--in .tbr_body--rest {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    height: 100vh;
    overflow-y: hidden;
    padding: 0;
    background-color: var(--light);
    border-left: 1px solid #F0EEF2;
    z-index: 1;
}

.tbr_body--no-tdl.tbr_clock--in .tbr_body--rest .tbr_rests {
    height: calc(100vh - 140px);
}

/* ======================================
 * Form
====================================== */
.tbr_form--control::-webkit-input-placeholder { color: rgba(var(--rgb-paragraph), 0.5); }
.tbr_form--control:-ms-input-placeholder { color: rgba(var(--rgb-paragraph), 0.5); }
.tbr_form--control::placeholder { color: rgba(var(--rgb-paragraph), 0.5); }

.tbr_form--control {
    color: var(--paragraph);
    min-height: 46px;
    border-radius: 10px;
    background-color: var(--light);
    border-width: 3px;
    border-style: solid;
    border-color: var(--light);
    box-shadow: none !important;
    outline: none !important;
    padding-right: 16px;
    padding-left: 16px;
}

.tbr_form--control:focus,
.tbr_form--control:active {
    color: var(--paragraph);
    background-color: var(--light);
    border-color: var(--primary);
}

.tbr_form--control[readonly],
.tbr_form--control[disabled] {
    color: var(--paragraph);
    background-color: var(--light);
    border-color: var(--light);
}

/* Input group text */
.input-group-text {
    min-width: 46px;
    min-height: 46px;
    height: 100%;
    color: var(--paragraph);
    background-color: #F0EEF2;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 10px;
    z-index: 3;
    margin-right: 0;
}

/* Input group prepend and append */
.input-group-prepend {
    min-width: 46px;
    min-height: 46px;
    height: 100%;
    background-color: #F2F3F8;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0 0 10px;
    z-index: 3;
    margin-right: 0;
}

.input-group-append {
    min-width: 46px;
    min-height: 46px;
    height: 100%;
    background-color: #F2F3F8;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 10px 10px 0;
    z-index: 3;
    margin-left: 0;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: 0;
    margin-left: 0;
}

/* Custom radio */
.tbr_custom--radio .form-check-input {
    width: 22px;
    height: 22px;
    background-color: #F0EEF2;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: none;
}

.tbr_custom--radio .form-check-label {
    padding: 2px 0 0 10px;
}

.tbr_custom--radio .form-check-input:checked[type=radio] {
    background-color: transparent;
    border: 6px solid var(--primary);
}

/* Custom checkbox */
.tbr_custom--checkbox {
    padding-left: 34px;
    margin-bottom: 0;
}

.tbr_custom--checkbox .form-check-input {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    margin-top: 2px;
    margin-left: -34px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: #F0EEF2;
}

.tbr_custom--checkbox .form-check-input:checked[type=checkbox] {
    background-size: 65%;
    background-position: top 53% left 56%;
    background-color: var(--primary);
    background-repeat: no-repeat;
    background-image: url('../svg/icons/form_checked.svg')
}

/* Form select arrow */
.tbr_form--arrow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../svg/icons/form_arrow.svg');
    background-position: center;
    background-repeat: no-repeat;
}

/* Invalid feedback */
.tbr_form--control.is-invalid,
.was-validated .tbr_form--control:invalid {
    background-image: none;
    padding-right: 20px;
    border-color: rgba(var(--rgb-danger), 1 ) !important;
}

.tbr_form--control.valid,
.was-validated .tbr_form--control:valid {
    background-image: none;
}

.invalid-feedback {
    font-size: 16px;
	letter-spacing: 0.2px;
	line-height: 1.6rem;
    margin-top: 6px;
    color: var(--danger);
}

/* ======================================
 * Timepicker
====================================== */
.tempus-dominus-widget {
    max-width: 154px;
    padding: 10px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    -moz-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
}

.tempus-dominus-widget .time-container {
    margin-bottom: 0 !important;
}

.tempus-dominus-widget[data-popper-placement="top-start"] { margin-bottom: 10px !important; }
.tempus-dominus-widget[data-popper-placement="bottom-start"] { margin-top: 10px !important; }

.time-container-clock {
    display: flex !important;
    flex-wrap: wrap !important;
}

.time-container-clock > div {
    width: 38px !important;
    height: 38px !important;
}

.tempus-dominus-widget.light,
.tempus-dominus-widget [data-action] {
    font-family: "SourceSansPro Regular", sans-serif;
    color: var(--paragraph);
    border-radius: 6px !important;
}

.tempus-dominus-widget [data-action]:hover,
.tempus-dominus-widget [data-action]:focus,
.tempus-dominus-widget [data-action]:active {
    background-color: #FAF9FB !important;
}

.tempus-dominus-widget [data-action="incrementHours"] i,
.tempus-dominus-widget [data-action="incrementMinutes"] i,
.tempus-dominus-widget [data-action="decrementHours"] i,
.tempus-dominus-widget [data-action="decrementMinutes"] i { 
    display: none; 
}

.tempus-dominus-widget [data-action="incrementHours"],
.tempus-dominus-widget [data-action="incrementMinutes"] {
    background-image: url('../svg/icons/timepicker_arrow_up.svg') !important;
    background-size: initial !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.tempus-dominus-widget [data-action="decrementHours"],
.tempus-dominus-widget [data-action="decrementMinutes"] {
    background-image: url('../svg/icons/timepicker_arrow_down.svg') !important;
    background-size: initial !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ======================================
 * Other style
====================================== */
.tbr_form--note {
    font-size: 14px;
    margin-top: 10px;
    opacity: .5;
}

.tbr_form--container .form-group {
    padding-top: 0;
    margin-bottom: 24px;
    border: none;
}

textarea.tbr_disables--resizing {
    resize: none !important;
}

.tbr_illustration {
    background-color: #FFFFFF;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tbr_illustration--wrap {
    max-width: 500px;
    width: 100%;
    padding: 20px;
}

.tbr_illustration--bg-light {
    background-color: var(--light);
}

.tbr_illustration--wrap > div > img {
    max-width: 100%;
    margin-top: -10px;
    margin-bottom: 40px;
}

.tbr_today--info {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 24px;
}

.tbr_today--info p {
    margin-bottom: 0;
}

@media only screen and (max-width: 576px) {
    .tbr_today--info .tbr_page--title {
        font-size: 18px;
    }
}

@media only screen and (max-width: 992px) {
    .tbr_form--container .form-group {
        margin-bottom: 8px;
    }

    .tbr_illustration {
        padding-top: 60px;
    }
}

/* ======================================
 * Modal
====================================== */
.modal-backdrop {
    z-index: 2001;
}

.modal-backdrop.show {
    opacity: .2;
}

.modal {
    z-index: 2002;
}

.modal-content {
    border: none;
    border-radius: 10px;
    -webkit-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    -moz-box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
    box-shadow: 0px 25px 50px 0px rgba(102,50,89,0.15);
}

.modal-footer {
    padding: 16px;
    background-color: var(--light);
    border-top: 1px solid #F0EEF2;
    border-radius: 0 0 10px 10px;
}

.tbr_modal--confirm {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px 0;
    text-align: left;
}

.tbr_modal-confirm--icon {
    margin-right: 20px;
}

.tbr_modal-confirm--icon img {
    min-width: 52px;
}

.tbr_modal-confim--title {
    font-family: 'Poppins Semi Bold', sans-serif;
    font-size: 20px;
    padding-bottom: 0;
    margin-bottom: 5px;
    color: var(--heading);
}

/* ======================================
 * Alert
====================================== */
.tbr_alert {
    position: relative;
    width: 100%;
    height: initial;
    background-color: #F6F5FB;
    padding: 20px 24px;
    border-radius: 10px;
}

.tbr_alert--primary {
    background-color: rgba(var(--rgb-primary), 0.1);
    color: var(--primary);
}

.tbr_alert--success {
    background-color: rgba(var(--rgb-success), 0.1);
    color: var(--success);
}

.tbr_alert--warning {
    background-color: rgba(var(--rgb-warning), 0.1);
    color: var(--warning);
}

.tbr_alert--danger {
    background-color: rgba(var(--rgb-danger), 0.1);
    color: var(--danger);
}

/* ======================================
 * Label
====================================== */
.tbr_label {
    padding: 8px 16px;
    border-radius: 6px;
    background-color: var(--light);
    text-align: center;
}

.tbr_label.tbr_label--primary {
    background-color: rgba(var(--rgb-primary), 0.15);
    color: var(--primary);
}

.tbr_label.tbr_label--danger {
    background-color: rgba(var(--rgb-danger), 0.15);
    color: var(--danger);
}

.tbr_label.tbr_label--warning {
    background-color: rgba(var(--rgb-warning), 0.15);
    color: var(--warning);
}

.tbr_label.tbr_label--success {
    background-color: rgba(var(--rgb-success), 0.15);
    color: var(--success);
}

.tbr_label.tbr_label--heading {
    background-color: rgba(var(--rgb-heading), 0.15);
    color: var(--heading);
}

/* ======================================
 * Progress Circle
====================================== */
.circle-success {
    fill: rgba(var(--rgb-success), 0.12) !important;
}

.stroke-success {
    stroke: var(--success) !important;
}

.circle-danger {
    fill: rgba(var(--rgb-danger), 0.12) !important;
}

.stroke-danger {
    stroke: var(--danger) !important;
}

.circle-warning {
    fill: rgba(var(--rgb-warning), 0.12) !important;
}

.stroke-warning {
    stroke: var(--warning) !important;
}

.circle-primary {
    fill: rgba(var(--rgb-primary), 0.12) !important;
}

.stroke-primary {
    stroke: var(--primary) !important;
}

.circle-number {
    font-size: 22px;
}

.tick-danger {
    background-color: var(--danger);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.tick-warning {
    background-color: var(--warning);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.tick-success {
    background-color: var(--success);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.tick-heading {
    background-color: var(--heading);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.cross-danger {
    background-color: var(--danger);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.cross-warning {
    background-color: var(--warning);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.cross-success {
    background-color: var(--success);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.cross-heading {
    background-color: var(--heading);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.clock-danger {
    background-color: var(--danger);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.clock-warning {
    background-color: var(--warning);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.clock-success {
    background-color: var(--success);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.clock-heading {
    background-color: var(--heading);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.dash-danger {
    background-color: var(--danger);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.dash-warning {
    background-color: var(--warning);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.dash-success {
    background-color: var(--success);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.dash-heading {
    background-color: var(--heading);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
}

.toast {
    position: fixed;
    top: 10px;
    right: 10px;
    font-size: 16px;
    z-index: 2;
    background-color: var(--white) !important;
}

.info-header {
    display: flex;
    align-items: center;
}

.desc-header {
    margin-left: 10px;
}

.toast:not(.showing):not(.show) {
    display: none;
}

.toast-body {
    background-color: var(--white);
}

/* ======================================
 * Spinner
====================================== */
.tbr_spinner--todo {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2002;
    top: 0;
    left: 0;
}

.tbr_spinner--wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
}

.tbr_spinner--wrap .text-primary {
    color: var(--primary) !important;
    width: 3rem;
    height: 3rem;
}

/* ======================================
 * Responsive Layout
====================================== */
@media only screen and (min-width: 1200px) {
    .tbr_mobile--nav-settings,
    .tbr_mobile--nav-show {
        display: none;
    }

    .tbr_todo--li-mobile {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
    body .tbr_task--area {
        line-height: 1.4rem;
    }

    .tbr_aside--brand,
    .tbr_aside--nav {
        display: none;
    }

    .tbr_aside {
        width: 100%;
        height: 60px;
        z-index: 2002;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tbr_aside--profile,
    .tbr_aside--profile .tbr_link--avatar {
        width: 40px;
        height: 40px;
    }

    .tbr_aside--profile {
        position: relative;
        display: initial;
        justify-content: initial;
        align-items: initial;
    }

    .tbr_mobile--nav-settings {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tbr_mobile--nav-settings:hover,
    .tbr_mobile--nav-settings:focus,
    .tbr_mobile--nav-settings:active {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .tbr_mobile--hidden-nav {
        display: none;
    }

    body .tbr_workspace {
        width: 100%;
        left: 0;
    }

    .tbr_header--left,
    .tbr_todo--li-left {
        display: none;
    }

    .tbr_header--right {
        width: calc(100% + 40px);
        height: auto;
        position: relative !important;
        top: 0;
        left: 0;
        padding: 0;
        margin-left: -20px;
        justify-content: center;
        background-color: #FFFFFF;
    }
    
    .tbr_header--right .tbr_contents--hl {
        display: none;
    }

    .tbr_header--right .tbr_btn {
        height: 40px;
        min-height: 40px;
        padding-right: 16px;
        padding-left: 18px;
        border-radius: 8px;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .tbr_header--right .tbr_btn.tbr_btn--square {
        padding: 0;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        border-radius: 8px;
    }

    /* Mobile todo histories */
    .tbr_todo--li-mobile .tbr_day {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        margin-top: -2px;
        margin-bottom: 0px;
    }

    .tbr_todo--li-mobile .tbr_clock {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: -2px;
    }

    .tbr_todo--li-mobile .tbr_clock span {
        font-size: 14px;
        line-height: 18px;
        opacity: .8;
    }

    .tbr_todo--li-mobile .tbr_clock svg {
        margin-right: 2px;
    }

    /* Responsive todo */
    .tbr_tdl--area {
        width: 80px;
        min-width: 80px;
        height: 80px;
        margin-top: 60px;
    }

    .tbr_todo--list-item {
        flex-direction: column;
        justify-content: center;
        height: 80px;
        padding: 0;
    }

    .tbr_todo--li-right .tbr_progress {
        display: none;
    }

    .tbr_todo--illustration img,
    .tbr_todo--illustration svg {
        max-width: 100%;
        width: initial;
        height: initial;
    }

    .tbr_task--area {
        overflow-x: hidden;
        padding: 0;
        margin: 60px 0 0 0;
        height: calc(100vh - (60px + 42px));
        min-height: calc(100vh - (60px + 42px));
    }

    .tbr_tdl--area {
        height: calc(100vh - (60px + 42px));
        min-height: calc(100vh - (60px + 42px));
    }

    .tbr_task--list .task-child .task-name {
        padding: 5px 0;
    }

    .tbr_task--create {
        width: 100%;
        min-width: 100%;
        left: 0;
    }

    .tbr_task--create {
        padding-right: 0;
    }

    .tbr_task--create input.form-control {
        padding: 0 20px 2px;
    }

    .tbr_todo--load {
        font-size: 14px;
        line-height: 1rem;
        padding-left: 8px;
        padding-right: 8px;
    }

    .tbr_aside--profile .tbr_dropdown--menu {
        margin-top: 8px !important;
    }

    .tbr_spinner--wrap .text-primary {
        color: var(--primary) !important;
        width: 2.5rem;
        height: 2.5rem;
    }

    .tbr_task--create button[type="submit"] {
        width: 50px;
        max-width: 50px;
        min-width: 50px;
    }

    .tbr_task--area .tbr_body.tbr_clock--in .tbr_body--task,
    .tbr_body--no-tdl.tbr_clock--in .tbr_illustration {
        width: calc(100% - 50px);
        min-width: calc(100% - 50px);
        max-width: calc(100% - 50px);
        padding: 20px;
    }

    .tbr_body--no-tdl.tbr_clock--in {
        margin-top: 60px;
        overflow-y: hidden;
        height: calc(100vh - 60px);
    }

    /* Responsive reset button */
    .tbr_clock--in .tbr_body--rest {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        padding: 0 !important;
    }

    .tbr_clock--in .tbr_body--rest .tbr_rest--actions {
        height: auto;
        padding: 0;
    }

    .tbr_clock--in .tbr_body--rest .tbr_rest--actions div {
        margin-bottom: 0;
    }

    .tbr_clock--in .tbr_body--rest .tbr_rest--actions div span:nth-child(1) {
        display: none;
    }

    .tbr_clock--in .tbr_body--rest .tbr_rest--actions div span:nth-child(2) {
        width: 50px;
        height: 50px;
        padding: 1px 0 0 0;
        background-color: rgba(var(--rgb-warning), 0.1);
    }

    .tbr_clock--in .tbr_body--rest .tbr_rest--actions div span:nth-child(2) svg {
        width: 32px;
        height: 32px;
    }

    .tbr_clock--in .tbr_body--rest .tbr_rest--actions button {
        width: 50px;
        height: 50px;
        border-radius: 0;
        padding: 0;
    }

    .tbr_clock--in .tbr_body--rest .tbr_rest--actions button svg {
        margin: 0;
        width: 32px;
        height: 32px;
    }

    .tbr_clock--in .tbr_body--rest .tbr_rest--actions button span {
        display: none;
    }

    .tbr_clock--in .tbr_body--rest .tbr_rests,
    .tbr_clock--in .tbr_rest--flexible-info div {
        display: none !important;
    }
}