/*
CONTENTS/FLOW
=============

1) General
2) Navigation
3) Bootstrap theme stuff
4) Override some stuff in the material theme
5) Pagination
6) Datatables.net
7) Forms
8) h1/h1/h3 etc
9) Bootstrap notify
10) Media query for phones 
*/


/*
1) General
==========
*/
    html {
      overflow-y: scroll;
      font-size: 14px;
    }

    body {
      color: #333;
    }

    textarea {
      background-color: #f8f6f3;
      border: 1px solid #d4d2ce;
      color: #333;
      padding: 5px;
      min-height: 40px;
    }

    a {
      color: black;
    }

    a:hover {
      color: rgb(58, 58, 58);
    }

/*
2) Navigation
=============
*/

    #sSearchResults {
      position: absolute;
      top:50px;
      width: 350px;
      max-height: 600px;
      overflow-y: auto;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      z-index: 1000;
      display: none;
      background-color: #202940;
    }

    #navBarLogo {
      max-width: 83%;
      text-align: center;
    }


/*
3) Bootstrap theme stuff
=========================
(copied and pasted from the template)
*/
    .tim-row {
      margin-bottom: 20px;
    }

    .tim-white-buttons {
      background-color: #777777;
    }

    .typography-line {
      padding-left: 25%;
      margin-bottom: 35px;
      position: relative;
      display: block;
      width: 100%;
    }

    .typography-line span {
      bottom: 10px;
      color: #c0c1c2;
      display: block;
      font-weight: 400;
      font-size: 13px;
      line-height: 13px;
      left: 0;
      position: absolute;
      width: 260px;
      text-transform: none;
    }

    .tim-row {
      padding-top: 60px;
    }

    .tim-row h3 {
      margin-top: 0;
    }

    .tim-typo {
      padding-left: 25%;
      margin-bottom: 40px;
      position: relative;
      width: 100%;
    }

    .tim-typo .tim-note {
      bottom: 5px;
      color: #c0c1c2;
      display: block;
      font-weight: 400;
      font-size: 13px;
      line-height: 15px;
      left: 0;
      margin-left: 20px;
      position: absolute;
      width: 260px;
    }

    .offline-doc .pro-badge {
      position: absolute;
      font-size: 22px;
      text-transform: uppercase;
      font-weight: bold;
      right: -30px;
      padding: 10px 18px;
      top: -30px;
      background: #ffffff;
      border-radius: 3px;
      color: #444444;
      line-height: 22px;
      box-shadow: 0 5px 5px -2px rgba(31, 31, 31, 0.4);
    }

    .offline-doc .navbar-minimize {
      display: none;
    }


    .alert-hic1 {
      background-color: #ffdfa4;
      color: black;
    }

    .alert-hic1 a{
      color: #50575c;
    }

    .alert-hic1 a:hover {
      color: #383d41;
      text-decoration: underline;
    }

    .alert-secondary {
      color: white !important;
    }
    
    .material-symbols-outlined {
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24
    }



/*
4) Override some stuff in the material theme
============================================
*/
    .card-text {
      padding-top: 5px !important;
      padding-bottom: 3px !important;
    }

    .table thead tr th {
      font-size: 0.875rem !important;
      font-weight: bold !important;
    }

    .table thead th {
      padding: 0.5rem 0.5rem;
    }

    .md-label-static {
      color: #d0d2d8 !important;
      font-weight: bold;
    }

    .table-thin td, .table-thin th, .table-thin .tc{
      padding: 0.2rem!important;
      text-wrap: wrap!important;
    }

    .table-thin td {
      font-weight: normal;
    }

    .card-title {
      border-top-left-radius: 0.4rem;
      border-top-right-radius: 0.4rem;
      padding: 0.5rem 1rem 0.5rem 1rem;
      background-color: #e5e5e5;
      color: #111111;
      margin-bottom: 0px!important;
    }

    .card-title h4 {
      color: #111111;
      font-size: 1.1em;
      padding-bottom: 0px;
      margin-bottom: 0px;
    }

    .table-thin p {
      text-wrap: wrap!important;
    }

    .table-thin th {
      font-size: 1.1em;
    }

    .table-thin, .table-thin td, .table-thin th {
      vertical-align: middle;
    }

    .md-label-static {
      color: #d0d2d8 !important;
      font-weight: bold;
    }

    .bold-text {
      font-weight: bold!important;
    }

    .remove-spacing {
      margin: 0!important;
      padding: 0!important;
    }

    .btn-primary {
      background-color: #202020;
      box-shadow: 0 2px 2px 0 rgba(43, 43, 43, 0.1), 0 3px 1px -2px rgba(43, 43, 43, 0.18), 0 1px 5px 0 rgba(43, 43, 43, 0.15);
    }

    .btn-primary:hover, .btn-primary:active {
      background-color: #222222!important;
      color: #d0d2d8 !important;
      box-shadow: 0 2px 2px 0 rgba(43, 43, 43, 0.1), 0 3px 1px -2px rgba(43, 43, 43, 0.18), 0 1px 5px 0 rgba(43, 43, 43, 0.15);
      text-decoration: none!important;
    }
    


/*
5) Pagination
=============
*/

    .paginate_button first {
        margin-left: 0px;
    }
    .paginate_button {
        margin-left: 10px;
    }

    .paginate_button:link { COLOR: #dd5100; TEXT-DECORATION: none }
    .paginate_button:visited { COLOR: #dd5100; TEXT-DECORATION: none }
    .paginate_button:active { COLOR: #dd5100; }
    .paginate_button:hover { COLOR: #eee; cursor: pointer; TEXT-DECORATION: underline }


/*
6) Datatables.net
=================
*/
    #datatables tbody tr {
      cursor: pointer;
    }



/* 
7) Forms
========
*/
    input, select {
      background-color: #f8f6f3;
      border: 1px solid #d4d2ce;
      color: #333;
    }

    .datepicker {
      background-color: #f8f6f3;
      border: 1px solid #d4d2ce;
      color: #333;
      padding: 0px;
      text-align: center;
    }

    .custom-label {
      color: #a9afbbd1 !important; 
      font-weight:400 !important;
    }

    .table-thin input,
    .table-thin select,
    .table-input-padder input,
    .table-input-padder select,
    .input-padder {
      padding: 0.45em 7px 0.45em 7px!important;
      box-sizing: border-box;
      line-height: 0px;
    }

    



    .datepicker:disabled,
    .datepicker.inactive {
      opacity: 0.6;
    }

    .datepicker.inactive:hover {
      cursor: default;
    }

    .custom-label {
      color: #a9afbbd1 !important; 
      font-weight:400 !important;
    }
    .ui-timepicker-wrapper {
      min-width: 166px!important;
    }


/*
8) h1/h1/h3 etc
===============
*/

  h1 {
    font-size: 1.5em;
    font-weight: bold;
  }

  h2 {
    font-size: 1.4em;
    font-weight: bold;
  }


/*
9) Bootstrap notify
====================
For some reason needed to add some custom css ot not make this look like rubbish on the portal
as such added here
*/

  /* Base animation class (like Animate.css) */
    .animate__animated {
      animation-duration: 1s;
      animation-fill-mode: both;
    }

  /* Fade In Down */
    .animate__fadeInDown {
      animation-name: animate__fadeInDown;
    }

    @keyframes animate__fadeInDown {
      0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

  /* Fade Out Up */
    .animate__fadeOutUp {
      animation-name: animate__fadeOutUp;
    }

    @keyframes animate__fadeOutUp {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
      100% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
      }
    }


  /* Target only the data-notify container */
    div[data-notify="container"] {
        color: white;
    }

  /* Style the close button inside this container */
    div[data-notify="container"] .close {
        color: white; /* X icon color */
        background-color: transparent;
        border: none;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 16px;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }

  /* Hover effect for close button */
    div[data-notify="container"] .close:hover {
        color: #fff;
    }

    .alert[data-notify="container"].col-md-4 {
      width: 40% !important;
      flex: 0 0 40% !important;
      max-width: 40% !important;
    }



/* 
10) Media query for phones 
=========================
*/
  @media only screen and (max-width: 768px) { 
    #sSearchResults {
      font-size: 14px;
      width: 220px;
    }

    .tr-mobile-block,
    .tr-mobile-block td {
      display: block;
      width: 100%!important;
    }

    .alert[data-notify="container"].col-md-4 {
      width: 90% !important;
      flex: 0 0 90% !important;
      max-width: 90% !important;
    }

    .d-block-on-mobile tr td,
    .d-block-on-mobile tr {
      width: 100%;
      display: block;
      max-width: 100%!important;
    }
  }