/* CV.TRIPLE-C
 * (COMPUTER CARE CENTER) Banjarmasin
 * Perusahaan Pengembang Aplikasi Berbasis Web
 * Order Contact: +62 82155717976
 */

/* ======================================================================================================================================= CV.TRIPLE-C ==============
 * STYLE WARNA
 */

/* GENERAL COLOR
 * Class = Warna Standar
 */
body {
	background-color: #000;
	/*	background-image: linear-gradient(270deg, #aefffb, white, #aefffb);*/
	background-image: linear-gradient(to right bottom, rgb(0 0 0), rgb(111, 182, 101));
	background-attachment: fixed;
	background-position: center;
	background-size: 100% 100%;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}

a:link,
a:visited {
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}

a:hover {
	color: #00ff00;
	text-shadow: 1px 1px 2px #000;
}

hr {
	border-color: #aaa;
}

fieldset {
	border-color: #fff;
}

legend {
	color: #fff;
}

.note {
	border-left-color: #00ff00;
	background: rgba(168, 255, 168, 1);
	color: #224822;
	text-shadow: 0px 0px 1px #56b756;
}

.error {
	border-left-color: #ff0000;
	background: #ffaeae;
	color: #000;
	text-shadow: 1px 1px 1px #fff;
}

.bar-container {
	background-color: #f1f1f154;
}

/* INPUT COLOR
 * Class = Warna Input
 */
.input {
	border-bottom-color: #31afde;
	background: rgba(0, 0, 0, 0.5);
}

.input:hover {
	border-bottom-color: #f00;

}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="url"],
textarea {
	background: rgba(255, 255, 255, 0);
	color: #FFF;
	text-shadow: 1px 1px 1px #000;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="search"]:disabled,
input[type="date"]:disabled,
input[type="datetime"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
input[type="url"]:disabled {
	background: rgba(255, 255, 255, 0);
	color: #ddd;
	text-shadow: 1px 1px 1px #000;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="url"]:hover,
textarea:hover {
	color: #fff;
	text-shadow: 1px 1px 3px #000;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="search"]::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
input[type="datetime"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
	color: #31afde;
	text-shadow: 1px 1px 3px #000;
}

input:-internal-autofill-selected {
	appearance: menulist-button;
	background-image: none !important;
	background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
	color: -internal-light-dark(white, white) !important;
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button {
	background: #aaa;
	border-color: #000;
	box-shadow: 3px 3px 9px #000;
	color: #000;
	text-shadow: 1px 1px 3px #fff;
	padding: 10px;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover {
	background: #ccc;
	color: #fff;
	text-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
button:disabled {
	background: linear-gradient(to right bottom, #ffffff, #8e8e8e) color: #fff;
	text-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

select {
	background: #ffffff14;
	border-color: #fff;
	color: #fff;
}

select option {
	color: #000;
	background: #eee;
}

select option:checked {
	background: #59585a;
	color: #fff;
}

select option:focus,
select option:hover,
select option:active {
	background: #59585a;
	color: #fff;
	box-shadow: 3px 3px 9px solid #000;
}

select.onhead {
	background: rgba(255, 255, 255, 0);
	border-color: #808080;
	color: #fff;
	text-shadow: 2px 2px 4px #000;

}

select.onhead option {
	color: #000;
	text-shadow: 2px 2px 4px #fff;
}

select.onhead option:checked {
	color: #fff;
	text-shadow: 2px 2px 4px #000;
}

/* TABLE COLOR
 * Class = Warna Tabel
 */
.table thead {
	background-color: #00e4da;
	background-image: linear-gradient(to right, #00e4da, #d6fffd, #00e4da);
	color: #000;
	text-shadow: 2px 2px 3px #fff;
}

.table_bw thead {
	background-color: #dbdbdb;
	color: #000;
	text-shadow: 2px 2px 5px #fff;
}

.table thead tr td {
	border-color: #fff;
}

.table_bw thead tr td {
	border-color: #000;
}

.table tbody tr td {
	background: rgba(0, 0, 0, 0.2);
	border-color: #fff;
}

.table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.5);
}

.table tbody tr:hover {
	background: rgba(0, 0, 0, 0.5);
	color: #00ff00;
	text-shadow: 2px 2px 6px #000;
}

.table tbody tr:hover a:link,
.table tbody tr:hover a:visited {
	color: #00ff00;
	text-shadow: 2px 2px 5px #000;
}

.table tfoot tr {
	background-color: #31AFDE;
	background-image: linear-gradient(to right, #31AFDE, #BBE8F9, #31AFDE);
	color: #000;
	text-shadow: 2px 2px 3px #fff;
}

.table tfoot tr td {
	border-color: #fff;
}

.table_bw tfoot tr {
	background: #dbdbdb;
	border-color: #000;
}

.table-pop-up:hover span {
	border-color: #c0c0c0;
	box-shadow: 5px 5px 12px #000;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}

/* PAGING COLOR
 * Class = Warna Paging, Paging Box
 */
#paging,
.hal-pertama,
.hal-sebelumnya,
.hal-ini,
.hal-selanjutnya,
.hal-akhir,
.hal-angka {
	border-color: #fff;
	box-shadow: 2px 2px 4px #000;
	color: #fff;
	text-shadow: 1px 1px 3px #000;
	background: linear-gradient(to right bottom, #31AFDE, #005fa5);
}

.hal-ini {
	color: #fff;
	border-color: #fff;
	background: linear-gradient(to right bottom, #00ff00, #00a500);
}

#paging:hover,
.hal-pertama:hover,
.hal-sebelumnya:hover,
.hal-ini:hover,
.hal-selanjutnya:hover,
.hal-akhir:hover,
.hal-angka:hover {
	border-color: #31AFDE;
	box-shadow: 1px 1px 1px #000;
	color: #31AFDE;
	text-shadow: 1px 1px 3px #fff;
	background: #FFFFFF;
}

.hal-ini:hover {
	color: #31AFDE;
	border-color: #31AFDE;
	background: #000;
}

#pagingbox a:hover {
	color: #31AFDE;
}

#paging-selected {
	border-color: #f00;
	box-shadow: 2px 2px 4px #000;
}

/* CROLLER COLOR
 * Class = Warna Scroller Browser
 */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0);
	background: rgb(96 96 96);
}

::-webkit-scrollbar-thumb {
	background: #13416b;
	-webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0, 0, 0, 0);
}

/* POP-UP COLOR
 * Class = Warna Pop Up Dialog
 */
#pop-up input[type="checkbox"]:checked~#pop-up-login {
	background: rgba(0, 0, 0, 0.5);
}

#pop-up-form {
	border-color: #31AFDE;
	background-color: #1a9bcc;
	background-image: linear-gradient(to right bottom, #1a9bcc, #ffffff);
	box-shadow: 10px 10px 15px #000;
}

#pop-up-info {
	border-color: #a1a1a1;
	background: #FFF;
	box-shadow: 10px 10px 15px #000;
}

#pop-up-form-header {
	background-color: #00ff00;
	background-image: linear-gradient(to right, #00c600, #d2ffd2, #00c600);
	color: #000;
	text-shadow: 1px 1px 2px #fff;
}

#pop-up-judul {
	color: #000;
}

/* FONT COLOR
 * Class = Warna Standar
 */
.red,
.merah {
	color: #f00;
}

.yellow,
.kuning {
	color: #ff0;
}

.green,
.hijau {
	color: #0f0;
}

.blue,
.biru {
	color: #00f;
}

.black,
.hitam {
	color: #fff;
	text-shadow: 1px 1px 3px #000;
}

.white,
.putih {
	color: #fff;
	text-shadow: 1px 1px 3px #000;
}

.orange,
.jingga {
	color: #ff8040;
}

.brown,
.coklat {
	color: #800000;
}

.grey,
.abu-abu {
	color: #c0c0c0;
}

.pink,
.merah-muda {
	color: #ff80c0;
}


/* FONT COLOR
 * Class = Warna Khusus
 */
.android {
	color: #31AFDE;
}

.warna1 {
	color: #00ea00;
	text-shadow: 1px 1px 2px #fff;
}

.warna2 {
	color: #00ff00;
	text-shadow: 1px 1px 2px #000;
}

.warna3 {
	color: #00c600;
	text-shadow: 1px 1px 2px #000;
}

/* BACKGROUND COLOR
 * Class = Warna Khusus
 */
.bg_putih {
	background: #fff;
	box-shadow: 3px 3px 9px #000;
}

.bg_merah {
	background: #f00;
	box-shadow: 3px 3px 9px #fff;
}

/* ======================================================================================================================================= CV.TRIPLE-C ==============
 * STYLE HOVER
 */
.black_hover {
	background: none;
	transition: all ease-in-out 0.5s;
	border-radius: 5px;
}

.black_hover:hover {
	background: rgba(0, 0, 0, 0.2);
	transition: background ease-in-out 0.5s;
	border-radius: 50px 20px 20px 50px;
	transition: border-radius ease-in-out 2s;
	transition-delay: border-radius 2s;
}

.white_hover {
	background: none;
	transition: all ease-in-out 0.5s;
	border-radius: 5px;
}

.white_hover:hover {
	background: rgba(255, 255, 255, 0.2);
	transition: background ease-in-out 0.5s;
	border-radius: 20px;
	transition: border-radius ease-in-out 2s;
	transition-delay: border-radius 2s;
}

.icon_hover {
	background: none;
	transition: all ease-in-out 1s;
	border-radius: 5px;
}

.icon_hover:hover {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	transition: background ease-in-out 2s;
	transition: border-radius ease-in-out 2s;
	transition-delay: border-radius 2s;
}

.icon_hover_lost {
	position: absolute;
	width: 8%;
	display:
}

.icon_hover:hover .icon_hover_lost {
	opacity: 0;
	transition: all ease-in-out 0.5s;
}

.hover {
	background: none;
	transition: all ease-in-out 1s;
	border-radius: 5px;
}

.hover:hover {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	transition: background ease-in-out 2s;
	transition: border-radius ease-in-out 2s;
	transition-delay: border-radius 2s;
}

/* =================================================== APP COLOR ======================
 * ====================================================================================
 * ====================================================================================
 * ====================================================================================
 * ====================================================================================
 * WARNA APLIKASI
 * Warna Khusus Untuk Aplikasi ini
 * See = app.css or app-ame.css
 */
#body {
	border-left-color: #e5e5e5;
	border-right-color: #e5e5e5;
	border-bottom-color: #e5e5e5;
}

/* ================================================== HEADER ================================================ */
/*Original background: #008577;*/
header {
	background: #13416b;
	color: #fff;
}

#top-option:hover {
	background: rgba(255, 255, 255, 0.2);
}

.top-option div {
	border-bottom-color: #f00;
	background: #e5e5e5;
	color: #000;
	text-shadow: 3px 3px 5px #fff;
}

.top-option div:hover {
	background: #000;
	color: #fff;
	text-shadow: 3px 3px 5px #000;
}

#kop {
	background: #000;
	color: #fff;
}

#kop-judul {
	color: #fff;
}

.kepala a:link,
.kepala a:visited {
	color: #ffffff;
	text-shadow: 1px 1px 2px #000000;
}

.kepala a:hover {
	color: #c0c0c0;
}

/* ================================================== MENU ================================================ */
#menu-item,
#selected {
	border-bottom-color: #e5e5e5;
}

#selected {
	border-top-color: #e5e5e5;
	border-right-color: #e5e5e5;
	border-left-color: #e5e5e5;
}

#menu-item:hover {
	border-bottom-color: #e5e5e5;
	background: rgba(0, 0, 0, 0.2);
}

#menu a:link,
#menu a:visited {
	color: #000;
}

#menu a:link #selected,
#menu a:visited #selected {
	border-top-color: #e5e5e5;
	border-right-color: #e5e5e5;
	border-left-color: #e5e5e5;
	color: #000;
}

#menu a:hover #menu-item {
	color: #0f0;
}

#menu a:hover #selected {
	color: #fff;
}

/* ================================================== SIDEBAR ================================================ */
#sidebar {
	background: rgb(255 255 255 / 23%);
	border-color: #e5e5e5;
	box-shadow: 7px 12px 12px #000;
}

#side_box {
	border-color: #e5e5e5;
	box-shadow: 6px 6px 12px #000;
}

#side_judul {
	background-color: #00c5bc;
	background-image: linear-gradient(to right, #059c95, #65f1ea, #059c95);
	color: #fff;
	text-shadow: 1px 1px 3px #000;
}

#side_isi {
	background-color: rgba(53, 161, 201, 0.5);
	background-image: linear-gradient(to right bottom, rgb(84 84 84), rgb(189 189 189));
}

#side_isi:hover {
	background-color: rgba(53, 161, 201, 0);
	background-image: linear-gradient(to right bottom, rgb(84 84 84 / 29%), rgba(255, 255, 255, 0.2));
}

/* ================================================== ISI ================================================ */
#isi {
	color: #fff;
	text-shadow: 2px 2px 5px #000;
	background: linear-gradient(to right bottom, rgba(227, 224, 224, 0.6), rgb(248, 248, 248));
	border-color: #e5e5e5;
	box-shadow: 7px 12px 12px #000;
}

/* ===== SETTING =======
 *
 */
#set_logo {
	border-color: #fff;
}

#set_logo_img div {
	border-color: #fff;
	background: rgba(0, 0, 0, 0.2);
}

#tembon {
	background: #1c8dff;
	border-color: #b0d8ff;
}

#temboff {
	background: #1c8dff;
	border-color: #b0d8ff;
}

#tembusan_check input[type='radio']:checked~label div {
	background: #0076ec;
	border-color: #b0d8ff;
}

#tembusan_check input[type='radio']:checked~label div {
	background: #0076ec;
	border-color: #b0d8ff;
}


/* ======================================= F O O T E R =======================================
 *
 */
footer {
	background: #000;
}

.footer img:hover {
	background: rgba(255, 255, 255, 0.2);
}