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

:root
{
      --cust-gradient-background: linear-gradient(90deg, #1D1C1C 10%, #5A5C69 100%);
      --cust-gradient-bg-warning: linear-gradient(90deg, #FFA500 10%, #e76d2c 100%);
      --cust-gradient-bg-teacher: linear-gradient(90deg, #1220aa 10%, #0f1a8c 100%);
    --primarycolor: #4F4F4F;
    --primarycolor-alt: #0A0A0A;
    --secondarycolor: #F8DB01;
    --secondarycolor-alt: #FBC400;
    --lightcolor: #C5C5C5;
    --lightcolor-alt: #818181;

    --blackcolor-text: #0A0A0A;

    --gradcolor-secondary: linear-gradient(180deg, #F8DB01 36.37%, #F8C100 100%);
    
    --font-family: 'Inter', 'Arial', san-serif;
}

/* ---------------------------- */
/* Global CSS */
/* ---------------------------- */
html
{
    overflow: hidden;
}

body
{
    font-family: var(--font-family);
    color: var(--blackcolor-text);
}

/* ---------------------------- */
/* Container */
/* ---------------------------- */

/* ---------------------------- */
/* Background */
/* ---------------------------- */
.bg-secondary-cus
{
    background-color: var(--secondarycolor);
}

.bg-primary-cus
{
    background-color: var(--primarycolor);
}

.bg-light-cus
{
    background-color: var(--lightcolor);
}

.cust-gradient-bg-teacher {
    background-image: var(--cust-gradient-bg-teacher);
}

.bg-page-backdrop
{
    height: 30vh; 
    width: 100%; 
    background-color: 
    #F8DB01; 
    position: absolute;
}

/* ---------------------------- */
/* Text */
/* ---------------------------- */
.text-light-cus
{
    color: var(--lightcolor);
}

.text-dark-cus
{
    color: var(--primarycolor-alt);
}

.text-primary-cus
{
    color: var(--primarycolor);
}

.text-secondary-cus
{
    color: var(--secondarycolor);
}

.title_tab
{
    font-size: 1.05rem;
}

/* ---------------------------- */
/* Buttons */
/* ---------------------------- */
.btn-primary-cus 
{
    color: #fff;
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
}

.btn-primary-cus:hover 
{
    color: #fff;
    background-color: var(--primarycolor-alt);
    border-color: var(--primarycolor-alt);
}

.btn-primary-cus:focus, .btn-primary-cus.focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(194, 194, 194, 0.5);
box-shadow: 0 0 0 0.2rem rgba(194, 194, 194, 0.5);
}

.btn-primary-cus.disabled, .btn-primary-cus:disabled 
{
    color: #fff;
    background-color: #c2c2c2;
    border-color: #c2c2c2;
}

.btn-primary-cus:not(:disabled):not(.disabled):active, .btn-primary-cus:not(:disabled):not(.disabled).active,
.show > .btn-primary-cus.dropdown-toggle 
{
    color: #fff;
    background-color: #c2c2c2;
    border-color: #c2c2c2;
}

.btn-primary-cus:not(:disabled):not(.disabled):active:focus, .btn-primary-cus:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary-cus.dropdown-toggle:focus 
{
    -webkit-box-shadow: 0 0 0 0.2rem rgba(194, 194, 194, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(194, 194, 194, 0.5);
}

 .btn-outline-primary-cus 
 {
    color: var(--primarycolor);
    border-color: var(--primarycolor);
  }
  
  .btn-outline-primary-cus:hover 
  {
    color: #fff;
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
  }
  
  .btn-outline-primary-cus:focus, .btn-outline-primary-cus.focus 
  {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(194, 194, 194, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(194, 194, 194, 0.5);
  }
  
  .btn-outline-primary-cus.disabled, .btn-outline-primary-cus:disabled 
  {
    color: var(--primarycolor);
    background-color: transparent;
  }
  
  .btn-outline-primary-cus:not(:disabled):not(.disabled):active, .btn-outline-primary-cus:not(:disabled):not(.disabled).active,
  .show > .btn-outline-primary-cus.dropdown-toggle 
  {
    color: #fff;
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
  }
  
  .btn-outline-primary-cus:not(:disabled):not(.disabled):active:focus, .btn-outline-primary-cus:not(:disabled):not(.disabled).active:focus,
  .show > .btn-outline-primary-cus.dropdown-toggle:focus 
  {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(194, 194, 194, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(194, 194, 194, 0.5);
  }

  .btn-link-primary-cus 
 {
    color: var(--primarycolor);
  }
  
  .btn-link-primary-cus:hover 
  {
    color: var(--primarycolor-alt);
  }
  
  .btn-link-primary-cus:focus, .btn-link-primary-cus.focus 
  {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  .btn-link-primary-cus.disabled, .btn-link-primary-cus:disabled 
  {
    color: var(--primarycolor);
    background-color: transparent;
  }
  
  .btn-link-primary-cus:not(:disabled):not(.disabled):active, .btn-link-primary-cus:not(:disabled):not(.disabled).active,
  .show > .btn-link-primary-cus.dropdown-toggle 
  {
    color: #fff;
    background-color: var(--primarycolor-alt);
    border-color: var(--primarycolor-alt);
  }
  
  .btn-link-primary-cus:not(:disabled):not(.disabled):active:focus, .btn-link-primary-cus:not(:disabled):not(.disabled).active:focus,
  .show > .btn-link-primary-cus.dropdown-toggle:focus 
  {
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .btn-primesecond-cus
  {
    color: #fff;
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
    -webkit-transition: background-color .4s ease-out;
    -moz-transition: background-color .4s ease-out;
    -o-transition: background-color .4s ease-out;
    transition: background-color .4s ease-out;
  }

  .btn-primesecond-cus:hover
  {
    color: var(--blackcolor-text);
    background-color: var(--secondarycolor);
    border-color: var(--secondarycolor);
  }

.btn-secondary-cus 
{
    color: #000;
    background-color: var(--secondarycolor);
    border-color: var(--secondarycolor);
}

.btn-secondary-cus:hover 
{
    color: #000;
    background-color: var(--secondarycolor-alt);
    border-color: var(--secondarycolor-alt);
}

.btn-secondary-cus:focus, .btn-secondary-cus.focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(255, 207, 53, 0.5);
box-shadow: 0 0 0 0.2rem rgba(255, 207, 53, 0.5);
}

.btn-secondary-cus.disabled, .btn-secondary-cus:disabled 
{
    color: #000;
    background-color: #BA9F49;
    border-color: #BA9F49;
}

.btn-secondary-cus:not(:disabled):not(.disabled):active, .btn-secondary-cus:not(:disabled):not(.disabled).active,
.show > .btn-secondary-cus.dropdown-toggle 
{
    color: #000;
    background-color: #BA9F49;
    border-color: #BA9F49;
}

.btn-secondary-cus:not(:disabled):not(.disabled):active:focus, .btn-secondary-cus:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary-cus.dropdown-toggle:focus 
{
    -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 207, 53, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(255, 207, 53, 0.5);
}

/* ---------------------------- */
/* Scrollbar */
/* ---------------------------- */
/* width */
.scroll-cus::-webkit-scrollbar 
{
	width: 8px;
	height: 12px;
	cursor: pointer;
}

/* Track */
.scroll-cus::-webkit-scrollbar-track 
{
	background: #fff; 
}

/* Handle */
.scroll-cus::-webkit-scrollbar-thumb 
{
	background: #cecece; 
}

/* Handle on hover */
.scroll-cus::-webkit-scrollbar-thumb:hover {
	background: #B7B7B7; 
}

/* ---------------------------- */
/* Table */
/* ---------------------------- */
.table tbody tr
{
    color: var(--blackcolor-text);
}

.table.table-main thead
{
    height: 45px;
}

.table.table-main thead th
{
    vertical-align: middle;
}

.table .bg-primary-cus{
    color: #fff;
    background-color: var(--primarycolor);
}

.table-fixed
{
    overflow-y: auto;
    height: 60vh;
    margin-top:0;
}

.table-fixed-selmodal
{
    overflow-y: auto;
    max-height: 30vh;
    margin-top:0;
}

.table.table-bordered td
{
	border: 1px solid #c9d3f3;
}

.table .col-fixed-1
{
    width:2.5rem;
}
.table-hd-colm tr th:nth-child(4)
{
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--primarycolor);
}

.table-hd-colm tr td:nth-child(4)
{
    position: sticky;
    left: 0;
    background-color: #E4E7EA;
}

.table-header-fixed thead
{
	background-color: white;
    color: var(--hdark-color-cus);
	position: sticky;
  	top: 0;
  	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
	font-weight: medium;
    z-index: 1;
}

.table.text-nowrap thead tr th:not(:first-child)
{
    white-space:nowrap;
    min-width: 60px;
}

.table.table-hover-effect tbody tr td
{
    vertical-align: middle !important;
}

.table.table-hover-effect tbody tr:hover
{
    cursor: pointer;
    color: var(--primary-color-alt-cus) !important;
    background-color: #f5f1e3 !important;
}

.table.table-hover-effect tbody tr.active
{
    cursor: pointer;
    color: var(--primary-color-alt-cus) !important;
    background-color: #f5f1e3 !important;
}

.table .btn-cell
{
    min-width: none;
    width: 80px !important;
}

/* ---------------------------- */
/* Pagination */
/* ---------------------------- */
.page-select
{
  width: 80px;
}

/* ---------------------------- */
/* Modal */
/* ---------------------------- */
.modal-limiter-h
{
	overflow-y: auto;
	max-height: 75vh;
}

/* ---------------------------- */
/* Form Customs */
/* ---------------------------- */
.form-control-cus
{
    padding: 1.5rem 1rem;
    border: 0;
    border-bottom: 1px solid #a4a4a4;
    border-radius: 0;
}

.form-control-cus:focus
{
    border: 0;
    outline: none;
    box-shadow: none;
    border-bottom: 1px solid var(--secondarycolor-alt);
}

.background-image {
  width: 100%;
  height: 100vh;
  background-image: url('../img/bg-login.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/** 
 * =========================================================================
 * DGV Header / Row
 * =========================================================================
 */

.tmp_dgv_header
{
    background-image: var(--cust-gradient-bg-teacher);
    color: var(--tmp_font_dgv_header);
}

.cust-gradient-background {
    background-image: var(--cust-gradient-background);
}

.cust-gradient-bg-teacher {
    background-image: var(--cust-gradient-bg-teacher);
}

/** 
 * =========================================================================
 * Modal Header / Footer
 * =========================================================================
 */
.tmp_modal_header
{
    display: block;
    align-content: center;
    text-align: left;
    
    margin: -12px; 
    padding: 15px; 
    margin-bottom: 10px;

    
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.tmp_modal_header.tmpc
{
    background-image: var(--cust-gradient-bg-teacher); 
    color: #ffffff;
    font-weight: 800;
    padding-left: 30px;
}
.tmp_modal_footer
{
    height: 50px;
    padding-bottom: 15px;
    margin: 5px;
}


/** 
 * =========================================================================
 * Select Combobox Hide
 * =========================================================================
 */
.select-no-arrow {
    appearance: none;          /* Standard */
    -webkit-appearance: none;  /* Safari/Chrome */
    -moz-appearance: none;     /* Firefox */
    background-image: none;    /* Remove arrow image */
    background-color: transparent;
    border: none;
    padding-right: 0;
    pointer-events: none;
}

.input-disabler {
    border: none;
    font-size: 1.25rem;
    font-weight: bold;
    background-color: transparent;
    color: #000;
    pointer-events: none; /* Optional if you want it readonly */
}

.btn-save {
    background-color: #1220aa;
    color: #fff;
    border-color: #1220aa;
}

.btn-save:hover {
    background-color: #0f1b90;
    border-color: #0f1b90;
    color: #fff;
}

.btn-save:focus, 
.btn-save.focus {
    box-shadow: 0 0 0 0.25rem rgba(18, 32, 170, 0.5);
}

.btn-save:active, 
.btn-save.active,
.show > .btn-save.dropdown-toggle {
    background-color: #0d1880;
    border-color: #0d1880;
}

.btn-save:disabled, 
.btn-save.disabled {
    opacity: 0.65;
    pointer-events: none;
    background-color: #1220aa;
    border-color: #1220aa;
    color: #fff;
}

.underline-input {
  border: none; /* Remove all borders */
  border-bottom: 1px solid #ced4da; /* Add a bottom border for the underline */
  border-radius: 0; /* Remove border-radius if present */
  padding-left: 0; /* Adjust padding if needed */
  padding-right: 0; /* Adjust padding if needed */
}

.underline-input:focus {
  outline: none; /* Remove default outline on focus */
  box-shadow: none; /* Remove default shadow on focus */
  border-bottom-color: #0d6efd; /* Change underline color on focus (optional) */
}