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

:root,
[data-bs-theme=light] {
  --color-text: #616161;
  --color-text-btn: #ffffff;
  --card1-gradient-color1: #0d6efd;
  --card1-gradient-color2: #20c997;

  --card2-gradient-color1: #6610f2;
  --card2-gradient-color2: #d63384;

  --card3-gradient-color1: #6f42c1;
  --card3-gradient-color2: #0dcaf0;

  --card4-gradient-color1: #d63384;
  --card4-gradient-color2: #ef3838;

  --card5-gradient-color1: #dc3545;
  --card5-gradient-color2: #dd8383;

  --card6-gradient-color1: #fd7e14;
  --card6-gradient-color2: #ffc107;

  --card7-gradient-color1: #ffc107;
  --card7-gradient-color2: #f7a996;

  --card8-gradient-color1: #198754;
  --card8-gradient-color2: #93d4e4;

  --card9-gradient-color1: #20c997;
  --card9-gradient-color2: #93d4e4;

  --card10-gradient-color1: #0dcaf0;
  --card10-gradient-color2: #6f84be;

  --card11-gradient-color1: #343a40;
  --card11-gradient-color2: #e9ecef;

  --card12-gradient-color1: #17a2b8;
  --card12-gradient-color2: #d1ecf1;

  --card-bg-color: #FFF;
  --card-border-color: #FFF;
  --card-header-color: #FFF;
}

[data-bs-theme=dark] {
  --color-text: #616161;
  --color-text-btn: #ffffff;
  --card1-gradient-color1: #0d6efd;
  --card1-gradient-color2: #20c997;

  --card2-gradient-color1: #6610f2;
  --card2-gradient-color2: #d63384;

  --card3-gradient-color1: #6f42c1;
  --card3-gradient-color2: #0dcaf0;

  --card4-gradient-color1: #d63384;
  --card4-gradient-color2: #ef3838;

  --card5-gradient-color1: #dc3545;
  --card5-gradient-color2: #dd8383;

  --card6-gradient-color1: #fd7e14;
  --card6-gradient-color2: #ffc107;

  --card7-gradient-color1: #ffc107;
  --card7-gradient-color2: #f7a996;

  --card8-gradient-color1: #198754;
  --card8-gradient-color2: #93d4e4;

  --card9-gradient-color1: #20c997;
  --card9-gradient-color2: #93d4e4;

  --card10-gradient-color1: #0dcaf0;
  --card10-gradient-color2: #6f84be;

  --card11-gradient-color1: #343a40;
  --card11-gradient-color2: #e9ecef;

  --card12-gradient-color1: #17a2b8;
  --card12-gradient-color2: #d1ecf1;

  --card-bg-color: #d6d6d6;
  --card-border-color: #8a8a8a;
  --card-header-color: #FFF;
}

.card-sad {
  height: 200px;
  background: var(--card-bg-color);
  border-radius: 20px;
  border: 5px solid var(--card-border-color);
  overflow: hidden;
  overflow-wrap: break-word;
  color: var(--color-text);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  position: relative;


}

.card-sad:hover {
  transform: scale(1.05);
}

.card-sad-header {
  height: 100px;
  width: 100%;
  background: red;
  border-radius: 100% 0% 100% 0% / 0% 50% 50% 100%;
  display: grid;
  place-items: center;


}

.card-sad-header a {
  color: var(--card-header-color);
  font-size: 50px;
  text-decoration: none;
}

.card-sad-header a:hover {
  color: var(--card-header-color);
  font-size: 50px;
  text-decoration: none;
}


.card-sad-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.card-sad-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 20px;
  overflow-wrap: anywhere;

}

.card-sad-text {
  text-align: center;
  font-size: 12px;
  margin-bottom: 20px;
}

.btn.card-sad-btn-one {
  background: #fafafa;
  border-color: var(--card1-gradient-color1);
}

.btn.card-sad-btn-one:hover {
  background: #fae2e2;
  border-color: var(--card1-gradient-color1);
}

.btn.card-sad-btn-two {
  border-color: var(--card2-gradient-color1);
}

.btn.card-sad-btn-two:hover {
  background: #f1e2fa;
  border-color: var(--card2-gradient-color1);
}

.btn.card-sad-btn-three {
  border-color: var(--card3-gradient-color1);
}

.btn.card-sad-btn-three:hover {
  background: #e4e2fa;
  border-color: var(--card3-gradient-color1);
}

.btn.card-sad-btn-four {
  border-color: var(--card4-gradient-color1);
}

.btn.card-sad-btn-four:hover {
  background: #e2faf6;
  border-color: var(--card4-gradient-color1);
}

.card-sad-header.blue {
  background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}

.card-sad-header.indigo {
  background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}

.card-sad-header.purple {
  background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}

.card-sad-header.pink {
  background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-sad-header.red {
  background: linear-gradient(to bottom left, var(--card5-gradient-color1), var(--card5-gradient-color2));
}

.card-sad-header.orange {
  background: linear-gradient(to bottom left, var(--card6-gradient-color1), var(--card6-gradient-color2));
}

.card-sad-header.yellow {
  background: linear-gradient(to bottom left, var(--card7-gradient-color1), var(--card7-gradient-color2));
}

.card-sad-header.green {
  background: linear-gradient(to bottom left, var(--card8-gradient-color1), var(--card8-gradient-color2));
}

.card-sad-header.teal {
  background: linear-gradient(to bottom left, var(--card9-gradient-color1), var(--card9-gradient-color2));
}

.card-sad-header.cyan {
  background: linear-gradient(to bottom left, var(--card10-gradient-color1), var(--card10-gradient-color2));
}

.card-sad-header.gray {
  background: linear-gradient(to bottom left, var(--card11-gradient-color1), var(--card11-gradient-color2));
}



.card-dash {

  height: 300px;

  border-radius: 20px 0px 20px 0px;
  border: 5px solid #fff;
  overflow: hidden;
  overflow-wrap: break-word;
  color: var(--color-text);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 20px,
    rgba(0, 0, 0, 0.10) 0px 6px 6px;
  cursor: default;
  transition: all .2s ease-in-out;
  position: relative;


}

.card-dash:hover {
  transform: scale(1.05);
}

.card-dash-header {
  height: 70px;
  width: 100%;
  background: red;
  border-radius: 100% 0% 100% 0% / 0% 50% 50% 100%;
  display: grid;
  place-items: center;


}

.card-dash-header_xxx {
  height: 50px;
  width: 50px;
  border-radius: 100% 0% 100% 0% / 0% 100% 100% 100%;
  display: grid;
  place-items: center;
  z-index: 10;
}

.card-dash-header2 {
  position: absolute;
  top: 0px;
  left: 5px;
  height: 50px;
  width: 50px;
  background: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  z-index: -1;
}

.card-dash-top {
  position: absolute;
  top: 0px;
  left: 30px;
  height: 50px;
  width: 220px;
  background: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  z-index: -2;
}

.card-dash-header span {
  margin-top: -10px;
  color: #fff;
  font-size: 25px;
  text-decoration: none;
}

.card-dash-footer {
  position: absolute;
  top: 260px;
  right: 0px;
  height: 30px;
  width: 30px;
  background: red;
  border-radius: 100% 100% 75% 0% / 100% 0% 75% 0%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.card-dash-footer a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}

.card-dash-content {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 0 auto;
}

.card-dash-content b {
  font-size: 18px;
}

.card-dash-content header {
  padding-bottom: 10px;
}

.card-dash-title {
  color: #707070;
  position: absolute;
  width: 225px;
  left: 0px;
  top: 0px;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}

.card-dash-department {
  position: absolute;
  width: 100%;
  right: 15px;
  top: 260px;
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}

.card-dash-text {
  text-align: center;
  font-size: 12px;
  margin-bottom: 20px;
}

.btn.card-dash-btn-one {
  background: #fafafa;
  border-color: var(--card1-gradient-color1);
}

.btn.card-dash-btn-one:hover {
  background: #fae2e2;
  border-color: var(--card1-gradient-color1);
}

.btn.card-dash-btn-two {
  border-color: var(--card2-gradient-color1);
}

.btn.card-dash-btn-two:hover {
  background: #f1e2fa;
  border-color: var(--card2-gradient-color1);
}

.btn.card-dash-btn-three {
  border-color: var(--card3-gradient-color1);
}

.btn.card-dash-btn-three:hover {
  background: #e4e2fa;
  border-color: var(--card3-gradient-color1);
}

.btn.card-dash-btn-four {
  border-color: var(--card4-gradient-color1);
}

.btn.card-dash-btn-four:hover {
  background: #e2faf6;
  border-color: var(--card4-gradient-color1);
}

.card-dash-header.blue {
  background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}

.card-dash-footer.blue {
  background: linear-gradient(to top right, var(--card1-gradient-color1), var(--card1-gradient-color2));
}

.card-dash-header.indigo {
  background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}

.card-dash-footer.indigo {
  background: linear-gradient(to top right, var(--card2-gradient-color1), var(--card2-gradient-color2));
}

.card-dash-header.purple {
  background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}

.card-dash-footer.purple {
  background: linear-gradient(to top right, var(--card3-gradient-color1), var(--card3-gradient-color2));
}

.card-dash-header.pink {
  background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-dash-footer.pink {
  background: linear-gradient(to top right, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-dash-header.red {
  background: linear-gradient(to bottom left, var(--card5-gradient-color1), var(--card5-gradient-color2));
}

.card-dash-footer.red {
  background: linear-gradient(to top right, var(--card5-gradient-color1), var(--card5-gradient-color2));
}

.card-dash-header.orange {
  background: linear-gradient(to bottom left, var(--card6-gradient-color1), var(--card6-gradient-color2));
}

.card-dash-footer.orange {
  background: linear-gradient(to top right, var(--card6-gradient-color1), var(--card6-gradient-color2));
}

.card-dash-header.yellow {
  background: linear-gradient(to bottom left, var(--card7-gradient-color1), var(--card7-gradient-color2));
}

.card-dash-footer.yellow {
  background: linear-gradient(to top right, var(--card7-gradient-color1), var(--card7-gradient-color2));
}

.card-dash-header.green {
  background: linear-gradient(to bottom left, var(--card8-gradient-color1), var(--card8-gradient-color2));
}

.card-dash-footer.green {
  background: linear-gradient(to top right, var(--card8-gradient-color1), var(--card8-gradient-color2));
}

.card-dash-header.teal {
  background: linear-gradient(to bottom left, var(--card9-gradient-color1), var(--card9-gradient-color2));
}

.card-dash-footer.teal {
  background: linear-gradient(to top right, var(--card9-gradient-color1), var(--card9-gradient-color2));
}

.card-dash-header.cyan {
  background: linear-gradient(to bottom left, var(--card10-gradient-color1), var(--card10-gradient-color2));
}

.card-dash-footer.cyan {
  background: linear-gradient(to top right, var(--card10-gradient-color1), var(--card10-gradient-color2));
}

.card-dash-header.gray {
  background: linear-gradient(to bottom left, var(--card11-gradient-color1), var(--card11-gradient-color2));
}

.card-dash-footer.gray {
  background: linear-gradient(to top right, var(--card11-gradient-color1), var(--card11-gradient-color2));
}

.card-dash-header.info {
  background: linear-gradient(to bottom left, var(--card12-gradient-color1), var(--card12-gradient-color2));
}

.card-dash-footer.info {
  background: linear-gradient(to top right, var(--card12-gradient-color1), var(--card12-gradient-color2));
}



:root,
[data-bs-theme=light] {
  --sofia-color-text: #FFF;
  --sofia-color-headlinetext: #FFF;
  --sofia-color-text-btn: #ffffff;
  --sofia-card-bg-color: #FFF;
  --sofia-card-border-color: #FFF;
  --sofia-card-header-color: #FFF;
}

[data-bs-theme=dark] {
  --sofia-color-text: #FFF;
  --sofia-color-headlinetext: #3b3b3b;
  --sofia-color-text-btn: #ffffff;
  --sofia-card-bg-color: #424242;
  --sofia-card-border-color: #2b2b2b;
  --sofia-card-header-color: #FFF;
}



.card-sofia {
  height: 220px;
  background: var(--sofia-card-bg-color);
  border-radius: 20px;
  border: 5px solid var(--sofia-card-border-color);
  overflow: hidden;
  overflow-wrap: break-word;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
  /*cursor: pointer;*/
  transition: all .2s ease-in-out;
  position: relative;


}

.card-sofia:hover {
  /*transform: scale(1.01);*/
}

.card-sofia-header {
  left: 0px;
  height: 200px;
  width: 42px;
  background: red;
  border-radius: 100% 0% 100% 0% / 0% 95% 20% 100%;
  display: grid;
  position: absolute;
}

.card-sofia-header a {
  color: var(--sofia-color-headlinetext);
  font-size: 24px;
  text-decoration: none;
  margin-left: 10px;
  margin-top: 10px;
  height: 40px;
}

.card-sofia-header .headline {
  width: 40px;
  height: 75px;
  color: var(--sofia-color-headlinetext);
  font-size: 20px;
  text-decoration: none;
  margin-left: 0px;
  margin-top: 60px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);

}

.card-sofia-header a:hover {
  color: var(--sofia-color-headlinetext);
  font-size: 24px;
  text-decoration: none;
}


.card-sofia-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding-left: 55px;
  padding-top: 0px;
  padding-bottom: 5px;
  padding-right: 10px;
}

.card-sofia-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 20px;
  overflow-wrap: anywhere;

}

.card-sofia-text {
  text-align: center;
  font-size: 12px;
  margin-bottom: 20px;
}

.btn.card-sofia-btn-one {
  background: #fafafa;
  border-color: var(--card1-gradient-color1);
}

.btn.card-sofia-btn-one:hover {
  background: #fae2e2;
  border-color: var(--card1-gradient-color1);
}

.btn.card-sofia-btn-two {
  border-color: var(--card2-gradient-color1);
}

.btn.card-sofia-btn-two:hover {
  background: #f1e2fa;
  border-color: var(--card2-gradient-color1);
}

.btn.card-sofia-btn-three {
  border-color: var(--card3-gradient-color1);
}

.btn.card-sofia-btn-three:hover {
  background: #e4e2fa;
  border-color: var(--card3-gradient-color1);
}

.btn.card-sofia-btn-four {
  border-color: var(--card4-gradient-color1);
}

.btn.card-sofia-btn-four:hover {
  background: #e2faf6;
  border-color: var(--card4-gradient-color1);
}

.card-sofia-header.blue {
  background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}

.card-sofia-header.indigo {
  background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}

.card-sofia-header.purple {
  background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}

.card-sofia-header.pink {
  background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-sofia-header.red {
  background: linear-gradient(to bottom left, var(--card5-gradient-color1), var(--card5-gradient-color2));
}

.card-sofia-header.orange {
  background: linear-gradient(to bottom left, var(--card6-gradient-color1), var(--card6-gradient-color2));
}

.card-sofia-header.yellow {
  background: linear-gradient(to bottom left, var(--card7-gradient-color1), var(--card7-gradient-color2));
}

.card-sofia-header.green {
  background: linear-gradient(to bottom left, var(--card8-gradient-color1), var(--card8-gradient-color2));
}

.card-sofia-header.teal {
  background: linear-gradient(to bottom left, var(--card9-gradient-color1), var(--card9-gradient-color2));
}

.card-sofia-header.cyan {
  background: linear-gradient(to bottom left, var(--card10-gradient-color1), var(--card10-gradient-color2));
}

.card-sofia-header.gray {
  background: linear-gradient(to bottom left, var(--card11-gradient-color1), var(--card11-gradient-color2));
}