:root {
  --white-color: #fff;

  --primary-color: dodgerblue;
  --primary-color-hover: rgb(64, 159, 255);
  --primary-color-active: rgb(11, 133, 255);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: block;
  margin: auto;
  margin-bottom: 150px;
  height: 75vh;
  /* background-color: aqua; */

  width: 80%; /* Default for large screens */

  @media screen and (max-width: 1100px) {
    width: 85%;
  }

  @media screen and (max-width: 800px) {
    width: 90%;
  }

  @media screen and (max-width: 500px) {
    width: 100%;
  }
}
.continer{
 display: block;
  margin: auto;
  /* background-color: aqua; */

  width: 80%; /* Default for large screens */

  @media screen and (max-width: 1100px) {
    width: 85%;
  }

  @media screen and (max-width: 800px) {
    width: 90%;
  }

  @media screen and (max-width: 500px) {
    width: 100%;
  }
}

.mt-3 {
  margin-top: 30px;
}

.scrol {
  max-height:400px;
  overflow-x:auto;
  
}

th{
  background-color:#dfdede;
  position:sticky;
  top:0;
  z-index:2;
}

.mt-5 {
  margin-top: 50px;
}

.p-2 {
  padding: 10px;
}
.title{
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
}

.btn {
  padding: 10px 15px;
  border-radius: 10px;
  border: none !important;
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--white-color);
}

.btn:hover {
  background-color: var(--primary-color-hover);
}

.btn:active {
  background-color: var(--primary-color-active);
}

.btn-small {
  padding: 5px 10px;
  aspect-ratio: 1/1;
}

.table {
  width: 100%;
  border-radius: 12px;
  border-collapse: collapse;
}

.table td,
.table th {
  border: 1px solid gainsboro;
  height: 40px;
  padding: 0px 10px;
  text-align: center;
}
.table tbody td:nth-child(6){
  text-align:left;
}

.table thead tr {
  background-color: rgb(248, 248, 248);
}

.table tbody tr:nth-child(even) {
  background-color: rgb(248, 248, 248);
}

.table tbody tr:hover {
  background-color: rgb(239, 239, 239);
}

.form-input {
  padding: 7px 10px;
  outline: none;
  border: 1px solid gainsboro;
  border-radius: 5px;
  width: 100%;
  height: 31.5px;
}

.form-input:focus,
.form-textarea:focus {
  background-color: rgb(246, 246, 246);
}

.form-textarea {
  padding: 7px 10px;
  outline: none;
  border: 1px solid gainsboro;
  border-radius: 5px;
  width: 100%;
  min-height: 31.5px;
}

.d-flex {
  display: flex;
}

.justify-end {
  justify-content: end;
}

.justify-between {
  justify-content: space-between;
}
#icon-x {
  color: red;
}
#icon-right{
  color: green;
}