/* res-sf:css.uzone (172.16.19.168-9) */
/* res-css.uzone */
:root {
--primary-color: #1890FF;
--primary-darker-color: #096DD9;
--secondary-color: #D9D9D9;
--danger-color: #FF4D4F;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 5px;
}
body,
input,
option,
button,
td {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 400;
}
body {
background-color: #f0f2f5;
}
h1.page-title {
margin-top: -10px !important;
}
a {
text-decoration: none;
color: var(--primary-darker-color);
}
/* header */
.wp-header {
width: auto;
height: 45px;
padding: 7px 24px;
margin: -10px;
background-color: #FFF;
position: sticky;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}
.wp-title {
margin-top: -35px;
margin-left: 250px;
}
.wp-logo {
height: 45px;
margin-right: 20px;
}
/* navbar */
.nav {
height: calc(100vh - 60px);
width: 250px;
left: 0px;
top: 58px;
border-radius: 0px;
position: absolute;
background-color: #FFF;
overflow: auto;
}
.nav>ul>li {
left: 0px;
top: 121px;
border-radius: 0px;
padding: 10px 0 10px 20px;
cursor: pointer;
list-style-type: "";
margin-left: -40px;
}
.nav>ul>li.active,
.nav>ul>li:hover {
background: rgba(230, 247, 255, 1) !important;
border-right: 2px solid #1890FF;
}
.nav>ul>li>svg {
margin-bottom: -3px;
}
/* content */
.body-content {
position: absolute;
left: 260px;
margin: 50px 10px 5px 0;
padding: 30px;
background-color: #fff;
border-radius: 10px;
width: calc(100% - 330px);
height: calc(100vh - 140px);
overflow: auto;
}
.loading-wrapper {
position: absolute;
left: 260px;
margin: 50px 10px 5px 0;
padding: 30px;
background-color: #fff;
border-radius: 10px;
width: calc(100% - 330px);
height: calc(100vh - 140px);
overflow: auto;
z-index: -1;
}
#loading-body-content {
border: 9px solid #f3f3f3;
/* Light grey */
border-top: 9px solid #3498db;
/* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
left: calc(100vw - 50% - 340px);
top: 40%;
position: absolute;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.body-content-full {
position: absolute;
left: 15px;
margin: 50px 10px 5px 0;
padding: 30px;
background-color: #fff;
border-radius: 10px;
width: calc(100vw - 90px);
height: calc(100vh - 150px);
overflow: auto;
}
/* tables */
table.table {
width: 100%;
border-spacing: 0;
padding-top: 5px;
}
table.table td {
font-size: 14px;
}
table.table td,
table.table th {
padding: 5px 10px;
}
table.table.table-bordered td,
table.table.table-bordered th {
border: 1px solid rgba(0, 0, 0, 0.06);
vertical-align: top;
/* width: 1%; */
white-space: nowrap;
}
table.table.table-bordered>thead tr:last-child th:first-child {
border-top-left-radius: 10px;
}
table.table.table-bordered>thead tr:last-child th:last-child {
border-top-right-radius: 10px;
}
thead {
background-color: #E6EBF7;
font-size: 14px;
}
table.table>tbody tr:hover {
background: #DCDDE0 !important;
}
table.table>tbody tr:active {
border-right: 2px solid #1890FF;
}
table.table>tbody tr:nth-child(even) {
background: #F1F4F6
}
table.table>tbody tr:nth-child(odd) {
background: #FFF
}
table.table>thead tr.table-sticky-header {
background-color: #E6EBF7;
position: sticky;
top: -32;
z-index: 10;
}
/* texts */
.wp-text-right {
text-align: right;
}
.wp-text-center {
text-align: center;
}
.wp-text-left {
text-align: left;
}
.vn_text {
font-family: 'Sarabun' !important;
font-size: medium !important;
}
/* positioning */
.align-left {
float: left;
}
.align-right {
float: right;
}
/* forms */
.wp-form {
margin-bottom: 5px;
}
.wp-form label {
display: inline-block;
width: 150px;
}
.wp-code {
background-color: #000;
border-radius: 4px;
color: rgba(82, 196, 26, 1);
font-family: "Poppins";
padding: 16px;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"] {
height: 30px;
width: 160px;
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.5);
font-size: 14px;
}
input[type="number"] {
text-align: right;
}
/* input[type="text"]:disabled,
input[type="password"]:disabled {
border: 0;
background-color: #FFF;
} */
/* input[type="text"]:disabled,
input[type="password"]:disabled {
border: 0;
background-color: #FFF;
color: #000;
} */
input[type="checkbox"] {
/* height: 18px;
width: 18px; */
}
input[type="radio"] {
height: 18px;
width: 18px;
}
select {
height: 30px;
width: 160px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.5);
font-family: "Poppins";
}
option {
font-family: "Poppins";
}
textarea {
padding: 10px;
border-radius: 5px;
font-family: "Poppins";
font-size: 14px;
}
button,
input[type="button"] {
border-radius: 5px;
padding: 5px 10px;
border: 0px;
margin: 10px 0;
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 22px;
background-color: var(--secondary-color);
}
button:disabled,
button[disabled] {
background: linear-gradient(0deg, #D9D9D9, #D9D9D9), linear-gradient(0deg, #F5F5F5, #F5F5F5);
color: #00000040;
}
.wp-btn-primary {
background-color: var(--primary-color);
color: #FFF;
}
.wp-btn-primary:hover {
background-color: var(--primary-darker-color);
}
.wp-btn-secondary {
background-color: var(--secondary-color);
color: #000000D9;
}
.wp-btn-danger {
background-color: var(--danger-color);
color: #FFF;
}
.wp-checkbox {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 6px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.wp-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: var(--secondary-color);
border-radius: 5px;
}
.wp-checkbox:hover input:not(:checked)~.checkmark {
box-sizing: border-box;
border: 1px solid var(--primary-darker-color);
}
/* When the checkbox is checked, add a blue background */
.wp-checkbox input:checked~.checkmark {
background-color: #395EBC;
}
/* When the checkbox is checked, add a blue background */
.wp-checkbox input:disabled~.checkmark {
background-color: var(--secondary-color);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.wp-checkbox input:checked~.checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.wp-checkbox .checkmark:after {
left: 6px;
top: 2.5px;
width: 3px;
height: 7px;
border: solid white;
border-width: 0 3px 3px 0;
border-radius: 2px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* icon */
.fi {
border-radius: 50%;
border: 1px solid #ccc;
}
/* modal */
.modal {
display: none;
}
.popup {
position: absolute;
z-index: 5;
background-color: rgba(0, 0, 0, 0.6);
width: 100vw;
min-height: calc(100vh + 10px);
margin-top: -9px;
margin-left: -8px;
padding-bottom: 50px;
display: none;
}
.popup-content {
background-color: white;
width: 50%;
min-height: calc(100vh - 300px);
border-radius: 10px;
margin: auto;
margin-top: 50px;
display: none;
position: relative;
}
.popup-header {
padding: 30px 30px 50px 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
font-weight: 600;
}
.popup-body {
padding: 30px 30px 80px 30px;
overflow: auto;
height: calc(100vh - 270px);
}
.popup-footer {
position: absolute;
bottom: 1;
right: 10;
background-color: #FFFFFF;
display: block;
width: 98%;
text-align: right;
}
.popup-title {
float: left;
}
.popup-close {
float: right;
cursor: pointer;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
border-radius: 0px;
outline: none;
cursor: pointer;
padding: 14px 16px;
margin: 0px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* accordion */
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.accordion-panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.custom-tooltip {
position: relative;
cursor: pointer;
/* Changes cursor to indicate interactivity */
}
.custom-tooltip::before {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
/* Positions it above the element */
left: 50%;
transform: translateX(-50%) translateY(10px);
/* Styling */
background-color: #1e293b;
/* Dark slate color */
color: #ffffff;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.875rem;
padding: 8px 12px;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 100;
/* Animation preparation */
opacity: 0;
visibility: hidden;
transition: all 0.2s ease-out;
}
.custom-tooltip::after {
content: '';
position: absolute;
bottom: 105%;
left: 50%;
transform: translateX(-50%) translateY(10px);
/* Create the triangle */
border-width: 6px;
border-style: solid;
border-color: #1e293b transparent transparent transparent;
z-index: 100;
/* Animation preparation */
opacity: 0;
visibility: hidden;
transition: all 0.2s ease-out;
}
.custom-tooltip:hover::before,
.custom-tooltip:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
/* Moves it up slightly into place */
}
.progress {
display: flex;
height: 1.25rem;
overflow: hidden;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #007bff;
transition: width 0.6s ease;
}
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
.progress-bar-animated {
animation: progress-bar-stripes 1s linear infinite;
}
@keyframes progress-bar-stripes {
from {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
/* Plugins W3 */
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
.w3-badge,
.w3-tag {
background-color: #000;
color: #fff;
display: inline-block;
padding-left: 8px;
padding-right: 8px;
text-align: center
}
.w3-badge {
border-radius: 50%
}
/* Colors */
.w3-amber,
.w3-hover-amber:hover {
color: #000 !important;
background-color: #ffc107 !important
}
.w3-aqua,
.w3-hover-aqua:hover {
color: #000 !important;
background-color: #00ffff !important
}
.w3-blue,
.w3-hover-blue:hover {
color: #fff !important;
background-color: #2196F3 !important
}
.w3-light-blue,
.w3-hover-light-blue:hover {
color: #000 !important;
background-color: #87CEEB !important
}
.w3-brown,
.w3-hover-brown:hover {
color: #fff !important;
background-color: #795548 !important
}
.w3-cyan,
.w3-hover-cyan:hover {
color: #000 !important;
background-color: #00bcd4 !important
}
.w3-blue-grey,
.w3-hover-blue-grey:hover,
.w3-blue-gray,
.w3-hover-blue-gray:hover {
color: #fff !important;
background-color: #607d8b !important
}
.w3-green,
.w3-hover-green:hover {
color: #fff !important;
background-color: #4CAF50 !important
}
.w3-light-green,
.w3-hover-light-green:hover {
color: #000 !important;
background-color: #8bc34a !important
}
.w3-indigo,
.w3-hover-indigo:hover {
color: #fff !important;
background-color: #3f51b5 !important
}
.w3-khaki,
.w3-hover-khaki:hover {
color: #000 !important;
background-color: #f0e68c !important
}
.w3-lime,
.w3-hover-lime:hover {
color: #000 !important;
background-color: #cddc39 !important
}
.w3-orange,
.w3-hover-orange:hover {
color: #000 !important;
background-color: #ff9800 !important
}
.w3-deep-orange,
.w3-hover-deep-orange:hover {
color: #fff !important;
background-color: #ff5722 !important
}
.w3-pink,
.w3-hover-pink:hover {
color: #fff !important;
background-color: #e91e63 !important
}
.w3-purple,
.w3-hover-purple:hover {
color: #fff !important;
background-color: #9c27b0 !important
}
.w3-deep-purple,
.w3-hover-deep-purple:hover {
color: #fff !important;
background-color: #673ab7 !important
}
.w3-red,
.w3-hover-red:hover {
color: #fff !important;
background-color: #f44336 !important
}
.w3-sand,
.w3-hover-sand:hover {
color: #000 !important;
background-color: #fdf5e6 !important
}
.w3-teal,
.w3-hover-teal:hover {
color: #fff !important;
background-color: #009688 !important
}
.w3-yellow,
.w3-hover-yellow:hover {
color: #000 !important;
background-color: #ffeb3b !important
}
.w3-white,
.w3-hover-white:hover {
color: #000 !important;
background-color: #fff !important
}
.w3-black,
.w3-hover-black:hover {
color: #fff !important;
background-color: #000 !important
}
.w3-grey,
.w3-hover-grey:hover,
.w3-gray,
.w3-hover-gray:hover {
color: #000 !important;
background-color: #9e9e9e !important
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
color: #000 !important;
background-color: #f1f1f1 !important
}
.w3-dark-grey,
.w3-hover-dark-grey:hover,
.w3-dark-gray,
.w3-hover-dark-gray:hover {
color: #fff !important;
background-color: #616161 !important
}
.w3-pale-red,
.w3-hover-pale-red:hover {
color: #000 !important;
background-color: #ffdddd !important
}
.w3-pale-green,
.w3-hover-pale-green:hover {
color: #000 !important;
background-color: #ddffdd !important
}
.w3-pale-yellow,
.w3-hover-pale-yellow:hover {
color: #000 !important;
background-color: #ffffcc !important
}
.w3-pale-blue,
.w3-hover-pale-blue:hover {
color: #000 !important;
background-color: #ddffff !important
}
.w3-text-amber,
.w3-hover-text-amber:hover {
color: #ffc107 !important
}
.w3-text-aqua,
.w3-hover-text-aqua:hover {
color: #00ffff !important
}
.w3-text-blue,
.w3-hover-text-blue:hover {
color: #2196F3 !important
}
.w3-text-light-blue,
.w3-hover-text-light-blue:hover {
color: #87CEEB !important
}
.w3-text-brown,
.w3-hover-text-brown:hover {
color: #795548 !important
}
.w3-text-cyan,
.w3-hover-text-cyan:hover {
color: #00bcd4 !important
}
.w3-text-blue-grey,
.w3-hover-text-blue-grey:hover,
.w3-text-blue-gray,
.w3-hover-text-blue-gray:hover {
color: #607d8b !important
}
.w3-text-green,
.w3-hover-text-green:hover {
color: #4CAF50 !important
}
.w3-text-light-green,
.w3-hover-text-light-green:hover {
color: #8bc34a !important
}
.w3-text-indigo,
.w3-hover-text-indigo:hover {
color: #3f51b5 !important
}
.w3-text-khaki,
.w3-hover-text-khaki:hover {
color: #b4aa50 !important
}
.w3-text-lime,
.w3-hover-text-lime:hover {
color: #cddc39 !important
}
.w3-text-orange,
.w3-hover-text-orange:hover {
color: #ff9800 !important
}
.w3-text-deep-orange,
.w3-hover-text-deep-orange:hover {
color: #ff5722 !important
}
.w3-text-pink,
.w3-hover-text-pink:hover {
color: #e91e63 !important
}
.w3-text-purple,
.w3-hover-text-purple:hover {
color: #9c27b0 !important
}
.w3-text-deep-purple,
.w3-hover-text-deep-purple:hover {
color: #673ab7 !important
}
.w3-text-red,
.w3-hover-text-red:hover {
color: #f44336 !important
}
.w3-text-sand,
.w3-hover-text-sand:hover {
color: #fdf5e6 !important
}
.w3-text-teal,
.w3-hover-text-teal:hover {
color: #009688 !important
}
.w3-text-yellow,
.w3-hover-text-yellow:hover {
color: #d2be0e !important
}
.w3-text-white,
.w3-hover-text-white:hover {
color: #fff !important
}
.w3-text-black,
.w3-hover-text-black:hover {
color: #000 !important
}
.w3-text-grey,
.w3-hover-text-grey:hover,
.w3-text-gray,
.w3-hover-text-gray:hover {
color: #757575 !important
}
.w3-text-light-grey,
.w3-hover-text-light-grey:hover,
.w3-text-light-gray,
.w3-hover-text-light-gray:hover {
color: #f1f1f1 !important
}
.w3-text-dark-grey,
.w3-hover-text-dark-grey:hover,
.w3-text-dark-gray,
.w3-hover-text-dark-gray:hover {
color: #3a3a3a !important
}
.w3-border-amber,
.w3-hover-border-amber:hover {
border-color: #ffc107 !important
}
.w3-border-aqua,
.w3-hover-border-aqua:hover {
border-color: #00ffff !important
}
.w3-border-blue,
.w3-hover-border-blue:hover {
border-color: #2196F3 !important
}
.w3-border-light-blue,
.w3-hover-border-light-blue:hover {
border-color: #87CEEB !important
}
.w3-border-brown,
.w3-hover-border-brown:hover {
border-color: #795548 !important
}
.w3-border-cyan,
.w3-hover-border-cyan:hover {
border-color: #00bcd4 !important
}
.w3-border-blue-grey,
.w3-hover-border-blue-grey:hover,
.w3-border-blue-gray,
.w3-hover-border-blue-gray:hover {
border-color: #607d8b !important
}
.w3-border-green,
.w3-hover-border-green:hover {
border-color: #4CAF50 !important
}
.w3-border-light-green,
.w3-hover-border-light-green:hover {
border-color: #8bc34a !important
}
.w3-border-indigo,
.w3-hover-border-indigo:hover {
border-color: #3f51b5 !important
}
.w3-border-khaki,
.w3-hover-border-khaki:hover {
border-color: #f0e68c !important
}
.w3-border-lime,
.w3-hover-border-lime:hover {
border-color: #cddc39 !important
}
.w3-border-orange,
.w3-hover-border-orange:hover {
border-color: #ff9800 !important
}
.w3-border-deep-orange,
.w3-hover-border-deep-orange:hover {
border-color: #ff5722 !important
}
.w3-border-pink,
.w3-hover-border-pink:hover {
border-color: #e91e63 !important
}
.w3-border-purple,
.w3-hover-border-purple:hover {
border-color: #9c27b0 !important
}
.w3-border-deep-purple,
.w3-hover-border-deep-purple:hover {
border-color: #673ab7 !important
}
.w3-border-red,
.w3-hover-border-red:hover {
border-color: #f44336 !important
}
.w3-border-sand,
.w3-hover-border-sand:hover {
border-color: #fdf5e6 !important
}
.w3-border-teal,
.w3-hover-border-teal:hover {
border-color: #009688 !important
}
.w3-border-yellow,
.w3-hover-border-yellow:hover {
border-color: #ffeb3b !important
}
.w3-border-white,
.w3-hover-border-white:hover {
border-color: #fff !important
}
.w3-border-black,
.w3-hover-border-black:hover {
border-color: #000 !important
}
.w3-border-grey,
.w3-hover-border-grey:hover,
.w3-border-gray,
.w3-hover-border-gray:hover {
border-color: #9e9e9e !important
}
.w3-border-light-grey,
.w3-hover-border-light-grey:hover,
.w3-border-light-gray,
.w3-hover-border-light-gray:hover {
border-color: #f1f1f1 !important
}
.w3-border-dark-grey,
.w3-hover-border-dark-grey:hover,
.w3-border-dark-gray,
.w3-hover-border-dark-gray:hover {
border-color: #616161 !important
}
.w3-border-pale-red,
.w3-hover-border-pale-red:hover {
border-color: #ffe7e7 !important
}
.w3-border-pale-green,
.w3-hover-border-pale-green:hover {
border-color: #e7ffe7 !important
}
.w3-border-pale-yellow,
.w3-hover-border-pale-yellow:hover {
border-color: #ffffcc !important
}
.w3-border-pale-blue,
.w3-hover-border-pale-blue:hover {
border-color: #e7ffff !important
}