:root {
--theme-color: #f78000;
--theme-color-2: #2ecccf;
}
/* Zoom */
/* @media(min-width: 1366px){
body{
zoom: 80%!important;
}
} */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px!important;
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%)!important;
background: linear-gradient(145deg, rgb(255, 207, 136), var(--theme-color))!important;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(7, 56, 161);
}
.app-content{
background: repeating-linear-gradient(327deg, #058ec508, transparent 100px)!important;
}
.logo_overlap{
height: 40px; position: relative; margin-bottom: -40px;
}
.menu-dark .logo_overlap{
background: linear-gradient(90deg, transparent 22%, #283046 22%);
}
.menu-light .logo_overlap{
background: linear-gradient(90deg, transparent 22%, #ffffff 22%);
}
.menu-expanded .logo_overlap, .expanded .logo_overlap{
display: none;
}
.m-3px{
margin: 3px;
}
.select2-selection__arrow{
display: none;
}
input[type=file]::file-selector-button {
border: none;
border-radius:2px;
background-color: #0000001c;
transition: 0.3s;
cursor: pointer;
}
input[type=file]::file-selector-button:hover {
background: linear-gradient(118deg, #7367F0, rgba(115, 103, 240, 0.7));
color: #FFFFFF;
}
.dark-layout input[type=file]::file-selector-button {
color: #c9c9c9;
background-color: #ffffff29;
}
.cb-box{
justify-content: space-between;
padding: 10px 15px;
outline: 1px #f3f3f3 solid;
}
.custom-checkbox{
cursor: pointer;
}
.dark-layout .cb-box{
outline: 1px #252d3e solid;
}
.cb-btn-right{
float: right;
}
.dropdown-menu.show{
z-index: 999!important;
}
/* @media (min-width: 1752px){
.checklist>div>div.col-xl-4 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
}
@media (max-width: 1315px){
.checklist>div>div.col-xl-4 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 882px){
.checklist>div>div.col-xl-4 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (max-width: 449px){
.checklist .cb-title {
width: 74%;
}
} */
.cl_img{
display: flex;
justify-content: right;
}
@media (max-width: 992px){
.cl_img {
display: flex;
justify-content: center;
}
.cl_name{
margin-top: 16px;
text-align: center;
}
}
.cl_hr{
height: 1px;background-color: #97979724;
}
.dark-layout .cl_hr{
height: 1px;background-color: #ffffff24;
}
.cl_body{
background: #f9f9f9;
}
.dark-layout .cl_body{
background: #1e2330;
}
.show_user_info{
position: absolute;right: 14px;border-radius: 20px 0px 0px 20px;padding: 5px 14px;font-size: 11px;margin-top: -2px;
}
/* Effect */
.bg-effect{
margin: 0;
padding: 0;
width: 100%;
height:100vh;
position: fixed;
z-index: -1;
}
.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-of-type(odd){
background: rgb(73 195 203 / 16%);
}
.circles li:nth-of-type(even){
background: rgb(255 59 0 / 13%);
}
.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
.bsnav-sticky.bsnav-sticky-slide.sticked.in:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: calc(100%);
background: linear-gradient(60deg, var(--theme-color-2),var(--theme-color));
animation:anim 4s ease infinite;
background-size: 300% 300%;
}
.anim-logo {
background:linear-gradient(to right, var(--theme-color-2),var(--theme-color)) left/200% 50%;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain;
mask:url('data:image/svg+xml;utf8,') center/contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
animation:anim 4s ease infinite;
}
@keyframes anim {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.th-btn, .btn-primary, .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a, .page-item.active .page-link, .badge-primary,
table.dataTable.dtr-column>tbody>tr>td.control:before, .custom-control-input:checked ~ .custom-control-label::before{
background: var(--theme-color)!important;
border-color: var(--theme-color)!important;
background-color: var(--theme-color)!important;
color: #fff!important;
}
.header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a{
box-shadow: 0 0 6px 1px rgb(0 0 0 / 22%)!important;
}
.th-btn:hover:not(.disabled):not(:disabled), .btn-primary:hover:not(.disabled):not(:disabled), .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a:hover,
.page-item.active .page-link:hover{
background: var(--theme-color-2)!important;
border-color: var(--theme-color-2)!important;
background-color: var(--theme-color-2)!important;
color: #fff!important;
box-shadow: 0 8px 25px -12px var(--theme-color-2)!important;
}
a{
color: var(--theme-color);
}
a:hover{
color: var(--theme-color-2);
}
.progress-bar-primary .progress-bar{
background-color: var(--theme-color);
}