/* CSS Document */
:root {
    --bs-light-rgb: 248, 249, 250;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-info-bg-subtle: #cff4fc;
    --bs-info-border-subtle: #9eeaf9;
    --bs-info-text-emphasis: #055160;

}
body { line-height: 1.5;
color: #212529; height: 100%;}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}
hr {
  margin: initial;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}
.container {
    width: 100%;
    max-width: 1140px
}
.section-container, .section-title {
    margin-bottom: 0;
}
.section {
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 0.3rem;
    padding: 0.3rem;
    
    margin-bottom: .75rem;
}
.alert-info {
  color: #055160;
  background: #cff4fc;
  border-color: #b6effb;
}
.form-text {
  margin-top: 0.25rem;
  font-size: 0.95em;
  color: #6c757d;
}

/* Grids */
.bg-primary { background: #3B71CA; color: #FFF}
.bg-secondary { background: #9FA6B2; color: #FFF}
.bg-dark { background: #332D2D; color: #FFF}
.bg-success { background: #14A44D; color: #FFF}
.bg-danger { background: #dc3545; color: #FFF}
.bg-info { background: #54B4D3; color: #FFF}
.bg-info { background: #0DCAF0; color: #fff}
.bg-info { background: #17a2b8; color: #f8f9fa}
.bg-info { background: #0dcaf0 !important; color: #212529 !important}
.bg-info { background: #0dcaf0 ;}
.bg-light { background: #f8f9fa; color: #212529}
.bg-warn { background: #ffc107}
.bg-title { background: #e0e0e0; color: #332D2D;  font-weight: 600}
.bg-header { background: #dfe6e9; color: #212529;  font-weight: 600}
.bg-sub-header { background: #f5f5f5; color: #332D2D; }




.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  }
  

.bg-gray { background: #6c757d; color: #212529}
.bg-gray-200 { background: #e9ecef; color: #212529}

.br-right {border-right: 1px solid #332D2D }

.text-primary { color: #007bff }
.text-secondary { color: #6c757d }
.text-success { color: #28a745 }
.text-danger { color: #dc3546 }
.text-info { color: #17a2b8}
.text-sm { font-size: 14px }
.text-md { font-size: 15px }
.small { font-size: 0.875em }
.text-header {font-size:15px;font-weight:700}
.text-center { text-align: center}
.text-end { text-align: right !important}

.align-center { text-align: center; justify-content: center;}

.v-align-center { margin: auto 0}

strong, .text-bold, .fw-bold { font-weight: 600}
.grid-data, 
.row, .row-md,
.grid-data-form { display: grid; 
        grid-template-columns: repeat(12,1fr); 
        grid-gap: 0px; min-height: 2px;height:auto;
        border:0px solid;align-items: stretch;
        vertical-align: middle;position:relative;
        width:100%}
.grid-data > div, .row > div, .grid-data-form > div {position:relative; overflow:visible !important; padding:4px 4px; height:auto;vertical-align: middle; align-items: center;line-height: 1.5; }
    

.row.gap-1 { gap: 2.5rem;}

.display-container {
    display: grid; 
    grid-template-columns: 20% 80%;   
    margin-top: 36px;
    min-height: 100vh;
}

.form-container > .row > div {position:relative; overflow:hidden; padding:4px 4px;  padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;}



.display-container > div {
   padding:4px 5px 0px 0px; height:auto;vertical-align: middle; line-height: 1.5;
}



.grid-data-form { column-gap: 5px; padding: 5px 0px }
.grid-header { padding: 0px}
#mod-content { padding-bottom: 10px}
#mod-content > .grid-data { width: 99.1%}
#mod-content > .row { width: 99.1%}
#mod-content > .grid-data-form { width: 99.1%}
    
.item1 { background: gray; }

/*.col,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {  }*/


.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-1 {
  flex: 0 0 auto;
  width: 175px;
}
.col { grid-column: span 1;}
.col-2 { grid-column: span 2;}
.col-3 { grid-column: span 3;}
.col-4 { grid-column: span 4;}
.col-5 { grid-column: span 5;}
.col-6 { grid-column: span 6;}
.col-7 { grid-column: span 7;}
.col-8 { grid-column: span 8;}
.col-9 { grid-column: span 9;}
.col-10 { grid-column: span 10;}
.col-11 { grid-column: span 11;}
.col-12 { grid-column: span 12;}

.row-2 {grid-row-end: span 2;}

.br-right { border-right: 1px solid #212529}
.br-top { border-top: 1px solid #212529}
.br-start { border-left: 1px solid #212529}
.br-bottom { border-bottom: 1px solid #212529}
.br-bottom-light { border-bottom: 1px solid #333}
.br-bottom-2 { border-bottom: 2px solid #212529}
.br-bottom:last-child {
    border-bottom: none; /* safety reset */
  }
.fst-italic { font-style: italic; }
.fst-normal { font-style: normal; }

.btn { border-radius: 2px}

.input, .text-box, .select-box, textarea { 
    border: 1px solid #aaa; letter-spacing: 1px;  
	width: auto; -webkit-border-radius: 4px; 
	-moz-border-radius: 6px; border-radius: 4px;
    padding:0.05rem; padding-left: 0.2rem; font-family: inherit;
  font-size: inherit;
  line-height: inherit;}

.input, .select-box { border-width: 1px }
textarea.input { height: 50px;resize:none}
textarea.input-lg { height: 70px}

.input { height: 1.9rem;  
    padding: 0.39rem 0.79rem; 
    font-size: 0.92rem;
    padding-left: 0.2rem;
    line-height: 1.42857143;
    border: 1px solid #ccc;
  border-radius: 0.26rem;      /* 4px */
  box-sizing: border-box;
    box-sizing: border-box;}

textarea {resize: none}
textarea.input.resize {resize: vertical !important}
textarea.h-20 { height: 20px}
textarea.h-50 { height: 5rem}
textarea.h-10 { height: 10rem}
textarea.h-100 { height: 50px}
.h-100 { height: 10rem}

.h-100 { height: 10rem}
.h-200 { height:20rem}
.select-box, 
.select2.select2-container .select2-selection
 { border: 1px solid #aaa; vertical-align: middle; }
.ringtimer, .w-10 { width: 10% }
.w-30 { width: 30% }
.ew-25,.w-25 { width: 25% }
.ew-50,.w-50 { width: 50% !important}
.select-box.w-50 { width: 50% !important}
.ew-75,.w-75, .select-box.w-75 { width: 75% !important}
.ew-100,.w-100 { width: 100% }
.bv-50, .sw-50 { width: 50px }
.bv-75 { width: 75px }
.bv-100 { width: 100px }
.ew-150 { width: 150px }
.ew-200 { width: 200px }
.pw-800 { width: 65em }

.h1 { font-size: 2.5rem }
.h5 { font-size: 1.25rem }

a { color: inherit}
a, a:link, a:visited, a:hover, a:active { text-decoration: none; color: #4e86ed } 
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: #fff;
  text-decoration: none;
}

.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius);
    --bs-alert-link-color: inherit;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
  }
  
.alert-info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    --bs-alert-link-color: var(--bs-info-text-emphasis);
  }

/* Buttons */
.btn,
.ui-tabs .btn,
.ui-widget .btn { 
    /*
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
    */
    display: inline-block;
    font-weight: 400;
    text-align: center; 
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem; 
   
    outline-offset: 0; 
    font-size: .95rem;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
	text-decoration: none; 
    cursor: pointer; 
    border-radius: 0.375rem;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    /* Uses CSS variables for colors */
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.btn1 {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: .95rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    
    /* Uses CSS variables for colors */
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
  }
  .btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
  }
  
  .btn:focus {
    outline: 0;
  /*  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);*/
  }
  .btn:visited {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
  }
  .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    /*box-shadow: var(--bs-btn-active-shadow);*/
  }
  
  .btn:disabled {
    pointer-events: none;
    opacity: 0.65;
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
  }
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
  }
  .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
  }
  
  .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
  }
  .btn-info {
    --bs-btn-color: #000;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #31d2f2;
    --bs-btn-hover-border-color: #25cff2;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #3dd5f3;
    --bs-btn-active-border-color: #25cff2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0;
  }
  
  .btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
  }
  
  .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
  }
  
  .btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
  }
  
  .btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #424649;
    --bs-btn-hover-border-color: #373b3e;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d5154;
    --bs-btn-active-border-color: #373b3e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529;
  }
  
  .btn-outline-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
  }
  
  .btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
  }
  
  .btn-outline-success {
    --bs-btn-color: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #198754;
    --bs-btn-hover-border-color: #198754;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #198754;
    --bs-btn-active-border-color: #198754;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #198754;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #198754;
    --bs-gradient: none;
  }
  
  .btn-outline-info {
    --bs-btn-color: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #0dcaf0;
    --bs-btn-hover-border-color: #0dcaf0;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #0dcaf0;
    --bs-btn-active-border-color: #0dcaf0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0dcaf0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0dcaf0;
    --bs-gradient: none;
  }
  
  .btn-outline-warning {
    --bs-btn-color: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #ffc107;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffc107;
    --bs-gradient: none;
  }
  
  .btn-outline-danger {
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc3545;
    --bs-btn-active-border-color: #dc3545;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #dc3545;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dc3545;
    --bs-gradient: none;
  }
  
  .btn-outline-light {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
  }
  
  .btn-outline-dark {
    --bs-btn-color: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #212529;
    --bs-btn-hover-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #212529;
    --bs-btn-active-border-color: #212529;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #212529;
    --bs-gradient: none;
  }
  
  .btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    text-decoration: underline;
  }
  .btn-link:focus-visible {
    color: var(--bs-btn-color);
  }
  .btn-link:hover {
    color: var(--bs-btn-hover-color);
  }
  
  

.btn-primary-active {
    color: #fff;
    background: #0a58ca;
    border-color: #0a53be;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-primary-disabled {
    color: #fff;
    background: #0d6efd;
    border-color: #0d6efd;
    opacity:  0.65;
}


.btn,
.status-icon { font-size: 16px}
/*
.icn-disabled { border: 1px solid #3498db; background: #BDE5F8; color: #00529B; opacity: 0.8; letter-spacing: 1px;}
.icn-disabled { border: 1px solid #ccc; background: #ABB7B7; opacity: 0.7; color: #333; cursor: pointer}
.icn-disabled { border: 1px solid transparent; background: #BDE5F8; color: #00529B; opacity: 0.8; letter-spacing: 1px;}
*/
.btn.icn-disabled,
.ui-tabs.btn.icn-disabled,
.ui-widget.btn.icn-disabled, 
.icn-disabled { 
    --bs-btn-color: #fff;
    --bs-btn-bg: #ABB7B7;
    --bs-btn-border-color: #ABB7B7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #98a3a3; 
    --bs-btn-hover-border-color: #919e9e;
    --bs-btn-focus-shadow-rgb: 171, 183, 183;
    --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #919e9e;           /* pressed state */
  --bs-btn-active-border-color: #8a9797;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #ABB7B7;
  --bs-btn-disabled-border-color: #ABB7B7;
    border: 1px solid #ccc; 
    
    opacity: 0.7; 
    color: #333; 
    cursor: pointer
}


.btn.icn-enabled,
.icn-enabled { 
    --bs-btn-color: #fff;                  /* text color */
  --bs-btn-bg: #3498db;                  /* base background */
  --bs-btn-border-color: #3498db;        /* base border */
  
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2d86c4;            /* darker hover background */
  --bs-btn-hover-border-color: #297bb5;  /* darker hover border */
  
  --bs-btn-focus-shadow-rgb: 52, 152, 219; /* RGB of base color for glow */
  
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #297bb5;            /* pressed state */
  --bs-btn-active-border-color: #2470a7;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3498db;
  --bs-btn-disabled-border-color: #3498db;
    
    
    letter-spacing: 1px; 
    opacity: 1; 
    cursor: pointer
}

.icn-enabled.useropt { border-left: 1px solid #f8f9fa; }

.icn-enabled.tfbtn, .icn-enabled.model-keys { border-left: 1px solid #f8f9fa; }



.btn-narrow {
    padding: 0.25rem 0.5rem;
}

.btn-gray-200 { background: #e9ecef; color: #212529}

.btn-group,
.btn-group-sm,
.btn-group-sm-x {
    margin-left:1px; 
    display: inline-flex;}
.btn-group-sm { 
    font-size: 0.875rem
}
.btn-group>.btn,
.btn-group-sm>.btn,
.btn-group-sm-x>.btn { 
    border-radius:0px;
}

.btn-group-sm>.btn:first-child,
.btn-group-sm-x>.btn:first-child,
.btn-group>.btn:first-child,
.btn-group>.status-icon:first-child { border-top-left-radius:3px;border-bottom-left-radius:3px}

.btn-group>.btn:last-child,
.btn-group-sm>.btn:last-child,
.btn-group-sm-x>.btn:last-child,
.btn-group>.status-icon:last-child { border-top-right-radius:3px;border-bottom-right-radius:3px}

.btn-group>.btn-icon:first-child { border-top-left-radius:3px;border-bottom-left-radius:3px}
.btn-group>.btn-icon:last-child { border-top-right-radius:3px;border-bottom-right-radius:3px}

.btn-group>.icn-enabled:not(:first-child) {border-left: 1px solid #f8f9fa}

.btn-group>.icn-disabled:not(:first-child) {border-left: 1px solid #f8f9fa}

.btn-group-sm>.btn { padding: 0.188rem; min-width:4rem;   }

.btn-sm, 
.btn-group-sm >.btn { 
    padding: 0.3rem 0.5rem; 
    font-size: 0.9rem
}

.btn-status { padding: 0.2rem 0.3rem; font-size: 0.9rem }

.btn-group-sm-x>.btn { padding: 0.15rem 0.2rem; font-size: 14px;  }

.btn-sm-x, .btn-group-sm-x>.btn { padding: 0.05rem 0.5rem; height: 1.75rem; font-size: 0.825rem}
.btn-sm-t { padding: 0.05rem 0.5rem; font-size: 0.85rem}


.btn-icon { min-width: 100px; font-size: 16px; height: 30px; border: 1px solid #aaa; padding: 5px; border-radius: 3px; outline: none; outline-offset: 0; 
    text-decoration: none; cursor: pointer }

.status-icon { font-weight: normal; align-items: center; align-content: center; justify-content: center; padding: 0px; min-width: 75px; width: auto; line-height: 1.2; height: 30px; border-radius: 1px; font-size: 14px; }

.status-icon { min-width:85px; padding:3px}








.inline-row { display: inline-flex }

.form-container > div.row {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}



.p-0 {
    padding: 0 !important;
}
.p-1 {
    padding: 0.25rem !important;
}
.p-2 {
    padding: 0.5rem !important;
}
.p-3 {
    padding: 1rem !important;
}
.p-4 {
    padding: 1.5rem !important;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
.pl-2 {
    padding-left: 0.5rem !important;
}
.pl-4 {
    padding-left: 1.5rem !important;
}
.my-0 {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  
.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
  
  .my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  
.mb-2 {
    margin-bottom: 0.5rem !important;
}  
.mb-3 {
    margin-bottom: 1rem !important;
}  
.mb-5 {
   
    margin-bottom: 3rem !important;
  }

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}
.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}
.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}
.m-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.m-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}
.mb-0 {
    margin-bottom: 0 !important;
  }
  
  .mb-1 {
    margin-bottom: 0.25rem !important;
  }
  
  .mb-2 {
    margin-bottom: 0.5rem !important;
  }
  
  .mb-3 {
    margin-bottom: 1rem !important;
  }
  
  .mb-4 {
    margin-bottom: 1.5rem !important;
  }
  
  .mb-5 {
    margin-bottom: 3rem !important;
  }
  .my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
.text-success {
    color: rgba(25, 135, 84, 1) !important;
}
.text-danger {
    color: rgba(220, 53, 69, 1) !important;
}

.select-group { width: 100% }
.select-group { width: 100% }
.select-group > select { width: 100% }
.select-group > select:last-child { margin-top: 0.25rem !important; }
.widget-box { flex: 0; justify-content: center; align-content: center; align-items: center; 
	margin-top: 0px; border: 1px solid #aaa; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 0px 0 0px 0;  }

fieldset { display: block; margin-inline-start: 2px; margin-inline-end: 2px; border: groove 2px ThreeDFace; padding-block-start: 0.35em; padding-inline-end: 0.75em; padding-block-end: 0.625em; padding-inline-start: 0.75em; min-inline-size: min-content; }
fieldset { border-radius: 4px}
fieldset legend { font-weight: bold; font-size: 18px}
fieldset div.data-row { border-top: none; }


.pointer { cursor: pointer; }

.menubox-container,
.nav-menu-box { justify-content: center; 
    align-content: center; 
    align-items: center; 
    width: 99%;
	flex: 0; 
    margin: 0 auto; 
    margin-top: 0px; border: 1px solid #ABB7B7; background: #fff; 
	-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding-bottom: 0px; text-align: left 
}

.nav-menu-box h3  { 
    font-size: 18px; 
    width: 100%; 
    height: 35px; 
    background: #ECF0F1; 
    border-radius: 0px 0px 0px 0px; 
    color: #333 
}
.nav-menu-box h3 span { padding-left: 10px; width: 90%; justify-content: center; align-content: center; align-items: center; }
.nav-menu-box h3.bottom  { justify-content: center; align-content: center; align-items: center; height: 35px; background: #ECF0F1; border-radius: 0px 0px 0px 0px; color: #333 }
.nav-menu-box {  background: #FBFBFB; border-radius: 0px;  }

.menubox-scroll-list { padding-right: 0px; min-height: 27px; height: auto; max-height:88vh;overflow-y:auto;overflow-x:hidden}

.menubox-row { flex: 1; display: flex; background: none; height: 25px; padding: 0; font-size: .95rem !important;
    text-indent: 0px; width: auto; margin: 0; border-bottom: 1px #ABB7B7 solid; align-content: center; align-items: stretch }


.menu-box-row { 
    display: flex; 
    background: none; 
    height: 25px; 
    padding: 0; 
    text-indent: 0px; 
    width: auto; 
    margin: 0; 
    border-bottom: 1px #ABB7B7 solid; 
    align-items: center; 
}


.menu-box-row > .main-menu-opt:active { 
    background: #c8d6e5; 
    font-weight: bold 
}

.menu-box-row > .main-menu-opt:link { 
    background: #c8d6e5; font-weight: bold 
}

.menu-button, 
.menu-button-active { 
    display: flex; 
    box-sizing: border-box;   
    min-width: 25%; 
    width: 100%; 
    height: auto; 
    align-content: center; 
    align-items: center;
    justify-content: flex-start; 
    padding: 0 0px 0 2px; 
    margin: 0 0 0 0px; 
    outline: none; 
    align-self: stretch; 
    outline-offset: 0; 
    color: #0182d3; 
    text-decoration: none; 
    cursor: pointer; 
    border:none;
}


.menu-button a:active { background: #D5E5E6; font-weight: bold}
.menu-button a:link { background: #ced6e0; font-weight: bold}
.menu-button a:visited { background: #ced6e0; font-weight: bold}

.menu-button span, .menu-button-active span { display: inline-block; padding: 0 0px 0 0px }
.menu-button span.subsrv, .menu-button-active span.subsrv { padding: 0 5px 0 10px }


.menu-button .sidemenu_submenu { 
    display: block; 
    padding: 0 5px 0 10px;
}

.menu-button span.subsrvl2, .menu-button-active span.subsrvl2 { padding: 0 5px 0 25px }
.menu-button:hover { background: #DADFE1 }
.menu-button:hover { background: #ecf0f1 }

.menu-button a:hover { background: #FBFBFB;  }
.menu-button a:hover { background: cyan;  }
.menu-button:hover { background: #dee2e6 }

.menu-button.sub-menu { background: #bdc3c7; color: #fff; font-weight: bold}

.menu-button>.nolink a:active,
.menu-button>.nolink a:link,
.menu-button>.nolink a:visited, .nolink
 { cursor: default;}

.active-menu-opt  { background: #c8d6e5; font-weight: bold }

.active-menu-opt  { background: #DFE6F0; font-weight: bold }

.active-menu-opt a:active { background: #c8d6e5; font-weight: bold }
.active-menu-opt a:link { background: #c8d6e5; font-weight: bold }

.rightmenu-primary-active { background: #c8d6e5; font-weight: bold }
.rightmenu-primary-active { background: #DFE6F0; font-weight: bold }
.menubox-primary-active { background: #DFE6F0; font-weight: bold }

.active-main-opt  { background: #D5E5E6; font-weight: bold }
.active-main-opt  { background: #EAEEF5; font-weight: bold }
.active-main-opt a:active { background: #D5E5E6; font-weight: bold }
.active-main-opt a:link { background: #D5E5E6; font-weight: bold }

.rightmenu-second-active { background: #DFE6F0; font-weight: bold }
.rightmenu-second-active { background: #EAEEF5; font-weight: bold }
.menubox-second-active { background: #EAEEF5; font-weight: bold }


.sub-menu-active { background:  #f5f6fa; font-weight:bold}
.menubox-opt-sub { background:  #f5f6fa; font-weight: 575; font-size: 15px}


.menu-active { color: #fff}

.menu-active a:link { background: none;  }
.menu-active a:visited { background: #c8d6e5; font-weight: bold } 
.menu-button a:hover { background: #DADFE1;  }
/*.menu-active a:hover { background: #ecf0f1;  }*/
.menu-active a:active { background: #4183D7;  }
.menu-active a:active { background: #DADFE1;  }
.menu-active a:active { background: #D5E5E6; font-weight: bold }

button:disabled, .btn:disabled  { cursor: not-allowed; opacity: .5;}
input[type="checkbox"]:disabled { cursor: not-allowed; }
td {font-size: 14px}



.main-opt-active { background: #D5E5E6; font-weight: bold; color: #FFF }

.last-menu-row { border-radius: 0 0 8px 8px }
.menu-box-row.main-menu-opt1 { background: #4183D7; color: #FFF;font-weight: bold }
.menu-box-row.main-menu-opt1 { background: #ced6e0; color: #FFF;font-weight: bold }


.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}
.fs-sm, .fs-small {
    font-size: 0.9rem !important;
  }
  .fs-sm-x, .fs-small-x {
    font-size: 0.85rem !important;
  }
.text-small { font-size: 0.9rem !important; }
.title-small, .title { font-size: 1.1rem !important; font-weight: 580; font-family:'Helvetica'}
.title-sm { font-size: .96rem !important; font-weight: 600; font-family:'Helvetica'}
.title-sm-x { font-size: .90rem !important; font-weight: 580; font-family:'Helvetica'}

/* Dialog Box */
.no-close .ui-dialog-titlebar-close { display: none; }
.br-none { border: none }
/*
input[type="text"]:disabled,
input:disabled {}

input:read-only
{ border: 1px solid #aaa; }
input[type="text"]:read-only { border: none; padding-left: 0px }
*/
.input.read:read-only { border: none; }

.input.disabled:read-only { background-color: #eee;
    color: #999;
    border-color: #ddd;}

#user-menu { padding-right: 0px; min-height: 27px; height: auto; max-height:475px;overflow-y:auto;overflow-x:hidden}

span.menu-button { padding: 0 0px 0 10px; line-height: auto; }

#sms-vcard-box, #popup-box, 

.popup-box,
.popup-box-sm { 
    position: fixed; 
    min-height: 10px; 
    height: auto; 
    box-shadow: 0px 0px 10px 5px #ABB7B7; 
    padding: 0px !important; 
    left: 50%; transform: translate(-50%, 0); 
    top: 0px;
	 
    padding-bottom: 1px; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    background-color: #fff; 
    min-width: 10px; 
    width:auto; 
	border-radius: 8px; 
    z-index: 2; 
    overflow: none; 
    border: 4px solid #ABB7B7; 
    display: none; 
    color: #000; 
}
    
.popup-box { 
    position: fixed; 
    min-height: 10px; 
    height: auto; 
    box-shadow: 0px 0px 10px 5px #ABB7B7; 
    padding: 0px !important; 
    padding-bottom: 1px; 
    left: 50%; 
    transform: translate(-50%, 0); 
    top: 0px;
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    background-color: #fff; 
    min-width: 10px; 
    width:auto;
    border-radius: 8px; 
    z-index: 2; 
    overflow: none; 
    border: 4px solid #ABB7B7; 
    display: none; 
    color: #000
}


.modal-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
}
.modal-box {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 2px solid #ABB7B7;
    border-radius: 8px;
    box-shadow: 0px 0px 0px 1px #ABB7B7;
    color: #000;
    min-width: 10px;
    min-height: 10px;
    display: none;
    overflow: hidden;
    padding: 0;
  }
  .modal-box.modal-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.popup-box-greetings { position: 'absolute';
						  color:'black';
						   width: '500px';
						   height: 'auto';
						   left: 37%;
						   top: 25px;}
.popup-box-sm { width: 425px; left: 37%; top: 25px; height:auto; color:black;display:flex;position:absolute }
/* 
voicemail delete popup 
position: 'absolute', display: 'flex', color: 'black', width: '425px', height: 'auto', left: 37 + "%", top: 25 + "px",

move voicemail 
position: 'absolute', display: 'flex', color: 'black', width: '425px', height: 'auto', left: 37 + "%", top: 25 + "px",

 delete voicemail popup after playback
position: 'absolute', display: 'flex', color: 'black', width: '425px', height: 'auto', left: 37 + "%", top: 25 + "px"}
*/

/* sms send box 
position: 'fixed', width: '750px', left: '450px', top: '75px'
*/

/* sms view message
position: 'fixed', 'min-width': '525px', width: '650px', 
							 height: 'auto', 
							 left: "450x", 'z-index': '999',
							 top:  "38px"
*/



/* sms delete message 
position:'absolute', 'min-height': '22px', 'height': 'auto', width: '450px', background: '#FFF',
								 'border-radius': '8px', left: tooltip.left - 465 + "px", top: tooltip.top - 77 + "px"*/

/* sms view history width: '880px', 
							 height: 'auto', 
							 left: "298px",position: 'fixed', top:  "30px" */


/* phonebook view contact /modal 
'background': '#eee','position': 'absolute', 'min-width': "400px", 'width': "400px", 'min-height': "620px", right: "50%", left: "50%",
                                 height: "100%", top:"0px", 'z-index': '999'
*/
.modal { overflow: hidden; }
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 60px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.mod-content {
	width: 99%;
	padding: 0.5rem !important;
	position: relative;
}

.mod-sub-header { 
    display: flex; 
    justify-content: flex-start; 
    align-content: center; 
    align-items: center; 
    
    min-height: 1px; 
	padding: 0.5rem;
    width: 99%; 
    height: auto; 
    
    position: relative; 
    box-sizing: border-box;
}

.mod-buttons { position: relative; width: 98%; box-sizing: content-box; margin: 10px 5px 5px; padding-bottom: 8px; border-bottom: 0px solid #222;}

.d-inline-block { display: inline-block !important; }
.d-flex { display: flex; }
.d-none, .row .d-none { display: none  }
.d-invisible { visibility: hidden !important}
.dt-pb-2 { padding-bottom: 2px }

.vmpass, .blurpass {
  
    color: transparent;
    text-shadow: #111 0 0 10px;
    transition: 0.4s;
    
    
    &:hover {
      color: #111;
      text-shadow: none;
    }
  }
  
.tooltip-container1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0px dotted black;
}
.tooltip > i {
    color: #00529B;
}
/* tooltip text */
.tooltip .tiptext {
    visibility: hidden;
    position: absolute;
    z-index: 99999 !important;
    width: 225px;
    color: #fff; 
    background: #212529;
    border: 1px outset #ccc;
    white-space: normal;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    padding: 4px 8px;
    border-radius: .5rem;
    font-size: .85rem;
}
.tooltip:hover .tiptext {
    visibility: visible;
    opacity: 1;
  }
.tooltip .tiptext-top {
    text-align: center;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%);
}
.tooltip .tiptext-top-right {
    white-space: normal;
    width: 200px;
    bottom: 125%;       /* still above the element */
    left: 50%;         /* shift starting point to right edge */
    transform: translateX(0); /* no centering */
  }
/* left tooltip */
.tooltip .tiptext-left {
    top: -5px;
    right: 110%;
}
.tooltip-show {
    visibility: visible;
    opacity: 1;
  }
.tooltip .tiptext-right {
    
    top: -5px;
    left: 105%;
}

.tooltip .tip-bottom {
    top: 100%;
    left: 50%;
}
  .tooltip .tooltiptext-top1 {
    visibility: hidden;
    min-width: 125px;
    
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
   
    padding: 5px;
    position: absolute;
    z-index: 999999;
    bottom: 125%;
    left: 50%;
   
    transform: translate(-50%);
  }
  
  .tooltip .tiptext-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    min-width: 4px;
   /* width: 250px; */
    max-width: 1000px;
    /*background-color: #17a2b8;
    color: #fff;*/
    /*background: #f8f9f9;*/
    background: #fff; color: #212529;
    
    border: 1px outset #ccc;
    border-radius: 6px;
    padding: 5px ;
    position: absolute;
    z-index: 999;
    top: -5px;
    left: 110%;
  }
  
  .tooltip .tooltiptext-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  .tooltip:hover .tooltiptext-top {
    visibility: visible;
  }
  .tooltip:hover .tooltiptext-top1 {
    visibility: visible;
  }
  .tooltip:hover .tiptext {
    visibility: visible;
  }


.infotip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted transparent; /* Add dots under the hoverable text */
    cursor: pointer;
}

.infotiptext {
    visibility: hidden; /* Hidden by default */
    width: 130px;
    background-color: black;
    color: #ffffff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 6040; /* Ensure tooltip is displayed above content */
  }

  .infotiptext-top {
   /* bottom: 125%;
    left: 50%;
    transform: translateX(-50%);*/
    width: 130px;
    bottom: 130%;
    left: 65%;
    margin-left: -65px; /* Use half of the width (130/2 = 65), to center the tooltip */
  }

  .infotiptext-top::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }
  .infotip:hover .infotiptext {
    visibility: visible;
  }


  /* Base tag button style */
.btn-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;   /* smaller than btn-sm */
    font-size: 0.75rem;       /* small readable text */
    font-weight: 500;
    line-height: 1.2;
    border-radius: 50rem;     /* pill shape */
    border: 1px solid transparent;
    
    transition: all 0.15s ease-in-out;
    text-align: center;
    white-space: nowrap;
  }

  /* Hover + focus states */
.btn-tag:hover,
.btn-tag:focus {
  opacity: 0.9;
  text-decoration: none;
}
.btn-tag-primary {
    background-color: #e7f1ff;   /* light blue */
    color: #0d6efd;
    border-color: #b6d4fe;
  }
  .btn-tag-primary:hover {
    background-color: #d0e3ff;
    border-color: #9ec5fe;
  }

  .btn-tag-success {
    background-color: #e9f7ef;
    color: #198754;
  border-color: #badbcc;
  }
  .btn-tag-success:hover {
    background-color: #d1f0df;
  border-color: #a3cfbb;
  }

  .btn-tag-warning {
    background-color: #fff8e1;   /* light yellow */
    color: #856404;
    border-color: #ffeeba;
  }
  .btn-tag-warning:hover {
    background-color: #fff3cd;
    border-color: #ffe69c;
  }