.d-none{
   display: none;
}
/*buttons*/
.button{
   border-radius: 4px;
   padding: 5px 10px;
   border: none;
   display: block;
   min-width: 100px;
}

.button:hover{
   opacity: 0.7;
}

.button:disabled{
   pointer-events: none;
   opacity: 0.7;
   filter: grayscale(1);
}

.button.primary{
   color: white;
   background-color: #204B9B;
}

.button.error{
  color: white;
  background-color: #e44848;
}

.button.sm{
   font-size: 16px;
   padding: 5px 10px;
}

.button.md{
   font-size: 18px;
   padding: 7px 12px;
}

.button.lg{
   font-size: 20px;
   padding: 10px 15px;
}

/*Layout*/

.column{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.row-nowrap{
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.row-wrap{
  display: flex;
  gap: 15px;
  flex-direction: row;
  flex-wrap: wrap;
}

.card{
  padding: 15px;
  border-radius: 12px;
  background-color: white;
  box-shadow: 3px 3px 25px #69758141;
}

/****************SCROLLBAR***************/
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

header.main-header > a.logo{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222d32 !important;
}

header.main-header > a.logo > img.small{
  display: none;
}

header.main-header > a.logo > img.large{
  display: block;
  height: 70%;
}

.sidebar-collapse header.main-header > a.logo > img.large{
  display: none !important;
}

.sidebar-collapse header.main-header > a.logo > img.small{
  display: block !important;
  height: 60%;
}

.loading-backdrop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #8282822e;
  backdrop-filter: blur(7px);
  z-index: 2000;
}

.loading-backdrop > .figure-loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.loading-backdrop > .figure-loading > p{
  font-weight: bold;
  font-size: 18px;
  margin: 0;
  color: #222d32;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #222d32;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

h1.box-title{
  font-weight: bold;
  font-size: 25px !important;
  color: #222d32;
}

.btn > .fa{
  margin-right: 10px;
}
.dataTables_filter > label > input{
  padding: 5px 10px;
  border: none;
  background-color: white;
  border-radius: 4px;
  font-size: 18px;
  font-weight: normal;
  border: solid 2px #222d3269;
}

.dataTables_filter > label > input:focus{
  outline-color: #222d32;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}