/* ==========================================================================
   WCoE Portal - compact density layer
   --------------------------------------------------------------------------
   The theme this portal is built on is drawn at a size meant for marketing
   dashboards with a dozen numbers on them. For an administrative system -
   mark sheets, class lists, registers - it wastes a great deal of screen and
   makes every page longer than it needs to be.

   This file tightens the scale. It is loaded LAST, after bootstrap.min.css and
   style.css, and overrides them. Nothing in those two files was edited, so
   removing the one <link> that pulls this in restores the old look exactly.

   The scale, against what the theme shipped:

       body text        16px   ->  14px
       line height      1.7    ->  1.5
       input / select   40px   ->  34px tall
       button padding   6/15   ->  5/12
       table cell       9/15   ->  6/11
       card padding     15/30  ->  13/18
       sidebar row      52px   ->  40px
       header           70px   ->  56px

   Two things deliberately left alone:

     - The sidebar WIDTH. It is set in rem against a 10px root font and is
       bound up with the collapse animation and the mobile off-canvas panel;
       changing it risks more than it gains.
     - Touch targets on phones. Below 768px the rules at the bottom give the
       menu, buttons and form fields their height back, because a 34px target
       that is comfortable with a mouse is not comfortable with a thumb.

   Colours, fonts and layout are untouched - this file changes size only.
   ========================================================================== */


/* ---------- 1. Base type ------------------------------------------------- */

body {
  font-size: 14px;
  line-height: 1.5;
}

p { margin-bottom: 10px; }

h1, .h1 { font-size: 26px; }
h2, .h2 { font-size: 22px; }
h3, .h3 { font-size: 19px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 14.5px; }
h6, .h6 { font-size: 13.5px; }

h1, h2, h3, h4, h5, h6 { line-height: 1.35; margin-bottom: 10px; }

small, .small { font-size: 12px; }


/* ---------- 2. Header --------------------------------------------------- */

.navbar.header-menu-one { padding: 4px 10px; }

.header-menu-one .nav-bar-header-one,
.header-menu-one .toggle-button.sidebar-toggle { height: 56px; }

.header-menu-one .header-logo a { padding: 7px 0; }
.header-menu-one .header-logo img { height: 38px; width: auto; }

.header-menu-one .toggle-button .item-link { padding: 19px 12px; }

.header-main-menu.navbar-collapse { padding-left: 36px; padding-right: 15px; }
.header-main-menu .navbar-nav .header-search-bar .stylish-input-group { height: 46px; }
.header-main-menu .navbar-nav .header-search-bar .stylish-input-group .form-control {
  height: 36px;
  font-size: 14px;
}

.header-admin .admin-title { font-size: 14px; }
.header-admin .admin-title .item-subtitle { font-size: 11.5px; }
.header-admin .admin-img img { height: 36px; width: 36px; }


/* ---------- 3. Sidebar -------------------------------------------------- */

.sidebar-menu-one .sidebar-menu-content { padding-bottom: 18px; }

.sidebar-menu-one .sidebar-menu-content .nav-sidebar-menu > .nav-item > .nav-link {
  padding: 8px 12px;
}
.sidebar-menu-one .sidebar-menu-content .nav-sidebar-menu > .nav-item > .nav-link span {
  font-size: 14px;
}
.sidebar-menu-one .sidebar-menu-content .nav-sidebar-menu > .nav-item > .nav-link i:before {
  font-size: 15px;
  margin-right: 11px;
}

.sidebar-menu-one .sidebar-menu-content .nav-sidebar-menu > .nav-item .sub-group-menu {
  padding: 5px 0;
}
.sidebar-menu-one .sidebar-menu-content .nav-sidebar-menu > .nav-item .sub-group-menu > .nav-item .nav-link {
  font-size: 13.5px;
  padding: 6px 16px 6px 46px;
}

.sidebar-menu-one .sidebar-menu-content .nav-sidebar-menu .sidebar-nav-item > .nav-link:after {
  right: 16px;
}


/* ---------- 4. Page frame ----------------------------------------------- */

.dashboard-content-one { padding: 0 18px; }

.breadcrumbs-area { padding: 16px 0 18px; }
.breadcrumbs-area h3 { font-size: 18px; margin-bottom: 4px; }
.breadcrumbs-area ul li { font-size: 13.5px; }

.footer-wrap-layout1 { padding: 14px 0 20px; }
.footer-wrap-layout1 .copyright { font-size: 13px; }


/* ---------- 5. Cards ---------------------------------------------------- */

.card { margin-bottom: 18px; border-radius: 3px; }
.card-body { padding: 13px 18px 18px; }
.card-header { padding: 11px 18px; }
.card-footer { padding: 11px 18px; }

.card-body .heading-layout1 { margin-bottom: 12px; }

.item-title { font-size: 14.5px; }
.item-subtitle { font-size: 12.5px; }


/* ---------- 6. Forms ---------------------------------------------------- */

.form-group { margin-bottom: 9px; }

label { font-size: 13px; margin-bottom: 4px; }

/* The theme sets field height three times over, at rising specificity:
   `.form-group .form-control`, then `.new-added-form .form-group .form-control`,
   then the login box. Each one has to be matched on its own terms, or the
   fields stay 40px while everything around them shrinks. */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.form-group .form-control,
.new-added-form .form-group .form-control {
  height: 34px;
  padding: 4px 10px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 3px;
}

.new-added-form .form-group label { margin-bottom: 5px; }

/* These are the little icons the theme drops inside a field using absolute
   coordinates measured against the old label + 40px input. Shrinking the field
   without moving them leaves them floating below it. */
.new-added-form .form-group i { top: 44px; right: 28px; font-size: 13.5px; }

/* Login screen. The box is sized in rem against a 10px root, so 6rem is 60px
   of padding top and bottom - most of the empty space on that page. */
.login-page-content { padding: 30px 20px; }
.login-page-content .login-box { padding: 3.4rem 3rem; border-radius: 3px; }
.login-page-content .login-box .item-logo { margin-bottom: 24px; }
.login-page-content .login-box .item-logo img { max-height: 46px; width: auto; }
.login-page-content .login-box .login-form .form-group { margin-bottom: 12px; }
.login-page-content .login-box .login-form .form-group > label { font-size: 13.5px; margin-bottom: 5px; }
.login-page-content .login-box .login-form .form-group > input { height: 42px; }
.login-page-content .login-box .login-form .form-group .form-control {
  padding: 5px 32px 5px 16px;
  font-size: 14px;
}
.login-page-content .login-box .login-form .form-group i { font-size: 14px; right: 16px; }
.login-page-content .login-box .login-form .form-group .form-check .form-check-label { font-size: 13px; }
.login-page-content .login-box .login-form .form-group .forgot-btn { font-size: 13px; }
.login-page-content .login-box .login-form .form-group .login-btn {
  padding: 11px 10px;
  margin-top: 18px;
  font-size: 14px;
}
.login-page-content .login-box .login-social ul li a { width: 38px; height: 36px; line-height: 36px; }

textarea.form-control,
.form-group textarea.form-control,
.new-added-form .form-group .textarea { height: auto; min-height: 68px; }

.form-control-sm { height: 29px; padding: 3px 8px; font-size: 12.5px; }
.form-control-lg { height: 40px; padding: 6px 12px; font-size: 15px; }

.input-group-text { padding: 4px 10px; font-size: 13.5px; }

.custom-select { height: 34px; padding: 4px 26px 4px 10px; font-size: 13.5px; }

.form-check-label, .custom-control-label { font-size: 13.5px; }

/* select2, used for the class and subject pickers */
.select2-container .select2-selection--single { height: 34px; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px;
  font-size: 13.5px;
  padding-left: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--default .select2-results__option { padding: 5px 10px; font-size: 13.5px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 30px;
  font-size: 13.5px;
  padding: 3px 8px;
}

/* chosen, used on a few of the older screens. The extra `body` is deliberate:
   the exams template loads chosen.min.css further down the page, so these need
   to outrank it on specificity rather than on order. */
body .chosen-container-single .chosen-single { height: 34px; line-height: 32px; font-size: 13.5px; }
body .chosen-container .chosen-results li { padding: 5px 8px; font-size: 13.5px; }

/* the date pickers */
.datepicker { font-size: 13px; }
.datepicker table tr td, .datepicker table tr th { width: 28px; height: 28px; }


/* ---------- 7. Buttons -------------------------------------------------- */

.btn { padding: 5px 12px; font-size: 13.5px; line-height: 1.45; border-radius: 3px; }
.btn-sm { padding: 3px 9px; font-size: 12.5px; }
.btn-lg { padding: 8px 18px; font-size: 15px; }

.footer-btn { padding: 5px 12px; font-size: 13px; }

.btn-fill-lg { padding: 7px 20px; font-size: 13.5px; }
.btn-fill-md { padding: 5px 14px; font-size: 13px; }
.btn-fill-sm { padding: 4px 11px; font-size: 12.5px; }

.btn-noname { padding: 2px 6px; }


/* ---------- 8. Tables --------------------------------------------------- */

.table thead th {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
}
.table tbody td,
.table td {
  padding: 6px 11px;
  font-size: 13px;
  line-height: 1.45;
}
.table-sm thead th, .table-sm td { padding: 4px 8px; font-size: 12.5px; }

/* DataTables chrome */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 13px; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: 30px;
  padding: 3px 8px;
  font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 3px 9px; font-size: 13px; }


/* ---------- 9. Modals, dropdowns, alerts -------------------------------- */

.modal-header { padding: 12px 18px; }
.modal-body   { padding: 15px 18px; }
.modal-footer { padding: 11px 18px; }
.modal-title  { font-size: 15.5px; }

.dropdown-menu { font-size: 13.5px; padding: 5px 0; }
.dropdown-item { padding: 6px 14px; font-size: 13.5px; }
.dropdown-item i { margin-right: 7px; }

.alert { padding: 9px 14px; font-size: 13.5px; border-radius: 3px; }

.badge { font-size: 11.5px; padding: 3px 7px; }

.nav-tabs .nav-link { padding: 6px 13px; font-size: 13.5px; }

.breadcrumb { padding: 7px 12px; font-size: 13px; }

.list-group-item { padding: 8px 13px; font-size: 13.5px; }

.success-message .item-title { font-size: 14.5px; }
.success-message .item-icon i { font-size: 44px; }


/* ==========================================================================
   10. The theme's own high-specificity rules
   --------------------------------------------------------------------------
   Everything above is written at the plain component level - `.table`,
   `.modal-body`, `.btn-fill-md`. style.css sets many of the same sizes again
   through long descendant chains, which outrank a short selector no matter
   which file loads last. Those have to be answered on their own terms, so the
   selectors below are copied from style.css exactly and only the size values
   differ. If the theme is ever updated, this is the section to re-check.
   ========================================================================== */

/* --- DataTables: the class lists, mark sheets and course tables ---------- */

.dataTables_wrapper .table thead tr th {
  font-size: 13px;
  padding: 8px 12px;
}
.dataTables_wrapper .table tbody tr td {
  font-size: 13px;
  padding: 6px 11px;
}
.dataTables_wrapper .table tbody tr td .dropdown .dropdown-menu { padding: 6px 0 8px; }
.dataTables_wrapper .table tbody tr td .dropdown .dropdown-menu .dropdown-item {
  font-size: 13.5px;
  padding: 6px 16px;
}
.dataTables_wrapper .table tbody tr td .dropdown .dropdown-menu .dropdown-item i {
  margin-right: 10px;
  width: 18px;
}

.bs-table thead tr th { padding: 8px 9px; font-size: 13px; }
.bs-table tbody tr td { padding: 7px 9px; font-size: 13px; }

.single-info-details .item-content .info-table .table tr td { padding: 7px 9px; font-size: 13px; }
.account-settings-box .user-details-box .item-content .info-table .table tr td {
  padding: 8px 9px;
  font-size: 13px;
}
.dashboard-card-ten .card-body .student-info .info-table .table tbody tr td { padding: 6px; }


/* --- Modals -------------------------------------------------------------- */

.modal .modal-dialog .modal-content .modal-header { padding: 12px 18px; }
.modal .modal-dialog .modal-content .modal-body   { padding: 15px 18px; }
.modal .modal-dialog .modal-content .modal-footer { padding: 11px 18px; }
.modal .modal-dialog .modal-content .modal-header .close { font-size: 20px; }
.modal .modal-dialog .modal-content .modal-footer .footer-btn {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 3px;
}

/* The confirmation/outcome modals. The icon and its two rings are drawn with
   matched absolute offsets, so they are left at their original size - only the
   room around them is reduced. */
.modal .success-modal-content .modal-content .modal-body { padding: 26px; }
.modal .success-modal-content .modal-content .modal-body .success-message .item-title { font-size: 14px; }
.modal .success-modal-content .modal-content .modal-body .success-message .item-icon { margin: 0 0 22px 0; }

/* The sign-in modal */
.ui-modal-box .modal-box .sign-up-modal .modal-dialog .modal-content .modal-body { padding: 30px 20px 20px; }
.ui-modal-box .modal-box .sign-up-modal .modal-dialog .modal-content .modal-body .item-logo { margin-bottom: 22px; }
.ui-modal-box .modal-box .sign-up-modal .modal-dialog .modal-content .modal-body .login-form .form-group { margin-bottom: 11px; }
.ui-modal-box .modal-box .sign-up-modal .modal-dialog .modal-content .modal-body .login-form .form-group > input { height: 42px; }
.ui-modal-box .modal-box .sign-up-modal .modal-dialog .modal-content .modal-body .login-form .form-group .form-control { padding: 5px 32px 5px 16px; }
.ui-modal-box .modal-box .sign-up-modal .modal-dialog .modal-content .modal-body .close-btn .close { font-size: 20px; height: 32px; width: 32px; }
.ui-modal-box .modal-box .notification-modal .modal-dialog .modal-content .modal-body { padding: 30px 20px 16px; }
.ui-modal-box .modal-box .feedback-modal .modal-dialog .modal-content .modal-body { padding: 30px 20px 16px; }
.ui-modal-box .modal-box .feedback-modal .modal-dialog .modal-content .modal-body .item-title { font-size: 18px; }


/* --- Dropdown menus ------------------------------------------------------ */

.dropdown .dropdown-menu .dropdown-item { font-size: 13.5px; padding: 6px 14px; }
.heading-layout1 .dropdown .dropdown-menu { padding: 6px 0 8px; }
.heading-layout1 .dropdown .dropdown-menu .dropdown-item { font-size: 13.5px; padding: 6px 16px; }
.heading-layout1 .dropdown .dropdown-menu .dropdown-item i { margin-right: 10px; }
.heading-layout1 .dropdown .dropdown-toggle { font-size: 26px; padding-bottom: 8px; }
.heading-layout1 { margin-bottom: 10px; }
.dashboard-card-one .card-body .earning-report .dropdown .dropdown-menu .dropdown-item {
  font-size: 13.5px;
  padding: 6px 14px;
}


/* --- The theme's own button sizes ---------------------------------------- */

.btn-fill-xl  { padding: 9px 30px; }
.btn-fill-lg  { padding: 8px 24px; letter-spacing: .5px; }
.btn-fill-lmd { padding: 8px 20px; }
.btn-fill-md  { padding: 6px 14px; }
.btn-fill-sm  { padding: 5px 10px; }


/* --- The dashboard shortcut tiles ---------------------------------------- */
/* Twenty tiles at 183px each pushed the lower half of the dashboard off the
   screen. At this size the whole set is visible without scrolling. */

.dashboard-card-seven { padding-bottom: 18px; margin-bottom: 0; }
.dashboard-card-seven .social-media { padding: 16px 14px; border-radius: 3px; }
.dashboard-card-seven .social-media .media .social-icon { font-size: 19px; }
.dashboard-card-seven .social-media .media .media-body { margin-top: 6px; }
.dashboard-card-seven .social-media .media .media-body .item-title { font-size: 12.5px; }
.dashboard-card-seven .social-media .social-like { font-size: 18px; }


/* --- Breadcrumbs --------------------------------------------------------- */

.breadcrumbs-area h3 { margin-bottom: 4px; }
.breadcrumbs-area ul li { font-size: 13.5px; margin-right: 11px; }


/* ---------- 11. Phones: give the targets back their height --------------- */
/*
   Everything above is sized for a mouse. On a phone the same numbers make
   buttons and menu rows too small to hit reliably, so below 768px the
   interactive elements grow again while the type stays compact.
*/
@media only screen and (max-width: 767px) {

  body { font-size: 14px; }

  .sidebar-menu-one .sidebar-menu-content .nav-sidebar-menu > .nav-item > .nav-link {
    padding: 11px 14px;
  }
  .sidebar-menu-one .sidebar-menu-content .nav-sidebar-menu > .nav-item .sub-group-menu > .nav-item .nav-link {
    padding: 9px 16px 9px 46px;
  }

  .form-control,
  input.form-control,
  select.form-control,
  .custom-select,
  .form-group .form-control,
  .new-added-form .form-group .form-control {
    height: 40px;
    font-size: 14px;
    padding: 6px 11px;
  }
  .new-added-form .form-group i { top: 50px; }
  .select2-container .select2-selection--single { height: 40px; }
  .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; }
  .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }

  .btn, .footer-btn { padding: 9px 14px; font-size: 14px; }
  .btn-sm { padding: 7px 11px; font-size: 13px; }

  .dropdown-item { padding: 10px 14px; font-size: 14px; }

  .dashboard-content-one { padding: 0 12px; }
  .card-body { padding: 12px 14px 14px; }
  .modal-body { padding: 14px 15px; }

  .table thead th,
  .dataTables_wrapper .table thead tr th { padding: 8px 9px; }
  .table tbody td, .table td,
  .dataTables_wrapper .table tbody tr td { padding: 8px 9px; }

  .dataTables_wrapper .table tbody tr td .dropdown .dropdown-menu .dropdown-item,
  .heading-layout1 .dropdown .dropdown-menu .dropdown-item,
  .dropdown .dropdown-menu .dropdown-item { padding: 10px 16px; font-size: 14px; }

  .modal .modal-dialog .modal-content .modal-body   { padding: 14px 15px; }
  .modal .modal-dialog .modal-content .modal-footer .footer-btn { padding: 9px 14px; font-size: 14px; }
}