/* Цвет сетки в режиме редактирования */
gridster .gridster-column {
  border-left: 1px solid #ffffff87;
  border-right: 1px solid #ffffff87;
}
gridster .gridster-row {
    border-top: 1px solid #ffffff87;
    border-bottom: 1px solid #ffffff87;
}

/* Общие настройки */
.content app-dashboard {/* Фон проекта*/
background: rgb(251,254,176);
background: linear-gradient(170deg, rgba(251,254,176,1) 15%, rgba(253,202,97,1) 47%, rgba(255,148,14,1) 68%);

}
.content app-project-header .box,
.content app-layers-bar {
  --sl-color-secondary-900: #000; /* Цвет текста кнопок в шапке проекта: поделиться, экспорт и тд */
  --sl-input-color: #000; /* цвет текста во всех инпутах */
  background: #fff; /* фон панели слоев и шапки проекта */
  color: #000 !important; /* Цвет текста в наименовании проекта */
}
app-pages core-navigation .wrap{
  box-shadow: none !important; /* Убрать тень под шапкой модуля */
}

/* скрытие шапки модуля: логотип, кнопки Проекты, Виджеты и тд */
core-navigation {
  // display: none; /* скрыть шапку модуля */
}
core-content {
  // height: 100vh !important; /* чтобы при скрытии шапки модуля не образовывалась пустая полоска снизу */
}

/* Слои (панель снизу) */
.content app-layers-container .layer {
  color: #000; /* Цвет наименования неактивных слоев в панели снизу */
}
.content app-layers-container .layer:hover,
.content app-layers-container .layer.selected {
  color: #000; /* Цвет наименования активного слоя в панели снизу */
  background: #ff7f0090; /* Цвет фона активного слоя в панели снизу */
}

/* Фильтры на проекте */
.dx-texteditor.dx-editor-outlined {
  background: #FFFFFFB2; /* фон внутри фильтра */
  border: 2px solid #fff; /* размер и цвет рамки ГФ */
  border-radius: 4px; /* скругление рамки ГФ */
}
/* Наименование глобального фильтра */
sl-input::part(form-control-label), sl-select::part(form-control-label), sl-textarea::part(form-control-label), label {
  color: #000; /* Цвет */
  text-align: center; /* Выравнивание */
  font-weight: bold; /* Стиль */
}
/* Цвет иконки календаря */
.dx-dropdowneditor-icon {
  color: #000;
}
/* Цвет текста Выбрать в фильтре с селектором  */
.dx-placeholder {
  color: #000;
}
/* Цвет текста выбранного в фильтре с селектором значения */
.dx-tag-content {
  background-color: #0001;
  color: #000;
}
/* Цвет иконки "крестик" (сбросить весь фильтр) в фильтре с селектором */
.dx-show-clear-button .dx-icon-clear {
  color: #000;
}
/* Цвет иконки "крестик" (сбросить конкретный фильтр) в фильтре с селектором */
.dx-tag-remove-button::after, .dx-tag-remove-button::before {
  background: #000;
}

/*
.content app-grid-item gridster-item.show-tile {
  background: rgba(33, 41, 70, 0.8);
}
.content app-grid-item gridster-item.show-tile:hover {
  background: rgba(33, 41, 70, 1);
}
.content app-grid-item gridster-item {
  background: rgba(33, 41, 70, 0.2);
  border-radius: 4px;
}
*/

margin: 5px 5px 5px 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;

padding: 5px 5px 5px 5px; 
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;

width: 50px; 
height: 50px;

color: red; 
color: #000;

font-size: 14px; 
font-weight: bold;
font-style: italic;

background: ...;
background-color: #567895;
background-image: url(https://i.pinimg.com/originals/c7/8a/1f/c78a1ff26086681a2712a0477504b785.jpg);
background-position: 25% 75%;
background-repeat: no-repeat;
background-size: cover;

border: 4px solid red;
border-top: 4px solid red;
border-left: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;

div найти все <div></div>
.my-class найти все <div class="my-class">
#my-id найти <div id="my-id">

box-shadow: 10px 5px 5px red;