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

html,
body {
    background-image: url("../../assets/images/hero-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Set default toggler icon color and border */
.navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.55);
}

/* Ensure the border color stays white on focus and active states */
.navbar-toggler:focus, 
.navbar-toggler:active {
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
  color: transparent;
}

/* Navbar Links */
.navbar-nav .nav-link {
  color: #fff;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #ffca2c;
}

/* For WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px;
    /* Set the width of the scrollbar */
}

/* The scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Optional: Set the background of the scrollbar track */
}

/* The scrollbar thumb (handle) */
::-webkit-scrollbar-thumb {
    background: #888;
    /* Set the color of the scrollbar thumb */
    border-radius: 4px;
    /* Optional: Add rounded corners to the scrollbar thumb */
}

/* The scrollbar thumb when hovered */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Set the color of the scrollbar thumb when hovered */
}

/* For Firefox */
html {
    scrollbar-width: thin;
    /* Set the width of the scrollbar to 'thin' */
    scrollbar-color: #888 #f1f1f1;
    /* Set the color of the scrollbar thumb and track */
}

.navbar {
    background-color: #0056b3 !important;
}

.spacer {
    margin-bottom: 5px;
}

.table {
    --bs-table-bg: trasparent;
}

.table-striped tbody tr:nth-of-type(2n+1) {
  background-color: #e9ecef!important;
}

.img-thumbnail {
    padding: .25rem;
    background-color: #F9FAFE;
}

.numbered-list {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
}

.numbered-list li {
    counter-increment: item;
    margin-bottom: 0.6rem;
    position: relative;
    padding-left: 2rem;
}

.numbered-list li::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #dbe0e5;
    color: #000;
    font-size: 0.7rem;
    font-weight: bold;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 50%;
}

.form-check-input {
    border-color: #0d6efd;
}

#termsAndConditionsForm .h5 {
    font-size: 1.09rem !important;
}

.student-img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

#studentInfo {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#studentInfo.animate-show {
    opacity: 1;
    transform: translateY(0);
}

.sw .toolbar {
    padding: 0rem .8em .8em .83em;
    text-align: right;
}

.jumbotron {
    background-color: #fff !important;
}

@media screen and (max-width: 640px) {
    ul.nav {
        margin-left: 8px;
    }

    .container div.header {
        margin-left: 8px;
    }

    footer {
        text-align: center;
    }

    .ZebraDialog {
        width: 98% !important;
        left: 1% !important;
        right: 3% !important;
    }

    .jumbotron p {
        font-size: 0.95rem !important;
    }

    .jumbotron h2 {
        font-size: 1.6rem !important;
    }

    .jumbotron p.submit {
        text-align: center;
    }
}

footer {
    background-color: #F9FAFE;
}

.ZebraDialog {
    border: none;
    z-index: 1060 !important;
    position: relative;
}

.ZebraDialog .ZebraDialog_Body {
    padding: 20px 0px 20px 100px !important;
}

.ZebraDialogBackdrop {
    z-index: 1060 !important;
}

.ZebraDialog_Buttons a {
    outline: none !important;
}