body {
    font-family: arial;
}
a {
    cursor: pointer;
}
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
/* SCROLL BAR */

::-webkit-scrollbar {
    width: 6px;
    background-color: #eef4f5;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: #608ea8;
    border-radius: 5px;
    opacity: 0.7;
}
#PilihVendor {
    position: absolute;
    top: 50px;
    left: 250px;
    /* background: #546772; */
    background: #406882;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 99999;
}
#PilihVendor div {
    text-align: center;
    padding: 10px;
    cursor: pointer;
}
#PilihVendor div:hover {
    /* background: #98bace; */
    background: #b1d0e0;
}
#PilihVendor img {
    max-width: 150px;
    max-height: 150px;
}

div.bersih {
    clear: both;
}
a.tombol {
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px !important;
    color: #fff;
    background: #27966b;
    border-radius: 3px;
    transition: all 0.2s ease;
}
a.tombol:hover {
    /* background: #12c5ff; */
    background: #41e6a7;
}
a.tombol:first-child {
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px !important;
    color: #fff;
    background: #e14444;
    border-radius: 3px;
    transition: all 0.2s ease;
}
a.tombol:first-child:hover {
    background: #ff8585;
}
.editInput > .addPel > .tombol {
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px !important;
    color: #fff;
    background: #27966b;
    border-radius: 3px;
    transition: all 0.2s ease;
}
.editInput > .addPel > .tombol:hover {
    /* background: #12c5ff; */
    background: #41e6a7;
}
.editInput > .addPel > .tombol:last-child {
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px !important;
    color: #fff;
    background: #e14444;
    border-radius: 3px;
    transition: all 0.2s ease;
}
.editInput > .addPel > .tombol:last-child:hover {
    background: #ff8585;
}
a.tombol:active {
    box-shadow: inset 2px 2px 3px #1981a4, inset -2px -2px 3px #d0f4ff;
    text-shadow: -1px -1px 2px #fff;
}
div.left {
    /* background: #3c4a53; */
    background: #1a374d;
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    min-height: 100%;
}
select,
input,
textarea {
    border-radius: 3px;
    border: 1px solid #ccdfee;
    color: #3c7097;
    background: #fafdff;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font-size: 12px;
    color: #c7d2dc;
}
select {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
}
select.placeHolder,
select.placeHolder > option:first-child {
    color: #c7d2dc;
}
select.placeHolder > option {
    color: #094d7e;
}
/*################### Login #######################*/
#loginBox {
    background: linear-gradient(#d7f3ff, #086089);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
#loginInput {
    margin: auto;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 150px;
    border-radius: 5px;
    border: 1px solid #6dc6f0;
    border-left: 1px solid #2486b4;
    border-top: 1px solid #2486b4;
    box-shadow: 1px 1px 1px #034b6d, -1px -1px 1px #b4e8ff;
    padding: 30px;
    background: transparent;
}
#loginInput.salah {
    background: #ff440b;
}
#loginInput h3 {
    margin: 0px;
    margin-bottom: 10px;
    color: #0072af;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #2eb3ff, 0 0 30px #2eb3ff, 0 0 40px #2eb3ff, 0 0 50px #2eb3ff, 0 0 75px #2eb3ff;
}
#loginInput input {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #0e77a8;
    margin-bottom: 10px;
}
#loginInput .tombol {
    float: right;
    font-weight: bold;
}
#loginInput i {
    display: none;
    margin-top: 10px;
    font-size: 12px;
    color: #ffbb95;
}
/*################### Konten #######################*/
/*================ Kiri Menu ================*/
div.left h1 {
    color: #c1d3df;
    text-align: center;
    /* margin: 0px; */
    /* margin-left: 3px; */
    width: 100%;
    padding-bottom: 10px;
    /* padding: 5px; */
    font-family: "Arial Black";
    font-size: 18px;
    /* text-shadow: -2px -2px 2px #666; */
    /* color: #0072af; */
    /* text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #2eb3ff, 0 0 30px #2eb3ff, 0 0 40px #2eb3ff, 0 0 50px #2eb3ff, 0 0 75px #2eb3ff; */
}
div.left .logo {
    text-align: center;
    /* background: #546772; */
    /* background: #406882; */
    color: #fff;
    /* box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.8), inset 0 2px 5px rgba(0, 0, 0, 0.8); */
    padding: 10px;
    margin: 14px;
}
div.left .logo img {
    max-width: 150px;
    max-height: 100px;
}
div.left .pencarian h4 {
    margin: 10px 0 0 5px;
    padding: 2px;
    color: #bfd4e6;
}
div.left .pencarian select,
div.left .pencarian input {
    width: 85%;
    margin: 5px;
    color: #335b7d;
    background: #c5d9ea;
    border-radius: 5px;
    padding: 3px;
    border: 0px solid #000;
}
div.left ul {
    margin-top: 5px;
}
div.left ul:first-child {
    margin-top: 15px;
}
div.left ul li {
    /* position: relative;
    padding: 5px 10px;
    cursor: pointer;
    color: #c5d9ea;
    background: #657b89;
    border-bottom: 1px dotted #3c4a53; */
    position: relative;
    padding: 15px 10px;
    cursor: pointer;
    color: #c5d9ea;
    /* background: #657b89; */
    background: #406882;
    /* border-bottom: 1px dotted #3c4a53; */
}
div.left ul li:last-child {
    border-bottom: 0px dotted #3c4a53;
}
div.left ul li:hover {
    background: #c5d9ea;
    color: #3c4a53;
}
div.left ul li.menuPilih {
    /* background: #c5d9ea; */
    background: #b1d0e0;
    color: #3c4a53;
    cursor: default;
}

a.ultah {
    margin-top: 10px;
    margin-left: 13px;
    display: inline-block;
    width: 85%;
    color: #c5d9ea;
    padding: 10px 3px;
    border: 0px dotted #c5d9ea;
    border-radius: 10px;
    text-align: center;
    /* box-shadow: inset 0 0 15px #000; */
    /* background: #718896; */
    background: #406882;
    cursor: pointer;
}
a.exit {
    /* margin: auto;
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 10px;
    text-align: center;
    font-weight: bold;
    background: #fdcfcf;
    box-shadow: inset 2px 2px 3px #ffebeb, inset -2px -2px 3px #c13636;
    border: 1px solid #eb7272;
    color: #cc2727; */
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 10px;
    background-color: #e14444; /* Green */
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
}
a.tombol.exit:hover {
    background: #ff0e0e;
}
a.tombol.exit:active {
    box-shadow: inset 2px 2px 3px #c13636, inset -2px -2px 3px #ffebeb;
}

/*=========== Sebelah Kanan =============*/
div.right {
    background: #eef4f5;
    position: absolute;
    top: 0;
    right: 0;
    left: 250px;
    padding-left: 20px;
    min-height: 100%;
}
#Load {
    background: #eef4f5;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.9;
    visibility: visible;
    z-index: 9;
    transition: opacity 0.3s linear, visibility 0.3s linear;
}
div.right #Load {
    left: 250px;
}
#Load img {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 500px;
    height: auto;
}
#Load.hide {
    opacity: 0;
    visibility: hidden;
}
div.left:after {
    content: "";
    background: #2f3e47;
    position: absolute;
    top: 0;
    right: 0;
    /* width: 30px; */
    min-height: 100%;
    background: linear-gradient(-90deg, #223038, transparent); /* Standard syntax */
}

div.right #listCari {
    display: inline-block;
    background: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    color: #094d7e;
}
div.right #listCari h4 {
    margin: 0px;
    display: inline-block;
}
div.right input[data="tanlah"],
div.right input[data="tanggal"] {
    width: 40px;
    text-align: center;
}
div.right .pencarian {
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #094d7e;
    margin-top: 10px;
    min-height: 30px;
}
div.right .pencarian .tombol {
    margin-left: 10px;
    font-size: 11px;
    padding: 2px 15px;
}
div.right .inpHidden {
    display: none;
}
div.right .halaman {
    position: absolute;
    right: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #094d7e;
    margin-top: 10px;
    min-height: 30px;
}
div.right .halaman a {
    color: #ccdfee;
}
div.right .halaman a.aktif {
    cursor: pointer;
    color: #0a4770;
}
div.right .halaman a.aktif:hover {
    color: #0e79bf;
}
table.data {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
table.data thead tr {
    /* box-shadow: inset 0px 2px 18px #19435c; */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /* background: #95bcd2; */
    /* background: #4f768d; */
    background: #1a374d;
}
table.data thead th {
    color: #d8f1ff;
    /* text-shadow: 2px 2px 3px #5d859c; */
    padding: 10px;
}

#table {
    margin-top: 0px;
}
#table > table.data {
    width: auto;
}
#table > table.data th {
    padding: 10px 0px;
}
table.data th:first-child {
    /* border-top-left-radius: 5px; */
}
table.data th:last-child {
    /* border-top-right-radius: 5px; */
}
table.data td {
    padding: 3px 5px;
    color: #335d76;
    border-left: 1px solid #eef4f5;
}
table.data tbody tr:nth-child(odd) {
    background: #e3edef;
}
table.data tbody tr:nth-child(even) {
    background: #d6e2e4;
}
table.data tbody tr:hover td {
    color: #125d89;
    /* text-shadow: 1px 1px 2px #fff; */
    background-color: rgb(158, 214, 248);
    /* box-shadow: inset 0px 11px 8px -10px #094f7e, inset 0px -11px 8px -10px #094f7e; */
}
table.data td.tengah {
    text-align: center;
}
table.data td > span {
    display: block;
}
table.data td > span[data="Pelatihan"] {
    border-top: 1px dashed #eef4f5;
    padding: 5px 0;
}
table.data td > span[data="Pelatihan"]:first-child {
    border-top: 0px dotted #fff;
}
table.data td > span i {
    font-size: 12px;
}
table.data tr.notFound > td {
    text-align: center;
    vertical-align: middle;
    height: 300px;
}
table.data tr.notFound > td > b {
    font-size: 30px;
    font-weight: bold;
    background-color: #60899f;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
}
#table > table.data {
    position: absolute;
    z-index: 1;
}
#table > div {
    margin: auto;
    position: fixed;
    left: 250px;
    bottom: 0px;
    right: 0px;
    padding-left: 20px;
    overflow-y: scroll;
}
#table > div > table {
    margin-top: -30px;
}
/*===========> TD Peserta  */
table[data="Peserta"] td b.tipe {
    font-size: 12px;
}
/*table[data="Peserta"] td:first-child:hover, table[data="Peserta"] td:nth-child(2):hover, table[data="Peserta"] td:last-child span:hover {
		color: #0088D7 !important;
	}/**/
table .ViewPeserta:hover,
table .EditData:hover {
    color: #0088d7 !important;
    cursor: pointer;
}
/*===========> Tabel TD Center  */
table[data="Perusahaan"] td:last-child,
table[data="Pelatihan"] td:first-child,
table[data="Pelatihan"] td:nth-child(2),
table[data="Pelatihan"] td:last-child {
    text-align: center;
}

img.user {
    width: 10px;
}
/*===== VIew Peserta ==========*/
#view {
    margin: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(71, 96, 111, 0.9);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}
#view.on {
    opacity: 1;
    visibility: visible;
}
#view #isiData {
    margin: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e9f2f7;
    color: #015175;
    border-radius: 5px;
    width: 80%;
    min-width: 400px;
    max-width: 600px;
    padding: 10px;
    overflow-y: auto;
}

#view #isiData table td,
#view #isiData table th {
    color: #015175;
}
#view #isiData table td {
    vertical-align: top;
}
#view #isiData table {
    width: 100%;
}
#view #isiData table.pelatihan {
    font-size: 13px;
}
#view #isiData table.pelatihan th {
    background: #489dc4;
    color: #e2f7ff;
    padding: 5px 2px;
}
#view #isiData table.pelatihan td {
    padding: 3px 2px;
}
#view #isiData table.pelatihan tr:nth-child(even) td {
    background: #cae4f0;
}
#view #isiData table.pelatihan tr:nth-child(odd) td {
    background: #dff0f8;
}
#view #isiData table.pelatihan td:nth-child(1),
#view #isiData table.pelatihan td:nth-child(2) {
    text-align: center;
}
#view #isiData h3 {
    margin: 0px 0px 10px -10px;
    display: inline-block;
    background: #0774a7;
    color: #d4f2ff;
    font-size: 22px;
    padding: 5px 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: inset -2px -2px 10px #013d58, inset -2px 2px 5px #c9efff;
    text-shadow: 2px 2px 2px #013d58;
}
/* OPtion di View Data */
#view .MenuOpsi {
    position: absolute;
    right: 10px;
}
#view .MenuOpsi img {
    width: 30px;
}
#view .MenuOpsi > div {
    position: absolute;
    top: 18px;
    right: 0px;
    width: 150px;
    background: #c9dce5;
    border-radius: 5px;
    /* box-shadow: 1px 1px 5px #206787; */
    display: none;
}
#view .MenuOpsi > b {
    color: #129edf;
    /* text-shadow: 1px 1px 1px #0e6892, -1px -1px 1px #ffffff; */
}
#view .MenuOpsi > div > a {
    display: block;
    text-align: right;
    padding: 5px;
    border-radius: 5px;
}
#view .MenuOpsi > div > a:hover {
    /* box-shadow: inset 0px 11px 8px -10px #094f7e, inset 0px -11px 8px -10px #094f7e; */
    background-color: #91b0bf;
}
#view .MenuOpsi:hover div {
    display: inline-block;
}
#view .isi[data="Peserta"] #EditData {
    display: none;
    margin: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e9f2f7;
    color: #015175;
    border-radius: 5px;
    width: 80%;
    min-width: 400px;
    max-width: 600px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
}

#view input,
#view select,
#view textarea {
    margin-bottom: 5px;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 18px;
    border: 1px solid #87a6c0;
    font-family: arial;
}

#view input::-webkit-input-placeholder,
#view textarea::-webkit-input-placeholder {
    font-size: 18px;
}
#view .addPel {
    text-align: right;
}
#view .addPel input {
    width: 75%;
    font-size: 14px;
    padding: 3px;
    display: none;
    margin: 0px;
}
#view table.pelatihan.edit td:last-child {
    text-align: center;
}
#view table.pelatihan.edit a.tombol {
    padding: 1px 3px;
    font-weight: bold;
    background: #fdcfcf;
    /* box-shadow: inset 2px 2px 3px #ffebeb, inset -2px -2px 3px #c13636; */
    /* border: 1px solid #eb7272; */
    color: #cc2727;
}

#view table.pelatihan.edit a.tombol:hover {
    background: #f86e6e;
}
#view table.pelatihan.edit a.tombol:active {
    box-shadow: inset 2px 2px 3px #c13636, inset -2px -2px 3px #ffebeb;
}
#view .InputBy {
    position: absolute;
    right: 10px;
    font-size: 10px;
    text-align: right;
}
.EditPeserta {
    display: grid;
    /* grid-template-columns: 135px 135px 135px 135px; */
    grid-template-columns: repeat(6, minmax(calc(calc(100% / 6) - calc(50px / 6)), auto));
    width: 100%;
    grid-gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}
.EditPeserta * {
    box-sizing: border-box;
}
.EditPeserta :first-child,
.EditPeserta :nth-child(9),
.EditPeserta :nth-child(14),
.EditPeserta :nth-child(15),
.EditPeserta :nth-child(18) {
    grid-column: 1 / 7;
}
.EditPeserta :nth-child(2) {
    grid-column: 1 / 3;
}
.EditPeserta :nth-child(4) {
    grid-column: 4 / 6;
}
/* .EditPeserta :nth-child(2), */
.EditPeserta :nth-child(6) {
    grid-column: 1 / 3;
}
.EditPeserta :nth-child(7) {
    grid-column: 3 / 5;
}
.EditPeserta :nth-child(8) {
    grid-column: 5 / 7;
}
.EditPeserta :nth-child(10),
.EditPeserta :nth-child(12),
.EditPeserta :nth-child(16),
.EditPeserta :nth-child(19) {
    grid-column: 1 / 4;
}
.EditPeserta :nth-child(11),
.EditPeserta :nth-child(13),
.EditPeserta :nth-child(17),
.EditPeserta :nth-child(20) {
    grid-column: 4 / 7;
}
.EditPeserta :last-child {
    grid-column: 5 / 7;
}
/* .EditPeserta :nth-child(2) {
    grid-column: 1 / 5;
} */
/*============= FormPeserta */
/* #view .EditPeserta [name="nama"],
#view .EditPeserta [name="emaper"],
#view .EditPeserta [name="perusahaan"],
#view .EditPeserta [name="bagian"],
#view #EditData textarea {
    width: 100%;
}
#view .EditPeserta [name="temlah"] {
    width: 48%;
}
#view .EditPeserta [name="tahun"] {
    width: 17%;
    text-align: center;
}
#view .EditPeserta [name="gen"],
#view .EditPeserta [name="agama"],
#view .EditPeserta [name="pendidikan"] {
    width: 32.7%;
}
#view .EditPeserta [name="tlp"] {
    width: 35%;
}
#view .EditPeserta [name="email"] {
    width: 64%;
}
#view .EditPeserta [name="tlpper"],
#view .EditPeserta [name="fax"] {
    width: 49.5%;
}
#view .EditPeserta [name="atasan"] {
    width: 44%;
}
#view .EditPeserta [name="jabatan"] {
    width: 55%;
} */
#view .tombolEdit {
    margin-top: 10px;
    text-align: right;
}
/*============= FormPerusahaan & Pelatihan*/
#view .isi:not([data="Peserta"]) label {
    display: block;
}
#view .isi:not([data="Peserta"]) input,
#view .isi:not([data="Peserta"]) textarea,
#view .isi:not([data="Peserta"]) select {
    width: 100%;
    position: relative;
}
#view .isi:not([data="Peserta"]) [name="tanggal"] {
    width: 20%;
}
#view .isi:not([data="Peserta"]) [name="bulan"] {
    width: 45%;
}
#view .isi:not([data="Peserta"]) [name="tahun"] {
    width: 30%;
}
/*####################### PENAMBAHAN ###############*/
#Penambahan {
    margin-top: 10px;
    width: 100%;
}
#Penambahan .A,
#Penambahan .B {
    display: inline-block;
    min-width: 400px;
    width: 48%;
    float: left;
}
#Penambahan .B {
    float: right;
    margin-right: 20px;
}
#FormPelatihan :nth-child(6) {
    display: grid;
    /* grid-template-columns: 135px 135px 135px 135px; */
    grid-template-columns: repeat(6, minmax(calc(calc(100% / 6) - calc(50px / 6)), auto));
    width: 100%;
    grid-gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}
#FormPelatihan :nth-child(6) :nth-child(1) {
    grid-column: 1 / 3;
}
#FormPelatihan :nth-child(6) :nth-child(4) {
    grid-column: 5 / 7;
}
#FormPeserta :nth-child(6) {
    display: grid;
    /* grid-template-columns: 135px 135px 135px 135px; */
    grid-template-columns: repeat(6, minmax(calc(calc(100% / 6) - calc(50px / 6)), auto));
    width: 100%;
    grid-gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}
#FormPeserta :nth-child(6) :nth-child(1) {
    grid-column: 1 / 3;
}
#FormPeserta :nth-child(6) :nth-child(4) {
    grid-column: 5 / 7;
}
#FormPeserta :nth-child(10) {
    display: grid;
    /* grid-template-columns: 135px 135px 135px 135px; */
    grid-template-columns: repeat(6, minmax(calc(calc(100% / 6) - calc(50px / 6)), auto));
    width: 100%;
    grid-gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}
#FormPeserta :nth-child(10) :nth-child(1) {
    grid-column: 1 / 4;
}
#FormPeserta :nth-child(10) :nth-child(2) {
    grid-column: 4 / 7;
}
/* #FormPelatihan :first-child,
#FormPelatihan :nth-child(2),
#FormPelatihan :nth-child(3),
#FormPelatihan :nth-child(4),
#FormPelatihan :nth-child(6) {
    grid-column: 1 / 7;
} */
/* #FormPelatihan :nth-child(6) {
    grid-column: 1 / 3;
}
#FormPelatihan :nth-child(8) {
    grid-column: 4 / 6;
} */
#Penambahan .boxInput {
    padding: 20px;
    /* box-shadow: inset -5px -5px 5px #c4d1db, inset 5px 5px 5px #f2f8fd; */
    /* border-radius: 5px; */
    margin-bottom: 20px;
    background: #dde5eb;
}
#Penambahan .boxInput > div {
    padding: 5px 0;
    text-align: center;
}
#Penambahan .boxInput > H3 {
    margin: 0px;
    color: #365f88;
}
#Penambahan input,
#Penambahan select,
#Penambahan textarea {
    padding: 10px 10px;
    border-radius: 3px;
    /* font-size: 18px; */
    font-size: 14px;
    border: 1px solid #ccc;
    /* border: 1px solid #87a6c0; */
    font-family: arial;
}
#Penambahan textarea {
    resize: none;
}
#Penambahan select option:first-child {
    color: #c7d2dc;
}
#Penambahan select[name="status"] option:first-child {
    color: #3c7097;
}
#Penambahan input::-webkit-input-placeholder,
#Penambahan textarea::-webkit-input-placeholder {
    font-size: 14px;
}
#Penambahan [name="judul"],
#Penambahan [name="peserta"],
#Penambahan [name="alamat"],
#Penambahan [name="bagian"],
#Penambahan [name="perusahaan"] {
    width: 100%;
}
/*============= FormPelatihan */
#Penambahan #FormPelatihan [name="tipe"] {
    /* width: 42.5%; */
    /* width: 46.3%; */
    /* width: 51.7%; */
}
#Penambahan #FormPelatihan [name="tahun"] {
    /* width: 20%; */
    text-align: center;
}
#Penambahan #FormPelatihan [name="tempel"] {
    width: 55%;
}
#Penambahan #FormPelatihan [name="kota"] {
    width: 44%;
}
/*============= FormPeserta */
#Penambahan #FormPeserta.boxInput > div {
    padding: 2px 0;
    text-align: center;
}
#Penambahan #FormPeserta [name="kota"] {
    /* width: 45%; */
    /* width: 54.7%; */
}
#Penambahan #FormPeserta [name="tahun"] {
    /* width: 17%; */
    text-align: center;
}
#Penambahan #FormPeserta [name="gen"],
#Penambahan #FormPeserta [name="agama"],
#Penambahan #FormPeserta [name="pendidikan"] {
    width: 32.7%;
}
/* #Penambahan #FormPeserta [name="IG"],
#Penambahan #FormPeserta [name="FB"],
#view [name="IG"],
#view [name="FB"] {
    width: calc(50% - 3px);
} */
#Penambahan #FormPeserta [name="tlp"] {
    width: 35%;
}
#Penambahan #FormPeserta [name="email"] {
    width: 64%;
}
#Penambahan #FormPeserta [name="tlpper"],
#Penambahan #FormPeserta [name="fax"] {
    width: 49.5%;
}
#Penambahan #FormPeserta [name="emaper"] {
    width: 100%;
}
#Penambahan #FormPeserta [name="atasan"] {
    width: 44%;
}
#Penambahan #FormPeserta [name="jabatan"] {
    width: 55%;
}
/*============= FormPerusahaan */
#Penambahan #FormPerusahaan [name="kota"] {
    width: 35%;
}
#Penambahan #FormPerusahaan [name="provinsi"] {
    width: 64%;
}
/*============= FormSubmit */
#Penambahan #FormSubmit {
    /* text-align: right; */
}
#Penambahan input:disabled,
#Penambahan select:disabled,
#Penambahan textarea:disabled {
    background: transparent;
}
#Penambahan a.tombol {
    /* font-size: 20px; */
    font-size: 14px;
    /* margin-left: 20px; */
    padding: 10px 30px;
}
#Penambahan a.tombol:first-child {
    float: left;
}
#Penambahan a.tombol:first-child,
#Penambahan .boxInput a.tombol {
    /* border: 1px solid #a44719; */
    /* background: #ebb984; */
    /* display: inline-block; */
    /* font-size: 12px; */
    /* padding: 5px 10px; */
    /* border: 1px solid #1981a4; */
    background: #f3cf00;
    /* color: #006093; */
    /* border-radius: 3px; */
    /* box-shadow: inset 2px 2px 3px #d0f4ff, inset -2px -2px 3px #1981a4; */
    /* text-shadow: 1px 1px 2px #fff; */
    transition: all 0.2s ease;
    color: #000000;
    /* box-shadow: inset 2px 2px 3px #ffecd2, inset -2px -2px 3px #a44719; */
}
#Penambahan a.tombol:first-child:hover,
#Penambahan .boxInput a.tombol:hover {
    /* background: #f69b6e; */
    background: #ffe555;
}
#Penambahan a.tombol:first-child:active,
#Penambahan .boxInput a.tombol:active {
    box-shadow: inset 2px 2px 3px #a44719, inset -2px -2px 3px #d0f4ff;
    text-shadow: -1px -1px 2px #fff;
}
#Penambahan .boxInput div.hdr {
    float: right;
    margin-top: -30px;
    font-size: 12px;
}
#Penambahan .boxInput a.tombol {
    font-size: 12px;
    margin-left: 0px;
    padding: 5px 10px;
}
#Penambahan .boxInput div.hdr .status {
    display: none;
    color: #416f8e;
}
#Penambahan .boxInput div.hdr select {
    padding: 3px;
    font-size: 12px;
}
body #Ket {
    position: absolute;
    left: 0px;
    bottom: 5px;
    width: 200px;
    z-index: 9999999999999999999999;
}
#Ket > div {
    position: relative;
    background: #a6e186;
    color: #266901;
    padding: 10px;
    border-radius: 10px;
    border-top-left-radius: 0px;
    text-align: center;
    margin: 10px;
    font-size: 12px;
    font-weight: 800;

    animation: Getar 0.5s;
    animation-iteration-count: 3;
}
#Ket > div.merah {
    background: #ffa6a6;
    color: #8e0303;
}
#Ket > div a {
    position: absolute;
    left: 0px;
    top: -5px;
    color: #952000;
}
#Ket > div a:hover {
    color: #f03401;
}
/*#Penambahan .status{
	border: 1px solid #A6C8DF;
	font-size: 12px;
	color: #3C7097;
	height: 100px;
	text-align: left;
	margin-bottom: 10px;
	border-radius: 5px;
	background: #F5FBFF;
	overflow-y: scroll;
	overflow-x: hidden;
}/**/
#Saran {
    margin: auto;
    position: absolute;
    background: #eef4f5;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #1e5989;
    box-shadow: inset 0px 0px 8px #094f7e;
    min-width: 200px;
    display: none;
    z-index: 8;
}
#Saran a {
    padding: 5px 10px;
    display: block;
    border-radius: 5px;
    font-size: 16px;
    color: #4e7fa6;
    font-weight: bold;
}
#Saran a:hover,
#Saran a.pilih {
    color: #04566e;
    box-shadow: inset 0px 11px 8px -10px #094f7e, inset 0px -11px 8px -10px #094f7e;
}
#Saran a hdn {
    display: none;
}
#nextPrev {
    margin: 5px;
}
#nextPrev a.tombol {
    width: auto !important;
    font-size: 10px !important;
    margin: 0px !important;
    padding: 1px 5px !important;
    text-align: center;
    display: inline-block;

    background: #eee !important;
    box-shadow: inset 0px 11px 8px -10px #094f7e, inset 0px -11px 8px -10px #094f7e !important;
    border: 1px solid #18779c !important;
    color: #18779c !important;
    -webkit-user-select: none;
}

#nextPrev a.tombol:hover {
    color: #2aa3ff !important;
}
#nextPrev a.tombol:nth-child(1):active {
    padding: 1px 7px 1px 3px !important;
    text-shadow: 0 0 0 transparent !important;
}
#nextPrev a.tombol:nth-child(2):active {
    padding: 1px 3px 1px 7px !important;
    text-shadow: 0 0 0 transparent !important;
}
#nextPrev a[hal="0"] {
    box-shadow: inset 0 0 0 #094f7e !important;
    color: #b6c2ca !important;
    border: 1px solid #b6c2ca !important;
    cursor: default;
}
#nextPrev a[hal="0"]:hover {
    color: #b6c2ca !important;
}
#nextPrev a.tombol[hal="0"]:active {
    padding: 1px 5px !important;
}
#nextPrev > span {
    font-size: 12px;
    color: #47708e;
    -webkit-user-select: none;
}
#HasilCari {
    overflow-y: auto;
}
.KunciInput {
    position: absolute;
    width: 100%;
    height: 100%;
}
#KunciInput {
    position: absolute;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #1a769a;
    text-align: center;
    width: 250px;
    height: 50px;
    background: #fff;
    font-size: 18px;
    color: #2890b9;
    display: none;
    box-shadow: inset 0px 11px 8px -10px #094f7e, inset 0px -11px 8px -10px #094f7e;
    z-index: 5;
}
@keyframes Getar {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

#KunciInput.getar {
    animation: Getar 0.5s;
    animation-iteration-count: 3;
}

/*################### Data Server #################*/
#DataServer {
    width: 98%;
}
.BoxList {
    display: grid;
    grid-template-columns: 250px auto;
    min-height: 100px;
    grid-gap: 10px;
}

.BoxList > div > div {
    border: 1px solid #ccc;
    min-height: 100px;
}
.BoxList .LisPelatihan {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.BoxList .LisPelatihan > div {
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    color: #999;
    border-top: 1px solid #ccc;
}
.BoxList .LisPelatihan > div:hover {
    background: #d3edfa;
}
.BoxList .LisPelatihan > div b {
    font-weight: normal;
    display: block;
}
.BoxList .LisData {
}
.fas {
    margin-right: 10px;
    margin-left: 10px;
}
.notification {
    /* background-color: #555; */
    /* color: white; */
    /* text-decoration: none; */
    /* padding: 15px 26px; */
    position: absolute;
    right: 12;
    bottom: 10;
    display: inline-block;
    border-radius: 2px;
    width: 50px;
}
.notification img {
    width: 100%;
}

/* .notification:hover {
    background: red;
} */

.notification .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 5px 10px;
    border-radius: 50%;
    background: red;
    color: white;
    font-size: 12px;
}
.notification.sertifikat {
    bottom: 70px;
    /* right:  */
}
/* #Data.pencarian {
    height: 40px;
} */
.pencarian > select {
    width: 135px;
    padding: 5px 10px;
}
.pencarian > .input > input[data="nama"],
.pencarian > .input > input[data="tlp"],
.pencarian > .input > input[data="perusahaan"],
.pencarian > .input > input[data="pelatihan"],
.pencarian > .input > select[data="agama"],
.pencarian > .input > select[data="sort"] {
    padding: 5px 10px;
}
.pencarian > .input > select[data="sertifikat"],
.pencarian > .input > select[data="tanlah"] {
    padding: 5px 10px;
}
.pencarian > .input > select[data="sertifikat"]:first-child,
.pencarian > .input > select[data="tanlah"]:first-child {
    width: 40px;
    text-align: center;
    padding: 5px;
}
.pencarian > .input > input[data="sertifikat"],
.pencarian > .input > input[data="tanlah"] {
    padding: 5px;
    width: 60px;
    text-align: center;
}
/* .pencarian > .input > input {
    width: 60px !important;
    padding: 5px 10px;
} */

.halaman select {
    width: 40px;
    padding: 5px 10px;
    text-align: center;
}
.del {
    background-color: #e14444;
}

/* .EditPeserta {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-gap: 10px;
    padding: 10px;
} */