:root {
  --color-default: #fff;
  --color-second: #0067ac;
  --color-white: #fff;
  --color-body: #e4e9f7;
  --color-light: #e0e0e0;
  --color-black: #000;
}

* {
  margin: 0;
  padding: 0;
  /* font-family: 'Nunito'; */
  box-sizing: border-box;
  font-family: var(--font-family-primary);
  /* --font-size-primary: 14px; */
  font-size: var(--font-size-primary);
}

body {
  min-height: 100svh;
}

.skeleton-div {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
  display: flex;
  flex-direction: column;
}

.skeleton {
  opacity: 0.7;
  animation: sleleton-loading 1s linear infinite alternate;
}

.skeleton-text {
  width: 80%;
  height: 1.5rem;
  border-radius: 0.1rem;
  margin-bottom: 4px;
}

.skeleton-text-short {
  width: 40%;
}

@keyframes sleleton-loading {
  0% {
    background-color: hsl(200, 20%, 75%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

/* checkbox ripple */

input[type='checkbox']:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #005792;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

input[type='checkbox'] {
  border-radius: 50%;
}

input[type='checkbox'].radio::after {
  border-radius: 50%;
}

@keyframes click-wave {
  0% {
    height: 10px;
    width: 10px;
    opacity: 0.35;
    position: relative;
    border-radius: 50%;
  }
  100% {
    height: 80px;
    width: 80px;
    margin-left: -26px;
    margin-top: -28px;
    opacity: 0;
    border-radius: 50%;
  }
}

.add-new-employee-heading {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
}