/*
Theme Name: True
Version: 1.01
Description: Шаблон для сайта терапевта Купянской Анастасии
Author: Лаборатория Продаж Абакан
Author URI: https://sales2lab.ru
*/

/* Reset and base styles  */
* {
	padding: 0px;
	margin: 0px;
	border: none;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Links */

a, a:link, a:visited  {
    text-decoration: none;
}

a:hover  {
    text-decoration: none;
}

/* Common */

aside, nav, footer, header, section, main {
	display: block;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: inherit;
	font-weight: inherit;
}

ul, ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

img, svg {
	max-width: 100%;
	height: auto;
}

address {
  font-style: normal;
}

/* Form */

input, textarea, button, select {
	font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #fff;
    padding: 7px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    max-width: 80%;
}

input::-ms-clear {
	display: none;
}

button, input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    cursor: pointer;
}

input:focus, input:active,
button:focus, button:active {
    outline: none;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

label {
	cursor: pointer;
}

legend {
	display: block;
}


html,
body {
    height: 100%;
}

.whole-wrapp {
    min-height: 100%;
}

body {
  margin: 0;
  font-family: Montserrat, sans-serif;
}

/* Main menue*/

a {
  color: #000;
}

/* header */

.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
  top: 0;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 22px;
  padding: 10px 20px;
  text-decoration: none;
  line-height: 1.2;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

#course_menue_item a {
    color: #89502F;
    padding: 20px 22px 15px 22px;
    text-align: right;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ nav .menu {
  max-height: 400px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 30px 22px 20px 22px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}


/* End of Main menue */

.footer {
	text-align: right;
	color: #fff;
	font-size: 16px;
    font-family: Din-pro;
    font-weight: 300;
}

.tbold {
    font-weight: bold;
}

.main-img {
    width: 100%;
    height: auto;
}

.sverdlovsk {
    font-family: Sverdlovsk;
}

.main-row {
    background-color: #c0cacc;
    padding-top: 150px;
    margin-right: 0!important;
    margin-left: 0!important;
}

.main_name {
    font-size: 72px;
}

.main_h1 {
    padding-top: 70px;
}


/* ====== Базовые переменные и типографика ====== */
:root{
  --bg-hero: #eae8e3;      /* мягкий серо-голубой как на скрине */
  --bg-muted: #f7f6f3;
  --text: #364354;
  --text-muted: #5c6063;
  --accent: #0f766e;       /* спокойный зелёно-бирюзовый для CTA */
  --telegram: #62758B;     /* брендовый цвет Telegram */
}

body{ color:var(--text); }

/* Отступы секций */
.section{ padding-block: clamp(35px, 6vw, 104px); }
.section-light{ background: #fbfbfb; }
.section-muted{ background: var(--bg-muted); }

/* Заголовки */
.section-title{
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.15;
  margin-bottom: 22px;
}

/* Ссылки */
a.link-underline{ text-decoration: underline; }

/* ====== HERO ====== */
.hero{
  background: var(--bg-hero);
  padding-top: 7vw;
}
.hero-title{
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  font-size: 75px;
  text-transform: uppercase;
}
.hero-lead{
  font-size: clamp(18px, 2vw, 22px);
  margin-top: 4px;
  margin-bottom: 33px;
}
.hero-desc{ color: var(--text-muted); }

/* Фото */
.hero-photo-wrap{ max-width: 520px; }
.hero-photo,
.about-photo{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
}

/* Декоративное кольцо на букве "С" (как в примере) */
.ring-letter{
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}
.ring-letter::before,
.ring-letter::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 0.92em; height: 0.92em;
  border-radius: 50%;
  border: 2px solid currentColor;
  pointer-events: none;
}
.ring-letter::after{
  width: 0.72em; height: 0.72em; /* внутреннее кольцо */
}

/* ====== Списки ====== */
.list-check,
.list-dash{
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.list-check li,
.list-dash li{
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .75rem;
}

.list-check li::before{
  content: "";
  position: absolute;
  left: 0; top: .2rem;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: inset 0 0 0 2px currentColor; /* двойной контур */
  opacity: .9;
}
.list-dash li::before{
  content: "—";
  position: absolute;
  left: 0; top: 0;
  width: 1.2rem;
  color: currentColor;
}

/* Карточки с тонкими линиями */
.card-lines{
  padding: 18px 20px;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid #62758B;
  background: #fff;
  border-radius: 10px;
}

.card-lines h3 {
    font-weight: 600;
}
 
/* ====== Кнопки ====== */
.btn{
  padding: 12px 18px;
  border-radius: 15px;
  font-weight: 500;
  letter-spacing: .2px;
}
.btn-telegram{
  background: var(--telegram);
  border-color: var(--telegram);
  color: #fff;
}
.btn-telegram:hover,
.btn-telegram:focus{
  color: #fff;
  filter: brightness(0.95);
}
.btn-outline-dark{ border-width: 2px; }

/* ====== Мелочи ====== */
@media (max-width: 991.98px){
  .hero-title{ letter-spacing: .04em; }
}

/* ===== Diplomas — сетка, высота, скролл ===== */
.diplomas-gallery{ --cols:4; --gap:16px; --tile-h: 320px; }
@media (max-width: 991.98px){
  .diplomas-gallery{ --cols:2; --gap:12px; --tile-h: 220px; }
}

/* вьюпорт — реальный горизонтальный скролл */
.dg-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;               /* небольшой вертикальный отступ */
  position: relative;
}

/* скрываем системные полосы, но скролл оставляем */
.dg-viewport::-webkit-scrollbar{ display:none; }
.dg-viewport{ -ms-overflow-style:none; scrollbar-width:none; }

/* трек */
.dg-track{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; align-items: stretch;
  gap: var(--gap);
  will-change: transform;
  user-select: none;
}

/* тайл: фиксированная высота, ширина по колонкам */
.dg-item{
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  height: var(--tile-h);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  padding: 8px;
  box-shadow: 0 3px 4px rgba(0,0,0,.1);
}

/* кнопка-обёртка растягивается на весь тайл */
.dg-item .dg-open{
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  cursor: zoom-in;
  display: block;
}

/* изображение «вмещается» в тайл, портретные не растягивают высоту строки */
.dg-item img{
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;          /* КЛЮЧЕВОЕ: подгоняем по минимальной высоте */
  transition: transform .25s ease;
  background: #fff;
  border-radius: 8px;
}
.dg-item:focus-within img,
.dg-item:hover img{ transform: scale(1.02); }

/* курсоры при перетаскивании */
.dg-viewport.grabbing { cursor: grabbing; }
.dg-viewport { cursor: grab; }

/* лайтбокс реально скрыт, пока есть [hidden] */
.dg-lightbox[hidden]{ display: none !important; }

.dg-lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.86);
  display: flex;                 /* вместо grid */
  align-items: center;           /* центр по вертикали */
  justify-content: center;       /* центр по горизонтали */
  z-index: 9999;
}

.dg-lightbox .dg-prev{
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
}

.dg-lightbox .dg-next{
  grid-column: 3 !important;
  grid-row: 2 !important;            /* <- ключевая строка */
  align-self: center !important;
  justify-self: center !important;
}

.dg-lightbox .dg-close{
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: center !important;
  margin: 16px !important;
}


/* стрелки по центру второй строки (не «уползают» вверх) */
.dg-prev{ grid-column: 1; grid-row: 2; align-self: center; justify-self: center; }
.dg-next{ grid-column: 3; grid-row: 2; align-self: center; justify-self: center; }
.dg-close{ grid-column: 3; grid-row: 1; align-self: start; justify-self: center; margin: 16px; }

.dg-figure{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(92vw, 1400px);
  height: 86vh;
  pointer-events: auto;
}
.dg-image{
  width: 100%;
  height: 100%;
  object-fit: contain;           /* вмещаем целиком */
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  border-radius: 10px;
}

.dg-btn{
  position: absolute !important; /* перебиваем grid-правила */
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color:#fff; border: 1px solid rgba(255,255,255,.3);
  font-size: 36px; line-height: 56px; text-align:center;
  backdrop-filter: blur(6px);
}
.dg-btn:hover{ background: rgba(255,255,255,.25); }
.dg-close{ grid-column: 3; grid-row: 1; align-self: start; margin: 16px; }
.dg-prev{ grid-column: 1; grid-row: 2; }
.dg-next{ grid-column: 3; grid-row: 2; }

/* скрываем системные скроллбары при любом раскладе */
.dg-viewport::-webkit-scrollbar{ display:none; }
.dg-viewport{ -ms-overflow-style:none; scrollbar-width:none; }

.dg-viewport{ cursor: grab; }
.bbp-dragging{ cursor: grabbing !important; }

/* ← слева по центру */
.dg-prev{
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* → справа по центру (на уровне левой) */
.dg-next{
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* × — в правом верхнем углу */
.dg-close{
  right: 16px !important;
  top: 16px !important;
}

/* лайтбокс по [hidden] реально скрывается */
.dg-lightbox[hidden]{ display: none !important; }



/* ===== Landing Page (scoped) ===== */
.lp { 
    --bg-hero:#e2dbca;
    --bg-muted:#f5f7f7;
    --text:#364354;
    --muted:#5c6063;
    --brand:#62758B;
    --ink:#364354; 
}

.lp * { box-sizing: border-box; }
.lp { color:var(--text); }

/* секции */
.lp-section{ padding-block: clamp(30px,6vw,100px); }
.lp-section-muted{ background: var(--bg-muted); }
.lp-section-light{ background: #fbfbfb; }

/* HERO без изображений */
.lp-hero{
  background: var(--bg-hero);
  padding-top: 8vw;
}
.lp-eyebrow{
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 6px;
  color:#364354;
}
.lp-title{
  font-weight:800; line-height:1.05;
  font-size: clamp(28px, 3.2vw, 56px);
  margin: 0 0 18px;
  line-height: 1.1;
}
.lp-lead{
    font-size: clamp(16px, 2.2vw, 20px);
    color:#1b1f21;
    margin-bottom: 25px;
}

.lp-note {
    color: var(--muted);
    font-size: 14px;
}

/* заголовки */
.lp-h2{
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  margin: 0 0 18px;
}
.lp-h5{ font-weight:bold; font-size: 18px; margin:0 0 6px; }

/* кнопки */
.lp-btn{
  display:inline-block;
  padding: 8px 18px;
  border-radius: 15px;
  font-weight:700;
  text-decoration:none;
  border:2px solid transparent;
  transition: transform .08s ease, background-color .2s ease, border-color .2s ease;
  margin-bottom: 15px;
  margin-right: 20px;
  
}

label {
    max-width: 100%!important;
}

.lp-section .lp-btn {
    margin-top: 0;
}

.lp-btn:active{ transform: translateY(1px); }
.lp-btn-primary{ background: var(--brand); color:#fff; }
.lp-btn-primary:hover{ filter: brightness(.95); color:#fff; }
.lp-btn-ghost{ background: transparent; border-color:#222; color:#222; }
.lp-btn-ghost:hover{ background:#111; color:#fff; }

/* списки */
.lp-list{ margin:0; padding-left:0; list-style:none; }
.lp-list li{ position:relative; padding-left:1.9rem; margin-bottom:.7rem; }
.lp-list-check li::before{
  content:""; position:absolute; left:0; top:.35rem;
  width:1.05rem; height:1.05rem; border-radius:50%;
  border:2px solid currentColor; box-shadow: inset 0 0 0 2px currentColor; opacity:.9;
}

/* карточки и фичи */
.lp-card{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-left:4px solid rgba(0,0,0,.7);
  border-radius:10px; padding:16px 18px;
}
.lp-feature{
  background:#fff; border:1px dashed rgba(0,0,0,.2);
  border-radius:12px; padding:16px 18px; height:100%;
}
.lp-badge{
  display:inline-block; background:#0b3a37; color:#fff; font-weight:700;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; margin-bottom:8px;
}

/* шаги программы */
.lp-steps{
  counter-reset: lpstep; display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  margin: 10px 0 0; padding:0; list-style:none;
}
@media (max-width: 767.98px){ .lp-steps{ grid-template-columns: 1fr; } }
.lp-steps > li{
  position: relative; padding:14px 16px 14px 56px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
}
.lp-steps > li::before{
  counter-increment: lpstep; content: counter(lpstep);
  position:absolute; left:14px; top:12px; width:28px; height:28px;
  border-radius:50%; background:#111; color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* LP steps: на десктопе отображать "по столбцам" (1..N влево, затем вправо) */
@media (min-width: 992px){
  .lp-steps{
    /* перебиваем grid из базового стиля */
    display: block !important;
    column-count: 2;
    column-gap: 14px; /* тот же шаг, что и gap */
  }
  .lp-steps > li{
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 14px; /* визуальный интервал как у grid gap */
  }
}


/* FAQ (details/summary) */
.lp-accordion details{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px;
  padding:10px 12px; margin-bottom:10px;
}
.lp-accordion summary{
  list-style:none; cursor:pointer; font-weight:700; position:relative; padding-right:32px;
}
.lp-accordion summary::-webkit-details-marker{ display:none; }
.lp-accordion summary::after{
  content:"+"; position:absolute; right:6px; top:0; font-weight:800;
}
.lp-accordion details[open] summary::after{ content:"–"; }
.lp-accordion details > div{ color:var(--muted); margin-top:6px; }

/* CTA */
.lp-cta{ background: linear-gradient(180deg, #fbfbfb 0, #f2f1ef 100%); }

/* мягкая прокрутка для якорей только в LP */
.lp { scroll-behavior: smooth; }

.lp-contacts p {
    margin-bottom: 5px;
    font-size: 18px;
}

#contacts_a {
    color: #034181;
    text-decoration: underline;
}

.lp-contacts {
    padding-top: 20px;
}

.wpcf7-acceptance .wpcf7-list-item-label {
    color: #555;
    font-size: 14px;
}

#soglasie_a {
    padding-left: 15px;
    text-decoration: underline;
    color: #89502F;
}

.ssilki_soglasia-p {
    margin-bottom: 7px;
}

.wpcf7-list-item {
    margin: 0 0 10px 1em;
}

.privacy-policy li {
    margin-bottom: 10px;
}


.cookie-notice {
  position: fixed;
  bottom: 20px;
  left: 30px;
  max-width: 420px;
  border-radius: 12px;
  padding: 32px;
  box-sizing: border-box;
  box-shadow: 0 0 24px rgba(25, 25, 25, 0.15);
  background-color: #fff;
  z-index: 2;
}

@media (max-width: 576px) {
  .cookie-notice {
    font-size: 15px;
    max-width: calc(100% - 20px);
    left: 10px;
    bottom: 10px;
    padding: 24px;
  }
}

.cookie-notice__buttons {
  margin-top: 16px;
}

.cookie-notice__confirm {
  background-color: #89502F;
  height: 48px;
  width: 100%;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
}

@media (max-width: 576px) {
  .cookie-notice__confirm{
    font-size: 14px;
    height: 42px;
  }
}

.cookie-notice__confirm:hover {
  background-color: #000;
}

.privacy-policy #main {
    padding-top: 30px;
}

.privacy-policy th,
.privacy-policy td {
    text-align: left;
    border: 1px solid #ccc;
    padding: 5px;
}

.privacy-policy h2 {
    font-size: 20px;
    font-weight: bold;
}


.privacy-policy p {
    margin-bottom: 10px;
}


.last_podcast_name {
    font-weight: bold;
    font-size: clamp(28px, 2vw, 40px);
}

#podcast {
    padding-top: 0;
}

#podcast .section-title {
    margin-bottom: 50px;
}

.section_divider {
    max-width: 100%;
    height: 1px;
    background-color: #ccc;
    margin-right: 10%;
    margin-left: 10%;
}

#contact {
    padding-top: 30px;
    padding-bottom: 30px;
}

.price-card {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 22px 26px 34px 26px;
    box-shadow: 2px 2px 4px #ddd;
    margin-bottom: 33px;
}

.pricinfg-head {
    font-weight: bold;
    font-size: 24px;
}

.pricinfg-digit {
    font-weight: bold;
    font-size: 36px;
    color: #505d6f
}

.pricinfg-subtxt {
    font-size: 14px;
    color: #555;
}

.pricinfg-txt {
    font-size: 16px;
    margin-bottom: 24px;
}

.pricing-button-div a{
    border: 1px solid #444!important;
    padding: 8px 24px;
    border-radius: 8px;
}

.pricing-button-div a:hover,
.pricing-button-div a:focus,
.pricing-button-div a:active {
    box-shadow: 2px 2px 4px #ddd;
    background-color: #fdfdfd;
}

/* Fonts */
 
 @font-face {
 font-family: NotoSerif-Bold;
 src: url(/wp-content/themes/true/fonts/NotoSerif-Bold.ttf);
 font-weight: normal;
 }
 
 @font-face {
 font-family: Sverdlovsk;
 src: url(/wp-content/themes/true/fonts/Sverdlovsk.otf);
 font-weight: normal;
 }
 
 @font-face {
 font-family: Montserrat;
 src: url(/wp-content/themes/true/fonts/Montserrat-Regular.ttf);
 font-weight: normal;
 }
 
 @font-face {
 font-family: Montserrat-bold;
 src: url(/wp-content/themes/true/fonts/Montserrat-Bold.ttf);
 font-weight: bold;
 }
  
 @font-face {
 font-family: NotoSerif-Regular;
 src: url(/wp-content/themes/true/fonts/NotoSerif-Regular.ttf);
 font-weight: normal;
 }

 @font-face {
 font-family: Din-pro;
 src: url(/wp-content/themes/true/fonts/dinpro_medium.otf);
 font-weight: 400;
 }

 @font-face {
 font-family: Din-pro;
 src: url(/wp-content/themes/true/fonts/dinpro_light.otf);
 font-weight: 300;
 }

 @font-face {
 font-family: Din-pro;
 src: url(/wp-content/themes/true/fonts/dinpro_bold.otf);
 font-weight: bold;
 }
 
 @font-face {
 font-family: Din-pro;
 src: url(/wp-content/themes/true/fonts/dinpro_black.otf);
 font-weight: 800;
 }

/* End of Fonts */


/* Mobile view */
 
 @media (max-width:767.98px){
     
     .mob-hide {
         display: none;
     }
     
     .hero {
        padding-top: 15vw;
        padding-bottom: 10vw;
     }
     
     .hero-title {
        font-size: 50px;
        padding-bottom: 8px;
        line-height: 1.1;
     }
     
     .header .logo {
        font-size: 20px;
        padding: 10px 20px 10px 10px;
    }
    
    .lp-hero {
        background: #f4f3ef;
        padding-bottom: 20px;
        padding-top: 13vw;
    }
    
    .lp-eyebrow {
        margin: 30px 0 16px;
    }
    
    #course_menue_item a {
        text-align: left;
    }
    
    .section_divider {
        margin-left: 3%;
    }
    
    #podcast .section-title {
        margin-bottom: 22px;
    }
    
}
 
  @media (min-width:768px){
     .mob {
         display: none;
     }
 }
 


/* End of Mobile view */
 

/* 
*{
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
} 
 */