@charset "utf-8";
div[data-block="accordion"] {
  margin: 15px 0 15px 0;
  border: 2px solid #e7e1e1;
  position:relative;
}
div[data-block="accordion"]::before{
  content:"";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background: #d5d3d38c;
}
div[data-block="accordion"]::after{
  content: "Аккордеон";
  position: absolute;left: 0;bottom: 0;right: 0;z-index: 3;overflow: hidden;font-size: 18px;color: #f9f9f9;text-align: right;text-shadow: 0px 0px 2px black; top: 50%;transform: translateY(-50%);height: 24px;padding-right: 5px;
} 
div[data-block="accordion"] div[data-block="item"] {
  margin: 5px;
}
table {
  margin: 15px 0 15px 0; 
}
div[data-block="cards"] {
  margin: 15px 0 15px 0;
  border: 2px solid #e7e1e1;
  position:relative;
  min-height: 40px;
}
div[data-block="cards"]::before{
  content:"";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background: #d5d3d38c;
}
div[data-block="cards"]::after{
  content: "Карточки";
  position: absolute;left: 0;bottom: 0;right: 0;z-index: 3;overflow: hidden;font-size: 18px;color: #f9f9f9;text-align: right;text-shadow: 0px 0px 2px black; top: 50%;transform: translateY(-50%);height: 24px;padding-right: 5px;
} 
div[data-block="carousel"],div[data-block="snippet"],div[data-block="card"] {
  margin: 5px;
}

div[data-block="slider"] {
  margin: 15px 0 15px 0;
  border: 2px solid #e7e1e1;
  position:relative;
  min-height: 40px;
}
div[data-block="slider"]::before{
  content:"";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background: #d5d3d38c;
}
div[data-block="slider"]::after{
  content: "Слайдер";
  position: absolute;left: 0;bottom: 0;right: 0;z-index: 3;overflow: hidden;font-size: 18px;color: #f9f9f9;text-align: right;text-shadow: 0px 0px 2px black; top: 50%;transform: translateY(-50%);height: 24px;padding-right: 5px;
}
div[data-block="slider"] img {
  max-width: 100%;
  height:auto;
  padding: 5px;
  box-sizing: border-box;
}
div[data-block="feed"] {
  margin: 15px 0 15px 0;
  border: 2px solid #e7e1e1;
  position:relative;
  min-height: 40px;
}
div[data-block="feed"]::before{
  content:"";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background: #d5d3d38c;
}
div[data-block="feed"]::after{
  content: "Читать также";
  position: absolute;left: 0;bottom: 0;right: 0;z-index: 3;overflow: hidden;font-size: 18px;color: #f9f9f9;text-align: right;text-shadow: 0px 0px 2px black; top: 50%;transform: translateY(-50%);height: 24px;padding-right: 5px;
} 
div[data-block="share"] {
  margin: 15px 0 15px 0;
  border: 2px solid #e7e1e1;
  position:relative;
  height: 40px;
}
div[data-block="share"]::before{
  content:"";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background: #d5d3d38c;
}
div[data-block="share"]::after{
  content: "Поделиться";
  position: absolute;left: 0;bottom: 0;right: 0;z-index: 3;overflow: hidden;font-size: 18px;color: #f9f9f9;text-align: right;text-shadow: 0px 0px 2px black; top: 50%;transform: translateY(-50%);height: 24px;padding-right: 5px;
}
div[data-block="widget-feedback"] {
  margin: 15px 0 15px 0;
  border: 2px solid #e7e1e1;
  position:relative;
  height: 40px;
}
div[data-block="widget-feedback"]::before{
  content:"";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background: #d5d3d38c;
}
div[data-block="widget-feedback"]::after{
  content: "Обратная связь";
  position: absolute;left: 0;bottom: 0;right: 0;z-index: 3;overflow: hidden;font-size: 18px;color: #f9f9f9;text-align: right;text-shadow: 0px 0px 2px black; top: 50%;transform: translateY(-50%);height: 24px;padding-right: 5px;
}
form[data-type="callback"] {
  margin: 15px 0 15px 0;
  border: 2px solid #e7e1e1;
  height: 40px;
  position:relative;
}
form[data-type="callback"]::before{
  content:"";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background: #d5d3d38c;
}
form[data-type="callback"]::after{
  content: "Форма обратной связи";
  position: absolute;left: 0;bottom: 0;right: 0;z-index: 3;overflow: hidden;font-size: 18px;color: #f9f9f9;text-align: right;text-shadow: 0px 0px 2px black; top: 50%;transform: translateY(-50%);height: 24px;padding-right: 5px;
}

button[formaction] {
  border: 2px solid #e7e1e1;
  height: 40px;
  width:100%;
  position:relative;
  background: transparent;
}
button[formaction]::before{
  content:"";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background: #d5d3d38c;
}
button[formaction]::after{
  content: "Кнопка";
  position: absolute;left: 0;bottom: 0;right: 0;z-index: 3;overflow: hidden;font-size: 18px;color: #f9f9f9;text-align: right;text-shadow: 0px 0px 2px black; top: 50%;transform: translateY(-50%);height: 24px;padding-right: 5px;
}