Files
portal-api/public/lib/core/main.css
T
2025-07-24 16:18:27 +07:00

517 lines
11 KiB
CSS

.w-17 {
width: 17% !important;
}
.clients-summary__box {
background-color: #f4f4f4;
padding: 10px;
margin: 10px 0 5px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.clients-summary__box .title {
text-align: center;
padding: 0 0 10px 0;
font-size: 16px;
font-weight: bold;
color: #1A4D80;
}
.summary__box {
width: 100%;
border: 4px solid #fff;
border-radius: 4px;
background: white;
}
.summary__box td, .summary__box th {
padding: 2px 4px;
font-size: 13px;
}
.customer-profile__list .active {
border: 1px solid #a7a7a7;
padding: 5px 10px;
border-radius: 5px;
}
.table-invoice {
border-collapse: unset;
border: none;
}
.table-invoice th {
padding: 4px;
background-color: #1A4D80;
font-weight: bold;
text-align: center;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
color: white;
}
.table th, .table td {
padding: 2px 15px;
vertical-align: middle;
}
label {
margin: 0;
}
.fs-20 {
font-size: 20px !important;
}
table.form {
background-color: #fff;
margin: 0 0 5px 0;
padding: 0;
border: 3px solid #e2e7e9;
border-collapse: separate;
border-spacing: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
table.form td {
padding: 6px 10px;
}
table.form td.fieldlabel {
background-color: #fff;
text-align: right;
width: 25%;
}
table.form td.fieldarea {
background-color: #efefef;
text-align: left;
width: 25%;
}
.box-info__noted {
border: 1px solid #8FBCE9;
background: #ffffff;
color: #000000;
padding: 5px;
height: 300px;
overflow-y: scroll;
padding: 10px;
}
/* The container */
.box-input__checker {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.box-input__checker input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.box-input__checker input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.box-input__checker input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.box-input__checker .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.bg-customer {
background: #efefef;
}
.ticket-reply {
margin-bottom: 24px;
border: none;
background: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.ticket-reply.staff {
border-color: #d5e7fb;
}
.ticket-reply-top {
border-bottom: 1px solid #e6e8ec;
background: #fff;
padding: 10px 15px;
}
.ticket-reply .info {
display: flex;
justify-content: space-between;
font-size: 13px;
line-height: 18px;
color: #7c8088;
}
.ticket-reply.staff .user i {
color: #1062fe;
}
.ticket-reply .ticket-message {
padding: 25px 15px;
}
.sweet_loader {
width: 140px;
height: 140px;
margin: 0 auto;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: ro;
transform-origin: 50% 50%;
transform: rotate(0) translate(0, 0);
}
@keyframes ro {
100% {
transform: rotate(-360deg) translate(0, 0);
}
}
.thumbnail {
position: relative;
box-shadow: inset 0 0 15px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(0, 0, 0, .05);
background: #f0f0f1;
cursor: pointer;
padding: 20px;
height: 197px;
overflow: hidden;
}
.thumbnail.active {
border: 1px solid blue;
}
.btn-choice__thumb-func {
width: 100%;
height: 100%;
display: block;
}
.item {
padding: 13px 0;
white-space: nowrap;
overflow: hidden;
}
.item .data {
display: block;
font-size: 18px;
font-weight: bold;
}
.item .note {
font-size: .9em;
color: #a2a6af;
}
.bulk-btn {
align-items: center;
background-color: #206bc40a;
border-color: #206bc4;
border-radius: 4px;
border-style: solid;
border-width: 1px;
color: #206bc4;
display: inline-flex;
font-size: 14px;
font-weight: 500;
justify-content: center;
line-height: 20px;
padding: 9px 16px;
text-align: center;
}
.dark-btn {
background-color: #fff;
border-color: #aab2bf;
color: #182433;
}
.input-group-text {
background-color: unset;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: unset;
}
.rounded-left-0 {
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
}
.input-focus:focus,
.input-focus:focus ~ .input-group-text,
.input-group-flat:focus-within .input-group-text {
border: none !important;
}
.input-group-flat:focus-within {
border-radius: 4px;
box-shadow: 0 0 0 .25rem rgb(208 223 240)
}
.preview-image-wrapper {
border: 1px solid #dce1e7;
border-radius: 8px;
overflow: hidden;
}
.preview-image-wrapper .preview-image-inner {
overflow: hidden;
padding-top: 100%;
position: relative;
width: 100%;
}
.preview-image-wrapper .preview-image-inner .image-box-actions {
height: 100%;
inset: 0;
position: absolute;
width: 100%;
z-index: 11;
}
.preview-image-wrapper .preview-image-inner .preview-image {
height: 100%;
inset: 0;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
width: 100%;
}
.preview-image-wrapper .preview-image-inner img.default-image {
padding: 10px;
}
.preview-image-wrapper .preview-image-inner .image-picker-backdrop {
inset: 0;
position: absolute;
transition: .3s;
}
.preview-image-wrapper .preview-image-inner:hover .image-picker-backdrop {
background-color: rgba(0, 0, 0, .5);
height: 100%;
width: 100%;
z-index: 9;
}
button.btn-sm.image-picker-remove-button.p-0 {
position: absolute;
z-index: 10;
top: 0;
background: none;
right: 0;
border: none;
width: 30px;
height: 30px;
}
button.btn-sm.image-picker-remove-button.p-0 i {
color: white;
}
.slug-actions {
cursor: pointer;
}
.spinner {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: 20px;
}
.loader {
color: #166fd4;
text-indent: -9999em;
overflow: hidden;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.widget-content-padded {
padding: 20px;
max-height: 350px;
overflow: auto;
}
.widget-activity .widget-content-padded {
padding: 10px 20px;
font-size: .9em;
}
.widget-activity .feed-element {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.pull-right {
float: right !important;
}
.info-box {
cursor: pointer;
}
.widget-staff-container .staff {
padding: 5px 10px;
width: 25%;
min-width: 130px;
float: left;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: 400 !important;
vertical-align: middle;
cursor: pointer;
}
.list-permission {
flex-wrap: wrap;
gap: 10px;
}
.list-permission > li {
width: calc(100% /3.3);
}