html,body
{
margin: 0;
padding: 0;
font-size: 10pt;
line-height: 1;
animation: appear 0.25s;
-webkit-animation: webkitappear 0.25s;
background: #efefef;
color: #3f3f3f;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
*
{
transition: all 0.25s !important;
-webkit-transition: all 0.25s !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
background-size: cover !important;
-webkit-background-size: cover !important;
outline: none !important;
font-family: 'Play','Raleway','Ubuntu','Tahoma';
}
input,textarea,select,.button,#tool-bottom,#tool-bottom2,#tool-top,#tool-top2,.input
{
padding: 5px 0px;
margin: 5px 10px 5px 0px;
font-size: 10pt;
border-radius: 0px;
vertical-align: middle;
cursor: pointer !important;
font-size: 12px;
line-height: 1;
}
textarea
{
min-width: 200px;
width: 75%;
resize: none;
height: 100px;
}
input[type="checkbox"]
{
margin: 5px 5px 5px 5px;
padding: 0;
}
input[type="text"],input[type="password"],input[type="number"],textarea,input[type="file"],input[type="date"],input[type="time"],input[type="number"],select,.input,.tmobile files
{
border: none;
border: 1px solid rgba(0,0,0,0.2);
min-width: 200px;
background: inherit;
padding: 8px 12px;
border-radius: 4px;
/*box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.25);*/
}
select,input[type="date"],.input
{
min-width: auto;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
vertical-align: middle;
}
img
{
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
grid
{
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
}
grid a
{
flex-grow: 1;
display: block;
border: 1px solid rgba(0,0,0,0.2);
text-align: center;
margin: 10px;
padding: 20px;
}
grid a img
{
height: 60px;
display: block;
margin: 0px auto;
}
grid a small
{
display: block;
}
.tmobile files
{
position: relative;
display: block;
overflow: hidden;
padding: 0 !important;
line-height: 1 !important;
font-size: 0;
margin: 5px 0px;
}
.tmobile files img
{
height: 38px;
width: 38px;
margin: 0;
padding: 0;
line-height: 1 !important;
}
.tmobile files down
{
display: flex;
align-items: center;
cursor: pointer;
position: absolute;
line-height: 1 !important;
top: 0;
left: 38px;
right: 30px;
bottom: 0;
font-size: 12px;
padding: 0px 10px;
}
.tmobile files a,.tmobile foto a
{
line-height: 1 !important;
background: #ef3f3f !important;
color: white !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
font-size: 16px !important;
font-weight: bold !important;
width: 20px !important;
height: 20px !important;
align-items: center !important;
justify-content: center !important;
border-radius: 20px !important;
position: absolute !important;
top: 8px;
right: 10px;
}
.tmobile foto
{
display: inline-block;
margin: 0;
padding: 0;
position: relative;
font-size: 0;
}
.tmobile foto img
{
position: relative;
width: 150px;
height: 150px;
border-radius: 150px;
object-fit: cover;
float: none;
margin: 0;
}
.tmobile foto down
{
display: none;
}
.tmobile foto a
{
top: 10px;
right: 10px;
font-size: 20px !important;
width: 26px !important;
height: 26px !important;
border: 3px solid white;
padding: 0 !important;
padding-bottom: 3px !important;
}
.disable
{
background: #efefef !important;
}
option[disabled],option[DISABLED]
{
background: rgba(0,0,0,0.1) !important;
}
input[type="text"]:hover,input[type="password"]:hover,input[type="number"]:hover,textarea:hover,select:hover,input[type="file"]:hover,input[type="date"]:hover,input[type="time"]:hover
{
border: 1px solid rgba(0,0,0,0.25);
}
input[type="text"]:focus,input[type="password"]:focus,input[type="number"]:focus,textarea:focus,select:focus,input[type="file"]:focus,input[type="date"]:focus,input[type="time"]:focus
{
border: 1px solid rgba(0,0,0,0.5);
}
input[type="submit"],input[type="button"],.button,#tool-bottom,#tool-bottom2,#tool-top,#tool-top2
{
background: #2f5f9f;
color: white;
cursor: pointer;
border: none;
display: inline-block;
border-radius: 3px;
vertical-align: middle;
font-family: 'Play','Unica One','Impact';
font-weight: bold;
font-size: 14px;
line-height: 1;
padding: 11px 16px;
min-height: 36px;
min-width: 96px;
position: relative;
text-align: center;
/*box-shadow: inset 0px -10px 30px -10px rgba(0,0,0,0.2);*/
}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active
{
transition: background-color 5000s !important;
}
#tool-bottom,#tool-bottom2,#tool-top,#tool-top2
{
padding: 11px 16px;
text-align: center;
}
#tool-top,#tool-top2
{
background: #dfdfdf;
color: #5f5f5f;
}
.tool-top3
{
background: linear-gradient(135deg,#2f5f9f,#bf3f7f) !important !important;
position: absolute;
top: 15px;
right: 30px;
font-size: 0;
height: 30px;
width: 30px;
border-radius: 100px;
padding: 7px;
box-sizing: border-box;
cursor: pointer;
z-index: 2;
}
.tool-top3:before
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
background: linear-gradient(135deg,#2f5f9f,#bf3f7f);
border-radius: 100px;
}
.tool-top3 img
{
height: 100%;
position: relative;
z-index: 2;
}
.tool-list
{
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 31;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.25);
}
.tool-list,.tool-list *
{
transition: none !important;
}
.tool-list-middle
{
display: table-cell;
vertical-align: middle;
}
.tool-list-inner
{
background: white;
display: block;
width: auto;
min-width: 300px;
margin: 0 auto;
padding: 20px;
border-radius: 6px;
}
.tool-list-inner a
{
display: block;
margin: 0;
font-size: 20px;
padding: 10px 20px;
text-decoration: none;
text-align: center;
color: #3f3f3f !important;
background: none !important;
white-space: nowrap;
}
.tool-list-inner span
{
display: block;
font-size: 16px !important;
text-align: center;
padding: 10px 20px !important;
}
.tool-list-button
{
font-weight: normal;
font-size: 25px;
display: inline-block;
padding: 0px 10px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: white;
border-radius: 25px;
}
.tpc2 .mtool .tool-list-button
{
top: 0;
right: 0;
}
.tpc2:has(.mtool) thead th:last-child
{
width: 60px !important;
}
input[type="submit"]:hover,input[type="button"]:hover,.button:hover,#tool-bottom:hover,#tool-bottom2:hover,.tool-list-button:hover
{
filter: brightness(115%) contrast(100%);
/*border: none !important;*/
}
label,labl
{
cursor: pointer;
display: inline-block;
padding: 5px 10px 5px 5px;
position: relative;
}
label:hover,labl:hover
{
filter: brightness(115%) contrast(100%);
}
.tmobile label:hover
{
filter: none;
}
header
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: white;
color: #1f5f7f;
vertical-align: middle;
z-index: 8;
line-height: 1;
white-space: nowrap;
-webkit-white-space: nowrap;
box-shadow: inset 0px -10px 20px -10px rgba(0,0,0,0.125);
filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.2));
}
header a,footer a
{
color: inherit;
text-decoration: none;
vertical-align: middle;
margin: 5px 5px 5px 5px;
display: inline-block;
cursor: pointer;
}
header span
{
cursor: pointer;
font-family: 'Unica One','Impact';
}
header img,.menubar img
{
vertical-align: middle;
padding: 2px;
height: 20px;
margin: 5px 5px 5px 5px;
border: 1px solid white;
border-radius: 5px;
}
.icon
{
display: inline-block;
vertical-align: middle;
transform: scale(0.8,0.8);
}
.menubar img
{
border: none;
border-radius: 0px;
background: rgba(0,0,0,0.066);
padding: 8px;
height: 40px;
margin: 0px 10px 0px 0px;
}
footer
{
position: absolute;
overflow: hidden;
z-index: 8;
bottom: 0;
left: 0;
right: 0;
font-size: 10pt;
line-height: 1;
height: 40px;
background: #ffffff;
color: #6f6f6f;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
-webkit-white-space: nowrap;
overflow: auto;
padding: 0px;
box-shadow: inset 0px -20px 40px -20px rgba(0,0,0,0.25);
filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.125));
}
a
{
cursor: pointer !important;
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
footer a
{
margin: 0px 5px 0px 5px;
}
h1,h2,h3,h4,h5,h6
{
padding: 0;
margin: 0;
display: block;
font-weight: normal;
}
h1
{
font-size: 48px;
}
h2
{
font-size: 32px;
}
h3
{
font-size: 24px;
}
h4
{
font-size: 16px;
}
h5
{
font-size: 12px;
}
h6
{
font-size: 8px;
}
th
{
text-align: left;
font-weight: normal;
}
fieldset
{
position: relative;
z-index: 0;
margin: 0px 10px 20px 0px;
padding: 65px 25px 25px 25px;
border: none;
box-shadow: inset 0px -50px 100px -50px rgba(0,0,0,0.05);
filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.2));
display: inline-block;
vertical-align: top;
background: #ffffff;
border-radius: 4px;
/*border-top: 4px solid #2f5f9f;*/
border: none !important;
min-width: calc(50% - 10px);
}
fieldset:nth-child(even)
{
margin: 0px 0px 20px 10px;
}
fieldset:before
{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(-90deg,rgba(0,0,0,0),rgba(0,0,0,0.033));
}
fieldset:after
{
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 4px 4px 0px 0px;
background: linear-gradient(90deg,#2f5f9f,#9f5f2f,#9f2f5f);
}
legend
{
position: absolute;
top: 0;
left: 0;
width: auto;
font-family: 'Play','Unica One','Impact';
font-weight: bold;
padding: 10px 25px;
font-size: 20px;
background: none;
border: none;
color: #2f5f9f;
margin: 0px 0px 0px 0px;
/*box-shadow: inset 0px -15px 30px -15px rgba(0,0,0,0.1);*/
/*background: linear-gradient(-90deg,rgba(0,0,0,0),rgba(0,0,0,0.033));*/
background: linear-gradient(90deg,#2f5f9f,#9f5f2f,#9f2f9f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
legend form
{
display: inline-block !important;
width: auto !important;
vertical-align: middle;
}
legend select
{
margin: 0px 0px 0px 20px;
}
legend small
{
font-size: 16px;
}
preview
{
display: block;
overflow: auto;
max-height: calc(100vh - 320px);
}
form[name="filter"]
{
display: inline-block;
margin-bottom: 10px;
position: relative;
z-index: 3;
}
form[name="filter"] input[type="text"],form[name="filter"] select,form[name="filter"] .input
{
font-size: 10px;
cursor: pointer;
padding-left: 12px;
}
form[name="filter"] select
{
max-width: 250px;
}
form[name="filter"] labl,form labl
{
position: relative;
display: inline-block;
}
form[name="filter"] labl font,form labl font
{
display: inline-block;
position: absolute;
top: 2px;
left: 0px;
right: 10px;
text-shadow: 0px 0px 2px white, 0px 0px 3px white, 0px 0px 4px white,0px 0px 5px white, 0px 0px 6px white, 0px 0px 7px white, 0px 0px 8px white, 0px 0px 9px white !important;
text-align: center;
background: none;
color: #7f3fbf;
font-size: 7pt;
padding: 0;
padding-right: 5px;
}
form[name="laporan"] p
{
margin: 0;
padding: 0;
}
ul,ol
{
margin: 0px 0px 0px 5px;
padding: 0;
}
ul li,ol li
{
margin: 0px 0px 0px 15px;
}
table
{
margin: 0px 0px 10px 0px;
position: relative;
}
.tpc
{
font-size: 12px;
margin-top: 10px;
background: none;
border: 1px solid rgba(0,0,0,0.2);
position: relative;
}
table,th,td
{
border-collapse: collapse;
font-size: 12px;
}
thead
{
background: rgba(0,0,0,0.125);
background: #9f9f9f;
}
.tpc td,.tpc th
{
padding: 5px 10px 5px 10px;
border-bottom: 1px solid rgba(0,0,0,0.2);
position: relative;
overflow: visible;
}
.tpc tr:nth-child(even)
{
background: rgba(0,0,0,0.033);
}
.tpc left
{
display: block;
text-align: left;
}
.tpc .foto
{
display: block;
height: 100px;
width: 100px;
border-radius: 100px;
margin: 20px auto;
padding: 0;
background: white;
}
.tmobile .foto
{
margin-bottom: 20px;
}
thead th,thead td
{
color: white !important;
font-weight: bold;
font-size: 10pt !important;
text-shadow: none;
}
hr
{
border: none;
border-top: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.125);
}
.border th,.border td
{
border: 1px solid rgba(0,0,0,0.2);
}
.custom-select-outer
{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
z-index: 90;
}
.custom-select-inner
{
display: inline-block;
background: white;
padding: 10px 20px;
border-radius: 15px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
}
.custom-select-inner span
{
display: block;
}
#main
{
width: 125px;
}
#main a
{
padding: 0px 10px;
}
#title
{
text-align: center;
font-size: 14px;
position: relative;
}
#titletool
{
width: 125px;
padding: 0px 15px 0px 0px;
position: relative;
}
#titletext
{
color: #6f6f6f;
padding: 10px;
font-size: 14px;
font-family: 'Play','Tahoma';
vertical-align: middle;
display: inline-block;
position: relative;
}
.logo,.tox-promotion,.tox-promotion-link,.tox-statusbar__branding
{
display: none;
}
.menubar
{
background: white;
color: #5f5f5f;
width: 400px;
position: absolute;
z-index: 5;
top: 50px;
bottom: 40px;
left: -100%;
overflow: hidden;
}
#menu-main
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: inherit;
overflow-y: hidden;
overflow-x: hidden;
box-shadow: inset 0px -20px 60px -20px rgba(0,0,0,0.125);
}
#menu-main:hover
{
overflow-y: auto;
}
#menu-sub
{
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 100%;
overflow: auto;
}
.menubar a,.menubar span
{
width: inherit;
color: inherit;
text-decoration: none;
vertical-align: middle;
padding: 0px;
display: block;
height: 45px;
line-height: 1;
border: none;
border-bottom: 1px solid rgba(0,0,0,0.1);
position: relative;
z-index: 0;
cursor: pointer;
background: rgba(255,255,255,0.5);
}
.menubar a:hover,.menubar span:hover
{
color: #df8f2f !important;
z-index: 1;
}
.menubar a img,.menubar span img
{
border-radius: 100px;
width: 24px;
height: 24px;
margin: 11px 11px 11px 16px;
padding: 0px;
background: none;
/*filter: invert(50%);*/
}
.menubar a:hover img,.menubar span:hover img
{
filter: none !important;
background: #df8f2f !important;
}
.menubar a:hover .label,.menubar span:hover .label
{
background: #df8f2f !important;
}
.menubar span font
{
position: absolute;
top: 0 !important;
right: 10px !important;
padding: 13px 10px;
line-height: 1;
font-size: 18px;
opacity: 0.66;
}
.helpbar
{
position: absolute;
top: 55px;
right: -100%;
bottom: 45px;
z-index: 5;
background: #fbfbfb !important;
color: black;
width: 390px;
overflow: hidden;
line-height: 1.5;
text-shadow: none;
}
.helpbar a
{
text-decoration: none;
color: #3f7fbf;
}
#helptext
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
overflow: auto;
}
#main img,.helpicon img
{
background: #2f5f9f;
border: none;
border-radius: 20px;
}
.submenu
{
overflow: hidden;
display: block;
position: relative;
z-index: 0;
height: 0px;
z-index: 8;
}
.submenu:hover,.submenu a:hover
{
z-index: 1;
}
.submenu a
{
padding: 5px 5px 5px 20px;
background: rgba(0,0,0,0.125);
}
/*.content:before
{
position: absolute;
top: 0;
left: 0;
bottom: 180px;
right: 0;
content: '';
background: #f8f8f8;
border-radius: 0px 0px 100% 0px;
border-bottom: 60px solid #f6f6f6;
}
.content:after
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: #f4f4f4;
border-radius: 0px 0px 100% 0px;
border-bottom: 100px solid #f2f2f2;
}*/
.content,section
{
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 40px;
z-index: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 20px 20px 10px 20px;
line-height: 1.5;
}
.content50
{
width: 50%;
display: inline-block;
}
.content a,section a
{
text-decoration: none;
color: #2f7f9f;
}
.content a:hover,section a:hover
{
filter: brightness(115%) contrast(100%);
}
.warning,.info
{
padding: 0px 0px 10px 0px;
overflow: hidden;
vertical-align: middle;
}
.warning span,.info span
{
animation: zoomin 0.25s;
-webkit-animation: zoomin 0.25s;
display: inline-block;
padding: 10px 15px;
border-radius: 3px;
background: #ff7f5f;
color: white;
font-style: normal;
text-align: left;
}
.info span
{
background: #5fafdf;
}
.warning small,.info small
{
animation: zoomin 0.25s;
-webkit-animation: zoomin 0.25s;
display: inline-block;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
color: #df7f5f;
border: 1px dashed #df7f5f;
font-style: normal;
text-align: left;
}
.info small
{
color: #2f5f9f;
border: 1px dashed #2f5f9f;
}
.warning hr,.info hr
{
border: none;
border-top: 1px solid rgba(255,255,255,0.5);
}
.warning a,.info a
{
color: inherit;
text-decoration: underline;
}
.info .tpc th,.info .tpc td
{
color: #3f3f3f;
}
.tmobile
{
vertical-align: top;
position: relative;
}
.tmobile label,.tmobile .text,.tmobile .select,.tmobile .number,.tmobile .date,.tmobile .password,.tmobile .username,.tmobile .disabled,.tmobile .phone,.tmobile .email,.tmobile .time,.tmobile .money
{
display: block;
padding: 0 !important;
margin: 0 !important;
position: relative;
box-sizing: border-box;
}
.tmobile label
{
margin: 5px 0px !important;
}
.tmb
{
vertical-align: top !important;
margin: 0px !important;
height: 100%;
}
.tpc .tmb,.tpc .tmb tr,.tpc .tmb th,.tpc .tmb td
{
background: none !important;
height: auto !important;
padding: 5px 0px;
line-height: 1;
text-align: left;
font-weight: normal;
font-size: 10pt;
}
.tpc .tmb th
{
width: 120px;
position: relative;
}
.tpc .tmb th:after
{
content: ':';
position: absolute;
top: 0;
right: 5px;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.tmb td
{
padding: 0 !important;
margin: 0 !important;
}
.tmb label
{
margin: 0 !important;
display: block;
height: 100%;
padding: 10px !important;
}
.tmb label font,.tmb label div,.tmb label div p
{
line-height: 1;
display: block;
margin: 0 !important;
}
.tmb label font
{
margin-bottom: 5px !important;
}
.tmb label div
{
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.2);
padding: 10px 15px;
}
.tmb label div,.tmb label div p
{
line-height: 1.5;
}
.tmobile .text:after,.tmobile .select:after,.tmobile .number:after,.tmobile .money:after,.tmobile .date:after,.tpc .text:after,.tmobile .password:after,.tmobile .username:after,.tmobile .disabled:after,.tmobile .phone:after,.tmobile .email:after,.tmobile .time:after
{
content: '';
position: absolute;
top: 6px;
left: 1px;
width: 30px;
height: 30px;
font-size: 18px !important;
padding: 1px 0px 0px 1px;
text-align: center;
background: #f7f7f7;
color: #5f5f5f;
box-sizing: border-box;
border-radius: 4px 0px 0px 4px;
border-right: 1px solid rgba(0,0,0,0.33);
background-size: cover !important;
filter: invert(56%);
}
.tpc .text:after
{
left: 11px;
/*top: 11px;*/
top: calc(50% - 15px);
}
.tpc .tmb .text:after
{
left: 4px;
top: 6px;
}
.tpc .text:has(.tmb):after
{
display: none;
}
.tmobile label input,.tmobile label select,.tmobile label textarea,.tmobile .text input:nth-child(1),.tmobile .select select:nth-child(1),.tmobile .number input:nth-child(1),.tmobile .date input:nth-child(1),.tmobile .time input:nth-child(1),.tpc .text input,.tmobile .disabled input:nth-child(1),.tmobile .username input:nth-child(1),.tmobile .password input:nth-child(1),.tmobile .phone input:nth-child(1),.tmobile .email input:nth-child(1),.tmobile .money input:nth-child(1),.tmobile .text .full,.tmobile .disabled select
{
padding-left: 40px;
height: 32px !important;
box-sizing: border-box;
}
.tmobile td label:after
{
display: none;
}
.tmobile td div .warning,.tmobile td div .info
{
display: block !important;
border: none;
}
.tmobile td div .warning small,.tmobile td div .info small
{
border-radius: 4px;
display: block;
animation: none;
}
illustration .tmobile td label:after
{
display: block;
}
.tpc font,.tmobile font
{
font-weight: normal;
color: #df8f2f;
}
.tmobile item
{
display: inline-block;
line-height: 1;
font-size: 12px;
padding: 5px;
margin: 2px;
border: 1px solid rgba(0,0,0,0.25);
border-radius: 4px;
min-width: 200px;
background: #f7f7f7;
}
.tmobile td h3
{
padding: 10px 0px;
}
.avatar-outer
{
background: #ffbf6f;
padding: 20px;
text-align:center;
color: white;
box-shadow: inset 0px 0px 50px 0px rgba(0,0,0,0.125);
text-shadow: 0px 1px 2px rgba(0,0,0,0.25);
position: relative;
width: inherit;
}
.avatar-outer:before
{
display: block !important;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background: url(./img/texture.png) 50% 50%;
}
.avatar-outer small
{
position: relative;
z-index: 3;
}
.avatar
{
width: 140px;
height: 140px;
border-radius: 140px;
display: block;
margin: 0px auto 10px auto;
cursor: pointer;
border: 2px solid white;
background-color: rgba(0,0,0,0.05) !important;
filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.25));
position: relative;
z-index: 3;
}
.foto
{
width: 180px;
height: 240px;
border-radius: 3px;
display: inline-block;
vertical-align: top;
margin: 0;
cursor: pointer;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
object-fit: cover !important;
position: relative;
z-index: 1;
}
.foto delt,div delt
{
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: bold;
line-height: 1;
border-radius: 4px;
z-index: 3;
cursor: pointer;
}
.foto delt img,div delt img
{
height: 100%;
}
.button
{
min-width: 90px;
border: none !important;
}
.button img
{
width: 20px;
margin: 0px 5px 0px 0px;
padding: 0;
vertical-align: middle;
}
.collage
{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.collage bubble
{
display: block;
margin: 0;
padding: 0;
flex-grow: 1;
filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.25));
background: white;
box-shadow: inset 0px -20px 40px -20px rgba(0,0,0,0.05);
padding: 10px 30px;
border-radius: 15px;
margin: 0;
text-align: left;
}
.collage bubble q
{
display: table !important;
position: relative;
}
.collage bubble q:before,.collage bubble q:after
{
content: '“';
font-size: 24pt;
position: absolute;
top: -10px;
left: -15px;
color: #1f3f7f;
}
.collage bubble q:after
{
content: '”';
left: auto;
right: -15px;
color: #bf3f7f;
}
chart
{
display: block;
height: 200px;
width: 100%;
}
.chat bubble
{
display: block;
margin: 0;
margin-bottom: 20px;
}
.chat bubble q
{
display: inline-block;
filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.25));
background: white;
box-shadow: inset 0px -20px 40px -20px rgba(0,0,0,0.05);
padding: 10px 20px;
border-radius: 15px;
margin: 0;
text-align: left;
}
.chat bubble:nth-child(even)
{
text-align: right;
}
.chat bubble:nth-child(even) q
{
background: #ffffef;
}
.fotolist
{
width: 120px;
height: 160px;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
}
.resume
{
line-height: 1.5;
overflow: hidden;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
cursor: pointer;
height: 30px;
border: 1px solid rgba(0,0,0,0.25);
background: #ffffef;
padding: 5px 10px 5px 10px;
font-size: 10pt;
}
.resume p
{
margin: 0;
padding: 0;
}
.mshow,.mshow2,.label
{
display: none !important;
}
.summary
{
display: inline-block;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 4px;
position: relative;
padding: 40px 15px 15px 15px;
min-width: 200px;
font-size: 12pt;
overflow: hidden;
line-height: 1;
margin: 10px;
text-align: left;
}
.summary font
{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 8pt;
padding: 8px 15px;
}
.summary font b
{
display: inline-block;
background: linear-gradient(90deg,#2f5f9f,#9f5f2f,#9f2f9f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.summary sup
{
padding: 3px !important;
}
.option
{
display: inline-block;
min-width: 150px;
padding: 0px 10px 0px 0px;
}
.bulklist .option
{
min-width: 25%;
}
.lampiran
{
position: relative !important;
display: inline-block !important;
width: 150px !important;
height: 150px !important;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5) !important;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5) !important;
margin: 0px 10px 10px 0px !important;
}
.lampiran *
{
border: none !important;
}
.lampiran span
{
position: absolute;
left: 0;
right: 0;
bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px 10px;
color: white;
font-size: 12px;
background: rgba(0,0,0,0.25);
cursor: pointer;
}
.lampiran-tool
{
cursor: pointer;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
.lampiran-tool a
{
display: inline-block;
margin: 0;
padding: 0;
line-height: 1;
}
.lampiran-tool img
{
width: 30px;
height: 30px;
background: none;
filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.25));
}
.list
{
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 9 !important;
background: white;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
border-radius: 5px;
overflow: auto;
max-height: 250px;
}
.list a
{
display: block !important;
padding: 5px 10px 5px 10px !important;
background: inherit !important;
border: none !important;
text-decoration: none !important;
border-radius: 0px !important;
font-size: 10pt !important;
color: #1f5f7f !important;
}
.list a:hover
{
background: #1f5f7f !important;
color: white !important;
}
.tpc td a,.tpc th a,.tool-button,thumb a
{
background: #2f7f9f;
color: white !important;
padding: 3px 6px;
border-radius: 3px;
font-size: 10px;
cursor: pointer;
text-align: center;
display: inline-block;
margin: 2px;
min-width: 40px;
line-height: 1;
border: none !important;
}
.tool-button
{
width: 40px !important;
min-width: auto !important;
}
.tpc td form
{
display: inline-block;
}
.tpc td p,.tpc td ul,.tpc td ol
{
margin: 0;
padding: 0;
line-height: inherit;
}
.tpc thead th a,.tpc thead td a
{
background: none;
padding: 0;
margin: 0;
box-shadow: none;
filter: none;
color: inherit !important;
font-size: 10pt !important;
text-shadow: none;
}
.tmobile td
{
position: relative;
}
.tmobile td a,.cancel
{
cursor: pointer;
color: #7f7f7f;
font-size: 12px;
padding: 0px 0px;
display: inline-block;
margin: 5px 5px 0px 0px;
border-radius: 3px;
line-height: 1;
}
.cancel
{
color: #df8f2f;
background: none;
border: 1px solid #df8f2f;
}
.tpc td a:hover,.tmobile td a:hover,.cancel:hover
{
filter: brightness(115%) contrast(100%);
text-decoration: none !important;
}
.tpc td sup,.tpc th sup,.tmobile td sup,.tmobile th sup,thumb sup,.summary sup
{
border-radius: 2px;
padding: 1px 4px;
font-size: 8px;
background: white;
color: #7f7f7f;
border: 1px dotted #7f7f7f;
cursor: pointer;
display: inline-block;
filter: none;
}
thumb l1 h1,thumb l1 h2,thumb l1 h3
{
display: inline;
}
thumb .mtool img
{
background: none !important;
width: auto !important;
display: inline-block !important;
}
.tpc2 td span
{
margin: 0;
padding: 0;
}
.tpc2 td span img
{
height: 20px;
margin: 0;
}
.file
{
display: block;
padding: 5px 10px !important;
border: 1px solid rgba(0,0,0,0.25);
border-radius: 5px;
margin: 5px 0px !important;
background: rgba(0,0,0,0.025);
position: relative;
word-break: break-word;
}
.file sup
{
display: inline-block;
background: #ef3f3f;
color: white;
padding: 0px 4px;
text-align: center;
border-radius: 25px;
margin: 0px 0px 0px 10px;
cursor: pointer;
float: right;
}
.file a
{
border: none !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
font-size: inherit !important;
color: inherit !important;
}
.file img
{
width: 100%;
height: auto;
}
.file embed
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.file dummy
{
display: block;
margin-top: 50%;
}
.filename
{
display: block;
cursor: pointer;
width: 100%;
max-width: 64vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filename span
{
font-family: 'Courier New';
font-size: 6px;
font-weight: normal;
display: inline-block;
vertical-align: middle;
background: #5f5f5f;
color: white;
padding: 1px 2px;
text-align: center;
width: 15px;
border-radius: 0px 0px 4px 0px;
transform: rotate(-90deg);
}
.directory
{
display: block;
font-weight: normal;
max-width: 64vw;
overflow: auto;
}
.directory span
{
display: table-cell;
cursor: pointer;
padding: 2px;
}
.directory span:hover
{
filter: brightness(115%) contrast(100%);
}
.delete,.pdf,input[type="button"][value="✗ Hapus"],input[type="button"][value="Hapus"]
{
background: #df3f3f !important;
color: white !important;
}
.print
{
background: #7f3fbf !important;
color: white !important;
}
.view,form[name="filter"] input[type="submit"],form[name="filter"] input[type="button"]
{
background: #3f9fbf !important;
color: white !important;
}
.add,input[type="submit"][value="✓ Simpan"],input[type="submit"][value="Simpan"]
{
background: #3fcf3f !important;
color: white !important;
}
.edit
{
background: #efbf3f !important;
color: white !important;
}
.back,input[type="button"][value="↺ Kembali"],input[type="button"][value="Kembali"]
{
background: #7f7f7f !important;
color: white !important;
}
.excel
{
background: #3faf6f !important;
color: white !important;
}
.word
{
background: #3f7fbf !important;
color: white !important;
}
.default
{
background: #1f5f7f !important;
color: white !important;
}
.filter
{
display: none;
}
.filter-button
{
/*transform: rotate(90deg);*/
/*line-height: 0.5;
font-size: 20px;
padding: 5px;*/
filter: invert(50%);
display: inline-block;
vertical-align: middle;
}
.filter-button img
{
height: 30px;
padding: 2px;
}
.info.glow
{
overflow: visible;
}
.info.glow span,.info.glow small
{
animation: infoglow 3s infinite;
}
.warning.glow span,.warning.glow small
{
animation: warningglow 3s infinite;
}
@keyframes infoglow
{
0%{box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);}
50%{box-shadow: 0px 0px 20px 0px rgba(0,127,191,0.5);}
100%{box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);}
}
@keyframes warningglow
{
0%{box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);}
50%{box-shadow: 0px 0px 20px 0px rgba(191,0,0,0.5);}
100%{box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);}
}
.grecaptcha-badge
{
margin-bottom: -100px;
}
.full
{
width: 100%;
margin-right: 0 !important;
margin-left: 0 !important;
}
.full hr
{
padding: 0;
margin: 20px -30px;
border: none;
border-top: 1px solid rgba(0,0,0,0.125);
height: 20px;
/*background: linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0));*/
}
.half
{
width: 50%;
}
.third
{
width: 33.33%;
}
.checkbox,.radio
{
display: inline-block;
margin: 0px 5px;
border: 1px solid rgba(0,0,0,0.5);
width: 14px;
height: 14px;
vertical-align: middle;
cursor: pointer;
position: relative;
padding: 0;
background: white;
}
.radio
{
border-radius: 20px;
margin: 15px 5px 15px 0px;
}
.bulklist .radio
{
margin: 5px 5px 5px 0px;
}
.checkbox span,.radio span
{
display: block;
background: #2f5f9f;
border: 2px solid white;
height: 12px;
}
.radio span
{
background: #bf3f3f;
border-radius: 20px;
}
.checkbox input,.radio input
{
display: none;
}
.cross,.check,.wait,.bowtie,cross,check,wait,bowtie
{
display: inline-block;
vertical-align: middle;
padding: 4px !important;
height: 20px;
width: 20px;
border-radius: 25px;
color: white;
text-align: center;
font-size: 12px;
background: #3fbf3f;
line-height: 1;
}
.cross,cross
{
background: #bf3f3f;
}
.wait,.bowtie,wait,bowtie
{
background: #efbf3f;
}
.note
{
border: 1px dashed rgba(0,0,0,0.25);
padding: 5px 10px;
background: rgba(0,0,0,0.025);
margin-bottom: 10px;
}
.files a
{
position: relative;
display: inline-block;
margin: 0px 10px 10px 0px;
overflow: hidden;
padding: 0;
font-size: 0;
}
.files a input[type="button"]
{
position: absolute;
top: 0;
right: 0;
margin: 0;
background: rgba(255,255,255,0.75);
border-radius: 0;
color: black;
z-index: 5;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
min-width: auto;
width: 40px;
height: 40px;
font-size: 14px;
text-align: center !important;
padding: 0px;
}
.files a img
{
z-index: 1;
position: relative;
width: 120px;
margin: 0;
}
.files span
{
position: absolute;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.5);
z-index: 8;
height: 20px;
padding: 0px 5px 0px 5px;
font-size: 12px;
color: white;
white-space: nowrap;
-webkit-white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.avatar2
{
text-align: center;
}
.avatar2 img
{
width: 100%;
height: 60px;
margin: 0;
padding: 0;
}
.paging2,.col2,.cols2
{
column-count: 2;
}
.col4
{
column-count: 4;
}
.col3,.cols3
{
column-count: 3;
}
.col1
{
column-count: 1;
}
.col1,.col2,.col3,.cols2,.col4,.cols3
{
column-gap: 20px;
position: relative;
}
.col1 div,.col2 div,.col3 div,.col4 div,.grid2 div
{
display: inline-block;
width: 100%;
border: 1px solid rgba(0,0,0,0.2);
padding: 5px 10px;
margin: 0;
margin-bottom: 20px;
border-radius: 3px;
}
.col1 .warning,.col1 .info,.col2 .warning,.col2 .info,.col3 .warning,.col3 .info,.col4 .warning,.col4 .info
{
border: none;
display: block;
padding: 5px 10px !important;
width: calc(100% + 20px);
margin: 0px -10px -5px -10px;
position: relative;
}
.col1 .warning small,.col1 .info small,.col2 .warning small,.col2 .info small,.col3 .warning small,.col3 .info small,.col4 .warning small,.col4 .info small
{
display: block;
background: #f7f7f7;
margin: 0px -10px -5px -10px;
border: none;
border-top: 1px solid rgba(0,0,0,0.125);
border-radius: 0;
animation: none;
}
.col1 div font,.col2 div font,.col3 div font
{
display: block;
color: #df8f2f;
font-size: 12px;
padding: 0;
}
.col1 div font sup,.col2 div font sup,.col3 div font sup
{
background: white;
color: #5f5f5f;
font-size: 5pt;
line-height: 1;
padding: 2px;
display: inline-block;
border: 1px dotted rgba(0,0,0,0.5);
border-radius: 3px;
}
.col1 div input,.col2 div input,.col3 div input,.col1 div textarea,.col2 div textarea,.col3 div textarea,.col1 div select,.col2 div select,.col3 div select,.col1 div p,.col2 div p,.col3 div p
{
padding: 5px 0px !important;
margin: 0 !important;
border: none !important;
font-size: 10pt !important;
color: black;
}
.col1 div select,.col2 div select,.col3 div select
{
padding: 6px 0px !important;
}
.col1 div p,.col2 div p,.col3 div p
{
color: #7f7f7f;
}
.col1 div textarea,.col2 div textarea,.col3 div textarea
{
height: 96px;
}
.col4 div button
{
border: none;
background: white;
display: block;
width: 100%;
font-family: play;
font-size: 20pt;
padding: 15px 20px;
cursor: pointer;
position: relative;
}
.col4 div button check
{
position: absolute;
top: 10px;
right: 10px;
}
.col1 div input[type="checkbox"],.col2 div input[type="checkbox"],.col3 div input[type="checkbox"]
{
margin-right: 5px;
}
.col1 div label,.col2 div label,.col3 div label
{
margin: 0;
padding: 3px 0px;
font-size: 12px;
display: block;
}
.col1 div label small,.col2 div label small,.col3 div label small
{
font-size: 9px;
color: white;
background: #bfbfbf;
border-radius: 4px;
padding: 2px 4px;
}
.cols2 div,.cols3 div
{
break-inside: avoid-column !important;
page-break-inside: avoid !important;
}
.flex2
{
display: flex;
flex-wrap: wrap;
position: relative;
}
.flex2 fieldset,.flex2 .full
{
flex-basis: 50%;
}
.split
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
.split left
{
position: absolute;
top: 0;
left: 0;
width: 50%;
bottom: 0;
overflow: auto;
}
.split right
{
position: absolute;
top: 0;
right: 0;
width: 50%;
bottom: 0;
overflow: auto;
}
.grid2
{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.grid2 div,.grid2 fieldset
{
box-sizing: border-box;
flex-basis: calc(50% - 10px);
flex-grow: 1;
margin: 0;
}
.grid2 label
{
padding: 0 !important;
margin: 5px 0px 0px 5px !important;
width: 100%;
}
.column2,.column3,.column4
{
display: grid;
grid-column-gap: 0px;
grid-template-columns: 50% 50%;
}
.column3
{
grid-template-columns: 33.33% 33.33% 33.33%;
}
.column4
{
grid-template-columns: 25% 25% 25% 25%;
}
.column2 list,.column3 list,.column4 list
{
display: block;
position: relative;
margin: 10px;
padding: 20px;
border-radius: 4px;
box-shadow: inset 0px -25px 50px -25px rgba(0,0,0,0.05);
filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.25));
background: white;
line-height: 1;
text-align: left;
}
.column2 list letter,.column3 list letter,.column4 list letter
{
display: inline-block;
color: white;
background: black;
line-height: 1;
text-align: center;
width: 50px;
height: 50px;
border-radius: 100px;
font-family: 'Impact';
font-size: 30px;
padding: 10px;
margin: 0px 15px 0px 0px;
float: left;
}
.column2 list b,.column3 list b,.column4 list b
{
font-size: 150%;
}
.column2 list hr,.column3 list hr,.column4 list hr
{
margin: 0;
padding: 0;
margin-top: 15px;
}
.column2 list tool,.column3 list tool,.column4 list tool
{
position: absolute;
top: 20px;
right: 20px;
}
.column2 list tool a
{
line-height: 1;
height: 20px;
width: 20px;
font-size: 10px;
padding: 5px;
text-align: center;
border-radius: 30px;
display: inline-block;
margin: 0px 0px 2px 2px;
}
ttable
{
display: table;
width: 100%;
border-collapse: collapse;
}
trow
{
display: table-row;
}
tcell
{
display: table-cell;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
vertical-align: middle;
padding: 0;
}
coin
{
display: inline-block;
border-radius: 100px;
font-size: 6px;
padding: 3px;
width: 14px;
height: 14px;
vertical-align: middle;
line-height: 1;
margin: 0;
background: #ffefbf;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.125);
text-align: center;
}
.big
{
font-size: 150% !important;
padding: 15px 25px !important;
min-width: 200px !important;
}
.selected
{
color: #2f5f9f !important;
}
.selected img
{
background: #2f5f9f !important;
filter: none !important;
}
#tool-bottom,#tool-bottom2,#tool-top,#tool-top2
{
display: inline-block;
position: relative;
}
.progress
{
height: 16px;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: middle;
}
.progressbar
{
display: block;
position: relative;
}
.progressbar *
{
display: inline-block;
height: auto;
vertical-align: middle;
padding: 0;
margin: 0;
line-height: 1;
}
.progressbar outer
{
width: calc(100% - 50px);
background: rgba(0,0,0,0.25);
height: auto;
padding: 0;
font-size: 0;
border-radius: 3px;
}
.progressbar bar
{
height: 12px;
background: #3fbf3f;
border-radius: 3px;
width: calc(100% - 40px);
}
.progressbar span
{
width: 40px;
text-align: center;
}
.channel
{
height: 12px;
display: inline-block;
vertical-align: middle;
}
.dynamic-list
{
position: relative;
z-index: 7;
background: white;
}
.dynamic-list span
{
line-height: 1;
font-size: 12px;
width: 20px;
height: 20px;
padding: 4px;
text-align: center;
border-radius: 20px;
position: absolute;
top: 0px;
right: 5px;
margin-top: 10px;
cursor: pointer;
}
illustration
{
display: table-row;
width: 100%;
}
illustration left,illustration right
{
display: table-cell;
vertical-align: top;
}
illustration img
{
height: 256px;
margin-right: 20px;
pointer-events: none;
user-select: none;
}
.mce-tinymce
{
border: 1px solid rgba(0,0,0,0.2) !important;
border-radius: 4px !important;
overflow: hidden !important;
margin-bottom: 15px !important;
}
.mce-btn
{
background: inherit !important;
}
.mce-edit-area
{
border: none !important;
border-top: 1px solid rgba(0,0,0,0.2) !important;
}
.mce-statusbar
{
border: none !important;
border-top: 1px solid rgba(0,0,0,0.2) !important;
}
.mce-container-body button
{
color: #efaf3f !important;
font-size: 12px !important;
}
.mce-container-body button i
{
color: #5f5f5f !important;
}
.mce-container-body iframe
{
min-height: 200px !important;
}
.mce-flow-layout
{
background: #fbfbfb !important;
}
.mce-toolbar-grp
{
margin: 0 !important;
border: none !important;
padding: 0 !important;
}
.mce-menubar,.mce-statusbar
{
display: none !important;
}
.mce-edit-area
{
min-height: 200px !important;
}
.condensed p
{
margin: 5px 0px;
}
.input-label
{
position: relative;
display: inline-block;
padding: 0;
margin: 0;
}
.input-label:has(span)
{
margin-top: 15px;
}
.input-label span
{
color: white;
font-size: 8px;
border-radius: 4px 4px 0px 0px;
background: rgba(0,0,0,0.5);
padding: 1px 12px;
position: absolute;
left: 0px;
top: -9px;
right: 10px;
min-width: 40px;
text-align: left;
}
.input-label.left span
{
left: auto;
right: 10px;
border-radius: 4px 4px 0px 0px;
}
.input-label.full.left span
{
left: auto;
right: 0px;
border-radius: 4px 4px 0px 0px;
}
.input-label input
{
text-align: left;
border-radius: 0px 0px 4px 4px;
}
.input-label.left input
{
text-align: left;
border-radius: 0px 0px 4px 4px;
}
.vanm
{
font-family: 'Tahoma';
font-size: 16px;
vertical-align: middle;
margin: 0;
font-weight: bold;
}
.vanm img
{
height: 14px;
display: inline-block;
vertical-align: middle;
margin: 0;
margin-right: 10px;
}
.vanm span
{
display: inline-block;
vertical-align: middle;
}
progress,progress::-webkit-progress-bar
{
border: 1px solid rgba(0,0,0,0.2);
background: none;
border-radius: 4px;
color: #3fcf3f;
accent-color: #3fcf3f;
}
progress::-webkit-progress-value,progress::-moz-progress-bar
{
background: #3fcf3f !important;
}
.progress75
{
color: #df9f3f;
accent-color: #df9f3f;
}
.progress75::-webkit-progress-value,.progress75::-moz-progress-bar
{
background: #df9f3f !important;
}
.progress100
{
color: #df3f3f;
accent-color: #df3f3f;
}
.progress100::-webkit-progress-value,.progress100::-moz-progress-bar
{
background: #df3f3f !important;
}
.popupbutton
{
display: inline-block;
cursor: pointer;
vertical-align: middle;
margin: 0;
padding: 0 !important;
line-height: 1;
}
.popupbutton img
{
height: 32px;
border-radius: 4px;
margin: 0;
padding: 0;
line-height: 1;
}
.popupwindow
{
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 0;
background: rgba(0,0,0,0.25);
z-index: 9;
overflow-x: hidden;
overflow-y: auto;
/*animation: none !important;*/
transition: none !important;
text-align: center;
}
.popupwindow *
{
transition: none !important;
}
.popupwindow close
{
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.popupwindow fieldset
{
text-align: left;
}
.popupwindow table
{
margin: 0px auto;
background: white;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
}
.popupwindow table th,.popupwindow table td
{
height: 25px;
border: none;
position: relative;
z-index: 0;
}
.popupwindow display
{
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
border: 1px solid rgba(0,0,0,0.1);
box-sizing: border-box;
}
.popupwindow full
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,0,0,0.5);
z-index: 3;
}
.popupwindow kelas
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,0,0.5);
z-index: 3;
}
.popupwindow .clickable
{
cursor: pointer;
}
.popupwindow .clickable:hover
{
z-index: 4;
}
.popupwindow .clickable:hover::after,.popupwindow .planned:after
{
position: absolute;
top: 0;
left: 0;
right: 0;
content: '';
border: 2px solid #3f7fbf;
box-sizing: border-box;
z-index: 3;
pointer-events: none;
}
.popupwindow .planned:after
{
border: 2px dashed #3fbfbf;
}
center
{
display: block;
text-align: center;
}
center box,.center box,box
{
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
}
.center
{
text-align: center;
}
thumb
{
display: table;
width: 100%;
position: relative;
border: 1px solid rgba(0,0,0,0.125);
margin: 0px 0px 20px 0px;
padding: 0;
border-radius: 10px;
overflow: hidden;
}
thumb before
{
display: block;
position: absolute;
top: 0;
left: calc(36px + 20px);
right: 0;
bottom: 0;
z-index: -1;
border-radius: 0px 10px 10px 0px;
}
thumb divs
{
position: relative;
display: table-cell;
padding: 10px 0px;
vertical-align: top;
}
thumb divs:nth-child(1)
{
width: calc(72px + 20px);
text-align: center;
border-right: 0px solid rgba(0,0,0,0.125);
}
thumb:has(icon) divs:nth-child(1)
{
width: calc(36px + 20px);
}
thumb divs:nth-child(2)
{
padding-left: 15px;
}
thumb divs:nth-last-child(1)
{
text-align: right;
padding-right: 15px;
vertical-align: middle;
}
thumb divs div
{
display: inline-block;
text-align: center;
}
thumb divs li *:first-child()
{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
thumb divs small
{
font-size: 9px;
font-family: play;
color: #7f7f7f;
}
thumb icon,thumb img
{
display: flex;
width: 72px;
height: 72px;
border-radius: 100px;
margin: 0 auto;
padding: 0;
background: #5f5f5f;
color: white;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: bold;
font-family: 'Unica One';
text-shadow: 0px 1px 2px rgba(0,0,0,0.25);
}
thumb icon
{
width: 36px;
height: 36px;
font-size: 24px;
}
thumb a
{
display: block;
}
thumb l1,thumb l2,thumb l3,thumb l4
{
display: block;
line-height: 1;
margin: 2px 0px;
}
thumb l1,thumb l2
{
font-weight: bold;
}
thumb l1
{
font-size: 120%;
display: inline-block;
font-family: 'Play';
}
thumb l4
{
font-size: 80%;
}
.margin20
{
margin-top: 20px;
margin-left: -10px;
margin-right: -10px;
}
.margin20 thumb
{
margin-left: 10px;
margin-right: 10px;
}
flow
{
display: flex;
padding: 20px 0px;
flex-wrap: wrap;
justify-content: stretch;
align-items: center;
}
flow step,.flow2 step,const step
{
display: inline-block;
vertical-align: middle;
padding: 25px 30px;
border-radius: 15px;
box-shadow: inset 0px -10px 30px -10px rgba(0,0,0,0.05);
background: white;
filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.25));
width: calc(33.33% - 45px);
min-height: 80px;
max-height: 800px;
overflow: auto;
align-self: stretch;
flex-grow: 1;
position: relative;
}
flow const
{
width: calc(33.33% - 45px);
display: flex;
justify-content: stretch;
align-items: center;
flex-grow: 1;
min-height: 80px;
align-self: stretch;
}
flow step .tpc
{
margin-top: 20px;
}
.flow2 step,.flow2 const
{
width: calc(50% - 30px);
}
flow step h3
{
margin: 0;
padding: 0;
display: block;
text-align: left;
position: relative;
font-size: 16pt;
margin-bottom: 10px;
font-weight: bold;
color: #2f5f9f;
line-height: 1;
}
flow step h3,flow step h3 *
{
font-family: unica,'Unica One',astro,'Astro';
}
flow step h3 img
{
position: absolute;
top: -5px;
right: -5px;
background: #9f9f9f;
height: 28px;
border-radius: 40px;
}
flow step h4
{
font-weight: bold;
font-size: 14pt;
color: #ef7f2f;
margin: 0;
padding: 0;
}
flow step .load
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
position: absolute;
top: 55px;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
flow step .load img
{
height: 80px;
}
flow step input[type="checkbox"],flow step input[type="radio"]
{
height: auto !important;
}
flow step label
{
text-indent: 30px hanging;
line-height: 1;
}
flow step label i
{
opacity: 0.5;
}
flow .ongoing
{
overflow: hidden;
position: relative;
z-index: 1;
}
flow .ongoing:before
{
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,#1f3f7f,#bf3f7f,#bf7f3f);
z-index: -2;
}
flow .ongoing:after
{
position: absolute;
content: '';
top: 4px;;
left: 4px;
right: 4px;
bottom: 4px;
z-index: 4px;
background: white;
z-index: -1;
border-radius: 12px;
}
flow .ongoing h3
{
color: #9f5f2f;
}
flow arrow,flow gaph
{
vertical-align: middle;
display: inline-block;
position: relative;
background: rgba(0,0,0,0.25);
width: 8px;
height: 6px;
margin: 0px 30px 0px 20px;
}
flow gaph
{
background: none;
}
flow arrow:after
{
content: "";
position: absolute;
top: -8px;
bottom: -8px;
width: 11px;
left: 100%;
border-left: 11px solid rgba(0,0,0,0.2);
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
flow down,flow gapv
{
display: block;
width: 100%;
height: 6px;
margin: 30px calc(calc(33.33% - 45px) / 2 - 3px);
background: rgba(0,0,0,0.15);
background: linear-gradient(90deg,rgba(0,0,0,0.15),rgba(0,0,0,0.05),rgba(0,0,0,0.15));
position: relative;
border-radius: 6px 0px;
}
.flow2 down
{
margin: 30px calc(calc(50% - 45px) / 2 - 3px);
}
flow gapv
{
background: none;
margin: 25px;
}
flow down:before
{
content: "";
position: absolute;
right: 0;
top: -10px;
height: 10px;
width: 6px;
background: rgba(0,0,0,0.15);
border-radius: 6px 6px 0px 0px;
}
flow down:after
{
content: "";
position: absolute;
left: 0;
bottom: -10px;
height: 10px;
width: 6px;
background: rgba(0,0,0,0.15);
border-radius: 0px 0px 6px 6px;
}
.whatsapp
{
cursor: pointer;
display: flex;
align-items: center;
}
.whatsapp img
{
width: 16px !important;
height: 16px !important;
display: inline-block;
}
.whatsapp b
{
padding-left: 3px;
}
form[name="laporan"] b,form[name="laporan"] p,form[name="laporan"] h3
{
line-height: 1.5;
font-size: 11pt;
}
form[name="laporan"] h3
{
font-size: 18pt;
font-weight: bold;
}
form[name="laporan"] ol,form[name="laporan"] ul
{
padding: 0;
margin: 0;
margin-left: 20px;
}
form[name="laporan"] li
{
padding: 0;
margin: 0;
}
form[name="laporan"] p
{
text-indent: 1.25cm;
text-align: justify;
}
form[name="laporan"] li p
{
text-indent: 0;
}
.col2:has(.box)
{
column-gap: 30px !important;
}
.box
{
padding: 0 !important;
border: none !important;
margin: 20px 0px !important;
}
.box main
{
display: block;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.2);
padding: 15px 20px 15px 165px;
font-size: 11pt;
background: white;
position: relative;
font-weight: bold;
overflow: hidden;
line-height: 1;
}
.box:has(.mtool) main
{
padding: 15px 60px 15px 165px;
}
.box main kode
{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 150px;
text-align: center;
padding: 10px 15px;
color: #3f3f3f !important;
background: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.05));
font-family: "Impact";
word-break: break-word;
font-weight: normal;
}
.box main sup
{
display: inline-block;
font-size: 5pt;
font-weight: normal;
padding: 2px 4px;
border-radius: 20px;
border: 1px dotted rgba(0,0,0,0.25);
}
.box main .mtool,.box subs .mtool
{
position: absolute;
top: 0;
right: 10px;
bottom: 0;
display: flex;
align-items: center;
}
.box main .mtool a,.box subs .mtool a
{
border-radius: 50px;
}
.box subs
{
display: block;
width: calc(100% - 30px);
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.125);
padding: 10px 15px 10px 135px;
margin-top: 10px;
font-size: 9pt;
margin-left: 30px;
position: relative;
line-height: 1;
background: #efefef;
}
.box:has(.mtool) subs
{
padding: 10px 55px 10px 135px;
}
.box subs kode
{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 120px;
text-align: center;
padding: 5px 10px;
color: white !important;
background: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.05));
font-family: "Impact";
font-weight: normal;
word-break: break-word;
border-radius: 10px 0px 0px 10px;
}
.box subs:before
{
display: inline-block;
content: '';
position: absolute;
top: -30px;
left: -15px;
width: 20px;
height: calc(50% + 30px);
border-radius: 0px 0px 0px 8px;
border: none;
z-index: -1;
border-left: 1px dashed rgba(0,0,0,0.33);
border-bottom: 1px dashed rgba(0,0,0,0.33);
}
.box subs i
{
opacity: 0.66;
}
@keyframes grow10
{
0%{height:0px;padding-top:0px;padding-bottom:0px;};
100%{height:auto;padding-top:10px;padding-bottom:10px;};
}
@webkit-keyframes webkitgrow10
{
0%{height:0px;padding-top:0px;padding-bottom:0px;};
100%{height:auto;padding-top:10px;padding-bottom:10px;};
}
@keyframes zoomin
{
0%{transform: scale(0,0);opacity:0;};
100%{transform: scale(1,1);opacity:1;};
}
@webkit-keyframes webkitzoomin
{
0%{-webkit-transform: scale(0,0);};
100%{-webkit-transform: scale(1,1);};
}
@keyframes appear
{
0%{opacity:0;}
100%{opacity:1;}
}
@webkit-keyframes webkitappear
{
0%{opacity:0;}
100%{opacity:1;}
}
@media only screen and (min-width: 1600px)
{
.helpbar
{
width: 400px !important;
bottom: 0px;
height: auto;
top: 50px !important;
right: 0px !important;
}
.footer
{
right: 400px !important;
}
.helpicon
{
display: none;
}
.content,section
{
left: 250px;
right: 400px !important;
}
}
@media only screen and (min-width: 1280px)
{
#main
{
display: none;
}
#title
{
padding: 0px 10px 0px 0px;
text-align: left;
}
#title span
{
color: rgba(255,255,255,0.9) !important;
}
.menubar
{
width: 250px !important;
left: 0 !important;
bottom: 0px !important;
box-shadow: inset 0px -25px 50px -25px rgba(0,0,0,0.125) !important;
filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.2)) !important;
z-index: 8;
}
footer
{
left: 250px;
height: 40px !important;
}
.content,section
{
left: 250px;
right: 0;
bottom: 40px !important;
}
.logo
{
display: inline-block;
width: 250px;
border-radius: 0px 0px 0px 0px;
text-align: center;
vertical-align: middle;
margin: 0px 10px 0px 0px;
/*background: #2f5f9f;*/
background: linear-gradient(90deg,#7f7f7f,#3f7fbf,#7f3fbf) !important;
line-height: 1;
/*box-shadow: inset 0px -10px 20px -10px rgba(0,0,0,0.25);*/
font-weight: bold;
font-size: 24px;
padding: 12px 0px;
height: 50px;
font-family: 'Sixtyfour','Gugi','Unica One','Impact' !important;
position: relative;
}
.logo *
{
font-family: 'Sixtyfour','Gugi','Unica One','Impact' !important;
}
.logo:before
{
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0px;
border-radius: 0px 0px 0px 0px;
border-right: 5px solid rgba(255,255,255,0.5);
}
.logo:after
{
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0px;
border-radius: 0px 0px 0px 0px;
border-right: 10px solid rgba(255,255,255,0.33);
}
.logo img
{
border: none;
height: 30px;
border-radius: none;
-webkit-border-radius: none;
}
/*.avatar-outer:before
{
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
width: 10px;
background: rgba(255,255,255,0.33);
}
.avatar-outer:after
{
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
width: 5px;
background: rgba(255,255,255,0.5);
}*/
.tpc2 td
{
font-weight: normal !important;
color: inherit !important;
}
}
@media only screen and (min-width: 721px)
{
legend #tool-top
{
min-width: auto;
-webkit-text-fill-color: white;
border-radius: 0;
font-size: 0;
line-height: 1;
padding: 0px;
margin: -15px 20px -10px -30px;
width: 50px;
height: 60px;
background: none;
box-sizing: border-box;
}
legend #tool-top:after
{
content: "‹";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
bottom: 1px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px 0px 5px 0px;
margin: 0;
z-index: 2;
font-family: 'Arial';
font-size: 40px;
color: #1f3f7f;
border-right: 1px solid rgba(0,0,0,0.125);
-webkit-text-fill-color: #1f3f7f;
}
legend #tool-top:hover
{
opacity: 0.75;
}
}
@media only screen and (max-width: 720px)
{
body,input,textarea,select,.button,#tool-bottom,#tool-top,#tool-top2
{
padding: 10px;
font-size: 16px;
}
/*html,body,header,footer,section,fieldset,legend,a,form,input,select,textarea,table,th,td,h1,h2,h3,span,font,div,small,label,video,b,img,iframe
{
font-family: 'Ubuntu',sans-serif,"HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
}*/
.paging2,.col1,.col2,.col3,.cols2,.cols3
{
column-count: 1 !important;
}
body
{
background: #ffffff;
padding: 0;
}
input[type="text"],input[type="password"],input[type="number"],input[type="file"],textarea,select,input[type="date"],input[type="time"]
{
padding: 10px 15px;
width: 100% !important;
margin-right: 0;
text-shadow: none;
background: rgba(255,255,255,0.5);
box-shadow: none;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 3px;
filter: none;
}
legend select
{
width: auto;
padding: 5px 5px;
margin: 0px 0px 0px 10px;
font-size: 14px;
}
select,select:focus,textarea,textarea:focus,input[type="date"],input[type="date"]:focus,input[type="time"],input[type="time"]:focus,input[type="file"],input[type="file"]:focus
{
border: 1px solid rgba(0,0,0,0.2);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select
{
padding: 10px;
}
input[type="text"]:focus,input[type="password"]:focus,input[type="number"]:focus,select:focus,textarea:focus,input[type="date"]:focus,input[type="time"]:focus,input[type="file"]:focus
{
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.25);
}
input[type="submit"],input[type="button"],#tool-bottom,#tool-top,#tool-top2,.button
{
font-size: 20px;
line-height: 1;
padding: 15px 20px;
box-shadow: none;
text-shadow: none;
border-radius: 3px;
height: 50px;
width: 100%;
text-align: center;
margin: 5px 0px 5px 0px;
background: #3f7fbf;
}
table,th,td
{
font-size: 14px;
}
header,header a,footer,.menubar,.helpbar,.tpc,.tmobile
{
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
}
header
{
padding: 5px 0px;
height: 50px;
color: #7f7f7f;
background: #efefef;
background: linear-gradient(90deg,#7f7f7f,#3f7fbf,#7f3fbf);
font-weight: bold;
z-index: 0;
border-bottom: 1px solid rgba(0,0,0,0.025);
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
header span
{
font-weight: bold;
}
header a
{
font-size: 16px;
vertical-align: middle;
padding: 0;
margin: 0;
background: none !important;
}
header a font
{
display: block;
margin: 0px;
padding: 10px 15px;
color: #5f5f5f;
font-size: 20px;
font-weight: bold;
}
header th,header td
{
padding: 0 !important;
}
#title
{
font-size: 20px;
text-align: center;
text-shadow: none;
font-weight: bold;
}
#titletext
{
font-size: 14px;
font-weight: normal;
}
#mtitle
{
white-space: nowrap;
-webkit-white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
padding: 10px 0px;
z-index: 0;
line-height: 1;
}
#mtitle span,#main span
{
color: white !important;
font-family: 'Gugi' !important;
text-shadow: 0px 1px 2px rgba(0,0,0,0.33);
}
#main,#titletool
{
width: 20px;
}
#main a,#titletool
{
padding: 0px 5px !important;
}
.menubar img,.submenu img
{
border: none;
margin: 0px auto !important;
margin-bottom: 10px !important;
width: 40px !important;
height: 40px !important;
display: block;
/*display: none;*/
}
.menubar .label,.submenu .label,.popupbutton
{
display: none !important;
}
header img
{
margin: 0px 15px;
padding: 0px;
height: 32px;
background: none !important;
filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.33));
}
.content50
{
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
h1,h2,h3,h4,h5,h6
{
text-align: left;
padding: 20px 0px;
line-height: 1.25;
}
h1
{
font-size: 32px;
}
h2
{
font-size: 28px;
}
h3
{
font-size: 24px;
}
.content,section
{
padding: 0;
}
fieldset
{
margin: 0px 0px 8px 0px !important;
padding: 70px 20px 20px 20px !important;
display: block !important;
width: 100% !important;
box-shadow: none;
filter: none;
border: none;
border-radius: 0px;
background: none;
text-align: justify;
z-index: 1 !important;
min-width: auto;
}
fieldset:before
{
display: none;
}
fieldset:after
{
content: '';
position: absolute;
top: -8px;
left: 0px;
right: 0px;
height: 8px;
background: #efefef;
box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.125);
z-index: 1;
border-radius: 0px;
}
legend
{
font-size: 22px;
box-shadow: none;
color: #3f3f3f;
margin: 0px !important;
padding: 15px 20px;
border: none;
position: absolute;
top: 0;
left: 0;
right: 0;
white-space: nowrap;
overflow: auto;
font-weight: normal;
border-radius: 0px;
width: 100vw;
text-align: center;
}
footer
{
background: none;
color: #7f7f7f;
height: 0px;
padding: 0px;
z-index: 0 !important;
white-space: normal;
-webkit-white-space: normal;
}
footer a
{
margin: 0;
text-shadow: none;
filter: none;
}
form
{
display: block !important;
width: 100% !important;
padding: 0 !important;
}
textarea
{
height: 150px !important;
}
.content:before,.content:after
{
display: none;
}
.content,.menubar,section
{
top: 50px;
bottom: 0px;
}
.menubar
{
background: #f9f9f9;
color: #3f3f3f;
width: 100vw !important;
left: -100%;
bottom: 0 !important;
z-index: 9;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
.helpbar
{
right: -100%;
width: 100vw;
top: 55px;
bottom: 5px !important;
background: #ffffff;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.2);
z-index: 9;
}
.avatar-outer
{
width: 100vw;
margin-top: -5px;
margin-left: -5px;
margin-bottom: 5px;
}
.mshow
{
display: inline !important;
}
.mshow2,.col3 label
{
display: block !important;
}
.menubar a,.menubar span
{
padding: 25px 20px;
border: 5px solid #f9f9f9;
position: relative;
font-size: 14px;
display: inline-block;
width: 50% !important;
height: auto;
margin: 0px;
text-align: center;
white-space: nowrap;
-webkit-white-space: nowrap;
text-overflow: ellipsis;
background: white;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1) !important;
filter: none !important;
text-shadow: none !important;
overflow: hidden;
}
#menu-sub
{
padding: 5px;
}
#menu-sub span
{
width: 100% !important;
text-align: center !important;
padding: 20px;
box-shadow: none !important;
background: none !important;
}
#menu-sub span img
{
display: none;
}
#menu-sub span back
{
font-size: 20px;
background: linear-gradient(90deg,#2f5f9f,#9f5f2f,#9f2f9f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#menu-sub font
{
left: 0;
text-align: left;
top: 0;
bottom: 0;
font-size: 50px;
opacity: 0.5;
padding: 0px 20px;
}
.menubar span font
{
position: absolute;
top: 0 !important;
right: 0 !important;
padding: 10px 20px;
font-size: 20px;
}
.submenu
{
display: none;
}
.submenu a
{
padding: 12px 20px 12px 40px;
background: rgba(0,0,0,0.025);
}
.tmobile
{
margin: 0 !important;
}
.tmobile th,.tpc thead,.tpc th,.mhide /*,.submenu a img,.menubar span img,.menubar a img*/
{
display: none !important;
margin: 0;
padding: 0;
height: 0px;
font-size: 0;
}
.tpc
{
/*border-collapse: separate;
border-spacing: 5px 5px;*/
border: none;
width: 100vw;
margin: 0px 0px 15px -20px;
}
#explorer
{
border-spacing: 0px;
border-collapse: collapse;
}
.tpc td,.tpc th
{
padding: 15px 20px;
background: rgba(0,0,0,0.000025) !important;
border-top: 1px solid rgba(0,0,0,0.1) !important;
border-bottom: 1px solid rgba(0,0,0,0.1) !important;
/*border-bottom: 0px solid rgba(0,0,0,0.066) !important;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);*/
font-size: 16px;
text-align: left;
position: relative;
width: 100%;
}
.tpc td:after
{
/*position: absolute;
left: 0px;
right: 0px;
bottom: -1px;
height: 1px;
content: '';
background: #e7e7e7;
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.125);*/
}
.tpc td hr
{
border: none;
margin: 10px auto 10px auto;
}
.tpc tr:nth-child(even)
{
background: none;
}
.tmobile td
{
padding: 0px 0px 10px 0px !important;
font-size: 16px;
text-align: left;
display: block;
width: 100% !important;
}
.tmobile td font
{
font-size: 14px !important;
margin-bottom: 0px;
}
.tmobile th a,.tmobile td a,.cancel,#footertool a
{
background: #7f7f7f;
display: block;
font-size: 18px;
padding: 10px 20px !important;
border-radius: 4px;
min-height: 50px;
width: 100%;
text-align: center;
color: white !important;
border: none;
margin: 5px 0px 5px 0px;
}
#footertool
{
padding: 0px;
}
#footertool a
{
padding-top: 13px !important;
}
#footertool a,#footertool input
{
margin: 0px 0px 10px 0px;
}
.tmobile th a,.tmobile td a,.tpc th a,.tpc td a
{
box-shadow: none;
text-shadow: none;
border-radius: 4px;
padding: 2px 6px;
}
.tpc td form
{
display: block;
}
.tool-button
{
width: 100% !important;
background: none !important;
display: block !important;
color: #3f3f3f !important;
font-size: 20px;
font-weight: normal !important;
padding: 10px;
}
.tpc th a,.tpc td a
{
font-size: 12px;
min-width: 60px;
padding: 4px 8px;
margin: 5px 5px 5px 0px;
}
.tpc td sup,.tpc th sup
{
border-radius: 4px;
font-size: 8px;
}
.tpc .text:after
{
display: none;
}
.tpc .text input
{
height: auto !important;
padding-left: 15px;
}
.tmobile th font,.tmobile td font,.tpc th font,.tpc td font
{
display: block;
font-size: 18px;
color: #df9f3f;
}
.tmobile th font,.tmobile td font
{
display: block !important;
}
.tmobile label input,.tmobile label select,.tmobile label textarea,.tmobile .text input:nth-child(1),.tmobile .select select:nth-child(1),.tmobile .number input:nth-child(1),.tmobile .money input:nth-child(1),.tmobile .date input:nth-child(1),.tmobile .time input:nth-child(1),.tmobile .disabled input:nth-child(1),.tmobile .username input:nth-child(1),.tmobile .password input:nth-child(1),.tmobile .phone input:nth-child(1),.tmobile .email input:nth-child(1),.tmobile .text .full,.tmobile .disabled select
{
height: 40px !important;
padding-left: 50px;
}
.tmobile .text:after,.tmobile .select:after,.tmobile .number:after,.tmobile .money:after,.tmobile .date:after,.tmobile .time:after,.tmobile .username:after,.tmobile .password:after,.tmobile .disabled:after,.tmobile .phone:after,.tmobile .email:after
{
height: 38px;
width: 38px;
padding-top: 5px;
border-radius: 3px 0px 0px 3px;
left: 1px;
bottom: auto;
border: none;
border-right: 1px solid rgba(0,0,0,0.2);
}
.label,.label2
{
background: black;
color: white;
margin: 0px auto 10px auto;
vertical-align: middle;
text-align: center;
padding: 10px 0px;
height: 40px;
width: 40px;
line-height: 1;
font-size: 20px;
border-radius: 40px;
font-weight: bold;
border: 0px solid rgba(255,255,255,0.9);
box-shadow: inset 0px -15px 30px -15px rgba(0,0,0,0.125);
}
.label
{
display: block !important;
}
.label2
{
display: inline-block !important;
margin: 0px 15px 0px 0px;
padding: 12px;
border: none;
font-size: 30px;
height: 55px;
width: 55px;
vertical-align: middle;
}
.smaller
{
height: 40px;
width: 40px;
font-size: 20px;
}
.label-outer
{
padding: 20px;
color: white;
}
.warning span,.info span
{
box-shadow: none;
}
form[name="filter"]
{
height: 0px;
overflow: hidden;
margin: 0;
padding: 0;
}
form[name="filter"] input[type="text"],form[name="filter"] select
{
margin: 0px 0px 10px 0px;
font-size: 16px;
max-width: 100%;
}
form[name="filter"] labl,form labl
{
display: block;
}
form[name="filter"] labl font,form labl font
{
top: -6px;
padding: 0;
}
.filter
{
position: relative;
z-index: 3;
color: #2f5f9f;
padding: 2px 0px;
font-size: 30px;
font-weight: bold;
display: inline-block;
vertical-align: middle;
/*width: 20px;
height: 20px;*/
text-align: center;
margin: 0px auto;
margin-left: 10px;
text-align: center;
/*background: #2f5f9f;*/
cursor: pointer;
/*border-radius: 30px;*/
}
.filter:hover
{
filter: brightness(115%) contrast(100%);
}
.tmobile .file
{
position: relative !important;
padding: 0px !important;
}
.tmobile .file a
{
color: inherit !important;
text-align: left;
margin: 0px !important;
padding: 10px 15px !important;
min-height: auto !important;
}
.tmobile .file sup
{
position: absolute !important;
top: 5px !important;
right: 5px !important;
font-size: 12px !important;
padding: 1px 6px !important;
}
.tmobile .tpc
{
width: 100% !important;
margin: 0 !important;
}
.tmobile .tpc td
{
padding: 10px 0px !important;
}
.tpc .checkbox
{
position: absolute;
top: 20px;
left: 20px;
margin: 0;
}
.checkbox,.radio
{
border-radius: 0px;
border: 2px solid #7f7f7f;
width: 20px;
height: 20px;
box-shadow: 0px 0px 0px 2px white;
}
.checkbox span,.radio span
{
width: 16px;
height: 16px;
}
.radio
{
margin: 10px 5px 10px 0px;
}
.radio,.radio span
{
border-radius: 20px;
}
.bulklist .option
{
width: 100%;
}
.files a
{
border-radius: 0px !important;
display: inline-block !important;
width: auto !important;
margin: 0px 10px 10px 0px !important;
background: rgba(0,0,0,0.125) !important;
}
.files a input
{
box-shadow: none !important;
filter: none !important;
border-radius: 50px !important;
}
.files a span
{
padding: 5px;
height: auto;
}
.foto
{
display: block;
margin: 0px auto;
padding: 0;
width: 50vw;
height: 50vw;
border-radius: 100px;
border: 2px solid rgba(0,0,0,0.125);
background-color: rgba(0,0,0,0.05) !important;
box-shadow: none;
}
.lampiran-tool
{
right: 0px;
width: 50px;
text-align: right;
}
.lampiran-tool a
{
margin: 0px 0px 0px 0px !important;
background: none !important;
}
.mpadding
{
padding-left: 30px;
}
.bottom-tool
{
display: inline-block !important;
position: fixed;
bottom: 60px;
right: 20px;
}
.bottom-tool a
{
font-size: 35px !important;
height: 70px !important;
width: 70px !important;
padding: 0px !important;
border-radius: 70px !important;
display: inline-block !important;
text-align: center;
margin: 0 !important;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25);
}
.neutral
{
z-index: 0 !important;
}
#tool-row
{
display: inline-block;
position: relative;
z-index: 9;
}
#tool-bottom,#tool-bottom2,#tool-top,#tool-top2
{
position: fixed;
z-index: 8;
}
#tool-bottom
{
right: 20px;
bottom: 60px;
min-width: auto;
width: auto;
margin: 0;
border-radius: 0;
background: none;
font-size: 0;
padding: 0;
color: none;
}
#tool-bottom:before
{
position: absolute;
bottom: 0;
right: 0;
content: '';
line-height: 1;
color: rgba(0,0,0,0);
background-color: inherit !important;
border: 5px solid rgba(0,0,0,0);
font-size: 60px !important;
font-weight: bold;
transform: scale(1.1,1.1);
text-align: center;
width: 50px;
height: 50px;
border-radius: 100px;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25);
}
#tool-bottom:after
{
position: absolute;
bottom: 12px;
right: 0;
content: '+';
line-height: 1;
background: none !important;
color: white !important;
border: 5px solid rgba(0,0,0,0);
font-size: 60px !important;
font-weight: bold;
text-align: center;
width: 50px;
height: 50px;
border-radius: 100px;
}
#tool-bottom2
{
bottom: 0;
z-index: 9;
width: 100%;
left: 0;
margin: 0;
height: auto;
padding: 15px;
font-size: 20px;
line-height: 1;
border: 20px solid white;
border-left: 20px solid white;
border-right: 20px solid white;
border-radius: 23px;
font-weight: bold;
box-shadow: none;
filter: none;
}
#tool-top,#tool-top2
{
top: 0px;
left: 0px;
z-index: 9;
width: 60px;
min-width: auto;
height: 50px;
margin: 0;
border-radius: 0px;
font-size: 0;
overflow: hidden;
background: #efefef;
background: linear-gradient(90deg,#7f7f7f,#503c9b);
}
#tool-top2
{
width: 100px;
background: linear-gradient(90deg,#1f3f7f,#503c9b);
}
#tool-top:hover,#tool-top2:hover
{
filter: brightness(100%) contrast(100%);
}
#tool-top:after,#tool-top2:after
{
position: absolute;
left: 10px;
width: 50px;
top: -6px;
bottom: 8px;
line-height: 1;
font-size: 50px !important;
content: '‹';
background: none !important;
color: white !important;
padding-left: 0px;
font-weight: normal;
z-index: 2;
text-align: center;
-webkit-text-fill-color: white;
}
.list
{
background: #1f5f7f !important;
top: 45px;
}
.list a
{
text-align: left !important;
color: white !important;
padding: 10px 20px !important;
margin: 0 !important;
background: none !important;
min-height: auto !important;
}
#menu-main
{
overflow-y: auto;
box-shadow: none;
filter: none;
padding: 5px;
}
.channel
{
height: 16px;
}
.border th,.border td
{
border-left: none;
border-right: none;
}
.tpc2
{
table-layout: fixed;
}
.tpc2,.tpc2 th,.tpc2 td
{
border-collapse: separate;
border-spacing: 20px 0px;
}
flow step .tpc2,flow step .tpc2 th,flow step .tpc2 td
{
border-spacing: 0;
}
flow step .tpc2 tr
{
box-shadow: none !important;
}
flow step .tpc2 .tbot
{
margin: 0 !important;
padding: 0 !important;
}
flow step .tpc td:last-child
{
padding: 0 !important;
}
.tpc3
{
/*border-collapse: separate;
border-spacing: 0px 20px;*/
}
.tpc3 tr
{
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
}
.tpc3 th,.tpc3 td
{
display: block;
border: none !important;
}
.tpc2 tr
{
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.125) !important;
position: relative !important;
transform: scale(1,1) !important;
display: block !important;
background: white !important;
}
.tpc2 .mtool
{
display: inline-block;
position: absolute;
top: 15px;
right: 10px;
}
.tool-list-inner
{
width: 75%;
max-width: auto;
}
.tool-list-inner a
{
white-space: wrap;
}
.tpc2 .mtool .tool-list-button
{
top: 0;
right: 0;
}
.tpc2 td
{
display: block;
padding: 3px 20px;
border: none !important;
line-height: 1;
position: static;
}
.tpc2 td .label,.mlist .label2
{
float: left;
margin: 0 !important;
margin-top: 0px !important;
margin-right: 10px !important;
width: 50px !important;
height: 50px !important;
line-height: 1;
font-size: 34px !important;
text-align: center;
padding: 8px !important;
font-family: 'Unica One';
}
.tpc2 .ttop
{
padding-top: 20px;
}
.tpc2 .ttop span
{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tpc2 .tbot,.tpc2 .line2
{
padding-bottom: 20px;
margin-bottom: 20px;
}
.tpc2 .line2
{
padding-top: 20px;
margin-top: -20px;
}
.checklist th
{
display: inline-block !important;
border: none !important;
padding: 0px 0px 30px 0px !important;
margin: 0 !important;
}
.column2,.column3,.column4,.grid2,.grid3,.grid4
{
display: block;
}
.grid2 div,.grid2 fieldset
{
margin-bottom: 20px;
}
.column2 list,.column3 list,.column4 list
{
margin: 0px -20px 0px -20px;
border-radius: 0;
box-shadow: none;
filter: none;
border-top: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.column2 list b,.column3 list b,.column4 list b
{
font-size: 125%;
}
.column2 list hr,.column3 list hr,.column4 list hr
{
display: none;
}
.column2 list tool,.column3 list tool,.column4 list tool
{
top: 0;
right: 0;
}
.input-label
{
display: block;
}
.input-label:has(span)
{
margin-top: 20px;
}
.input-label span
{
font-size: 10px;
padding: 3px 6px;
top: -15px;
right: 0;
/*left: 10px;
bottom: auto;
border-radius: 0px;*/
}
.input-label.left span,.input-label.full.left span
{
/*left: auto;
right: 10px;
border-radius: 2px;*/
}
.input-label input
{
border-radius: 0px 0px 4px 4px;
}
illustration left
{
display: block;
text-align: center;
}
illustration img
{
margin: 0;
}
illustration,illustration right
{
width: 100%;
display: block;
}
.mlist
{
border: 1px solid rgba(0,0,0,0.2);
padding: 15px 20px;
margin: 0 !important;
margin-bottom: 10px !important;
}
thumb divs
{
vertical-align: middle;
}
thumb divs:nth-child(1)
{
width: calc(50px + 30px) !important;
border: none;
}
thumb divs:nth-child(2)
{
padding-left: 0;
}
thumb l1,thumb l2,thumb l3,thumb l4
{
text-align: left;
margin: 4px 0px;
}
thumb l1
{
font-size: 100%;
font-weight: normal;
}
thumb icon,thumb img
{
width: 50px;
height: 50px;
font-size: 34px;
}
.margin20
{
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.margin20 thumb
{
margin-left: 0;
margin-right: 0;
}
thumb l1 h1,thumb l1 h2,thumb l1 h3
{
display: block;
margin: 0;
padding: 0;
}
.tmb label
{
padding: 0px !important;
margin-bottom: 20px !important;
}
.summary
{
min-width: auto;
display: block;
padding-top: 35px;
margin: 0px 0px 20px 0px;
}
.summary font
{
padding-top: 10px;
}
.tpc center
{
text-align: left;
}
flow,.flow2
{
display: block;
}
flow step,flow const
{
width: 100% !important;
display: block !important;
}
flow step .tpc
{
width: 100%;
position: relative;
margin: 0 !important;
}
flow step .tpc th,flow step .tpc td
{
padding: 0;
display: block;
border: none !important;
width: 100%;
}
flow step .tpc th:first-child,flow step .tpc td:first-child
{
padding-top: 10px !important;
}
flow step .tpc th:last-child,flow step .tpc td:last-child
{
padding-bottom: 10px !important;
}
flow arrow,flow down,.flow2 down
{
display: block;
margin: 15px auto 25px auto;
width: 6px;
height: 8px;
background: rgba(0,0,0,0.15) !important;
border-radius: 0px;
}
flow arrow:after,flow down:after,.flow2 down:after
{
top: 100%;
left: -8px;
right: -8px;
bottom: auto;
border-top: 11px solid rgba(0,0,0,0.2);
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: none;
background: none;
border-radius: 0px;
}
flow down:before,.flow2 down:before
{
display: none;
}
.tool-top3
{
font-size: 20px;
line-height: 1;
padding: 15px 20px;
box-shadow: none;
text-shadow: none;
border-radius: 100px;
height: 50px;
width: 100% !important;
text-align: center;
margin: 5px 0px 5px 0px;
background: #3f7fbf;
position: static;
background: #2f5f9f;
color: white;
cursor: pointer;
border: none;
display: inline-block;
vertical-align: middle;
font-family: 'Play','Unica One','Impact';
font-weight: bold;
line-height: 1;
}
.tool-top3 img,.tool-top3:before
{
display: none;
}
.flex2
{
display: block;
}
.tpc .tmb tr
{
box-shadow: none !important;
}
.tpc .tmb td
{
padding: 5px 0px !important;
}
.tpc .tmb td font
{
display: block !important;
}
.tpc .tmb td div
{
padding: 5px 0px !important;
}
.tpc .foto,.tmobile .foto
{
width: 160px;
height: 160px;
margin: 15px auto;
display: block;
}
.ttop .tmb,.ttop .tmb tr,.ttop .tmb td,.ttop .tmb td div
{
margin: 0 !important;
padding: 0 !important;
}
.ttop .tmb td:first-child
{
font-weight: bold;
font-size: 12pt;
}
.ttop .tmb td
{
padding-bottom: 10px !important;
}
.split
{
position: relative;
}
.split left,.split right
{
position: relative;
width: 100%;
}
.file dummy
{
margin-top: 150%;
}
}