/*
  control.css
  skin: TheLastDreamDark
  Styles for all the controls of the IW framework
  $Id: control.css,v 1.9 2026/05/22 09:06:56 dcaporale Exp $
*/

/*
 * CSS for autocomplete LOOKUP control (copied from combo)
 */
/* Selected element of the list */
.autocomplete-selected {
  background-color: var(--md-primary-dark);
  color: var(--autocomplete-selected-color);
}

/* Aspect of the element list */
.autocomplete-suggestion {
  font: bold 12px "Open Sans", sans-serif;
  height: 16px;
  line-height: 16px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  padding-left: 5px; 
}

/* Properties of box */
.autocomplete-suggestions {
  background: var(--autocomplete-suggestion-bg);
  border: var(--autocomplete-suggestion-border);
  color: var(--autocomplete-suggestion-color);
  background-color: var(--textsearch-input-focus-bg);
  left: 0;
  margin: 0;
  overflow: auto;
  padding: 0; 
}

/*
 * CSS for CALCULATOR control
 */
 
/* background */
.calc {
  background-color: var(--surface-3);
  padding: 3px; 
}

/* display */
.calc .calculator-result {
  background-color: var(--surface-2);
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  color: var(--main-text-color) !important;
  font: bold 20px "Roboto Mono", monospace; 
}

/* Buttons */
.iwBtnImg {
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    width: 25px;
    transition: all ease-in 200ms;
  
}

.subtitle .iwBtnImg {
  filter: brightness(170%);
    
}

.subtitle .iwBtnImg:hover{
  filter:  brightness(170%);
    
}

.iwBtnImg:hover{
    transform: scale(1.1);
    border-radius: 8px;
}

.subtitle .iwBtnImg{
    margin:2px;
}

.calc .calculator-row button {
  background-color: var(--surface-2);
  border: 1px solid var(--surface-1-lighter);
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  color: var(--calculator-text-color) ;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  height: 23px;
  margin: 0px 1px 1px 0px;
  text-align: center;
  width: 35px; 
}

/* Buttons key down*/
.calc .calculator-row .calculator-key-down {
  background-color: var(--calculator-pressed-button-background);
  border: none;
  color: var(--main-text-color) ;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  height: 23px;
  margin: 1px 0px 0px 1px;
  text-align: center;
  width: 35px; 
}

/* On alt key legend*/
.calc .calculator-keystroke {
  color: var(--calculator-alternate-color);
  background: var(--md-primary-dark);
  font: bold 11px "Open Sans", sans-serif;
  padding: 2px; 
}

.calculator-popup {
  border: none !important;
  border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -webkit-border-radius: 2px !important; 
}

/*
 * CSS for CLUETIP tootip control
 */
 .cluetip-default{
    border: var(--cluetip-default-border);
    background-color: var(--cluetip-default-background);
}

.cluetip-default .ui-cluetip-header {
  background-color: var(--cluetip-ui);
  color: var(--main-text-color) ;
  font-weight: bold !important;
  letter-spacing: 1px;
  padding: 0px !important;
  text-align: center; 
  border-radius: 0%;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding-top: 1% !important;
  padding-bottom: 1% !important;
  display:flex;
  justify-content: space-between;
  padding-left: 50px !important;
  padding-right: 50px !important;
}

.cluetip-default,
.cluetip-default .cluetip-outer {
    border-radius: 8px;
    border-top-left-radius:3px ;
    padding: 0px !important;
}

.cluetip-default .info {
    border-radius: 0%;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border: none;
    background-color: var(--cluetip-info-bg);
    color:var(--main-text-color);
    font-weight: 100;
    font-size: medium;
}

.cluetip-arrows {
    display: none;
    position: absolute;
    top: 0px !important;
    left: -19px;
    width: 30px !important;
    height: 26px;
    background-repeat: no-repeat;
    background-position: 0 0;
    border-width: 0;
}

div.clue-right-default .cluetip-arrows {
    background-repeat: no-repeat;
}

.cluetip-default .error > p > input {
    left: 220px !important;
}

/* CLUETIP confirm button */
input.jqmClose{
    color: var(--main-text-color);
    border: none;
    background-color: var(--button-save-background);
    border-radius: 10px;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
}

/* INFO CLUETIP confirm button */
div.info > p > input.jqmClose{
    color: var(--main-text-color);
    border: none;
    background-color: var(--button-save-background);
    border-radius: 10px;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
}

/*
 * CSS for COMBO control
 */
/* Text field input */

.combo input {
  height: 17px;
  left: 0;
  margin: 0 0 0 0;
  padding: 10px 7px !important;
  top: 0;
  text-align: left;
  vertical-align: middle; 
}

.combo input:focus{
  margin-bottom: 0 !important;  
  box-shadow: none !important;
}

/* Trigger image */
.combo img {
  background: url('/grp/iw/img/skins/TheLastDreamDark/controls/combo/trigger.png') no-repeat 0 0;
  border: 0;
  position: absolute;
  height: 21px;
  top: 10px;
  width: 18px; 
}

/* Aspect of the element list */
.combo li {
  color: var(--main-text-color);
  font: 12px "Open Sans", sans-serif;
  height: 16px;
  line-height: 16px;
  margin: 0;
  text-align: left;
  padding: 0;
  padding:0px 4px 7px 0px; 
}

/* Selected element of the list */
.combo li.active {
  background-color: var(--md-primary-dark);
  color: var(--main-text-color); 
}

/* Properties of list box */
div.combo div {
  background: var(--surface-1);
  border:none !important;
  left: 0;
  width:233px !important;
  margin: 0;
  padding: 0;
}

/*

    CSS variables for advanced multiselect

*/
:root {
    /* Border color */
    --surface-border : #818181;

    /* Dropdown text color */
    --text-dropdown: #E0E0E0;
}

/* Not descr to not beak the tree in mapping */
input.text:not([id*="descr"]),
input.password,
input.textsearch,
input.info,
input.warning,
input.error,
input.password,
textarea,
select {
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-family: "Roboto", "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin: 1px;
  padding: 6px 10px;
  line-height: 1.4;
  outline: none;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

select {
  background-color: var(--input-backgroud-1);
  color: var(--input-text);
  border: 1px solid var( --input-select-border);
  border-radius: 6px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 6px 34px 6px 10px; /* space for the icon */
  line-height: 1.4;
  outline: none;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}


.resizable select {
  text-align: left;
  font: 14px "Roboto", sans-serif; 
  padding: 10px 20px !important;
}

input.text:focus,
textarea:focus,
select:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--select-focus-box-shadow);
}

input.text:hover:not(:focus),
textarea:hover,
select:hover:not(:focus) {
  background-color: var(--input-select-bg-hover) !important;
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


input.text{
  border: var(--input-text-border) !important; 
}

/* Placeholder  */
input.text::placeholder {
  color: var(--input-text-placeholder-color) !important; /* Colore "On Surface Variant" */
}

/* STATE OF FOCUS (When clicking inside) */
input.text:focus {
  border-color: var(--md-primary-dark) !important; /* Colore "Primary" (Viola M3) */
}

/*
 
  CSS for DATE control

*/
/* Main frame */
.datepick {
  background-color: var(--surface-3);
  font-family: "Open Sans", sans-serif;
  padding: 0px 6px 0px 6px; 
}

/* Head and footer navigation */
.datepick-nav,
.datepick-ctrl {
  background-color:  var(--surface-3);
  float: left;
  border: none !important;
  font-size: 90%;
  font-weight: bold;
  width: 100%; 
}

/* Link text */
.datepick a {
  color: var(--main-text-color);
  text-decoration: none; }

.datepick a.datepick-disabled {
  color: var(--datepick-disabled-color);
  cursor: auto; 
}

/* Head and footer on over link */
.datepick-cmd{
  padding-top: 5px;
}

.datepick-cmd:hover {
  background-color: var(--md-primary-dark);
  color: var(--main-text-color); 
}

.datepick-ctrl .datepick-cmd:hover {
  background-color: var(--md-primary-dark);
  color: var(--main-text-color); 
}

/* Calendar container */
.datepick a:link {
  color: var(--main-text-color) !important; 
}

.datepick-month {
  float: left;
  text-align: center;
  width: 15em; 
}

/* Month header */
.datepick-month-header,
.datepick-month-header select,
.datepick-month-header input {
  background-color: var(--surface-2);
  border: none !important;
  color: var(--main-text-color);
  height: 1.9em; 
}

/* datepick select */
.datepick-month-year{
  border: none !important;
  padding: 0px  !important;
  background-color: var(--surface-2) !important;
  margin: 0px !important;
  height: 1.9em !important;
  font-size: 13px !important;
  border-radius: 0px !important;
}
.datepick-month-year:focus{
  box-shadow: none;
}

/* Dow header */
.datepick-month th,
.datepick-month th a {
  background-color: var(--md-primary-dark);
  border: var(--datepick-header-border);
  color: var(--main-text-color);
  font-size: 10px;
  font-style: italic; 
}

/* Dow and Calendar division */
.datepick-month thead {
  border-bottom: var(--datepick-division-border);
}

/* Days grid */
.datepick-month td {
  background-color: var(--datepick-grid-background);
  border:var(--datepick-grid-border);
}

/* Selectable days */
.datepick-month a {
  background-color: var(--datepick-selectable-day-bg);
  color: var(--datepick-selecteable-day-color) !important;
  display: block;
  padding: 0.125em 0em;
  text-decoration: none;
  width: 100%;
}

/* Un-selectable days */
.datepick-month td span {
  color: var(--datepick-unselectable-day-bg);
}

.datepick-month td .datepick-other-month {
  background-color: var(--main-text-color);
}

/* Week-end cells */
.datepick-month td .datepick-weekend {
  background-color: var(--datepick-weekend-bg);
  color: var(--main-text-color) !important; 
}

/* Selected day */
.datepick-month td .datepick-selected {
  background-color: var(--datepick-selected-day-bg);
  color: var(--main-text-color) ; 
}

/* Today */
.datepick-month td .datepick-today {
  background-color: var(--datepick-today-bg); 
}

/* Day highlight */
.datepick-month td .datepick-highlight {
  background-color: var(--md-primary-dark);
  color: var(--datepick-highlight-color); 
}

/* Week column */
.datepick-month th.datepick-week {
  background-color: var(--surface-1);
  color: var(--main-text-color) ;
  font-style: italic; }

.datepick-month td.datepick-week {
  background-color: var(--surface-1) !important;
}
 
.datepick-month td.datepick-week * {
  background-color: var(--surface-1) !important;
  border: none;
  color: var(--main-text-color) ;
  font-size: 9px;
  font-style: italic;
  font-weight: bold; 
}

/*

    CSS for DIV message windows

*/
div.alert, div.error, div.info, div.warning {
  position: absolute;
  visibility: hidden;
  font: bold 14px "Roboto", sans-serif;
  margin: 0;
  background-position: 7px 50%;
  background-repeat: no-repeat;
  border-radius: 8px;
}

div.warning > p,
div.alert > p > input,
div.error > p > input{
  position: relative;
  display: flex;
  flex-direction: row;
}

div.warning > p > input,
div.info > p > input,
div.alert > p > input,
div.error > p > input {
  margin-left: 30px !important;
  padding: 6px 14px;
  min-height: 36px;
  color: var(--main-text-color) !important;
  border: none;
  border-radius: 8px;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 13px;
}

div.alert {
  border:2px solid var(--div-alert-background);
  background-color: var(--div-alert-background);
  background-image: url("/cgi-bin/gfx/getimage?RESOURCE=icons&TYPE=ic/message&IMAGE=alert");
  background-size: 40px 40px;
  color: var(--div-alert-color);
  padding: 17px 17px 17px 52px;
}

div.error {
  border: 2px solid var(--div-error-background);
  background-color: var(--div-error-background);
  background-image: url("/cgi-bin/gfx/getimage?RESOURCE=icons&TYPE=ic/message&IMAGE=error");
  background-size: 40px 40px;
  color: var(--div-error-color);
  padding: 17px 17px 17px 57px;
}

/* Used for info messages */
div.info {
  border: 2px solid var(--div-info-background);
  background-color: var(--div-info-background);
  background-image: url("/cgi-bin/gfx/getimage?RESOURCE=icons&TYPE=ic/message&IMAGE=info");
  background-size: 40px 40px;
  color: var(--surface-1-light);
  padding: 17px 17px 17px 57px;
}

/* container of the warning message */
div.warning {
  border: 2px solid var(--div-warning-background);
  background-color: var(--div-warning-background);
  background-image: url("/cgi-bin/gfx/getimage?RESOURCE=icons&TYPE=ic/message&IMAGE=warning");
  background-size: 40px 40px;
  color: var(--surface-1-light);
  padding: 17px 17px 17px 57px;
}

/*

    CSS for GROUPBOX control

*/
/* Group box square */
fieldset {
  background: var(--input-background-2) !important;
  border: 1px solid var(--fieldset-border-color) !important;
  padding: 10px; 
}

/* Legend style */
fieldset legend {
  background-color: var(--fieldset-legend-background)    ;
  color: var(--fieldset-legend-color) !important;
  font: bold 13px "Roboto", sans-serif;
  letter-spacing: 1px;
  margin: 0 5px;
  border-radius: 2px;
  padding: 4px 7px; 
}

/*

    CSS for INPUT controls
 
*/

/* Input fields and Buttons */
input.password,
input.text:not([id^="descr"]),
textarea,
select{
  color: var(--main-text-color) !important;
  background-color: var(--surface-1) !important;
  border-radius: 6px !important;
  border: 1px var(--input-backgroud-1) solid !important;
  font: 12px "Open Sans", sans-serif;
  padding: 10px ;
  outline: none; 
}

/* input fields with a wrong value */
input.error,
textarea.error,
select.error {
  background-color: var(--input-backgroud-2) !important;
  border: 1px var(--input-error-border) solid !important;
  color: var(--main-text-color) ;
  font: 12px "Roboto", sans-serif;
  outline: none; 
}

input.error:focus, textarea.error:focus, select.error:focus,
input.info:focus, textarea.info:focus, select.info:focus,
input.warning:focus, textarea.warning:focus, select.warning:focus {
  background-color: var(--input-backgroud-2) !important; 
}

/* input fields with a value that cause a success */
input.info,
textarea.info,
select.info {
  background-color: var(--input-backgroud-2) !important;
  border: 1px var(--input-info-border) solid !important;
  font: 12px "Roboto", sans-serif;
  color: var(--main-text-color) ;
  outline: none; 
}

/* 

    Style for input on focus event 

*/

/* password field */
input.password {
  position: relative;
  border-bottom: 2px solid transparent;
  outline: none;
}

input.password:focus {
  outline: none;
}

.loginRow input{
  padding: 5px 6px !important;
  margin-top: 3px;
  margin-bottom: 3px;
}

.loginSubmit{
  padding: 8px 16px !important;
  font-size: 12px !important;
  margin:0px !important;
  text-transform: none !important;
  min-height: 0px !important;
}

/* rest of focuses */
input.text:focus,
textarea:focus,
select:focus {
  color: var(--main-text-color) !important;
  outline: none; 
}

/* input fields with a value that cause a warning */
input.warning,
textarea.warning,
select.warning {
  background-color: var(--input-warning-bg) !important;
  border: 1px var(--input-warning-border) solid !important;
  font: 12px "Roboto", sans-serif;
  color: var(--main-text-color) ;
  outline: none; 
}

/*

    Input type Submit style

 */
input.button,
input.submit,
input.reset,
.loginSubmit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  min-height: 40px; 
  color: var(--input-submit-color) ;
  border: none !important;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--input-submit-box-shadow);      
  margin: 5px 8px !important;

}
/* generic buttons handler */
input.button{
  background-color: var(--button-save-background);
}

input[type="file"] {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: var(--file-input-color);
}

input[type="file"]::file-selector-button {
  background: var(--file-input-bg);
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--file-input-color);
  cursor: pointer;
  transition: background 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
  background:  var(--file-input-hover-bg);
}

[class*="iwBtnPanel"] {
  margin: 1px;
}

.iwBtnPanel-modify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  min-height: 36px;
  color: var(--main-text-color) !important;
  border: none;
  border-radius: 8px;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: var(--button-modify-shadow); 
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}

.iwBtnPanel-delete {
  background-color: var(--button-delete-background) !important;
  border: none !important;
}
.iwBtnPanel-delete:hover {
  background-color: var(--button-delete-background-hover) !important;
  color: var(--button-delete-color-hover) !important;
  box-shadow: var(--button-delete-shadow-color-hover) var(--button-shadow-style) !important;
}

input.button:not(.iwBtnPanel-modify,.iwBtnPanel-delet):hover:enabled,
input.submit:not(.iwBtnPanel-modify,.iwBtnPanel-delete):hover:enabled {
  box-shadow: inset -150px 0 0 0 #244b6e,
              inset 150px 0 0 0 #244b6e;
}

input.button:hover:enabled,
input.submit:hover:enabled,
input.reset:hover:enabled {
  box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.24),
      0 2px 4px rgba(0, 0, 0, 0.18);
}

input.button:active:enabled,
input.submit:active:enabled,
input.reset:active:enabled {
  box-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.14);
  transform: translateY(1px);
}

/* 
  
    SAVE BUTTON

*/
.iwBtnPanel-save, .submit{
  background-color: var(--button-save-background) !important;
  color: var(--main-text-color) !important;
}

.iwBtnPanel-save:hover:enabled, .submit:hover:enabled {
  background-color: var(--button-save-hover) !important;
  box-shadow: var(--button-save-hover-shadow) !important;      
}

.iwBtnPanel-save:active:enabled, .submit:active:enabled {
  background-color: var(--button-save-active) !important;
}

.iwBtnPanel-save:focus-visible, .submit:focus-visible {
  outline: none;
  box-shadow:var(--button-save-focus-shadow) !important;
}

/* 

    MODIFY/EDIT BUTTON

*/
.iwBtnPanel-modify {
  background-color: var(--button-modify-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-modify:hover:enabled {
  background-color: var(--button-modify-hover) !important;
  box-shadow: var(--button-modify-hover-shadow)  !important;
}

.iwBtnPanel-modify:active:enabled {
  background-color: var(--button-modify-active) !important;
}

.iwBtnPanel-modify:focus-visible {
  outline: none;
  box-shadow:var(--button-modify-focus-shadow) !important;
}

/* 

    DELETE BUTTON

*/
.iwBtnPanel-delete {
  background-color: var(--button-delete-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-delete:hover:enabled {
  background-color: var(--button-delete-background-hover) !important;
  color: var(--button-delete-color-hover) !important;
  box-shadow: var(--button-delete-shadow-hover)!important;
}

.iwBtnPanel-delete:active:enabled {
  background-color: var(--button-delete-active) !important;
}

.iwBtnPanel-delete:focus-visible {
  outline: none;
  box-shadow: var(--button-delete-focus-shadow) !important;
}

/*  

   RESET BUTTON (Secondary)

*/
.iwBtnPanel-reset, .reset{
  background-color: var(--button-background-main) !important;
  color: var(--button-reset-color) !important;
  border: 1px solid var(--button-reset-border) !important;
  box-shadow: none !important;
}

.iwBtnPanel-reset:hover:enabled, .reset:hover:enabled {
  background-color: var(--button-reset-hover-bg) !important;
  border-color: var(--button-reset-color) !important;
  box-shadow: none !important;
}

.iwBtnPanel-reset:active:enabled, .reset:active:enabled {
  background-color:var(--button-reset-active-bg)  !important;
}

.iwBtnPanel-reset:focus-visible, .reset:focus-visible {
  outline: none;
  border-color: var(--button-reset-color) !important;
  box-shadow: var(--button-reset-focus-shadow) !important;
}

/* 

   ADD/NEW BUTTON

*/
.iwBtnPanel-add,
.iwBtnPanel-new {
  background-color: var(--button-add-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-add:hover:enabled,
.iwBtnPanel-new:hover:enabled {
  background-color: var(--button-add-hover) !important;
  box-shadow: var(--button-add-hover-shadow) !important;
}

.iwBtnPanel-add:active:enabled,
.iwBtnPanel-new:active:enabled {
  background-color: var(--button-add-active) !important;
}

.iwBtnPanel-add:focus-visible,
.iwBtnPanel-new:focus-visible {
  outline: none;
  box-shadow: var(--button-add-focus-shadow) !important;
}

/* 

   VIEW/SELECT BUTTON

*/
.iwBtnPanel-view,
.iwBtnPanel-select {
  background-color: var(--button-view-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-view:hover:enabled,
.iwBtnPanel-select:hover:enabled {
  background-color: var(--button-view-hover) !important;
  box-shadow: var(--button-view-hover-shadow)  !important;
}

.iwBtnPanel-view:active:enabled,
.iwBtnPanel-select:active:enabled {
  background-color: var(--button-view-active) !important;
}

.iwBtnPanel-view:focus-visible,
.iwBtnPanel-select:focus-visible {
  outline: none;
  box-shadow: var(--button-view-focus-shadow) !important;
}

/* 

   PRINT BUTTON

*/
.iwBtnPanel-print {
  background-color: var(--button-print-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-print:hover:enabled {
  background-color: var(--button-print-hover) !important;
  box-shadow: var(--button-print-hover-shadow) !important;
}

.iwBtnPanel-print:active:enabled {
  background-color: var(--button-print-active) !important;
}

.iwBtnPanel-print:focus-visible {
  outline: none;
  box-shadow: var(--button-print-focus-shadow) !important;
}

/* 

   LINK BUTTON

*/
.iwBtnPanel-link,.loginSubmit {
  background-color: var(--button-link-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-link:hover:enabled,.loginSubmit:hover:enabled {
  background-color: var(--button-link-hover) !important;
  box-shadow: var(--button-link-hover-shadow) !important;
}

.iwBtnPanel-link:active:enabled, .loginSubmit:active:enabled {
  background-color: var(--button-link-active) !important;
}

.iwBtnPanel-link:focus-visible,.loginSubmit:focus-visible {
  outline: none;
  box-shadow: var(--button-link-focus-shadow) !important;
}

/* 

   CONFIGURE BUTTON

*/
.iwBtnPanel-configure {
  background-color: var(--button-configure-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-configure:hover:enabled {
  background-color: var(--button-configure-hover) !important;
  box-shadow: var(--button-configure-hover-shadow)!important;
}

.iwBtnPanel-configure:active:enabled {
  background-color: var(--button-configure-active) !important;
}

.iwBtnPanel-configure:focus-visible {
  outline: none;
  box-shadow: var(--button-configure-focus-shadow) !important;
}

/* 

   COPY BUTTON

*/
.iwBtnPanel-copy {
  background-color: var(--button-copy-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-copy:hover:enabled {
  background-color: var(--button-copy-hover) !important;
  box-shadow: var(--button-copy-hover-shadow) !important;
}

.iwBtnPanel-copy:active:enabled {
  background-color: var(--button-copy-active) !important;
}

.iwBtnPanel-copy:focus-visible {
  outline: none;
  box-shadow: var(--button-copy-focus-shadow) !important;
}

/* 

   CONFIRM BUTTON

*/
.iwBtnPanel-confirm {
  background-color: var(--button-confirm-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-confirm:hover:enabled {
  background-color: var(--button-confirm-hover) !important;
  box-shadow: var(--button-confirm-hover-shadow) !important;
}

.iwBtnPanel-confirm:active:enabled {
  background-color: var(--button-confirm-active) !important;
}

.iwBtnPanel-confirm:focus-visible {
  outline: none;
  box-shadow: var(--button-confirm-focus-shadow) !important;
}

/* 

   BACK BUTTON (Outlined)

*/
.iwBtnPanel-back {
  background-color: var(--button-background-main) !important;
  color: var(--button-back-color) !important;
  border: 1px solid var(--button-back-border) !important;
  box-shadow: none !important;
}

.iwBtnPanel-back:hover:enabled {
  background-color: var(--button-back-hover-bg) !important;
  border-color: var(--button-back-color) !important;
  box-shadow: none !important;
}

.iwBtnPanel-back:active:enabled {
  background-color: var(--button-back-active-bg)  !important;
}

.iwBtnPanel-back:focus-visible {
  outline: none;
  border-color: var(--button-back-color) !important;
  box-shadow: var(--button-back-focus-shadow) !important;
}

/* 

   CLOSE BUTTON (Outlined)

*/
.iwBtnPanel-close {
  background-color: var(--button-background-main) !important;
  color: var(--button-close-color) !important;
  border: 1px solid var(--button-close-border) !important;
  box-shadow: none !important;
}

.iwBtnPanel-close:hover:enabled {
  background-color: var(--button-close-hover-bg) !important;
  border-color: var(--button-close-color) !important;
  box-shadow: none !important;
}

.iwBtnPanel-close:active:enabled {
  background-color: var(--button-close-active-bg)  !important;
}

.iwBtnPanel-close:focus-visible {
  outline: none;
  border-color: var(--button-close-color) !important;
  box-shadow: var(--button-close-focus-shadow)  !important;
}

/* 

   STEP BUTTON

*/
.iwBtnPanel-step {
  background-color: var(--button-background-main) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-step:hover:enabled {
  background-color: var(--button-step-hover) !important;
  box-shadow:var(--button-step-hover-shadow) !important;
}

.iwBtnPanel-step:active:enabled {
  background-color: var(--button-step-active) !important;
}

.iwBtnPanel-step:focus-visible {
  outline: none;
  box-shadow: var(--button-step-focus-shadow) !important;
}

/* 

   SUBMIT BUTTON (Generic/Primary)

*/
.iwBtnPanel-submit {
  background-color: var(--button-primary-background) !important;
  color: var(--main-text-color) !important;
  border: none !important;
}

.iwBtnPanel-submit:hover:enabled {
  background-color: var(--button-primary-hover) !important;
  box-shadow: var(--input-submit-shadow-hover) !important;
}

.iwBtnPanel-submit:active:enabled {
  background-color: var(--button-primary-active) !important;
}

.iwBtnPanel-submit:focus-visible {
  outline: none;
  box-shadow: var(--input-submit-shadow-focus) !important;
}

/* 

   HIDDEN BUTTON

*/
.iwBtnPanel-hidden {
  display: none !important;
}

/* Manage disabled button state */
input.button:disabled, input.submit:disabled, input.reset:disabled {
  opacity: 0.6;
  cursor: not-allowed; 
}

/*

    CSS for TinyMCE Text Editor

*/

.iwSkin table.mceLayout tr.mceFirst td {
  border-top:var(--mce-border) ;
}

.iwSkin .mceIframeContainer {
  border-top: var(--mce-border);
  border-bottom: var(--mce-border);
}

.iwSkin table.mceLayout tr.mceLast td {
  border-bottom: var(--mce-border);
}

.mceLayout {
  border: var(--mce-border) !important;
}

.mceToolbar, .mceToolbar table {
  background-color: var(--surface-2) !important; 
}

.mceSeparator {
  background: none !important;
  background-color: var(--surface-2) !important; 
}

.mceStatusbar {
  background-color: var(--surface-2) !important;
  color: var(--main-text-color) !important; 
}

.mceStatusbar * {
  color: var(--main-text-color) !important; 
}

.TinyMCE-view a {
  color: var(--mce-a-color);
}
 .TinyMCE-view, .TinyMCE-view * {
    background: transparent !important;
} 

[BGCOLOR="white"] {
    background-color: transparent !important;
}

input.select2-search__field {
    border: none !important;
}


/*

    Select with autocomplete

*/
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border:none ;
  text-align: left;
  padding: 10px 0;
  border-radius: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.select2-container--default .select2-search--dropdown {
  background-color: var(--surface-1); 
  padding: 0 8px 4px  0 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--surface-1);
  border: var(--select-2-border); 
}

.select2-dropdown {
  background-color: var(--surface-1) !important;
  text-align: left;
  border: none !important;
  padding: 6px 0px 1px 10px;
}

.select2-search__field:focus {
  background-color: var(--surface-2) !important;
  color: var(--main-text-color) !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  box-shadow: var(--select-2-shadow);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--main-text-color) ;
  font: 14px "Roboto", sans-serif;
  line-height: 19px;
  text-shadow: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--main-text-color) transparent transparent transparent;
}

.select2-selection__arrow{
  top:11px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--main-text-color) transparent;
}

.select2-results__option[aria-selected] {
  padding: 10px 0;
  color: var(--main-text-color) ;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-selection--multiple .select2-selection__choice,.select2-selection,
option:checked {
  background-color: var(  --surface-1);
  color: var(--main-text-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--md-primary-dark);
  color: var(--main-text-color) ;
}

.select2-selection__clear,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--main-text-color) ;
}

.select2-selection__clear:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--md-primary);
}

.select2-container input{
  border-radius: 5px;
}

/*

    CSS for controls that have the RESIZE property

*/

/* Rules for the container table of the input field with the resizable feature enabled */
table {
  border-style: none !important; 
}

table.resizable {
  border: 1px solid transparent;
  border-radius: 6px;
  border-spacing: 0;
  padding: 0;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px; 
}

.resizable select{
  height: 40px !important;
}

table.resizable td {
  padding: 1px; }

/* Only for controls with BR at the end */
table.resizable + script + br {
  display: none; 
}

/*

    CSS for PAGER control

*/
table[id$=pager]  {
  border-spacing: 8px !important;
  background-color: transparent!important;
}

table[id^=pager]  {
  border-spacing: 8px !important;
  background-color: transparent !important;
}
 
/* Cells colors */
.current { 
  color: var(--main-text-color) ; 
  background-color: var( --table-subtitle-bg);
  border: none !important; 
  border-radius: 10%; 
  padding: 9px 10px; font: 15px "Roboto", sans-serif; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.current:hover{
  color: var(--pager-number-text-color-hover) !important;
  background-color: var(--pager-number-current-hover-background) !important;
}

.page {
  padding: 6px 6px;
  border: none !important;
  border-radius: 5px;
}
.page img{
  filter: brightness(3) !important;
}

.page_hover img{
  filter: brightness(100) !important;
}

.page_hover {
  background-color:var(--pager-number-hover-background) !important;
  border: none !important;
  padding: 6px 6px;
  border-radius: 5px;
  transform: translateY(-2px);
}

.page a.link{
  background-color:transparent !important;
}

.page_hover a::before{
  display: none !important;
}

.page_hover a.link:hover {
  color: var(--main-text-color) !important; 
}

.page_hover a{
  border: none !important;
  background-color: transparent !important;
}
 
/*

    CSS for POPUP windows

*/
/* Used for popup windows (Ex. File manager)*/
.popup {
  color: var(--popup-color);
  background-color: var(--popup-bg);
  border: var(--popup-border) !important;
  border-radius: 6px;
  box-shadow: var(--popup-shadow);
  font: bold 14px "Roboto", sans-serif;
  -moz-border-radius: 6px;
  -moz-box-shadow: var(--popup-shadow);
  -webkit-border-radius: 6px;
  -webkit-box-shadow: var(--popup-shadow); 
}

/* Popup window items */
.popupItem {
  color: var(--main-text-color);
  font: bold 14px "Roboto", sans-serif; 
}

.popupItem:hover {
  color: var(--main-text-color);
  font: bold 14px "Roboto", sans-serif; 
}

/* Popup window disabled items */
.popupItemDisabled {
  color: #90979d;
  font: bold 14px "Roboto", sans-serif; 
}


/*

    CSS for TREEVIEW control

*/
.TreeViewNormal {
  color: var(--main-text-color) ;
  font: 12px "Roboto", sans-serif;
  margin: 0;
  padding: 0; 
}

.TreeViewSelected {
  background-color: var(--md-primary-dark);
  border: none !important;
  border-radius: 2px;
  color: var(--main-text-color);
  font: bold 14px "Roboto", sans-serif;
  letter-spacing: 1px;
  margin: 0;
  padding: 4px 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:not(.checkbox-round *),input.radio {
  margin: 5px 5px !important; 
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  width: 1.15em;
  height: 1.15em;
  border: var(--radio-border);
  border-radius: 0.2em;
  background-color: var(--radio-bg);
  background-size: 0;
  box-shadow: none !important;
  transition: all 0.15s;
  vertical-align: middle;
  cursor: pointer;
  background: white var(--checkbox-check-url) no-repeat center; 
}

input.radio{
  width: 1em !important;
  height: 1em !important;
  border-radius:50% !important;
}

.checkbox:checked,
input.radio:checked {
  background-color: var(--checkbox-bg-color);
  border-color: var(--checkbox-bg-color);
}

.checkbox:focus-visible,
input.radio:focus-visible {
  box-shadow: 0 0 0 2px var(--checkbox-focus-ring);
}

.checkbox-round div {
  background: var(--radio-bg-2);
}

.checkbox-round label {
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}

.checkbox-round input[type="checkbox"]:checked + label + div {
  background: var(--checkbox-checked-bg);
}

.checkbox-slide {
  background: var(--checkbox-slide-bg);
}

/*

    Miscellaneous

*/
.MultiselTable .label {
  color: var(--main-text-color) !important; }

.MultiselTable tr {
  background: none !important; }

.MultiselFrom option:checked,.MultiselFrom option:checked{
  background-color: var(--md-primary-dark);
}
select.MultiselFrom option{
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
} 
select.MultiselTo option{
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.MultiselFrom, .MultiselTo {
  border: solid #222 1px !important;
  padding: 15px 0px 5px 5px;
}

:focus {
  outline: none;
}

/*

    CSS for TABCONTROL control

*/
.tabcel {
  background-color:var(--tabcontrol-bg) ;
}

.tablink {
  color: var(--main-text-color) !important;
  font: bold 12px "Roboto", sans-serif; 
}

.tabsel, .tabsel:hover {
  color: var(--main-text-color) !important;
  font: bold 13px "Roboto", sans-serif;
  text-transform: uppercase !important;
  text-transform: uppercase;
}

a.tablink:link {
  color: var(--tabcontrol-link-color) !important;
  text-decoration: none !important; 
}

a.tablink:visited {
  color: var(--tabcontrol-link-visited-color); 
}

a.tablink:active {
  color: var(--tabcontrol-link-active-color); 
}

a.tablink:hover {
  color: var(--main-text-color) !important; 
}

/*  Container principale delle tab */
.tabcel {
  background-color: var(--tabcontrol-container-bg);
  padding: 0;
}

/* Link delle tab non selezionate */
.tablink {
  color: var(--tabcontrol-unselected-link-control)  !important;
  font: 500 12px "Roboto", sans-serif;
  letter-spacing: 0.5px;
  padding: 12px 20px;
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  border-bottom: 2px solid transparent;
  text-transform: uppercase !important;
}

table[id^="TOC"] , td[id^="TabMulti"]{
  background-color: var(--tabmulti-bg) !important;
}

/* Selected tab */
#TOC
.tabsel,
#TOC 
.tabsel:hover {
  text-align: center;
  color: var(--tabcontrol-selected-color) !important;
  font: 500 13px "Roboto", sans-serif;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  padding: 12px 20px  !important;
  display: inline-block;
  border-bottom: var(--tabcontrol-selected-border) !important;
  background-color: var(--tabcontrol-selected-bg) !important; 
   text-transform: uppercase;
}

/*

    Links states
 
*/
a.tablink:link {
  color: var(--tabcontrol-a-link-color) !important;
  text-decoration: none !important;
}

a.tablink:visited {
  color: var(--tabcontrol-a-link-visited-color);
}

a.tablink:active {
  color: var(--tabcontrol-a-link-active-color);
}

a.tablink:hover {
  color: var(--tabcontrol-a-link-hover-color) !important;
  background-color: var(--tabcontrol-a-link-hover-bg);
  height: 100%;
  border-bottom: var(--tabcontrol-a-link-hover-border);
}


#TextLayerBoxNew input[type="button"] {
  width: 200px !important;
}

#cluetip-content-LayerBoxNew input[type="button"] {
  width: 200px !important;
}

#cluetip-content-LayerBoxCopy > div > input[class="button"] {
  width: 200px !important;
}

.cluetip-title {
  margin-top : 0px !important;
}

.ui-cluetip-header {
  margin-top : 0px !important;
}

#iwPromptText{
  margin-top: 15px !important;
  background-color: var(--md-surface) !important;
}