@import url('fonts.css');
@import url('../dist/bootstrap/css/bootstrap.min.css');
:root { --primary-font: 'Open Sans', sans-serif, Arial, Helvetica; --yellow: #fed343; --gray: #ababab; --gray-1: #212121; }
body { background-color: var(--bs-black); color: var(--bs-white); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; position: relative; }
a { color: var(--blue); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--yellow); font-family: var(--primary-font); font-weight: 700; text-transform: capitalize; }
h2 { font-size: 23px; }
p, li { color: var(--bs-white); font: 400 14px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }

.wrapper { background: fixed url("../images/wvs_bg.jpg") no-repeat top center / cover; height: 100%; min-height: 100vh; clear: both; width: 100%; }

.main { display: flex; align-items: center; height: 100vh; min-height: 100%; padding: 40px 12px; width: 100%; }

.container-fluid { max-width: 1650px; position: relative; }

.signin { background-color: var(--bs-black); border: 1px solid var(--yellow); border-radius: 20px; box-shadow: 0px 8px 13px rgba(0, 0, 0, 0.5); padding: 40px 40px; max-width: 470px; }
.signin h1 { color: var(--yellow); font-size: 22px; margin-bottom: 2rem; text-align: center; text-transform: uppercase; }
.signin h1 span { color: var(--bs-white); font-size: 20px; }
.signin .form-control { background-color: var(--bs-black); background-position: 27px center; background-repeat: no-repeat; border-color: var(--yellow); border-radius: 30px; color: var(--bs-white); font-size: 20px; font-weight: 600; line-height: 35px; padding-left: 85px; }
.signin .form-control::placeholder { color: var(--gray); text-transform: uppercase; }
.signin .form-control:focus { box-shadow: none; }
.signin input[type="text"] { background-image: url("../images/icn_user.png"); }
.signin input[type="password"] { background-image: url("../images/icn_lpsw.png"); }
.signin .checkbox { font-size: 18px; }

.form-check-input { background-color: var(--bs-black); border-color: var(--bs-white); }
.form-check-input:focus { box-shadow: none; }
.form-check-input:checked { background-color: var(--yellow); border-color: var(--yellow); box-shadow: none; }

.btn-primary { background: rgb(203,138,25); background: linear-gradient(0deg, rgba(203,138,25,1) 0%, rgba(225,187,59,1) 100%); border-color: rgba(225,187,59,1); border-radius: 30px; color: var(--bs-black); font-size: 20px; font-weight: 600; text-transform: uppercase; }
.btn-primary:hover, .btn-primary:focus { background: rgb(203,138,25); background: linear-gradient(0deg, rgba(203,138,25,1) 0%, rgba(225,187,59,1) 100%); border-color: rgba(225,187,59,1) !important; color: var(--bs-black) !important; }

.btn-outline-primary { background-color: var(--gray-1); border-color: var(--yellow); border-radius: 20px; color: var(--yellow); font-size: 12px; font-weight: 600; text-transform: uppercase; }

.navbar { background-color: var(--bs-black); border-bottom: 2px solid var(--yellow); margin-bottom: 1.5rem; }
.navbar-brand { max-width: 153px; }
.navbar .d-flex { background-color: var(--gray-1); border-radius: 30px; padding: 10px 30px; }
.navbar-toggler { position: absolute; left: 0px; margin-left: 24% }

h2 { background: rgb(203,138,25); background: linear-gradient(0deg, #dc8c16 0%, #ffd342 100%); border: 1px solid #ffc400; border-radius: 30px; color: var(--bs-black); display: inline-block; font-size: 20px; font-weight: 700; padding: 5px 5%; text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); text-transform: uppercase; }

.net { background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(33,33,33,1) 100%); border: 1px solid var(--yellow); border-radius: 10px; padding: 1rem 1rem; width: 100%; }
.net h4 { font-size: 16px; text-transform: uppercase; }
.net h4 span { color: var(--bs-white); }
.net .border-end { border-color: var(--yellow) !important; border-width: 2px !important; display: grid; justify-content: center; }
.net .border-end:last-child { border: inherit !important; }

.mainnav { background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 25%, rgba(33,33,33,1) 100%); border: 1px solid var(--yellow); border-radius: 10px; padding: 1rem 1rem; width:100%; }
.mainnav ul { list-style: none; margin: 0px; padding: 0px; }
.mainnav ul li { border-bottom: 1px solid var(--yellow); color: var(--bs-white); font-size: 14px; font-weight: 600; padding: 1.2rem 0.5rem; text-align: center; text-transform: uppercase; }
.mainnav ul li:last-child { border: inherit; }
.mainnav ul li a { color: var(--bs-white); display: block; padding: 0.3rem 0rem; text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); }
.mainnav ul li a.active { background: url("../images/arw_dwn.png") no-repeat center right; border-left: 4px solid var(--yellow); color: var(--yellow); }
.mainnav ul li.all { background-color: var(--yellow); }
.mainnav ul li.all a { color: var(--bs-black); }
.mainnav ul li a.more { background: url("../images/arw_lft.png") no-repeat center right;  }

.table-data { width: 100%; }
.table-data thead { background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(33,33,33,1) 100%); border: 1px solid var(--yellow); border-top: inherit; margin-bottom: 1rem; width: 100%; }
.table-data thead tr th { color: var(--bs-white); font-size: 14px; font-weight: 400; text-align: center; vertical-align: middle; }
.table-data tbody tr td { border-color: var(--yellow); color: var(--bs-white); font-size: 14px; font-weight: 400; text-align: left; vertical-align: middle; }
.table-data tbody tr td:last-child img { width: 25px; }
.table-data tbody tr td .btn-success { background-color: #17b030; cursor: inherit; }
.table-data tbody tr td .btn-danger { background-color: #dc3545; cursor: inherit; }

.modal-content { background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(21,21,21,1) 50%, rgba(0,0,0,1) 100%); border: 1px solid var(--yellow); border-radius: 20px; }
.modal-dialog { max-width: 680px; }
.modal-body { padding: 30px 30px; }
.modal-body h4 { font-size: 16px; }
.modal-body .panel h3 { color: var(--bs-white); font-size: 25px; margin-bottom: 0px; }
.modal-body .panel h3 small { font-size: 20px; }
.modal-body .panel .brdlft { border-left: 2px solid var(--yellow); }
.modal-body textarea.form-control { background-color: #212121; border: inherit; color: var(--yellow); font-size: 14px; height: 100px; }
.modal-body textarea.form-control:focus { box-shadow: none; }
.btn-close { background: url("../images/close.png") no-repeat center; opacity: 1; position: absolute; right: 10px; top: 10px; z-index: 1; }

.sidenav { background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 25%, rgba(33,33,33,1) 100%); border: 1px solid var(--yellow); border-radius: 10px; padding: 1rem 1rem; width:100%; }
.sidenav ul { list-style: none; margin: 0px; padding: 0px; }
.sidenav ul li { border-bottom: 1px solid var(--yellow); color: var(--bs-white); font-size: 14px; font-weight: 600; padding: 1.2rem 0.5rem; text-align: center; text-transform: uppercase; }
.sidenav ul li:last-child { border: inherit; }
.sidenav ul li a { color: var(--bs-white); display: block; padding: 0.3rem 0rem; text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); }
.sidenav ul li a.active { border-left: 4px solid var(--yellow); color: var(--yellow); }

.panel { background: var(--bs-black); border: 1px solid var(--yellow); border-radius: 10px; margin-bottom: 1rem; padding: 1rem 1rem; width:100%; }
.panel h4 { font-size: 18px; text-transform: uppercase; }

.anno { background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(33,33,33,1) 75%); border: 1px solid var(--yellow); border-radius: 30px; color: var(--yellow); display: inline-block; font-size: 18px; font-weight: 700; padding: 7px 5%; position: relative; text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); text-transform: uppercase; z-index: 1; }
.wel { background: #161616; border: 1px solid var(--yellow); border-radius: 10px; margin-top: -25px; margin-bottom: 1rem; padding: 2rem 1rem; width:100%; }

.search { font-size: 18px; font-weight: 600; }
.search .form-control { width: 300px; }

.headrow { background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(33,33,33,1) 100%); border: 1px solid var(--yellow); border-radius: 10px; margin-bottom: 1rem; width: 100%; }
.headrow .table tr th { color: var(--bs-white); font-size: 16px; font-weight: 600; }

.datarow { background-color: #161616; margin-bottom: 1rem; width: 100%; }
.datarow .table tr td { color: var(--bs-white); font-size: 16px; font-weight: 600; }
.datarow .table tr td .btn-success { background-color: #17b030; cursor: inherit; }

.btn-dark { background-color: var(--bs-black); border-color: var(--yellow); border-radius: 20px; color: var(--bs-white); }
.btn-dark:hover, .btn-dark:focus { background-color: var(--bs-black); border-color: var(--yellow); border-radius: 20px; color: var(--yellow); }

.notify { border: 1px solid #ffc400; border-radius: 30px; color: var(--bs-white); display: inline-block; font-size: 14px; font-weight: 600; margin-bottom: 1rem; padding: 5px 15px; text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); }
.notify img { margin-right: 5px; width: 10px; }

.formbox { background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(33,33,33,1) 100%); border: 1px solid var(--yellow); border-radius: 10px; padding: 1rem 1rem; width: 100%; }
.formbox .form-label { padding-left: 20px; }
.formbox .form-control { text-indent: 15px; }
.formbox .btn { background-color: var(--bs-black); }

.greybox { background-color: #161616; padding: 0.725rem 0rem; width: 100%; }

.setbox { background: #161616; border: 1px solid var(--yellow); border-radius: 10px; margin-top: -25px; margin-bottom: 1rem; padding: 1rem 1rem; width:100%; }
.setbox .form-label { padding-left: 20px; }
.setbox .form-control { text-indent: 15px; }
.setbox .btn { background-color: var(--bs-black); }

.green { color: #17b030; }
.red { color: #dc3545; }
.green, .red { text-transform: uppercase; }
.green strong, .red strong { color: var(--bs-white); margin-left: 5px; }

.process { background-color: var(--gray-1); border: 1px solid var(--yellow); border-radius: 5px; color: var(--bs-white); font-size: 14px; margin: 0rem auto; padding: 0.625rem 1rem; max-width: 300px; width:100%; }
.process .brdlft { border-left: 2px solid var(--yellow); }

.rgtspc { padding-right: 3rem; }

.line { background: url("../images/line_01.png") no-repeat bottom center / 42% 1px; }
.line_01 { background: url("../images/line_01.png") no-repeat bottom center / 82.2% 1px; }
.line_02 { background: url("../images/line_01.png") no-repeat top center / 68.5% 1px; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    .col { flex-basis: auto; }
    .navbar-brand { max-width: 90px; }
    .navbar .d-flex { padding: 5px 10px; }
    .net .border-end .col-auto { margin-bottom: 0.5rem; width: 100%; }
    .net .border-end { border-right: inherit !important; margin-bottom: 1rem; text-align: center; }
    .search .form-control { width: 100%; }
    .line, .line_01, .line_02 { background: inherit; }
    .rgtspc { padding-right: 12px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

}

@media only screen and (min-width: 992px) and (max-width: 1180px) {

}