/*
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) Media query for phones
9) h1/h1/h3 etc
10) Colours (general)
*/


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

    body {
        color: #fff;
    }

    textarea {
      background-color: #1e2437;
      border: 1px solid #2c3144;
      color: #fff;
      padding: 5px;
    }


/*
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-img-container {
      align-items: center;
      background-color: white;
      display: flex; 
      height: 200px;
      justify-content: center; 
      position: relative;  
    }

    .card-img-top {
      max-width: 200px;
      max-height: 200px;
      vertical-align: middle;
    }
    
    .card-text {
      padding-top: 5px !important;
      padding-bottom: 3px !important;
    }

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

    .table-thin input:disabled,
    .table-thin select:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }

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

    .table-thin td, .table-thin th {
      padding: 0.2rem;
    }

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

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

    .remove-spacing {
      margin: 0!important;
      padding: 0!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: #1A2034;
      border: 1px solid #31374a;
      color: #fff;
    }

    .datepicker {
      background-color: #1A2034;
      border: 1px solid #31374a;
      color: #fff;
      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 {
      background-color: #1A2034;
      border: 1px solid #31374a;
      color: #fff;
      padding: 0px;
      text-align: center;
    }

    .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) 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;
    }
  }



/*
9) h1/h1/h3 etc
===============
*/
  .alert h2 {
    font-size: 1.4em;
    font-weight: bold;
  }



/*
10) Colours (general)
=====================
*/
  .red {
    color: #ff0000;
  }

  .yellow {
    color: #ffd800;
  }

  .green {
    color: #30ff00;
  }