@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');


*{
  font-family: 'dm sans',sans-serif;
  box-sizing: border-box;
}

body {
  
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;

}

fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #8A2BE2;
  background-color: #F0F8FF;
}

legend {
  display: block;
  width: 100%;
  padding: 5px;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #8A2BE2;
  background-color: #fff;
  text-align: center;
  color: #ff0000;
  /*border-bottom: 3px solid #ff0000;*/
}

form
{
width:100%;
/*max-width:1400px;*/
}

input,select
{
width:100%;
height:40px;
  padding: 8px 8px;
  margin: 0px;
  display: inline-block;
  border: 2px solid #87CEFA;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
  font-size:14px;
}

.input_mandatory
{
width:100%;
  padding: 8px 8px;
  margin: 0px;
  display: inline-block;
  border: 2px solid #F08080;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
  font-size:14px;
}

textarea
{
  width:100%;
  height:100px;
  padding: 8px 8px;
  margin: 0px;
  display: inline-block;
  border: 2px solid #87CEFA;
  border-radius: 4px;
  box-sizing: border-box;
  /*background-color: #DDDDDD;*/
  font-size:14px;
}


.textarea-200
{
width:100%;
height:200px;
  padding: 8px 8px;
  margin: 0px;
  display: inline-block;
  border: 2px solid #87CEFA;
  border-radius: 4px;
  box-sizing: border-box;
  /*background-color: #DDDDDD;*/
  font-size:14px;
}


.textarea-300
{
width:100%;
height:300px;
  padding: 8px 8px;
  margin: 0px;
  display: inline-block;
  border: 2px solid #87CEFA;
  border-radius: 4px;
  box-sizing: border-box;
  /*background-color: #DDDDDD;*/
  font-size:14px;
}

  .tdtext-S {
  font-size: 7px;
  }

  .tdtext-M {
  font-size: 8px;

  }

  .tdtext-L {
  font-size: 10px;
  }

.txt-14 {
  padding: 0px;
  font-size: 14px;
}

.txt-15 {
  padding: 0px;
  text-align: center;
  font-size: 15px;
}

.txt-16 {
  padding: 0px;
  text-align: center;
  font-size: 16px;
}

.container {
  width:90%;
  margin: 0 auto;
  border-radius: 5px;
  /*background-color: #F0F8FF;
  border: 3px solid #87CEFA;*/
}

.container-40 {
  width:40%;
  text-align: center;
  border-radius: 5px;
  /*border: 3px solid #87CEFA;*/
}

.container-login {
  width:40%;
  margin: 0 auto;
  text-align: center;
  border-radius: 5px;
  background-color: #87CEFA;
  padding: 30px;
  opacity: 0.8;
  align-items: center;
  border: 1 px solid #fff;
}

.row
{
display:flex;
justify-content:space-between;
}

.flex5
{
display: grid;
flex:1 1 5%;
/*border: 2px solid #87CEFA;*/
padding: 4px;
}

.flex10
{
display: grid;
flex:1 1 10%;
padding: 4px;

}

.flex15
{
display: grid;
flex:1 1 15%;
padding: 4px;
}

.flex20
{
display: grid;
flex:1 1 20%;
padding: 4px;
}

.flex30
{
display: grid;
flex:1 1 30%;
padding: 4px;
}

.flex40
{
display: grid;
flex:1 1 40%;
padding: 4px;
}

.flex50
{
display: grid;
flex:1 1 50%;
padding: 4px;
}

.flex60
{
display: grid;
flex:1 1 60%;
padding: 4px;
border: 2px solid #87CEFA;
}

.flex70
{
display: grid;
flex:1 1 70%;
padding: 4px;
}

.flex90
{
display: grid;
flex:1 1 90%;
padding: 4px;
}
.input-group-0
{
width: 50%;
margin-bottom:30px;
display:grid;
}

.input-group-1
{
width: 100%;
margin-bottom:30px;
display:grid;
}

.input-group-2
{
flex-basis:48%;
margin-bottom:30px;
display:grid;
}

.input-group-3
{
flex-basis:30%;
margin-bottom:30px;
display:grid;
align-items: center;
/*border: 2px solid #87CEFA;*/
}

.input-group-4
{
flex-basis:23%;
/*flex-basis:15% 30%,15%;*/
margin-bottom:30px;
display:grid;
  /*border: 3px solid #87CEFA;*/
}

/*------------------------------------------------------------------------------------*/

  .container_search {
    display: flex;
    width: 100%;
  }

  .container_search > div:nth-child(1) {
    flex-basis: 30%;
  }

  .container_search > div:nth-child(2) {
    flex-basis: 15%;
  }

  .container_search > div:nth-child(3) {
    flex-basis: 10%;
  }

  .container_search > div:nth-child(4) {
    flex-basis: 5%;
  }

  .container_search > div:nth-child(5),
  .container_search > div:nth-child(6),
  .container_search > div:nth-child(7),
  .container_search > div:nth-child(8) {
    flex-basis: 15%;
  }

  .container_search > div:not(:last-child) {
    margin-right: 10px; /* Adjust the margin as per your requirements */
  }

/*------------------------------------------------------------------------------------*/

.input-group-5
{
flex-basis:18%;
margin-bottom:30px;
display:grid;
}

.input-group-6
{
flex-basis:15%;
margin-bottom:30px;
display:grid;
}

.input-group-7
{
flex-basis:13%;
margin-bottom:30px;
display:grid;
}

.input-group-8
{
flex-basis:11%;
margin-bottom:30px;
display:grid;
}

.input-group-3-flex1
{
flex-grow: 1;
padding: 0px 0px 40px  20px;
}

.input-group-3-flex2
{
flex-grow: 4;
padding: 0px 20px 40px  0px;
}

.text_border {
  border-style: solid;
  border: 2px solid #13aa52;
  padding: 8px 8px;
  height:40px;
  text-decoration: none;
  background-color: #fff;
  color: #000000;
}

.text_border:hover {
  height:40px;
  background-color: #13aa52;
  border: 2px solid #87CEFA;
  color: #fff;
  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
  transform: translateY(-2px);
  text-decoration: none;
}

.form-chb {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  
}


#table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

#table td, #table th {
  border: 1px solid #ddd;
  padding: 8px;
}

.table_td_linebreak {
  border: 1px solid #ddd;
  padding: 8px;
  white-space: pre-line; /* Added line */
}

#table tr:nth-child(even){background-color: #f2f2f2;}

#table tr:hover {background-color: #ddd;}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}


/* ######################################  WARNING MESSAGES ##############################################*/

.bar {
  padding: 10px;
  margin: 10px;
  color: #333;
  background: #fafafa;
  border: 1px solid #ccc;
}

/* (B) THE VARIATIONS */
.info {
  color: #204a8e;
  background: #c9ddff;
  border: 1px solid #4c699b;
}
.success {
  color: #2b7515;
  background: #ecffd6;
  border: 1px solid #617c42;
}
.warn {
  color: #756e15;
  background: #fffbd1;
  border: 1px solid #87803e;
}
.error {
  color: #ba3939;
  background: #ffe0e0;
  border: 1px solid #a33a3a;
}



/* ######################################  Button Style ##############################################*/


.button-37 {
  border: 2px solid #13aa52;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-37:hover {
  background-color: #13aa52;
  color: #fff;
  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
  transform: translateY(-2px);
  border: 2px solid #87CEFA;
  
}

.button-38 {
  border: 2px solid #13aa52;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-38:hover {
  background-color: #FF0000;
  color: #fff;
  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
  transform: translateY(-2px);
  border: 2px solid #87CEFA; 
}

.button-39 {
  border: 2px solid #13aa52;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-39:hover {
  background-color: #00B0F0;
  color: #fff;
  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
  transform: translateY(-2px);
  border: 2px solid #13aa52; 
}

@media (min-width: 768px) {
  .button-37 {
    padding: 10px 30px;
  }
}




/*    ######################################################## OFF CANVA MUEN ###############################################*/



html {
  font-size: 7px;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  outline: none;

}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

li {
  list-style-type: none; // remove list style
}

@keyframes hover {
  50% {
    transform: translateX(10px);
  }
}
.offcanvas-menu > label {
  top: 30px;
  left: 30px;
  position: fixed;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  align-items: center;
  z-index: 9999;

}
.offcanvas-menu label span,
.offcanvas-menu label span::before,
.offcanvas-menu label span::after {
  transition: background 0.3s, transform 0.3s;
}
.offcanvas-menu label span,
.offcanvas-menu label span::before,
.offcanvas-menu label span::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 40px;
  /*background: #b3b3b3;*/
  background: #000000;   /* Menu lines color  */
}
.offcanvas-menu label span::before {
  transform: translateY(-12px);
}
.offcanvas-menu label span::after {
  transform: translateY(12px);
}
.offcanvas-menu nav {
  position: fixed;
  height: 100%;
  width: 350px;
  left: -350px;
  overflow: hidden;
  background: #bdddff; /*Menu backgound*/
  transition: 0.3s ease;
  padding: 40px 30px;
    
}
.offcanvas-menu nav > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.offcanvas-menu nav > div a {
  font-size: 2.5rem;      /* Title Font*/
  font-weight: 500;
  display: flex;
  align-items: center;
  /*font-family: "Monoton", cursive;*/ 
  background: linear-gradient(-90deg, #49a4ed 30%, #3d00a9 110%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.offcanvas-menu nav > div a i {
  font-size: 4rem;
  background: linear-gradient(120deg, #49a4ed 30%, #3d00a9 110%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.offcanvas-menu nav > div label {
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
  
}
.offcanvas-menu nav > div label span,
.offcanvas-menu nav > div label span:before,
.offcanvas-menu nav > div label span:after {
  background: #4d4d4d;
}
.offcanvas-menu nav > ul {
  margin-top: 30px;
  counter-reset: nav-link-count;

}
.offcanvas-menu nav > ul li {
  cursor: pointer;
  padding: 3px ;
  transform: translateX(-30px);
  opacity: 0;
  transition: 0.4s ease;
  counter-increment: nav-link-count;

}
.offcanvas-menu nav > ul li a {
  font-size: 2.5rem;
  line-height: 1.5;
  font-weight: 400;
  color: #333333;
  display: block;
}

.offcanvas-menu nav > ul li:hover {
  animation: hover 0.7s;
}
.offcanvas-menu input[type=checkbox] {
  display: none;
}
.offcanvas-menu input[type=checkbox]:checked ~ label {
  opacity: 0;
  pointer-events: none;
}
.offcanvas-menu input[type=checkbox]:checked ~ nav {
  left: 0;
}
.offcanvas-menu input[type=checkbox]:checked ~ nav label span {
  background: transparent;
}
.offcanvas-menu input[type=checkbox]:checked ~ nav label span:before {
  transform: rotate(-45deg);
}
.offcanvas-menu input[type=checkbox]:checked ~ nav label span:after {
  transform: rotate(45deg);
}
.offcanvas-menu input[type=checkbox]:checked ~ nav label span:before,
.offcanvas-menu input[type=checkbox]:checked ~ nav label span:after {
  transition-delay: 0.2s;
}
.offcanvas-menu input[type=checkbox]:checked ~ nav ul li {
  opacity: 1;
  transform: translateX(0px);
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  font-size: 4rem;
  color: #b3b3b3;
}
section:nth-child(odd) {
  background: #120a21;
}
section:nth-child(even) {
  background: #170d28;
}

footer {
  padding: 20px 0;
  text-align: center;
  font-size: 1.5rem;
  background: #120a21;
  color: gray;
}
footer a {
  color: #999999;
}

  
img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

#menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 9999;
  /* Add any other styles as needed */
}