@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0;padding: 0;border: 0;font-family: 'Roboto', sans-serif;font-size: 100%;font-weight: normal;vertical-align: top;background: transparent;}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {-webkit-box-sizing: border-box;box-sizing: border-box;scroll-behavior: smooth;}

*,
*:before,
*:after {-webkit-box-sizing: inherit;box-sizing: inherit;}

img {max-width: 100%;height: auto;}

ul {list-style: none;}

a {margin: 0;padding: 0;font-size: 100%;text-decoration: none;vertical-align: baseline;background: transparent;}
a:focus, a:hover {text-decoration: none;vertical-align: baseline;background: transparent;}

hr {display: block;height: 1px;border: 0;border-top: 1px solid #c7c7c7;margin: 0;padding: 0;}

input, select {vertical-align: middle;}

.button, .button:focus, .button:active {display: inline-block;font-weight: 700;font-size: 14px;background: #0c243c;color: #ffffff;line-height: 1;border: 0;border-radius: 5px;letter-spacing: 1px;padding: 10px 20px;text-decoration: none;text-transform: uppercase;cursor: pointer;outline: none;padding: 12px 24px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button:hover, .button:focus {background: #000000;color: #ffffff;outline: none;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button-dark, .button-dark:focus, .button-dark:active {display: inline-block;font-weight: 700;font-size: 14px;background: #000000;color: #ffffff;line-height: 1;border: 0;border-radius: 5px;
letter-spacing: 1px;padding: 10px 20px;text-decoration: none;text-transform: uppercase;cursor: pointer;outline: none;padding: 12px 24px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button-dark:hover, .button-dark:focus {background: #000000;color: #ffffff;outline: none;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

input, label, textarea, select, input, option, button {outline: none;}

.form-group{display: block;width: 100%;margin-bottom: 20px;}
.form-group label{display: block;font-size: 16px;font-weight: 600;line-height: 1;margin-bottom: 8px;}
.form-group input, .form-group select{display: block;width: 100%;height: auto;margin: 0;padding: 10px;font-size: 14px;font-weight: 400;line-height: normal;border: 2px solid #0c243c;border-radius: 5px;background-color: transparent;color: #0c243c;-moz-appearance: none;-webkit-appearance: none;appearance: none;outline: none;}
.form-group input.form-control:focus, .form-group select.form-select:focus{color: #212529;background-color: #fff;border-color: #0c243c;outline: 0;box-shadow: 0 0 0 .25rem rgba(12, 36, 60, 0.5);}


/* let's clear some floats */
.cf:before, .cf:after {display: block;height: 0;overflow: hidden;}

.cf:after {clear: both;}

p {color: #757575;}

:root{
  --blue: #0c243c;
  --gray: #c9d1d5;
  --light-gray: #f4f4f4;
  --white: #FFFFFF;
  --black: #000000;
}

.container {width: 100%;max-width: 1180px;padding: 0 15px;margin: 0 auto;}

.head_title{display: block;width: 100%;text-align: center;}
.head_title h1, .head_title h2{display: block;font-size: 38px;font-weight: 600;line-height: 1.2;color: #000;margin-bottom: 25px;text-transform: capitalize;}
.head_title p{display: block;font-size: 18px;font-weight: 400;line-height: 1.6;color: #000;margin-bottom: 0px;text-align: center;}

.modal .modal-dialog .modal-content .modal-header{background-color: #0c243c;}
.modal .modal-dialog .modal-content .modal-header .modal-title{color: #FFFFFF;}
.modal .modal-dialog .modal-content .modal-header .btn-close{background-color: #FFF;opacity: 1;}

.ui-autocomplete {position: absolute;z-index: 1061;top: 362px;left: 50%;transform: translate(-50%, -50%);cursor: default;height: 300px;overflow-y: scroll;overflow-x: hidden;}

.pagination{gap: 8px;}
.pagination .page-item{border-radius: 5px;}

.pagination .page-item.active .page-link{background: #0c243c;color: #FFF;border-color: transparent;}
.pagination .page-item.active:hover .page-link{background: #0c243c;color: #FFF;border-color: transparent;}
.pagination .page-item .page-link{color: #000;}
.pagination .page-item .page-link:hover{background-color: #f2f2f2;}
.pagination .page-item .page-link:focus{box-shadow: inherit;}

/* header */
#header{display: block;width: 100%;padding: 20px 0;background-color: #f4f4f4;box-shadow: 0 0 20px -8px #0c243c;}
#header .head_box{display: flex;align-items: center;justify-content: space-between;gap: 20px;}
#header .head_box .logo{display: inline-block;width: auto;}
#header .head_box .logo img{max-width: 100%;height: auto;}
#header .head_box .logout{display: inline-flex; gap: 20px; width: auto;}

/* footer */
#footer{display: block;width: 100%;padding: 20px 0;background-color: #0c243c;margin-top: 100px;}
#footer .copyright{display: block;width: 100%;text-align: center;font-size: 12px;font-weight: 400;line-height: 1;color: #FFFFFF;}

/* login */
.login_section{display: block;width: 100vw;height: 100vh; display: flex;align-items: center;justify-content: center;background-color: #0c243c;}
.login_section .head_title{display: block;width: 100%;text-align: center;padding-bottom: 20px;}
.login_section .login_box{display: block;width: 100%;background-color: #FFF;border-radius: 10px;background-color: #FFF;}
.login_section .login_box .logo{display: block;width: 100%;text-align: center;}
.login_section .login_box .logo img{max-width: 100%;height: auto;padding-top: 1.5rem;}
.login_section .login_box .login_form{display: block;width: 100%;}
.login_section .login_box .login_form .form-group{display: block;width: 100%;margin-bottom: 20px;}
.login_section .login_box .login_form .form-group label{display: block;font-size: 14px;font-weight: 600;line-height: 1;margin-bottom: 5px;}
.login_section .login_box .login_form .form-group input{display: block;width: 100%;height: auto;margin: 0;padding: 10px;font-size: 14px;font-weight: 400;line-height: normal;border: 2px solid #0c243c;border-radius: 5px;background-color: transparent;color: #7a7a7a;-moz-appearance: none;-webkit-appearance: none;appearance: none;outline: none;}
.login_section .login_box .login_form .form-group input.form-control:focus{box-shadow: 0px 0px 10px -2px #0c243c;}
.login_section .login_box .login_form .button_box{display: flex;align-items: center;justify-content: space-between;margin-top: 10px;}

/* app_box */
.app_box{display: block;width: 100%;padding: 80px 0;}
.app_box .single_table{display: block;width: 100%;padding: 20px;background-color: #c9d1d5;border-radius: 10px;}
.app_box .single_table .top_form{display: flex;align-items: center;justify-content: space-between;gap: 20px;margin-bottom: 20px;}
.app_box .single_table .top_form input{display: block;width: auto;height: 38px;margin: 0;padding: 10px;font-size: 14px;font-weight: 400;line-height: normal;border: 2px solid #0c243c;border-radius: 5px;background-color: #FFFFFF;color: #7a7a7a;-moz-appearance: none;-webkit-appearance: none;appearance: none;outline: none;}
.app_box .single_table .top_form input.form-control:focus{box-shadow: 0px 0px 10px -2px #0c243c;}
.app_box .single_table .table {width: 100%;background-color: #ffffff;border-collapse: collapse;border: 1px solid #0c243c;color: #000000;}
.app_box .single_table .table td{border-bottom: 1px solid #0c243c;padding: 5px 10px;vertical-align: middle;}
.app_box .single_table .table th {border-bottom: 1px solid #0c243c;padding: 5px 10px;vertical-align: middle;color: #FFFFFF;}
.app_box .single_table .table thead {background-color: #0c243c;}
.app_box .single_table .table td .button{display: flex;align-items: center;justify-content: center;padding: 10px 10px;width: 40px;height: 40px;}


.status_box{display: block;width: 100%;padding: 80px 0;}
.status_box .status_wrp{display: block;width: 100%;padding: 20px;background-color: #c9d1d5;border-radius: 10px;}
.status_box .status_wrp .status_table {width: 100%;background-color: #ffffff;border-collapse: collapse;border: 1px solid #0c243c;color: #000000;margin-bottom: 24px;}
.status_box .status_wrp .status_table td{font-size: 14px; border: 1px solid #0c243c;padding: 5px 10px;vertical-align: middle;}
.status_box .status_wrp .status_table th {border: 1px solid #0c243c;padding: 5px 10px;vertical-align: middle;color: #FFFFFF;}
.status_box .status_wrp .status_table thead {background-color: #0c243c;}
.status_box .status_wrp .status_table td .tg-list-item {display: flex;align-items: center;justify-content: center;}
.status_box .status_wrp .status_table td .tgl {display: none;}
.status_box .status_wrp .status_table td .tgl + .tgl-btn {outline: 0;display: block;width: 4em;height: 2em;position: relative;cursor: pointer;user-select: none;}
.status_box .status_wrp .status_table td .tgl + .tgl-btn:after, .status_box .status_wrp .status_table td .tgl + .tgl-btn:before {content: "";position: relative;display: block;width: 50%;height: 100%;}
.status_box .status_wrp .status_table td .tgl + .tgl-btn:after {left: 0;}
.status_box .status_wrp .status_table td .tgl + .tgl-btn:before {display: none;}
.status_box .status_wrp .status_table td .tgl:checked + .tgl-btn:after {left: 50%;}
.status_box .status_wrp .status_table td .tgl-flip + .tgl-btn {padding: 2px;transition: all 0.2s ease;perspective: 100px;}
.status_box .status_wrp .status_table td .tgl-flip + .tgl-btn:after, .status_box .status_wrp .status_table td .tgl-flip + .tgl-btn:before {display: inline-block;transition: all 0.4s ease;width: 100%;text-align: center;position: absolute;line-height: 2em;font-weight: bold;color: #fff;position: absolute;top: 0;left: 0;backface-visibility: hidden;border-radius: 4px;}
.status_box .status_wrp .status_table td .tgl-flip + .tgl-btn:after {content: attr(data-tg-on);background: #02c66f;transform: rotateY(-180deg);}
.status_box .status_wrp .status_table td .tgl-flip + .tgl-btn:before {background: #ff3a19;content: attr(data-tg-off);}
.status_box .status_wrp .status_table td .tgl-flip + .tgl-btn:active:before {transform: rotateY(-20deg);}
.status_box .status_wrp .status_table td .tgl-flip:checked + .tgl-btn:before {transform: rotateY(180deg);}
.status_box .status_wrp .status_table td .tgl-flip:checked + .tgl-btn:after {transform: rotateY(0);left: 0;background: #7fc6a6;}
.status_box .status_wrp .status_table td .tgl-flip:checked + .tgl-btn:active:after {transform: rotateY(20deg);}