/* res-sf:css.uzone (172.16.19.134-13) */
/* 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;
}
/* 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}