
ul {
	display: grid;
	columns: 5;
	-ms-grid-rows: 100px 10px 100px;
	-ms-grid-columns: 2fr 10px 2fr 10px 2fr;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
	list-style: none;
}

li {
	background-color: var(--tokens-panel-background);
	border-radius: 3px;
	padding: 20px;
	font-size: 14px;
	display: inline-block;
}

li:hover {
	background-color: var(--tokens-panel-hover);
	-webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.5);
	box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.tokens-pad * {
	color: var(--token-title-color);
}

.mat-error {
	margin-top: 5px;
}

.mat-button-toggle-group, .mat-button-toggle-standalone {
	display: contents !important;
	flex-direction: column !important;
}

.btn, .mat-button-toggle {
	text-transform: uppercase !important;
	padding: 0 !important;
}

.mat-button-toggle-checked {
	background-color: #0079b8 !important;
	color: white !important;
}

.modal-header {
	border-bottom: none;
	padding: 0 0 0 !important;
}

.active {
	color: var(--btn-color-hover) !important;
	background-color: var(--btn-background-hover) !important;
}

div#formAction > mat-form-field > input {
	color: #0079b8;
}

.my-mat-class {
	margin-top: 1rem;
}

/deep/ .my-mat-class .close-button {
	fill: #737373 !important;
}

/deep/ .my-mat-class .close-button:hover {
	fill: #c92100 !important;
}

/deep/ .tokenModal .modal-dialog {
	width: auto !important;
	min-width: 24rem !important;
	max-width: 65rem !important;
}

/deep/ .legend {
	color: #0079b8;
}

/deep/ .array-item {
	box-shadow: 0 3px 1px -2px rgba(110, 110, 110, 0.2), 0 2px 2px 0 rgba(128, 128, 128, 0.14), 0 1px 5px 0 rgba(161, 161, 161, 0.12) !important;
}

/*mat-form-field-appearance-standard mat-form-field-can-float ng-valid ng-touched ng-dirty*/
/*mat-form-field ng-tns-c6-12 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder ng-pristine ng-valid ng-touched*/
/*mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-valid ng-touched*/

.dapppage-row {
	margin-left: auto;
	margin-right: auto;
	max-width: 1104px;
}

::ng-deep .mat-raised-button.mat-primary {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-color);
	border-color: var(--btn-primary-bg);
	padding: 0 17px;
	cursor: pointer;
	display: inline-block;
	-webkit-appearance: none!important;
	border-radius: .15rem;
	/*border-radius: var(--clr-btn-border-radius, 0.15rem);*/
	border-width: .05rem;
	/*border-width: var(--clr-btn-border-width, 0.05rem);*/
	border-style: solid;
	min-width: 72px;
	max-width: 18rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 36px;
	/*line-height: var(--clr-btn-appearance-form-line-height, 1.8rem);*/
	letter-spacing: 1.44px;
	font-size: 12px;
	/*font-size: var(--clr-btn-appearance-form-font-size, 0.6rem);*/
	font-weight: 500;
	/*font-weight: var(--clr-btn-appearance-form-font-weight, 500);*/
	height: 36px;
}

::ng-deep .mat-raised-button.mat-primary:hover {
	background-color: var(--btn-primary-hover);
	border-color: var(--btn-primary-hover);
}

/*.mat-form-field-appearance-standard .mat-form-field-underline {*/
/*	background-color: rgba(0,0,0,.42);*/
/*}*/

/deep/ .tokenModal .mat-form-field-appearance-standard .mat-form-field-label {
	color:  var(--input-label);
}

/deep/ .tokenModal .mat-form-field.mat-focused .mat-form-field-label {
	color: var(--text-highlight-primary) !important;
}

/deep/ .tokenModal .mat-form-field-appearance-standard .mat-form-field-underline {
	background-color: var(--input-label) !important;
}

/deep/ .tokenModal .mat-form-field-wrapper .mat-form-field-ripple {
	background-color: var(--text-highlight-primary) !important;
}

/deep/ .tokenModal .mat-form-field-wrapper .mat-input-element {
	caret-color: var(--text-highlight)!important;
}

/deep/ .tokenModal .mat-form-field-wrapper .mat-form-field-autofill-control {
	color: var(--text-highlight) !important;
}

/deep/ .tokenModal .mat-form-field {
	padding: 0 20px 0 0 !important;
}
