/* \/ \/  BUTTON  \/ \/ */ 
.button 
{
 display: inline-flex;
 justify-content: center;
 align-items: center;
 outline: 0;
 text-decoration: none;
 cursor: pointer;
 border: none;
 transition: all .2s ease-in-out;
 user-select: none;
}

.button-command 
{
 display: inline-flex;
 justify-content: center;
 align-items: center;
 outline: 0;
 text-decoration: none;
 cursor: pointer;
 border: none;
 height: var(--line-height);
 line-height: var(--line-height);    
 border-radius: calc(var(--line-height) * 0.5);
 padding: 0 16px;
 color: #FAEBD7;
 font-weight: var(--font-weight-medium);   
 text-transform: uppercase;
 user-select: none;
}

.button-command
{
 background-color: var(--command-background-default);      
}

.button-command:not([disabled]):hover 
{  
 background-color: var(--command-background-hover);
 color: var(--command-foreground-hover);
 font-weight: var(--font-weight-medium);
}

span.button-icon
{
 color: var(--primary-colour-500);      
}

.button-command:not([disabled]):hover > span.button-icon
{
 color: var(--hazard-foregroundcolour);    
}

/*.button-command:has(span.fa-solid:hover) {
    
}*/
/*

.button-command > span.fa-solid:hover
{
   background-color: green; 
}
*/

.button-command:disabled
{
 background-color: rgb(87,88,89);
 cursor: not-allowed;
}

.button-default 
{
 background-color: rgb(109,110,113);
 color: rgb(255,255,255);
}

.button-command.button-default:hover 
{ 
 background-color: rgb(87,88,89); 
}

.button-dark
{
 background-color: #000;
 color: rgb(255,255,255);
}

.button-command.button-dark:hover 
{
 background-color: rgb(255,255,255);
 color: rgb(0,0,0);
}

.button-light 
{
 background-color: rgb(255,255,255);
 color: rgb(0,0,0);
}

.button-command.button-light:hover 
{
 background-color: rgb(0,0,0);
 color: rgb(0,0,0);
}

.button-ok /* green */ 
{
 background-color: var(--ok-backgroundcolour);
 color: var(--ok-foregroundcolour)
}

.button-command.button-ok:hover 
{ 
 background-color: rgb(11,74,38); 
 color: rgb(255,255,255);    
}

.button-info /* blue */ 
{
 background-color: var(--info-backgroundcolour);
 color: var(--info-foregroundcolour);
}

.button-command.button-info:hover 
{ 
 background-color: rgb(0,104,159); 
}

.button-warning /* orange */ 
{
 background-color: var(--warning-backgroundcolour);
 color: var(--warning-foregroundcolour);
}

/*
.button-command.button-warning:hover
{
    background-color: rgb(174,95,30);
}
*/

.button-hazard 
{
 background-color: var(--hazard-backgroundcolour);
 color: var(--hazard-foregroundcolour);
}

/*
.button-command.button-hazard:hover 
{ 
 background-color: rgb(179,49,49); 
}
*/

.button-relaxing 
{
 background-color: var(--relaxing-backgroundcolour);
 color: var(--relaxing-foregroundcolour);
}
/*

.button-command.button-relaxing:hover 
{
 background-color: rgb(111,55,166);
}
*/

.button-large 
{
 height: 3.07225rem;
 border-radius: 0.3125rem;
 padding: 0 1rem;
}

.button-medium 
{
 height: 2.715rem;
 border-radius: 0.1875rem;
 padding: 0 1rem;
}

.button-standard 
{
 height: 2.215rem;
 border-radius: 0.1875rem;
 padding: 0 1rem;
}

.button-small 
{
 font-size: 0.65rem;
 height: 1.75rem;
 border-radius: 0.1875rem;
 padding: 0 0.5rem;
}

/* /\ /\     BUTTON     /\ /\ */

/* \/ \/     CHECKBOX     \/ \/ */ 
.checkbox
{
 display: flex;
 cursor: pointer;			
}
		
.checkbox input[type='checkbox']
{
 margin: 0;
 padding: 0;
 display: none;
}
		
.checkbox div
{
 display: inline-block;	
 position: relative;
 height: 14px;	
}

.checkbox span
{
 padding: 0 0.3125rem;
 font-size: 12px;
 user-select: none; 
}
		
.checkbox div > span
{
 display: inline-block;
 width: 14px;
 height: 14px;
 background-color: rgb(33,33,33);
 border-radius: 3px;
 pointer-events: none;
}
		
.checkbox div > span[data-state='disabled'],
.checkbox div > span[data-state='disabledchecked']
{
 background-color: grey;
 cursor: auto;	
}
		
.checkbox div > span[data-state='checked']:after,
.checkbox div > span[data-state='disabledchecked']:after		
{
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* /\ /\     CHECKBOX     /\ /\ */

.label 
{
 display: block;
 width: 100%;
 user-select: none;
}

.label-spaced 
{
 margin: 0 0 2px 0; 
}

uppercase
{
 display: inline-block;
 text-transform: uppercase; 
}

lowercase
{
 display: inline-block;
 text-transform: lowercase;
}

span[class*='required']:after 
{
 content: ' *';
 color: var(--hazard-foreground);
 font-weight: var(--font-weight-medium);
}

/* \/ \/  TEXTBOX(INPUT)  \/ \/ */ 
input[type=text],
input[type=text]:focus,
input[type=password],
input[type=password]:focus,
input[type=number],
input[type=number]:focus,
input[type=email],
input[type=email]:focus 
{
 height: var(--line-height);
 outline: none;
 box-shadow: none;
 padding: 0 0.5rem;
 box-sizing: border-box;
    
    background-color: rgba(40,40,40, 0.95);
    color: whitesmoke;
    border: 1px solid rgba(255, 255, 255, 0.2);   
}

input[type=time] 
{
 height: var(--line-height);
 font-family: "roboto", "segoe ui";
 font-size: 1rem;
 border: 0.0625rem solid #a9a9a9;
 box-sizing: border-box;
 padding-left: 0.285rem; 
}

input[readonly=readonly],
input[readonly=readonly]:focus,
input[type=text]:disabled,
input[type=time]:disabled,
textarea:disabled  
{
 background-color: #BDBDBD;
 color: #fff;
}

input.nospinner::-webkit-outer-spin-button,
input.nospinner::-webkit-inner-spin-button 
{
 -webkit-appearance: none;
 margin: 0;
}

/* /\ /\  TEXTBOX(INPUT)  /\ /\ */

/* \/ \/  TEXTAREA  \/ \/ */ 
textarea 
{  
 font-family: "roboto", "segoe ui";
 font-size: 1rem;
 width: 100%; 
 background-color: rgba(40,40,40, 0.95);
 color: whitesmoke;
 border: 1px solid rgba(255, 255, 255, 0.2);  
 resize: none;
}
textarea:focus
{
 outline: none;   
}

/* /\ /\  TEXTAREA  /\ /\ */

/* \/ \/  INPUT RANGE  \/ \/ */ 
input[type="range"] 
{
 -webkit-appearance: none;
 appearance: none;
 background: transparent;
 cursor: pointer;
}

/* \/ \/ CHROME OR EDGE ONLY \/ \/ */    
input[type="range"]::-webkit-slider-runnable-track 
{
 height: 9px;
 border-radius: 4.5px;
 background-color: var(--primary-colour-900);      
}
   
input[type="range"]::-webkit-slider-thumb 
{
 -webkit-appearance: none;
 appearance: none;    
 margin-top: -3px; 
 height: 15px;
 width: 15px;
 border-radius: 50%;
 background-color: var(--primary-colour-500);  
}
    
input[type="range"]:focus::-webkit-slider-thumb 
{
 background-color: var(--primary-colour-200); 
}
/* /\ /\ CHROME OR EDGE ONLY /\ /\ */ 

/* \/ \/ FIREFOX ONLY \/ \/ */    
input[type="range"]::-moz-range-track 
{
 height: 9px;
 border-radius: 4.5px;
 background-color: var(--primary-colour-900); 
}
 
input[type="range"]::-moz-range-thumb 
{ 
 margin-top: -3px; 
 height: 15px;
 width: 15px;
 border: none;    
 border-radius: 50%;
 background-color: var(--primary-colour-500); 
}
    
input[type="range"]:focus::-moz-range-thumb 
{
 background-color: var(--primary-colour-200); 
}   
/* /\ /\ FIREFOX ONLY /\ /\ */ 

/* /\ /\  INPUT RANGE  /\ /\ */


/* \/ \/  COMBOBOX  \/ \/ */
.combobox 
{
 position: relative;
 display: flex;
 align-items: center;    
 box-sizing: border-box;
 width: 100%;
 height: var(--line-height);
 cursor: pointer;
 background-color: var(--primary-colour-500);
}

.combobox > span 
{
 padding: 0 2.5rem 0 0.250rem;   
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
 user-select: none;	
 color: #fff;
 text-transform: uppercase;
 line-height: var(--line-height);
 height: var(--line-height);
 width: 100%;    
}

.combobox span[data-disabled="true"] 
{
 background-color: var(--primary-colour-disabled);
 color: var(--primary-colour-disabled-text);
 width: 100%;
}

.combobox input 
{
  display: none;
  outline: 0;
  width: 100%;
  padding: 0.25rem 1rem;
}

.combobox > span:after 
{
 font-family: "Font Awesome 6 Free";
 content: '\f078';
 position: absolute;
 right: 1rem;
 float: right;
 margin-top: 1px;
}

.combobox span > .icon 
{
 content: '';
}

.combobox ul 
{
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: inherit;
  font-size: inherit;
  /*background-color: blue;   */ 
}

.combobox ul.list-full-text-width
{
 width: auto !important;
}

.combobox ul li 
{
 height: var(--line-height);
 line-height: var(--line-height);    
 padding: 0 0.250rem;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 font-size: inherit;
/* background-color: var(--primary-colour-500);
 font-size: 1rem;*/
/* display: flex;*/
 align-items: center;
 text-transform: uppercase;
}

.combobox ul.actived
{
 position: fixed;
 display: block;
 left: 0;
 top: inherit;
 color: #fff;
 overflow: hidden;
 overflow-y: auto;
 max-height: calc(var(--line-height) * 7);
 z-index : 2;
}

.combobox ul li:nth-of-type(2n+1) 
{
 background-color: var(--primary-colour-700);
}

.combobox ul li:nth-of-type(2n+2) 
{
 background-color: var(--primary-colour-600);
}

.combobox ul li:hover 
{
 background-color: var(--complementry-colour-900);
 color: var(--complementry-colour-300);
}

.combobox ul li.selected 
{
 background: var(--primary-colour-300);
 color: var(--primary-colour-dark);
 font-weight: 700;
}
/* /\ /\  COMBOBOX  /\ /\ */