body {
margin: 0;
padding: 0;
line-height: 1.4;
color: black;
font-family: arial, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: #3568f0;
}
img,
svg {
border: none;
max-width: 100%;
vertical-align: middle;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-weight: bold;
}
p,
figure,
figcaption,
blockquote,
caption,
fieldset,
embed,
object,
applet,
canvas,
caption,
iframe,
strike,
time,
video {
border: 0;
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
strong {
font-weight: bold;
}
::after,
::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:focus {
outline: -webkit-focus-ring-color auto 0;
}
/* End fix*/
/* Bengen header */
.header {
float: left;
width: 100%;
height: 70px;
background: #fff;
position: relative;
padding-left: 18%;
z-index: 999;
}
.header.sticky {
box-shadow: 0 4px 10px rgba(182, 182, 182, 0.18);
position: fixed;
top: 0;
left: 0;
}
.header-left {
float: left;
padding-left: 24px;
position: relative;
top: 2px;
}
.head-name {
font-size: 28px;
font-weight: bold;
}
.head-meta {
color: #888;
display: block;
position: relative;
top: 22px;
}
.m-logo {
display: none;
position: absolute;
left: 54px;
top: 8px;
}
.m-logo img {
display: inline-block;
height: 40px;
width: 114px;
}
.header-right {
float: right;
position: relative;
padding-right: 24px;
top: 20px;
}
.head-item {
display: inline-block;
margin-left: 12px;
}
.btn-menu {
position: absolute;
display: none;
place-items: center;
height: 36px;
width: 36px;
cursor: pointer;
z-index: 99;
border-radius: 100%;
}
.hotline {
font-size: 14px;
font-weight: bold;
}
.color-dark {
color: #59595c;
}
.svgdarktheme {
margin-right: 6px;
position: relative;
top: -2px;
}
.themme-color {
display: inline-block;
}
.btn-nangcapgdv {
display: inline-block;
background: #3568f0;
color: #fff;
height: 28px;
line-height: 28px;
border-radius: 24px;
padding: 0 16px;
cursor: pointer;
position: relative;
top: -3px;
}
.btn-nangcapgdv svg {
margin-right: 8px;
position: relative;
top: -2px;
}
.btn-tokens {
display: inline-block;
background: #e6f6ff;
color: #222;
height: 28px;
font-size: 14px;
line-height: 28px;
border-radius: 24px;
padding: 0 16px;
position: relative;
top: -3px;
}
.head-item.m-hoidap {
display: none;
}
.menu-hoidap {
display: inline-block;
cursor: pointer;
}
.btn-theme-dark {
background: url(../../images/chat/light.svg) no-repeat;
position: relative;
height: 20px;
width: 36px;
top: -2px;
margin-left: 3px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
/* tgl checkbox */
.tgl {
display: none;
}
.tgl + .tgl-btn {
outline: 0;
display: inline-block;
width: 36px;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 16px;
height: 16px;
}
.tgl + .tgl-btn:after {
left: 0;
}
.tgl + .tgl-btn:before {
display: none;
}
.tgl:checked + .tgl-btn:after {
left: 50%;
border: 0;
}
.tgl-light + .tgl-btn {
background: #ebebeb;
border-radius: 24px;
padding: 2px;
transition: all 0.4s ease;
vertical-align: middle;
position: relative;
top: -3px;
margin-left: 6px;
}
.tgl-light + .tgl-btn:after {
border-radius: 100%;
background: #fff;
transition: all 0.2s ease;
}
.tgl-light:checked + .tgl-btn {
background: #0066ff;
}
/* Bengin dropdown*/
.dropdown-item {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-icon {
width: 40px;
height: 40px;
background: #f2f2f2;
border-radius: 100%;
display: inline-block;
place-items: center;
display: grid;
}
.dropdown-wrapper {
background: #fff;
display: none;
position: absolute;
z-index: 99;
padding: 16px;
right: 0;
width: 300px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
z-index: 99;
}
.dropdown-active .icon-dropdown {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.dropdown-item.f-user {
top: -6px;
}
.thumb-user {
display: grid;
place-items: center;
cursor: pointer;
height: 34px;
width: 34px;
border-radius: 100%;
background: #f2f2f2;
overflow: hidden;
}
.thumb-user img {
display: inline-block;
height: 34px;
width: 34px;
border-radius: 100%;
}
.profile-item {
width: 100%;
float: left;
margin-bottom: 16px;
}
.profile-thumb {
float: left;
margin-right: 16px;
}
.profile-thumb img {
height: 34px;
width: 34px;
border-radius: 100%;
display: inline-block;
}
.profile-info {
display: grid;
}
.profile-name {
font-size: 15px;
font-weight: bold;
}
.profile-email {
color: #555;
}
.profile-tokens {
background: #e6f6ff;
padding: 16px;
border-radius: 8px;
}
.tokens-text {
font-size: 15px;
margin-bottom: 10px;
color: #222;
}
.tokens-number {
margin-bottom: 5px;
}
.tokens-timeline {
position: relative;
}
.tokens-dark {
position: absolute;
left: 0;
width: 100%;
height: 5px;
background: #cbdde8;
border-radius: 3px;
top: 0;
}
.tokens-red {
position: absolute;
left: 0;
width: 0;
height: 5px;
background: #ec2227;
border-radius: 3px;
top: 0;
z-index: 9;
}
.nav-profile {
margin: 0;
padding: 0;
}
.nav-profile li {
list-style: none;
}
.nav-profile a {
display: block;
border-radius: 8px;
padding: 10px 16px;
font-size: 15px;
position: relative;
color: #666;
}
.nav-profile li a.active,
.nav-profile li a:hover {
background: #f5f5f5;
color: #222222;
}
.nav-profile li a svg {
position: relative;
margin-right: 10px;
top: -2px;
}
.div-logout {
width: 100%;
float: left;
padding-top: 12px;
border-top: solid 1px #f1f1f1;
}
.btn-logout {
display: block;
border-radius: 8px;
padding: 10px 16px;
font-size: 15px;
position: relative;
color: #666;
}
.btn-logout:hover {
background: #f5f5f5;
color: #222222;
}
.btn-logout svg {
position: relative;
margin-right: 10px;
top: -2px;
}
.main {
float: left;
width: 100%;
}
.sidebar-left {
width: 18%;
position: fixed;
height: 100%;
background: #f0f4f9;
left: 0;
top: 0;
z-index: 9999;
}
.content-center {
float: left;
padding: 0 18%;
width: 100%;
position: relative;
}
.sidebar-right {
width: 18%;
right: 0;
position: fixed;
z-index: 99;
height: 100%;
top: 0;
padding: 120px 0 20px 20px;
background: #fbfbfb;
}
.content-right {
float: left;
padding-left: 18%;
width: 100%;
position: relative;
}
/*End header */
/*Bengin sidebar left */
.block-sidebar {
padding: 60px 16px 20px 16px;
border-bottom: solid 1px #e8e8e8;
}
.block-sidebar:last-child {
border-bottom: 0;
}
.block-logo {
margin-bottom: 32px;
}
.block-logo a {
display: inline-block;
}
.block-logo img {
height: 60px;
width: 170px;
}
.head-text {
color: #888;
font-size: 15px;
margin-bottom: 16px;
}
.block-nav {
margin-bottom: 40px;
}
.block-nav:last-child {
margin-bottom: 0;
}
.ul-nav-link {
margin: 0;
padding: 0;
}
.ul-nav-link > li {
list-style: none;
position: relative;
}
.nav-item-link {
display: block;
border: solid 1px #fbfbfb;
border-radius: 24px;
padding: 10px 12px 10px 36px;
font-size: 15px;
position: relative;
color: #666;
cursor: pointer;
}
.nav-item-link.active,
.nav-item-link:hover {
border: solid 1px #f1f1f1;
background: #fff;
color: #222222;
}
.svg-nav {
position: absolute;
left: 12px;
top: 14px;
height: 16px;
width: 16px;
}
.svgdropdown {
position: absolute;
right: 6px;
top: 6px;
width: 30px;
height: 30px;
display: grid;
place-items: center;
cursor: pointer;
}
.ic-chevron {
transform: rotate(0deg);
}
.ic-chevron.chevron-selected {
transform: rotate(90deg);
}
.dropdown-trigger {
display: none;
}
.dropdown-trigger.trigger-active {
display: block;
}
.ul-nav-sub {
margin-left: 27px;
padding: 0;
}
.ul-nav-sub li {
list-style: none;
}
.ul-nav-sub li a {
display: block;
border: solid 1px #fbfbfb;
border-radius: 24px;
padding: 10px;
font-size: 14px;
position: relative;
color: #666;
}
.ul-nav-sub li a.active,
.ul-nav-sub li a:hover {
border: solid 1px #f1f1f1;
background: #fff;
color: #222222;
}
.bn-thunghiem {
display: inline-block;
background: #ffe17d;
color: #977917;
font-size: 12px;
border-radius: 6px;
padding: 0 6px;
height: 22px;
line-height: 22px;
margin-left: 10px;
position: relative;
top: -2px;
}
.bn-new {
display: inline-block;
background: #119a6b;
color: #fff;
font-size: 12px;
border-radius: 6px;
padding: 0 6px;
height: 22px;
line-height: 22px;
margin-left: 10px;
position: relative;
top: -2px;
}
.dot-red {
display: inline-block;
background: #e23f3f;
height: 8px;
width: 8px;
border-radius: 100%;
}
.list-chat {
width: 100%;
float: left;
margin-bottom: 24px;
}
.btn-chat-new {
background: #e6f6ff;
color: #222;
display: block;
height: 48px;
line-height: 48px;
text-align: center;
border-radius: 24px;
font-size: 15px;
padding: 0 12px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(182, 182, 182, 0.35);
}
.btn-chat-new svg {
margin-right: 6px;
position: relative;
top: 0;
}
.head-text-sidebar {
font-size: 18px;
font-weight: bold;
}
.head-text-sidebar2 {
font-size: 15px;
font-weight: bold;
margin-bottom: 12px;
}
.ul-list-chat {
margin: 0;
padding: 0;
float: left;
width: 100%;
}
.ul-list-chat > li {
list-style: none;
padding: 10px 40px 10px 36px;
position: relative;
cursor: pointer;
float: left;
width: 100%;
border-radius: 24px;
}
.ul-list-chat > li:hover {
background: #e8e8e8;
}
.text-hoi-dap {
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.div-icmore {
position: absolute;
right: 0;
top: -4px;
display: none;
z-index: 9;
height: 32px;
width: 32px;
}
.ul-list-chat > li:hover .div-icmore {
display: inline-block;
}
.div-icmore .dropdown-item {
display: block;
}
.icon-hoidap {
background: url(../../images/chat/icon_Hoidap.svg) no-repeat;
background-position: center;
position: absolute;
left: 12px;
height: 16px;
width: 16px;
top: 12px;
}
.icon-more {
background: url(../../images/chat/f-more1.svg) no-repeat;
background-color: #e8e8e8;
background-position: center;
position: absolute;
right: 5px;
height: 32px;
width: 32px;
border-radius: 100%;
top: 8px;
opacity: 0.7;
}
.icon-more:hover {
background-color: #fff;
box-shadow: 0 4px 10px rgba(182, 182, 182, 0.18);
}
.div-icmore .dropdown-wrapper {
padding: 12px;
width: 180px;
right: 36px;
}
.nav-more {
margin: 0;
padding: 0;
}
.nav-more li {
list-style: none;
}
.nav-more a {
display: block;
border-radius: 8px;
padding: 10px 16px;
font-size: 15px;
position: relative;
color: #666;
}
.nav-more li a.active,
.nav-more li a:hover {
background: #f5f5f5;
color: #222222;
}
.nav-more li a svg {
position: relative;
margin-right: 10px;
top: -2px;
}
.close-sidebar {
float: right;
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
cursor: pointer;
font-size: 32px;
font-weight: normal;
position: absolute;
right: 0;
top: 0;
display: none;
}
.close-sidebar2 {
float: right;
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
cursor: pointer;
font-size: 32px;
font-weight: normal;
position: absolute;
right: 0;
top: 0;
display: none;
}
.m-overflow {
overflow: hidden;
}
.sidebar-bottom {
position: fixed;
bottom: 0;
width: 18%;
left: 0;
}
.position-sidebar .sidebar-bottom {
position: relative;
bottom: auto;
width: 100%;
left: auto;
}
.support-center {
display: block;
padding-left: 14px;
margin-top: 20px;
}
.ailuat-item-link {
display: block;
padding: 10px 10px 10px 0;
font-size: 14px;
color: #666;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svg-ailuat {
display: inline-block;
height: 22px;
vertical-align: middle;
margin-right: 9px;
position: relative;
top: -2px;
}
.ailuat-item-link:hover {
background: #f2f2f2;
color: #666;
}
.ailuat-item-link.active {
color: #ec2227;
background: #f2f2f2;
}
/*End sidebar left */
/*Bengen section */
.section {
float: left;
width: 100%;
position: relative;
padding: 48px;
margin-bottom: 140px;
}
.section-header {
float: left;
width: 100%;
position: relative;
}
.headding-title {
font-size: 22px;
text-align:center;
}
.section-content {
float: left;
width: 100%;
position: relative;
}
.scroll-1 {
overflow-y: auto;
scrollbar-width: thin;
}
.scroll-1::-webkit-scrollbar {
width: 8px;
background-color: #f9f9f9;
}
.scroll-1::-webkit-scrollbar-thumb {
background: #ebebeb;
}
.scroll-2 {
float: left;
width: 100%;
overflow-y: auto;
max-height: 70vh;
scrollbar-width: thin;
padding-right: 20px;
}
.scroll-2::-webkit-scrollbar {
width: 8px;
background-color: #f9f9f9;
}
.scroll-2::-webkit-scrollbar-thumb {
background: #ebebeb;
}
.div-chat-new {
width: 100%;
float: left;
padding-right: 28px;
margin-bottom: 24px;
}
/* Form group */
.form-group {
float: left;
width: 100%;
position: relative;
margin-bottom: 12px;
display: table;
}
.form-group:last-child {
margin-bottom: 0;
}
.input:-webkit-autofill,
.textarea:-webkit-autofill,
.select:-webkit-autofill {
box-shadow: 0 0 0 1000px white inset;
}
.input::-ms-clear {
display: none;
}
.select::-ms-expand {
display: none;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.input,
.select,
.textarea,
.button {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: inherit;
outline: none;
}
.input,
.select {
height: 40px;
padding: 0 10px;
}
.input,
.select,
.textarea {
display: inline-block;
border: solid 1px #ebebeb;
margin: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
text-overflow: "";
appearance: none;
border-radius: 2px;
webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.input:focus,
.select:focus,
.textarea:focus {
border: solid 1px #eaeaea;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, 0.6);
box-shadow: inset inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, 0.6);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.select {
background: url(../../images/chat/arow.svg) no-repeat;
background-position: right 6px top 50%;
padding-right: 16px;
background-size: 12px;
}
.textarea {
height: 85px;
padding: 10px;
resize: vertical;
}
.button {
background: none;
cursor: pointer;
border: 0;
padding: 0;
margin: 0;
}
.button:focus {
outline: 0;
}
.full {
width: 100%;
}
.label {
display: block;
position: relative;
}
.radio {
height: 14px;
width: 14px;
padding: 0;
margin: 0;
}
.checkbox {
height: 14px;
width: 14px;
padding: 0;
margin: 0;
}
.btn {
display: inline-block;
height: 36px;
line-height: 36px;
cursor: pointer;
text-align: center;
outline: none;
background: #ebebeb;
padding: 0 16px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.btn-default {
background: #0066ff;
color: #fff;
}
.table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.table td,
.table th {
padding: 10px;
border-top: solid 1px #ebebeb;
}
.table-bordered,
.table-bordered td,
.table-bordered th {
border: solid 1px #ebebeb;
}
.table-striped tr:nth-of-type(2n + 2) {
background-color: #f9f9f9;
}
.table-scroll {
overflow-x: auto;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
/*Bengen block-chat */
.footer {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background: #fff;
padding: 12px 18%;
z-index: 9;
box-shadow: 0 -20px 20px rgb(255, 255, 255);
}
.form-ailuat {
display: block;
padding: 0 48px;
}
.textarea-message {
width: 100%;
border-radius: 48px;
font-size: 16px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3);
border: 0;
outline: none;
margin: 0;
font-family: "Plus Jakarta Sans", sans-serif;
max-height: 13rem;
resize: none;
line-height: 1.5;
padding: 22px 60px 20px 36px;
height: 68px;
}
.textarea-message:focus {
border: 0;
outline: none;
}
.btn-send {
position: absolute;
right: 10px;
top: 10px;
width: 48px;
height: 48px;
cursor: pointer;
display: grid;
place-items: center;
}
.btn-send svg:hover circle {
fill: #3568f0;
}
.btn-send svg:hover path {
fill: #fff;
}
.svg-pause {
background: #f2f2f2;
color: #c30000;
border-radius: 100%;
}
.btn-send svg {
position: absolute;
top: 0;
left: 0;
}
.text-ft {
font-size: 12px;
color: #bbb;
display: block;
text-align: center;
}
/*Bengen block-content */
.block-textlvn {
width: 100%;
float: left;
margin-bottom: 24px;
font-size: 16px;
}
.block-layoutlvn {
width: 100%;
float: left;
display: grid;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: repeat(4, 1fr);
margin-bottom: 24px;
}
.item-boxlvn {
background: #fbfbfb;
position: relative;
padding: 16px 16px 50px 16px;
border-radius: 8px;
min-height: 110px;
font-size: 16px;
cursor: pointer;
}
.item-boxlvn:hover {
background: #f2f2f2;
}
.svg-qalvn {
background: #fff;
height: 32px;
width: 32px;
border-radius: 100%;
padding: 6px;
position: absolute;
right: 16px;
bottom: 16px;
}
.post-scroll {
float: left;
width: 100%;
padding: 0 40px;
overflow-y: auto;
max-height: 70vh;
scrollbar-width: thin;
}
.post-scroll::-webkit-scrollbar {
width: 8px;
background-color: #f9f9f9;
}
.post-scroll::-webkit-scrollbar-thumb {
background: #ebebeb;
}
.block-content {
width: 100%;
float: left;
border: solid 1px #ebebeb;
padding: 16px;
border-radius: 8px;
margin-bottom: 12px;
}
.post-thumb {
float: left;
margin-right: 12px;
}
.post-thumb img {
height: 24px;
width: 24px;
border-radius: 100%;
display: inline-block;
}
.post-inner {
display: grid;
}
.post-name {
margin-bottom: 10px;
}
.post-tag {
font-weight: bold;
font-size: 13px;
display: inline-block;
background: #f1f1f1;
border-radius: 24px;
padding: 3px 12px;
}
.post-tag svg {
position: relative;
top: -2px;
margin-left: 5px;
}
.post-summary {
font-size: 16px;
line-height: 1.6;
position: relative;
}
.post-summary a {
color: #1c79e4;
text-decoration: underline;
}
.post-summary p {
margin: 12px 0;
}
.post-meta {
margin-top: 12px;
text-align: right;
}
.div-item {
display: inline-block;
margin-left: 16px;
}
.btn-like,
.btn-dislike,
.btn-copoy,
.btn-taive {
display: inline-block;
cursor: pointer;
}
.btn-like svg {
fill: #888888;
stroke: #888888;
}
.btn-dislike svg {
fill: #888888;
stroke: #888888;
}
.btn-like.active svg {
fill: #ec2227;
stroke: #ec2227;
}
.btn-dislike.active svg {
fill: #ec2227;
stroke: #ec2227;
}
.like-comment {
width: 100%;
float: left;
display: none;
margin-top: 20px;
}
.like-comment.active {
display: block;
}
.dislike-comment {
width: 100%;
float: left;
display: none;
margin-top: 20px;
}
.dislike-comment.active {
display: block;
}
.w-dropdown {
margin: auto;
max-width: 640px;
display: block;
}
.dropdown-like {
padding: 16px;
background: #f7f9fd;
border-radius: 8px;
position: relative;
width: 100%;
float: left;
}
.block-chat-info {
margin-bottom: 16px;
width: 100%;
float: left;
background: #fbfbfb;
padding: 16px 16px 16px 42px;
border-radius: 6px;
font-size: 16px;
position: relative;
}
.block-chat-info svg {
position: absolute;
left: 16px;
top: 17px;
}
.font-18 {
font-size: 18px;
color: #555;
}
.font-16 {
font-size: 15px;
color: #555;
}
.btn-ranting {
background: #fff;
display: inline-block;
height: 36px;
line-height: 36px;
cursor: pointer;
text-align: center;
outline: none;
padding: 0 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border: solid 1px #ebebeb;
margin-right: 8px;
color: #555;
font-size: 14px;
}
.btn-ranting:hover,
.btn-ranting.active {
background: #e7f0fd;
color: #3568f0;
border: solid 1px #e7f0fd;
}
.btn-ranting.active svg {
margin-right: 5px;
position: relative;
top: -2px;
}
.textarea.textarea-ranting {
border-radius: 8px;
width: 100%;
background: #fff;
padding: 12px;
}
.btn-send-ranting {
float: right;
font-size: 15px;
font-weight: bold;
color: #888;
cursor: pointer;
}
.btn-send-ranting:hover {
color: #222;
}
.close-like {
z-index: 9;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
cursor: pointer;
font-size: 24px;
font-weight: normal;
position: absolute;
right: 0;
top: 0;
}
.close-dislike {
z-index: 9;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
cursor: pointer;
font-size: 24px;
font-weight: normal;
position: absolute;
right: 0;
top: 0;
}
.table.table-history {
background: #fbfbfb;
font-size: 15px;
}
.table.table-history td {
border: 0;
padding: 10px;
}
.table.table-history td:first-child {
width: 25%;
}
.svghistory {
margin-right: 12px;
position: relative;
top: -2px;
}
.btn-nangcapgdv.ml-30 {
margin-left: 30px;
}
.block {
width: 100%;
float: left;
margin-bottom: 24px;
}
.text-gdi {
font-size: 16px;
}
.table.table-giao-dich {
border: solid 1px #ebebeb;
text-align: center;
font-size: 15px;
}
.input.input-search {
width: 100%;
height: 48px;
border-radius: 48px;
padding: 0 48px 0 20px;
font-size: 16px;
}
.btn-search {
position: absolute;
right: 5px;
top: 4px;
width: 40px;
height: 40px;
cursor: pointer;
display: grid;
place-items: center;
}
.form-search {
max-width: 60%;
}
.icon_view {
min-width: 24px;
display: inline-block;
cursor: pointer;
height: 24px;
width: 24px;
}
/* Bengin popup */
.popup-bg {
background: rgba(255, 255, 255, 0.94);
position: fixed;
display: none;
z-index: 9999;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
align-items: flex-start;
justify-content: center;
}
.popup-wrapper {
max-width: 640px;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
}
.popup-wrapper.w1000 {
max-width: 1000px;
}
.popup-body {
float: left;
width: 100%;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 24px;
overflow: hidden;
}
.popup-header {
float: left;
width: 100%;
border-bottom: solid 1px #ebebeb;
padding: 16px 24px;
}
.popup-title {
float: left;
font-size: 24px;
padding-right: 24px;
font-weight: bold;
}
.close-popup {
position: absolute;
right: 12px;
top: 12px;
z-index: 999;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
cursor: pointer;
border-radius: 100%;
}
.popup-content {
float: left;
width: 100%;
}
.entry-popup {
float: left;
width: 100%;
padding: 24px;
}
.popup-height {
position: relative;
max-height: 75vh;
overflow-y: auto;
scrollbar-width: thin;
}
.popup-height::-webkit-scrollbar {
width: 8px;
background-color: #f9f9f9;
}
.popup-height::-webkit-scrollbar-thumb {
background: #ebebeb;
}
.target-hidden {
display: none !important;
}
.target-expanded {
display: block !important;
}
.overflow-hidden {
overflow: hidden;
}
/*Bengen box-chat-lvn */
.btn-boxchat {
height: 40px;
width: 40px;
position: fixed;
right: 24px;
bottom: 12px;
display: grid;
place-items: center;
cursor: pointer;
z-index: 99;
border: solid 1px #e0e0e0;
border-radius: 100%;
}
.btn-boxchat img {
width: 24px;
height: 24px;
}
.box-chat-lvn {
position: fixed;
display: none;
max-width: calc(100vw - 20px);
width: 100%;
background: #fff;
bottom: 16px;
right: 16px;
overflow: hidden;
z-index: 9999;
border-radius: 12px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.box-chat-lvn.show-chat {
display: inline-block;
}
.head-chatlvn {
background: #3568f0;
color: #fff;
position: relative;
padding: 16px;
padding-right: 80px;
width: 100%;
float: left;
}
.content-chatlvn {
padding: 16px;
width: 100%;
float: left;
max-height: 390px;
overflow-y: auto;
scrollbar-width: thin;
}
.content-chatlvn::-webkit-scrollbar {
width: 8px;
background-color: #f9f9f9;
}
.content-chatlvn::-webkit-scrollbar-thumb {
background: #ebebeb;
}
.text-head-chatlvn {
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
}
.text-head-chatlvn2 {
font-size: 14px;
color: #b7caff;
}
.div-Fright {
position: absolute;
right: 16px;
top: 24px;
}
.btn-reset-chat {
cursor: pointer;
height: 30px;
width: 30px;
display: inline-block;
text-align: center;
}
.btn-hiden-chat {
cursor: pointer;
height: 30px;
width: 30px;
margin-left: 12px;
display: inline-block;
text-align: center;
}
.chat-namelvn {
display: inline-block;
font-size: 12px;
color: #555;
}
.chat-namelvn svg {
margin-left: 3px;
position: relative;
top: -2px;
}
.block-chatlvn1 {
display: block;
padding-left: 56px;
margin-bottom: 12px;
text-align: right;
}
.block-chatlvn2 {
display: block;
margin-bottom: 12px;
padding-right: 56px;
}
.list-chatlvn {
display: block;
margin-bottom: 12px;
}
.div-chatlvn {
display: inline-block;
background: #3568f0;
color: #fff;
padding: 8px 16px;
font-size: 15px;
border-radius: 35px 8px 35px 35px;
}
.div-chatlvn2 {
position: relative;
border: solid 1px #ebebeb;
padding: 16px;
border-radius: 12px;
}
.text-chatlvn2 {
font-size: 15px;
line-height: 1.6;
color: #222222;
}
.div-metalvn2 {
text-align: right;
margin-top: 12px;
}
.color-linklvn {
color: #3568f0;
text-decoration: underline;
}
.box-chat-bottom {
float: left;
width: 100%;
background: #fff;
padding: 16px;
position: relative;
}
/* .chat-message {
width: 100%;
border-radius: 48px;
font-size: 15px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
border: 0;
outline: none;
margin: 0;
font-family: "Plus Jakarta Sans", sans-serif;
max-height: 13rem;
resize: none;
line-height: 1.5;
padding: 14px 60px 12px 20px;
height: 50px;
} */
.btn-sendmessage {
position: absolute;
right: 6px;
top: 5px;
width: 40px;
height: 40px;
cursor: pointer;
display: grid;
place-items: center;
}
.btn-sendmessage svg:hover circle {
fill: #3568f0;
}
.btn-sendmessage svg:hover path {
fill: #fff;
}
.form-group.fix-font12 {
text-align: center;
font-size: 12px;
color: #888888;
}
.box-chat-bottom::after {
position: absolute;
top: -24px;
left: 0;
right: 0;
width: 100%;
content: "";
height: 32px;
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 79%);
}
.div-gop-y {
border: solid 1px #ebebeb;
border-radius: 10px;
padding: 16px;
cursor: pointer;
}
.div-gop-y:hover {
background: #f9f9f9;
}
.img-gop-y {
float: left;
margin-right: 16px;
}
.text-gop-y {
display: grid;
font-size: 16px;
line-height: 1.6;
}
.iconlvn-head {
display: inline-block;
margin-right: 12px;
height: 32px;
width: 32px;
position: relative;
top: -5px;
}
.img-gop-y img {
width: 40px;
}
.list-file {
display: block;
margin-bottom: 8px;
font-size: 16px;
}
.btn-upfile {
display: inline-block;
background: #ccf1ff;
border-radius: 24px;
padding: 3px 14px;
cursor: pointer;
font-size: 14px;
margin-left: 16px;
}
.mgright {
margin-right: 10px;
}
.text-upfile {
color: #3568f0;
}
.del-file {
display: inline-block;
margin-left: 12px;
cursor: pointer;
}
.btn-huy {
display: inline-block;
margin-right: 16px;
font-size: 16px;
cursor: pointer;
padding: 6px;
}
.btn-gui-loi {
background: #3568f0;
display: inline-block;
font-size: 16px;
cursor: pointer;
text-align: center;
color: #fff;
min-width: 120px;
border-radius: 24px;
padding: 6px;
}
.font-20 {
font-size: 20px;
}
.btn-gui-close {
background: #3568f0;
display: inline-block;
font-size: 16px;
cursor: pointer;
text-align: center;
color: #fff;
min-width: 120px;
border-radius: 24px;
padding: 6px;
}
.custom-list {
column-count: 2;
padding: 0;
margin: 0;
}
.custom-list li {
position: relative;
padding-left: 16px;
list-style: none;
}
.custom-list li::before {
content: "-";
position: absolute;
left: 0;
top: 0;
}
.head-icon img {
height: 48px;
display: inline-block;
vertical-align: middle;
}
.ailuat-text {
font-size: 24px;
font-weight: bold;
}
.head-icon {
margin-bottom: 12px;
}
.box-content-default {
display: block;
padding-top: 10%;
}
.btn-outline2 {
display: inline-block;
padding: 8px 16px;
text-align: center;
border-radius: 24px;
cursor: pointer;
font-size: 14px;
border: solid 1px #e3e3e3;
margin: 5px;
}
.btn-outline2 svg {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
margin-right: 5px;
}
.btn-outline2:hover {
color: #222;
background: #f2f2f2;
}
/*Bengen chinh sach bao mat */
.page-header {
margin-bottom: 20px;
border-bottom: solid 1px #ebebeb;
padding-bottom: 20px;
float: left;
width: 100%;
}
.page-title {
float: left;
}
.page-font {
float: right;
}
.page-body {
float: left;
width: 100%;
font-size: 16px;
line-height: 1.8;
}
.page-body p {
padding: 12px 0;
}
.page-body a {
color: #3568f0;
text-decoration: underline;
}
.page-body h2 {
font-size: 20px;
}
.page-body h3 {
font-size: 18px;
}
.page-body h4,
.page-body h5,
.page-body h6 {
font-size: 16px;
}
.text-font {
display: inline-block;
vertical-align: middle;
}
.text-fontaa {
display: inline-block;
vertical-align: middle;
margin-left: 12px;
cursor: pointer;
}
/*Bengen FQA */
.block-fqas {
width: 100%;
float: left;
margin-bottom: 20px;
}
.title-fqa {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
}
.list-fqa {
width: 100%;
float: left;
}
/* droplist */
.droplist {
position: relative;
width: 100%;
float: left;
background: #f8f8f8;
padding: 16px;
border-radius: 12px;
margin-bottom: 20px;
}
.droplist-content {
display: none;
width: 100%;
float: left;
font-size: 16px;
margin-top: 16px;
line-height: 1.6;
}
.droplist-open .droplist-content {
display: block;
}
.droplist-title {
float: left;
padding-right: 36px;
width: 100%;
background: url("../../images/chat/daucong.svg") no-repeat;
background-position: right center;
background-size: 16px;
font-size: 16px;
cursor: pointer;
}
.droplist-open .droplist-title {
background: url("../../images/chat/dautru.svg") no-repeat;
background-position: right center;
background-size: 16px;
}
.pagination {
float: left;
width: 100%;
}
.page-numbers {
display: inline-block;
height: 36px;
line-height: 36px;
text-align: center;
padding: 0 6px;
min-width: 36px;
cursor: pointer;
margin-right: 6px;
margin-bottom: 6px;
border-radius: 4px;
}
.page-numbers:hover {
background-color: #3568f0;
color: #fff;
}
.page-numbers:hover svg {
fill: #fff;
}
.page-numbers.active {
background-color: #3568f0;
color: #fff;
}
.table-setting {
line-height: 1.6;
font-size: 15px;
}
.text-cauhoi {
position: relative;
padding-right: 24px;
min-width: 260px;
}
.btn-editsetting {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
width: 24px;
height: 24px;
place-items: center;
display: grid;
}
.f-left {
float: left;
}
.f-right {
float: right;
}
.label-text {
margin-bottom: 6px;
display: block;
}
.btndell {
display: inline-block;
margin-right: 12px;
background: #f2f2f2;
font-size: 14px;
border-radius: 24px;
height: 30px;
line-height: 30px;
padding: 0 12px;
}
.btndell svg {
display: inline-block;
vertical-align: middle;
margin-right: 12px;
}
.btndell svg {
display: inline-block;
vertical-align: middle;
margin-right: 12px;
height: 20px;
width: 20px;
top: -2px;
position: relative;
background: #ddd;
border-radius: 100%;
padding: 5px;
cursor: pointer;
}
/* Bengin tabs-goi */
.popup-wrapper.width1200 {
max-width: 1200px;
}
.popup-wrapper.width940 {
max-width: 940px;
}
.popup-wrapper.width500 {
max-width: 500px;
}
.block-tab {
width: 100%;
float: left;
margin-bottom: 60px;
text-align: center;
}
.heading-ai {
font-size: 20px;
}
.tabs-goi {
display: inline-block;
background: #f1f1f1;
border-radius: 8px;
padding: 2px;
}
.tabs-goi-item {
cursor: pointer;
list-style: none;
text-align: center;
display: inline-block;
margin: 0;
padding: 8px;
font-size: 14px;
}
.tabs-goi-item.active {
color: #ec2227;
font-weight: bold;
background: #fff;
border-radius: 8px;
}
.tabs-goi-content {
display: none;
float: left;
width: 100%;
margin-bottom: 24px;
}
.tabs-goi-content.active {
display: block;
}
.width-calc {
margin: 0 -5%;
width: calc(100% + 10%);
}
.goi-dv4 {
width: 100%;
float: left;
display: grid;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: repeat(4, 1fr);
}
.col-itemdv4 {
border: solid 2px #eee;
position: relative;
padding: 16px;
border-radius: 10px;
}
.color-cyan {
color: #199cbe;
}
.color-green {
color: #32bb00;
}
.color-red {
color: #ec2227;
}
.color-orange {
color: #ef8f0d;
}
.color-blue {
color: #3568f0;
}
.div-goi {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.div-goi-item {
margin-bottom: 10px;
height: 84px;
}
.div-dangky {
margin-bottom: 20px;
}
.div-goi-vnd {
display: block;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
}
.s-thang {
font-size: 14px;
position: relative;
top: -8px;
margin-left: 8px;
font-weight: normal;
}
.div-goi-vnd sup {
font-size: 14px;
}
.img-user {
height: 32px;
width: 32px;
border-radius: 100%;
margin: 0 -5px;
display: inline-block;
}
.text-user-seclect {
vertical-align: middle;
margin-left: 10px;
font-size: 12px;
}
.div-goi-dangky {
display: block;
margin-bottom: 20px;
}
.btn-goi-trainghiem {
display: block;
border: solid 1px #199cbe;
padding: 10px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
background: #199cbe;
color: #fff;
}
.btn-goi-trainghiem svg {
fill: #fff;
margin-left: 10px;
position: relative;
top: -3px;
}
.btn-goi-trainghiem:hover svg {
fill: #fff;
}
.btn-goi-coban {
display: block;
border: solid 1px #4e841f;
padding: 10px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
color: #4e841f;
}
.btn-goi-coban svg {
fill: #4e841f;
margin-left: 10px;
position: relative;
top: -3px;
}
.btn-goi-coban:hover svg {
fill: #fff;
}
.color-dark {
color: #666;
}
.btn-goi-nangcao {
display: block;
background: #ec2227;
padding: 10px;
font-size: 14px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
color: #fff;
}
.btn-goi-nangcao svg {
fill: #fff;
margin-left: 10px;
position: relative;
top: -3px;
}
.btn-goi-nangcao:hover svg {
fill: #fff;
}
.btn-dkgoi {
display: block;
border: solid 1px #ddd;
padding: 10px;
font-size: 14px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
}
.btn-dkgoi:hover {
border: solid 1px #ec2227;
background: #ec2227;
color: #fff;
}
.btn-dkgoi svg {
margin-left: 10px;
position: relative;
top: -2px;
fill: #555;
}
.btn-dkgoi:hover svg {
fill: #fff;
}
.btn-goi-doanhnghiep {
display: block;
border: solid 1px #ef8f0d;
padding: 10px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
color: #ef8f0d;
}
.btn-goi-doanhnghiep:hover {
border: solid 1px #ef8f0d;
background: #ef8f0d;
color: #fff;
}
.btn-goi-doanhnghiep svg {
fill: #ef8f0d;
margin-left: 10px;
position: relative;
top: -3px;
}
.btn-goi-doanhnghiep:hover svg {
fill: #fff;
}
.btn-goi-nangcao:hover {
background: #cc161a;
}
.btn-nangcao:hover svg {
fill: #fff;
}
.btn-goi-coban:hover {
border: solid 1px #4e841f;
background: #4e841f;
color: #fff;
}
.btn-coban:hover svg {
fill: #fff;
}
.btn-goi-trainghiem:hover {
border: solid 1px #13819e;
background: #13819e;
}
.btn-trainghiem:hover svg {
fill: #fff;
}
.ul-content-goi {
margin: 0;
padding: 0;
line-height: 1.6;
}
.ul-content-goi li {
list-style: none;
margin-bottom: 12px;
font-size: 14px;
padding: 0 0 0 24px;
position: relative;
}
.ul-content-goi li svg {
position: absolute;
left: 0;
top: 5px;
}
.col-itemdv4.boder-cyan {
border: solid 2px #199cbe;
}
.col-itemdv4.boder-green {
border: solid 2px #4e841f;
}
.col-itemdv4.boder-red {
border: solid 2px #ec2227;
}
.col-itemdv4.boder-orange {
border: solid 2px #ef8f0d;
}
.div-font {
width: 100%;
float: left;
margin-bottom: 24px;
}
.div-goile {
width: 100%;
float: left;
border: solid 2px #eee;
border-radius: 12px;
padding: 16px;
}
.head-goile {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.div-goile-info {
padding-right: 30%;
position: relative;
}
.btn-goile {
display: inline-block;
border: solid 1px #ddd;
padding: 10px;
font-size: 14px;
cursor: pointer;
min-width: 250px;
font-weight: bold;
text-align: center;
border-radius: 24px;
position: absolute;
right: 0;
bottom: 0;
}
.btn-goile svg {
fill: #555;
margin-left: 10px;
}
.btn-goile:hover {
border: solid 1px #ec2227;
background: #ec2227;
color: #fff;
}
.btn-goile:hover svg {
fill: #fff;
}
.div-phobien {
display: block;
position: absolute;
top: -19px;
text-align: center;
left: 0;
width: 100%;
}
.bg-phobien {
display: inline-block;
background: #ec2227;
color: #fff;
height: 32px;
line-height: 32px;
padding: 0 12px;
border-radius: 5px;
min-width: 170px;
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
.font-sale {
font-weight: bold;
}
.div-sale {
font-size: 13px;
text-decoration: line-through;
margin-bottom: 12px;
text-align: center;
}
.div-goi-item2 {
margin-bottom: 10px;
height: 120px;
}
.div-sale sup {
font-size: 14px;
font-weight: bold;
}
.f16 {
font-size: 13px;
font-weight: normal;
}
/* End tabs-goi */
/* Bengin poup-het-han */
.poup-het-han {
background: rgba(0, 0, 0, 0.6);
position: fixed;
display: none;
z-index: 9999;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.w-inner {
position: relative;
margin: auto;
max-width: 480px;
top: 20%;
padding: 0 16px;
}
.close-het-han {
position: absolute;
right: 26px;
top: 5px;
z-index: 999;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
cursor: pointer;
border-radius: 100%;
}
.font-s1 {
font-size: 24px;
margin-bottom: 8px;
text-align: center;
font-weight: bold;
}
.font-s2 {
font-size: 16px;
text-align: center;
}
.bg-line-1 {
width: 100%;
margin: 12px 0;
float: left;
background: #e0e0e0;
position: relative;
height: 3px;
}
.bg-line-2 {
width: 100%;
position: absolute;
left: 0;
top: 0;
background: #c30000;
height: 3px;
}
.text-chsd {
float: left;
font-size: 16px;
}
.num-chsd {
float: right;
font-size: 16px;
}
.item-inline {
display: inline-block;
margin-left: 12px;
}
.table-giao-dich th {
background: #fbfbfb;
}
.btn.btn-orange {
background: orange;
color: #fff;
height: 30px;
line-height: 30px;
border-radius: 24px;
}
.btn.btn-red {
background: red;
color: #fff;
height: 30px;
line-height: 30px;
border-radius: 24px;
}
.btn.btn-green {
background: green;
color: #fff;
height: 30px;
line-height: 30px;
border-radius: 24px;
}
.btn.btn-darkgray {
background: darkgray;
color: #fff;
height: 30px;
line-height: 30px;
border-radius: 24px;
}
/* End poup-het-han */
/* Bengin thong tin tai khoan */
.block-tttk {
width: 100%;
float: left;
margin-bottom: 30px;
border-bottom: solid 1px #e0e0e0;
}
.block-tttk:last-child {
margin-bottom: 0;
border-bottom: 0;
}
.head-tttk {
width: 100%;
float: left;
margin-bottom: 32px;
font-size: 24px;
font-weight: bold;
}
.list-tttk {
width: 100%;
float: left;
margin-bottom: 32px;
}
.div-tttk1 {
width: 100%;
float: left;
margin-bottom: 12px;
}
.left-tttk {
float: left;
}
.tttk-text {
display: inline-block;
font-weight: bold;
font-size: 16px;
}
.right-tttk {
float: right;
}
.btn-edit-tttk {
display: inline-block;
cursor: pointer;
color: #666;
}
.tttk-active .button-edit {
display: none;
}
.tttk-active .button-huy {
display: inline-block;
}
.button-huy {
display: none;
}
.profile-photo2 {
text-align: center;
float: left;
width: 100%;
margin-bottom: 24px;
margin-top: 12px;
}
.profile-photo2 img {
display: inline-block;
vertical-align: middle;
height: 114px;
width: 114px;
border-radius: 100%;
}
.content-tttk-edit {
width: 100%;
margin-top: 20px;
float: left;
display: none;
}
.btn-inner {
display: inline-block;
margin: 0 8px;
}
.btn-outline {
display: inline-block;
padding: 8px 20px;
text-align: center;
border-radius: 5px;
cursor: pointer;
font-size: 15px;
border: solid 1px #d9d9d9;
}
.btn-default-red {
background: #d8293a;
color: #fff;
display: inline-block;
cursor: pointer;
cursor: pointer;
padding: 8px 20px;
border-radius: 5px;
font-size: 15px;
}
.list-tttk-2 {
width: 100%;
float: left;
margin-bottom: 24px;
}
.icons-tttk svg {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
position: relative;
top: -3px;
}
.btn-xoa-link {
display: inline-block;
cursor: pointer;
color: #666;
}
.btn-dell-tttk {
cursor: pointer;
font-size: 16px;
display: inline-block;
}
.label-grid-4 {
display: grid;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: repeat(4, 1fr);
}
.label-item {
display: inline-block;
margin-right: 16px;
}
.shows-pass2 {
position: absolute;
right: 8px;
top: 2px;
cursor: pointer;
color: #2e3192;
width: 36px;
height: 36px;
display: grid;
place-items: center;
font-size: 15px;
}
.max-width640 {
max-width: 640px;
margin: auto;
}
/* End thong tin tai khoan */
/*Bengen Tra cuu VB Ai */
.section-doc {
float: left;
width: 100%;
position: relative;
padding: 48px;
}
.w-content-doc {
width: 86%;
float: left;
}
.doc-article {
width: 100%;
border-bottom: solid 1px #e0e0e0;
padding: 16px 0;
float: left;
}
.doc-clumn1 {
margin-right: 16px;
float: left;
min-width: 40px;
}
.doc-number {
font-weight: 600;
font-size: 16px;
display: inline-block;
color: #555;
}
.doc-clumn2 {
display: grid;
}
.doc-left {
width: 72%;
float: left;
padding-right: 80px;
}
.doc-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 12px;
}
.doc-tag {
margin-right: 16px;
font-size: 14px;
display: inline-block;
}
.doc-tag svg {
margin-right: 6px;
position: relative;
top: -2px;
}
.doc-right {
width: 28%;
float: left;
}
.doc-dmy {
font-size: 14px;
margin-bottom: 5px;
display: flex;
}
.w-doc-dmy1 {
color: #888;
width: 120px;
min-width: 120px;
}
.bg-yellow {
background: yellow;
}
.search-content {
width: 100%;
float: left;
border: solid 1px #ebebeb;
border-radius: 10px;
padding: 24px;
}
.search-tab {
width: 100%;
float: left;
}
.ul-tab-doc {
display: inline-block;
margin: 0;
padding-left: 24px;
font-size: 16px;
color: #59595c;
}
.search-text {
width: 100%;
float: left;
color: #a7a7a7;
font-size: 14px;
margin-bottom: 3px;
padding-left: 24px;
}
.ul-tab-doc li {
display: inline-block;
list-style: none;
margin-right: 16px;
padding-bottom: 12px;
cursor: pointer;
}
.ul-tab-doc li.active {
font-size: 18px;
color: #de0305;
font-weight: bold;
border-bottom: solid 3px;
}
.btn-ycbsvb {
float: right;
border: solid 1px #f88;
padding: 5px 16px;
border-radius: 24px;
cursor: pointer;
color: #ec2227;
}
.btn-ycbsvb svg {
margin-right: 6px;
}
.btn-search-doc {
position: absolute;
right: 6px;
top: 6px;
height: 40px;
cursor: pointer;
background: #f1f1f1;
border-radius: 24px;
width: 180px;
text-align: center;
line-height: 40px;
color: #ea2529;
font-size: 16px;
font-weight: bold;
}
.btn-search-doc svg {
margin-right: 8px;
}
.input.input-search-doc {
width: 100%;
height: 52px;
border-radius: 48px;
padding: 0 190px 0 20px;
font-size: 16px;
}
.form {
float: left;
width: 100%;
position: relative;
}
.text-danger {
text-align: right;
font-size: 12px;
font-style: italic;
color: red;
margin-top: 4px;
}
.text-meo {
position: absolute;
right: 0;
top: -30px;
}
.text-meo svg {
margin-right: 5px;
}
.text-meo-2 {
display: none;
position: absolute;
background: #f9f9f9;
padding: 16px;
width: 480px;
right: 0;
z-index: 9;
border: solid 1px #e0e0e0;
border-radius: 10px;
font-size: 14px;
line-height: 1.6;
}
.text-meo:hover .text-meo-2 {
display: block;
}
.post-meta-doc {
margin-top: 16px;
}
.post-title-doc {
font-size: 16px;
font-weight: bold;
}
.post-summary-doc1 {
font-size: 16px;
color: #de0305;
}
.post-summary-doc2 {
font-size: 16px;
color: #737373;
margin-top: 8px;
}
.tag-item-doc {
display: inline-block;
font-size: 14px;
background: #ececec;
padding: 4px 12px;
border-radius: 24px;
margin-right: 12px;
}
.tag-item-doc.bg-hhl {
background: #ffecec;
color: #de0305;
}
.row-doc {
border-bottom: solid 1px #e9e9e9;
padding: 16px 0;
}
.row-doc:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.bg-pink {
background: #ffe5e5;
}
.font-bold {
font-weight: bold;
}
.btn-eyes-more {
cursor: pointer;
}
.tip-huongdan {
color: #196719;
position: relative;
font-size: 12px;
background: #d8f3d8;
border-radius: 24px;
padding: 2px 10px;
font-weight: bold;
display: inline-block;
}
.tip-huongdan-content {
display: none;
position: absolute;
background: azure;
padding: 16px;
width: 400px;
max-width: calc(100% - 40px);
left: 0;
z-index: 9;
border: dashed 1px #adcead;
color: #196719;
border-radius: 10px;
font-size: 16px;
font-weight: normal;
line-height: 1.6;
}
.tip-huongdan:hover .tip-huongdan-content {
display: block;
}
.box-eyes-content {
position: fixed;
display: none;
bottom: 16px;
right: 16px;
width: 500px;
background: #fff3e4;
border: solid 1px #ffd39e;
padding: 24px;
border-radius: 12px;
font-size: 16px;
line-height: 1.6;
z-index: 99;
}
.box-eyes-content.showeyes {
display: block;
}
.eyes-title {
margin-bottom: 12px;
}
.eyes-list {
margin-bottom: 12px;
}
.eyes-more {
text-align: right;
}
.eyes-more a {
color: #ec2227;
font-size: 14px;
text-decoration: underline;
}
.eyes-more a svg {
margin-right: 6px;
}
.c-blue {
color: blue !important;
}
.tip-bottom {
position: relative;
color: blue !important;
}
.tip-bottom:after {
display: none;
content: attr(data-tool);
position: absolute;
background: azure;
left: 0;
width: 190px;
color: blue;
border: solid 1px #e0e0e0;
padding: 8px;
border-radius: 6px;
font-size: 14px;
}
.tip-bottom:hover:after {
display: block;
top: 20px;
}
.block-goiy {
width: 100%;
float: left;
border: solid 1px #dde8f2;
padding: 16px;
font-size: 16px;
border-radius: 8px;
margin-bottom: 12px;
background: aliceblue;
}
.div-hethan {
float: right;
position: relative;
}
.bg-hethan {
background: #c30000;
color: #fff;
font-size: 12px;
padding: 3px 5px;
border-radius: 5px;
}
.tip-hethan {
display: none;
border-radius: 8px;
position: absolute;
font-size: 14px;
width: 250px;
right: 0;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 99;
padding: 12px;
}
.div-hethan:hover .tip-hethan {
display: block;
}
.hov-hethan {
display: inline-block;
position: relative;
}
.bgtop-hethan {
display: inline-block;
background: #c30000;
color: #fff;
height: 28px;
font-size: 14px;
line-height: 28px;
border-radius: 24px;
padding: 0 16px;
position: relative;
top: -3px;
}
.hov-hethan:hover .tip-hethan {
display: block;
}
.cursor {
display: inline-block;
cursor: pointer;
}
/*End Tra cuu VB Ai */
/*Bengen theme-dark */
.theme-dark {
background: #222;
color: #d9d9d9;
}
.theme-dark .sidebar-left {
border-right: solid 1px #333;
background: #222;
}
.theme-dark .sidebar-right {
background: #222;
border-left: solid 1px #333;
}
.theme-dark .block-sidebar:last-child {
border-bottom: 0;
}
.theme-dark .block-content {
border: solid 1px #555;
}
.theme-dark .header {
background: #222;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.theme-dark .stickyheader {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.theme-dark .footer {
background: #222;
box-shadow: 0 -20px 20px rgb(28, 27, 27);
}
.theme-dark .text-hoi-dap {
color: #d9d9d9;
}
.theme-dark .nav-item-link {
border: solid 1px #222;
color: #d9d9d9;
}
.theme-dark .nav-item-link.active,
.theme-dark .nav-item-link:hover {
border: solid 1px #333;
background: #333;
color: #d9d9d9;
}
.theme-dark .ul-nav-sub li a {
border: solid 1px #222;
color: #d9d9d9;
}
.theme-dark .ul-nav-sub li a {
border: solid 1px #222;
color: #d9d9d9;
}
.theme-dark .ul-nav-sub li a.active,
.theme-dark .ul-nav-sub li a:hover {
border: solid 1px #333;
background: #333;
color: #d9d9d9;
}
.theme-dark .block-sidebar {
border-bottom: solid 1px #333;
}
.theme-dark .w-text-info {
background: #333;
color: #d9d9d9;
}
.theme-dark .input,
.theme-dark .select,
.theme-dark .textarea {
border: solid 1px #333;
background-color: #222;
color: #d9d9d9;
}
.theme-dark .dropdown-wrapper {
background: #000;
}
.theme-dark .text-ft {
color: #d9d9d9;
}
.theme-dark .profile-name a {
color: #d9d9d9;
}
.theme-dark .post-tag {
color: #d9d9d9;
background: #333;
}
.theme-dark .post-summary {
color: #d9d9d9;
}
.theme-dark .nav-more a {
color: #d9d9d9;
}
.theme-dark .nav-profile a {
color: #d9d9d9;
}
.theme-dark .div-logout {
border-top: solid 1px #333;
}
.theme-dark .btn-ranting {
border: solid 1px #333;
color: #d9d9d9;
}
.theme-dark .btn-ranting:hover {
background: #333;
}
.theme-dark .btn-send-ranting {
color: #d9d9d9;
}
.theme-dark .btn-send-ranting:hover {
color: #ccc;
}
.theme-dark .nav-profile li a.active,
.theme-dark .nav-profile li a:hover {
background: #333;
color: #d9d9d9;
}
.theme-dark .btn-logout:hover {
background: #333;
color: #d9d9d9;
}
.theme-dark .icon-more {
background-color: #333;
}
.theme-dark .icon-more:hover {
background-color: #000;
}
.theme-dark .nav-more li a.active,
.theme-dark .nav-more li a:hover {
background: #333;
color: #d9d9d9;
}
.theme-dark .table.table-history {
background: #333;
}
.theme-dark .color-dark {
color: #d9d9d9;
}
.theme-dark .table td,
.theme-dark .table th {
border-top: solid 1px #333;
}
.theme-dark .table.table-giao-dich {
border: solid 1px #333;
}
.theme-dark .btn-theme-dark {
background: url(../../images/chat/dark.svg) no-repeat;
}
.theme-dark .profile-tokens {
background: #333;
}
.theme-dark .tokens-text {
color: #d9d9d9;
}
.theme-dark .profile-email {
color: #d9d9d9;
}
.theme-dark .btn-send svg circle {
fill: #333;
}
.theme-dark .btn-send svg path {
fill: #d9d9d9;
}
.theme-dark .btn-chat-new {
background: #333;
color: #d9d9d9;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.theme-dark .btn-logout {
color: #d9d9d9;
}
.theme-dark .font-18,
.theme-dark .font-16 {
color: #d9d9d9;
}
.theme-dark svg,
.theme-dark svg g,
.theme-dark svg path,
.theme-dark svg stroke {
fill: #d9d9d9;
}
.theme-dark svg path {
fill: #d9d9d9;
}
.theme-dark .btn-search svg circle {
fill: #333;
}
.theme-dark .btn-like:hover svg,
.theme-dark .btn-like.active svg {
fill: #ec2227;
}
.theme-dark .btn-like:hover svg path,
.theme-dark .btn-like.active svg path {
fill: #ec2227;
}
.theme-dark .btn-dislike:hover svg,
.theme-dark .btn-dislike.active svg {
fill: #ec2227;
}
.theme-dark .btn-dislike:hover svg path,
.theme-dark .btn-dislike.active svg path {
fill: #ec2227;
}
.theme-dark .ul-list-chat > li:hover {
background: #333;
}
.theme-dark .icon-hoidap {
background: url(../../images/chat/icon_Hoidap2.svg) no-repeat;
}
.theme-dark .textarea-message {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.38);
background-color: #333;
color: #d9d9d9;
}
.theme-dark .box-chat-lvn {
background: #000;
}
.theme-dark .text-chatlvn2 {
color: #d9d9d9;
}
.theme-dark .chat-namelvn {
color: #d9d9d9;
}
.theme-dark .box-chat-bottom {
background: #000;
}
.theme-dark .box-chat-bottom::after {
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 79%);
}
.theme-dark .chat-message {
background: #333;
color: #d9d9d9;
}
.theme-dark .btn-sendmessage svg circle {
fill: #333;
}
.theme-dark .div-chatlvn2 {
border: solid 1px #333;
}
.theme-dark .dropdown-like {
background: #000;
}
.theme-dark .btn-ranting {
background: #000;
}
.theme-dark .btn-ranting.active {
background: #333;
}
.theme-dark .input:focus,
.theme-dark .select:focus,
.theme-dark .textarea:focus {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.38);
}
.theme-dark .popup-body {
background: #333;
}
.theme-dark .div-gop-y {
border: solid 1px #555;
}
.theme-dark .div-gop-y:hover {
background: #333;
}
.theme-dark .btn-upfile {
background: #777575;
}
.theme-dark .popup-header {
border-bottom: solid 1px #555;
}
.theme-dark .popup-bg {
background: rgba(0, 0, 0, 0.82);
}
.theme-dark .droplist {
background: #333;
}
.theme-dark .ul-content-goi li svg circle {
fill: #f21e1e;
}
.theme-dark .tabs-goi {
background: #151515;
}
.theme-dark .col-itemdv4 {
border: solid 2px #484848;
}
.theme-dark .div-goile {
border: solid 2px #444;
}
.theme-dark .item-boxlvn {
background: #333;
color: #fff;
}
.theme-dark .item-boxlvn:hover {
background: #555;
color: #fff;
}
.theme-dark .svg-qalvn path {
fill: #222;
}
.theme-dark .block-chat-info {
width: 100%;
float: left;
background: #333;
padding: 16px 16px 16px 48px;
border-radius: 6px;
font-size: 16px;
position: relative;
}
.theme-dark .table-striped tr:nth-of-type(2n + 2) {
background-color: #131313;
}
.theme-dark .table-bordered,
.theme-dark .table-bordered td,
.theme-dark .table-bordered th {
border: solid 1px #2d2d2d;
}
.theme-dark .btn {
background: #444;
}
.theme-dark .table-giao-dich th {
background: #000;
}
.theme-dark a {
color: #d9d9d9;
}
.theme-dark .bg-yellow {
color: #222;
}
.theme-dark .search-content {
border: solid 1px #373737;
}
.theme-dark .doc-article {
border-bottom: solid 1px #373737;
}
.theme-dark .btn-search-doc {
background: #000;
}
.theme-dark .tag-item-doc {
background: #444;
}
.theme-dark .text-meo-2 {
background: #333;
}
.theme-dark .box-eyes-content {
background: #313131;
border: solid 1px #424242;
}
.theme-dark .row-doc {
border-bottom: solid 1px #3c3c3c;
}
.theme-dark .row-doc:last-child {
border-bottom: 0;
}
.theme-dark .block-goiy {
border: solid 1px #444;
background: #393939;
}
/*End theme-dark */
:root {
color-scheme: light;
--font-default: "Arial", "Plus Jakarta Sans", sans-serif;
--active-color: #ffffff;
--active-bg-color: #d82823;
--background-color: #ffffff;
--tooltip-color: #977917;
--tooltip-bgr: #ffe17d;
--color: #000000;
--drd-bgr: #fbfbfb;
--drd-hover-bgr: #fff;
--box-shadow: 0 4px 10px #222;
--border-color: #f1f1f1;
--tbl-header-bg: #e5eaea;
--bg-primary: #3568f0;
--bg-primary-hover: #225aef;
--bg-secondary: #888;
--bg-secondary-hover: #797676;
--bg-danger: #f10808;
--bg-danger-hover: #cb0f0f;
--svg-qalvn-active-bg-color: #f5ebc6;
/*****************/
--falcon-blue: #2c7be5;
--falcon-indigo: #727cf5;
--falcon-purple: #6b5eae;
--falcon-pink: #ff679b;
--falcon-red: #e63757;
--falcon-orange: #fd7e14;
--falcon-yellow: #f5803e;
--falcon-green: #00d27a;
--falcon-teal: #02a8b5;
--falcon-cyan: #27bcfd;
--falcon-white: #fff;
--falcon-gray: #748194;
--falcon-gray-dark: #4d5969;
--falcon-gray-black: #000;
--falcon-gray-100: #f9fafd;
--falcon-gray-200: #edf2f9;
--falcon-gray-300: #d8e2ef;
--falcon-gray-400: #b6c1d2;
--falcon-gray-500: #9da9bb;
--falcon-gray-600: #748194;
--falcon-gray-700: #5e6e82;
--falcon-gray-800: #4d5969;
--falcon-gray-900: #344050;
--falcon-gray-1000: #232e3c;
--falcon-gray-1100: #0b1727;
--falcon-gray-white: #fff;
--falcon-primary: #2c7be5;
--falcon-secondary: #748194;
--falcon-success: #00d27a;
--falcon-info: #27bcfd;
--falcon-warning: #f5803e;
--falcon-danger: #e63757;
--falcon-light: #f9fafd;
--falcon-dark: #0b1727;
--falcon-primary-rgb: 44, 123, 229;
--falcon-secondary-rgb: 116, 129, 148;
--falcon-success-rgb: 0, 210, 122;
--falcon-info-rgb: 39, 188, 253;
--falcon-warning-rgb: 245, 128, 62;
--falcon-danger-rgb: 230, 55, 87;
--falcon-light-rgb: 249, 250, 253;
--falcon-dark-rgb: 11, 23, 39;
--falcon-white-rgb: 255, 255, 255;
--falcon-black-rgb: 0, 0, 0;
--falcon-body-color-rgb: 94, 110, 130;
--falcon-body-bg-rgb: 237, 242, 249;
--falcon-font-sans-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--falcon-font-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--falcon-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--falcon-body-font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol;
--falcon-body-font-size: 1rem;
--falcon-body-font-weight: 400;
--falcon-body-line-height: 1.5;
--falcon-body-color: #5e6e82;
--falcon-body-bg: #edf2f9;
}
:root,
:root.light,
:root .light {
--falcon-facebook: #3c5a99;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-facebook-hover-color: #30487a;
--falcon-google-plus: #dd4b39;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-google-plus-hover-color: #b13c2e;
--falcon-twitter: #1da1f2;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-twitter-hover-color: #1781c2;
--falcon-linkedin: #0077b5;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-linkedin-hover-color: #005f91;
--falcon-youtube: #ff0001;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-youtube-hover-color: #cc0001;
--falcon-github: #333333;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-github-hover-color: #292929;
--falcon-black: #000;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-black-hover-color: black;
--falcon-100: #f9fafd;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-100-hover-color: #fafbfd;
--falcon-200: #edf2f9;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-200-hover-color: #f1f5fa;
--falcon-300: #d8e2ef;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-300-hover-color: #e0e8f2;
--falcon-400: #b6c1d2;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-400-hover-color: #c5cddb;
--falcon-500: #9da9bb;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-500-hover-color: #7e8796;
--falcon-600: #748194;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-600-hover-color: #5d6776;
--falcon-700: #5e6e82;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-700-hover-color: #4b5868;
--falcon-800: #4d5969;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-800-hover-color: #3e4754;
--falcon-900: #344050;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-900-hover-color: #2a3340;
--falcon-1000: #232e3c;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-1000-hover-color: #1c2530;
--falcon-1100: #0b1727;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-1100-hover-color: #09121f;
--falcon-white: #fff;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-white-hover-color: white;
--falcon-primary: #2c7be5;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-primary-hover-color: #2362b7;
--falcon-secondary: #748194;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-secondary-hover-color: #5d6776;
--falcon-success: #00d27a;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-success-hover-color: #00a862;
--falcon-info: #27bcfd;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-info-hover-color: #1f96ca;
--falcon-warning: #f5803e;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-warning-hover-color: #c46632;
--falcon-danger: #e63757;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-danger-hover-color: #b82c46;
--falcon-light: #f9fafd;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-light-hover-color: #fafbfd;
--falcon-dark: #0b1727;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-dark-hover-color: #09121f;
--falcon-soft-primary: #e6effc;
--falcon-soft-secondary: #eef0f2;
--falcon-soft-success: #e0faef;
--falcon-soft-info: #e5f7ff;
--falcon-soft-warning: #fef0e8;
--falcon-soft-danger: #fce7eb;
--falcon-soft-light: #fefeff;
--falcon-soft-dark: #e2e3e5;
/* -------------------------------- Accordion ------------------------------- */
--falcon-accordion-border-color: rgba(0, 0, 0, 0.125);
--falcon-accordion-button-active-color: #286fce;
--falcon-accordion-button-active-bg: var(--falcon-200);
/* ------------------------------ Reveal Button ----------------------------- */
--falcon-btn-reveal-color: dark;
--falcon-btn-reveal-bg: #e6e6e6;
--falcon-btn-reveal-border-color: #dfdfdf;
/* ------------------------------ Falcon Button ----------------------------- */
--falcon-btn-falcon-background: var(--falcon-white);
--falcon-btn-disabled-color: #4d5969;
--falcon-btn-falcon-box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
--falcon-btn-falcon-hover-box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.1), 0 3px 9px 0 rgba(43, 45, 80, 0.08),
0 1px 1.5px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
--falcon-btn-falcon-default-color: #4d5969;
--falcon-btn-falcon-default-hover-color: #404a57;
--falcon-btn-falcon-default-active-background: #e6e6e6;
--falcon-btn-falcon-default-active-border: #404a57;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-primary-color: var(--falcon-primary);
--falcon-btn-falcon-primary-hover-color: #2566be;
--falcon-btn-falcon-primary-active-background: #d5e5fa;
--falcon-btn-falcon-primary-active-color: #2566be;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-primary-background: #d5e5fa;
--falcon-alert-primary-border-color: #c0d7f7;
--falcon-alert-primary-color: #1a4a89;
--falcon-alert-primary-link-color: #2362b7;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-primary-background: #d5e5fa;
--falcon-list-group-item-primary-color: #1a4a89;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-primary-background-color: #d5e5fa;
--falcon-badge-soft-primary-color: #1c4f93;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-secondary-color: var(--falcon-secondary);
--falcon-btn-falcon-secondary-hover-color: #606b7b;
--falcon-btn-falcon-secondary-active-background: #e3e6ea;
--falcon-btn-falcon-secondary-active-color: #606b7b;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-secondary-background: #e3e6ea;
--falcon-alert-secondary-border-color: #d5d9df;
--falcon-alert-secondary-color: #464d59;
--falcon-alert-secondary-link-color: #5d6776;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-secondary-background: #e3e6ea;
--falcon-list-group-item-secondary-color: #464d59;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-secondary-background-color: #e3e6ea;
--falcon-badge-soft-secondary-color: #7d899b;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-success-color: var(--falcon-success);
--falcon-btn-falcon-success-hover-color: #00ae65;
--falcon-btn-falcon-success-active-background: #ccf6e4;
--falcon-btn-falcon-success-active-color: #00ae65;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-success-background: #ccf6e4;
--falcon-alert-success-border-color: #b3f2d7;
--falcon-alert-success-color: #007e49;
--falcon-alert-success-link-color: #00a862;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-success-background: #ccf6e4;
--falcon-list-group-item-success-color: #007e49;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-success-background-color: #ccf6e4;
--falcon-badge-soft-success-color: #00864e;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-info-color: var(--falcon-info);
--falcon-btn-falcon-info-hover-color: #209cd2;
--falcon-btn-falcon-info-active-background: #d4f2ff;
--falcon-btn-falcon-info-active-color: #209cd2;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-info-background: #d4f2ff;
--falcon-alert-info-border-color: #beebfe;
--falcon-alert-info-color: #177198;
--falcon-alert-info-link-color: #1f96ca;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-info-background: #d4f2ff;
--falcon-list-group-item-info-color: #177198;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-info-background-color: #d4f2ff;
--falcon-badge-soft-info-color: #1978a2;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-warning-color: var(--falcon-warning);
--falcon-btn-falcon-warning-hover-color: #cb6a33;
--falcon-btn-falcon-warning-active-background: #fde6d8;
--falcon-btn-falcon-warning-active-color: #cb6a33;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-warning-background: #fde6d8;
--falcon-alert-warning-border-color: #fcd9c5;
--falcon-alert-warning-color: #934d25;
--falcon-alert-warning-link-color: #c46632;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-warning-background: #fde6d8;
--falcon-list-group-item-warning-color: #934d25;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-warning-background-color: #fde6d8;
--falcon-badge-soft-warning-color: #9d5228;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-danger-color: var(--falcon-danger);
--falcon-btn-falcon-danger-hover-color: #bf2e48;
--falcon-btn-falcon-danger-active-background: #fad7dd;
--falcon-btn-falcon-danger-active-color: #bf2e48;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-danger-background: #fad7dd;
--falcon-alert-danger-border-color: #f8c3cd;
--falcon-alert-danger-color: #8a2134;
--falcon-alert-danger-link-color: #b82c46;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-danger-background: #fad7dd;
--falcon-list-group-item-danger-color: #8a2134;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-danger-background-color: #fad7dd;
--falcon-badge-soft-danger-color: #932338;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-light-color: var(--falcon-light);
--falcon-btn-falcon-light-hover-color: #cfd0d2;
--falcon-btn-falcon-light-active-background: #fefeff;
--falcon-btn-falcon-light-active-color: #cfd0d2;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-light-background: #fefeff;
--falcon-alert-light-border-color: #fdfefe;
--falcon-alert-light-color: #959698;
--falcon-alert-light-link-color: #c7c8ca;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-light-background: #fefeff;
--falcon-list-group-item-light-color: #959698;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-light-background-color: #fefeff;
--falcon-badge-soft-light-color: #9fa0a2;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-dark-color: var(--falcon-dark);
--falcon-btn-falcon-dark-hover-color: #091320;
--falcon-btn-falcon-dark-active-background: #ced1d4;
--falcon-btn-falcon-dark-active-color: #091320;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-dark-background: #ced1d4;
--falcon-alert-dark-border-color: #b6b9be;
--falcon-alert-dark-color: #070e17;
--falcon-alert-dark-link-color: #09121f;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-dark-background: #ced1d4;
--falcon-list-group-item-dark-color: #070e17;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-dark-background-color: #ced1d4;
--falcon-badge-soft-dark-color: #070f19;
--falcon-transparent-50: rgba(255, 255, 255, 0.5);
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-bg: #fff;
--falcon-list-group-action-hover-color: #5e6e82;
--falcon-list-group-hover-bg: #f9fafd;
--falcon-body-bg: #edf2f9;
--falcon-body-color: #5e6e82;
--falcon-headings-color: #344050;
--falcon-link-color: #2c7be5;
--falcon-link-hover-color: #2362b7;
--falcon-border-color: #d8e2ef;
/* --------------------------------- Shadow --------------------------------- */
--falcon-box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
--falcon-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--falcon-box-shadow-lg: 0 1rem 4rem rgba(0, 0, 0, 0.175);
--falcon-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--falcon-component-active-color: ;
--falcon-component-active-bg: #2c7be5;
--falcon-text-muted: #748194;
--falcon-blockquote-footer-color: #748194;
--falcon-hr-color: var(--falcon-border-color);
--falcon-hr-opacity: 0.25;
--falcon-mark-bg: #fcf8e3;
--falcon-input-btn-focus-color: rgba(44, 123, 229, 0.25);
--falcon-btn-link-color: #2c7be5;
--falcon-btn-link-hover-color: #2362b7;
--falcon-btn-disabled-color: #748194;
--falcon-heading-color: #344050;
/* ---------------------------------- Form ---------------------------------- */
--falcon-input-bg: #fff;
--falcon-input-color: #344050;
--falcon-input-border-color: #d8e2ef;
--falcon-input-focus-border-color: #96bdf2;
--falcon-input-focus-color: var(--falcon-input-color);
--falcon-input-placeholder-color: #b6c1d2;
--falcon-input-plaintext-color: #5e6e82;
--falcon-form-check-label-color: ;
--falcon-form-check-input-bg: transparent;
--falcon-form-check-input-border: 1px solid var(--falcon-form-check-input-border-color);
--falcon-form-check-input-border-color: #b6c1d2;
--falcon-form-check-input-checked-color: #fff;
--falcon-form-check-input-checked-bg-color: #2c7be5;
--falcon-form-check-input-checked-border-color: #2c7be5;
--falcon-form-check-input-indeterminate-color: #fff;
--falcon-form-check-input-indeterminate-bg-color: #2c7be5;
--falcon-form-check-input-indeterminate-border-color: #2c7be5;
--falcon-form-switch-color: rgba(0, 0, 0, 0.25);
--falcon-form-switch-focus-color: var(--falcon-input-focus-border-color);
--falcon-form-switch-checked-color: #fff;
--falcon-input-group-addon-color: var(--falcon-input-border-color);
--falcon-input-group-addon-bg: #edf2f9;
--falcon-input-group-addon-border-color: var(--falcon-input-border-color);
--falcon-form-select-color: var(--falcon-input-color);
--falcon-form-select-disabled-color: #748194;
--falcon-form-select-bg: var(--falcon-input-bg);
--falcon-form-select-disabled-bg: #edf2f9;
--falcon-form-select-indicator-color: #4d5969;
--falcon-form-select-focus-box-shadow: 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
--falcon-form-select-border-color: var(--falcon-input-border-color);
--falcon-form-select-focus-border-color: var(--falcon-input-focus-border-color);
--falcon-form-range-track-bg: #d8e2ef;
--falcon-form-range-track-box-shadow: var(--falcon-box-shadow-inset);
--falcon-form-range-thumb-bg: #2c7be5;
--falcon-form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
--falcon-form-range-thumb-focus-box-shadow: 0 0 0 1px #edf2f9, 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
--falcon-form-range-thumb-active-bg: #cbdef9;
--falcon-form-range-thumb-disabled-bg: #9da9bb;
--falcon-form-file-focus-border-color: var(--falcon-input-focus-border-color);
--falcon-form-file-focus-box-shadow: 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
--falcon-form-file-disabled-bg: var(--falcon-200);
--falcon-form-file-disabled-border-color: ;
--falcon-form-file-color: var(--falcon-input-color);
--falcon-form-file-bg: var(--falcon-input-bg);
--falcon-form-file-border-color: var(--falcon-input-border-color);
--falcon-form-file-box-shadow: var(--falcon-box-shadow-inset);
--falcon-form-file-button-bg: var(--falcon-200);
--falcon-form-feedback-valid-color: #00d27a;
--falcon-form-feedback-invalid-color: #e63757;
--falcon-form-feedback-icon-valid-color: var(--falcon-form-feedback-valid-color);
--falcon-form-feedback-icon-invalid-color: var(--falcon-form-feedback-invalid-color);
/* ----------------------------------- Nav ---------------------------------- */
--falcon-nav-link-color: null;
--falcon-nav-link-hover-color: null;
--falcon-nav-link-disabled-color: #748194;
--falcon-nav-tabs-border-color: #d8e2ef;
--falcon-nav-tabs-link-hover-border-color: #edf2f9 #edf2f9 #d8e2ef;
--falcon-nav-tabs-link-active-color: #5e6e82;
--falcon-nav-tabs-link-active-bg: #edf2f9;
--falcon-nav-tabs-link-active-border-color: #d8e2ef #d8e2ef #edf2f9;
--falcon-bg-navbar-glass: rgba(237, 242, 249, 0.96);
--falcon-nav-pills-link-active-color: #fff;
--falcon-nav-pills-link-active-bg: #2c7be5;
/* --------------------------------- Navbar --------------------------------- */
--falcon-navbar-dark-color: rgba(255, 255, 255, 0.55);
--falcon-navbar-dark-hover-color: rgba(255, 255, 255, 0.75);
--falcon-navbar-dark-active-color: #fff;
--falcon-navbar-dark-disabled-color: rgba(255, 255, 255, 0.25);
--falcon-navbar-dark-toggler-border-color: rgba(255, 255, 255, 0.1);
--falcon-navbar-light-color: rgba(0, 0, 0, 0.55);
--falcon-navbar-light-hover-color: rgba(0, 0, 0, 0.7);
--falcon-navbar-light-active-color: rgba(0, 0, 0, 0.9);
--falcon-navbar-light-disabled-color: rgba(0, 0, 0, 0.3);
--falcon-navbar-light-toggler-border-color: rgba(0, 0, 0, 0.1);
--falcon-navbar-light-brand-color: #2c7be5;
--falcon-navbar-dark-brand-color: #2c7be5;
/* -------------------------------------------------------------------------- */
/* Navbar Vertical */
/* -------------------------------------------------------------------------- */
/* --------------------------------- Default -------------------------------- */
--falcon-navbar-vertical-collapsed-hover-shadow-color: rgba(0, 0, 0, 0.2);
--falcon-navbar-vertical-bg-color: var(--falcon-bg-navbar-glass);
--falcon-navbar-vertical-link-color: #5e6e82;
--falcon-navbar-vertical-link-hover-color: #232e3c;
--falcon-navbar-vertical-link-active-color: #2c7be5;
--falcon-navbar-vertical-link-disable-color: #b6c1d2;
--falcon-navbar-vertical-hr-color: rgba(0, 0, 0, 0.08);
--falcon-navbar-vertical-scrollbar-color: rgba(116, 129, 148, 0.3);
/* ----------------------------- Navbar Inverted ---------------------------- */
/* --------------------------- End Navbar Vertical -------------------------- */
/* -------------------------------- Dropdown -------------------------------- */
--falcon-dropdown-bg: #fff;
--falcon-dropdown-color: #d8e2ef;
--falcon-dropdown-border-color: var(--falcon-border-color);
--falcon-dropdown-box-shadow: var(--falcon-box-shadow);
--falcon-dropdown-link-color: #344050;
--falcon-dropdown-link-hover-color: #2a3441;
--falcon-dropdown-link-hover-bg: #f9fafd;
--falcon-dropdown-link-active-color: #fff;
--falcon-dropdown-link-active-bg: #2c7be5;
--falcon-dropdown-link-disabled-color: #748194;
--falcon-dropdown-header-color: #748194;
--falcon-dropdown-dark-color: #d8e2ef;
--falcon-dropdown-dark-bg: #4d5969;
--falcon-dropdown-dark-border-color: var(--falcon-dropdown-border-color);
--falcon-dropdown-dark-divider-bg: var(--falcon-dropdown-border-color);
--falcon-dropdown-dark-box-shadow: null;
--falcon-dropdown-dark-link-color: #d8e2ef;
--falcon-dropdown-dark-link-hover-color: #fff;
--falcon-dropdown-dark-link-hover-bg: rgba(255, 255, 255, 0.15);
--falcon-dropdown-dark-link-active-color: var(--falcon-dropdown-link-active-color);
--falcon-dropdown-dark-link-active-bg: var(--falcon-dropdown-link-active-bg);
--falcon-dropdown-dark-link-disabled-color: #9da9bb;
--falcon-dropdown-dark-header-color: #9da9bb;
/* ------------------------------- Pagination ------------------------------- */
--falcon-pagination-color: #000;
--falcon-pagination-bg: #fff;
--falcon-pagination-border-color: #edf2f9;
--falcon-pagination-hover-color: #fff;
--falcon-pagination-hover-bg: #2c7be5;
--falcon-pagination-hover-border-color: #2c7be5;
--falcon-pagination-active-color: #fff;
--falcon-pagination-active-bg: #2c7be5;
--falcon-pagination-active-border-color: #2c7be5;
--falcon-pagination-disabled-bg: #fff;
/* ---------------------------------- Card ---------------------------------- */
--falcon-card-border-color: rgba(0, 0, 0, 0.125);
--falcon-card-cap-bg: rgba(0, 0, 0, 0);
--falcon-card-cap-color: null;
--falcon-card-color: null;
--falcon-card-bg: #fff;
/* --------------------------------- Tooltip -------------------------------- */
--falcon-tooltip-color: #fff;
--falcon-tooltip-bg: #000;
--falcon-tooltip-arrow-color: #000;
/* --------------------------------- Popover -------------------------------- */
--falcon-popover-bg: #fff;
--falcon-popover-border-color: rgba(0, 0, 0, 0.2);
--falcon-popover-box-shadow: var(--falcon-box-shadow);
--falcon-popover-header-bg: #f9fafd;
--falcon-popover-header-border-bottom-color: #d6d6d6;
--falcon-popover-header-color: var(--falcon-headings-color);
--falcon-popover-body-color: #5e6e82;
--falcon-popover-arrow-color: #fff;
--falcon-popover-arrow-outer-color: rgba(0, 0, 0, 0.25);
/* ---------------------------------- Toast --------------------------------- */
--falcon-toast-color: ;
--falcon-toast-background-color: rgba(255, 255, 255, 0.85);
--falcon-toast-border-color: rgba(0, 0, 0, 0.1);
--falcon-toast-box-shadow: var(--falcon-box-shadow);
--falcon-toast-header-color: #748194;
--falcon-toast-header-background-color: rgba(255, 255, 255, 0.85);
--falcon-toast-header-border-color: rgba(0, 0, 0, 0.05);
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-color: #fff;
/* ---------------------------------- Modal --------------------------------- */
--falcon-modal-content-bg: #fff;
/* ---------------------------------- Table --------------------------------- */
--falcon-table-border-color: #edf2f9;
--falcon-table-primary-bg: #d5e5fa;
--falcon-table-primary-color: #4d5969;
--falcon-table-primary-hover-bg: #cbdbef;
--falcon-table-primary-hover-color: #4d5969;
--falcon-table-primary-striped-bg: #cedef3;
--falcon-table-primary-striped-color: #4d5969;
--falcon-table-primary-active-bg: #c7d7ec;
--falcon-table-primary-active-color: #4d5969;
--falcon-table-primary-border-color: #c7d7ec;
--falcon-table-secondary-bg: #e3e6ea;
--falcon-table-secondary-color: #4d5969;
--falcon-table-secondary-hover-bg: #d8dbe0;
--falcon-table-secondary-hover-color: #4d5969;
--falcon-table-secondary-striped-bg: #dcdfe4;
--falcon-table-secondary-striped-color: #4d5969;
--falcon-table-secondary-active-bg: #d4d8dd;
--falcon-table-secondary-active-color: #4d5969;
--falcon-table-secondary-border-color: #d4d8dd;
--falcon-table-success-bg: #ccf6e4;
--falcon-table-success-color: #4d5969;
--falcon-table-success-hover-bg: #c2eadb;
--falcon-table-success-hover-color: #4d5969;
--falcon-table-success-striped-bg: #c6eede;
--falcon-table-success-striped-color: #4d5969;
--falcon-table-success-active-bg: #bfe6d8;
--falcon-table-success-active-color: #4d5969;
--falcon-table-success-border-color: #bfe6d8;
--falcon-table-info-bg: #d4f2ff;
--falcon-table-info-color: #4d5969;
--falcon-table-info-hover-bg: #cae7f4;
--falcon-table-info-hover-color: #4d5969;
--falcon-table-info-striped-bg: #cdeaf8;
--falcon-table-info-striped-color: #4d5969;
--falcon-table-info-active-bg: #c7e3f0;
--falcon-table-info-active-color: #4d5969;
--falcon-table-info-border-color: #c7e3f0;
--falcon-table-warning-bg: #fde6d8;
--falcon-table-warning-color: #4d5969;
--falcon-table-warning-hover-bg: #f0dbd0;
--falcon-table-warning-hover-color: #4d5969;
--falcon-table-warning-striped-bg: #f4dfd2;
--falcon-table-warning-striped-color: #4d5969;
--falcon-table-warning-active-bg: #ebd8cd;
--falcon-table-warning-active-color: #4d5969;
--falcon-table-warning-border-color: #ebd8cd;
--falcon-table-danger-bg: #fad7dd;
--falcon-table-danger-color: #4d5969;
--falcon-table-danger-hover-bg: #edced4;
--falcon-table-danger-hover-color: #4d5969;
--falcon-table-danger-striped-bg: #f1d1d7;
--falcon-table-danger-striped-color: #4d5969;
--falcon-table-danger-active-bg: #e9cad1;
--falcon-table-danger-active-color: #4d5969;
--falcon-table-danger-border-color: #e9cad1;
--falcon-table-light-bg: #f9fafd;
--falcon-table-light-color: #4d5969;
--falcon-table-light-hover-bg: #eceef2;
--falcon-table-light-hover-color: #4d5969;
--falcon-table-light-striped-bg: #f0f2f6;
--falcon-table-light-striped-color: #4d5969;
--falcon-table-light-active-bg: #e8eaee;
--falcon-table-light-active-color: #4d5969;
--falcon-table-light-border-color: #e8eaee;
--falcon-table-dark-bg: #0b1727;
--falcon-table-dark-color: #fff;
--falcon-table-dark-hover-bg: #1d2837;
--falcon-table-dark-hover-color: #fff;
--falcon-table-dark-striped-bg: #172332;
--falcon-table-dark-striped-color: #fff;
--falcon-table-dark-active-bg: #232e3d;
--falcon-table-dark-active-color: #fff;
--falcon-table-dark-border-color: #232e3d;
/* --------------------------------- Avarar --------------------------------- */
--falcon-avatar-status-border-color: #fff;
--falcon-avatar-name-bg: #344050;
--falcon-avatar-button-bg: #b6c1d2;
--falcon-avatar-button-hover-bg: #9da9bb;
/* ------------------------------ Notification ------------------------------ */
--falcon-notification-bg: #fff;
--falcon-notification-title-bg: #f9fafd;
--falcon-notification-unread-bg: #edf2f9;
--falcon-notification-unread-hover-bg: #dae4f3;
--falcon-notification-indicator-border-color: #edf2f9;
/* --------------------------------- Kanban --------------------------------- */
--falcon-kanban-bg: #f9fafd;
--falcon-kanban-header-bg: var(--falcon-kanban-bg);
--falcon-kanban-item-bg: #fff;
--falcon-kanban-item-color: #344050;
--falcon-kanban-btn-add-hover-bg: #edf2f9;
--falcon-kanban-draggable-source-dragging-bg: #edf2f9;
--falcon-kanban-bg-attachment-bg: #d8e2ef;
--falcon-kanban-footer-color: #748194;
--falcon-kanban-nav-link-card-details-color: #5e6e82;
--falcon-kanban-nav-link-card-details-hover-bg: #edf2f9;
/* --------------------------- Gradient Background -------------------------- */
--falcon-bg-shape-bg: #4695ff;
--falcon-bg-shape-bg-ltd: linear-gradient(-45deg, #4695ff, #1970e2);
--falcon-bg-shape-bg-dtl: linear-gradient(-45deg, #1970e2, #4695ff);
--falcon-line-chart-gradient: linear-gradient(-45deg, #014ba7, #0183d0);
--falcon-card-gradient: linear-gradient(-45deg, #1970e2, #4695ff);
--falcon-progress-gradient: linear-gradient(-45deg, #1970e2, #4695ff);
--falcon-bg-circle-shape: none;
--falcon-bg-circle-shape-bg: #4695ff;
--falcon-modal-shape-header: linear-gradient(-45deg, #1970e2, #4695ff);
--falcon-modal-shape-header-bg: #4494ff;
/* ------------------------------ Full Calendar ----------------------------- */
--fc-button-bg-color: #344050;
--fc-button-border-color: #344050;
--fc-button-hover-bg-color: #0b1727;
--fc-button-hover-border-color: #0b1727;
--fc-button-active-bg-color: #0b1727;
--fc-button-active-border-color: #0b1727;
--fc-button-list-day-cushion: #fff;
/* -------------------------------- Flatpickr ------------------------------- */
--falcon-flatpickr-calendar-bg: #fff;
/* -------------------------------- Flatpickr ------------------------------- */
--falcon-leaflet-bar-bg: #fff;
--falcon-leaflet-popup-content-wrapper-bg: #fff;
/* --------------------------------- Choices -------------------------------- */
--falcon-choices-item-selectable-highlighted-bg: #fff;
--falcon-choices-item-has-no-choices-bg: #fff;
/* -------------------------------- Thumbnail ------------------------------- */
--falcon-thumbnail-bg: #fff;
/* ---------------------------------- Chat ---------------------------------- */
--falcon-chat-contact-bg: var(--falcon-card-bg);
/* --------------------------------- Tinymce -------------------------------- */
--falcon-tinymce-bg: #fff;
/* --------------------------------- Swiper --------------------------------- */
--falcon-swiper-nav-bg: rgba(255, 255, 255, 0.8);
/* --------------------------------- Rater --------------------------------- */
--falcon-star-rating-bg-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFdElEQVR4nO2aXWxURRTH/2dut58Imho1SgStuit+vBo0BkgkRjDog+VBiJEXqJhKK21x+7EdUu5u2W1Uqi8Qo4YQY6gQDQlRn9RENGoMD0a7RCzGRCJGBLRF9mOOD+waKHe7e2f23mt0f4/zceY/Z2fmzJm7QI0aNWr8j6EgBu3sHG9oXHC2gxQvJ/CUhbpUPD5wMggtwv8hmZrmn3mHmF8G4XEm6s5R/kinlPP91xKAA7YN2A8CeHRW8eLmrOjwWwsQgAMYqs+xnLGls3O8wW89vjqgp1/eDWC1YyXhxqYFvz/ppx7AZwcIsnrmbMDUK6X0V5NfA/VJuRDgdWWa3Tmds1b5IqiAf97OUReAunLNCOx4RniFL/eALimvrs+KnwDMq6yHWJq0Bz/3VFRxJD8GabgY4iqcPABWvd6puRzPV4CUsnEmK6YA3OCiG1tKRRIJecwrXUU8XwHTGbEe7iYPAJQXYqsXeq4YyEvjUkoxkxXfAbhDo/uFOrYWxeMDv1Rb16V4ugJmctYa6E0eABpyItdZTT1OeLwFDEMa02YpZeWHpwaeOaBncOQhMJYamrnmvMdJUtXOgI0bd4daW0+25S0rAoV7iLiHgWqkuDkChjik9ibl8EmAuAo2/8G1A7ZKea24IMJkcQRAmJkiBIQBtAGwqiluNgScU4w0EU2CkWZSk8ycnleP76WUf2nadCYajbfmrfwDxIWJgiMAhQG06k7AQxSAEwAmiTnNRJMEMWkxpePx/lNzrRpHB7wwOLJcMR+Cm9vbv5cZAK81h1S3lFLNrnQ8BBVjF/4bkweAZgDPnc+IJ5wqS0QBDnsoKBAYdLtTubMDCF95qiYAhMUfOpY7FSqlOgCc9lSRjzDR86MjsS+d6hwdMBaX3zCrlQDOeKrMBwiIpnYMvVSqvuRNMBWXXwPiYQB/eKLMBxgY3mnHRudqM+dVOGkPfsEKjwCYrqoyHyAgnrKHRipoV57CveAwgCZjZT7AwFjKHuqr5Npc8VW4r3/7ShAdAuD7xwuXjCftoa5KcwZXuUDv4MgqYn4XQEhLmscw8+5UPPaMm4TJVTqc2jF0GERrAeRcq/MceqOlnje7zRa10uHege3tBHobgXxdvhIm7DuRjjw9MbE277av1gRS9vAEwE8BqGpurgVhf0ud2qAz+YvdDegb3L4BTK+b2DCBgffO/np9+549m7K6NoweMD795KOj9y9bcRsB95rY0SRTp+qW7drV/aeJEeM9TMzvm9rQg48mEv2/mVoxP8RYLDa2oYWor4oVYwuEu6qgQwOOtLfvN36DrEIY4yXmNrRobGv79hZTI0YOKPwCEVMRurBFxqvPyAGLw+lbEWBuoBCwAwhB7f/i+GS8/YwcwBzY/i8S7AoILgIUMY8EZluAzZegIY2Fc0gbbQdc9DwHFgGKCFZGP4K2AwoxuFGz+xkCehFSNxHzKoCO6uowjQRl/7dXCs0YnCXmVwWH7Evu8T9LKT+Yzoj1BNggLHRl0fAc0ncAiyVuHl8INKEI0aQdOz67rvDRcm9394sToabpLhBHAVxVkV02c4D2e0DfwMi+Cv76CoCPKEU9Y4nYZ5Xa7pHyOpEVwwA2oXzKfmHqWKRF90FEewVUkAMcZ/C2lB076PadbkzKUwCejUblK3kSO0FYM0fzhkXh9M0AptyMUcQkDJY6AE8D2NIcUktS9vABk7+0JBJyMhmPPcYKywEu9cGWQ3nrnO4Y2g5gYN+sogyIU5mQakvasXEpZUbX9mxSidjHzSG+jxjrAPx4eS29afIwor0FWkJq9HzOOsvMq5n5B0vx2OioPKFrrxyFg/ItKeXBmazoAGMFQEea6/MlP3zWqFGjRo0y/A3lxcMNXfCjjAAAAABJRU5ErkJggg==");
/* ---------------------------------- Toast --------------------------------- */
--falcon-toast-background-color: rgba(255, 255, 255, 0.85);
/* --------------------------------- Wizard --------------------------------- */
--falcon-theme-wizard-nav-item-circle-bg: #fff;
/* -------------------------------- Card Span ------------------------------- */
--falcon-card-span-img-bg: #fff;
--falcon-card-span-img-box-shadow: var(--falcon-box-shadow-sm);
--falcon-card-span-img-hover-box-shadow: var(--falcon-box-shadow-lg);
/* ------------------------------ showcase-page ------------------------------ */
--falcon-setting-toggle-shadow: 0 -7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
/* -------------------------------- Scrollbar ------------------------------- */
--falcon-scrollbar-bg: rgba(182, 193, 210, 0.55);
/* ------------------------------- Falcon Pill ------------------------------ */
--falcon-nav-pills-falcon-active-bg-color: #fff;
/* ------------------------------- Hover Background ------------------------------ */
--falcon-hover-bg-black: #000;
--falcon-hover-bg-100: #f9fafd;
--falcon-hover-bg-200: #edf2f9;
--falcon-hover-bg-300: #d8e2ef;
--falcon-hover-bg-400: #b6c1d2;
--falcon-hover-bg-500: #9da9bb;
--falcon-hover-bg-600: #748194;
--falcon-hover-bg-700: #5e6e82;
--falcon-hover-bg-800: #4d5969;
--falcon-hover-bg-900: #344050;
--falcon-hover-bg-1000: #232e3c;
--falcon-hover-bg-1100: #0b1727;
--falcon-hover-bg-white: #fff;
/* ------------------------------- Custom disabled button ------------------------------ */
--falcon-btn-disabled-custom-background: rgba(249, 250, 253, 0.65);
--falcon-btn-disabled-custom-color: rgba(11, 23, 39, 0.3);
}
[data-theme="theme-dark"]:root {
color-scheme: dark;
--font-default: "Arial", "Plus Jakarta Sans", sans-serif;
--active-color: #ffffff;
--active-bg-color: #ff0000;
--background-color: #222;
--tooltip-bgr: #ffe17d;
--tooltip-color: #977917;
--color: #d9d9d9;
--drd-bgr: #333333;
--drd-hover-bgr: #333;
--box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
--border-color: #333;
--tbl-header-bg: #4f4d4d;
--bg-primary: #3568f0;
/*falcon*/
--falcon-body: #232e3c;
--falcon-body-bg: #0b1727;
--falcon-body-color: #9da9bb;
--falcon-headings-color: #d8e2ef;
--falcon-border-color: rgba(255, 255, 255, 0.05);
/* --------------------------------- Shadow --------------------------------- */
--falcon-box-shadow: 0 7px 14px 0 rgba(3, 12, 51, 0.15), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
--falcon-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--falcon-box-shadow-lg: 0 1rem 4rem rgba(0, 0, 0, 0.175);
--falcon-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--falcon-black: #fff;
--falcon-100: #0b1727;
--falcon-200: #232e3c;
--falcon-300: #344050;
--falcon-400: #4d5969;
--falcon-500: #5e6e82;
--falcon-600: #748194;
--falcon-700: #9da9bb;
--falcon-800: #b6c1d2;
--falcon-900: #d8e2ef;
--falcon-1000: #edf2f9;
--falcon-1100: #f9fafd;
--falcon-white: #000;
--falcon-primary: #2c7be5;
--falcon-secondary: #748194;
--falcon-success: #00d27a;
--falcon-info: #27bcfd;
--falcon-warning: #f5803e;
--falcon-danger: #e63757;
--falcon-light: rgba(35, 46, 60, 0.25);
--falcon-dark: #f9fafd;
--falcon-soft-primary: #0d2545;
--falcon-soft-secondary: #23272c;
--falcon-soft-success: #003f25;
--falcon-soft-info: #0c384c;
--falcon-soft-warning: #4a2613;
--falcon-soft-danger: #45111a;
--falcon-soft-light: #4b4b4c;
--falcon-soft-dark: #03070c;
/* ---------------------------------- Form ---------------------------------- */
--falcon-input-bg: #0b1727;
--falcon-input-color: #d8e2ef;
--falcon-input-border-color: #344050;
--falcon-input-focus-border-color: #163e73;
--falcon-input-placeholder-color: #b6c1d2;
--falcon-form-check-input-border-color: #4d5969;
/* -------------------------------- Accordion ------------------------------- */
--falcon-accordion-border-color: rgba(255, 255, 255, 0.125);
/* --------------------------------- Navbar --------------------------------- */
--falcon-bg-navbar-glass: rgba(11, 23, 39, 0.96);
--falcon-navbar-dark-color: rgba(11, 23, 39, 0.55);
--falcon-navbar-dark-hover-color: rgba(11, 23, 39, 0.75);
--falcon-navbar-dark-active-color: #0b1727;
--falcon-navbar-dark-disabled-color: rgba(11, 23, 39, 0.25);
--falcon-navbar-dark-toggler-border-color: rgba(11, 23, 39, 0.1);
--falcon-navbar-light-color: rgba(255, 255, 255, 0.55);
--falcon-navbar-light-hover-color: rgba(255, 255, 255, 0.7);
--falcon-navbar-light-active-color: rgba(255, 255, 255, 0.9);
--falcon-navbar-light-disabled-color: rgba(255, 255, 255, 0.3);
--falcon-navbar-light-toggler-border-color: rgba(255, 255, 255, 0.1);
--falcon-navbar-light-brand-color: var(--falcon-navbar-light-active-color);
--falcon-navbar-light-brand-hover-color: var(--falcon-navbar-light-active-color);
--falcon-navbar-dark-brand-color: var(--falcon-navbar-dark-active-color);
--falcon-navbar-dark-brand-hover-color: var(--falcon-navbar-dark-active-color);
--falcon-navbar-light-brand-color: #2c7be5;
--falcon-navbar-dark-brand-color: #2c7be5;
/* -------------------------------------------------------------------------- */
/* Navbar Vertical */
/* -------------------------------------------------------------------------- */
/* --------------------------------- Default -------------------------------- */
--falcon-navbar-vertical-collapsed-hover-shadow-color: rgba(0, 0, 0, 0.2);
--falcon-navbar-vertical-bg-color: var(--falcon-bg-navbar-glass);
--falcon-navbar-vertical-link-color: #9da9bb;
--falcon-navbar-vertical-link-hover-color: #edf2f9;
--falcon-navbar-vertical-link-active-color: #2c7be5;
--falcon-navbar-vertical-link-disable-color: #4d5969;
--falcon-navbar-vertical-hr-color: rgba(255, 255, 255, 0.08);
--falcon-navbar-vertical-scrollbar-color: rgba(116, 129, 148, 0.3);
/* ----------------------------- Navbar Inverted ---------------------------- */
/* --------------------------- End Navbar Vertical -------------------------- */
/* -------------------------------- Dropdown -------------------------------- */
--falcon-dropdown-bg: #232e3c;
--falcon-dropdown-color: #344050;
--falcon-dropdown-box-shadow: var(--falcon-box-shadow);
--falcon-dropdown-link-color: #d8e2ef;
--falcon-dropdown-link-hover-color: #eaeff6;
--falcon-dropdown-link-hover-bg: rgba(11, 23, 39, 0.4);
--falcon-dropdown-link-active-color: #fff;
--falcon-dropdown-link-active-bg: #2c7be5;
--falcon-dropdown-link-disabled-color: #748194;
--falcon-dropdown-header-color: #748194;
/* ------------------------------- Pagination ------------------------------- */
--falcon-pagination-color: #fff;
--falcon-pagination-bg: #0b1727;
--falcon-pagination-border-color: #232e3c;
--falcon-pagination-hover-color: #fff;
--falcon-pagination-disabled-bg: #0b1727;
/* ---------------------------------- Card ---------------------------------- */
--falcon-card-border-color: rgba(255, 255, 255, 0.125);
--falcon-card-cap-bg: rgba(35, 46, 60, 0.03);
--falcon-card-bg: #121e2d;
/* --------------------------------- Popover -------------------------------- */
--falcon-popover-bg: #0b1727;
--falcon-popover-border-color: rgba(255, 255, 255, 0.2);
--falcon-popover-header-bg: rgba(35, 46, 60, 0.25);
--falcon-popover-header-border-bottom-color: #323c4a;
--falcon-popover-arrow-color: #0b1727;
--falcon-popover-arrow-outer-color: rgba(255, 255, 255, 0.25);
/* ---------------------------------- Modal --------------------------------- */
--falcon-modal-content-bg: #0b1727;
/* ------------------------------ Reveal Button ----------------------------- */
--falcon-btn-reveal-color: dark;
--falcon-btn-reveal-bg: #0a1523;
--falcon-btn-reveal-border-color: #0a1422;
/* ------------------------------ Falcon Button ----------------------------- */
--falcon-btn-falcon-background: var(--falcon-body-bg);
--falcon-btn-disabled-color: #4d5969;
--falcon-btn-falcon-box-shadow: 0 0 0 1px rgba(0, 8, 19, 0.3), 0 2px 5px 0 rgba(0, 13, 33, 0.5), 0 1px 1.5px 0 rgba(0, 8, 1, 0.48), 0 1px 2px 0 rgba(0, 8, 1, 0.4);
--falcon-btn-falcon-hover-box-shadow: 0 0 0 1px rgba(0, 8, 19, 0.3), 0 3px 7px 0 rgba(0, 13, 33, 0.8), 0 1px 1.5px 0 #000801, 0 1px 2px 0 #000801;
--falcon-btn-falcon-default-color: #b6c1d2;
--falcon-btn-falcon-default-hover-color: #c2ccda;
--falcon-btn-falcon-default-active-background: #0a1523;
--falcon-btn-falcon-default-active-border: #c2ccda;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-primary-color: var(--falcon-primary);
--falcon-btn-falcon-primary-hover-color: #5091e9;
--falcon-btn-falcon-primary-active-background: #070e17;
--falcon-btn-falcon-primary-active-color: #5091e9;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-primary-background: rgba(18, 49, 92, 0.6);
--falcon-alert-primary-border-color: #0d2545;
--falcon-alert-primary-color: #80b0ef;
--falcon-alert-primary-link-color: #5695ea;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-primary-background: #09192e;
--falcon-list-group-item-primary-color: #80b0ef;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-primary-background-color: #09192e;
--falcon-badge-soft-primary-color: #78abee;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-secondary-color: var(--falcon-secondary);
--falcon-btn-falcon-secondary-hover-color: #8c96a6;
--falcon-btn-falcon-secondary-active-background: #070e17;
--falcon-btn-falcon-secondary-active-color: #8c96a6;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-secondary-background: rgba(46, 52, 59, 0.6);
--falcon-alert-secondary-border-color: #23272c;
--falcon-alert-secondary-color: #acb3bf;
--falcon-alert-secondary-link-color: #909aa9;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-secondary-background: #171a1e;
--falcon-list-group-item-secondary-color: #acb3bf;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-secondary-background-color: #171a1e;
--falcon-badge-soft-secondary-color: #6d798b;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-success-color: var(--falcon-success);
--falcon-btn-falcon-success-hover-color: #2bda91;
--falcon-btn-falcon-success-active-background: #070e17;
--falcon-btn-falcon-success-active-color: #2bda91;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-success-background: rgba(0, 84, 49, 0.6);
--falcon-alert-success-border-color: #003f25;
--falcon-alert-success-color: #66e4af;
--falcon-alert-success-link-color: #33db95;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-success-background: #002a18;
--falcon-list-group-item-success-color: #66e4af;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-success-background-color: #002a18;
--falcon-badge-soft-success-color: #5ce2aa;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-info-color: var(--falcon-info);
--falcon-btn-falcon-info-hover-color: #4cc7fd;
--falcon-btn-falcon-info-active-background: #070e17;
--falcon-btn-falcon-info-active-color: #4cc7fd;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-info-background: rgba(16, 75, 101, 0.6);
--falcon-alert-info-border-color: #0c384c;
--falcon-alert-info-color: #7dd7fe;
--falcon-alert-info-link-color: #52c9fd;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-info-background: #082633;
--falcon-list-group-item-info-color: #7dd7fe;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-info-background-color: #082633;
--falcon-badge-soft-info-color: #75d4fe;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-warning-color: var(--falcon-warning);
--falcon-btn-falcon-warning-hover-color: #f7965f;
--falcon-btn-falcon-warning-active-background: #070e17;
--falcon-btn-falcon-warning-active-color: #f7965f;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-warning-background: rgba(98, 51, 25, 0.6);
--falcon-alert-warning-border-color: #4a2613;
--falcon-alert-warning-color: #f9b38b;
--falcon-alert-warning-link-color: #f79965;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-warning-background: #311a0c;
--falcon-list-group-item-warning-color: #f9b38b;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-warning-background-color: #311a0c;
--falcon-badge-soft-warning-color: #f9ae83;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-danger-color: var(--falcon-danger);
--falcon-btn-falcon-danger-hover-color: #ea5974;
--falcon-btn-falcon-danger-active-background: #070e17;
--falcon-btn-falcon-danger-active-color: #ea5974;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-danger-background: rgba(92, 22, 35, 0.6);
--falcon-alert-danger-border-color: #45111a;
--falcon-alert-danger-color: #f0879a;
--falcon-alert-danger-link-color: #eb5f79;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-danger-background: #2e0b11;
--falcon-list-group-item-danger-color: #f0879a;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-danger-background-color: #2e0b11;
--falcon-badge-soft-danger-color: #ef7f93;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-light-color: var(--falcon-light);
--falcon-btn-falcon-light-hover-color: rgba(165, 169, 175, 0.3775);
--falcon-btn-falcon-light-active-background: #070e17;
--falcon-btn-falcon-light-active-color: rgba(165, 169, 175, 0.3775);
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-light-background: rgba(3, 4, 5, 0.6);
--falcon-alert-light-border-color: rgba(2, 3, 3, 0.775);
--falcon-alert-light-color: rgba(216, 218, 221, 0.55);
--falcon-alert-light-link-color: rgba(175, 179, 184, 0.4);
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-light-background: rgba(1, 2, 2, 0.85);
--falcon-list-group-item-light-color: rgba(216, 218, 221, 0.55);
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-light-background-color: rgba(1, 2, 2, 0.85);
--falcon-badge-soft-light-color: rgba(210, 213, 216, 0.52);
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-dark-color: var(--falcon-dark);
--falcon-btn-falcon-dark-hover-color: #fafbfd;
--falcon-btn-falcon-dark-active-background: #070e17;
--falcon-btn-falcon-dark-active-color: #fafbfd;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-dark-background: rgba(100, 100, 101, 0.6);
--falcon-alert-dark-border-color: #4b4b4c;
--falcon-alert-dark-color: #fbfcfe;
--falcon-alert-dark-link-color: #fafbfd;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-dark-background: #323233;
--falcon-list-group-item-dark-color: #fbfcfe;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-dark-background-color: #323233;
--falcon-badge-soft-dark-color: #fbfcfe;
--falcon-transparent-50: rgba(11, 23, 39, 0.5);
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-bg: var(--falcon-card-cap-bg);
--falcon-list-group-action-hover-color: #9da9bb;
--falcon-list-group-hover-bg: #0b1727;
/* ---------------------------------- Table --------------------------------- */
--falcon-table-border-color: #0b1727;
--falcon-table-primary-bg: #09192e;
--falcon-table-primary-color: #fff;
--falcon-table-primary-hover-bg: #3c85e7;
--falcon-table-primary-hover-color: #fff;
--falcon-table-primary-striped-bg: #3782e6;
--falcon-table-primary-striped-color: #fff;
--falcon-table-primary-active-bg: #4188e8;
--falcon-table-primary-active-color: #fff;
--falcon-table-primary-border-color: rgba(65, 136, 232, 0.05);
--falcon-table-secondary-bg: #171a1e;
--falcon-table-secondary-color: #fff;
--falcon-table-secondary-hover-bg: #7e8a9c;
--falcon-table-secondary-hover-color: #fff;
--falcon-table-secondary-striped-bg: #7b8799;
--falcon-table-secondary-striped-color: #fff;
--falcon-table-secondary-active-bg: #828e9f;
--falcon-table-secondary-active-color: #fff;
--falcon-table-secondary-border-color: rgba(130, 142, 159, 0.05);
--falcon-table-success-bg: #002a18;
--falcon-table-success-color: #fff;
--falcon-table-success-hover-bg: #13d584;
--falcon-table-success-hover-color: #4d5969;
--falcon-table-success-striped-bg: #0dd481;
--falcon-table-success-striped-color: #4d5969;
--falcon-table-success-active-bg: #1ad787;
--falcon-table-success-active-color: #4d5969;
--falcon-table-success-border-color: rgba(26, 215, 135, 0.05);
--falcon-table-info-bg: #082633;
--falcon-table-info-color: #fff;
--falcon-table-info-hover-bg: #37c1fd;
--falcon-table-info-hover-color: #fff;
--falcon-table-info-striped-bg: #32bffd;
--falcon-table-info-striped-color: #fff;
--falcon-table-info-active-bg: #3dc3fd;
--falcon-table-info-active-color: #fff;
--falcon-table-info-border-color: rgba(61, 195, 253, 0.05);
--falcon-table-warning-bg: #311a0c;
--falcon-table-warning-color: #fff;
--falcon-table-warning-hover-bg: #f68a4c;
--falcon-table-warning-hover-color: #fff;
--falcon-table-warning-striped-bg: #f68648;
--falcon-table-warning-striped-color: #fff;
--falcon-table-warning-active-bg: #f68d51;
--falcon-table-warning-active-color: #fff;
--falcon-table-warning-border-color: rgba(246, 141, 81, 0.05);
--falcon-table-danger-bg: #2e0b11;
--falcon-table-danger-color: #fff;
--falcon-table-danger-hover-bg: #e84664;
--falcon-table-danger-hover-color: #fff;
--falcon-table-danger-striped-bg: #e7415f;
--falcon-table-danger-striped-color: #fff;
--falcon-table-danger-active-bg: #e94b68;
--falcon-table-danger-active-color: #fff;
--falcon-table-danger-border-color: rgba(233, 75, 104, 0.05);
--falcon-table-light-bg: #323233;
--falcon-table-light-color: #4d5969;
--falcon-table-light-hover-bg: #eceef2;
--falcon-table-light-hover-color: #4d5969;
--falcon-table-light-striped-bg: #f0f2f6;
--falcon-table-light-striped-color: #4d5969;
--falcon-table-light-active-bg: #e8eaee;
--falcon-table-light-active-color: #4d5969;
--falcon-table-light-border-color: rgba(232, 234, 238, 0.05);
--falcon-table-dark-bg: #020508;
--falcon-table-dark-color: #fff;
--falcon-table-dark-hover-bg: #1d2837;
--falcon-table-dark-hover-color: #fff;
--falcon-table-dark-striped-bg: #172332;
--falcon-table-dark-striped-color: #fff;
--falcon-table-dark-active-bg: #232e3d;
--falcon-table-dark-active-color: #fff;
--falcon-table-dark-border-color: rgba(35, 46, 61, 0.05);
/* --------------------------------- Avarar --------------------------------- */
--falcon-avatar-status-border-color: #0b1727;
--falcon-avatar-name-bg: #4d5969;
--falcon-avatar-button-bg: #4d5969;
--falcon-avatar-button-hover-bg: #5e6e82;
/* ------------------------------ Notification ------------------------------ */
--falcon-notification-bg: var(--falcon-card-cap-bg);
--falcon-notification-title-bg: #344050;
--falcon-notification-unread-bg: #232e3c;
--falcon-notification-unread-hover-bg: #1a222c;
--falcon-notification-indicator-border-color: #0a1727;
/* --------------------------------- Kanban --------------------------------- */
--falcon-kanban-bg: rgba(35, 46, 60, 0.25);
--falcon-kanban-item-bg: #232e3c;
--falcon-kanban-item-color: #d8e2ef;
--falcon-kanban-btn-add-hover-bg: #232e3c;
--falcon-kanban-draggable-source-dragging-bg: #0b1727;
--falcon-kanban-bg-attachment-bg: #344050;
--falcon-kanban-footer-color: #748194;
--falcon-kanban-nav-link-card-details-color: #9da9bb;
--falcon-kanban-nav-link-card-details-hover-bg: #344050;
/* --------------------------- Gradient Background -------------------------- */
--falcon-bg-shape-bg: #01224b;
--falcon-bg-shape-bg-ltd: linear-gradient(-45deg, rgba(20, 58, 101, 0.41), #053571);
--falcon-bg-shape-bg-dtl: linear-gradient(-45deg, #0a3b79, rgba(9, 25, 43, 0.41));
--falcon-line-chart-gradient: linear-gradient(45deg, #012552, #001835);
--falcon-card-gradient: linear-gradient(45deg, #012552, #001835);
--falcon-bg-circle-shape: linear-gradient(-45deg, rgba(9, 25, 43, 0.41), #0a3b79);
--falcon-bg-circle-shape-bg: #4695ff;
--falcon-modal-shape-header: linear-gradient(-45deg, #012552, #001835);
--falcon-modal-shape-header-after: linear-gradient(-45deg, rgba(20, 58, 101, 0.41), #053571);
--falcon-modal-shape-header-bg: #01224b;
/* ------------------------------ Full Calendar ----------------------------- */
--fc-button-list-day-cushion: #0b1727;
--fc-page-bg-color: #0b1727;
--fc-neutral-bg-color: #232e3c;
/* -------------------------------- Flatpickr ------------------------------- */
--falcon-flatpickr-calendar-bg: #0b1727;
/* -------------------------------- Flatpickr ------------------------------- */
--falcon-leaflet-bar-bg: #344050;
--falcon-leaflet-popup-content-wrapper-bg: #0b1727;
/* --------------------------------- Choices -------------------------------- */
--falcon-choices-item-has-no-choices-bg: #0b1727;
/* -------------------------------- Thumbnail ------------------------------- */
--falcon-thumbnail-bg: #232e3c;
/* ---------------------------------- Chat ---------------------------------- */
--falcon-chat-contact-bg: var(--falcon-card-bg);
/* --------------------------------- Tinymce -------------------------------- */
--falcon-tinymce-bg: #0b1727;
/* --------------------------------- Swiper --------------------------------- */
--falcon-swiper-nav-bg: rgba(11, 23, 39, 0.8);
/* --------------------------------- Rater --------------------------------- */
--falcon-star-rating-bg-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFdElEQVR4nO2aXWxURRTH/2dut58Imho1SgStuit+vBo0BkgkRjDog+VBiJEXqJhKK21x+7EdUu5u2W1Uqi8Qo4YQY6gQDQlRn9RENGoMD0a7RCzGRCJGBLRF9mOOD+waKHe7e2f23mt0f4/zceY/Z2fmzJm7QI0aNWr8j6EgBu3sHG9oXHC2gxQvJ/CUhbpUPD5wMggtwv8hmZrmn3mHmF8G4XEm6s5R/kinlPP91xKAA7YN2A8CeHRW8eLmrOjwWwsQgAMYqs+xnLGls3O8wW89vjqgp1/eDWC1YyXhxqYFvz/ppx7AZwcIsnrmbMDUK6X0V5NfA/VJuRDgdWWa3Tmds1b5IqiAf97OUReAunLNCOx4RniFL/eALimvrs+KnwDMq6yHWJq0Bz/3VFRxJD8GabgY4iqcPABWvd6puRzPV4CUsnEmK6YA3OCiG1tKRRIJecwrXUU8XwHTGbEe7iYPAJQXYqsXeq4YyEvjUkoxkxXfAbhDo/uFOrYWxeMDv1Rb16V4ugJmctYa6E0eABpyItdZTT1OeLwFDEMa02YpZeWHpwaeOaBncOQhMJYamrnmvMdJUtXOgI0bd4daW0+25S0rAoV7iLiHgWqkuDkChjik9ibl8EmAuAo2/8G1A7ZKea24IMJkcQRAmJkiBIQBtAGwqiluNgScU4w0EU2CkWZSk8ycnleP76WUf2nadCYajbfmrfwDxIWJgiMAhQG06k7AQxSAEwAmiTnNRJMEMWkxpePx/lNzrRpHB7wwOLJcMR+Cm9vbv5cZAK81h1S3lFLNrnQ8BBVjF/4bkweAZgDPnc+IJ5wqS0QBDnsoKBAYdLtTubMDCF95qiYAhMUfOpY7FSqlOgCc9lSRjzDR86MjsS+d6hwdMBaX3zCrlQDOeKrMBwiIpnYMvVSqvuRNMBWXXwPiYQB/eKLMBxgY3mnHRudqM+dVOGkPfsEKjwCYrqoyHyAgnrKHRipoV57CveAwgCZjZT7AwFjKHuqr5Npc8VW4r3/7ShAdAuD7xwuXjCftoa5KcwZXuUDv4MgqYn4XQEhLmscw8+5UPPaMm4TJVTqc2jF0GERrAeRcq/MceqOlnje7zRa10uHege3tBHobgXxdvhIm7DuRjjw9MbE277av1gRS9vAEwE8BqGpurgVhf0ud2qAz+YvdDegb3L4BTK+b2DCBgffO/np9+549m7K6NoweMD795KOj9y9bcRsB95rY0SRTp+qW7drV/aeJEeM9TMzvm9rQg48mEv2/mVoxP8RYLDa2oYWor4oVYwuEu6qgQwOOtLfvN36DrEIY4yXmNrRobGv79hZTI0YOKPwCEVMRurBFxqvPyAGLw+lbEWBuoBCwAwhB7f/i+GS8/YwcwBzY/i8S7AoILgIUMY8EZluAzZegIY2Fc0gbbQdc9DwHFgGKCFZGP4K2AwoxuFGz+xkCehFSNxHzKoCO6uowjQRl/7dXCs0YnCXmVwWH7Evu8T9LKT+Yzoj1BNggLHRl0fAc0ncAiyVuHl8INKEI0aQdOz67rvDRcm9394sToabpLhBHAVxVkV02c4D2e0DfwMi+Cv76CoCPKEU9Y4nYZ5Xa7pHyOpEVwwA2oXzKfmHqWKRF90FEewVUkAMcZ/C2lB076PadbkzKUwCejUblK3kSO0FYM0fzhkXh9M0AptyMUcQkDJY6AE8D2NIcUktS9vABk7+0JBJyMhmPPcYKywEu9cGWQ3nrnO4Y2g5gYN+sogyIU5mQakvasXEpZUbX9mxSidjHzSG+jxjrAPx4eS29afIwor0FWkJq9HzOOsvMq5n5B0vx2OioPKFrrxyFg/ItKeXBmazoAGMFQEea6/MlP3zWqFGjRo0y/A3lxcMNXfCjjAAAAABJRU5ErkJggg==");
/* ---------------------------------- Toast --------------------------------- */
--falcon-toast-background-color: rgba(52, 64, 80, 0.3);
/* --------------------------------- Wizard --------------------------------- */
--falcon-theme-wizard-nav-item-circle-bg: #0b1727;
/* -------------------------------- Card Span ------------------------------- */
--falcon-card-span-img-bg: #0b1727;
--falcon-card-span-img-box-shadow: var(--falcon-box-shadow-sm);
--falcon-card-span-img-hover-box-shadow: var(--falcon-box-shadow);
/* ------------------------------ Emoji Picker ------------------------------ */
/* ------------------------------ showcase-page ------------------------------ */
--falcon-setting-toggle-shadow: 0 -7px 14px 0 rgba(3, 12, 51, 0.15), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
/* -------------------------------- Scrollbar ------------------------------- */
--falcon-scrollbar-bg: rgba(52, 64, 80, 0.6);
/* ------------------------------- Falcon Pill ------------------------------ */
--falcon-nav-pills-falcon-active-bg-color: #0b1727;
/* ------------------------------- Custom disabled button ------------------------------ */
--falcon-btn-disabled-custom-background: rgba(11, 23, 39, 0.65);
--falcon-btn-disabled-custom-color: rgba(255, 255, 255, 0.2);
}
:root .table,
:root.light .table,
:root .light .table {
--falcon-table-striped-bg: #f9fafd;
}
.dark .table {
--falcon-table-striped-bg: #0b1727;
}
body {
margin: 0;
padding: 0;
line-height: 1.4;
color: black;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: #3568f0;
}
img,
svg {
border: none;
max-width: 100%;
vertical-align: middle;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-weight: bold;
}
p,
figure,
figcaption,
blockquote,
caption,
fieldset,
embed,
object,
applet,
canvas,
caption,
iframe,
strike,
time,
video {
border: 0;
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
strong {
font-weight: bold;
}
::after,
::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:focus {
outline: -webkit-focus-ring-color auto 0;
}
/* End fix*/
/* Bengen header */
.header-ai {
width: 100%;
z-index: 999;
position: fixed;
top: 0;
left: 0;
height: 75px;
background: #fff;
box-shadow: 0 4px 10px rgba(182, 182, 182, 0.18);
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transition: transform 300ms ease;
-webkit-transition: transform 300ms ease;
-moz-transition: transform 300ms ease;
-o-transition: transform 300ms ease;
}
.header-ai.header_hidden {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
}
/* End */
.main-ai {
float: left;
width: 100%;
padding-top: 75px;
}
.main-content-ai {
max-width: 1200px;
margin: auto;
position: relative;
}
.logo-ai {
display: inline-block;
position: relative;
top: 8px;
}
.logo-ai img {
height: 60px;
width: 170px;
}
.navbar-ai {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
top: 12px;
}
.navbar-ai li {
display: inline-block;
list-style: none;
margin-left: 48px;
font-size: 16px;
font-weight: bold;
}
.login-right {
float: right;
position: relative;
top: 17px;
}
.login-ai {
display: inline-block;
border: solid 1px #707070;
height: 42px;
line-height: 40px;
padding: 0 24px;
border-radius: 24px;
font-size: 16px;
font-weight: bold;
}
.register-ai {
display: inline-block;
border: solid 1px #ec2227;
color: #ec2227;
margin-left: 16px;
height: 42px;
line-height: 40px;
padding: 0 24px;
border-radius: 24px;
font-size: 16px;
font-weight: bold;
}
.btn-login-mobile {
position: absolute;
right: 6px;
height: 40px;
width: 40px;
display: none;
place-items: center;
top: 10px;
}
/* Bengin dropdown*/
.dropdown-item {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-icon {
width: 40px;
height: 40px;
background: #f2f2f2;
border-radius: 100%;
display: inline-block;
place-items: center;
display: grid;
}
.dropdown-wrapper {
background: #fff;
display: none;
position: absolute;
z-index: 99;
padding: 16px;
right: 0;
width: 300px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
z-index: 99;
}
.dropdown-active .icon-dropdown {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.dropdown-item.f-user {
top: -6px;
}
.btn-dropdown.thumb-user {
display: grid;
place-items: center;
cursor: pointer;
height: 34px;
width: 34px;
border-radius: 100%;
background: #f2f2f2;
overflow: hidden;
}
.btn-dropdown.thumb-user img {
display: inline-block;
height: 34px;
width: 34px;
border-radius: 100%;
}
.profile-item {
width: 100%;
float: left;
margin-bottom: 16px;
}
.profile-thumb {
float: left;
margin-right: 16px;
}
.profile-thumb img {
height: 34px;
width: 34px;
border-radius: 100%;
display: inline-block;
}
.profile-info {
display: grid;
}
.profile-name {
font-size: 15px;
font-weight: bold;
}
.profile-email {
color: #555;
}
.profile-tokens {
background: #e6f6ff;
padding: 16px;
border-radius: 8px;
}
.tokens-text {
font-size: 15px;
margin-bottom: 10px;
color: #222;
}
.tokens-number {
margin-bottom: 5px;
}
.tokens-timeline {
position: relative;
}
.tokens-dark {
position: absolute;
left: 0;
width: 100%;
height: 5px;
background: #cbdde8;
border-radius: 3px;
top: 0;
}
.tokens-red {
position: absolute;
left: 0;
width: 0;
height: 5px;
background: #ec2227;
border-radius: 3px;
top: 0;
z-index: 9;
}
.nav-profile {
margin: 0;
padding: 0;
}
.nav-profile li {
list-style: none;
}
.nav-profile a {
display: block;
border-radius: 8px;
padding: 10px 16px;
font-size: 15px;
position: relative;
color: #666;
}
.nav-profile li a.active,
.nav-profile li a:hover {
background: #f5f5f5;
color: #222222;
}
.nav-profile li a svg {
position: relative;
margin-right: 10px;
top: -2px;
}
.div-logout {
width: 100%;
float: left;
padding-top: 12px;
border-top: solid 1px #f1f1f1;
}
.btn-logout {
display: block;
border-radius: 8px;
padding: 10px 16px;
font-size: 15px;
position: relative;
color: #666;
}
.btn-logout:hover {
background: #f5f5f5;
color: #222222;
}
.btn-logout svg {
position: relative;
margin-right: 10px;
top: -2px;
}
.head-login {
position: absolute;
right: 0;
top: 26px;
}
/* Bengin sidebar default */
.sidebar-overlay {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
background: #000;
z-index: 1034;
-webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.sidebar-overlay.active {
opacity: 0.5;
visibility: visible;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
.sidebar-default {
background-color: #fff;
width: 0;
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0);
position: relative;
display: block;
min-height: 100%;
overflow-y: auto;
overflow-x: hidden;
border: none;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.sidebar-default.open {
min-width: 300px;
width: 300px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sidebar-fixed-left,
.sidebar-fixed-right,
.sidebar-stacked {
position: fixed;
top: 0;
bottom: 0;
z-index: 1035;
}
.sidebar-stacked {
left: 0;
}
.sidebar-fixed-left {
left: 0;
box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.35);
}
.sidebar-fixed-right {
right: 0;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.35);
-webkit-transform: translate3d(280px, 0, 0);
transform: translate3d(280px, 0, 0);
}
.sidebar-fixed-right.open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sidebar-toggle {
position: absolute;
left: 6px;
top: 10px;
width: 40px;
height: 40px;
place-items: center;
display: none;
cursor: pointer;
}
.sidebar-toggle.btn-pushbar-close {
width: 40px;
text-align: right;
padding: 10px;
position: absolute;
height: 40px;
right: 0;
top: 0;
display: grid;
place-items: center;
cursor: pointer;
left: initial;
}
.nav-sidebar {
width: 100%;
float: left;
padding: 0 20px;
}
.navbar-mobi {
padding: 0;
margin: 0;
}
.navbar-mobi li {
list-style: none;
margin: 30px 0;
font-size: 18px;
font-weight: bold;
}
/* End sidebar default */
/* End header */
/* Bengin section */
/* Form group */
.form-group {
float: left;
width: 100%;
position: relative;
margin-bottom: 12px;
display: table;
}
.form-group:last-child {
margin-bottom: 0;
}
.input:-webkit-autofill,
.textarea:-webkit-autofill,
.select:-webkit-autofill {
box-shadow: 0 0 0 1000px white inset;
}
.input::-ms-clear {
display: none;
}
.select::-ms-expand {
display: none;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.input,
.select,
.textarea,
.button {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: inherit;
outline: none;
}
.input,
.select {
height: 36px;
padding: 0 10px;
}
.input,
.select,
.textarea {
display: inline-block;
border: solid 1px #e6e6e6;
margin: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
text-overflow: "";
appearance: none;
border-radius: 2px;
webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.input:focus,
.select:focus,
.textarea:focus {
border: solid 1px #eaeaea;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, 0.6);
box-shadow: inset inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, 0.6);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.select {
background: url(../../images/lp/arow.svg) no-repeat;
background-position: right 6px top 50%;
padding-right: 16px;
background-size: 12px;
}
.textarea {
height: 85px;
padding: 10px;
resize: vertical;
}
.button {
background: none;
cursor: pointer;
border: 0;
padding: 0;
margin: 0;
}
.button:focus {
outline: 0;
}
.label {
display: block;
position: relative;
}
.radio {
height: 16px;
width: 16px;
padding: 0;
margin: 0;
}
.checkbox {
height: 16px;
width: 16px;
padding: 0;
margin: 0;
}
.btn {
display: inline-block;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
outline: none;
background: #e0e0e0;
padding: 0 16px;
border-radius: 24px;
}
.btn-default {
background: #ec2227;
color: #fff;
font-size: 16px;
font-weight: bold;
min-width: 150px;
}
.full {
width: 100%;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.section-background {
float: left;
width: 100%;
height: 90vh;
background: url("../../images/lp/MaskGroup.jpg") repeat;
background-position: center top;
background-size: cover;
color: #fff;
margin-bottom: 80px;
overflow: hidden;
display: grid;
place-items: center;
}
.block-div {
margin-bottom: 16px;
}
.block-div:last-child {
margin-bottom: 0;
}
.headding-home {
font-size: 52px;
line-height: 52px;
font-weight: bold;
color: #ec2227;
}
.text-desc1 {
font-size: 34px;
font-weight: bold;
}
.text-desc2 {
font-size: 22px;
}
.col-left {
width: 50%;
}
.elButton {
display: inline-block;
background: #ec2227;
padding: 12px 48px;
font-size: 22px;
font-weight: bold;
color: #fff;
text-align: center;
border-radius: 48px;
margin: 24px 0;
}
.elButton:hover {
background: #e4151a;
color: #fff;
}
.text-list {
margin-bottom: 8px;
font-size: 16px;
}
.block-list:last-child {
margin-bottom: 0;
}
.text-list svg {
margin-right: 12px;
}
.section-ai {
float: left;
width: 100%;
margin-bottom: 80px;
}
.section-header {
float: left;
width: 100%;
}
.section-content {
float: left;
width: 100%;
}
.div-grid-3 {
width: 100%;
float: left;
display: grid;
grid-column-gap: 48px;
grid-row-gap: 48px;
grid-template-columns: repeat(3, 1fr);
}
.col-item-3 {
border: solid 2px #ec2227;
padding: 40px;
text-align: center;
border-radius: 10px;
}
.heading-ai {
font-size: 38px;
text-align: center;
}
.div-thumb3 {
margin-bottom: 20px;
}
.div-thumb3 img {
display: inline-block;
height: 100px;
width: 100px;
}
.div-text-1 {
font-size: 22px;
font-weight: bold;
margin-bottom: 20px;
}
.div-text-2 {
font-size: 18px;
line-height: 1.6;
}
/* post */
.list-news {
width: 100%;
float: left;
margin-bottom: 60px;
}
.list-news:last-child {
margin-bottom: 0;
}
.news-thumb {
display: block;
position: relative;
}
.news-image {
border-radius: 20px;
display: block;
overflow: hidden;
height: 0;
position: relative;
width: 100%;
background: #f2f2f2;
padding-bottom: 56%;
}
.news-image img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-position: center;
object-position: center;
-o-object-fit: cover;
object-fit: cover;
}
.news-inner.grid {
display: grid;
padding-top: 40px;
}
.thumb-right {
width: 48%;
margin-left: 60px;
float: right;
}
.thumb-left {
width: 48%;
margin-right: 60px;
float: left;
}
.title-h3 {
font-size: 26px;
margin-bottom: 20px;
}
.ul-content {
margin: 0;
padding: 0;
}
.ul-content li {
list-style: none;
margin-bottom: 16px;
font-size: 18px;
padding: 0px 0px 0 32px;
position: relative;
}
.ul-content li svg {
position: absolute;
left: 0;
top: 9px;
}
.text-div {
font-size: 18px;
margin-bottom: 20px;
}
.listing-middle {
display: table;
}
.header-middle {
display: table-cell;
width: 100%;
vertical-align: middle;
}
/* droplist */
.droplist {
position: relative;
width: 100%;
float: left;
background-color: #f8f8f8;
padding: 20px 24px;
border-radius: 12px;
margin-bottom: 20px;
}
.droplist-content {
display: none;
width: 100%;
float: left;
font-size: 16px;
margin-top: 16px;
line-height: 1.6;
}
.droplist-open .droplist-content {
display: block;
}
.droplist-title {
float: left;
padding-right: 36px;
width: 100%;
background: url("../../images/lp/daucong.svg") no-repeat;
background-position: right center;
background-size: 16px;
font-size: 16px;
cursor: pointer;
position: relative;
z-index: 9;
}
.droplist-open .droplist-title {
background: url("../../images/lp/dautru.svg") no-repeat;
background-position: right center;
background-size: 16px;
position: relative;
z-index: 9;
}
.drop-col2 {
width: 48%;
float: left;
margin-right: 4%;
}
.drop-col2:last-child {
margin-right: 0;
}
.entry-content p {
margin: 5px 0;
}
.goi-dv4 {
width: 100%;
float: left;
display: grid;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-columns: repeat(4, 1fr);
}
.col-itemdv4 {
border: solid 2px #eee;
position: relative;
padding: 24px;
border-radius: 10px;
}
.color-cyan {
color: #199cbe;
}
.color-green {
color: #32bb00;
}
.color-red {
color: #ec2227;
}
.color-orange {
color: #ef8f0d;
}
.color-blue {
color: #3568f0;
}
.div-goi {
font-size: 26px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.div-goi-item {
margin-bottom: 10px;
height: 84px;
}
.div-dangky {
margin-bottom: 20px;
}
.div-goi-vnd {
display: block;
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 8px;
}
.s-thang {
font-size: 14px;
position: relative;
top: -8px;
margin-left: 8px;
font-weight: normal;
}
.div-goi-vnd sup {
font-size: 14px;
}
.img-user {
height: 32px;
width: 32px;
border-radius: 100%;
margin: 0 -5px;
display: inline-block;
}
.text-user-seclect {
vertical-align: middle;
margin-left: 10px;
font-size: 12px;
}
.div-goi-dangky {
display: block;
margin-bottom: 20px;
}
.btn-goi-trainghiem {
display: block;
border: solid 1px #199cbe;
padding: 10px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
background: #199cbe;
color: #fff;
}
.btn-goi-trainghiem svg {
fill: #fff;
margin-left: 10px;
position: relative;
top: -3px;
}
.btn-goi-trainghiem:hover svg {
fill: #fff;
}
.btn-goi-coban {
display: block;
border: solid 1px #4e841f;
padding: 10px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
color: #4e841f;
}
.btn-goi-coban svg {
fill: #4e841f;
margin-left: 10px;
position: relative;
top: -3px;
}
.btn-goi-coban:hover svg {
fill: #fff;
}
.color-dark {
color: #666;
}
.btn-goi-nangcao {
display: block;
background: #ec2227;
padding: 10px;
font-size: 16px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
color: #fff;
}
.btn-goi-nangcao svg {
fill: #fff;
margin-left: 10px;
position: relative;
top: -3px;
}
.btn-goi-nangcao:hover svg {
fill: #fff;
}
.btn-dkgoi {
display: block;
border: solid 1px #ddd;
padding: 10px;
font-size: 16px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
color: #555;
}
.btn-dkgoi:hover {
border: solid 1px #ec2227;
background: #ec2227;
color: #fff;
}
.btn-dkgoi svg {
margin-left: 10px;
position: relative;
top: -2px;
fill: #555;
}
.btn-dkgoi:hover svg {
fill: #fff;
}
.btn-goi-doanhnghiep {
display: block;
border: solid 1px #ef8f0d;
padding: 10px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
text-align: center;
border-radius: 24px;
color: #ef8f0d;
}
.btn-goi-doanhnghiep:hover {
border: solid 1px #ef8f0d;
background: #ef8f0d;
color: #fff;
}
.btn-goi-doanhnghiep svg {
fill: #ef8f0d;
margin-left: 10px;
position: relative;
top: -3px;
}
.btn-goi-doanhnghiep:hover svg {
fill: #fff;
}
.btn-goi-nangcao:hover {
background: #cc161a;
color: #fff;
}
.btn-nangcao:hover svg {
fill: #fff;
}
.btn-goi-coban:hover {
border: solid 1px #4e841f;
background: #4e841f;
color: #fff;
}
.btn-coban:hover svg {
fill: #fff;
}
.btn-goi-trainghiem:hover {
border: solid 1px #13819e;
background: #13819e;
}
.btn-trainghiem:hover svg {
fill: #fff;
}
.ul-content-goi {
margin: 0;
padding: 0;
line-height: 1.6;
}
.ul-content-goi li {
list-style: none;
margin-bottom: 12px;
font-size: 16px;
padding: 0px 0px 0 24px;
position: relative;
}
.ul-content-goi li svg {
position: absolute;
left: 0;
top: 5px;
}
.col-itemdv4.boder-cyan {
border: solid 2px #199cbe;
}
.col-itemdv4.boder-green {
border: solid 2px #4e841f;
}
.col-itemdv4.boder-red {
border: solid 2px #ec2227;
}
.col-itemdv4.boder-orange {
border: solid 2px #ef8f0d;
}
.div-font {
width: 100%;
float: left;
margin-bottom: 24px;
font-size: 16px;
}
.div-goile {
width: 100%;
float: left;
border: solid 2px #eee;
border-radius: 12px;
padding: 24px 48px;
}
.head-goile {
font-size: 26px;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}
.div-goile-info {
padding-right: 30%;
position: relative;
}
.btn-goile {
display: inline-block;
border: solid 1px #ddd;
padding: 10px;
font-size: 16px;
cursor: pointer;
min-width: 250px;
font-weight: bold;
text-align: center;
border-radius: 24px;
color: #555;
position: absolute;
right: 0;
bottom: 0;
}
.btn-goile svg {
fill: #555;
margin-left: 10px;
}
.btn-goile:hover {
border: solid 1px #ec2227;
background: #ec2227;
color: #fff;
}
.btn-goile:hover svg {
fill: #fff;
}
.div-phobien {
display: block;
position: absolute;
top: -19px;
text-align: center;
left: 0;
width: 100%;
}
.bg-phobien {
display: inline-block;
background: #ec2227;
color: #fff;
height: 32px;
line-height: 32px;
padding: 0 12px;
border-radius: 5px;
min-width: 170px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}
.font-sale {
font-weight: bold;
}
.div-sale {
font-size: 14px;
text-decoration: line-through;
margin-bottom: 12px;
text-align: center;
}
.div-goi-item2 {
margin-bottom: 10px;
height: 120px;
}
.div-sale sup {
font-size: 14px;
font-weight: bold;
}
.f16 {
font-size: 16px;
font-weight: normal;
}
/* Bengin tabs-goi */
.block-tab {
width: 100%;
float: left;
margin-bottom: 80px;
text-align: center;
}
.tabs-goi {
display: inline-block;
}
.tabs-goi-item {
cursor: pointer;
list-style: none;
text-align: center;
display: inline-block;
padding: 8px 16px;
font-size: 18px;
border-radius: 8px;
background: #f2f2f2;
margin: 0 5px;
}
.tabs-goi-item.active {
color: #fff;
font-weight: bold;
background: #ec2227;
}
.tabs-goi-item.active .color-red {
color: #ffd700;
}
.tabs-goi-content {
display: none;
float: left;
width: 100%;
margin-bottom: 24px;
}
.tabs-goi-content.active {
display: block;
}
.width-calc {
margin: 0 -5%;
width: calc(100% + 10%);
}
.tabs-goile {
cursor: pointer;
list-style: none;
text-align: center;
display: inline-block;
padding: 8px 16px;
font-size: 18px;
border-radius: 8px;
background: #f2f2f2;
margin: 0 5px;
}
/* End tabs-goi */
/* Bengin login */
.body-login {
background: #f2f2f2;
}
.main-login {
width: 100%;
float: left;
background: #f2f2f2;
padding: 16px;
}
.div-header {
width: 100%;
float: left;
padding: 0 16px;
margin-bottom: 12px;
}
.link-home1 {
margin-right: 20px;
display: inline-block;
}
.link-home1 img {
height: 40px;
display: inline-block;
}
.link-home2 {
display: inline-block;
border: solid 1px #ec2227;
color: #ec2227;
padding: 6px 16px;
border-radius: 24px;
vertical-align: middle;
}
.link-home2 svg {
margin-right: 10px;
position: relative;
top: -2px;
}
.div-section {
width: 100%;
float: left;
}
.section-w600 {
max-width: 600px;
width: 100%;
margin: auto;
}
.block-login-head {
width: 100%;
float: left;
margin-bottom: 16px;
font-size: 18px;
text-align: center;
font-weight: bold;
}
.rows {
width: 100%;
float: left;
margin-bottom: 24px;
}
.block-white {
background: #fff;
border-radius: 24px;
float: left;
width: 100%;
padding: 20px 40px;
}
.iconlailuat {
width: 24px;
height: 24px;
margin-right: 10px;
position: relative;
top: -4px;
}
.input.input-text {
height: 40px;
width: 100%;
border-radius: 24px;
padding: 0 16px;
}
.label-text {
margin-bottom: 6px;
padding: 0 6px;
}
.text-16 {
font-size: 16px;
}
.div-texthead {
font-size: 22px;
font-weight: bold;
}
.underline {
text-decoration: underline;
}
.f-pad {
padding: 0 16px;
font-size: 13px;
}
.div-inpass {
position: relative;
}
.showpass {
position: absolute;
right: 10px;
height: 24px;
width: 24px;
display: grid;
top: 9px;
cursor: pointer;
z-index: 9;
place-items: center;
}
.text-danger {
width: 100%;
float: left;
font-size: 12px;
color: #ff3547;
padding-top: 6px;
padding-left: 8px;
}
.input.input-text.focus-danger {
border: 1px solid #ff3547;
}
.btn.btn-more {
background: #f2f2f2;
color: #222;
text-align: center;
width: 100%;
font-weight: normal;
font-size: 14px;
height: 40px;
line-height: 40px;
}
.btn.btn-more svg {
position: relative;
margin-right: 10px;
top: -2px;
}
.divline {
border-bottom: solid 1px #ffe2de;
float: left;
width: 100%;
text-align: center;
position: relative;
top: -7px;
}
.divline span {
display: inline-block;
position: relative;
background: #fff;
padding: 2px 6px;
top: 10px;
font-size: 12px;
}
.div-quenpass {
float: right;
}
.label-savepas {
float: left;
}
.item-group2 {
width: 100%;
float: left;
display: grid;
grid-column-gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.select.select-goi {
height: 40px;
width: 100%;
border-radius: 24px;
padding: 0 24px 0 16px;
background-position: right 10px top 50%;
}
.div-buoc123 {
display: inline-block;
position: relative;
margin-bottom: 16px;
}
.text-buoc {
font-weight: bold;
}
.bg-buoc123 {
display: inline-block;
width: 60px;
height: 6px;
background: #f2f2f2;
border-radius: 4px;
margin-left: 12px;
}
.bg-buoc123.active {
background: #ec2227;
}
.div-money {
float: right;
font-size: 18px;
}
.text-money {
float: left;
font-size: 16px;
width: 40%;
}
.font-bold {
font-weight: bold;
}
.font-money {
font-size: 22px;
font-weight: bold;
color: #ec2227;
}
.bg-thanhtoan {
background: #fff6d9;
padding: 12px;
border-radius: 4px;
color: #815b02;
line-height: 1.6;
position: relative;
margin-top: 10px;
}
.label-thanhtoan {
padding-left: 24px;
}
.bg-thanhtoan svg {
position: absolute;
top: -10px;
left: 20px;
display: inline-block;
}
.bg-thanhtoan a {
color: #ec2227;
font-weight: bold;
}
.label-thanhtoan .radio {
position: absolute;
left: 0;
top: 3px;
}
.label-hoadon {
padding-left: 24px;
}
.label-hoadon input {
position: absolute;
left: 0;
top: 5px;
margin: 0;
padding: 0;
}
.box-atm {
width: 100%;
float: left;
margin-bottom: 40px;
}
.box-hoadon {
width: 100%;
float: left;
margin-bottom: 12px;
}
.textarea.textarea-text {
width: 100%;
border-radius: 12px;
padding: 12px 16px;
}
.section-1200 {
max-width: 1200px;
width: 100%;
margin: auto;
}
.section-1000 {
max-width: 1000px;
width: 100%;
margin: auto;
}
.section-1200 .block-white {
width: 46%;
margin: 0 2%;
}
.text-18 {
font-size: 18px;
}
/*Bengin table */
.table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.table td,
.table th {
padding: 8px;
border-top: solid 1px #e0e0e0;
}
.table-bordered,
.table-bordered td,
.table-bordered th {
border: solid 1px #e0e0e0;
}
.table-striped tr:nth-of-type(2n + 2) {
background-color: #f9f9f9;
}
.table-scroll {
overflow-x: auto;
white-space: nowrap;
}
.text-xacnhantt {
color: #ec2227;
font-size: 24px;
font-weight: bold;
}
.text-xacnhantt svg {
position: relative;
top: -4px;
margin-right: 12px;
}
.img-gld {
float: left;
margin-right: 12px;
height: 60px;
width: 60px;
}
.text-gld {
display: grid;
line-height: 1.6;
padding-top: 8px;
}
.svgchecktt {
margin-right: 8px;
position: relative;
top: -1px;
}
.table.table-thanhtoan {
background: #f8f8f8;
text-align: center;
}
.table-thanhtoan td {
vertical-align: top;
padding: 12px;
}
.table-thanhtoan th {
font-weight: normal;
}
.div-tttt {
background: #f8f8f8;
border-radius: 12px;
padding: 16px;
float: left;
width: 100%;
}
.tttt-info {
width: 70%;
float: left;
line-height: 1.6;
}
.tttt-info p {
margin: 12px 0;
}
.tttt-qr {
float: right;
text-align: center;
}
.upcase {
text-transform: uppercase;
}
.btn-tttt-info {
display: inline-block;
background: #ec2227;
color: #fff;
padding: 4px;
border-radius: 24px;
font-size: 13px;
min-width: 170px;
cursor: pointer;
}
.font-qqr {
font-size: 12px;
}
.font-18 {
font-size: 18px;
}
.font-16 {
font-size: 16px;
}
/* End login */
/* End section */
/*Bengin footer */
.footer-ai {
float: left;
width: 100%;
}
.footer-content {
border-top: solid 1px #e6e6e6;
float: left;
width: 100%;
padding: 36px 0;
}
.footer-rows {
margin-bottom: 24px;
}
.footer-rows:last-child {
margin-bottom: 0;
}
.footer-left {
float: left;
color: #555555;
width: 60%;
}
.footer-right {
float: right;
text-align: right;
}
.footer-rows p {
padding: 4px 0;
}
.logo-footer {
display: inline-block;
margin-bottom: 10px;
}
.title-app {
font-size: 16px;
font-weight: bold;
margin-bottom: 16px;
}
.img-qrcode {
display: inline-block;
vertical-align: top;
}
.google-play-badge img {
width: 120px;
height: 40px;
margin-bottom: 8px;
}
.appstore-badge img {
width: 120px;
height: 40px;
}
.rows-qrcode {
color: #888;
font-size: 14px;
padding-top: 16px;
}
.img-qrcode img {
height: 86px;
width: 86px;
}
.img-dmca {
float: left;
margin-top: 12px;
height: 48px;
}
.img-add {
margin-top: 24px;
}
.divg {
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
.google-play-badge {
display: block;
}
.appstore-badge {
display: block;
}
.backtotop {
background-color: #fff;
position: fixed;
bottom: 16px;
right: 16px;
z-index: 999;
border-radius: 100%;
height: 40px;
width: 40px;
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
display: grid;
place-items: center;
}
/*End footer */
@media (max-width: 1280px) {
.width-calc {
margin: 0;
width: 100%;
}
.col-itemdv4 {
padding: 16px;
}
}
@media only screen and (max-width: 1080px) {
.main-content-ai {
padding: 0 16px;
}
.navbar-ai li {
margin-left: 28px;
}
.col-item-3 {
padding: 24px;
}
.div-goi-vnd {
font-size: 20px;
}
.div-goi-item {
height: 100px;
}
.div-goi {
font-size: 20px;
}
.btn-dkgoi {
font-size: 14px;
}
.btn-goi-nangcao {
font-size: 14px;
}
.div-goi-item2 {
height: 164px;
}
}
@media only screen and (max-width: 960px) {
.sidebar-toggle {
display: grid;
}
.navbar-ai {
display: none;
}
.login-right {
display: none;
}
.logo-ai {
top: 7px;
left: 40px;
}
.btn-login-mobile {
display: grid;
}
.logo-ai img {
height: 48px;
width: 130px;
}
.main-ai {
padding-top: 60px;
}
.footer-left {
width: 100%;
margin-bottom: 20px;
}
.footer-right {
text-align: left;
width: 100%;
}
.div-goi-vnd {
font-size: 24px;
}
.div-goi {
font-size: 24px;
}
.btn-dkgoi {
font-size: 16px;
}
.btn-goi-nangcao {
font-size: 16px;
}
.div-grid-3 {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: repeat(1, 1fr);
}
.col-left {
width: 100%;
padding: 16px 0;
}
.section-ai {
margin-bottom: 40px;
}
.header-ai {
height: 60px;
}
.headding-home {
font-size: 34px;
}
.text-desc1 {
font-size: 24px;
}
.block-div {
margin-bottom: 14px;
}
.text-desc2 {
font-size: 18px;
}
.elButton {
font-size: 18px;
margin: 16px 0;
}
.text-list {
font-size: 14px;
}
.section-background {
height: 75vh;
margin-bottom: 40px;
}
.heading-ai {
font-size: 26px;
}
.col-item-3 {
padding: 24px;
}
.div-text-1 {
font-size: 20px;
}
.div-text-2 {
font-size: 16px;
}
.div-thumb3 img {
height: 80px;
width: 80px;
}
.news-inner.grid {
display: block;
padding: 0;
width: 100%;
float: left;
}
.thumb-right {
margin-left: 0;
float: right;
width: 100%;
margin-bottom: 20px;
}
.title-h3 {
font-size: 20px;
}
.ul-content li {
font-size: 16px;
}
.thumb-left {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
}
.list-news {
margin-bottom: 24px;
}
.drop-col2 {
width: 100%;
margin-right: 0;
}
.goi-dv4 {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: repeat(1, 1fr);
}
.col-itemdv4.boder-red {
margin-top: 24px;
}
.tabs-goi-item {
padding: 8px;
margin: 0 3px;
font-size: 14px;
}
.tabs-goi-item .f16 {
font-size: 14px;
}
.block-tab {
margin-bottom: 24px;
}
.div-goile {
padding: 16px;
}
.head-goile {
font-size: 24px;
}
.div-goile-info {
padding-right: 0;
}
.tabs-goile {
padding: 8px;
font-size: 14px;
margin: 0 3px;
}
.btn-goile {
display: block;
width: 100%;
position: inherit;
margin-top: 16px;
}
.col-itemdv4 {
padding: 16px;
}
.div-goi {
font-size: 24px;
}
.text-div {
font-size: 16px;
}
.div-font {
font-size: 14px;
}
.block-white {
border-radius: 16px;
padding: 16px;
}
.div-texthead {
font-size: 20px;
}
.div-header {
padding: 0;
}
.link-home2 {
padding: 5px 12px;
}
.link-home1 {
margin-right: 12px;
}
.block-login-head {
font-size: 16px;
}
.item-group2 {
grid-column-gap: 0;
grid-template-columns: repeat(1, 1fr);
}
.item-group {
margin-bottom: 12px;
}
.item-group:last-child {
margin-bottom: 0;
}
.bg-buoc123 {
width: 48px;
}
.section-1200 .block-white {
width: 100%;
margin: 0;
margin-bottom: 16px;
}
.text-gld {
padding-top: 0;
}
.text-xacnhantt {
font-size: 20px;
}
.img-gld {
height: 36px;
width: 36px;
}
.table.table-thanhtoan {
text-align: left;
}
.table-thanhtoan th,
.table-thanhtoan td {
display: table-cell;
border: 0;
border-bottom: solid 1px #e0e0e0;
}
.table-thanhtoan thead {
display: none;
}
.table-thanhtoan tr {
display: block;
border: solid 1px #e0e0e0;
}
.table-thanhtoan td {
display: block;
}
.table-thanhtoan td:last-child {
border-bottom: 0;
}
.table-thanhtoan td:before {
content: attr(data-th) ":";
display: block;
margin-bottom: 8px;
}
.tttt-info {
width: 100%;
}
.tttt-qr {
width: 100%;
}
.div-goi-item {
height: auto;
}
.div-goi-item2 {
height: auto;
}
}
@-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
.loading {
width: 16px;
height: 16px;
margin-bottom: 5px;
-webkit-animation: loading 2s linear infinite;
-moz-animation: loading 2s linear infinite;
}
.text-msg {
line-height: 1.6;
padding-top: 8px;
}
.target-hidden {
display: none !important;
}
.target-expanded {
display: block !important;
}
.popup-bg {
background: rgba(0, 0, 0, 0.6);
position: fixed;
display: none;
z-index: 99999;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
align-items: flex-start;
justify-content: center;
}
.popup-wrapper {
max-width: 430px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
}
.popup-body {
float: left;
width: 100%;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.popup-content {
float: left;
width: 100%;
}
.form-pad16 {
padding: 16px;
float: left;
width: 100%;
}
.text-center {
text-align: center;
}
.form-group {
float: left;
width: 100%;
position: relative;
margin-bottom: 16px;
display: table;
}
.text-successful {
font-size: 16px;
font-weight: bold;
}
.btn-law {
background: #a67c52;
color: #fff;
padding: 0 24px;
font-size: 14px;
display: inline-block;
height: 34px;
line-height: 34px;
cursor: pointer;
font-weight: 600;
text-align: center;
padding: 0 16px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.btn-law {
background: #ec2227;
}
.btn-law-login,
.btn-law-regist {
background: var(--falcon-soft-secondary);
color: var(--falcon-black);
padding: 0 24px;
font-size: 14px;
display: inline-block;
height: 34px;
line-height: 34px;
cursor: pointer;
font-weight: 600;
text-align: center;
padding: 0 16px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin-right: 6px;
}
.bg-primary {
background: var(--falcon-primary);
color: var(--falcon-white);
}
.bg-secondary {
background: var(--falcon-secondary);
color: var(--falcon-white);
}
.bg-danger {
background: var(--falcon-danger);
color: var(--falcon-white);
}
.bg-white {
background: var(--falcon-white);
color: var(--falcon-black);
}
.bg-success {
background: var(--falcon-success);
color: var(--falcon-white);
}
.bg-info {
background: var(--falcon-info);
color: var(--falcon-black);
}
.bg-warning {
background: var(--falcon-warning);
color: var(--falcon-white);
}
.bg-light {
background: var(--falcon-light);
color: var(--falcon-black);
}
.bg-dark {
background: var(--falcon-dark);
color: var(--falcon-white);
}
.me-2 {
margin-right: 0.5rem;
}
.btn-small-fontsize {
font-size: 14px !important;
}
.btn-law-small-fontsize {
background: #ec2227;
margin-bottom: 14px;
}
/* Bengen video popup, form dang ky */
/* form dang ky */
.section-ai.bgdkdn {
background: #f2f2f2;
padding: 60px 0;
}
.form-dkdn {
max-width: 678px;
margin: auto;
}
.text-thongbao {
font-size: 16px;
line-height: 1.6;
text-align: center;
}
.form-dkdn .form-group {
margin-bottom: 30px;
}
.input.input-transition {
height: 48px;
font-size: 16px;
width: 100%;
border-radius: 12px;
padding: 10px 16px;
}
.input-transition[required]:focus + .label-transition[placeholder]:before {
color: var(--falcon-black);
font-size: 12px !important;
/*bottom: 5px;*/
}
.input-transition[required]:focus + .label-transition[placeholder]:before,
.input-transition[required]:valid + .label-transition[placeholder]:before {
transition-duration: 0.2s;
-webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
transform: translate(0, -1.5em) scale(0.9, 0.9);
font-size: 12px;
top: 10px;
padding: 0px 5px;
border-radius: 4px;
}
.input-transition[required]:invalid + .label-transition[placeholder][alt]:before {
content: attr(alt);
}
.input-transition[required] + .label-transition[placeholder] {
display: block;
pointer-events: none;
line-height: 14px;
margin-top: calc(-3em - 2px);
margin-bottom: calc((3em - 1em) + 8px);
}
.input-transition[required] + .label-transition[placeholder]::before {
content: attr(placeholder);
display: inline-block;
color: var(--falcon-black);
white-space: nowrap;
transition: 0.3s ease-in-out;
background: #fff;
position: absolute;
left: 12px;
top: 14px;
font-size: 12px;
}
.btn.btn-default48 {
height: 48px;
line-height: 48px;
background: #ec2227;
color: #fff;
font-size: 16px;
font-weight: bold;
min-width: 150px;
border-radius: 12px;
}
/* popup */
.popup-bg {
background: rgba(0, 0, 0, 0.82);
position: fixed;
display: none;
z-index: 9999;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
align-items: flex-start;
justify-content: center;
}
.popup-wrapper {
max-width: 600px;
width: 98%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
}
.popup-wrapper-video {
max-width: 1200px;
width: 98%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
}
.popup-body {
float: left;
width: 100%;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
overflow: hidden;
}
.popup-header {
float: left;
width: 100%;
border-bottom: solid 1px #ebebeb;
padding: 16px 24px;
}
.popup-title {
float: left;
font-size: 24px;
padding-right: 24px;
font-weight: bold;
}
.close-popup {
position: absolute;
right: 12px;
top: 12px;
z-index: 999;
width: 32px;
height: 32px;
text-align: center;
cursor: pointer;
border-radius: 100%;
background: #535353;
display: grid;
place-items: center;
}
.popup-content {
float: left;
width: 100%;
}
.entry-popup {
float: left;
width: 100%;
}
.popup-height {
position: relative;
max-height: 75vh;
overflow-y: auto;
scrollbar-width: thin;
}
.popup-height::-webkit-scrollbar {
width: 8px;
background-color: #f9f9f9;
}
.popup-height::-webkit-scrollbar-thumb {
background: #ebebeb;
}
.target-hidden {
display: none !important;
}
.target-expanded {
display: block !important;
}
.overflow-hidden {
overflow: hidden;
}
/* video-box */
/* .video-reps {
position: relative;
padding-bottom: 55%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-reps iframe,
.video-reps object,
.video-reps embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} */
/* .video-box {
position: relative;
float: left;
width: 100%;
text-align: center;
}
.video-box img {
border-radius: 5px;
width: 100%;
}
.title-video {
position: absolute;
width: 100%;
font-size: 36px;
left: 0;
color: #fff;
font-weight: bold;
top: 60px;
}
.video-info {
position: absolute;
width: 100%;
left: 0;
font-size: 18px;
color: #fff;
bottom: 110px;
}
.play-video {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.video-btn {
width: 65px;
height: 65px;
cursor: pointer;
border-radius: 50%;
z-index: 1;
position: relative;
background-color: #fff;
display: grid;
place-items: center;
}
.video-btn:hover {
background-color: #ec2227;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.video-btn:hover svg path {
stroke: #fff;
}
.video-btn::after,
.video-btn::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
z-index: -1;
bottom: 0;
left: 0;
border-radius: 50%;
border: 1px solid #fff;
}
.video-btn::before {
-webkit-animation: ripple 2s linear infinite;
animation: ripple 2s linear infinite;
}
.video-btn::after {
-webkit-animation: ripple 2s linear 1s infinite;
animation: ripple 2s linear 1s infinite;
}
@-webkit-keyframes ripple {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.75);
transform: scale(1.75);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
@keyframes ripple {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.75);
transform: scale(1.75);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
@media only screen and (max-width: 960px) {
.video-info {
display: none;
}
} */
/* Bengin video-reps */
.video-reps {
position: relative;
padding-bottom: 50%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-reps iframe,
.video-reps object,
.video-reps embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* End video-reps */
@media only screen and (max-width: 2560px) {
}
@media only screen and (max-width: 1440px) {
}
@media only screen and (max-width: 1366px) {
.header {
padding-left: 22%;
}
.section-header.sticky-header {
width: 49%;
/* padding: 0; */
}
.content-center {
padding: 0 22%;
}
.sidebar-left {
width: 22%;
}
.sidebar-right {
width: 22%;
}
.sidebar-bottom {
width: 22%;
}
.footer {
padding: 12px 22%;
}
.scroll-2 {
max-height: 76.5vh;
}
.post-scroll {
padding: 0 24px;
max-height: 65vh;
}
.div-chat-new {
padding-right: 20px;
}
.content-right {
padding-left: 22%;
}
/*Bengen Tra cuu VB Ai */
.w-content-doc {
width: 100%;
float: left;
}
/*End Tra cuu VB Ai */
}
@media only screen and (max-width: 1280px) {
.section-header.sticky-header {
width: 49%;
/* padding: 0; */
}
.head-meta {
font-size: 12px;
}
.head-name {
font-size: 24px;
}
.hotline {
font-size: 14px;
}
.hidden1 {
display: none;
}
.btn-chat-new {
height: 40px;
line-height: 40px;
font-size: 14px;
padding: 0 8px;
}
.div-icmore .dropdown-wrapper {
width: 140px;
}
.form-ailuat {
padding: 0px 24px !important;
}
/*Bengen Tra cuu VB Ai */
.section-doc {
padding: 24px;
}
.scroll-2 {
max-height: 78vh;
}
/*End Tra cuu VB Ai */
}
@media only screen and (max-width: 1270px) {
.section-header.sticky-header {
width: 48%;
/* padding: 0; */
}
.textarea-message {
font-size: 14px;
padding: 25px 60px 20px 36px;
}
.hidden1270 {
display: none;
}
.post-scroll {
max-height: 60vh;
}
/*Bengen Tra cuu VB Ai */
.doc-left {
width: 60%;
padding-right: 20px;
}
.doc-right {
width: 40%;
}
/*End Tra cuu VB Ai */
}
@media only screen and (max-width: 1024px) {
.btn-chat-new {
padding: 0;
}
.split-btn {
padding: 0 0.5rem;
}
}
@media only screen and (max-width: 960px) {
.header.sticky {
display: block;
height: 3.5rem;
}
.header {
padding: 0 16px;
height: 56px;
}
.header-left {
padding: 0;
/* top: 8px; */
}
.header-right {
padding: 0;
top: 14px;
}
.btn-menu {
left: 8px;
display: grid;
top: 12px;
}
.head-name {
font-size: 16px;
}
.head-meta {
font-size: 12px;
}
.m-logo {
display: inline-block;
}
.head-item.m-hoidap {
display: inline-block;
position: relative;
top: -2px;
}
.headding-title {
font-size: 18px;
}
.section {
padding: 3rem 0;
}
.section-chat {
padding: 1rem 0;
}
.content-center {
padding: 16px;
}
.sidebar-left {
width: 100%;
display: none;
padding: 16px;
}
.sidebar-right {
width: 100%;
padding: 16px;
display: none;
}
.sidebar-left.show-sidebar {
display: block;
padding: 0;
}
.close-sidebar {
display: inline-block;
}
.ul-nav-link li a,
.nav-item-link {
font-size: 16px;
}
.head-text {
font-size: 16px;
}
.sidebar-right.show-sidebar2 {
display: block;
padding: 48px 16px 16px 16px;
width: 100%;
z-index: 999;
/* overflow-y: auto;
height: 100vh; */
}
.close-sidebar2 {
display: inline-block;
}
/* .sidebar-right.show-sidebar2 .scroll-2 {
max-height: initial;
overflow-y: initial;
} */
.footer {
padding: 12px 16px;
}
.form-ailuat {
padding: 0px !important;
}
.textarea-message {
height: 50px;
padding: 14px 48px 14px 20px;
font-size: 14px;
}
.btn-send svg {
height: 36px;
width: 36px;
}
.btn-send,
.btn-micro {
right: 6px;
top: 7px;
width: 36px;
height: 36px;
}
.text-ft {
font-size: 10px;
}
.post-scroll {
padding: 0;
overflow-y: initial;
max-height: none;
}
.block-chat-info {
margin-top: 24px;
}
.div-item .dropdown-item {
position: initial;
}
.dropdown-wrapper.dropdown-like {
width: 100%;
}
.table.table-history td:first-child {
width: 40%;
}
.table.table-history {
font-size: 14px;
}
.btn-nangcapgdv.ml-30 {
margin-left: 0;
display: block;
text-align: center;
margin-top: 16px;
}
.form-search {
max-width: 100%;
}
.text-gdi {
font-size: 14px;
}
.table.table-giao-dich {
font-size: 14px;
}
.input.input-search {
font-size: 14px;
}
.btn-theme-dark {
background: url(../../images/chat/icon_darktheme.svg) no-repeat;
background-size: 20px;
top: 1px;
position: relative;
height: 24px;
width: 24px;
margin-left: 0;
}
.theme-dark .btn-theme-dark {
background: url(../../images/chat/icon_darktheme2.svg) no-repeat;
background-size: 20px;
top: 1px;
position: relative;
height: 24px;
width: 24px;
margin-left: 0;
}
.block-layoutlvn {
width: 100%;
float: left;
display: grid;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 24px;
}
.dropdown-item.f-user {
top: -2px;
}
.sidebar-bottom {
position: relative;
bottom: auto;
width: 100%;
left: auto;
}
.table-scroll {
white-space: nowrap;
}
.popup-wrapper {
width: 90%;
}
.entry-popup {
padding: 16px;
}
.popup-title {
font-size: 18px;
}
.btn-ranting {
padding: 0 8px;
margin-right: 6px;
font-size: 13px;
}
.popup-body {
border-radius: 12px;
}
.popup-header {
padding: 16px;
}
.box-chat-lvn {
bottom: 0;
right: 0;
border-radius: 12px 12px 0 0;
}
.text-head-chatlvn {
font-size: 14px;
}
.text-head-chatlvn2 {
font-size: 12px;
}
.text-chatlvn2 {
font-size: 14px;
}
.div-chatlvn {
font-size: 14px;
}
.content-chatlvn {
float: left;
max-height: 350px;
}
.scroll-1 {
scrollbar-width: auto;
}
.scroll-1::-webkit-scrollbar {
width: auto;
}
.scroll-2 {
scrollbar-width: auto;
}
.scroll-2::-webkit-scrollbar {
width: auto;
}
.content-chatlvn {
scrollbar-width: auto;
}
.content-chatlvn::-webkit-scrollbar {
width: auto;
}
.page-title {
width: 100%;
margin-bottom: 12px;
}
.goi-dv4 {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: repeat(1, 1fr);
}
.div-goi-item2 {
height: auto;
}
.div-goi-item {
height: auto;
}
.col-itemdv4.boder-red {
margin-top: 16px;
}
.div-goile-info {
padding-right: 0;
}
.btn-goile {
display: block;
position: relative;
}
.label-grid-4 {
grid-column-gap: 12px;
grid-row-gap: 12px;
grid-template-columns: repeat(2, 1fr);
}
.content-right {
padding: 16px;
}
/*Bengen Tra cuu VB Ai */
.section-doc {
padding: 0;
}
.text-meo {
position: relative;
right: auto;
top: auto;
width: 100%;
float: left;
text-align: right;
margin-bottom: 12px;
}
.ul-tab-doc {
padding-left: 0;
font-size: 16px;
width: 100%;
display: table;
margin-bottom: 16px;
}
.ul-tab-doc li.active {
font-size: 16px;
}
.search-content {
border: 0;
border-radius: 0;
padding: 0;
}
.doc-clumn1 {
min-width: auto;
}
.doc-left {
width: 100%;
padding-right: 0;
}
.doc-right {
width: 100%;
}
.post-title-doc {
font-size: 16px;
}
.doc-tag {
font-size: 14px;
}
.doc-dmy {
font-size: 14px;
display: none;
}
.doc-number {
font-size: 16px;
}
.search-text {
margin-bottom: 5px;
padding-left: 0;
}
.btn-search-doc {
width: 48px;
}
.btn-search-doc svg {
margin-right: 0;
}
.input.input-search-doc {
padding: 0 48px 0 20px;
}
.post-summary-doc1 {
font-size: 16px;
}
.post-summary-doc2 {
font-size: 16px;
}
.tag-item-doc {
font-size: 14px;
padding: 4px 12px;
margin-right: 5px;
margin-bottom: 5px;
}
.tip-huongdan {
position: initial;
font-size: 12px;
}
.tip-huongdan-content {
padding: 12px;
width: 100%;
font-size: 16px;
}
.box-eyes-content {
bottom: 16px;
right: 16px;
width: 92%;
padding: 16px;
font-size: 16px;
}
.eyes-more a {
font-size: 14px;
}
.theme-dark .search-content {
border: 0;
}
/*End Tra cuu VB Ai */
/* m-hidden */
.m-hidden {
display: none;
}
.sidebar-right.show-sidebar2 .scroll-2 {
max-height: calc(100vh - 12rem) !important;
overflow-y: scroll;
}
.section-header.sticky-header {
width: 96%;
padding: 1rem 0;
}
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 430px) {
.section {
padding: 3rem 0;
}
.div-item {
display: inline-block;
margin-left: 0.5rem;
}
.post-summary table tr td {
word-break: break-word;
}
.post-inner {
display: block;
}
.badge.rounded-pill.px-3 {
padding-left: 0.2rem !important;
padding-right: 0.2rem !important;
}
.form-question-input .textarea-message {
margin: 0px;
padding: 0;
}
.btn-micro {
padding: 0.25rem;
}
}
@media only screen and (max-width: 390px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 325px) {
}
@media only screen and (max-width: 320px) {
}
:root {
color-scheme: light;
--font-default: "Arial", "Plus Jakarta Sans", sans-serif;
--menu-hover-color: #222222;
--active-color: #ffffff;
--active-bg-color: #d82823;
--background-color: #ffffff;
--tooltip-color: #977917;
--tooltip-bgr: #ffe17d;
--color: #000000;
--drd-bgr: #fbfbfb;
--drd-hover-bgr: #fff;
--box-shadow: 0 4px 10px #222;
--border-color: #f1f1f1;
--tbl-header-bg: #e5eaea;
--bg-primary: #3568f0;
--bg-primary-hover: #225aef;
--bg-secondary: #888;
--bg-secondary-hover: #797676;
--bg-danger: #f10808;
--bg-danger-hover: #cb0f0f;
--svg-qalvn-active-bg-color: #f5ebc6;
/*****************/
--falcon-blue: #2c7be5;
--falcon-indigo: #727cf5;
--falcon-purple: #6b5eae;
--falcon-pink: #ff679b;
--falcon-red: #e63757;
--falcon-orange: #fd7e14;
--falcon-yellow: #f5803e;
--falcon-green: #00d27a;
--falcon-teal: #02a8b5;
--falcon-cyan: #27bcfd;
--falcon-white: #fff;
--falcon-gray: #748194;
--falcon-gray-dark: #4d5969;
--falcon-gray-black: #000;
--falcon-gray-100: #f9fafd;
--falcon-gray-200: #edf2f9;
--falcon-gray-300: #d8e2ef;
--falcon-gray-400: #b6c1d2;
--falcon-gray-500: #9da9bb;
--falcon-gray-600: #748194;
--falcon-gray-700: #5e6e82;
--falcon-gray-800: #4d5969;
--falcon-gray-900: #344050;
--falcon-gray-1000: #232e3c;
--falcon-gray-1100: #0b1727;
--falcon-gray-white: #fff;
--falcon-primary: #2c7be5;
--falcon-secondary: #748194;
--falcon-success: #00d27a;
--falcon-info: #27bcfd;
--falcon-warning: #f5803e;
--falcon-danger: #e63757;
--falcon-light: #f9fafd;
--falcon-dark: #0b1727;
--falcon-primary-rgb: 44, 123, 229;
--falcon-secondary-rgb: 116, 129, 148;
--falcon-success-rgb: 0, 210, 122;
--falcon-info-rgb: 39, 188, 253;
--falcon-warning-rgb: 245, 128, 62;
--falcon-danger-rgb: 230, 55, 87;
--falcon-light-rgb: 249, 250, 253;
--falcon-dark-rgb: 11, 23, 39;
--falcon-white-rgb: 255, 255, 255;
--falcon-black-rgb: 0, 0, 0;
--falcon-body-color-rgb: 94, 110, 130;
--falcon-body-bg-rgb: 237, 242, 249;
--falcon-font-sans-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--falcon-font-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--falcon-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--falcon-body-font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--falcon-body-font-size: 1rem;
--falcon-body-font-weight: 400;
--falcon-body-line-height: 1.5;
--falcon-body-color: #5e6e82;
--falcon-body-bg: #edf2f9;
}
:root,
:root.light,
:root .light {
--falcon-facebook: #3c5a99;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-facebook-hover-color: #30487a;
--falcon-google-plus: #dd4b39;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-google-plus-hover-color: #b13c2e;
--falcon-twitter: #1da1f2;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-twitter-hover-color: #1781c2;
--falcon-linkedin: #0077b5;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-linkedin-hover-color: #005f91;
--falcon-youtube: #ff0001;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-youtube-hover-color: #cc0001;
--falcon-github: #333333;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-github-hover-color: #292929;
--falcon-black: #000;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-black-hover-color: black;
--falcon-100: #f9fafd;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-100-hover-color: #fafbfd;
--falcon-200: #edf2f9;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-200-hover-color: #f1f5fa;
--falcon-300: #d8e2ef;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-300-hover-color: #e0e8f2;
--falcon-400: #b6c1d2;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-400-hover-color: #c5cddb;
--falcon-500: #9da9bb;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-500-hover-color: #7e8796;
--falcon-600: #748194;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-600-hover-color: #5d6776;
--falcon-700: #5e6e82;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-700-hover-color: #4b5868;
--falcon-800: #4d5969;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-800-hover-color: #3e4754;
--falcon-900: #344050;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-900-hover-color: #2a3340;
--falcon-1000: #232e3c;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-1000-hover-color: #1c2530;
--falcon-1100: #0b1727;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-1100-hover-color: #09121f;
--falcon-white: #fff;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-white-hover-color: white;
--falcon-primary: #2c7be5;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-primary-hover-color: #2362b7;
--falcon-secondary: #748194;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-secondary-hover-color: #5d6776;
--falcon-success: #00d27a;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-success-hover-color: #00a862;
--falcon-info: #27bcfd;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-info-hover-color: #1f96ca;
--falcon-warning: #f5803e;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-warning-hover-color: #c46632;
--falcon-danger: #e63757;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-danger-hover-color: #b82c46;
--falcon-light: #f9fafd;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-light-hover-color: #fafbfd;
--falcon-dark: #0b1727;
/* ------------------------------ Colored Link ------------------------------ */
--falcon-colored-link-dark-hover-color: #09121f;
--falcon-soft-primary: #e6effc;
--falcon-soft-secondary: #eef0f2;
--falcon-soft-success: #e0faef;
--falcon-soft-info: #e5f7ff;
--falcon-soft-warning: #fef0e8;
--falcon-soft-danger: #fce7eb;
--falcon-soft-light: #fefeff;
--falcon-soft-dark: #e2e3e5;
/* -------------------------------- Accordion ------------------------------- */
--falcon-accordion-border-color: rgba(0, 0, 0, 0.125);
--falcon-accordion-button-active-color: #286fce;
--falcon-accordion-button-active-bg: var(--falcon-200);
/* ------------------------------ Reveal Button ----------------------------- */
--falcon-btn-reveal-color: dark;
--falcon-btn-reveal-bg: #e6e6e6;
--falcon-btn-reveal-border-color: #dfdfdf;
/* ------------------------------ Falcon Button ----------------------------- */
--falcon-btn-falcon-background: var(--falcon-white);
--falcon-btn-disabled-color: #4d5969;
--falcon-btn-falcon-box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
--falcon-btn-falcon-hover-box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.1), 0 3px 9px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
--falcon-btn-falcon-default-color: #4d5969;
--falcon-btn-falcon-default-hover-color: #404a57;
--falcon-btn-falcon-default-active-background: #e6e6e6;
--falcon-btn-falcon-default-active-border: #404a57;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-primary-color: var(--falcon-primary);
--falcon-btn-falcon-primary-hover-color: #2566be;
--falcon-btn-falcon-primary-active-background: #d5e5fa;
--falcon-btn-falcon-primary-active-color: #2566be;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-primary-background: #d5e5fa;
--falcon-alert-primary-border-color: #c0d7f7;
--falcon-alert-primary-color: #1a4a89;
--falcon-alert-primary-link-color: #2362b7;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-primary-background: #d5e5fa;
--falcon-list-group-item-primary-color: #1a4a89;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-primary-background-color: #d5e5fa;
--falcon-badge-soft-primary-color: #1c4f93;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-secondary-color: var(--falcon-secondary);
--falcon-btn-falcon-secondary-hover-color: #606b7b;
--falcon-btn-falcon-secondary-active-background: #e3e6ea;
--falcon-btn-falcon-secondary-active-color: #606b7b;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-secondary-background: #e3e6ea;
--falcon-alert-secondary-border-color: #d5d9df;
--falcon-alert-secondary-color: #464d59;
--falcon-alert-secondary-link-color: #5d6776;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-secondary-background: #e3e6ea;
--falcon-list-group-item-secondary-color: #464d59;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-secondary-background-color: #e3e6ea;
--falcon-badge-soft-secondary-color: #7d899b;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-success-color: var(--falcon-success);
--falcon-btn-falcon-success-hover-color: #00ae65;
--falcon-btn-falcon-success-active-background: #ccf6e4;
--falcon-btn-falcon-success-active-color: #00ae65;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-success-background: #ccf6e4;
--falcon-alert-success-border-color: #b3f2d7;
--falcon-alert-success-color: #007e49;
--falcon-alert-success-link-color: #00a862;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-success-background: #ccf6e4;
--falcon-list-group-item-success-color: #007e49;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-success-background-color: #ccf6e4;
--falcon-badge-soft-success-color: #00864e;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-info-color: var(--falcon-info);
--falcon-btn-falcon-info-hover-color: #209cd2;
--falcon-btn-falcon-info-active-background: #d4f2ff;
--falcon-btn-falcon-info-active-color: #209cd2;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-info-background: #d4f2ff;
--falcon-alert-info-border-color: #beebfe;
--falcon-alert-info-color: #177198;
--falcon-alert-info-link-color: #1f96ca;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-info-background: #d4f2ff;
--falcon-list-group-item-info-color: #177198;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-info-background-color: #d4f2ff;
--falcon-badge-soft-info-color: #1978a2;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-warning-color: var(--falcon-warning);
--falcon-btn-falcon-warning-hover-color: #cb6a33;
--falcon-btn-falcon-warning-active-background: #fde6d8;
--falcon-btn-falcon-warning-active-color: #cb6a33;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-warning-background: #fde6d8;
--falcon-alert-warning-border-color: #fcd9c5;
--falcon-alert-warning-color: #934d25;
--falcon-alert-warning-link-color: #c46632;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-warning-background: #fde6d8;
--falcon-list-group-item-warning-color: #934d25;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-warning-background-color: #fde6d8;
--falcon-badge-soft-warning-color: #9d5228;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-danger-color: var(--falcon-danger);
--falcon-btn-falcon-danger-hover-color: #bf2e48;
--falcon-btn-falcon-danger-active-background: #fad7dd;
--falcon-btn-falcon-danger-active-color: #bf2e48;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-danger-background: #fad7dd;
--falcon-alert-danger-border-color: #f8c3cd;
--falcon-alert-danger-color: #8a2134;
--falcon-alert-danger-link-color: #b82c46;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-danger-background: #fad7dd;
--falcon-list-group-item-danger-color: #8a2134;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-danger-background-color: #fad7dd;
--falcon-badge-soft-danger-color: #932338;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-light-color: var(--falcon-light);
--falcon-btn-falcon-light-hover-color: #cfd0d2;
--falcon-btn-falcon-light-active-background: #fefeff;
--falcon-btn-falcon-light-active-color: #cfd0d2;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-light-background: #fefeff;
--falcon-alert-light-border-color: #fdfefe;
--falcon-alert-light-color: #959698;
--falcon-alert-light-link-color: #c7c8ca;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-light-background: #fefeff;
--falcon-list-group-item-light-color: #959698;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-light-background-color: #fefeff;
--falcon-badge-soft-light-color: #9fa0a2;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-dark-color: var(--falcon-dark);
--falcon-btn-falcon-dark-hover-color: #091320;
--falcon-btn-falcon-dark-active-background: #ced1d4;
--falcon-btn-falcon-dark-active-color: #091320;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-dark-background: #ced1d4;
--falcon-alert-dark-border-color: #b6b9be;
--falcon-alert-dark-color: #070e17;
--falcon-alert-dark-link-color: #09121f;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-dark-background: #ced1d4;
--falcon-list-group-item-dark-color: #070e17;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-dark-background-color: #ced1d4;
--falcon-badge-soft-dark-color: #070f19;
--falcon-transparent-50: rgba(255, 255, 255, 0.5);
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-bg: #fff;
--falcon-list-group-action-hover-color: #5e6e82;
--falcon-list-group-hover-bg: #f9fafd;
--falcon-body-bg: #edf2f9;
--falcon-body-color: #5e6e82;
--falcon-headings-color: #344050;
--falcon-link-color: #2c7be5;
--falcon-link-hover-color: #2362b7;
--falcon-border-color: #d8e2ef;
/* --------------------------------- Shadow --------------------------------- */
--falcon-box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
--falcon-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--falcon-box-shadow-lg: 0 1rem 4rem rgba(0, 0, 0, 0.175);
--falcon-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--falcon-component-active-color:;
--falcon-component-active-bg: #2c7be5;
--falcon-text-muted: #748194;
--falcon-blockquote-footer-color: #748194;
--falcon-hr-color: var(--falcon-border-color);
--falcon-hr-opacity: 0.25;
--falcon-mark-bg: #fcf8e3;
--falcon-input-btn-focus-color: rgba(44, 123, 229, 0.25);
--falcon-btn-link-color: #2c7be5;
--falcon-btn-link-hover-color: #2362b7;
--falcon-btn-disabled-color: #748194;
--falcon-heading-color: #344050;
/* ---------------------------------- Form ---------------------------------- */
--falcon-input-bg: #fff;
--falcon-input-color: #344050;
--falcon-input-border-color: #d8e2ef;
--falcon-input-focus-border-color: #96bdf2;
--falcon-input-focus-color: var(--falcon-input-color);
--falcon-input-placeholder-color: #b6c1d2;
--falcon-input-plaintext-color: #5e6e82;
--falcon-form-check-label-color:;
--falcon-form-check-input-bg: transparent;
--falcon-form-check-input-border: 1px solid var(--falcon-form-check-input-border-color);
--falcon-form-check-input-border-color: #b6c1d2;
--falcon-form-check-input-checked-color: #fff;
--falcon-form-check-input-checked-bg-color: #2c7be5;
--falcon-form-check-input-checked-border-color: #2c7be5;
--falcon-form-check-input-indeterminate-color: #fff;
--falcon-form-check-input-indeterminate-bg-color: #2c7be5;
--falcon-form-check-input-indeterminate-border-color: #2c7be5;
--falcon-form-switch-color: rgba(0, 0, 0, 0.25);
--falcon-form-switch-focus-color: var(--falcon-input-focus-border-color);
--falcon-form-switch-checked-color: #fff;
--falcon-input-group-addon-color: var(--falcon-input-border-color);
--falcon-input-group-addon-bg: #edf2f9;
--falcon-input-group-addon-border-color: var(--falcon-input-border-color);
--falcon-form-select-color: var(--falcon-input-color);
--falcon-form-select-disabled-color: #748194;
--falcon-form-select-bg: var(--falcon-input-bg);
--falcon-form-select-disabled-bg: #edf2f9;
--falcon-form-select-indicator-color: #4d5969;
--falcon-form-select-focus-box-shadow: 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
--falcon-form-select-border-color: var(--falcon-input-border-color);
--falcon-form-select-focus-border-color: var(--falcon-input-focus-border-color);
--falcon-form-range-track-bg: #d8e2ef;
--falcon-form-range-track-box-shadow: var(--falcon-box-shadow-inset);
--falcon-form-range-thumb-bg: #2c7be5;
--falcon-form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
--falcon-form-range-thumb-focus-box-shadow: 0 0 0 1px #edf2f9, 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
--falcon-form-range-thumb-active-bg: #cbdef9;
--falcon-form-range-thumb-disabled-bg: #9da9bb;
--falcon-form-file-focus-border-color: var(--falcon-input-focus-border-color);
--falcon-form-file-focus-box-shadow: 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
--falcon-form-file-disabled-bg: var(--falcon-200);
--falcon-form-file-disabled-border-color:;
--falcon-form-file-color: var(--falcon-input-color);
--falcon-form-file-bg: var(--falcon-input-bg);
--falcon-form-file-border-color: var(--falcon-input-border-color);
--falcon-form-file-box-shadow: var(--falcon-box-shadow-inset);
--falcon-form-file-button-bg: var(--falcon-200);
--falcon-form-feedback-valid-color: #00d27a;
--falcon-form-feedback-invalid-color: #e63757;
--falcon-form-feedback-icon-valid-color: var(--falcon-form-feedback-valid-color);
--falcon-form-feedback-icon-invalid-color: var(--falcon-form-feedback-invalid-color);
/* ----------------------------------- Nav ---------------------------------- */
--falcon-nav-link-color: null;
--falcon-nav-link-hover-color: null;
--falcon-nav-link-disabled-color: #748194;
--falcon-nav-tabs-border-color: #d8e2ef;
--falcon-nav-tabs-link-hover-border-color: #edf2f9 #edf2f9 #d8e2ef;
--falcon-nav-tabs-link-active-color: #5e6e82;
--falcon-nav-tabs-link-active-bg: #edf2f9;
--falcon-nav-tabs-link-active-border-color: #d8e2ef #d8e2ef #edf2f9;
--falcon-bg-navbar-glass: rgba(237, 242, 249, 0.96);
--falcon-nav-pills-link-active-color: #fff;
--falcon-nav-pills-link-active-bg: #2c7be5;
/* --------------------------------- Navbar --------------------------------- */
--falcon-navbar-dark-color: rgba(255, 255, 255, 0.55);
--falcon-navbar-dark-hover-color: rgba(255, 255, 255, 0.75);
--falcon-navbar-dark-active-color: #fff;
--falcon-navbar-dark-disabled-color: rgba(255, 255, 255, 0.25);
--falcon-navbar-dark-toggler-border-color: rgba(255, 255, 255, 0.1);
--falcon-navbar-light-color: rgba(0, 0, 0, 0.55);
--falcon-navbar-light-hover-color: rgba(0, 0, 0, 0.7);
--falcon-navbar-light-active-color: rgba(0, 0, 0, 0.9);
--falcon-navbar-light-disabled-color: rgba(0, 0, 0, 0.3);
--falcon-navbar-light-toggler-border-color: rgba(0, 0, 0, 0.1);
--falcon-navbar-light-brand-color: #2c7be5;
--falcon-navbar-dark-brand-color: #2c7be5;
/* -------------------------------------------------------------------------- */
/* Navbar Vertical */
/* -------------------------------------------------------------------------- */
/* --------------------------------- Default -------------------------------- */
--falcon-navbar-vertical-collapsed-hover-shadow-color: rgba(0, 0, 0, 0.2);
--falcon-navbar-vertical-bg-color: var(--falcon-bg-navbar-glass);
--falcon-navbar-vertical-link-color: #5e6e82;
--falcon-navbar-vertical-link-hover-color: #232e3c;
--falcon-navbar-vertical-link-active-color: #2c7be5;
--falcon-navbar-vertical-link-disable-color: #b6c1d2;
--falcon-navbar-vertical-hr-color: rgba(0, 0, 0, 0.08);
--falcon-navbar-vertical-scrollbar-color: rgba(116, 129, 148, 0.3);
/* ----------------------------- Navbar Inverted ---------------------------- */
/* --------------------------- End Navbar Vertical -------------------------- */
/* -------------------------------- Dropdown -------------------------------- */
--falcon-dropdown-bg: #fff;
--falcon-dropdown-color: #d8e2ef;
--falcon-dropdown-border-color: var(--falcon-border-color);
--falcon-dropdown-box-shadow: var(--falcon-box-shadow);
--falcon-dropdown-link-color: #344050;
--falcon-dropdown-link-hover-color: #2a3441;
--falcon-dropdown-link-hover-bg: #f9fafd;
--falcon-dropdown-link-active-color: #fff;
--falcon-dropdown-link-active-bg: #2c7be5;
--falcon-dropdown-link-disabled-color: #748194;
--falcon-dropdown-header-color: #748194;
--falcon-dropdown-dark-color: #d8e2ef;
--falcon-dropdown-dark-bg: #4d5969;
--falcon-dropdown-dark-border-color: var(--falcon-dropdown-border-color);
--falcon-dropdown-dark-divider-bg: var(--falcon-dropdown-border-color);
--falcon-dropdown-dark-box-shadow: null;
--falcon-dropdown-dark-link-color: #d8e2ef;
--falcon-dropdown-dark-link-hover-color: #fff;
--falcon-dropdown-dark-link-hover-bg: rgba(255, 255, 255, 0.15);
--falcon-dropdown-dark-link-active-color: var(--falcon-dropdown-link-active-color);
--falcon-dropdown-dark-link-active-bg: var(--falcon-dropdown-link-active-bg);
--falcon-dropdown-dark-link-disabled-color: #9da9bb;
--falcon-dropdown-dark-header-color: #9da9bb;
/* ------------------------------- Pagination ------------------------------- */
--falcon-pagination-color: #000;
--falcon-pagination-bg: #fff;
--falcon-pagination-border-color: #edf2f9;
--falcon-pagination-hover-color: #fff;
--falcon-pagination-hover-bg: #2c7be5;
--falcon-pagination-hover-border-color: #2c7be5;
--falcon-pagination-active-color: #fff;
--falcon-pagination-active-bg: #2c7be5;
--falcon-pagination-active-border-color: #2c7be5;
--falcon-pagination-disabled-bg: #fff;
/* ---------------------------------- Card ---------------------------------- */
--falcon-card-border-color: rgba(0, 0, 0, 0.125);
--falcon-card-cap-bg: rgba(0, 0, 0, 0);
--falcon-card-cap-color: null;
--falcon-card-color: null;
--falcon-card-bg: #fff;
/* --------------------------------- Tooltip -------------------------------- */
--falcon-tooltip-color: #fff;
--falcon-tooltip-bg: #000;
--falcon-tooltip-arrow-color: #000;
/* --------------------------------- Popover -------------------------------- */
--falcon-popover-bg: #fff;
--falcon-popover-border-color: rgba(0, 0, 0, 0.2);
--falcon-popover-box-shadow: var(--falcon-box-shadow);
--falcon-popover-header-bg: #f9fafd;
--falcon-popover-header-border-bottom-color: #d6d6d6;
--falcon-popover-header-color: var(--falcon-headings-color);
--falcon-popover-body-color: #5e6e82;
--falcon-popover-arrow-color: #fff;
--falcon-popover-arrow-outer-color: rgba(0, 0, 0, 0.25);
/* ---------------------------------- Toast --------------------------------- */
--falcon-toast-color:;
--falcon-toast-background-color: rgba(255, 255, 255, 0.85);
--falcon-toast-border-color: rgba(0, 0, 0, 0.1);
--falcon-toast-box-shadow: var(--falcon-box-shadow);
--falcon-toast-header-color: #748194;
--falcon-toast-header-background-color: rgba(255, 255, 255, 0.85);
--falcon-toast-header-border-color: rgba(0, 0, 0, 0.05);
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-color: #fff;
/* ---------------------------------- Modal --------------------------------- */
--falcon-modal-content-bg: #fff;
/* ---------------------------------- Table --------------------------------- */
--falcon-table-border-color: #edf2f9;
--falcon-table-primary-bg: #d5e5fa;
--falcon-table-primary-color: #4d5969;
--falcon-table-primary-hover-bg: #cbdbef;
--falcon-table-primary-hover-color: #4d5969;
--falcon-table-primary-striped-bg: #cedef3;
--falcon-table-primary-striped-color: #4d5969;
--falcon-table-primary-active-bg: #c7d7ec;
--falcon-table-primary-active-color: #4d5969;
--falcon-table-primary-border-color: #c7d7ec;
--falcon-table-secondary-bg: #e3e6ea;
--falcon-table-secondary-color: #4d5969;
--falcon-table-secondary-hover-bg: #d8dbe0;
--falcon-table-secondary-hover-color: #4d5969;
--falcon-table-secondary-striped-bg: #dcdfe4;
--falcon-table-secondary-striped-color: #4d5969;
--falcon-table-secondary-active-bg: #d4d8dd;
--falcon-table-secondary-active-color: #4d5969;
--falcon-table-secondary-border-color: #d4d8dd;
--falcon-table-success-bg: #ccf6e4;
--falcon-table-success-color: #4d5969;
--falcon-table-success-hover-bg: #c2eadb;
--falcon-table-success-hover-color: #4d5969;
--falcon-table-success-striped-bg: #c6eede;
--falcon-table-success-striped-color: #4d5969;
--falcon-table-success-active-bg: #bfe6d8;
--falcon-table-success-active-color: #4d5969;
--falcon-table-success-border-color: #bfe6d8;
--falcon-table-info-bg: #d4f2ff;
--falcon-table-info-color: #4d5969;
--falcon-table-info-hover-bg: #cae7f4;
--falcon-table-info-hover-color: #4d5969;
--falcon-table-info-striped-bg: #cdeaf8;
--falcon-table-info-striped-color: #4d5969;
--falcon-table-info-active-bg: #c7e3f0;
--falcon-table-info-active-color: #4d5969;
--falcon-table-info-border-color: #c7e3f0;
--falcon-table-warning-bg: #fde6d8;
--falcon-table-warning-color: #4d5969;
--falcon-table-warning-hover-bg: #f0dbd0;
--falcon-table-warning-hover-color: #4d5969;
--falcon-table-warning-striped-bg: #f4dfd2;
--falcon-table-warning-striped-color: #4d5969;
--falcon-table-warning-active-bg: #ebd8cd;
--falcon-table-warning-active-color: #4d5969;
--falcon-table-warning-border-color: #ebd8cd;
--falcon-table-danger-bg: #fad7dd;
--falcon-table-danger-color: #4d5969;
--falcon-table-danger-hover-bg: #edced4;
--falcon-table-danger-hover-color: #4d5969;
--falcon-table-danger-striped-bg: #f1d1d7;
--falcon-table-danger-striped-color: #4d5969;
--falcon-table-danger-active-bg: #e9cad1;
--falcon-table-danger-active-color: #4d5969;
--falcon-table-danger-border-color: #e9cad1;
--falcon-table-light-bg: #f9fafd;
--falcon-table-light-color: #4d5969;
--falcon-table-light-hover-bg: #eceef2;
--falcon-table-light-hover-color: #4d5969;
--falcon-table-light-striped-bg: #f0f2f6;
--falcon-table-light-striped-color: #4d5969;
--falcon-table-light-active-bg: #e8eaee;
--falcon-table-light-active-color: #4d5969;
--falcon-table-light-border-color: #e8eaee;
--falcon-table-dark-bg: #0b1727;
--falcon-table-dark-color: #fff;
--falcon-table-dark-hover-bg: #1d2837;
--falcon-table-dark-hover-color: #fff;
--falcon-table-dark-striped-bg: #172332;
--falcon-table-dark-striped-color: #fff;
--falcon-table-dark-active-bg: #232e3d;
--falcon-table-dark-active-color: #fff;
--falcon-table-dark-border-color: #232e3d;
/* --------------------------------- Avarar --------------------------------- */
--falcon-avatar-status-border-color: #fff;
--falcon-avatar-name-bg: #344050;
--falcon-avatar-button-bg: #b6c1d2;
--falcon-avatar-button-hover-bg: #9da9bb;
/* ------------------------------ Notification ------------------------------ */
--falcon-notification-bg: #fff;
--falcon-notification-title-bg: #f9fafd;
--falcon-notification-unread-bg: #edf2f9;
--falcon-notification-unread-hover-bg: #dae4f3;
--falcon-notification-indicator-border-color: #edf2f9;
/* --------------------------------- Kanban --------------------------------- */
--falcon-kanban-bg: #f9fafd;
--falcon-kanban-header-bg: var(--falcon-kanban-bg);
--falcon-kanban-item-bg: #fff;
--falcon-kanban-item-color: #344050;
--falcon-kanban-btn-add-hover-bg: #edf2f9;
--falcon-kanban-draggable-source-dragging-bg: #edf2f9;
--falcon-kanban-bg-attachment-bg: #d8e2ef;
--falcon-kanban-footer-color: #748194;
--falcon-kanban-nav-link-card-details-color: #5e6e82;
--falcon-kanban-nav-link-card-details-hover-bg: #edf2f9;
/* --------------------------- Gradient Background -------------------------- */
--falcon-bg-shape-bg: #4695ff;
--falcon-bg-shape-bg-ltd: linear-gradient(-45deg, #4695ff, #1970e2);
--falcon-bg-shape-bg-dtl: linear-gradient(-45deg, #1970e2, #4695ff);
--falcon-line-chart-gradient: linear-gradient(-45deg, #014ba7, #0183d0);
--falcon-card-gradient: linear-gradient(-45deg, #1970e2, #4695ff);
--falcon-progress-gradient: linear-gradient(-45deg, #1970e2, #4695ff);
--falcon-bg-circle-shape: none;
--falcon-bg-circle-shape-bg: #4695ff;
--falcon-modal-shape-header: linear-gradient(-45deg, #1970e2, #4695ff);
--falcon-modal-shape-header-bg: #4494ff;
/* ------------------------------ Full Calendar ----------------------------- */
--fc-button-bg-color: #344050;
--fc-button-border-color: #344050;
--fc-button-hover-bg-color: #0b1727;
--fc-button-hover-border-color: #0b1727;
--fc-button-active-bg-color: #0b1727;
--fc-button-active-border-color: #0b1727;
--fc-button-list-day-cushion: #fff;
/* -------------------------------- Flatpickr ------------------------------- */
--falcon-flatpickr-calendar-bg: #fff;
/* -------------------------------- Flatpickr ------------------------------- */
--falcon-leaflet-bar-bg: #fff;
--falcon-leaflet-popup-content-wrapper-bg: #fff;
/* --------------------------------- Choices -------------------------------- */
--falcon-choices-item-selectable-highlighted-bg: #fff;
--falcon-choices-item-has-no-choices-bg: #fff;
/* -------------------------------- Thumbnail ------------------------------- */
--falcon-thumbnail-bg: #fff;
/* ---------------------------------- Chat ---------------------------------- */
--falcon-chat-contact-bg: var(--falcon-card-bg);
/* --------------------------------- Tinymce -------------------------------- */
--falcon-tinymce-bg: #fff;
/* --------------------------------- Swiper --------------------------------- */
--falcon-swiper-nav-bg: rgba(255, 255, 255, 0.8);
/* --------------------------------- Rater --------------------------------- */
--falcon-star-rating-bg-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFdElEQVR4nO2aXWxURRTH/2dut58Imho1SgStuit+vBo0BkgkRjDog+VBiJEXqJhKK21x+7EdUu5u2W1Uqi8Qo4YQY6gQDQlRn9RENGoMD0a7RCzGRCJGBLRF9mOOD+waKHe7e2f23mt0f4/zceY/Z2fmzJm7QI0aNWr8j6EgBu3sHG9oXHC2gxQvJ/CUhbpUPD5wMggtwv8hmZrmn3mHmF8G4XEm6s5R/kinlPP91xKAA7YN2A8CeHRW8eLmrOjwWwsQgAMYqs+xnLGls3O8wW89vjqgp1/eDWC1YyXhxqYFvz/ppx7AZwcIsnrmbMDUK6X0V5NfA/VJuRDgdWWa3Tmds1b5IqiAf97OUReAunLNCOx4RniFL/eALimvrs+KnwDMq6yHWJq0Bz/3VFRxJD8GabgY4iqcPABWvd6puRzPV4CUsnEmK6YA3OCiG1tKRRIJecwrXUU8XwHTGbEe7iYPAJQXYqsXeq4YyEvjUkoxkxXfAbhDo/uFOrYWxeMDv1Rb16V4ugJmctYa6E0eABpyItdZTT1OeLwFDEMa02YpZeWHpwaeOaBncOQhMJYamrnmvMdJUtXOgI0bd4daW0+25S0rAoV7iLiHgWqkuDkChjik9ibl8EmAuAo2/8G1A7ZKea24IMJkcQRAmJkiBIQBtAGwqiluNgScU4w0EU2CkWZSk8ycnleP76WUf2nadCYajbfmrfwDxIWJgiMAhQG06k7AQxSAEwAmiTnNRJMEMWkxpePx/lNzrRpHB7wwOLJcMR+Cm9vbv5cZAK81h1S3lFLNrnQ8BBVjF/4bkweAZgDPnc+IJ5wqS0QBDnsoKBAYdLtTubMDCF95qiYAhMUfOpY7FSqlOgCc9lSRjzDR86MjsS+d6hwdMBaX3zCrlQDOeKrMBwiIpnYMvVSqvuRNMBWXXwPiYQB/eKLMBxgY3mnHRudqM+dVOGkPfsEKjwCYrqoyHyAgnrKHRipoV57CveAwgCZjZT7AwFjKHuqr5Npc8VW4r3/7ShAdAuD7xwuXjCftoa5KcwZXuUDv4MgqYn4XQEhLmscw8+5UPPaMm4TJVTqc2jF0GERrAeRcq/MceqOlnje7zRa10uHege3tBHobgXxdvhIm7DuRjjw9MbE277av1gRS9vAEwE8BqGpurgVhf0ud2qAz+YvdDegb3L4BTK+b2DCBgffO/np9+549m7K6NoweMD795KOj9y9bcRsB95rY0SRTp+qW7drV/aeJEeM9TMzvm9rQg48mEv2/mVoxP8RYLDa2oYWor4oVYwuEu6qgQwOOtLfvN36DrEIY4yXmNrRobGv79hZTI0YOKPwCEVMRurBFxqvPyAGLw+lbEWBuoBCwAwhB7f/i+GS8/YwcwBzY/i8S7AoILgIUMY8EZluAzZegIY2Fc0gbbQdc9DwHFgGKCFZGP4K2AwoxuFGz+xkCehFSNxHzKoCO6uowjQRl/7dXCs0YnCXmVwWH7Evu8T9LKT+Yzoj1BNggLHRl0fAc0ncAiyVuHl8INKEI0aQdOz67rvDRcm9394sToabpLhBHAVxVkV02c4D2e0DfwMi+Cv76CoCPKEU9Y4nYZ5Xa7pHyOpEVwwA2oXzKfmHqWKRF90FEewVUkAMcZ/C2lB076PadbkzKUwCejUblK3kSO0FYM0fzhkXh9M0AptyMUcQkDJY6AE8D2NIcUktS9vABk7+0JBJyMhmPPcYKywEu9cGWQ3nrnO4Y2g5gYN+sogyIU5mQakvasXEpZUbX9mxSidjHzSG+jxjrAPx4eS29afIwor0FWkJq9HzOOsvMq5n5B0vx2OioPKFrrxyFg/ItKeXBmazoAGMFQEea6/MlP3zWqFGjRo0y/A3lxcMNXfCjjAAAAABJRU5ErkJggg==");
/* ---------------------------------- Toast --------------------------------- */
--falcon-toast-background-color: rgba(255, 255, 255, 0.85);
/* --------------------------------- Wizard --------------------------------- */
--falcon-theme-wizard-nav-item-circle-bg: #fff;
/* -------------------------------- Card Span ------------------------------- */
--falcon-card-span-img-bg: #fff;
--falcon-card-span-img-box-shadow: var(--falcon-box-shadow-sm);
--falcon-card-span-img-hover-box-shadow: var(--falcon-box-shadow-lg);
/* ------------------------------ showcase-page ------------------------------ */
--falcon-setting-toggle-shadow: 0 -7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
/* -------------------------------- Scrollbar ------------------------------- */
--falcon-scrollbar-bg: rgba(182, 193, 210, 0.55);
/* ------------------------------- Falcon Pill ------------------------------ */
--falcon-nav-pills-falcon-active-bg-color: #fff;
/* ------------------------------- Hover Background ------------------------------ */
--falcon-hover-bg-black: #000;
--falcon-hover-bg-100: #f9fafd;
--falcon-hover-bg-200: #edf2f9;
--falcon-hover-bg-300: #d8e2ef;
--falcon-hover-bg-400: #b6c1d2;
--falcon-hover-bg-500: #9da9bb;
--falcon-hover-bg-600: #748194;
--falcon-hover-bg-700: #5e6e82;
--falcon-hover-bg-800: #4d5969;
--falcon-hover-bg-900: #344050;
--falcon-hover-bg-1000: #232e3c;
--falcon-hover-bg-1100: #0b1727;
--falcon-hover-bg-white: #fff;
/* ------------------------------- Custom disabled button ------------------------------ */
--falcon-btn-disabled-custom-background: rgba(249, 250, 253, 0.65);
--falcon-btn-disabled-custom-color: rgba(11, 23, 39, 0.3);
}
[data-theme="theme-dark"]:root {
color-scheme: dark;
--font-default: "Arial", "Plus Jakarta Sans", sans-serif;
--active-color: #ffffff;
--active-bg-color: #ff0000;
--background-color: #222;
--tooltip-bgr: #ffe17d;
--tooltip-color: #977917;
--color: #d9d9d9;
--drd-bgr: #333333;
--drd-hover-bgr: #333;
--box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
--border-color: #333;
--tbl-header-bg: #4f4d4d;
--bg-primary: #3568f0;
/*falcon*/
--falcon-body: #232e3c;
--falcon-body-bg: #0b1727;
--falcon-body-color: #9da9bb;
--falcon-headings-color: #d8e2ef;
--falcon-border-color: rgba(255, 255, 255, 0.05);
/* --------------------------------- Shadow --------------------------------- */
--falcon-box-shadow: 0 7px 14px 0 rgba(3, 12, 51, 0.15), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
--falcon-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--falcon-box-shadow-lg: 0 1rem 4rem rgba(0, 0, 0, 0.175);
--falcon-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--falcon-black: #fff;
--falcon-100: #0b1727;
--falcon-200: #232e3c;
--falcon-300: #344050;
--falcon-400: #4d5969;
--falcon-500: #5e6e82;
--falcon-600: #748194;
--falcon-700: #9da9bb;
--falcon-800: #b6c1d2;
--falcon-900: #d8e2ef;
--falcon-1000: #edf2f9;
--falcon-1100: #f9fafd;
--falcon-white: #000;
--falcon-primary: #2c7be5;
--falcon-secondary: #748194;
--falcon-success: #00d27a;
--falcon-info: #27bcfd;
--falcon-warning: #f5803e;
--falcon-danger: #e63757;
--falcon-light: rgba(35, 46, 60, 0.25);
--falcon-dark: #f9fafd;
--falcon-soft-primary: #0d2545;
--falcon-soft-secondary: #23272c;
--falcon-soft-success: #003f25;
--falcon-soft-info: #0c384c;
--falcon-soft-warning: #4a2613;
--falcon-soft-danger: #45111a;
--falcon-soft-light: #4b4b4c;
--falcon-soft-dark: #03070c;
/* ---------------------------------- Form ---------------------------------- */
--falcon-input-bg: #0b1727;
--falcon-input-color: #d8e2ef;
--falcon-input-border-color: #344050;
--falcon-input-focus-border-color: #163e73;
--falcon-input-placeholder-color: #b6c1d2;
--falcon-form-check-input-border-color: #4d5969;
/* -------------------------------- Accordion ------------------------------- */
--falcon-accordion-border-color: rgba(255, 255, 255, 0.125);
/* --------------------------------- Navbar --------------------------------- */
--falcon-bg-navbar-glass: rgba(11, 23, 39, 0.96);
--falcon-navbar-dark-color: rgba(11, 23, 39, 0.55);
--falcon-navbar-dark-hover-color: rgba(11, 23, 39, 0.75);
--falcon-navbar-dark-active-color: #0b1727;
--falcon-navbar-dark-disabled-color: rgba(11, 23, 39, 0.25);
--falcon-navbar-dark-toggler-border-color: rgba(11, 23, 39, 0.1);
--falcon-navbar-light-color: rgba(255, 255, 255, 0.55);
--falcon-navbar-light-hover-color: rgba(255, 255, 255, 0.7);
--falcon-navbar-light-active-color: rgba(255, 255, 255, 0.9);
--falcon-navbar-light-disabled-color: rgba(255, 255, 255, 0.3);
--falcon-navbar-light-toggler-border-color: rgba(255, 255, 255, 0.1);
--falcon-navbar-light-brand-color: var(--falcon-navbar-light-active-color);
--falcon-navbar-light-brand-hover-color: var(--falcon-navbar-light-active-color);
--falcon-navbar-dark-brand-color: var(--falcon-navbar-dark-active-color);
--falcon-navbar-dark-brand-hover-color: var(--falcon-navbar-dark-active-color);
--falcon-navbar-light-brand-color: #2c7be5;
--falcon-navbar-dark-brand-color: #2c7be5;
/* -------------------------------------------------------------------------- */
/* Navbar Vertical */
/* -------------------------------------------------------------------------- */
/* --------------------------------- Default -------------------------------- */
--falcon-navbar-vertical-collapsed-hover-shadow-color: rgba(0, 0, 0, 0.2);
--falcon-navbar-vertical-bg-color: var(--falcon-bg-navbar-glass);
--falcon-navbar-vertical-link-color: #9da9bb;
--falcon-navbar-vertical-link-hover-color: #edf2f9;
--falcon-navbar-vertical-link-active-color: #2c7be5;
--falcon-navbar-vertical-link-disable-color: #4d5969;
--falcon-navbar-vertical-hr-color: rgba(255, 255, 255, 0.08);
--falcon-navbar-vertical-scrollbar-color: rgba(116, 129, 148, 0.3);
/* ----------------------------- Navbar Inverted ---------------------------- */
/* --------------------------- End Navbar Vertical -------------------------- */
/* -------------------------------- Dropdown -------------------------------- */
--falcon-dropdown-bg: #232e3c;
--falcon-dropdown-color: #344050;
--falcon-dropdown-box-shadow: var(--falcon-box-shadow);
--falcon-dropdown-link-color: #d8e2ef;
--falcon-dropdown-link-hover-color: #eaeff6;
--falcon-dropdown-link-hover-bg: rgba(11, 23, 39, 0.4);
--falcon-dropdown-link-active-color: #fff;
--falcon-dropdown-link-active-bg: #2c7be5;
--falcon-dropdown-link-disabled-color: #748194;
--falcon-dropdown-header-color: #748194;
/* ------------------------------- Pagination ------------------------------- */
--falcon-pagination-color: #fff;
--falcon-pagination-bg: #0b1727;
--falcon-pagination-border-color: #232e3c;
--falcon-pagination-hover-color: #fff;
--falcon-pagination-disabled-bg: #0b1727;
/* ---------------------------------- Card ---------------------------------- */
--falcon-card-border-color: rgba(255, 255, 255, 0.125);
--falcon-card-cap-bg: rgba(35, 46, 60, 0.03);
--falcon-card-bg: #121e2d;
/* --------------------------------- Popover -------------------------------- */
--falcon-popover-bg: #0b1727;
--falcon-popover-border-color: rgba(255, 255, 255, 0.2);
--falcon-popover-header-bg: rgba(35, 46, 60, 0.25);
--falcon-popover-header-border-bottom-color: #323c4a;
--falcon-popover-arrow-color: #0b1727;
--falcon-popover-arrow-outer-color: rgba(255, 255, 255, 0.25);
/* ---------------------------------- Modal --------------------------------- */
--falcon-modal-content-bg: #0b1727;
/* ------------------------------ Reveal Button ----------------------------- */
--falcon-btn-reveal-color: dark;
--falcon-btn-reveal-bg: #0a1523;
--falcon-btn-reveal-border-color: #0a1422;
/* ------------------------------ Falcon Button ----------------------------- */
--falcon-btn-falcon-background: var(--falcon-body-bg);
--falcon-btn-disabled-color: #4d5969;
--falcon-btn-falcon-box-shadow: 0 0 0 1px rgba(0, 8, 19, 0.3), 0 2px 5px 0 rgba(0, 13, 33, 0.5), 0 1px 1.5px 0 rgba(0, 8, 1, 0.48), 0 1px 2px 0 rgba(0, 8, 1, 0.4);
--falcon-btn-falcon-hover-box-shadow: 0 0 0 1px rgba(0, 8, 19, 0.3), 0 3px 7px 0 rgba(0, 13, 33, 0.8), 0 1px 1.5px 0 #000801, 0 1px 2px 0 #000801;
--falcon-btn-falcon-default-color: #b6c1d2;
--falcon-btn-falcon-default-hover-color: #c2ccda;
--falcon-btn-falcon-default-active-background: #0a1523;
--falcon-btn-falcon-default-active-border: #c2ccda;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-primary-color: var(--falcon-primary);
--falcon-btn-falcon-primary-hover-color: #5091e9;
--falcon-btn-falcon-primary-active-background: #070e17;
--falcon-btn-falcon-primary-active-color: #5091e9;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-primary-background: rgba(18, 49, 92, 0.6);
--falcon-alert-primary-border-color: #0d2545;
--falcon-alert-primary-color: #80b0ef;
--falcon-alert-primary-link-color: #5695ea;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-primary-background: #09192e;
--falcon-list-group-item-primary-color: #80b0ef;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-primary-background-color: #09192e;
--falcon-badge-soft-primary-color: #78abee;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-secondary-color: var(--falcon-secondary);
--falcon-btn-falcon-secondary-hover-color: #8c96a6;
--falcon-btn-falcon-secondary-active-background: #070e17;
--falcon-btn-falcon-secondary-active-color: #8c96a6;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-secondary-background: rgba(46, 52, 59, 0.6);
--falcon-alert-secondary-border-color: #23272c;
--falcon-alert-secondary-color: #acb3bf;
--falcon-alert-secondary-link-color: #909aa9;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-secondary-background: #171a1e;
--falcon-list-group-item-secondary-color: #acb3bf;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-secondary-background-color: #171a1e;
--falcon-badge-soft-secondary-color: #6d798b;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-success-color: var(--falcon-success);
--falcon-btn-falcon-success-hover-color: #2bda91;
--falcon-btn-falcon-success-active-background: #070e17;
--falcon-btn-falcon-success-active-color: #2bda91;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-success-background: rgba(0, 84, 49, 0.6);
--falcon-alert-success-border-color: #003f25;
--falcon-alert-success-color: #66e4af;
--falcon-alert-success-link-color: #33db95;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-success-background: #002a18;
--falcon-list-group-item-success-color: #66e4af;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-success-background-color: #002a18;
--falcon-badge-soft-success-color: #5ce2aa;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-info-color: var(--falcon-info);
--falcon-btn-falcon-info-hover-color: #4cc7fd;
--falcon-btn-falcon-info-active-background: #070e17;
--falcon-btn-falcon-info-active-color: #4cc7fd;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-info-background: rgba(16, 75, 101, 0.6);
--falcon-alert-info-border-color: #0c384c;
--falcon-alert-info-color: #7dd7fe;
--falcon-alert-info-link-color: #52c9fd;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-info-background: #082633;
--falcon-list-group-item-info-color: #7dd7fe;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-info-background-color: #082633;
--falcon-badge-soft-info-color: #75d4fe;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-warning-color: var(--falcon-warning);
--falcon-btn-falcon-warning-hover-color: #f7965f;
--falcon-btn-falcon-warning-active-background: #070e17;
--falcon-btn-falcon-warning-active-color: #f7965f;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-warning-background: rgba(98, 51, 25, 0.6);
--falcon-alert-warning-border-color: #4a2613;
--falcon-alert-warning-color: #f9b38b;
--falcon-alert-warning-link-color: #f79965;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-warning-background: #311a0c;
--falcon-list-group-item-warning-color: #f9b38b;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-warning-background-color: #311a0c;
--falcon-badge-soft-warning-color: #f9ae83;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-danger-color: var(--falcon-danger);
--falcon-btn-falcon-danger-hover-color: #ea5974;
--falcon-btn-falcon-danger-active-background: #070e17;
--falcon-btn-falcon-danger-active-color: #ea5974;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-danger-background: rgba(92, 22, 35, 0.6);
--falcon-alert-danger-border-color: #45111a;
--falcon-alert-danger-color: #f0879a;
--falcon-alert-danger-link-color: #eb5f79;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-danger-background: #2e0b11;
--falcon-list-group-item-danger-color: #f0879a;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-danger-background-color: #2e0b11;
--falcon-badge-soft-danger-color: #ef7f93;
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-light-color: var(--falcon-light);
--falcon-btn-falcon-light-hover-color: rgba(165, 169, 175, 0.3775);
--falcon-btn-falcon-light-active-background: #070e17;
--falcon-btn-falcon-light-active-color: rgba(165, 169, 175, 0.3775);
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-light-background: rgba(3, 4, 5, 0.6);
--falcon-alert-light-border-color: rgba(2, 3, 3, 0.775);
--falcon-alert-light-color: rgba(216, 218, 221, 0.55);
--falcon-alert-light-link-color: rgba(175, 179, 184, 0.4);
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-light-background: rgba(1, 2, 2, 0.85);
--falcon-list-group-item-light-color: rgba(216, 218, 221, 0.55);
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-light-background-color: rgba(1, 2, 2, 0.85);
--falcon-badge-soft-light-color: rgba(210, 213, 216, 0.52);
/* ------------------------------ Falcon button ----------------------------- */
--falcon-btn-falcon-dark-color: var(--falcon-dark);
--falcon-btn-falcon-dark-hover-color: #fafbfd;
--falcon-btn-falcon-dark-active-background: #070e17;
--falcon-btn-falcon-dark-active-color: #fafbfd;
/* ---------------------------------- Alert --------------------------------- */
--falcon-alert-dark-background: rgba(100, 100, 101, 0.6);
--falcon-alert-dark-border-color: #4b4b4c;
--falcon-alert-dark-color: #fbfcfe;
--falcon-alert-dark-link-color: #fafbfd;
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-item-dark-background: #323233;
--falcon-list-group-item-dark-color: #fbfcfe;
/* ---------------------------------- Badge --------------------------------- */
--falcon-badge-soft-dark-background-color: #323233;
--falcon-badge-soft-dark-color: #fbfcfe;
--falcon-transparent-50: rgba(11, 23, 39, 0.5);
/* ------------------------------- List Group ------------------------------- */
--falcon-list-group-bg: var(--falcon-card-cap-bg);
--falcon-list-group-action-hover-color: #9da9bb;
--falcon-list-group-hover-bg: #0b1727;
/* ---------------------------------- Table --------------------------------- */
--falcon-table-border-color: #0b1727;
--falcon-table-primary-bg: #09192e;
--falcon-table-primary-color: #fff;
--falcon-table-primary-hover-bg: #3c85e7;
--falcon-table-primary-hover-color: #fff;
--falcon-table-primary-striped-bg: #3782e6;
--falcon-table-primary-striped-color: #fff;
--falcon-table-primary-active-bg: #4188e8;
--falcon-table-primary-active-color: #fff;
--falcon-table-primary-border-color: rgba(65, 136, 232, 0.05);
--falcon-table-secondary-bg: #171a1e;
--falcon-table-secondary-color: #fff;
--falcon-table-secondary-hover-bg: #7e8a9c;
--falcon-table-secondary-hover-color: #fff;
--falcon-table-secondary-striped-bg: #7b8799;
--falcon-table-secondary-striped-color: #fff;
--falcon-table-secondary-active-bg: #828e9f;
--falcon-table-secondary-active-color: #fff;
--falcon-table-secondary-border-color: rgba(130, 142, 159, 0.05);
--falcon-table-success-bg: #002a18;
--falcon-table-success-color: #fff;
--falcon-table-success-hover-bg: #13d584;
--falcon-table-success-hover-color: #4d5969;
--falcon-table-success-striped-bg: #0dd481;
--falcon-table-success-striped-color: #4d5969;
--falcon-table-success-active-bg: #1ad787;
--falcon-table-success-active-color: #4d5969;
--falcon-table-success-border-color: rgba(26, 215, 135, 0.05);
--falcon-table-info-bg: #082633;
--falcon-table-info-color: #fff;
--falcon-table-info-hover-bg: #37c1fd;
--falcon-table-info-hover-color: #fff;
--falcon-table-info-striped-bg: #32bffd;
--falcon-table-info-striped-color: #fff;
--falcon-table-info-active-bg: #3dc3fd;
--falcon-table-info-active-color: #fff;
--falcon-table-info-border-color: rgba(61, 195, 253, 0.05);
--falcon-table-warning-bg: #311a0c;
--falcon-table-warning-color: #fff;
--falcon-table-warning-hover-bg: #f68a4c;
--falcon-table-warning-hover-color: #fff;
--falcon-table-warning-striped-bg: #f68648;
--falcon-table-warning-striped-color: #fff;
--falcon-table-warning-active-bg: #f68d51;
--falcon-table-warning-active-color: #fff;
--falcon-table-warning-border-color: rgba(246, 141, 81, 0.05);
--falcon-table-danger-bg: #2e0b11;
--falcon-table-danger-color: #fff;
--falcon-table-danger-hover-bg: #e84664;
--falcon-table-danger-hover-color: #fff;
--falcon-table-danger-striped-bg: #e7415f;
--falcon-table-danger-striped-color: #fff;
--falcon-table-danger-active-bg: #e94b68;
--falcon-table-danger-active-color: #fff;
--falcon-table-danger-border-color: rgba(233, 75, 104, 0.05);
--falcon-table-light-bg: #323233;
--falcon-table-light-color: #4d5969;
--falcon-table-light-hover-bg: #eceef2;
--falcon-table-light-hover-color: #4d5969;
--falcon-table-light-striped-bg: #f0f2f6;
--falcon-table-light-striped-color: #4d5969;
--falcon-table-light-active-bg: #e8eaee;
--falcon-table-light-active-color: #4d5969;
--falcon-table-light-border-color: rgba(232, 234, 238, 0.05);
--falcon-table-dark-bg: #020508;
--falcon-table-dark-color: #fff;
--falcon-table-dark-hover-bg: #1d2837;
--falcon-table-dark-hover-color: #fff;
--falcon-table-dark-striped-bg: #172332;
--falcon-table-dark-striped-color: #fff;
--falcon-table-dark-active-bg: #232e3d;
--falcon-table-dark-active-color: #fff;
--falcon-table-dark-border-color: rgba(35, 46, 61, 0.05);
/* --------------------------------- Avarar --------------------------------- */
--falcon-avatar-status-border-color: #0b1727;
--falcon-avatar-name-bg: #4d5969;
--falcon-avatar-button-bg: #4d5969;
--falcon-avatar-button-hover-bg: #5e6e82;
/* ------------------------------ Notification ------------------------------ */
--falcon-notification-bg: var(--falcon-card-cap-bg);
--falcon-notification-title-bg: #344050;
--falcon-notification-unread-bg: #232e3c;
--falcon-notification-unread-hover-bg: #1a222c;
--falcon-notification-indicator-border-color: #0a1727;
/* --------------------------------- Kanban --------------------------------- */
--falcon-kanban-bg: rgba(35, 46, 60, 0.25);
--falcon-kanban-item-bg: #232e3c;
--falcon-kanban-item-color: #d8e2ef;
--falcon-kanban-btn-add-hover-bg: #232e3c;
--falcon-kanban-draggable-source-dragging-bg: #0b1727;
--falcon-kanban-bg-attachment-bg: #344050;
--falcon-kanban-footer-color: #748194;
--falcon-kanban-nav-link-card-details-color: #9da9bb;
--falcon-kanban-nav-link-card-details-hover-bg: #344050;
/* --------------------------- Gradient Background -------------------------- */
--falcon-bg-shape-bg: #01224b;
--falcon-bg-shape-bg-ltd: linear-gradient(-45deg, rgba(20, 58, 101, 0.41), #053571);
--falcon-bg-shape-bg-dtl: linear-gradient(-45deg, #0a3b79, rgba(9, 25, 43, 0.41));
--falcon-line-chart-gradient: linear-gradient(45deg, #012552, #001835);
--falcon-card-gradient: linear-gradient(45deg, #012552, #001835);
--falcon-bg-circle-shape: linear-gradient(-45deg, rgba(9, 25, 43, 0.41), #0a3b79);
--falcon-bg-circle-shape-bg: #4695ff;
--falcon-modal-shape-header: linear-gradient(-45deg, #012552, #001835);
--falcon-modal-shape-header-after: linear-gradient(-45deg, rgba(20, 58, 101, 0.41), #053571);
--falcon-modal-shape-header-bg: #01224b;
/* ------------------------------ Full Calendar ----------------------------- */
--fc-button-list-day-cushion: #0b1727;
--fc-page-bg-color: #0b1727;
--fc-neutral-bg-color: #232e3c;
/* -------------------------------- Flatpickr ------------------------------- */
--falcon-flatpickr-calendar-bg: #0b1727;
/* -------------------------------- Flatpickr ------------------------------- */
--falcon-leaflet-bar-bg: #344050;
--falcon-leaflet-popup-content-wrapper-bg: #0b1727;
/* --------------------------------- Choices -------------------------------- */
--falcon-choices-item-has-no-choices-bg: #0b1727;
/* -------------------------------- Thumbnail ------------------------------- */
--falcon-thumbnail-bg: #232e3c;
/* ---------------------------------- Chat ---------------------------------- */
--falcon-chat-contact-bg: var(--falcon-card-bg);
/* --------------------------------- Tinymce -------------------------------- */
--falcon-tinymce-bg: #0b1727;
/* --------------------------------- Swiper --------------------------------- */
--falcon-swiper-nav-bg: rgba(11, 23, 39, 0.8);
/* --------------------------------- Rater --------------------------------- */
--falcon-star-rating-bg-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFdElEQVR4nO2aXWxURRTH/2dut58Imho1SgStuit+vBo0BkgkRjDog+VBiJEXqJhKK21x+7EdUu5u2W1Uqi8Qo4YQY6gQDQlRn9RENGoMD0a7RCzGRCJGBLRF9mOOD+waKHe7e2f23mt0f4/zceY/Z2fmzJm7QI0aNWr8j6EgBu3sHG9oXHC2gxQvJ/CUhbpUPD5wMggtwv8hmZrmn3mHmF8G4XEm6s5R/kinlPP91xKAA7YN2A8CeHRW8eLmrOjwWwsQgAMYqs+xnLGls3O8wW89vjqgp1/eDWC1YyXhxqYFvz/ppx7AZwcIsnrmbMDUK6X0V5NfA/VJuRDgdWWa3Tmds1b5IqiAf97OUReAunLNCOx4RniFL/eALimvrs+KnwDMq6yHWJq0Bz/3VFRxJD8GabgY4iqcPABWvd6puRzPV4CUsnEmK6YA3OCiG1tKRRIJecwrXUU8XwHTGbEe7iYPAJQXYqsXeq4YyEvjUkoxkxXfAbhDo/uFOrYWxeMDv1Rb16V4ugJmctYa6E0eABpyItdZTT1OeLwFDEMa02YpZeWHpwaeOaBncOQhMJYamrnmvMdJUtXOgI0bd4daW0+25S0rAoV7iLiHgWqkuDkChjik9ibl8EmAuAo2/8G1A7ZKea24IMJkcQRAmJkiBIQBtAGwqiluNgScU4w0EU2CkWZSk8ycnleP76WUf2nadCYajbfmrfwDxIWJgiMAhQG06k7AQxSAEwAmiTnNRJMEMWkxpePx/lNzrRpHB7wwOLJcMR+Cm9vbv5cZAK81h1S3lFLNrnQ8BBVjF/4bkweAZgDPnc+IJ5wqS0QBDnsoKBAYdLtTubMDCF95qiYAhMUfOpY7FSqlOgCc9lSRjzDR86MjsS+d6hwdMBaX3zCrlQDOeKrMBwiIpnYMvVSqvuRNMBWXXwPiYQB/eKLMBxgY3mnHRudqM+dVOGkPfsEKjwCYrqoyHyAgnrKHRipoV57CveAwgCZjZT7AwFjKHuqr5Npc8VW4r3/7ShAdAuD7xwuXjCftoa5KcwZXuUDv4MgqYn4XQEhLmscw8+5UPPaMm4TJVTqc2jF0GERrAeRcq/MceqOlnje7zRa10uHege3tBHobgXxdvhIm7DuRjjw9MbE277av1gRS9vAEwE8BqGpurgVhf0ud2qAz+YvdDegb3L4BTK+b2DCBgffO/np9+549m7K6NoweMD795KOj9y9bcRsB95rY0SRTp+qW7drV/aeJEeM9TMzvm9rQg48mEv2/mVoxP8RYLDa2oYWor4oVYwuEu6qgQwOOtLfvN36DrEIY4yXmNrRobGv79hZTI0YOKPwCEVMRurBFxqvPyAGLw+lbEWBuoBCwAwhB7f/i+GS8/YwcwBzY/i8S7AoILgIUMY8EZluAzZegIY2Fc0gbbQdc9DwHFgGKCFZGP4K2AwoxuFGz+xkCehFSNxHzKoCO6uowjQRl/7dXCs0YnCXmVwWH7Evu8T9LKT+Yzoj1BNggLHRl0fAc0ncAiyVuHl8INKEI0aQdOz67rvDRcm9394sToabpLhBHAVxVkV02c4D2e0DfwMi+Cv76CoCPKEU9Y4nYZ5Xa7pHyOpEVwwA2oXzKfmHqWKRF90FEewVUkAMcZ/C2lB076PadbkzKUwCejUblK3kSO0FYM0fzhkXh9M0AptyMUcQkDJY6AE8D2NIcUktS9vABk7+0JBJyMhmPPcYKywEu9cGWQ3nrnO4Y2g5gYN+sogyIU5mQakvasXEpZUbX9mxSidjHzSG+jxjrAPx4eS29afIwor0FWkJq9HzOOsvMq5n5B0vx2OioPKFrrxyFg/ItKeXBmazoAGMFQEea6/MlP3zWqFGjRo0y/A3lxcMNXfCjjAAAAABJRU5ErkJggg==");
/* ---------------------------------- Toast --------------------------------- */
--falcon-toast-background-color: rgba(52, 64, 80, 0.3);
/* --------------------------------- Wizard --------------------------------- */
--falcon-theme-wizard-nav-item-circle-bg: #0b1727;
/* -------------------------------- Card Span ------------------------------- */
--falcon-card-span-img-bg: #0b1727;
--falcon-card-span-img-box-shadow: var(--falcon-box-shadow-sm);
--falcon-card-span-img-hover-box-shadow: var(--falcon-box-shadow);
/* ------------------------------ Emoji Picker ------------------------------ */
/* ------------------------------ showcase-page ------------------------------ */
--falcon-setting-toggle-shadow: 0 -7px 14px 0 rgba(3, 12, 51, 0.15), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
/* -------------------------------- Scrollbar ------------------------------- */
--falcon-scrollbar-bg: rgba(52, 64, 80, 0.6);
/* ------------------------------- Falcon Pill ------------------------------ */
--falcon-nav-pills-falcon-active-bg-color: #0b1727;
/* ------------------------------- Custom disabled button ------------------------------ */
--falcon-btn-disabled-custom-background: rgba(11, 23, 39, 0.65);
--falcon-btn-disabled-custom-color: rgba(255, 255, 255, 0.2);
}
:root .table,
:root.light .table,
:root .light .table {
--falcon-table-striped-bg: #f9fafd;
}
.dark .table {
--falcon-table-striped-bg: #0b1727;
}
html {
scrollbar-width: thin;
white-space: normal;
}
body {
margin: 0;
padding: 0;
line-height: 1.4;
color: black;
font-family: var(--font-default);
font-weight: 400;
font-style: normal;
font-size: 14px;
font-smooth: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar {
width: 8px;
background: #f9f9f9;
}
::-webkit-scrollbar-thumb {
background: #ebebeb;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: #3568f0;
}
img,
svg {
border: none;
max-width: 100%;
vertical-align: middle;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-weight: bold;
}
p,
figure,
figcaption,
blockquote,
caption,
fieldset,
embed,
object,
applet,
canvas,
caption,
iframe,
strike,
time,
video {
border: 0;
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
strong {
font-weight: bold;
}
::after,
::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:focus {
outline: -webkit-focus-ring-color auto 0;
}
.list-chat {
margin: 0.75rem 0;
}
/* hết phần chờ của chờ phản hồi */
.btn-chat-new {
display: inline-flex;
align-items: center;
place-content: center;
height: 50px;
margin: 30px calc(50% - 20px) 50px calc(50% - 20px);
margin-right: 1rem;
}
.split-btn {
display: flex;
flex-direction: column;
padding: 1rem;
line-height: 1.5;
align-items: start;
}
.btn-split {
font-size: 0.75rem;
position: relative;
}
.split-content {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
border-radius: 8px;
width: 200px;
z-index: 10;
right: 10%;
}
.split-content-autowidth {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
border-radius: 8px;
z-index: 10;
right: 10%;
}
.split-content div, .split-content-autowidth div {
padding: 0.5rem 1rem;
align-items: start;
display: flex;
}
.split-content div:hover, .split-content-autowidth div:hover {
background: #e8e8e8;
}
.split-content div.active, .split-content-autowidth div.active {
background: #e6f6ff;
}
.theme-dark .split-content div.active, .theme-dark .split-content-autowidth div.active {
background: #333;
}
.split-content.target-hidden, .split-content-autowidth.target-hidden {
display: none;
}
.theme-dark .split-content, .theme-dark .split-content-autowidth {
background: #000;
border: 1px solid #000;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.ai-model {
color: #666666;
}
.theme-dark .ai-model {
color: #d9d9d9;
opacity: 0.75;
}
.theme-dark .split-content div:hover, .theme-dark .split-content-autowidth div:hover {
background: #333;
}
.fa-chevron-down {
width: 9px;
}
ul.custom-list {
column-count: 2;
list-style-type: none; /* Loại bỏ các ký hiệu gạch đầu dòng mặc định */
padding: 0 0.5rem;
}
ul.custom-list li::before {
content: "-"; /* Thêm dấu gạch ngang trước mỗi mục */
margin-right: 0.5rem; /* Khoảng cách giữa dấu gạch ngang và nội dung */
}
.feedbacked {
opacity: 1 !important;
}
.btn-like.feedbacked svg,
.btn-dislike.feedbacked svg {
fill: #ec2227;
stroke: #ec2227;
}
.btn-ranting.active {
background: #e7f0fd;
color: #3568f0;
border: solid 1px #e7f0fd;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
.chat-active {
background-color: #e8e8e8;
}
.theme-dark .chat-active {
background-color: #333;
}
.section-header.sticky-header {
float: left;
margin: 0;
width: calc(64% - 96px);
position: fixed;
z-index: 99;
background-color: #f2f2f2;
background-color: var(--background-color);
/* background-color: red; */
top: 3rem;
display: flex;
padding: 0.75rem 0 0.25rem;
}
.theme-dark .section-header.sticky-header {
background-color: var(--background-color);
}
.w-100 {
width: 100%;
}
.px-2 {
padding-left: 1rem;
padding-right: 1rem;
}
.flex {
display: flex;
}
.justify-content-space-between {
justify-content: space-between;
}
.align-items-center {
align-items: center;
}
.headding-title.sticky-header {
padding: 0 10px 0 10px;
font-size: 22px;
}
.headding-title {
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 1;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.d-block {
display: block;
}
.field-select-btn {
display: flex;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.btn-hoithoai {
display: inline-block;
cursor: pointer;
}
.section-content.sticky-header {
float: left;
width: 100%;
position: relative;
margin-top: 50px;
}
.post-summary a {
color: #1c79e4;
text-decoration: none;
}
.tip-bottom:after {
width: 160px;
font-weight: normal !important;
}
.tip-bottom:hover:after {
z-index: 999;
}
.theme-dark .ailuat-item-link.btn-trigger {
color: #d9d9d9;
}
.theme-dark .ailuat-item-link:hover {
color: #d9d9d9;
background-color: #333;
}
.loader {
border: 2px solid rgba(0, 0, 0, 0.1);
/* Độ dày và màu sắc của vòng tròn */
border-top: 2px solid #333;
/* Màu sắc của vòng tròn */
border-radius: 50%;
/* Để làm tròn thành hình tròn */
width: 25px;
/* Kích thước của spinner */
height: 25px;
/* Kích thước của spinner */
animation: spin 1s linear infinite;
/* Sử dụng animation với tên spin, thời gian 1 giây, tốc độ linear và vô hạn lặp */
}
.theme-dark .loader {
border: 2px solid rgb(255, 255, 255);
/* Độ dày và màu sắc của vòng tròn */
border-top: 2px solid #333;
/* Màu sắc của vòng tròn */
border-radius: 50%;
/* Để làm tròn thành hình tròn */
width: 25px;
/* Kích thước của spinner */
height: 25px;
/* Kích thước của spinner */
animation: spin 1s linear infinite;
/* Sử dụng animation với tên spin, thời gian 1 giây, tốc độ linear và vô hạn lặp */
}
@keyframes spin {
0% {
transform: rotate(0deg);
/* Không xoay */
}
100% {
transform: rotate(360deg);
/* Xoay một vòng đầy */
}
}
pre {
font-family: var(--font-default);
white-space: break-spaces;
}
.no-chat-history {
display: flex;
justify-content: center;
}
.ul-list-chat-preloader {
margin: 0;
padding: 0;
float: left;
width: 100%;
}
.ul-list-chat-preloader > li {
display: flex;
gap: 10px;
list-style: none;
padding: 10px 40px 10px 36px;
position: relative;
cursor: pointer;
float: left;
width: 100%;
border-radius: 24px;
margin: 2px 0px;
}
.ul-list-chat-preloader > li:hover {
background: #e8e8e8;
}
.theme-dark .ul-list-chat-preloader > li:hover {
background: #333;
}
.text-hoi-dap-edit {
display: flex;
gap: 5px;
}
.text-hoi-dap-edit input {
height: 24px;
padding: 0 7px;
top: 50%;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
background-color: transparent;
outline: 0;
min-width: inherit;
border: 1px solid #e7e6e6;
border-radius: 5px;
}
.text-hoi-dap-edit input:focus {
background-color: #fff;
border: 1px solid #000;
}
.save_options button {
width: 24px;
height: 24px;
border: none;
cursor: pointer;
outline: 0;
border-radius: 5px;
background-color: #f5f5f5;
}
.edit-li {
padding: 10px 10px 10px 10px !important;
}
.div-icmore.active {
display: inline-block;
}
.katex {
font: normal 1rem var(--falcon-body-font-family) !important;
}
.katex-display {
overflow-x: auto;
max-width: 53vw;
height: max-content;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #ebebeb #f9f9f9;
}
.form-question-input.form-group {
float: left;
width: 100%;
max-width: 600px;
position: unset;
margin-bottom: 12px;
display: flex;
flex-direction: column;
background-color: var(--background-color);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3);
align-items: center;
border-radius: 12px;
}
.form-question-input .textarea-message {
font-size: 16px;
box-shadow: none;
font-family: var(--font-default);
height: auto;
max-height: 13rem;
resize: none;
background-color: var(--background-color);
color: var(--color);
white-space: normal;
padding: 0.5rem 1rem 0.5rem 1rem;
margin: 0.75rem 0;
border-radius: unset;
}
.form-button {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.form-button-group-action,
.form-button-group-selection {
display: flex;
align-items: center;
}
.form-question-input .btn-send,
.form-question-input .btn-stop {
margin: 0 10px;
position: unset;
}
.btn-send,
.btn-stop {
position: absolute;
width: 48px;
height: 48px;
cursor: pointer;
display: grid;
place-items: center;
margin: 0 !important;
margin-left: 5px !important;
margin-right: 5px !important;
}
.btn-search {
width: auto;
display: flex;
background-color: #f2f2f2;
border-radius: 48px;
position: unset;
cursor: pointer;
place-items: center;
padding: 0.5rem 0.5rem;
margin: 0px 0px 0px 10px;
}
.btn-title {
margin: 0 0.5rem;
}
.btn-search.active svg path {
fill: #3568f0;
}
.btn-search.active {
color: #3568f0;
}
.theme-dark .btn-search {
color: #d9d9d9;
background-color: #333;
}
.theme-dark .btn-search.active {
color: #3568f0;
background-color: #333333;
}
.btn-search:hover,
.btn-search:hover svg path,
.theme-dark .btn-search:hover,
.theme-dark .btn-search:hover svg path {
background-color: #3568f0;
color: #fff;
fill: #fff;
}
.btn-micro svg,
.btn-send svg,
.btn-stop svg {
position: unset;
}
.btn-micro svg path {
fill: #ec2227;
}
.theme-dark .btn-micro:hover svg path,
.btn-micro:hover svg path {
fill: #fff;
}
.btn-micro:hover,
.theme-dark .btn-micro:hover {
background-color: #3568f0;
}
.theme-dark .btn-micro {
background-color: #333;
}
.theme-dark .btn-micro svg path {
fill: #d9d9d9 !important;
}
.btn-micro svg:hover circle,
.btn-send svg:hover circle,
.btn-stop svg:hover circle {
fill: #3568f0;
}
.btn-stop svg:hover path {
fill: #3568f0;
}
.btn-stop svg path {
fill: var(--active-bg-color);
}
.btn-send svg:hover path {
fill: #fff;
}
.btn-micro {
background-color: #f2f2f2;
border-radius: 50%;
position: unset;
cursor: pointer;
display: grid;
place-items: center;
height: 3rem;
width: 3rem;
margin-right: 0.5rem;
}
.textarea-message::-webkit-scrollbar {
width: 0 !important;
display: none;
}
@keyframes spinner-grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.spinner-grow {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: -0.125em;
background-color: currentColor;
border-radius: 50%;
opacity: 0;
-webkit-animation: 0.75s linear infinite spinner-grow;
animation: 0.75s linear infinite spinner-grow;
}
.spinner-grow-sm {
width: 1rem;
height: 1rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.loader1 {
border-left: 0.15rem solid orangered;
animation: blink 1s step-end infinite;
}
@keyframes blink {
from, to {
border-color: transparent;
}
50% {
border-color: orangered;
}
}
.cursor.cursor-full {
width: 100%;
}
.px-3 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.badge {
display: inline-block;
padding: 0.355555em 0.711111em;
font-size: 0.75em;
font-weight: 600;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
.rounded-pill {
border-radius: 50rem !important;
}
.bg-primary {
background: var(--falcon-primary);
color: var(--falcon-white);
}
.pagination {
float: left;
width: 100%;
}
.page-numbers {
display: inline-block;
height: 36px;
line-height: 36px;
text-align: center;
padding: 0 6px;
min-width: 36px;
cursor: pointer;
margin-right: 6px;
margin-bottom: 6px;
border-radius: 4px;
}
.page-numbers:hover {
background-color: #3568f0;
color: var(--color);
}
.page-numbers:hover {
background-color: #3568f0;
color: #fff;
}
.page-numbers:hover svg {
fill: var(--color);
}
.page-numbers.active {
background-color: #3568f0;
}
.page-numbers.active a {
color: #fff !important;
}
.page-numbers.active:hover {
background-color: #3568f0;
}
.page-numbers.active:hover a {
color: #fff !important;
}
.pagination a {
color: var(--color);
}
.group-flex-center {
display: flex;
justify-content: flex-end;
align-items: center;
}
.theme-dark .ailuat-item-link.active svg,
.theme-dark .ailuat-item-link.active svg g,
.theme-dark .ailuat-item-link.active svg path,
.theme-dark .ailuat-item-link.active svg stroke {
fill: #ec2227;
}
.theme-dark .ailuat-item-link.active > svg,
.ailuat-item-link.active > svg {
fill: #ec2227;
}
.ul-nav-sub li.active a {
color: #ec2227;
}
.ul-nav-sub li a.active,
.ul-nav-sub li a:hover {
background: #f2f2f2;
color: #666;
border-radius: 8px;
}
.page-header {
padding: 10px 0;
border-bottom: solid 1px #ebebeb;
float: left;
width: 78%;
position: fixed;
z-index: 99;
top: 3rem;
background: var(--background-color);
}
.page-article-body {
position: relative;
top: 70px;
}
.page-body {
float: left;
width: 100%;
font-size: 16px;
line-height: 1.8;
padding: 0 5%;
}
h1 {
font-size: 27px;
}
strong {
font-weight: bold;
}
.swal2-container {
z-index: 9999;
}
.recording {
text-align: center;
}
.stop-recording,
.center {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.voice-container {
display: flex;
columns: 2;
width: 100%;
justify-content: space-around;
align-items: center;
}
.pulse-circle {
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: red;
margin: 0 auto;
position: relative;
animation: pulse 1.5s infinite;
}
.text {
margin-top: 10px;
font-size: 18px;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.btn-record,
.btn-stop-record {
width: 48px;
height: 48px;
cursor: pointer;
}
.btn-record,
.btn-stop-record svg {
position: unset;
}
.btn-record svg:hover circle,
.btn-stop-record svg:hover circle {
fill: #3568f0;
}
.btn-record svg:hover path,
.btn-stop-record svg:hover path {
fill: #3568f0;
}
.btn-record svg path,
.btn-stop-record svg path {
fill: var(--active-bg-color);
}
.btn-record {
background-color: #f2f2f2;
border-radius: 50%;
position: unset;
cursor: pointer;
display: grid;
place-items: center;
padding: 0.5rem;
margin: 10px;
}
.theme-dark .btn-record svg path {
fill: #333;
}
.theme-dark .btn-record:hover {
background: #3568f0;
}
.theme-dark .btn-stop-record svg:hover path {
fill: #3568f0;
}
.btn-read-aloud {
cursor: pointer;
}
.btn-read-aloud svg {
width: 20px;
height: 20px;
fill: #ec2227;
}
.btn-read-aloud svg path {
fill: #888888;
stroke: 888888;
}
.btn-stop-read-aloud {
cursor: pointer;
}
.btn-stop-read-aloud svg {
width: 20px;
height: 20px;
fill: #ec2227;
}
.btn-stop-read-aloud svg path {
fill: #888888;
stroke: 888888;
}
/* HTML: */
.loader-voice {
position: relative;
top: 0.25rem;
padding: 3px;
aspect-ratio: 1;
border-radius: 50%;
background: #222;
--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
-webkit-mask: var(--_m);
mask: var(--_m);
-webkit-mask-composite: source-out;
mask-composite: subtract;
animation: l3 1s infinite linear;
width: 1rem;
}
@keyframes l3 {
to {
transform: rotate(1turn);
}
}
.theme-dark .loader-voice {
background: #d9d9d9;
}
/* css lại header */
.header.sticky {
height: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-right {
top: unset;
}
.head-meta {
top: unset;
}
.btn-nangcapgdv {
top: unset;
}
.btn-tokens {
top: unset;
}
.dropdown-item.f-user {
top: unset;
}
.btn-theme-dark {
top: unset;
}
.svgdarktheme {
top: unset;
}
.section {
margin-bottom: 8rem;
padding: 3.5rem calc(50% - 300px);
}
.section-1 {
margin-bottom: 8rem;
padding: 3.5rem;
}
.sidebar-right {
padding-top: 4rem;
}
.scroll-2 {
max-height: 81vh;
}
.scroll-2::-webkit-scrollbar {
width: 8px;
background: #f9f9f9;
}
.scroll-2::-webkit-scrollbar-thumb {
background: #ebebeb;
}
.hoi-dap {
display: flex;
align-items: center;
}
.icon-hoidap {
top: unset;
}
.header-left {
top: unset;
}
.table-scroll {
max-height: calc(100vh - 16rem);
scrollbar-width: thin;
}
.content-right .section {
padding: 65px 50px 0 50px;
margin-bottom: 0;
}
thead {
position: sticky;
top: 0;
z-index: 1;
background-color: #fbfbfb;
}
.theme-dark .table-giao-dich th {
background: #222;
}
.theme-dark thead {
background-color: #333;
}
.theme-dark .block-content thead {
background-color: #222;
}
.theme-dark .table,
.theme-dark .table thead,
.theme-dark .table tr,
.theme-dark .table th,
.theme-dark .table td {
color: #d9d9d9;
}
.link-circle {
text-decoration: none;
color: #3d3b3b !important;
}
.span-link-circle {
padding: 3px 3px;
border: 1px solid #a19d9d;
border-radius: 50%;
text-decoration: none;
font-size: 10px;
background-color: #f2f2f2 !important;
color: #3d3b3b !important;
}
.tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip-text {
visibility: hidden;
position: absolute;
bottom: 100%;
transform: translateX(-50%);
background-color: #fff;
color: black;
white-space: nowrap;
border: 1px;
border-radius: 0.75rem;
font-size: 1rem;
width: 36rem;
white-space: normal;
left: 50%;
z-index: 99999;
padding: 1rem;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
}
.dp-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.post-summary table {
border-collapse: collapse;
width: 100% !important;
}
.post-summary table tr td {
border: 1px solid var(--tbl-header-bg);
padding: 5px 10px;
}
.post-summary table thead tr {
background: var(--tbl-header-bg);
}
.post-summary table thead tr td,
.post-summary table thead tr th {
padding: 5px 10px;
font-weight: 500;
text-align: left;
}
.post-summary table tr:nth-child(even) {
background: var(--falcon-table-striped-bg);
}
pre.language-undefined {
white-space: normal !important;
}
.w1400 {
max-width: 1400px;
}
.entry-popup-flex {
display: flex;
}
.doc-list {
max-height: calc(75vh - 4rem);
min-height: calc(75vh - 4rem);
overflow-y: auto;
min-width: 25rem;
scrollbar-width: thin;
padding: 0 0.5rem;
}
.doc-list > div:hover {
cursor: pointer;
background-color: #e8e8e8;
border-radius: 24px;
}
.doc-items {
max-height: calc(75vh - 4rem);
min-height: calc(75vh - 4rem);
overflow-y: auto;
scrollbar-width: thin;
padding: 0 1rem;
min-width: calc(100% - 25rem);
}
.text_ellipsis {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.iconlailuat {
width: 80px;
height: auto;
}
.form-ailuat {
display: block;
padding: 0 calc(50% - 300px);
}
.form-question-input.form-group {
float: left;
width: 100%;
max-width: 600px;
position: unset;
margin-bottom: 12px;
display: flex;
flex-direction: unset;
background-color: var(--background-color);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.3);
align-items: center;
border-radius: 48px;
}
.form-question-input .textarea-message {
font-size: 16px;
box-shadow: none;
font-family: var(--font-default);
height: auto;
max-height: 13rem;
resize: none;
background-color: var(--background-color);
color: var(--color);
white-space: normal;
padding: 22px 1rem 22px 1rem;
border-radius: unset;
margin: 0;
}
.form-question-input .btn-send,
.form-question-input .btn-stop {
margin: 0 10px;
position: unset;
}
.btn-micro {
background-color: #f2f2f2;
border-radius: 50%;
position: unset;
cursor: pointer;
display: grid;
place-items: center;
padding: 0.5rem;
margin: 10px;
}
#toasts {
min-height: 0;
position: fixed;
right: 20px;
top: 20px;
width: 400px;
max-width: calc(100% - 40px);
z-index: 1800;
}
#toasts .toast {
background: #d6d8d9;
border-radius: 3px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, .1);
color: #fff !important;
cursor: default;
margin-bottom: 20px;
opacity: 0.8;
position: relative;
padding: 15px;
transform: translateY(15%);
transition: opacity .5s ease-in-out, transform .5s ease-in-out;
width: 100%;
will-change: opacity, transform;
z-index: 1900;
}
#toasts .toast.success {
background: #00a65a !important;
border-color: #008d4c;
border-top-color: rgb(0, 141, 76);
border-right-color: rgb(0, 141, 76);
border-bottom-color: rgb(0, 141, 76);
border-left-color: rgb(0, 141, 76);
}
#toasts .toast.warning {
background: #ffa533;
}
#toasts .toast.info {
background: #2cbcff;
}
#toasts .toast.error {
background: #f44336;
}
#toasts .toast.show {
opacity: 1;
transform: translateY(0);
transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
#toasts .toast.hide {
opacity: 0;
overflow: hidden;
transform: translateY(0);
transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
#toasts .toast .close {
cursor: pointer;
font-size: 24px;
height: 16px;
margin-top: -10px;
position: absolute;
right: 14px;
top: 50%;
width: 16px;
}
.chat-container {
width: 100%;
flex-direction: column;
align-items: flex-end;
gap: calc(0.25rem * 1);
white-space: normal;
display: flex;
margin-top: 25px;
margin-bottom: 25px;
}
.chat-container .chat-message {
padding: 8px 15px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: calc(0.25rem * 1);
border-radius: 1.5rem;
max-width: 70%;
position: relative;
border-color: #0d0d0d0d;
background-color: #e9e9e980;
}
.response-container {
padding: 20px 0;
white-space: pre-line;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #f0f0f0;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f0f0f0;
}
.login-form-col input, input.input-border, select.input-border {
width: 100%;
border: none;
border-bottom: 1px solid black;
border-radius: 0;
display: block;
padding: 15px 0;
color: black;
font-size: 12px;
}
.m-0 {
margin: 0 !important
}
.m-1 {
margin: .25rem !important
}
.m-2 {
margin: .5rem !important
}
.m-3 {
margin: 1rem !important
}
.m-4 {
margin: 1.5rem !important
}
.m-5 {
margin: 3rem !important
}
.m-auto {
margin: auto !important
}
.mx-0 {
margin-right: 0 !important;
margin-left: 0 !important
}
.mx-1 {
margin-right: .25rem !important;
margin-left: .25rem !important
}
.mx-2 {
margin-right: .5rem !important;
margin-left: .5rem !important
}
.mx-3 {
margin-right: 1rem !important;
margin-left: 1rem !important
}
.mx-4 {
margin-right: 1.5rem !important;
margin-left: 1.5rem !important
}
.mx-5 {
margin-right: 3rem !important;
margin-left: 3rem !important
}
.mx-auto {
margin-right: auto !important;
margin-left: auto !important
}
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important
}
.my-1 {
margin-top: .25rem !important;
margin-bottom: .25rem !important
}
.my-2 {
margin-top: .5rem !important;
margin-bottom: .5rem !important
}
.my-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important
}
.my-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important
}
.my-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important
}
.my-auto {
margin-top: auto !important;
margin-bottom: auto !important
}
.mt-0 {
margin-top: 0 !important
}
.mt-1 {
margin-top: .25rem !important
}
.mt-2 {
margin-top: .5rem !important
}
.mt-3 {
margin-top: 1rem !important
}
.mt-4 {
margin-top: 1.5rem !important
}
.mt-5 {
margin-top: 3rem !important
}
.mt-auto {
margin-top: auto !important
}
.me-0 {
margin-right: 0 !important
}
.me-1 {
margin-right: .25rem !important
}
.me-2 {
margin-right: .5rem !important
}
.me-3 {
margin-right: 1rem !important
}
.me-4 {
margin-right: 1.5rem !important
}
.me-5 {
margin-right: 3rem !important
}
.me-auto {
margin-right: auto !important
}
.mb-0 {
margin-bottom: 0 !important
}
.mb-1 {
margin-bottom: .25rem !important
}
.mb-2 {
margin-bottom: .5rem !important
}
.mb-3 {
margin-bottom: 1rem !important
}
.mb-4 {
margin-bottom: 1.5rem !important
}
.mb-5 {
margin-bottom: 3rem !important
}
.mb-auto {
margin-bottom: auto !important
}
.ms-0 {
margin-left: 0 !important
}
.ms-1 {
margin-left: .25rem !important
}
.ms-2 {
margin-left: .5rem !important
}
.ms-3 {
margin-left: 1rem !important
}
.ms-4 {
margin-left: 1.5rem !important
}
.ms-5 {
margin-left: 3rem !important
}
.ms-auto {
margin-left: auto !important
}
.p-0 {
padding: 0 !important
}
.p-1 {
padding: .25rem !important
}
.p-2 {
padding: .5rem !important
}
.p-3 {
padding: 1rem !important
}
.p-4 {
padding: 1.5rem !important
}
.p-5 {
padding: 3rem !important
}
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important
}
.px-1 {
padding-right: .25rem !important;
padding-left: .25rem !important
}
.px-2 {
padding-right: .5rem !important;
padding-left: .5rem !important
}
.px-3 {
padding-right: 1rem !important;
padding-left: 1rem !important
}
.px-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important
}
.px-5 {
padding-right: 3rem !important;
padding-left: 3rem !important
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important
}
.py-1 {
padding-top: .25rem !important;
padding-bottom: .25rem !important
}
.py-2 {
padding-top: .5rem !important;
padding-bottom: .5rem !important
}
.py-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important
}
.py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important
}
.py-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important
}
.pt-0 {
padding-top: 0 !important
}
.pt-1 {
padding-top: .25rem !important
}
.pt-2 {
padding-top: .5rem !important
}
.pt-3 {
padding-top: 1rem !important
}
.pt-4 {
padding-top: 1.5rem !important
}
.pt-5 {
padding-top: 3rem !important
}
.pe-0 {
padding-right: 0 !important
}
.pe-1 {
padding-right: .25rem !important
}
.pe-2 {
padding-right: .5rem !important
}
.pe-3 {
padding-right: 1rem !important
}
.pe-4 {
padding-right: 1.5rem !important
}
.pe-5 {
padding-right: 3rem !important
}
.pb-0 {
padding-bottom: 0 !important
}
.pb-1 {
padding-bottom: .25rem !important
}
.pb-2 {
padding-bottom: .5rem !important
}
.pb-3 {
padding-bottom: 1rem !important
}
.pb-4 {
padding-bottom: 1.5rem !important
}
.pb-5 {
padding-bottom: 3rem !important
}
.ps-0 {
padding-left: 0 !important
}
.ps-1 {
padding-left: .25rem !important
}
.ps-2 {
padding-left: .5rem !important
}
.ps-3 {
padding-left: 1rem !important
}
.ps-4 {
padding-left: 1.5rem !important
}
.ps-5 {
padding-left: 3rem !important
}
label {
display: inline-block
}
.button-submit {
width: 100%;
background-color: #151515;
color: white;
padding: 10px 0;
}
.button-submit[disabled] {
opacity: 0.8
}
.progress {
display: inline-block;
height: 1rem;
overflow: hidden;
font-size: .75rem;
background-color: #e9ecef;
border-radius: .25rem;
}
.progress-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
text-align: center;
background-color: #FFD028;
transition: width .6s ease;
height:100%;
}
.collapsible {
background-color: #e6f6ff;
cursor: pointer;
padding: 14px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
margin-bottom: 5px;
}
.content-collapsible {
padding: 16px;
display: none;
background-color: #f9f9f9;
border-left: 3px solid #e6f6ff;
}
.img-flud {
width: 100%;
height: auto;
}
.position-relative {
position: relative !important;
}
.rounded-pill {
border-radius: 50rem !important;
}
.bg-danger {
background-color: #dc3545 !important;
}
.translate-middle {
transform: translate(-50%, -50%) !important;
}
.start-100 {
left: 100% !important;
}
.top-0 {
top: 0 !important;
}
.position-absolute {
position: absolute !important;
}
#button-contact-vr {
transform: scale(0.8);
margin: -10px;
}
#button-contact-vr {
position: fixed;
bottom: 0;
z-index: 99999;
right: 15px;
}
/*phone*/
#button-contact-vr .button-contact {
position: relative;
margin-top: -5px;
}
#button-contact-vr .button-contact .phone-vr {
position: relative;
visibility: visible;
background-color: transparent;
width: 90px;
height: 90px;
cursor: pointer;
z-index: 11;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transition: visibility .5s;
left: 0;
bottom: 0;
display: block;
}
.phone-vr-circle-fill {
width: 65px;
height: 65px;
top: 12px;
left: 12px;
position: absolute;
box-shadow: 0 0 0 0 #c31d1d;
background-color: rgba(230, 8, 8, 0.7);
border-radius: 50%;
border: 2px solid transparent;
-webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animuiion: zoom 1.3s infinite;
animation: zoom 1.3s infinite;
}
.phone-vr-img-circle {
background-color: #e60808;
width: 40px;
height: 40px;
line-height: 40px;
top: 25px;
left: 25px;
position: absolute;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
.phone-vr-img-circle a {
display: block;
line-height: 37px;
}
.phone-vr-img-circle img {
max-height: 25px;
max-width: 27px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
@-webkit-keyframes phone-vr-circle-fill {
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
}
@-webkit-keyframes zoom {
0% {
transform: scale(.9)
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px transparent
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 transparent
}
}
@keyframes zoom {
0% {
transform: scale(.9)
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px transparent
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 transparent
}
}
.phone-bar a {
position: fixed;
bottom: 25px;
left: 30px;
z-index: -1;
color: #fff;
font-size: 16px;
padding: 8px 15px 7px 50px;
border-radius: 100px;
white-space: nowrap;
}
.phone-bar a:hover {
opacity: 0.8;
color: #fff;
}
@media(max-width: 736px) {
.phone-bar {
display: none;
}
}
#zalo-vr .phone-vr-circle-fill {
box-shadow: 0 0 0 0 #2196F3;
background-color: rgba(33, 150, 243, 0.7);
}
#zalo-vr .phone-vr-img-circle {
background-color: #2196F3;
}
#viber-vr .phone-vr-circle-fill {
box-shadow: 0 0 0 0 #714497;
background-color: rgba(113, 68, 151, 0.8);
}
#instagram-vr .phone-vr-circle-fill {
box-shadow: 0 0 0 0 #FF9800;
background-color: rgba(255, 152, 0, 0.7);
}
#viber-vr .phone-vr-img-circle {
background-color: #714497;
}
#instagram-vr .phone-vr-img-circle {
background-color: #FF9800;
}
#contact-vr .phone-vr-circle-fill {
box-shadow: 0 0 0 0 #2196F3;
background-color: rgba(33, 150, 243, 0.7);
}
#contact-vr .phone-vr-img-circle {
background-color: #2196F3;
}
div#whatsapp-vr .phone-vr .phone-vr-circle-fill {
box-shadow: 0 0 0 0 #1fd744;
background-color: rgb(35 217 72 / 70%);
}
div#whatsapp-vr .phone-vr .phone-vr-img-circle {
background: #1cd741;
}
div#whatsapp-vr .phone-vr .phone-vr-img-circle img {
max-width: 100%;
max-height: 100%;
border-radius: 50%;
}
/*css all in one*/
#gom-all-in-one #phone-vr {
transition: 0.7s all;
-moz-transition: 0.7s all;
-webkit-transition: 0.7s all;
}
.rule-info-lucky-round {
background-image: url('/Projects/Web/Resources/image/lucky-round/TheLe.png');
position: absolute;
bottom: calc(100% / 15);
left: calc(100% / 20);
height: calc(100% / 2.16);
width: calc(100% / 6.4);
background-size: 100% 100%;
}
.rule-info-lucky-round > button {
position: absolute;
bottom: 20px;
left: calc(50% - 45px);
}
#gom-all-in-one #zalo-vr {
transition: 1s all;
-moz-transition: 1s all;
-webkit-transition: 1s all;
}
#gom-all-in-one #viber-vr {
transition: 1.3s all;
-moz-transition: 1.3s all;
-webkit-transition: 1.3s all;
}
#gom-all-in-one #contact-vr {
transition: 1.6s all;
-moz-transition: 1.6s all;
-webkit-transition: 1.6s all;
}
#button-contact-vr.active #gom-all-in-one .button-contact {
margin-left: -100%;
}
#all-in-one-vr .phone-bar {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 100%;
color: #fff;
padding: 5px 15px 5px 48px;
border-radius: 50px;
margin-left: -64px;
width: max-content;
cursor: pointer;
}