/*
--------------------------------------------------------------------
Welcome to the 'inverse' theme template: For quick Estuary's interface customization, modify the colors below.
More advanced customization is available through CSS classes within this document.
--------------------------------------------------------------------
*/

:root {
/* sets the background color */
  --background-color: rgb(98, 221, 115);

/* seta the color of all text (except the buttons') and typically some borders*/
  --primary-color: black;

/* sets the background color of buttons and other borders (like the sequencer's borders)*/
  --secondary-color: rgb(77, 77, 77);

/* sets the color of things that appear temporarily */
  --transient-color: orange;
}

/*
--------------------------------------------------------------------
				advanced customization
--------------------------------------------------------------------
*/

  /*styles the background */
.background {
    background-color: var(--background-color);
	background-image:  linear-gradient(to bottom right, rgb(98, 221, 115), rgb(98, 205, 115));
	  }

/*styles the code font*/
.code-font {
	  font-family: 'Helvetica';
    font-size: 1em;
	  }

/* styles the fonts for the header, menus and labels */
.ui-font {
	font-family: 'Helvetica';
  font-size: 1em;
	}

/* styles the user-interface buttons */
.ui-buttons {
  color:var(--primary-color);
  background-color: transparent;
  cursor:pointer;
}

.ui-buttons:hover {
  background-color: var(--secondary-color);
}
/* styles the dropdown */
.ui-dropdownMenus{
	background-color: transparent;

}

.ui-dropdownMenus:focus {
  background-color: var(--background-color) !important;
}

/* styles the input boxes */

.ui-inputMenus{
  background-color: transparent;
  width: 3em;
}

.ui-inputMenus::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.ui-inputMenus:focus {
  background-color: var(--background-color) !important;
}

/* styles the primary borders (e.g. from dropdown menus)*/
.primary-borders {
	border-radius: 5px;
    border: 1px solid var(--primary-color);
}

/*styles other borders (e.g. from ui buttons and sequencer buttons)  */
.other-borders {
    border-radius: 5px;
    border: 1px solid var(--secondary-color);
    }
