<!-- This is used to hide secure data (like passwords) --> 
<!-- background-color: lightgoldenrodyellow !important; -->

.row {
    padding-right: 15px;
}

.hidetext {
  -webkit-text-security: disc; /* Default */
}

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

//div.dataTables_wrapper div.dataTables_scrollBody {
//  min-height: 300px;
//}

.dropdown-menu {
  //border-radius: 10px !important;
  //background: linear-gradient(to bottom, #535353 0, #707070 100%);
  width: 250px;
}
.dropdown-section {
  padding: 5px 10px;
  font-weight: bold;
  color: #555;
  border-bottom: 1px solid #ddd;
}
.dropdown-item {
  padding-left: 15px !important;
  color: #2b2929 !important;
 }

.mb-4, .my-4 {
    margin-bottom: 0.5rem!important;
}

.card-header {
    text-align: center;
}

td.details-control {
    text-align:center;
    color:forestgreen;
    cursor: pointer;
}
tr.shown td.details-control {
    text-align:center; 
    color:red;
}

table.dataTable.cell-border tbody td {
    border-right: 1px solid #ddd !important;
}

.dt-button {
  font-size: 1em !important;
  border: solid 1px #dcdcdc !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #0081D5 !important;
  transition: all 0.3s linear !important;
  //margin: 0.666em !important;
  //border colour was #0081D5
}

.dt-button.linked {
  margin-bottom: 0em !important;
  margin-left: 1em !important;
}

.dt-button:hover,
.dt-button:focus {
  background: #0081D5 !important;
  color: #ffffff !important;  
}

.pointer:hover {
  cursor: pointer;
}

.dt-button:active {
  background: #ffffff !important;
  color: #0081D5 !important;  
}

.dt-button:disabled {
  border: solid 1px #aaa !important;
  color: #aaa !important;  
}

i.disabled {
  color: #aaa !important;
  cursor: not-allowed;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #ede9e9 !important;
}

.form-control {
  font-size: 0.9rem;
  //font-weight: 200;
  line-height: 1.4;
}

.nav-pills .nav-link {
  background-color: #afb5bf;
  border-radius: 20px !important;
  margin-right: 5px !important;
}

.border-info {
    border-color: #dcdcdc !important;
    //border-color: #f1f1f1 !important;
}

table.dataTable thead .sorting_asc {
    background-image: none !important;
}

table.dataTable thead .sorting_desc {
    background-image: none !important;
}

.bg-info {
    background-color: #2f4f5a !important;
}

.card-body {
  padding: 0.50rem !important;
  //border-radius: 0.5rem !important;
  //box-shadow: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12) !important;
}

.table {
  margin-bottom: 0rem !important;
}

a:active {
  background-color: blue;
}

i:active {
  background-color: blue;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0em 0em !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
}

.md-form {
    margin-top: 0.1rem !important;
    margin-bottom: 0.1rem !important;
}

.md-form input[type="text"], .md-form input[type="date"], .md-form input[type="number"] {
  margin-bottom: 5px !important;
  padding-left: 8px;
  border: 1px solid #ccc !important;
  border-radius: 3px !important;
}

.md-4js {
  margin-top: 0.1rem !important;
  margin-bottom: 0.1rem !important;
  margin-right: 0.3rem !important;
  padding-left: 8px;
  border: 1px solid #ccc !important;
  border-radius: 3px !important;
  font-size: 0.9rem;
  //font-weight: 200;
  line-height: 1.4;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
}

.md-4jsCompact {
  padding-left: 4px;
  border: 1px solid #ccc !important;
  border-radius: 3px !important;
  font-size: 0.8rem;
  //font-weight: 200;
  line-height: 1.4;
  height: calc(1em + 0.75rem + 2px);
}

.DTE_Field input[type="text"], .md-form input[type="date"] {
  border: 1px solid #ccc !important;
  border-radius: 3px !important;
}

.md-form input[type="text"]:hover, .md-form input[type="checkbox"]:hover, .md-form select:hover, .select2-selection:hover, .md-form input[type="date"]:hover .DTE_Field_InputControl input[type="text"], .md-form input[type="date"]:hover {
  border: 1px solid transparent !important;
  box-shadow: 0 0 5px 0 #095484 !important;
  color: #095484 !important;
}

div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

dl, ol, ul {
    margin-bottom: 0rem !important;
}

label {
  display: contents;
  font-size: 1em !important;
  color: #212427 !important;
  font-weight: 600;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
}

.overlay2 {
  height: 100%;
  width: 0%;
  display: none;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  background-color: rgb(26 25 25 / 35%);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay {
  height: 100%;
  width: 0%;
  display: none;
  position: fixed;
  z-index: 41;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
  background: transparent;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-text {
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 16px;
  color: #e8e8e8;
  text-align: center;
  background: #000000a8;
  padding: 8px 16px;
  margin-top: 12px;
  border-radius: 8px;
  display: inline-block; /* Tight width */
  white-space: nowrap;   /* Prevent wrapping */
}
.loading-text.active {
  opacity: 1;
}

.overlay p {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

div.DTE_Field_Type_textarea textarea {
 height: 180px !important;
}

.select2-results__options {
  max-height: 300px !important;
  min-height: 100px !important;
  overflow-y: auto !important;
}

.select2-container {
  z-index: 100000;
}

td.inlineEdit{
    font-style: italic;
    //background-color: #3897c51f;
    color: #0081d5;
}


.image-upload > input {
  display: none;
}
.image-upload {
  //padding-top: 9px;
}

body:before,
body:after {
  content: "";
  position: fixed;
  background: white;
  left: 0;
  right: 0;
  height: 1px;
}

body:before {
  top: 0;
}

body:after {
  bottom: 0;
}

//body {
//  border-left: 10px solid white;
//  border-right: 10px solid white;
//}

#the-canvas {
  border: 1px solid black;
  direction: ltr;
}

<!-- This turns on MD table sorting -- > table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
  bottom: 0.5em;
}

<!--
  The
  following
  CSS
  entires
  are
  for
  searchable
  dropdown
  lists
  -
  Please
  note
  "dropInput"
  --
  > .dropbtn {
  background-color: #4caf50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
}

.dropInput {
  box-sizing: border-box;
  background-image: url("searchicon.png");
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

.dropInput:focus {
  outline: 3px solid #ddd;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: #0000001a;
  border-radius: 50%;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.grpno-100 { background-color: #e6194B !important; color: white !important; }
.grpno-101 { background-color: #3cb44b !important; color: white !important; }
.grpno-102 { background-color: #ffe119 !important; }
.grpno-103 { background-color: #4363d8 !important; color: white !important; }
.grpno-104 { background-color: #f58231 !important; color: white !important; }
.grpno-105 { background-color: #911eb4 !important; color: white !important; }
.grpno-106 { background-color: #42d4f4 !important; color: white !important; }
.grpno-107 { background-color: #f032e6 !important; color: white !important; }
.grpno-108 { background-color: #bfef45 !important; }
.grpno-109 { background-color: #fabed4 !important; }
.grpno-110 { background-color: #469990 !important; color: white !important; }
.grpno-111 { background-color: #dcbeff !important; }
.grpno-112 { background-color: #9A6324 !important; color: white !important; }
.grpno-113 { background-color: #fffac8 !important; }
.grpno-114 { background-color: #800000 !important; color: white !important; }
.grpno-115 { background-color: #aaffc3 !important; }
.grpno-116 { background-color: #808000 !important; color: white !important; }
.grpno-117 { background-color: #ffd8b1 !important; }
.grpno-118 { background-color: #000075 !important; color: white !important; }
.grpno-119 { background-color: #a9a9a9 !important; color: white !important; }
.grpno-120 { background-color: #000000 !important; color: white !important; }

            .blink {
                animation: blinker 1.5s linear infinite;
            }
            @keyframes blinker {
                50% {
                    opacity: 0;
                }
            }

.uppy-Dashboard-inner {
  width: 750px !important;
}

@media (max-width: 768px) {
  .uppy-Dashboard-inner {
    width: 460px !important;
  }
}


/* ===========================
   Global Smart Textareas (Material Filled)
   – drop-in, no HTML changes required
   =========================== */

/* Brand tokens (tweak these to taste) */
:root{
  --ta-bg:        #0f1220;               /* field background */
  --ta-bg-hover:  #12162a;               /* hover bg */
  --ta-text:      #e7ecf7;               /* text color */
  --ta-muted:     #9aa3b2;               /* placeholder/hints */
  --ta-border:    #2a3344;               /* thin outline (resting) */
  --ta-ring:      rgba(124,156,255,.45); /* focus ring (outer) */
  --ta-ring-strong:#7c9cff;              /* focus border color */
  --ta-radius:    14px;                  /* corner radius */
  --ta-py:        12px;                  /* vertical padding */
  --ta-px:        14px;                  /* horizontal padding */
  --ta-minh:      120px;                 /* min-height */
  --ta-shadow-in: inset 0 1px 0 rgba(255,255,255,.03);
}

/* Light mode automatic */
@media (prefers-color-scheme: light){
  :root{
    --ta-bg:        #f3f6fb;
    --ta-bg-hover:  #eef3fb;
    --ta-text:      #0f172a;
    --ta-muted:     #5b677a;
    --ta-border:    #ced7e3;
    --ta-ring:      rgba(124,156,255,.35);
    --ta-ring-strong:#5a7dff;
    --ta-shadow-in: inset 0 1px 0 rgba(2,6,23,.04);
  }
}

/* Base reset for all textareas (low specificity via :where) */
:where(textarea){
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--ta-text);
  background: var(--ta-bg);
  border: 1px solid transparent;   /* filled look = no visible border at rest */
  border-radius: var(--ta-radius);
  padding: var(--ta-py) var(--ta-px);
  width: 100%;
  min-height: var(--ta-minh);
  resize: vertical;
  outline: none;
  box-shadow: var(--ta-shadow-in);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover (gentle lift) */
:where(textarea:hover){
  background: var(--ta-bg-hover);
}

/* Focus ring & crisp inner border */
:where(textarea:focus),
:where(textarea:focus-visible){
  border-color: var(--ta-ring-strong);
  /* outer ring + subtle inner */
  box-shadow:
    0 0 0 3px var(--ta-ring),
    var(--ta-shadow-in);
}

/* Placeholder style */
:where(textarea)::placeholder{
  color: var(--ta-muted);
  opacity: .85;
}

/* Disabled / read-only */
:where(textarea:disabled),
:where(textarea[aria-disabled="true"]),
:where(textarea[readonly]){
  opacity: .65;
  /* cursor: not-allowed; */
}

/* Error states if your forms set native validity or ARIA */
:where(textarea:invalid),
:where(textarea[aria-invalid="true"]){
  border-color: #ff667a;
  /* ring fallback if color-mix unsupported below */
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff667a 35%, transparent), var(--ta-shadow-in);
}

/* Fallback for browsers without color-mix() */
@supports not (color: color-mix(in srgb, white, black)){
  :where(textarea:invalid),
  :where(textarea[aria-invalid="true"]){
    box-shadow: 0 0 0 3px rgba(255,102,122,.35), var(--ta-shadow-in);
  }
}

/* Optional: nicer scrollbars on WebKit (won’t affect Firefox) */
:where(textarea::-webkit-scrollbar){ width: 10px; }
:where(textarea::-webkit-scrollbar-thumb){
  background: linear-gradient(#bfc8da, #9aa3b2);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}