/* REQUIREMENTS CODE */
*{margin:0px;padding:0px;}
body{color:#333;font-size:12px;line-height:21px;font-weight:400;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", Arial, sans-serif;color:#3c424f;animation: fadeInAnimation ease 1s;
animation-iteration-count: 1;animation-fill-mode: forwards;
background-image: radial-gradient(circle at 50% 51%, #f8f8f8, #d7dbde);}
a{text-decoration:none;}
a:hover{text-decoration:none;cursor:pointer;}
p,span,label,ul,ol{margin-bottom:0px;}
ul,ol{list-style-type:none;}

.table{margin-bottom:0px;border:1.0px solid #ccc;border-radius:1.3px;}
.table>thead>tr>th{padding:8px;border-top:1px solid #ccc;border-bottom-width:0px;border-bottom:1px solid #ccc;}
.table>thead>tr>td{padding:8px;border-top:1px solid #ccc;border-bottom-width:0px;border-bottom:1px solid #ccc;}
.table>tbody>tr>td{padding:6px;border-top:1px solid #ccc;border-bottom-width:0px;border-bottom:1px solid #ccc;}
.table_heading{background-color:#fafafa;color:#2e2e2e;font-weight:500;letter-spacing:0.5px;}
.row{margin-top:5px;margin-bottom:5px;margin-left:0px;margin-right:0px;}
.rows{margin-top:5px;margin-bottom:5px;}
h1,h2,h3,h4,h5,h6{margin-top:25px;}

@keyframes fadeInAnimation {0%{opacity:0;} 100%{opacity: 1;}}

/* SCROLL BAR DESIGN */
::-webkit-scrollbar{width: 5px;height:5px;}
::-webkit-scrollbar-track{background: #f1f1f1;}
::-webkit-scrollbar-thumb{background: #f30;}
::-webkit-scrollbar-thumb:hover{background: #f30;}

.col_container{width:100%;float:left;padding-top:3px;padding-bottom:3px;}

.col_1{width:8.333%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_2{width:16.6667%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_3{width:25%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_4{width:33.333%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_5{width:41.6667%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_6{width:50%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_7{width:58.333%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_8{width:66.6667%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_9{width:75%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_10{width:83.333%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_11{width:91.667%;float:left;padding-left:8px;padding-right:8px;position:relative;}
.col_12{width:100%;float:left;padding-left:8px;padding-right:8px;position:relative;}

.col_p_1{width:8.333%;float:left;position:relative;}
.col_p_2{width:16.6667%;float:left;position:relative;}
.col_p_3{width:25%;float:left;position:relative;}
.col_p_4{width:33.333%;float:left;position:relative;}
.col_p_5{width:41.6667%;float:left;position:relative;}
.col_p_6{width:50%;float:left;position:relative;}
.col_p_7{width:58.333%;float:left;position:relative;}
.col_p_8{width:66.6667%;float:left;position:relative;}
.col_p_9{width:75%;float:left;position:relative;}
.col_p_10{width:83.333%;float:left;position:relative;}
.col_p_11{width:91.667%;float:left;position:relative;}
.col_p_12{width:100%;float:left;position:relative;}

.data_center_full{max-width:100%;margin:0 auto;}
.data_center_0{max-width:300px;margin:0 auto;}
.data_center_1{max-width:350px;margin:0 auto;}
.data_center_2{max-width:400px;margin:0 auto;}
.data_center_2_1{max-width:450px;margin:0 auto;}
.data_center_3{max-width:500px;margin:0 auto;}
.data_center_4{max-width:600px;margin:0 auto;}
.data_center_5{max-width:650px;margin:0 auto;}
.data_center_6{max-width:700px;margin:0 auto;}
.data_center_7{max-width:750px;margin:0 auto;}
.data_center_8{max-width:800px;margin:0 auto;}
.data_center_9{max-width:850px;margin:0 auto;}
.data_center_10{max-width:900px;margin:0 auto;}
.data_center_11{max-width:1000px;margin:0 auto;}
.data_center_12{max-width:1180px;margin:0 auto;}
.data_center_13{max-width:1220px;margin:0 auto;}

.modal-lg{width:1120px;}
.sweet-alert{z-index:9990;}
.sweet-overlay{position:fixed;z-index:9980;}
.toast-top-right {top: 50px;margin: 0 auto;right:0;}

.wrapper{width:100%;float:left;height:100vh;overflow:hidden;}
.data_wrapper{width:100%;min-height:100vh;background-color:#fff;box-shadow:0px 0px 5px 0px #000;}

.header_section{width:100%;float:left;height:80px;background-color:#1F416B;}
.header_data{width:100%;float:left;}
.header_logo{width:100%;float:left;}
.header_logo_data{width:100%;float:left;text-align:center;}
.header_logo_data img{display:inline-block;height:70px;padding:5px;}

.menu_section{width:100%;float:left;height:50px;background-color:#036;}
.menu_data{width:100%;float:left;}
.menu_list{width:100%;float:left;}
.menu_list_data{width:100%;float:left;text-align:center;overflow:hidden;overflow-x:auto;}
.menu_list_data ul{margin:0;padding:0;white-space:nowrap;list-style:none;}
.menu_list_data ul li{display:inline-block;margin:0;padding:0;}
.menu_list_data ul li a{display:block;padding:15px;color:#fff;text-transform:capitalize;}
.menu_list_data ul li a i{margin-right:5px;}
.menu_list_data ul li a span{letter-spacing:0.5px;font-weight:500;}

.body_section{width:100%;float:left;overflow-y:auto;height:calc(100vh - 132px);}
.body_data{width:100%;float:left;}

.bread_section{width:100%;float:left;padding-top:20px;padding-bottom:10px;}
.bread_data{width:100%;float:left;padding-left:15px;padding-right:15px;}
.bread_data p{display:block;padding:8px;font-size:20px;letter-spacing:0.8px;font-weight:500;}

.data_section{width:100%;float:left;margin-top:20px;margin-bottom:20px;}
.data_container{width:100%;float:left;padding-left:15px;padding-right:15px;}

.load_data{width:100%;float:left;}

.input_section{width:100%;float:left;}
.input_section label{display:block;margin-top:4px;font-weight:500;letter-spacing:0.8px;margin-right:15px;
margin-bottom:4px;word-break: break-all;}
.input_section label.error_label{color:#f30;}
.input_section label.error_label:after{content:'*';}
.p_top{padding-top:15px;}
.m_top{margin-top:25px;}

.input_section input[type="text"]{width:100%;padding:5px 8px;outline:none;border:1px solid #ccc;font-size:1.3rem;
letter-spacing:0.5px;border-radius:5px;padding-left:15px;}
.input_section input[type="radio"]{padding:5px 8px;outline:none;border:1px solid #ccc;font-size:1.3rem;
letter-spacing:0.5px;border-radius:5px;padding-left:15px;}
.input_section input[type="number"]{width:100%;padding:5px 8px;outline:none;border:1px solid #ccc;font-size:1.3rem;letter-spacing:0.5px;border-radius:5px;padding-left:15px;}
.input_section input[type="password"]{width:100%;padding:5px 8px;outline:none;border:1px solid #ccc;font-size:1.3rem;letter-spacing:0.5px;border-radius:5px;padding-left:15px;}
.input_section select{box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);background-color: lightblue; width:100%;padding:5px 8px;outline:none;border:1px font-size:1.5rem;letter-spacing:0.5px;border-radius:5px;padding-left:15px;}
.input_section textarea{width:100%;padding:6px 10px;outline:none;border:1px solid #ccc;font-size:1.3rem;letter-spacing:0.5px;border-radius:5px;padding-left:15px;height:55px;}
.input_section .select2-container--default .select2-selection--single{border:1px solid #ccc;background:transparent;
outline:none;}
.input_section .select2-search--dropdown .select2-search__field{outline:none;}
.select2>.select2-selection{height:34px;}
.input_section input:readonly{cursor:not-allowed;background-color:#e4e5e4;}
.input_section button[type="button"]{display:inline-block;padding:5px;margin-right:15px;width:100px;border:none;
color:#fff;background-color:#666d77;border-radius:2px;letter-spacing:0.5px;font-weight:500;}
.input_section input[type="button"]{display:inline-block;padding:5px;margin-right:15px;border:none;
color:#fff;background-color:#666d77;border-radius:2px;letter-spacing:0.5px;font-weight:500;}
.input_section button[type="button"] span i{margin-right:10px;}
.input_section button[type="button"]:disabled{cursor:not-allowed;}
.input_section button[type="submit"]{display:inline-block;padding:5px;margin-right:15px;width:100px;border:none;
color:#fff;background-color:#060;border-radius:2px;letter-spacing:0.5px;font-weight:500;}
.input_section button[type="submit"] span i{margin-right:10px;}
.input_section button[type="submit"]:disabled{cursor:not-allowed;}

input[type="text"]:focus, input[type="password"]:focus,select:focus,textarea:focus,input[type="number"]:focus
{box-shadow:0px 0px 1px 0px #09c;border:1px solid #09c;}

.btn_edit{display:inline-block;padding:3px;color:#060;letter-spacing:0.5px;font-weight:500;}
.btn_edit i{margin-right:5px;}
.btn_edit:hover{color:#060;}
.btn_del{display:inline-block;padding:3px;color:#f30;letter-spacing:0.5px;font-weight:500;}
.btn_del i{margin-right:5px;}
.btn_del:hover{color:#f30;}

.btn_action{display:inline-block;margin:16px;padding:5px;color:#fff;letter-spacing:0.5px;font-weight:500;
background-color:#09c;border-radius:5px;margin-left:0px;margin-top:0px;}
.btn_action:hover{color:#fff;}

.btn_list{display:inline-block;margin:5px;padding:5px;color:#fff;letter-spacing:0.5px;font-weight:500;
background-color:#09c;border-radius:5px;}
.btn_list:hover{color:#fff;}

.btn_add{display:inline-block;padding:5px;color:#fff;letter-spacing:0.5px;font-weight:500;
background-color:#09c;border-radius:5px;}
.btn_add:hover{color:#fff;}

.no_data_section{width:100%;float:left;}
.no_data_container{width:100%;float:left;text-align:center;}
.no_data_container p{display:block;padding:20px;letter-spacing:0.8px;font-size:18px;font-weight:500;}
.no_data_container a{display:inline-block;}


.panel_container{width:100%;float:left;border:1px solid #ccc;border-bottom-left-radius:5px;border-bottom-right-radius:5px;
border-top:none;}
.panel_data{width:100%;float:left;padding-left:25px;padding-right:25px;margin-top:15px;margin-bottom:15px;}

.form_head{display:block;padding:8px;letter-spacing:0.8px;font-size:14px;padding-left:0;word-break: break-all;}
.form_head1{display:block;padding:5px;letter-spacing:0.8px;font-weight:bold;font-size:12px;padding-left:0;word-break: break-all;}


.action_icon{width:100%;float:left:display:block;color:inherit;}
.action_icon:hover{color:inherit;}
.icon_section{width:100%;float:left;padding:15px;text-align:center;border-radius:5px;background-color:#24292e;}
.icon_title{width:100%;float:left;}
.icon_title span{display:block;padding:5px;font-weight:bold;letter-spacing:0.8px;color:#fff;}
.icon_body{width:100%;float:left;}
.icon_body span{display:block;padding:5px;font-weight:bold;letter-spacing:0.5px;color:#fff;font-size:20px;}

@media (max-width: 768px) {
	.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12{width:100%;}
	.col_p_1,.col_p_2,.col_p_3.col_p_4,.col_p_5,.col_p_6,.col_p_7,.col_p_8,.col_p_9,.col_p_10,.col_p_11,.col_p_12{width:100%;}
	.toast-top-right {top: 240px;margin: 0 auto;right:0;}
	.modal-dialog{width:100%;}
	.body_section{margin-top:5px;}
}


.blinking-cursor {
  margin-left: 5px;
  background-color: #fff;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  50.1%, 100% {
    opacity: 0;
  }
}








body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  align-items: center;
  justify-content: center;
  background-color: #bfdfec;
  font-family: system-ui, calibri, serif;
  background-repeat: repeat-x;
  background-image: url("https://i.stack.imgur.com/b7z29.png");
  animation: movement 10s linear infinite;
}

@keyframes movement {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 560px 0px;
  }
}


#th {
   vertical-align: bottom;
  background-color: #666;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 9999;
  overflow: hidden;
} 





















.hover-underline {
  font-size: 2rem;
  color: #ffffff;
  position: relative;
  display: inline-block;
}

.hover-underline::after,
.hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff0000, #00ffff);
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

.hover-underline::before {
  top: -5px;
  transform-origin: left;
}

.hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(1);
}





.zoom {
  padding: 50px;
 background-color: #25907B  ;
  transition: transform .2s;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}




.zoom2 {
  padding: 50px;
 background-color: #A62D1A ;
  transition: transform .2s;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.zoom2:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}






/*.col_12          { overflow: auto; height: 1000px; }*/
.col_12 thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }








.input-wrapper input {
  background-color: #eee;
  border: none;
  padding: 1rem;
  font-size: 1rem;
  width: 13em;
  border-radius: 1rem;
  color: lightcoral;
  box-shadow: 0 0.4rem #dfd9d9;
  cursor: pointer;
}

.input-wrapper input:focus {
  outline-color: lightcoral;
}