/*variables*/
html {
--body-color: #fff;
--widget-color: #FFF;
--text-color: #242424;
--text-color-rgb: 36, 36, 36;
--input-color: rgba(36 36 36 / 3%);
--form-side: rgba(23, 140, 175, .05);
--card-inner: rgba(23, 140, 175, 0.15);
--home-section: #FFF;
--icon-container: rgba(23, 140, 175, .15);
--icon: var(--primary-color);
--accent-bg: #EBF1F2;
--primary-color: #0692AC;
--primary-color-rgb: 6, 146, 172;
--secondary-color: #32727E;
--secondary-color-rgb: 50, 114, 126;
--third-color: #F9A61A;
--third-color-rgb: 249, 166, 26;
--border-color: rgba(36 36 36 / 0.1);
}
html[dark="true"] {
--body-color: #171616;
--widget-color: #2C2B2B;
--text-color: rgba(154 151 151);
--text-color-rgb: 154, 151, 151;
--input-color: #C6C6C6;
--form-side: #222131;
--card-inner: #FFF;
--home-section: #222131;
--icon-container: rgba(0, 196, 255, .3);
--icon: var(--text-color);
--accent-bg: #1E1E1E;
--border-color: rgba(255 255 255 / 0.1);
}
/*animations*/
@keyframes go-down {
0% {
transform: translate(20px, -20px);
}
100% {
transform: translate(0);
}
}
@keyframes go-up {
0% {
transform: translate(-20px, 20px);
}
100% {
transform: translate(0);
}
}
@keyframes go-left {
0% {
transform: translatex(50px);
}
100% {
transform: translate(0);
}
}
@keyframes go-right {
0% {
transform: translatex(-50px);
}
100% {
transform: translate(0);
}
}
@keyframes stretch {
0% {
transform: scale(.5);
}
100% {
transform: scale(1);
}
}
/*start general*/
/*------------- LOGIN ---------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Tajawal", sans-serif;
font-style: normal;
}
:root {
--text-color: #242424;
--text-color-rgb: 36, 36, 36;
--primary-color: #0692AC;
--primary-color-rgb: 6, 146, 172;
--secondary-color: #32727E;
--secondary-color-rgb: 50, 114, 126;
--third-color: #F9A61A;
--third-color-rgb: 249, 166, 26;
--border-color: rgba(36 36 36 / 0.1);
}
body:has(.login_container) {
position: relative;
min-height: 100vh;
background-image: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
color: var(--text-color);
}
.login_container {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 20px;
padding: 15px;
z-index: 1;
}
.login_container .logo_container {
display: flex;
justify-content: center;
align-items: center;
}
.login_container .logo_container img {
width: 120px;
}
.login_container .login_greeting {
margin-bottom: 10px;
font-size: 20px;
}
.login_container .login_instructions {
color: rgba(var(--text-color-rgb), 0.6);
margin-bottom: 10px;
}
.login_container .full-input {
display: flex;
flex-direction: column;
gap: 15px;
}
.login_container .input-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.login_container .input-container label {
font-weight: bold;
color: var(--text-color);
}
.login_container .input-container :is(input, select, textarea) {
border: 0;
outline: 0;
background-color: rgba(36 36 36 / 0.03);
border-radius: 8px;
padding: 10px;
}
.login_container .input-container :is(input, select, textarea)::placeholder {
font-size: 14px;
color: rgba(var(--text-color-rgb), 0.6);
}
.login_container .check-container {
display: flex;
align-items: center;
gap: 10px;
}
input[type="checkbox"] {
width: fit-content !important;
}
.check-container input[type="checkbox"] {
order: 1;
accent-color: var(--primary-color);
}
.check-container label {
order: 2;
}
.check-container input[type="checkbox"]:checked + label {
color: var(--primary-color);
}
.login_container .grey_text {
color: rgba(var(--text-color-rgb), 0.6);
}
.login_container .button {
border: unset;
outline: unset;
padding: 1rem;
border-radius: 8px;
transition: 0.2s all;
cursor: pointer;
transition: 0.2s all;
font-size: 16px;
box-shadow: 0 0 25px 0 rgba(0 0 0 / 0.1);
}
.login_container .button:hover {
transform: translateY(-0.25em);
box-shadow: 0 0 25px 0 rgba(0 0 0 / 0.3);
}
.login_container .button:active {
transform: translateY(0em);
}
.login_container .button-primary {
background-color: var(--primary-color);
color: #fff;
}
.login_container .password_input_container {
position: relative;
}
.login_container .password_input_container input {
width: 100%;
}
.login_container .password_input_container .show-pass {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
:root[dir="rtl"] .login_container .password_input_container .show-pass {
left: 10px;
right: unset;
}
@media (min-width: 991px) {
.login_container {
width: 720px;
padding: 30px;
}
.login_container .login_greeting {
font-size: 28px;
}
.login_container .login_instructions {
font-size: 18px;
}
.login_container .logo_container img {
width: 190px;
}
.login_container .full-input {
gap: 30px;
}
}
/*------------------- END LOGIN -----------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
font-family: 'Tajawal', sans-serif;
}
body {
background-color: var(--body-color);
overflow-x: hidden;
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
color: var(--text-color);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #979797;
border-radius: 25px;
}
::-webkit-scrollbar-track {
background-color: #FFF;
}
a {
text-decoration: none;
color: var(--primary-color);
}
table td a {
text-decoration: underline;
}
p {
margin: 0;
}
span.notification {
position: absolute;
top: -5px;
left: -5px;
transform: translate(-25%, -25%);
padding: 2px 7px;
color: #FFF;
background-color: red;
font-size: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
z-index: 2;
}
.dropdown-toggle {
display: flex;
align-items: center;
gap: 10px;
}
.dropdown-item {
background-color: var(--main);
color: var(--text-color);
text-align: start;
border-bottom: 1px solid rgba(23, 140, 175, .15);
}
.dropdown-item:focus {
background-color: var(--primary-color);
}
.dropdown-item:last-child {
border: none;
}
.dropdown-menu .list {
width: 100%;
max-height: 250px;
overflow-y: auto;
}
.dropdown-menu input {
background-color: var(--input-color);
border: 1px solid #C6C6C6;
outline: none;
}
.dropdown-menu {
background-color: var(--main);
}
.dropdown-menu li {
position: relative;
}
.dropdown-menu .submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
html[dir="rtl"] .dropdown-menu .submenu {
left: unset;
right: 100%;
}
.dropdown-menu > li:hover {
background-color: #f1f1f1
}
.dropdown-menu > li:hover > .submenu {
display: block;
}
.dropdown-menu .dropdown-title {
text-align: start;
padding: 0.25em 1em;
color: var(--primary-color);
border-bottom: 1px solid var(--primary-color);
font-weight: bold;
}
.dropdown-menu .read-all {
width: 100%;
background-color: var(--primary-color);
color: #FFF;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown-menu .dropdown-more {
padding: 10px 25px;
}
.dropdown-menu .dropdown-more .dropdown-item {
border: none;
text-align: center;
justify-content: center;
}
.dropdown-menu .dropdown-more .dropdown-item span {
margin-inline-end: 20px;
}
.dropdown-menu .notification {
display: flex;
align-items: flex-start;
gap: 15px;
}
.dropdown-menu .notification .icon-container {
width: 35px;
height: 35px;
}
.dropdown-menu .notification .icon-container [class*="fa"] {
font-size: 22px;
}
.dropdown-menu .notification .notification-info .title {
font-weight: 500;
text-overflow: ellipsis;
white-space: normal;
}
.dropdown-menu .notification .notification-info .user {
font-size: 14px;
}
.dropdown-menu .notification .notification-info .time {
display: flex;
align-items: center;
gap: 5px;
}
.dropdown-menu .notification .notification-info .time [class*="fa"] {
font-size: 15px;
}
.dropdown-menu .notification .notification-info .time .text {
font-size: 15px;
}
.btn {
transition: .25s linear;
}
.btn:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
transform: translateY(-0.25em);
color: #000;
}
.calendars-month span {
color: #fff;
}
.widget-box {
background-color: var(--widget-color);
display: flex;
flex-direction: column;
border-radius: 16px;
animation: stretch .6s ease-out 0s alternate none running;
margin-bottom: 20px;
padding: 12px;
box-shadow: 5px 5px 25px 0 rgba(0 0 0 / 0.08);
}
.widget-box .warning {
width: 100%;
padding: 10px;
background-color: rgba(255, 212, 212, .8);
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
}
.widget-box .warning .text {
font-size: 20px;
}
.widget-box .widget-title {
font-size: 18px;
font-weight: bold;
color: var(--text-color);
}
.widget-box .widget-header .buttons .btn {
color: var(--primary-color);
padding: 5px 30px;
border: 1px solid var(--primary-color);
display: flex;
align-items: center;
gap: 10px;
}
.widget-box .widget-header .buttons .btn:hover {
color: #FFF;
background-color: var(--primary-color);
}
.widget-box .widget-body {
padding-top: 16px;
flex: 1;
}
.table-container {
border-radius: 15px;
overflow-x: auto;
}
table {
border-radius: 15px;
}
table thead,
table .thead {
background-color: rgba(var(--primary-color-rgb), .7);
}
table th {
text-align: center;
color: #fff;
}
table td {
color: var(--text-color);
font-weight: normal;
text-align: center;
}
table tr:not(thead):not(.thead) th {
color: var(--primary-color);
}
.ticket-table table td .badge {
width: fit-content;
color: #FFF;
background-color: var(--primary-color);
margin: auto;
padding: 3px 20px;
border-radius: 5px;
transition: .25s linear;
}
.ticket-table table td .badge:hover {
transform: scale(1.02) translateY(-2px);
}
.order-table th {
font-weight: 500;
}
.order-table table td .details {
color: var(--primary-color);
text-decoration: underline;
}
.table-show {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 15px 0;
}
.table-show .drop-down {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.table-show .dropdown-num {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.table-show .drop-down p {
margin: 0;
color: var(--text-color);
}
.table-show .drop-down .dropdown-toggle {
color: var(--text-color);
}
.table-show .drop-down .dropdown-menu {
min-width: unset;
padding: 0;
}
.table-show .control {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.table-show .control span {
cursor: pointer;
}
.table-show .control .prev {
color: #999999;
cursor: pointer;
}
.table-show .control .next {
color: var(--text-color);
cursor: pointer;
}
.table-show .control .step {
padding: 5px 10px;
border-radius: 5px;
color: var(--text-color);
}
.table-show .control .step.active {
color: #FFF;
background-color: var(--primary-color);
}
footer {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--accent-bg);
}
footer p {
color: var(--text-color);
margin: 0;
text-align: center;
}
footer a {
color: var(--secondary-color);
font-weight: bold;
}
.up {
width: 50px;
height: 50px;
background-color: var(--primary-color);
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
position: fixed;
bottom: 75px;
left: 50px;
cursor: pointer;
display: none;
}
.up [class*="fa"] {
color: #FFF;
font-size: 26px;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(23, 140, 175, .15);
border-radius: 5px;
}
.icon-container [class*="fa"] {
color: var(--primary-color);
}
/*start inputs*/
.inputs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 20px;
}
.flex-inputs {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 0 20px;
flex-wrap: wrap;
}
.hidden-inputs {
display: none;
}
.flex-inputs .input-container {
margin: 15px 0;
}
label {
color: var(--secondary-color);
display: block;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 10px;
}
.input-container label {
margin-bottom: 0;
}
:root[dark="true"] .input-container label,
label {
color: var(--text-color);
}
.input-container > input,
textarea,
input,
.input-container > select,
.input-container .icon-input > input,
.input-container .dropdown-toggle {
width: 100%;
color: #000;
padding: 7px;
border: 1px solid #C6C6C6;
outline: none;
border-radius: 5px;
background-color: var(--input-color);
}
.input-container .icon-input .icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.input-container .icon-input .icon a {
color: #999999;
}
.input-container .dropdown-toggle {
color: #999999;
display: flex;
justify-content: space-between;
align-items: center;
max-height: 40px;
}
.full-input {
width: 100%;
}
.inputs .full-input textarea {
width: 100%;
color: #000;
background-color: var(--input-color);
padding: 7px;
border: 1px solid #C6C6C6;
outline: none;
border-radius: 5px;
}
.inputs .input-container input[type="file"] {
cursor: pointer;
color: #707070;
}
.inputs .input-container input[type="file"]::-webkit-file-upload-button {
color: #2C698D;
background-color: transparent;
border: none;
outline: none;
font-weight: 500;
margin-inline-end: 75px;
}
.inputs .input-container.file button {
margin-inline-start: 20px;
}
.inputs .button-container {
width: 100%;
}
.inputs .button-container button[type="submit"],
.inputs .button-container input[type="submit"],
.input-container .btn {
background-color: var(--primary-color);
color: #FFF;
padding: 5px 25px;
}
.inputs .button-container button[type="submit"]:hover,
.inputs .button-container input[type="submit"]:hover {
background-color: #FFF;
color: var(--primary-color);
border: 1px solid var(--primary-color);
}
@media screen and (max-width: 1200px) {
.inputs {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 760px) {
.inputs {
justify-content: center;
grid-template-columns: repeat(2, 1fr);
}
.dropdown-menu .submenu {
right: unset;
left: 100%;
}
}
@media screen and (max-width: 500px) {
.inputs {
grid-template-columns: repeat(1, 1fr);
}
}
/*end inputs*/
.search-results .title {
color: var(--text-color);
padding: 10px 0;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid rgba(23, 140, 175, .15);
}
.search-results .title h5 {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.search-results .title .num {
font-weight: bold;
color: var(--primary-color);
}
.divider {
width: 100%;
height: 1px;
margin: 20px 0;
background-color: rgba(112, 112, 112, .3);
}
/*end general*/
/*start heading*/
.heading-container {
background-color: var(--main);
}
.heading {
width: 100%;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
background-color: var(--accent-bg);
position: sticky;
top: 0;
left: 0;
z-index: 1024;
}
.navbar-toggler {
color: var(--text-color);
}
@media (min-width: 991px) {
.heading {
gap: 20px;
padding: 15px 35px;
}
}
#LblCompanyName {
display: none;
}
.heading .logo-container {
display: flex;
align-items: center;
}
.heading .logo-container .logo img {
max-height: 50px;
}
.heading .logo-container .com-name {
color: var(--primary-color);
margin: 0;
font-size: 18px;
font-weight: bold;
}
.heading .info-container {
color: var(--primary-color);
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.heading .icon {
cursor: pointer;
padding: 5px;
border-radius: 5px;
transition: .25s linear;
}
.heading .info-container > .icon:hover {
background-color: var(--primary-color);
color: #fff
}
.heading .info-container > .icon > [class*="fa"] {
font-size: 18px;
color: var(--icon);
}
.heading .info-container > .icon > a [class*="fa"] {
color: var(--icon);
}
.heading .info-container > .icon:hover > [class*="fa"],
.heading .info-container > .icon:hover > a [class*="fa"] {
color: #fff
}
.heading .info-container > x .icon:hover > a [class*="fa"] {
color: #fff
}
:root[dir="ltr"] .ar-lang {
display: none;
}
:root[dir="rtl"] .en-lang {
display: none;
}
.dark-mode .fa-sun-bright {
display: none;
}
html[dark="true"] .dark-mode .fa-moon {
display: none;
}
html[dark="true"] .dark-mode .fa-sun-bright {
display: block;
}
.heading .user-img {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.heading .dropdown-toggle {
color: var(--secondary-color);
font-weight: 500;
transition: .25s linear;
}
.heading .dropdown-menu {
min-width: 225px;
}
.heading .dropdown-item {
color: var(--primary-color);
display: flex;
align-items: center;
gap: 10px;
}
.heading .dropdown-item:focus {
color: #fff;
}
.heading .info-container img {
height: 100%;
}
@media screen and (max-width: 820px) {
.heading .logo-container .logo img {
max-height: 25px;
}
.heading .logo-container .com-name {
color: var(--secondary-color);
margin: 0;
font-size: 14px;
font-weight: bold;
}
}
@media screen and (max-width: 500px) {
.heading .logo-container {
gap: 15px;
}
.heading .logo-container {
justify-content: center;
flex-wrap: wrap;
}
.heading .logo-container .com-name {
font-size: 14px;
}
}
/*end heading*/
/*star nav*/
nav .nav-link {
padding: 0;
}
.nav-content {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
.nav-content > div {
padding: 10px;
border-radius: 5px;
transition: .25s linear;
font-size: 14px;
}
.nav-content > div:hover {
background-color: var(--primary-color);
}
.nav-content > div:has(a[aria-expanded="true"]) {
background-color: var(--primary-color);
}
.nav-content > div:has(a[aria-expanded="true"]) > a {
color: #fff;
}
.nav-content > div:hover .nav-content .dropdown-toggle,
.nav-content .home a {
color: rgba(var(--text-color-rgb), 0.5);
font-weight: 500;
}
.nav-content > div:hover > .dropdown-toggle,
.nav-content > div:hover > a {
color: #fff;
}
.nav-content .dropdown-toggle [class*="fa"] {
font-size: 16px;
}
.heading .dropdown-menu {
background-color: var(--widget-color);
}
.nav-content .dropdown-item {
display: flex;
justify-content: space-between;
align-items: center;
}
:root[dir="rtl"] .dropdown-user.dropdown-menu[data-bs-popper] {
right: unset;
left: 0;
}
:root[dir="ltr"] .dropdown-user.dropdown-menu[data-bs-popper] {
left: unset;
right: 0;
}
:root[dir="ltr"] :is(.fa-chevron-left, .fa-chevron-right) {
transform: rotate(180deg);
}
@media screen and (max-width: 700px) {
.nav-content {
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
gap: 10px;
padding: 0;
}
.dropdown-menu[data-bs-popper] {
left: unset;
}
}
/*end nav*/
/*start home*/
.tickets {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 50px;
}
.tickets .ticket {
flex: 1;
background-color: var(--main);
min-width: 360px;
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 50px;
padding: 25px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
transition: .25s linear;
animation: stretch .6s ease-out 0s alternate none running;
}
.tickets .ticket:hover {
transform: scale(1.02);
}
.tickets .ticket:first-child {
animation: go-left .6s ease-out 0s alternate none running;
}
.tickets .ticket:nth-child(2) {
animation: stretch .6s ease-out 0s alternate none running;
}
.tickets .ticket:nth-child(3) {
animation: go-right .6s ease-out 0s alternate none running;
}
.tickets .ticket .icon-container {
width: 80px;
height: 80px;
}
.tickets .ticket .icon-container [class*="fa"] {
font-size: 40px;
}
.tickets .ticket .content,
.tickets-details .detail .content {
text-align: center;
}
.tickets .ticket .content .num,
.tickets-details .detail .content .num {
font-size: 40px;
font-weight: bold;
color: var(--primary-color);
margin: 0;
}
.tickets .ticket .title {
color: var(--text-color);
}
.tickets-details {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
align-content: space-between;
justify-content: space-between;
background-color: rgba(var(--primary-color-rgb), 0.1);
border-radius: 10px;
overflow: hidden;
animation: go-up .6s ease-out 0s alternate none running;
margin-bottom: 20px;
}
@media (min-width: 991px) {
.tickets-details {
margin-bottom: 40px;
}
}
.tickets-details .detail {
width: auto;
padding: 20px;
border: 1px solid rgba(var(--primary-color-rgb), 0.1);
}
.tickets-details .detail .title {
color: var(--text-color);
}
@media screen and (max-width: 992px) {
.tickets-details {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 450px) {
.tickets .ticket {
min-width: unset;
}
.widget-box .widget-title {
font-size: 16px;
}
.widget-box .widget-header .buttons .btn {
padding: 5px 10px;
}
}
/*end home*/
/*start projects*/
.projects-container {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
gap: 50px;
}
.projects-container .project {
min-width: 350px;
background-color: var(--main);
border: 1px solid rgba(112, 112, 112, .3);
border-radius: 5px;
overflow: hidden;
transition: .25s linear;
animation: stretch .6s ease-out 0s alternate none running;
}
.projects-container .project:hover {
transform: scale(1.02);
}
.projects-container .project:first-child {
animation: go-left .6s ease-out 0s alternate none running;
}
.projects-container .project:nth-child(2) {
animation: stretch .6s ease-out 0s alternate none running;
}
.projects-container .project:nth-child(3) {
animation: go-right .6s ease-out 0s alternate none running;
}
.projects-container .project .project-title {
background-color: rgba(23, 140, 175, .15);
padding: 20px;
text-align: center;
}
.projects-container .project .project-title p {
color: var(--text-color);
margin: 0;
font-weight: 500;
}
.projects-container .project .project-body {
padding: 15px 10px 0;
}
.projects-container .project .project-body .num {
color: var(--primary-color);
font-size: 35px;
font-weight: bold;
}
.projects-container .project .project-body .achieve {
padding: 10px;
}
.projects-container .project .project-body .achieve .text {
color: var(--text-color);
margin-bottom: 10px;
font-weight: 500;
}
.projects-container .project .project-body .achieve .progress {
height: 10px;
border-radius: 20px;
}
.projects-container .project .project-body .achieve .progress .progress-bar {
background-color: var(--primary-color);
}
.projects-container .project .project-footer {
display: flex;
align-items: stretch;
}
.projects-container .project .project-footer > div {
flex: 1;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.projects-container .project .project-footer > div:first-child {
border-inline-end: 1px solid rgba(112, 112, 112, .3);
}
.projects-container .project .project-footer .status {
padding: 1px 10px;
color: #FFF;
border-radius: 5px;
}
.projects-container .project .project-footer .closed {
background-color: #FF0000;
}
.projects-container .project .project-footer .open {
background-color: #2CD548;
}
.projects-container .project .project-footer .wait {
background-color: #1000FF;
}
.projects-container .project .project-footer .treating {
background-color: #AF562A;
}
.projects-container .project .project-footer .btn {
color: #FFF;
background-color: var(--primary-color);
display: flex;
align-items: center;
gap: 5px;
padding: 5px;
}
.projects-container .project .project-footer .btn .text {
width: max-content;
}
@media screen and (max-width: 500px) {
.projects-container .project {
min-width: unset;
}
}
/*end projects*/
/*start profile*/
.profile .widget-box {
padding: 0;
overflow: hidden;
}
.profile .widget-box .widget-header {
background-color: rgba(23, 140, 175, .15);
padding: 5px 20px !important;
}
.profile .widget-header .widget-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: normal;
}
.profile .widget-header .widget-title [class*="fa"] {
font-size: 18px;
color: var(--text-color);
}
.profile .icon-container {
width: 30px;
height: 30px;
}
.profile .icon-container [class*="fa"] {
font-size: 20px;
}
.profile .element {
display: flex;
align-items: center;
gap: 10px;
}
.profile .element p {
margin: 0;
color: var(--text-color);
}
.profile .contact-info .widget-body {
padding: 0;
}
.profile .contact-info .elements {
display: grid;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
align-content: space-between;
justify-content: space-between;
}
.profile .contact-info .elements .element {
justify-content: center;
padding: 20px;
border: 1px solid rgba(112, 112, 112, .2);
}
.profile .warning {
background-color: #F9E0C0;
}
.profile .warning .text {
font-size: 16px;
}
.profile .personal-info .user-img {
width: 120px;
height: 120px;
margin: 20px 5px;
}
.profile .personal-info .user-img .img-container {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50px;
border: 4px solid #FFF;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
position: relative;
}
.profile .personal-info .user-img img {
height: 100%;
}
.profile .personal-info .user-img .icon {
background-color: #FFF;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
right: 0;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.profile .personal-info .user-img .icon [class*="fa"] {
font-size: 20px;
}
.profile .personal-info .inputs {
justify-content: flex-start;
gap: 50px;
}
.profile .personal-info .change-password .title {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
}
.profile .personal-info .change-password .title [class*="fa"] {
font-size: 18px;
}
.profile .personal-info .change-password .new-password .password-strength {
width: 150px;
padding: 0 5px;
border-radius: 5px;
margin: 5px;
}
.profile .personal-info .change-password .new-password .strength4 {
background-color: #09F911;
}
@media screen and (max-width: 768px) {
.profile .contact-info .elements {
grid-template-columns: repeat(2, 1fr);
}
}
/*end profile*/
/*start new-ticket*/
.new-ticket .alert {
padding-right: 1rem;
padding-inline-start: 3rem;
}
.new-ticket .alert button {
background-color: #cfebf1;
color: var(--primary-color);
padding: .25rem .5rem;
position: relative;
font-size: 20px;
border: none;
}
.new-ticket .alert .alert-header {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid rgba(23, 140, 175, .3);
}
.new-ticket .alert ol {
padding: 15px 0;
}
.new-ticket .alert ol li {
padding: 10px 0;
}
.new-ticket .alert .alert-header .title {
width: fit-content;
color: var(--primary-color);
background-color: #EEF7F9;
padding: 2px 10px;
border-radius: 5px;
font-size: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.new-ticket .inputs button[type="submit"] {
background-color: #EC9A20;
}
.new-ticket .inputs button[type="submit"]:hover {
color: #EC9A20;
border-color: #EC9A20;
}
/*end new-ticket*/
/*satrt ticket-details*/
.ticket-info-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.ticket-info-container .ticket-info-card {
display: flex;
}
.ticket-info-container .ticket-info-title {
width: 150px;
padding: 15px;
text-align: center;
background-color: rgba(23, 140, 175, .15);
color: var(--secondary-color);
border: 1px solid rgba(23, 140, 175, .15);
}
.ticket-info-container .ticket-info-body {
color: var(--text-color);
flex: 1;
padding: 15px 30px;
border: 1px solid rgba(23, 140, 175, .15);
}
.ticket-details .inputs button[type="submit"]:hover {
color: #EC9A20;
border-color: #EC9A20;
}
.ticket-details .widget-box .widget-header .buttons button {
color: #FFF;
background-color: var(--primary-color);
}
.ticket-details .widget-box .widget-header .buttons button:hover {
color: var(--primary-color);
background-color: #FFF;
}
.ticket-details .widget-box .replies {
padding: 10px 0;
}
.ticket-details .widget-box .replies .reply {
display: flex;
gap: 10px;
}
.ticket-details .widget-box .replies .reply-info .info {
color: var(--text-color);
display: flex;
align-items: center;
gap: 10px;
max-width: 160px;
}
.ticket-details .widget-box .replies .reply .reply-info .circle {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.ticket-details .widget-box .replies .reply .reply-info .circle .inner-circle {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.ticket-details .widget-box .replies .reply .blue-circle {
background-color: rgba(23, 140, 175, .15);
}
.ticket-details .widget-box .replies .reply .blue-circle .inner-circle {
background-color: var(--primary-color);
}
.ticket-details .widget-box .replies .reply .red-circle {
background-color: rgba(250, 26, 26, .15);
}
.ticket-details .widget-box .replies .reply .red-circle .inner-circle {
background-color: #FA1A1A;
}
.ticket-details .widget-box .replies .reply .complete {
display: flex;
flex-direction: column;
align-items: center;
}
.ticket-details .widget-box .replies .reply .complete .circle {
width: 40px;
height: 40px;
background-color: var(--primary-color);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.ticket-details .widget-box .replies .reply .complete [class*="fa"] {
color: #FFF;
}
.ticket-details .widget-box .replies .reply .complete .line {
flex: 1;
width: 3px;
background-color: var(--primary-color);
}
.ticket-details .widget-box .replies .reply:last-child .complete .line {
display: none;
}
.ticket-details .widget-box .replies .reply .reply-body {
flex: 1;
min-height: 100px;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
background-color: var(--input-color);
display: flex;
flex-direction: column;
gap: 20px;
}
.ticket-details .widget-box .replies .reply:last-child .reply-body {
margin: 0;
}
.ticket-details .widget-box .replies .reply .reply-body::after {
content: "";
width: 13px;
height: 13px;
background: var(--input-color);
position: absolute;
top: 15px;
right: -7px;
transform: rotate(45deg);
}
.ticket-details .widget-box .replies .reply .reply-body .reply-item {
display: flex;
align-items: center;
gap: 10px;
}
.ticket-details .widget-box .replies .reply .reply-line {
height: 100%;
width: 1px;
background-color: var(--primary-color);
}
@media screen and (max-width: 992px) {
.ticket-info-container {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 600px) {
.ticket-info-container .ticket-info-card {
flex-direction: column;
}
.ticket-info-container .ticket-info-title {
width: auto;
}
.ticket-info-container .ticket-info-body {
text-align: center;
}
.ticket-details .widget-box .replies .reply {
flex-wrap: wrap;
}
.ticket-details .widget-box .replies .reply .complete {
order: 0;
}
.ticket-details .widget-box .replies .reply .reply-info {
order: 1;
}
.ticket-details .widget-box .replies .reply .reply-body {
min-width: 220px;
order: 2;
}
}
/*end ticket-details*/
/*start project-details*/
.project-details .details .widget-body {
display: flex;
align-items: stretch;
gap: 30px;
flex-wrap: wrap;
}
.project-details .details .widget-body .user-img {
height: 220px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
overflow: hidden;
}
.project-details .details .widget-body .user-img img {
width: 100%;
}
.project-details .details .widget-body .project-body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}
.project-details .details .widget-body .project-body .title {
color: var(--primary-color);
padding-inline-start: 10px;
font-size: 22px;
font-weight: bold;
}
.project-details .details .widget-body .details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 20px;
}
.project-details .details .widget-body .detail {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
}
.project-details .details .widget-body .detail .name {
color: var(--primary-color);
}
.project-details .details .widget-body .buttons {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.project-details .details .widget-body .buttons .btn {
color: #FFF;
border-radius: 8px;
}
.project-details .details .widget-body .buttons .btn-navy {
background-color: var(--primary-color);
}
@media screen and (max-width: 768px) {
.project-details .details .user-img {
margin: 0 auto;
}
.project-details .details .widget-body .project-body {
align-items: center;
}
.project-details .details .widget-body .details {
grid-template-columns: 1fr;
}
.project-details .details .widget-body .buttons {
justify-content: center;
}
}
/*end project-details*/
/*start bill-details*/
.bill-details .widget-body .details {
width: fit-content;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 75px;
}
.bill-details .widget-body .detail {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
}
.bill-details .widget-body .detail .name {
color: var(--primary-color);
font-weight: 500;
}
.bill-details .widget-body .average {
width: fit-content;
background-color: #FFF;
padding: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
border-radius: 8px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.bill-details .widget-body .average .detail {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
}
.bill-details .widget-body .average .text {
color: #EC9A20;
}
.bill-details .table-container {
margin: 40px 0;
}
.bill-details table {
margin: 0;
}
.bill-details table tr:last-child {
background-color: #DEEFF4 !important;
}
.bill-details table tr:nth-child(2) td {
color: var(--primary-color);
}
.bill-details table tr:not(thead):not(.thead) th {
color: var(--text-color);
}
.bill-details table tr,
.bill-details table th,
.bill-details table td {
border-color: rgba(23, 140, 175, .5);
}
@media screen and (max-width: 992px) {
.bill-details .widget-body .details {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
.bill-details .widget-body .details,
.bill-details .widget-body .average {
grid-template-columns: 1fr;
}
}
/*end bill-details*/
/*start advance*/
.advance .widget-box .tasks {
padding: 10px 0;
}
.advance .widget-box .tasks .task {
display: flex;
gap: 10px;
}
.advance .widget-box .tasks .task .complete {
display: flex;
flex-direction: column;
align-items: center;
}
.advance .widget-box .tasks .task .complete .circle {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 3px solid #4F86F7;
border-radius: 50%;
}
.advance .widget-box .tasks .task .complete .fa-user {
color: #5664FC;
}
.advance .widget-box .tasks .task .complete .line {
flex: 1;
width: 3px;
background-color: #4F86F7;
}
.advance .widget-box .tasks .task:last-child .complete .line {
display: none;
}
.advance .widget-box .tasks .task .task-body-wrapper {
flex: 1;
padding-bottom: 30px;
}
.advance .widget-box .tasks .task .task-body {
padding: 35px;
border-radius: 10px;
background-color: #F1F1F1;
display: flex;
flex-direction: column;
gap: 20px;
}
.advance .widget-box .tasks .task .task-body .task-item {
display: flex;
align-items: center;
gap: 10px;
}
.advance .widget-box .tasks .task .task-body .task-item .blue-circle {
margin: 0;
}
.advance .widget-box .tasks .task .task-body .task-item .employee-name {
padding: 2px 5px;
border-radius: 5px;
}
.advance .widget-box .tasks .task .task-body .task-item .employee-title {
font-weight: bold;
}
.advance .widget-box .tasks .task .task-body .task-item .procedure {
display: flex;
gap: 5px;
}
.advance .widget-box .tasks .task .task-body .task-item .procedure .procedure-title {
font-weight: bold;
}
.advance .widget-box .tasks .task .task-body .task-item .procedure .procedure-item {
padding: 0 35px;
border: 1px solid;
border-radius: 5px;
}
.advance .widget-box .tasks .task .task-body .message-box {
background-color: rgba(36, 36, 36, .05);
display: flex;
align-items: center;
flex-wrap: wrap;
border-radius: 5px;
}
.advance .widget-box .tasks .task .task-body .icon {
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.advance .widget-box .tasks .task .task-body .fa-message-lines {
font-size: 18px;
color: #707070;
}
.advance .widget-box .tasks .task .task-body .message-box input {
width: auto;
height: 100%;
padding: 10px 5px;
flex: 1;
background-color: transparent;
border: none;
outline: none;
min-width: 200px;
}
.advance .widget-box .tasks .task .task-body .message-box .btn {
color: #FFF;
background-color: #5664FC;
padding: 10px 30px;
}
.advance .widget-box .tasks .task .task-body .message-item {
align-items: flex-start;
}
.advance .widget-box .tasks .task .task-body .task-item .circle {
width: 35px;
height: 35px;
border: 1px solid #5664FC;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.advance .widget-box .tasks .task .task-body .message-item .svg-inline--fa {
color: #5664FC;
}
.advance .widget-box .tasks .task .task-body .task-item .message-body {
background-color: rgba(36, 36, 36, .03);
padding: 5px 10px 10px;
padding-inline-end: 75px;
border-radius: 5px;
}
.advance .widget-box .tasks .task .task-body .task-item .message-body .employee-info {
margin-bottom: 30px;
}
.advance .widget-box .tasks .task .task-body .task-item .message-body .employee-info .employee-name {
font-size: 12px;
}
.advance .widget-box .tasks .task .task-body .task-item .message-body .employee-info .message-date {
font-size: 13px;
color: #303030;
display: flex;
gap: 10px;
}
.advance .widget-box .tasks .task .task-body .task-item .message-body .employee-info .message-date .icon {
padding: 0;
}
.advance .widget-box .tasks .task .task-body .task-item .message-body .message-content {
font-size: 16px;
font-weight: 500;
}
.advance .widget-box .tasks .task .task-body .date {
position: absolute;
top: 10px;
left: 10px;
color: #242424;
font-size: 14px;
display: flex;
gap: 5px;
}
.advance .widget-box .tasks .task .task-body .date .icon {
padding: 0;
}
.advance .widget-box .tasks .task .task-body .date .icon .svg-inline--fa {
font-size: 12px;
}
.advance .widget-box .tasks .task .task-body .message {
position: absolute;
bottom: 10px;
left: 15px;
cursor: pointer;
}
.advance .widget-box .tasks .task .task-body .message .svg-inline--fa {
color: #5664FC;
}
.blue-circle {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.blue-circle .inner-circle {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.orange {
background-color: #F76C4F;
}
.color-orange {
color: #F76C4F !important;
border-color: #F76C4F;
stop-color: #F76C4F;
}
.light-orange {
background-color: rgba(247, 108, 79, .3) !important;
}
.yellow {
background-color: #DF9E13 !important;
}
.color-yellow {
color: #DF9E13 !important;
border-color: #DF9E13;
stop-color: #DF9E13;
}
.light-yellow {
background-color: rgba(223, 158, 19, .3);
}
.bright-yellow {
background-color: #E2C500;
}
.color-bright-yellow {
color: #E2C500 !important;
border-color: #E2C500;
stop-color: #E2C500;
}
.light-bright-yellow {
background-color: rgba(226, 197, 0, .3);
}
.blue {
background-color: #4F86F7;
}
.color-blue {
color: #4F86F7 !important;
border-color: #4F86F7;
stop-color: #4F86F7;
}
.light-blue {
background-color: rgba(79, 134, 247, .3) !important;
}
.bright-blue {
background-color: #00C4FF;
}
.color-bright-blue {
color: #00C4FF !important;
border-color: #00C4FF;
stop-color: #00C4FF;
}
.light-bright-blue {
background-color: rgba(0, 196, 255, .3);
}
.primary {
background-color: #4F86F7;
}
.black {
background-color: #000;
}
.color-black {
color: #000 !important;
border-color: #000;
stop-color: #000;
}
.light-black {
background-color: rgba(0, 0, 0, .3);
}
.navy {
background-color: #2C698D;
}
.color-navy {
color: #2C698D !important;
border-color: #2C698D;
stop-color: #2C698D;
}
.light-navy {
background-color: rgba(44, 105, 141, .3);
}
.green {
background-color: #35C724;
}
.color-green {
color: #35C724 !important;
border-color: #35C724;
stop-color: #35C724;
}
.light-green {
background-color: rgba(53, 199, 36, .3);
}
.red {
background-color: #F74F4F;
}
.color-red {
color: #F74F4F !important;
border-color: #F74F4F;
stop-color: #F74F4F;
}
.light-red {
background-color: rgba(247, 79, 79, .3);
}
@media all and (max-width: 620px) {
.advance .widget-box .tasks .task .task-body .date {
font-size: 10px;
}
.advance .widget-box .tasks .task .task-body .date .icon .svg-inline--fa {
font-size: 9px;
}
.advance .widget-box .tasks .task .task-body .task-item .message-body {
padding: 10px;
}
}
/*end advance*/
/*start login*/
.login {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.login .background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
z-index: -1;
}
.login .background .left {
flex: 1;
background-color: var(--primary-color);
}
.login .background .right {
flex: 1;
background-color: rgba(23, 140, 175, .15);
}
.login .content {
display: flex;
flex-wrap: wrap;
width: 70%;
min-height: 80vh;
border-radius: 15px;
overflow: hidden;
animation: stretch .6s ease-out 0s alternate none running;
}
.login .content .img-side {
flex: 1;
padding: 20px;
background-image: url('../imgs/login.png');
background-size: cover;
opacity: .7;
border-radius: 15px 0 0 15px;
}
.login .content .form-side {
flex: 1;
padding: 20px;
background-color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 0 15px 15px 0;
}
.login .content .form-side .heading {
justify-content: center;
align-items: center;
}
.login .content .form-side .heading .logo img {
width: 150px;
}
.login .form-side .inputs {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.login .form-side .input-container {
margin: 0;
position: relative;
width: 100%;
}
.login .form-side .input-container label {
display: block;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
margin-bottom: 10px;
}
.login .form-side .input-container input {
width: 100%;
padding: 7px;
border: none;
outline: none;
border: 1px solid #707070;
border-radius: 5px;
background-color: #FFF;
}
.login .form-side .input-container input[type="submit"] {
color: #FFF;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background-color: var(--primary-color);
border: none;
outline: none;
}
.login .form-side .input-container .icon {
position: absolute;
bottom: -5px;
transform: translateY(-50%);
right: 15px;
cursor: pointer;
color: #707070;
}
html[dir="rtl"] .login .form-side .input-container .icon {
right: unset;
left: 15px;
}
.login .form-side .input-container .dropdown-toggle {
background-color: #FFF;
min-width: unset;
padding: 10px;
border: none;
border-radius: 5px;
color: #605858;
box-sizing: border-box;
justify-content: space-between;
border: 1px solid #707070;
}
.login .form-side .input-container .dropdown-toggle::after {
margin-inline-start: 3em;
}
.login .form-side .input-container .dropdown-menu {
max-height: 150px;
}
.login .remember {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.login .remember .form-check input {
border: 2px solid #000;
}
.login .remember .form-check label {
color: #000;
}
.login .remember a {
color: #000;
}
@media screen and (max-width: 992px) {
.login .content .img-side {
display: none;
}
.login .content {
width: 95%;
}
.login .content .form-side {
border-radius: 15px;
}
}
@media screen and (max-width: 450px) {
.remember {
flex-direction: column;
}
}
/*end login*/
/*start custom*/
.table-striped > tbody > tr:nth-of-type(odd) {
--bs-table-accent-bg: unset;
}
.calendars-ctrl {
background-color: var(--primary-color) !important;
}
.calendars a:hover {
color: #FFF;
background-color: #F5BC1C !important;
}
.popupDatepicker {
background-image: url(../../imgs/calender.png);
background-position: calc(100% - 10px) 10px;
background-size: 20px;
background-repeat: no-repeat;
}
:root[dir="rtl"] .popupDatepicker {
background-position: 10px 10px;
}
.hasCalendarsPicker {
background-image: url(../../imgs/calender.png);
background-position: calc(100% - 10px) 10px;
background-size: 20px;
background-repeat: no-repeat;
}
:root[dir="rtl"] .hasCalendarsPicker {
background-position: 10px 10px;
}
.btn-secondary {
color: #fff;
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
.pagination {
display: table-row;
}
.pagination table tr {
display: flex;
align-items: center;
gap: 10px;
}
.pagination table td,
.currency .table-bordered tr:last-child td {
padding: 5px 10px;
border-radius: 5px;
color: var(--secondary-color);
cursor: pointer;
}
.pagination table td:hover,
.pagination span,
.currency .table-bordered tr:last-child span {
color: #FFF;
background-color: var(--primary-color);
padding: 5px 10px;
border-radius: 5px;
}
.pagination table td:hover a {
color: #FFF;
}
.alert-errorM {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.alert-information {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.alert-attention {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
/*end custom*/
/* Start of Logix community*/
html {
--box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.08);
--box-shadow-hover: 0px 0px 25px 0px rgba(0, 0, 0, 0.2);
--date-color: rgba(36, 36, 36, 0.50);
--divider: rgba(36, 36, 36, 0.5);
--searchBar: #f7f7f7;
}
html[dark="true"] {
--box-shadow: 0px 0px 25px 0px rgba(255, 255, 255, 0.08);
--box-shadow-hover: 0px 0px 25px 0px rgba(255, 255, 255, 0.2);
--date-color: rgba(186, 186, 186, 0.5);
--divider: rgba(225, 225, 225, 0.5);
--searchBar: #3b3b3b;
}
.shadowed-rounded-box {
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: var(--box-shadow);
padding: 1rem;
border-radius: 8px;
margin: 0 !important;
transition: 0.3s all;
}
a.shadowed-rounded-box {
cursor: pointer;
}
.shadowed-rounded-box:hover {
box-shadow: var(--box-shadow-hover);
}
.btn.notification {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
background-color: #EC9A20;
border-radius: 8px;
color: #Fff;
border: 1px solid #707070;
margin-block-start: auto;
}
.btn.notification:hover {
background-color: #fff;
color: #EC9A20;
border-color: #EC9A20;
}
.icon-container {
padding: 1.5rem;
}
.icon-container:has(svg) {
width: 120px
}
.nav-content .nav-link {
color: rgba(var(--text-color-rgb), 0.8);
}
span.notification_title {
font-size: 22px;
font-weight: 600;
color: var(--text-color);
}
span.notification_badge {
border-radius: 4px;
background-color: #EF1111;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
min-width: 28px;
aspect-ratio: 1 / 1;
}
.icon-container svg {
width: 100%;
height: 100%
}
p.notification_subtitie {
font-weight: 500;
color: var(--text-color);
}
.flex-1 {
flex: 1;
}
@media (max-width: 1024px) {
span.notification_title {
font-size: 28px
}
span.notification_badge {
font-size: 20px;
}
p.notification_subtitie {
font-size: 18px;
}
}
@media (max-width: 768px) {
.grid-2 {
grid-template-columns: 1fr;
gap: 20px;
}
}
.banner_cotnainer {
background-image: linear-gradient(to right, #0585A0, #289BB0);
height: 240px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
overflow: hidden;
}
.banner_cotnainer img {
object-fit: contain;
height: 100%;
width: auto;
}
.news-title {
font-size: 22px;
font-weight: 600;
color: var(--text-color);
}
.news-subtitle {
font-size: 16px;
font-weight: 500;
color: var(--text-color);
}
.date {
font-weight: 500;
color: rgba(36, 36, 36, 0.50);
color: var(--date-color);
display: flex;
align-items: center;
gap: 4px;
}
.social-link svg {
transition: 0.3s all;
}
.social-link:hover svg {
filter: drop-shadow(3px 5px 2px var(--date-color));
transform: translateY(-0.25em);
}
.social-link:active svg {
filter: unset;
transform: translateY(0em);
}
.paragraph-list {
list-style-position: inside;
}
.news-paragraph,
.paragraph-list li {
color: var(--text-color);
font-size: 20px;
line-height: 30px;
margin-bottom: 15px;
}
.paragraph-list li::marker {
font-size: 14px;
}
.divider {
background-color: var(--divider);
}
.comments {
display: flex;
flex-direction: column;
gap: 20px;
}
.comments .comment {
border-radius: 8px;
padding: 20px;
box-shadow: var(--box-shadow);
display: flex;
align-items: center;
gap: 30px;
margin: 0 !important;
}
.comment span {
font-size: 20px;
font-weight: 500;
color: var(--text-color);
}
.comment span.comment-text {
color: var(--text-color);
opacity: 0.5;
}
.comment_img-container {
aspect-ratio: 1/1;
width: 100px;
border-radius: 50%;
border: 1px solid #0585A0;
display: flex;
justify-content: center;
align-items: center;
}
.comment_img-container img {
object-fit: cover;
width: 100%;
height: auto;
}
.new-comment {
justify-content: space-between;
gap: 0;
}
.new-comment:has(input:focus) {
outline: 1px solid #0585A0;
}
.new-comment input {
border: unset;
outline: unset;
color: var(--text-color);
font-size: 20px;
}
.new-comment input::placeholder {
color: rgba(36, 36, 36, 0.5);
}
.send-comment {
background-color: #0585A0;
}
.send-comment:hover {
border-color: #0585A0;
background-color: #fff;
}
.send-comment:hover path {
stroke: #0585A0;
}
@media (max-width: 768px) {
.news-paragraph,
.paragraph-list li,
.new-comment input,
.comment span {
font-size: 18px;
}
.comments .comment {
padding: 10px;
}
.banner_cotnainer {
height: 250px !important;
}
}
.yellow-title {
font-size: 23px;
font-weight: 500;
color: #EEA520;
margin-bottom: 0px;
}
.logix-notification-day {
font-size: 28px;
font-weight: 700;
line-height: 37px;
}
.page-main {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: var(--body-color);
}
footer {
margin-top: auto;
}
.versions {
display: flex;
flex-direction: column;
align-items: stretch;
}
.version {
flex: 1;
display: grid;
grid-template-columns: 400px 1fr;
gap: 30px;
border-radius: 8px;
box-shadow: var(--box-shadow);
padding: 1rem;
}
.version-details {
flex: 1;
display: flex;
flex-direction: column;
}
.version-details__header {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.version-details__title {
font-weight: 600;
color: var(--text-color);
}
.version-details__body {
margin-bottom: 40px;
font-weight: 500;
color: var(--text-color);
}
.version-details__footer {
margin-top: auto;
}
@media (max-width: 991px) {
.version {
grid-template-columns: 300px 1fr;
gap: 20px;
}
.version-details__header {
flex-direction: column;
align-items: flex-start;
}
.version-details__date {
align-self: flex-end;
}
.version-details__title {
font-size: 20px;
}
.version-details__body {
font-size: 18px;
}
}
@media (max-width: 768px) {
.version {
grid-template-columns: 1fr;
}
}
.seeMore {
display: flex;
align-items: center;
gap: 1rem;
color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.seeMore:hover {
color: #fff;
background-color: var(--primary-color);
}
.btn[href="#newComment"] {
color: #0585A0;
font-size: 20px;
font-weight: 500;
}
.btn[href="#newComment"]:hover {
background-color: #0585A0;
color: #fff;
}
.theme-text {
color: var(--text-color);
}
.forum-subjects .subject {
display: grid;
grid-template-columns: 180px 1fr;
gap: 35px;
}
.avatar-container {
aspect-ratio: 1/1;
width: 40px;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.see-comment {
display: flex;
align-items: center;
gap: 20px;
color: #0D95AE;
}
.see-comment .text-gray {
color: var(--bs-gray);
opacity: 0.5;
}
.see-comment:hover {
background-color: #0D95AE;
color: #fff;
}
.see-comment:hover .text-gray {
opacity: 1;
color: #fff;
}
@media (max-width: 991px) {
.forum-subjects .subject {
grid-template-columns: 150px 1fr;
}
.forum-subjects .subject {
gap: 20px;
}
}
@media (max-width: 600px) {
.forum-subjects .subject {
grid-template-columns: 1fr;
}
.img-container {
width: 150px;
}
}
.searchBar {
display: flex;
flex-direction: column;
background-color: var(--searchBar);
border-radius: 8px;
padding: 15px;
}
.searchInput {
padding: 10px;
border: 0;
}
.customButton {
background-color: var(--primary-color);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.customButton:hover {
background-color: #fff;
color: var(--primary-color) !important;
border-color: var(--primary-color);
}
.searchButton {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
background-color: var(--primary-color);
color: #fff;
transition: 0.3s all;
}
.searchButton:hover {
transform: translateY(-50%);
}
/* end of Logix community*/
/* The Modal (background) */
/*.modal {
display: none;*/
/* Hidden by default */
/*position: fixed;*/
/* Stay in place */
/*z-index: 1;*/
/* Sit on top */
/*padding-top: 100px;*/
/* Location of the box */
/*left: 0;
top: 0;
width: 100%;*/
/* Full width */
/*height: 100%;*/
/* Full height */
/*overflow: auto;*/
/* Enable scroll if needed */
/*background-color: rgba(0, 0, 0, 0.4);*/
/* Black w/ opacity */
/*margin: 0 !important;
}*/
/* Modal Content */
/* .modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 55%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} */
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*
.modal-header {
padding: 16px;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
} */
/* .modal-body {
padding: 16px;
}
.modal-footer {
padding: 16px;
} */
/* Add this style for the X button */
.close-button {
background: #238CAF;
border: 1px solid #238CAF;
color: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
}
.close-button:hover {
background: #fff;
color: #238CAF;
}
/* Add this style for the footer buttons */
.footer-buttons {
display: flex;
justify-content: flex-end;
padding: 10px 16px;
gap: 10px;
}
/* Add this style for the "����� �������" button */
.submit-button {
margin-left: 10px;
/* Adjust margin as needed */
background-color: #238CAF;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
/* Add this style for the "�����" button */
.close-footer-button {
background-color: #238CAF;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.evaluation-question {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.evaluation-question p {
margin: 0;
font-weight: 500;
}
.evaluation input[type="radio"] {
display: none;
/* ����� ������� ������ */
}
.evaluation label {
cursor: pointer;
color: grey;
/* ��� ������ */
font-size: 20px;
/* ��� ������ */
}
.evaluation input[type="radio"]:checked ~ label {
color: gold;
/* ��� ������ ��� �������� */
}
.star-rating-container {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.stars-rating {
display: flex;
align-items: center;
}
.stars-rating-value {
font-weight: 500;
margin: 0;
}
.star {
font-size: medium;
width: 15px;
display: inline-block;
color: gray;
}
.star:last-child {
margin-right: 0;
}
.star:before {
content: '\2605';
}
.star.on {
color: gold;
}
.star.half:after {
content: '\2605';
color: gold;
position: absolute;
margin-right: -13px !important;
width: 6.66px;
overflow: hidden;
}
/*-------------New Theme--------------------*/
.greeting {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
color: var(--text-color);
}
header.header {
background-color: #EBF1F2;
padding: 12px;
margin: 10px 20px;
border-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
header.header .logo {
width: 120px;
}
.main-content {
display: flex;
flex-direction: column;
padding: 0 25px;
margin-bottom: 25px;
}
.page-info {
margin-top: 20px;
padding: 0 25px;
}
.statistics_container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
@media (min-width:991px) {
.greeting,
.statistics_container {
margin-bottom: 40px;
}
.page-info {
margin-top: 40px;
padding-inline: 50px;
}
.main-content {
padding: 0 50px;
margin-bottom: 50px;
}
header.header {
margin: 20px 50px;
}
header.header .logo {
width: 250px;
}
.widget-box {
margin-bottom: 40px;
}
}
.statistics_container > .statistics_card {
position: relative;
flex: 1 1 280px;
background-color: var(--primary-color);
border-radius: 16px;
padding: 30px;
overflow: hidden;
}
.statistics_container > .statistics_card::before {
position: absolute;
content: "";
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.statistics_container > .statistics_card.card1::before {
background-image: linear-gradient(to left, var(--primary-color), rgba(var(--primary-color-rgb), 1));
}
.statistics_container > .statistics_card.card2::before {
background-image: linear-gradient(to left, var(--secondary-color), rgba(var(--secondary-color-rgb), 1));
}
.statistics_container > .statistics_card.card3::before {
background-image: linear-gradient(to left, var(--third-color), var(--third-color));
}
.statistics_container > .statistics_card .content {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
position: relative;
z-index: 2;
}
.statistics_container > .statistics_card .content .data {
display: flex;
flex-direction: column;
color: #fff;
font-size: 18px;
}
.statistics_container > .statistics_card .content .icon_container {
display: flex;
justify-content: center;
align-items: center;
font-size: 45px;
color: #fff;
}
.statistics_container > .statistics_card .content .data span:first-child {
font-size: 30px;
font-weight: bold;
}
.widget-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
}
.buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.widget-header .buttons {
justify-content: flex-end;
}
.widget-header:not(.borderless) {
border-bottom: 1px solid var(--border-color);
}
.widget-title {
font-size: 18px;
font-weight: bold;
}
.widget-body {
padding-top: 16px;
flex: 1;
}
.table-container {
overflow: auto;
border-radius: 8px;
}
.table {
width: 100% !important;
border-collapse: collapse;
white-space: nowrap;
margin-bottom: 0;
border-width: 0;
}
.table th,
.table th a {
color: #fff;
}
.table :is(td, th) {
text-align: center;
padding: 12px;
border: 0;
}
.table tbody tr {
--bs-table-border-color: transparent;
border-width: 0;
}
.table tbody tr:first-child {
border-top: 0;
}
.table tbody tr:last-child {
border-bottom: 0;
}
.table-container.full-bg .table {
--bs-table-bg: #EBF1F2;
}
.table tbody tr:last-child {
border-color: transparent;
}
.table.table-striped {
--bs-table-border-color: transparent;
}
div.table-container:not(.full-bg) .table.table-striped .thead {
--bs-table-bg: var(--primary-color);
--bs-table-color: #fff
}
div.table-container:not(.full-bg) .table.table-striped .thead :is(th, th a) {
color: #fff;
}
.table.table-striped tbody tr:nth-child(odd) {
--bs-table-striped-bg: #fff;
}
.table.table-striped tbody tr:nth-child(even) {
--bs-table-bg: #EBF1F2;
}
:root[dark="true"] .table.table-striped tbody tr:nth-child(even) {
--bs-table-bg: #585858;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
border: 1px solid transparent;
outline: unset;
padding: 0.7rem;
border-radius: 8px;
transition: 0.2s all;
cursor: pointer;
transition: 0.2s all;
font-size: 16px;
color: #fff !important;
}
.button [class*="caret-down"]{
transition: 0.2s all
}
.button.active [class*="caret-down"] {
transform: rotate(180deg)
}
.button:hover {
transform: translateY(-0.25em);
color: #fff !important;
}
.button:active {
transform: translateY(0em);
color: #fff !important;
}
.button.button-primary {
background-color: var(--primary-color);
color: #fff !important;
}
.button.button-secondary {
background-color: var(--secondary-color);
color: #fff !important;
}
.button.button-third {
background-color: var(--third-color);
color: #fff !important;
}
.button.button-outlined {
border-color: var(--primary-color);
color: var(--primary-color) !important;
background-color: transparent;
backdrop-filter: blur(10000px);
}
.button-outlined:hover,
.button-outlined:active {
color: var(--primary-color);
}
.table tbody td div.status {
display: inline-block;
padding: 4px;
border-radius: 8px;
background-color: var(--status-bg);
color: var(--status-color);
}
.table tbody td div.status.new {
--color: 23, 212, 121;
--status-color: rgb(var(--color));
--status-bg: rgba(var(--color), 0.1);
}
.table tbody td div.status.reject {
--color: 235, 87, 87;
--status-color: rgb(var(--color));
--status-bg: rgba(var(--color), 0.1);
}
.table tbody td div.status.accept {
--status-color: rgb(var(--primary-color-rgb));
--status-bg: rgba(var(--primary-color-rgb), 0.1);
}
.table tbody td div.status.ok {
--status-color: #fff;
--status-bg: rgba(var(--third-color-rgb), 1);
}
.link {
transition: 0.2s all;
color: var(--secondary-color);
display: inline-block;
}
.link:hover {
transform: translateY(-0.25em);
}
.link:active {
transform: translateY(0em);
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
gap: 10px;
font-weight: bold;
font-size: 18px;
margin-bottom: 20px;
}
.breadcrumb-item:not(:last-child)::after {
display: inline-block;
margin-inline-start: 10px;
content: "\2039";
transform: rotate(180deg) translateY(-3px);
}
.breadcrumb .breadcrumb-item .breadcrumb-link {
color: inherit;
text-decoration: none;
}
.breadcrumb .breadcrumb-item {
position: relative;
color: var(--primary-color);
display: flex;
align-items: center;
}
.breadcrumb .breadcrumb-item:last-child {
font-weight: 500;
color: var(--text-color);
}
.breadcrumb .breadcrumb-item:last-child .breadcrumb-link {
pointer-events: none;
cursor: auto;
}
.breadcrumb-item + .breadcrumb-item::before {
display: none;
}
.info-dashboard-cards {
display: grid;
gap: 14px;
}
.info-dashboard-cards .card {
padding: 20px;
border-radius: 12px;
border: 1px solid var(--main-color);
font-weight: bold;
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.info-dashboard-cards .card .header {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.info-dashboard-cards .card .header .icon-container {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--main-color);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.info-dashboard-cards .card .body {
color: var(--main-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.info-dashboard-cards .card.dark-green {
--main-color: #00525A;
}
.info-dashboard-cards .card.red {
--main-color: #EB5757;
}
.info-dashboard-cards .card.light-green {
--main-color: #0E7953;
}
.all-projects-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.all-projects-cards .project-card {
background-color: var(--widget-color);
border-radius: 16px;
padding: 16px;
font-weight: 500;
}
@media (min-width: 991px) {
.all-projects-cards {
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}
}
.all-projects-cards .project-card .project-card-header {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
align-items: center;
padding-block: 8px 20px;
border-bottom: 1px solid var(--border-color);
}
.all-projects-cards .project-card .project-card-header .title {
color: var(--text-color);
}
.all-projects-cards .project-card .project-card-header .status {
padding: 4px;
border-radius: 8px;
color: rgba(var(--main-color), 1);
background-color: rgba(var(--main-color), 0.1);
}
.all-projects-cards .project-card .project-card-header .status.green {
--main-color: 23, 212, 121;
}
.all-projects-cards .project-card .project-card-header .status.red {
--main-color: 235, 87, 87;
}
.all-projects-cards .project-card .project-card-body {
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
color: rgba(var(--text-color-rgb), 0.6);
}
.all-projects-cards .project-card .project-card-body .period {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.all-projects-cards .project-card .project-card-body .value {
font-weight: bold;
font-size: 18px;
color: var(--primary-color);
}
.all-projects-cards .project-card .project-card-body .progress {
all: unset;
display: flex;
flex-direction: column;
gap: 10px;
}
.all-projects-cards .project-card .project-card-body .progress-chart-container {
width: 100%;
height: 7px;
border-radius: 10px;
overflow: hidden;
background-color: rgba(36 36 36 / 0.03);
}
.all-projects-cards .project-card .project-card-body .progress-chart-container .progress-chart {
height: 100%;
background-color: #17D479;
border-radius: 10px;
}
.all-projects-cards .project-card .project-card-body .button {
width: fit-content;
}
@media (min-width: 600px) {
.info-dashboard-cards {
grid-template-columns: repeat(2, 1fr);
}
.info-dashboard-cards .span2 {
grid-column: span 2;
}
}
@media (min-width: 991px) {
.widget-box {
padding: 18px;
}
.widget-body {
padding-top: 30px;
}
.breadcrumb {
margin-bottom: 40px;
}
.info-dashboard-cards {
grid-template-columns: repeat(5, 1fr);
}
}
.project_summary_data {
display: grid;
background-color: #fff;
padding: 1rem;
border-radius: 16px;
}
.project_summary_data .project_summary {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
.project_summary_data .project_summary .title {
font-weight: bold;
color: var(--secondary-color);
}
.project_summary_data .project_summary .value {
font-weight: 500;
color: rgba(var(--text-color-rgb), 0.6);
}
@media (max-width: 820px) {
.project_summary_data {
gap: 10px;
}
.project_summary_data .project_summary:not(:last-child) {
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
}
}
@media (min-width: 821px) {
.project_summary_data {
gap: 50px;
}
.project_summary_data .project_summary {
gap: 50px;
}
.project_summary_data {
grid-template-columns: repeat(3, 1fr);
}
.project_summary_data .project_summary:not(:last-child) {
border-inline-end: 1px solid var(--border-color);
}
}
.nav-tabs {
width: fit-content;
border: unset;
padding: 2px;
background-color: #efeff0;
border-radius: 8px;
}
.nav-tabs .nav-link {
border: unset;
border-radius: 8px;
height: 100%;
color: var(--text-color);
font-weight: bold;
}
.nav-tabs .nav-link.active {
color: var(--primary-color);
box-shadow: 0 3px 8px 0 rgba(0 0 0 / 0.12);
}
.operations-inputs {
display: grid;
gap: 15px;
margin-bottom: 20px;
}
.full-input {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 20px;
}
@media (min-width: 991) {
.operations-inputs,
.full-input {
margin-bottom: 40px;
}
}
.input-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-container label {
font-size: 14px;
font-weight: bold;
}
:is(select:not([class*='calendars']), input:not([type="checkbox"], [type="submit"]), textarea) {
background-color: var(--input-color);
border: unset;
padding: 8px;
border-radius: 8px;
transition: 0.2s all;
color: var(--text-color);
}
:is(select, input:not([type="checkbox"]), textarea):focus {
outline-color: rgba(36 36 36 / 0.2);
}
:is(select, input:not([type="checkbox"]), textarea)::placeholder {
color: rgba(36 36 36 / 0.6);
font-size: 14px;
font-weight: bold;
}
.operations-inputs .buttons {
display: grid;
gap: 10px;
align-self: end;
}
.two-inputs {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.two-inputs-reverse {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 10px;
}
@media (min-width: 768px) {
.operations-inputs {
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}
.operations-inputs .buttons {
grid-template-columns: repeat(2, 1fr);
}
}
.no_results {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-weight: 500;
color: rgba(var(--text-color-rgb), 0.6);
font-size: 18px;
}
.title-desc {
display: block;
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
}
.requests_slider {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1px;
overflow: hidden;
border-radius: 8px;
}
.requests_slider .request {
font-weight: bold;
padding: 15px;
flex: 1 1 300px;
background-color: #EBF1F2;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
text-decoration: none;
color: var(--secondary-color);
transition: 0.3s all;
}
.requests_slider .request:hover {
background-color: #cfdcde;
}
.requests_slider .request:active {
background-color: #dfecee;
}
.footer {
margin-top: auto;
background-color: #EBF1F2;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 16px;
}
.TblTotal {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 600px) {
.TblTotal {
grid-template-columns: 250px;
}
}
.input-container span.name {
font-size: 14px;
font-weight: bold;
color: var(--primary-color);
}
.input-container span.value {
background-color: var(--input-color);
padding: 8px;
border-radius: 8px;
display: block;
width: 100%;
}
.alert > button.close {
display: none;
}
ol {
list-style-position: inside;
}
.reply-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.RadGrid_Default .rgCommandCell,
.RadGrid_Default .rgHeader {
background-image: unset !important;
background-color: var(--primary-color) !important;
color: #fff !important;
}
.RadGrid_Default .rgHeader a {
color: #fff !important;
}
.RadGrid_Default {
border-width: 0 !important;
background-color: transparent !important;
}
.RadGrid_Default td {
border-width: 0 !important;
}
.RadGrid_Default .rgAltRow {
background: #EBF1F2 !important;
}
:root[dark="true"] .RadGrid_Default .rgAltRow {
background: #585858 !important;
}
.calendars-month-header select option {
color: #000 !important;
}
.search-restuls {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-color);
}
.dropdown-menu.operations {
background-color: var(--widget-color);
padding: 8px;
}
.dropdown-menu.operations.show {
display: flex;
justify-content: center;
gap: 8px;
}
.color-primary {
color: var(--primary-color) !important;
border-color: var(--primary-color);
stop-color: var(--primary-color);
}
.light-primary {
background-color: rgba(var(--primary-color-rgb), .3);
}
.nav-content > div:hover .nav-content .dropdown-toggle,
.nav-content .home a {
color: rgba(var(--text-color-rgb), 0.5);
font-weight: 500;
}
.nav-content > div:hover,
.nav-content > div.active {
background-color: var(--primary-color);
}
.nav-content > div:hover > .dropdown-toggle,
.nav-content > div.active > .dropdown-toggle,
.nav-content > div:hover > a,
.nav-content > div.active > a {
color: #fff;
}
[class*="grid"] {
display: grid;
gap: 20px;
}
@media(min-width:768px) {
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
grid-template-columns: repeat(2, 1fr);
}
.grid-2.items-container:not(.active) > *:nth-child(n+3) {
display: none;
}
.span2,
.span3,
.span4,
.span5,
.span6 {
grid-column: span 2;
}
}
@media(min-width:821px) {
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
grid-template-columns: repeat(3, 1fr);
}
.grid-3.items-container:not(.active) > *:nth-child(n+4) {
display: none;
}
.span3,
.span4,
.span5,
.span6 {
grid-column: span 3;
}
}
@media(min-width:991px) {
.grid-4,
.grid-5,
.grid-6 {
grid-template-columns: repeat(4, 1fr);
}
.grid-4.items-container:not(.active) > *:nth-child(n+5) {
display: none;
}
.span4,
.span5,
.span6 {
grid-column: span 4;
}
}
@media(min-width:1200px) {
.grid-5,
.grid-6 {
grid-template-columns: repeat(5, 1fr);
}
.grid-5.items-container:not(.active) > *:nth-child(n+6) {
display: none;
}
.span5,
.span6 {
grid-column: span 5;
}
}
@media(min-width:1336px) {
.grid-6 {
grid-template-columns: repeat(6, 1fr);
}
.grid-6.items-container:not(.active) > *:nth-child(n+7) {
display: none;
}
.span6 {
grid-column: span 6;
}
}
.widget-title.title-mark {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.widget-title.title-mark::before {
content: "";
display: block;
height: 50px;
width: 10px;
background-color: var(--primary-color);
border-radius: 8px;
}
.modal-content {
background-color: var(--widget-color);
}
.modal-header {
border-bottom: 0;
}
.modal-footer {
border-top: 0;
}
.modal-title {
font-size: 18px;
font-weight: 500;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1;
}
.modal-title .sub-title {
font-size: 14px;
color: #8A8A8A;
}
.btn-close {
background: transparent url("/assets/V2/client_portal/close-black.svg") center/1em auto no-repeat;
}
:root[dark="true"] .btn-close {
background: transparent url("/assets/V2/client_portal/close-white.svg") center/1em auto no-repeat;
}
:is(select, input:not([type="checkbox"], [type="submit"]), textarea).input-2 {
border: 1px solid rgb(36, 36, 36, 0.1);
border-radius: 12px;
background-color: var(--body-color);
}
.product-widget {
padding: 12px;
border-radius: 8px;
box-shadow: var(--box-shadow);
display: flex;
gap: 12px;
}
.product-widget .product-image {
flex: 0 0 100px;
height: 100px;
border-radius: 8px;
overflow: hidden;
align-self: center;
}
.product-widget .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-widget .product-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.product-widget .product-content .product-title {
font-weight: 600;
font-size: 14px;
}
.product-widget .product-content .product-description {
font-size: 12px;
}
.product-widget .product-content .buttons {
margin-top: auto;
}
.box-shadow-unset{
box-shadow: unset;
}
.background-unset{
background: unset;
}
input[type="radio"] {
width: 18px;
height: 18px;
accent-color: var(--primary-color);
}
.button:not(:is(.close-button)) {
min-width: 150px;
}
input[type="checkbox"] {
width: 22px !important;
height: 22px;
}
.button.button-third {
background-color: var(--third-color);
color: #333333 !important;
}