html {
margin: 0;
padding: 0;
line-height: 1;
overflow-x: hidden;
}
html, body, div, span, applet, object, iframe, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
form, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
hr, .hr {
border-width: 0 0 1px 0;
border-style: solid;
color: #1d456f;
border-color: #72a3c2;
margin: 0 0 10px;
width: 100%;
}
h1 {
font-size: 36px;
font-weight: bold;
margin: 20px 0;
}
h2 {
font-size: 26px
}
h3 {
font-size: 18px
}
h4, h5, h6 {
font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1;
font-size: 15px;
color: #606060;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
a {
text-decoration: none;
}
a:focus {
outline: none;
}
p {
line-height: 1.3;
width: 100%;
margin-bottom: 5px;
}
ul {
list-style: square;
}
li {
margin-left: 20px;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
* {
box-sizing: border-box;
}
html {
font-size: 15px;
}
header,
content,
main,
footer,
aside,
article,
div,
h1,
h2,
h3,
h4,
h5 {
width: 100%;
}
div::after,
div:after,
table::after {
content: "";
clear: both;
display: table;
}
form td {
border: none;
word-wrap: break-word;
}
form label {
font-weight: bold;
padding: 3px;
line-height: 1.5;
}
label span {
font-weight: normal;
display: block;
cursor: pointer;
}
form label.label {
padding: 0 !important;
}
form label span {
padding: 4px 30px;
}
form label, form input, form textarea {
width: 100%;
}
fieldset {
margin-bottom: 10px;
}
legend {
font-size: 12pt;
font-weight: bolder;
}
input, textarea, select {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
padding: .5em .6em;
display: inline-block;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 3px #ddd;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input[type="radio"], input[type="checkbox"] {
width: auto;
cursor: pointer;
margin: 0;
}
input:focus, textarea:focus, select:focus {
border: 1px solid rgba(120, 235, 200, 0.5);
outline: none;
box-shadow: 0 1px 6px 0 var(--N700,rgba(120, 235, 200, 0.7));
}
.outer {
padding: 0 5px;
}
.outer.dashboard, .outer.format, .outer.datagudang, .outer.beranda {
margin-top: 75px;
}
.form {
background-color: white;
border: 1px solid rgba(0,0,0,.125);
/* border-radius: 8px; */
padding: 15px;
box-shadow: 0 1px 6px 0 var(--N700,rgba(49,53,59,0.12));
}
.border {
border: 2px solid rgba(0,0,0,.125);
border-radius: 5px;
padding: 0px 5px;
box-shadow: 0 1px 6px 0 var(--N700,rgba(49,53,59,0.12));
}
.hidden, [hidden] {
display: none;
}
/* table */
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
position: relative;
background-color: #fff;
}
thead tr {
background-image: linear-gradient(to bottom,#F8F8F8 0,#ECECEC 100%);
}
th, td {
font-size: 10pt;
padding: 6px;
line-height: 1.4;
text-align: center;
border: 1px solid #ddd;
}
th {
border-bottom-width: 2px;
}
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #f5f5f5;
}
tfoot {
font-weight: bolder;
}
/* button */
button {
border-radius: 4px;
padding: 8px 15px;
font-size: 12pt;
display: inline-block;
line-height: normal;
white-space: nowrap;
vertical-align: middle;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
button:hover {
background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
cursor: pointer;
}
.btn-success {
border: 1px solid #2EA893;
background-color: #2EA893;
color: white;
}
.btn-warning {
border: 1px solid #ffc107;
background-color: #ffc107;
color: rgba(15, 15, 15, 0.88);
}
.btn-danger {
border: 1px solid #a82e43;
background-color: #a82e43;
color: white;
}
.btn-block {
width: 100%;
}
.btn-sm {
padding: 6px 10px;
font-size: 10pt;
}
/* text align */
.tal {
text-align: left;
}
.tac {
text-align: center;
}
.tar {
text-align: right;
}
.taj {
text-align: justify;
}
/* margin */
.m5 {
margin: 5px;
}
.m10 {
margin: 10px;
}
.mx2 {
margin: 0 2px;
}
.mx5 {
margin: 0 5px;
}
.mx10 {
margin: 0 10px;
}
.my5 {
margin: 5px 0;
}
.my10 {
margin: 10px 0;
}
.mt5 {
margin-top: 5px;
}
.mt10 {
margin-top: 10px;
}
.mb5 {
margin-bottom: 5px;
}
.mb10 {
margin-bottom: 10px;
}
.m0a {
margin: 0 auto;
}
/* padding */
.p5 {
padding: 5px;
}
.p10 {
padding: 10px;
}
.px5 {
padding: 0 5px;
}
.px10 {
padding: 0 10px;
}
.py5 {
padding: 5px 0;
}
.py10 {
padding: 10px 0;
}
.pt5 {
padding-top: 5px;
}
.pt10 {
padding-top: 10px;
}
.pb5 {
padding-bottom: 5px;
}
.pb10 {
padding-bottom: 10px;
}
/* float */
.fr {
float: right;
}
.fl {
float: left;
}
/* width */
.wa {
width: auto;
}
.w5 {
width: 5%;
}
.w10 {
width: 10%;
}
.w15 {
width: 15%;
}
.w20 {
width: 20%;
}
.w25 {
width: 25%;
}
.w30{
width: 30%;
}
.w33 {
width: calc(100%/3);
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w66 {
width: calc(100%*2/3);
}
.w70 {
width: 70%;
}
.w75 {
width: 75%;
}
.w80 {
width: 80%;
}
.w90 {
width: 90%;
}
.w100 {
width: 100%;
}
.w50:nth-child(odd){
padding-right: 3px;
}
.w50:nth-child(even){
padding-left: 3px;
}
/* FONT SIZE */
.fs-10 {
font-size: 10px;
}
.fs-11 {
font-size: 11px;
}
.fs-12 {
font-size: 12px;
}
.fs-14 {
font-size: 14px;
}
.fs-16 {
font-size: 16px;
}
.fs-18 {
font-size: 18px;
}
.fs-20 {
font-size: 20px;
}
.fs-22 {
font-size: 22px;
}
.fs-24 {
font-size: 24px;
}
.fs-26 {
font-size: 26px;
}
.fs-32 {
font-size: 32px;
}
.fs-36 {
font-size: 36px;
}
.fs-48 {
font-size: 48px;
}
.bold {
font-weight: bolder;
}
@media (max-width: 767px) {
.w50 {
width: 100%;
}
.w50:nth-child(odd) {
padding-right: 0px;
}
.w50:nth-child(even){
padding-left: 0px;
}
input, textarea, select {
padding: 6px 8px;
}
}