/* Link colors */

body {
  font-size: 10pt;
  font-family: "Outfit", sans-serif, Tahoma;
  background-color: #fff;
  background-position: bottom;
  background-size: cover;
  background-attachment: scroll;
}

tr,
td,
div,
li,
select {
  font-family: "Outfit", sans-serif, Tahoma;
  font-size: 11pt;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.copyright,
.copyright a {
  font-size: 9pt !important;
  color: #111;
}

#sidebarx {
  position: sticky;
  bottom: 0;
  width: 100vw;
  z-index: 100;
}
.sidebar-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
}
.collapsed #sidebarx {
  display: none;
}

#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}

#facebox .popup {
  position: relative;
  border: 3px solid rgba(0, 0, 0, 0);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}

#facebox .content {
  display: table;
  width: 370px;
  padding: 10px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: Verdana;
}

#facebox .content > p:first-child {
  margin-top: 0;
}
#facebox .content > p:last-child {
  margin-bottom: 0;
}

#facebox .close {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px;
  background: #fff;
}
#facebox .close img {
  opacity: 0.3;
}
#facebox .close:hover img {
  opacity: 1;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
  margin: 0;
}

#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.facebox_hide {
  z-index: -100;
}

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.kecik th td {
  font-size: 8pt !important;
}

.kecike th td {
  font-size: 7pt !important;
}

.container-fluid.main {
  position: relative; /* To make the navbar positions relative to this container */
  padding: 0;
}

.carousel .background {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 700px;
}

@media (max-width: 991px) {
  .carousel .background {
    background-size: cover; /* To make the background image looks good */
  }
}

.carousel .background.a {
  background-image: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    url("images/slides/a.jpg");
}

.carousel .background.b {
  background-image: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    url("images/slides/b.jpg");
}

.carousel .background.c {
  background-image: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    url("images/slides/c.jpg");
}

.carousel .background.d {
  background-image: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    url("images/slides/d.jpg");
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition: opacity 0.5s; /* The 0.5s describes the duration to make the opacity from 0 to 1 */
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

/* CSS Hack to trigger GPU for smooth transition */
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* CSS Hack to trigger GPU for smooth transition */

.covertext {
  position: absolute; /* To make the div to be place anywhere. It is out of the document flow */
  top: 200px; /* The distance between the div with the top of document */
  left: 0px; /* Make the div full width */
  right: 0px; /* Make the div full width */
}

.title {
  font-family: Verdana;
  font-weight: 600;
  font-size: 30px;
  color: #ffffff;
  text-align: center;
}

.subtitle {
  font-family: Verdana;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
}

div.day-number {
  background: orange;
  z-index: 2;
  top: 0px;
  right: -25px;
  padding: 2px;
  color: #fff;
  font-weight: bold;
  width: 20px;
  text-align: center;
}

.linkhitam a h4 h5 h6 {
  color: black;
}

table.calendar {
  border-collapse: collapse;
  border-color: #c5c5b3;
}

td.calendar-day,
td.calendar-day-np {
  width: 100px;
  padding: 2px;
  border-color: #c5c5b3;
}

td.calendar-day-head {
  font-weight: bold;
  font-size: 14px;
  background: forestgreen;
  color: white;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
}

div.event {
  font-weight: bold;
  margin-bottom: 2px;
}

.rowmerah td {
  background: #ffebee;
}

.footer-bs {
  background-color: #3c3d41;
  padding: 60px 40px;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 20px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 6px;
}
.footer-bs .footer-brand,
.footer-bs .footer-nav,
.footer-bs .footer-social,
.footer-bs .footer-ns {
  padding: 10px 25px;
}
.footer-bs .footer-nav,
.footer-bs .footer-social,
.footer-bs .footer-ns {
  border-color: transparent;
}
.footer-bs .footer-brand h2 {
  margin: 0px 0px 10px;
}
.footer-bs .footer-brand p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-bs .footer-nav ul.pages {
  list-style: none;
  padding: 0px;
}
.footer-bs .footer-nav ul.pages li {
  padding: 5px 0px;
}
.footer-bs .footer-nav ul.pages a {
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
  text-transform: uppercase;
}
.footer-bs .footer-nav ul.pages a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.footer-bs .footer-nav h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.footer-bs .footer-nav ul.list {
  list-style: none;
  padding: 0px;
}
.footer-bs .footer-nav ul.list li {
  padding: 5px 0px;
}
.footer-bs .footer-nav ul.list a {
  color: rgba(255, 255, 255, 0.8);
}
.footer-bs .footer-nav ul.list a:hover {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-bs .footer-social ul {
  list-style: none;
  padding: 0px;
}
.footer-bs .footer-social h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.footer-bs .footer-social li {
  padding: 5px 4px;
}
.footer-bs .footer-social a {
  color: rgba(255, 255, 255, 1);
}
.footer-bs .footer-social a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-bs .footer-ns h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.footer-bs .footer-ns p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
  .footer-bs .footer-nav,
  .footer-bs .footer-social,
  .footer-bs .footer-ns {
    border-left: solid 1px rgba(255, 255, 255, 0.1);
  }
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.panel ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.news-item {
  padding: 4px 4px;
  margin: 0px;
  border-bottom: 1px dotted #ccc;
}

.navbar-brand img {
  height: auto;
}

.items {
  width: 95%;
  margin: 0px auto;
}

.itemss {
  width: 95%;
  margin: 0px auto;
}

.slick-slide {
  margin: 10px;
}

.slick-slide img {
  width: 100%;
  border: 0px solid #fff;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

img {
  object-fit: cover;
}

.table th {
  text-align: center;
}

[onClick] {
  cursor: pointer;
}

.carousel-indicators {
  z-index: 2;
}

.bg1 {
  color: #2980b9;
}
.bg2 {
  color: #2c3e50;
}
.bg3 {
  color: #ecf0f1;
}
.bg4 {
  color: #7f8c8d;
}
.bg5 {
  color: #e74c3c;
}

.vercell > thead > tr > th,
.vercell > tbody > tr > th,
.vercell > tfoot > tr > th,
.vercell > thead > tr > td,
.vercell > tbody > tr > td,
.vercell > tfoot > tr > td {
  vertical-align: middle;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  line-height: initial;
}

.alpha60 {
  /* Fallback for web browsers that don't support RGBa */
  background-color: rgb(0, 0, 0);
  /* RGBa with 0.6 opacity */
  background-color: rgba(0, 0, 0, 0.6);
  /* For IE 5.5 - 7*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

a {
  color: black;
  font-weight: bold;
}

input,
select {
  color: black;
}

.form-control {
  color: #3c3d41 !important;
}

.bg-success-light,
.bg-success-light td {
  background-color: #f1f8e9;
}
.bg-success-light,
.bg-success-light a {
  color: #000;
}
.bg-success-light a:hover,
.bg-success-light a:focus {
  color: #000;
}
.bg-warning-light,
.bg-warning-light td {
  background-color: #fff9c4;
}
.bg-warning-light,
.bg-warning-light a {
  color: #000;
}
.bg-warning-light a:hover,
.bg-warning-light a:focus {
  color: #000;
}
.bg-danger-light,
.bg-danger-light td {
  background-color: #ffebee;
}
.bg-danger-light,
.bg-danger-light a {
  color: #000;
}
.bg-danger-light a:hover,
.bg-danger-light a:focus {
  color: #000;
}
.aplikasi h6 {
  color: white;
}

.menuextend a {
  color: #ffccbc;
  font-weight: 400;
}

.text-9pt td {
  font-size: 9pt;
}

#menuguru .card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.zoom:hover {
  transform: scale(1.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.zoom2:hover {
  transform: scale(1.6);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.aplikasi2 a,
h6 {
  color: black;
}

#sidebar .nav-link[data-toggle].collapsed:after {
  content: " ▾";
}
#sidebar .nav-link[data-toggle]:not(.collapsed):after {
  content: " ▴";
}

#sidebar .nav-item {
  padding: 1px;
  font-weight: 400;
}

#sidebar .nav-link {
  padding: 5px;
  font-weight: 400;
}

a .subitem {
  padding: 5px;
}

.navmenu-link a {
  color: white;
}

.reben {
  width: 80%;
  height: 0;
  border-bottom: 20px solid #e64a19;
  border-top: 20px solid #bf360c;
  border-left: 15px solid transparent;
  float: right;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 700;
  position: absolute;
  right: 0px;
  top: 0px;
  color: white;
}

.reben span {
  color: white;
  position: relative;
  top: -9px;
  text-align: center;
  right: -10px;
}

.bullety {
  counter-reset: li;
  margin: 0px;
  padding-left: 0px;
  color: rgb(100, 100, 100);
}

.bullety li {
  position: relative;
  padding-left: 3em;
  margin: 0.45em 0;
  margin-bottom: 1em;
  list-style: none;
  line-height: 1.2em;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-size: 20px;
}

.bullety li:hover {
  color: rgb(0, 0, 0);
}

.bullety li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  padding: 0px;
  color: #fff;
  background: #f9a825;
  font-weight: bold;
  text-align: center;
  border-radius: 0.9em;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.bullety li:hover:before {
  background-color: #2ecc71;
}

.bullety li li:before {
  background-color: #3498db;
}

.bullety li:after {
  position: absolute;
  top: 2.1em;
  left: 0.9em;
  width: 2px;
  height: calc(100% - 1em);
  content: "";
  background-color: rgb(203, 203, 203);
  z-index: 0;
}

.bullety li:hover:after {
  background-color: #2ecc71;
}

.bullety li li {
  font-size: 0.8em;
}

.clrbln {
  background: #fff59d;
}

.boldo {
  font-weight: bold;
}

.preloading {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("../../images/animskda.png") 50% 50% no-repeat
    rgba(48, 48, 48, 0.8);
}

.nav-tabs-wrapper {
  display: block;
  overflow: hidden;
  height: calc(
    1.5rem + 1rem + 2px
  ); /** 1.5 is font-size, 1 is padding top and bottom, 2 is border width top and bottom */
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}

.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  border-bottom: 0;
}

.nav-link {
  white-space: nowrap;
}
.dragscroll:active,
.dragscroll:active a {
  cursor: -webkit-grabbing;
}

.nav-tabs-wrapper-border {
  display: block;
  width: 100%;
  border-top: 1px solid #ddd;
}

.tab-pane {
  padding: 1rem;
}

.jq-toast-single {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0 0 5px;
  border-radius: 4px;
  font-size: 15px;
  font-family: arial, sans-serif;
  line-height: 17px;
  position: relative;
  pointer-events: all !important;
  background-color: #444;
  color: #fff;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.pulsate-bck {
  -webkit-animation: pulsate-bck 0.5s ease-in-out infinite both;
  animation: pulsate-bck 0.5s ease-in-out infinite both;
}

@-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.fb-page,
.fb-page iframe[style],
.fb-page span {
  width: 100% !important;
}

.tulbar {
  float: left;
  margin-right: 10px;
  font-weight: bold;
}

.vGood {
  background-color: #9f0;
}

.good {
  background-color: rgb(0, 204, 255);
}

.avg {
  background-color: #fd0;
}

.poor {
  background-color: #fa0;
}

.vPoor {
  background-color: #f30;
  color: white !important;
}

.TakHadir {
  background-color: #b8d4ee;
  color: black !important;
}

.Kosong {
  background-color: #fffce8;
  color: rgb(192, 192, 192) !important;
}

.NA {
  background-color: #b1b1b1;
  color: rgb(100, 100, 100) !important;
}

.gelap {
  background-color: #000000 !important;
  color: rgb(0, 0, 0) !important;
}

.bg-hijaumuda th td {
  background: #e9ffdb;
}

.selectkecil {
  font-size: 7pt;
  height: 20px;
  padding: 0px;
  width: 80px;
}

.selectkecil option {
  font-size: 7pt;
}

.fullscreen {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.rotated-th {
  height: 210px;
  position: relative;
}
.rotated-th__label {
  bottom: 5px;
  left: 50%;
  position: absolute;
  transform: rotate(-90deg);
  transform-origin: center left;
  white-space: nowrap;
}

#table4x100 tbody tr:nth-child(4n) {
  border-bottom: 2px solid black;
}

.kecilan {
  font-size: 8pt !important;
}

.slctkecik {
  width: 100px;
  font-size: 9pt;
}

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.scrolling-text-container {
  overflow: hidden;
  white-space: nowrap;
}

.scrolling-text {
  font-size: 24px;
  font-family: "Arial", sans-serif;
  color: #ff0000; /* Set your desired text color */
  display: inline-block;
  padding-left: 100%; /* Start off-screen */
  animation: scrollText 10s linear infinite; /* Adjust duration as needed */
}

@keyframes scrollText {
  to {
    padding-left: 0;
  }
}

.gambar3d {
  transform: perspective(400px) rotate3d(1, -1, 0, 8deg);
}
.gambar3d:hover {
  transform: perspective(400px) rotate3d(1, -1, 0, -8deg);
}

.bubble-left {
  /* Modify size here: */
  --size: 50px;

  position: relative;
  width: var(--size);
  height: calc(var(--size) * 0.66);
  background: #333;
  border-radius: 10px;
}

.bubble-left:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(var(--size) * 0.13) solid transparent;
  border-right-color: #333;
  border-left: 0;
  margin-top: calc(var(--size) * 0.13 * -1);
  margin-left: calc(var(--size) * 0.13 * -1);
}