/*------------------------------------------------------------------------
# Stack Drupal
# ------------------------------------------------------------------------
# Created by Symphony Themes
# Websites:  http://www.symphonythemes.com -  Email: info@symphonythemes.com
--------------------------------------------------------------------------
    1.   Custom CSS
    2.   Forms
    3.   Blog & Article
    4.   Portfolio & Project
    5.   Edit form
    6.   Others
--------------------------------------------------------------------------------*/

/* 01. Custom CSS
 --------------------------------------------------------------------------------*/

/* Adaption */
body {
    margin-top: 0px;
}
ol.process-3 {
  padding-left: 0;
}
img { height: auto; }

/**! Typography **/
h1:not(:last-child),
.h1:not(:last-child) {
  margin-bottom: 1.25rem;
}
h2,
.h2 {
  margin-bottom: 0.75rem;
}
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-bottom: 0.5rem;
}
a { text-decoration: none; }
.btn .label { position: absolute; }
.btn:hover { text-decoration: none; }
.btn.type--uppercase .btn__text { margin-right: 0 !important; }
.label { line-height: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  text-decoration: none;
}
h2 a { font-weight: 300; }
h5 a, h6 a { font-weight: 600; }
p a, span a, label a {
  text-decoration: none;
}
ul.list-inline li { display: inline-block; }
.field--label {
  font-weight: bold;
}
.text-white a:not(.btn-white) { 
  color: white; 
}
h1.title {
  font-size: calc(1.365rem + 1.38vw);
  line-height: 1.2;
  margin-bottom: 0.75rem !important;
}
@media (min-width: 1200px) {
  h1.title {
    font-size: 2.4rem;
  }
}
.text-inverse h1, 
.text-inverse h2,
.text-inverse h3,
.text-inverse h4,
.text-inverse h5,
.text-inverse h6 {
  color: #cacaca;
}
.text-white h1, 
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6 {
  color: #fff;
}
/**! Landing Pages **/
.node--type-landing-page .content > section:first-child > div[class*='container']:not(.space-0) {
  padding-top: 5rem;
}

@media (min-width: 768px) {
  .node--type-landing-page .content > section:first-child > div[class*='container']:not(.space-0) {
    padding-top: 9rem;
  }
}
.image-wrapper.bg-image > .container {
  position:relative;
  z-index: 2;
}
/**! Spacing **/
section > div[class*="container"]:not([class*="space-"]),
footer > div[class*="container"]:not([class*="space-"]) {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
section .space-md,
footer .space-md {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
section .space-xs,
footer .space-xs {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
section .space-sm,
footer .space-sm {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
section .space-lg,
footer .space-lg {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
section .space-xl,
footer .space-xl {
  padding-top: 10rem;
  padding-bottom: 10rem;
}
section .space-xxl,
footer .space-xxl {
  padding-top: 16rem;
  padding-bottom: 16rem;
}
section .space-0,
footer .space-0 {
  padding-top: 0;
  padding-bottom: 0;
}
@media all and (max-width: 767px) {
  .node--type-landing-page .content > section:first-child > div[class*='container']:not(.space-0) {
    padding-top: 5rem;
  }
  section > div[class*="container"]:not[class*="space"],
  footer > div[class*="container"]:not[class*="space"] {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  section .space-sm,
  footer .space-sm,
  section .space-xs,
  footer .space-xs {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  section .space-md,
  footer .space-md {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  section .space-lg,
  footer .space-lg {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  section .space-xlg,
  footer .space-xlg {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.unpad {
  padding: 0;
}
.unpad--bottom {
  padding-bottom: 0;
}
.unpad--top {
  padding-top: 0;
}
section.unpad--bottom {
  padding-bottom: 0;
}
section.unpad {
  padding: 0;
}
section.unpad--top {
  padding-top: 0;
}
.unmarg--bottom {
  margin-bottom: 0;
}
.unmarg {
  margin: 0;
}
.unmarg--top {
  margin-top: 0;
}
section .row--gapless div[class*="col-"],
section.row--gapless div[class*="col-"] {
    padding: 0;
}
section .region--top,
section .region--bottom {
  z-index: 1;
  margin: 0;
  position:relative;
}

/* Modal */
.modal-instance .video-play-icon + span { bottom: -10px; }
.modal-instance .video-play-icon.video-play-icon--xs + span { bottom: 3px; }
.modal-instance .video-play-icon + div {
  position: relative;
  display: inline-block;
  margin-left: 0.92857143em;
  white-space: nowrap;
  bottom: -10px;
}
.modal-instance + div:last-child {
  display: inline-block;
  margin-left: 0.92857143em;
}
@media all and (min-width: 768px) { .video-1 h2 { bottom: -15px; } }

/* Table */
table {
  width: 100%;
  border-collapse: separate;
}

/**! Navbar **/
#toolbar-administration nav.clearfix {
  overflow: visible;
}
img.logo {
	width: 150px;
}
.bar.bg--dark .logo-dark,
.bar.bg--transparent .logo-dark {
  display: none;
}
.navbar:not(.transparent):not(.navbar-dark) .logo-light {
  display: none;
}
.navbar.transparent:not(.navbar-stick) {
  background: none;
}
.navbar.navbar-absolute {
  position: absolute;
}
.navbar.navbar-absolute,
.navbar.pos-fixed {
  z-index: 99;
  width: 100%;
}
.navbar.navbar.transparent:not(.navbar-stick) button.hamburger {
  color: white;
}
@media all and (min-width: 991px) {
  .navbar:not(.navbar-stick) {    
    padding-top: 0.3rem; 
  }
  .navbar.transparent:not(.navbar-stick) {
    background: none;
  }
  .navbar.transparent:not(.navbar-dark):not(.navbar-stick) .logo-dark {
    display: none;
  }
  .navbar.bar--transparent:not(.navbar-dark) .logo-light {
    display: inline-block;
  }
  .navbar.transparent:not(.navbar-stick):not(.pos-fixed) ul.navbar-nav > li > a,
  .navbar.transparent:not(.navbar-stick):not(.pos-fixed) ul.navbar-nav > li > span {
    color: #fff;
  }
}
@media (max-width: 990px) {
  .navbar .navbar-other { display: none !important; }
}

/* Sidebar */
.sidebar .block:not(:last-child) {
  margin-bottom: 3.71428571em;
}
.sidebar .block {
  border: none;
  padding: 0;
}
.sidebar .block h2.block-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
  border-bottom: none;
  margin-bottom: 0.75rem;
}
.sidebar .block-search .search-form {
  display: flex;
  align-items: center;
}
.sidebar .block-search .search-form input#edit-submit {
  padding: 10px;
  margin-top: 5px;
}
@media (min-width: 1200px) {
  section.sticky-column-first >  [class*=container] > .row > [class*=col]:first-child {
    position: sticky;
    top: 8rem;
    height: 100%;
  }
}
/* Footer */
@media (min-width: 768px) {
  footer .footer-3 .row:last-child,
  footer .footer-4 .row:last-child {
    margin-top: 1.85714286em;
  }
}
footer {
  padding-top: 0;
  padding-bottom: 0;
}
[class*=text-md-end] .social a, .social[class*=text-md-end] a {
  margin: 0 0 0 0.7rem;
}
/* Masonry */
.masonry-filter-container > .masonry-filter-label {
  position: relative;
  bottom: 20px;
  display: inline-block;
}
.masonry-filter-container > .masonry-filter-label + .masonry-filter-holder {
  margin-left: 0.92857143em;
}

/* Pricing */
.pricing .h1.pricing__dollar {
  font-size: 2em;
  position: relative;
  bottom: 20px;
}

/* Card */
.card-img-bottom img {
  width: 100%;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

/*! Accordion */
ul.accordion {
  list-style: none;
  padding: 0;
}
ul.accordion li .accordion__title .field--name-field-paragraph-item-title {
  display: inline-flex;
}
.accordion-wrapper.plain .card {
  background: none;
  border: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.accordion-wrapper li:not(.active) .card-header button {
  color: #343f52;
}
.accordion-wrapper.plain .card .card-body {
  padding: 0 0 0 1.1rem;
}
.accordion-wrapper.plain .card .card-header {
  padding: 0 0 0.8rem 0;
}
.accordion-wrapper.plain .card .card-header button {
  padding: 0 0 0 1rem;
}
.accordion-wrapper.plain .card .card-header button:before {
  left: 0rem;
}
.accordion-wrapper .card .card-header button:before {
  left: 1rem;
}
.accordion li .accordion-title button {
  box-shadow: none;
}
.accordion li.active .accordion-title button:before {
  content: "\e92d";
}
.accordion li .accordion-title button:after {
  display: none;
}
.accordion li.active .accordion-content {
  opacity: 1;
  visibility: visible;
  max-height: 500px;
}
.accordion li .accordion-content > * {  
  display: none;
}
.accordion li.active .accordion-content > * {
  display: inline-block;
}
.accordion.icon .card-body {
  padding: 0 1.25rem 0.25rem 2.8rem;
}
.accordion.icon button {
  padding: 0 0 0 1.5rem;
  display: flex;
  align-items: center;
}
.accordion.icon button:before {
  display: none;
}
.accordion.icon button>span {
  position: absolute;
  left: 0;
}
.accordion.icon button>span i {
  font-size: 1rem;
}

/* Switch column on mobile */
@media all and (max-width: 768px) {
  section.switch-column-mobile .row > .region--top {
    order: 1;
  }
  section.switch-column-mobile div[class*=container] > .row > div:nth-child(1 of [class*='col-']) {
    order: 3;
  }
  section.switch-column-mobile div[class*=container] > .row > div:nth-child(2 of [class*='col-']) {
    order: 2;
  }
  section.switch-column-mobile div[class*=container] > .row > div:nth-child(3 of [class*='col-']) {
    order: 4;
  }
  section.switch-column-mobile .row > .region--bottom {
    order: 5;
  }
}

/* Pager */
.active>.page-link, .page-link.active {
  background-color: #4a90e2;
  border-color: #4a90e2;
}
a.page-link {
  color: #252525;
}
a.page-link:hover {
  color: #252525;
  background: #eee;
}
.view nav {
  display: flex;
  justify-content: center;
}

/**! Tabs **/
.tabs {
  display: block;
  margin-bottom: 0;
}
.tabs > li {
  display: inline-block;
  opacity: .5;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tabs > .active,
.tabs:hover {
  opacity: 1;
}
.tabs .tab__title {
  cursor: pointer;
}
.tabs .tab__title:not(.btn) {
  padding: 0 1.85714286em;
}
.tabs li:first-child .tab__title:not(.btn) {
  padding-left: 0;
}
.tabs .tab__content {
  display: none;
}
.tabs-content {
  margin-top: 1.25rem;
}
.tabs-content li > .tab__content {
  width: 100%;
  display: none;
}
.tabs-content > .active > .tab__content {
  display: block;
  float: left;
}
.tabs-container[data-content-align="left"] .tabs-content {
  text-align: left;
}
@media all and (max-width: 767px) {
  .tabs-content > li:not(.active) .tab__content {
    display: none !important;
  }
}
.tabs-container.tabs--vertical {
  overflow: hidden;
}
.tabs-container.tabs--vertical .tabs {
  width: 25%;
  float: left;
}
.tabs-container.tabs--vertical .tabs li {
  display: block;
}
.tabs-container.tabs--vertical .tabs li:not(:last-child) {
  border-right: none;
  border-bottom: 1px solid #ECECEC;
}
.tabs-container.tabs--vertical .tabs-content {
  width: 70%;
  float: right;
  margin-top: 0;
}
.tabs-container.tabs--vertical .tabs-content > li:not(.active) .tab__content {
  animation: fadeOutUp .5s ease forwards;
  -webkit-animation: fadeOutUp .5s ease forwards;
}
.tabs-container.tabs--vertical .tabs-content > li.active .tab__content {
  animation: fadeInUp .5s ease forwards;
  -webkit-animation: fadeInUp .5s ease forwards;
  backface-visibility: hidden;
}
.tabs-container.tabs--vertical.tabs--icons .tabs {
  width: 15%;
  text-align: center;
}
.tabs-container.tabs--vertical.tabs--icons .tabs-content {
  width: 80%;
}
@media all and (max-width: 767px) {
  .tabs-container.tabs--vertical .tabs,
  .tabs-container.tabs--vertical .tabs-content {
    width: 100%;
    float: none;
  }
  .tabs-container.tabs--vertical .tabs {
    margin-bottom: 1.85714286em;
  }
  .tabs-container.tabs--vertical .tabs-content > li:not(.active) .tab__content {
    animation: fadeOutRight .5s ease forwards;
    -webkit-animation: fadeOutRight .5s ease forwards;
  }
  .tabs-container.tabs--vertical .tabs-content > li.active .tab__content {
    animation: fadeInLeft .5s ease forwards;
    -webkit-animation: fadeInLeft .5s ease forwards;
    backface-visibility: hidden;
  }
}
.tabs {
  display: inline-flex;
}
.tabs li {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  padding: 0.92857143em 1.85714286em;
}
.tabs li:not(:last-child) {
  border-right: 1px solid #ECECEC;
}
.tabs li.active {
  opacity: 1;
}
.tabs li.active .tab__title {
  /*color: #4a90e2;*/
}
.tabs li.active .tab__title span {
  /*color: #4a90e2;*/
}
.tabs li:not(.active) {
  opacity: .5;
}
.tabs li:hover {
  opacity: 1;
  cursor: pointer;
}
.tabs .tab__title {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
}
.tabs .tab__title:not(.btn) {
  padding-right: 0;
  padding-left: 0;
}
.tabs .tab__title i + span {
  margin-top: 0.46428571em;
  display: inline-block;
  margin-bottom: 0;
}
.tabs-content {
  position: relative;
  list-style-type: none;
  padding: 0;
  float: left;
}
.tabs-content > li:not(.active) .tab__content {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  animation: fadeOutRight .5s ease forwards;
  -webkit-animation: fadeOutRight .5s ease forwards;
}
.tabs-content > li.active {
  animation: fadeInLeft .5s ease forwards;
  -webkit-animation: fadeInLeft .5s ease forwards;
  backface-visibility: hidden;
}
@media all and (max-width: 767px) {
  .tabs li {
    display: block;
  }
  .tabs li:not(:last-child) {
    border-bottom: 1px solid #ECECEC;
    border-right: none;
  }
}

/**! Image **/
.img-mask.mask-1 img {
  -webkit-mask-image: url(../img/svg/blob.svg);
  mask-image: url(../img/svg/blob.svg);
}
.img-mask.mask-2 img {
  -webkit-mask-image: url(../img/svg/hex.svg);
  mask-image: url(../img/svg/hex.svg);
}
.img-mask.mask-3 img {
  -webkit-mask-image: url(../img/svg/blob2.svg);
  mask-image: url(../img/svg/blob2.svg);
}

/**! Views Reference **/
.paragraph--type--paragraph-views-reference .viewsreference--view-title { display: none; }

/*--------------------------------------------------------------------------------*/

/* 02. Forms
 --------------------------------------------------------------------------------*/

button#edit-submit,
button#edit-subscribe {
  background: #4a90e2;
  border-color: #4a90e2;
  text-transform: uppercase;
  color: #fff;
}

/* Comment form */
form.comment-form button#edit-preview,
form.comment-form input#edit-preview { 
  display: none; 
}
form#comment-form textarea {
  padding: 16px 20px;
  background: #f5f5f5 none repeat scroll 0 0;
}
form#comment-form select#edit-comment-body-0-format--2 {
  background: #f5f5f5 none repeat scroll 0 0;
}
form#comment-form button#edit-submit,
form#comment-form input#edit-submit {
  float: right;
  max-width: 25%;
  margin-right: 0;
}
figure.rounded-circle img {
  border-radius: 50% !important;
}
#comments ol.commentlist li.comment {
  margin-top: 2rem;
  display: block;
}
#comments .indented {
  margin: 2rem 0 0 0;
  overflow: inherit;
  padding: 0 0 0 3.5rem;
  list-style: none;
}
#comments .indented li.comment {
  position: relative;
}
#comments .indented li.comment:before {
  display: block;
  font-family: "Custom";
  content: "\e904";
  font-size: calc(1.325rem + 0.9vw);
  position: absolute;
  left: -2.5rem;
  top: -1.25rem;
  color: rgba(164, 174, 198, 0.25);
}
@media (min-width: 1200px) {
  #comments .indented li.comment:before {
    font-size: 2rem;
  }
}
.comment .links-inline span {
  font-size: inherit;
}


/* Search form */
#search-form .search-help-link { display: none; }
#search-block-form .input-group {
  width: 100%;
}
a.nav-link-search {
  position: relative;
  text-indent: 50px;
  overflow: hidden;
  width: 40px;
}
a.nav-link-search::before {
  content: "\eca5";
  font-family: "Unicons";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.75rem;
  font-size: 1rem;
  z-index: 1;
}

/* Sitewide search form */
.container-inline {
  width: 100%;
}
.search-form .form-type-search {
  width: 100%;
  margin-bottom: 0 !important;
} 
.search-form .form-actions,
.search-form input#edit-submit,
.search-form label  {
  display: none;
}
.path-search h2 {
  margin: 2rem 0;
}
ol.list-group.node_search-results li.list-group-item {
  padding: 2rem;
}

/* Contact form */
@media all and (min-width: 768px) {
  .contact-form .form-item-name,
  .contact-form .form-item-mail {
    width: 48.5%;
    display: inline-block;
  }
  .contact-form .form-item-name {
    margin-right: 2%;
  }
}
#block-sitewidecontactform .form-item label {
  float: left;
}
.contact-form button[type=submit],
.contact-form  input[type=submit] {
  width: auto;
  border-radius: 50rem !important;
}
#block-sitewidecontactform textarea {
  background: #fcfcfc;
  border: 1px solid #ececec;
}
#block-sitewidecontactform button#edit-preview,
input#edit-preview {
  display: none;
}

/* Register form */
.register-horizontal #user-register-form .form-item {
  width: 45%;
  display: inline-block;
  float: left;
  margin-right: 5%;
}
.register-horizontal #user-register-form .form-actions,
.register-horizontal #user-register-form .form-item.js-form-item-pass {
  width: 100%;
}

/* Login form */
.page-node-type-full-page #block-userlogin ul { display: none; }
#block-userlogin, 
#block-userregistrationform,
#block-requestnewpasswordform {
  margin-bottom: 1.08333333333334em;
}
#block-userlogin button#edit-submit { 
  background: #4a90e2;
  border-color: #4a90e2;
}
#block-userlogin button#edit-submit:hover {
  background: #609de6;
}
#block-userlogin ul.list-group > li.list-group-item {
  border: none;
}

/* Subscribe form */
#block-simplenewssubscription .field--name-mail .form-type-email label,
#block-simplenewssubscription .description.text-muted,
#block-simplenewssubscription #edit-message {
  display: none;
}

.subscribe-inline #block-simplenewssubscription #edit-actions {
  margin-top: 10px;
}
.tooltip {
}
.tooltip-inner {
  float: left;
  overflow: hidden;
}
@media all and (min-width: 768px) {
.subscribe-inline #block-simplenewssubscription .field--type-email {
  width: 75%;
  float: left;
}
.subscribe-inline #block-simplenewssubscription .field--type-email input {
  height: 40px;
}
.subscribe-inline #block-simplenewssubscription #edit-actions {
  width: 22%;
  float: left;
  margin-left: 3%;
  margin-top: -1px;
}
body.user-logged-in .subscribe-inline #block-simplenewssubscription #edit-actions {
  width: 100%;
  margin-left: 0;
}
}
/*--------------------------------------------------------------------------------*/

/* 03. Blog & Article
 --------------------------------------------------------------------------------*/
/* Node Reset */
.node .field--type-image,
.node .field--type-entity-reference {
  margin: 0;
}

/* Breadcrumb */
ol.breadcrumb {
  justify-content: center;
}
/* Article Detail */
.icon.glyphicon {
  font-size: 12px;
}
.field--name-field-blog-category {
  display: inline;
}
.field--name-field-image,
.field--name-field-video {
  margin-bottom: 1.85714286em;
}
.imagebg-content-article {
  padding: 5.57142857em 0;
}
.article__author .field--name-user-picture {
  width: 3.71428571em;
  height: 3.71428571em;
  margin: 0 auto;
  float: none;
}
.field--name-field-tags {
  margin-top: 20px;
}
.field--name-field-tags .field--item {
  display: inline-block;
  margin-left: 7px;
}
.node--type-article .article__body div.inline__links {
  float: right;
}
.node--type-article .article__body .field--name-field-tags h3.field__label {
  font-size: 1.35714286em;
}
.node--type-article .article__body .field--name-field-tags ul.links {
  display: inline-flex;
  font-size: 1.35714286em;
  margin-left: 20px;
}
.node--type-article .blog hr {
  margin: 3rem 0;
}

/* Article List */
article.post .post-title a {
  color: #343f52;
  font-weight: bold;
}
.link-dark a {
  color: #343f52;
}
.view-blog-lists img {
  height: auto;
}
ul.pagination {
  margin-top: 3rem;
}
ul.pagination li.active .page-link {
  color: white;
}
.pagination .page-link {
  width: auto;
  min-width: 2.5rem;
  padding: 0 1rem;
}

/* Blog Tags */
.view-blog-tags .views-row {
  display: inline-block;
  padding-right: 10px;
}

/*--------------------------------------------------------------------------------*/

/* 04. Portfolio & Project
 --------------------------------------------------------------------------------*/

/* Portfolio Detail */
.page-node-type-project h1.page-header,
.page-node-type-project h1.title {
    padding-top: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 20px;
}
.node--type-project .field--name-field-date {
  margin-bottom: 1rem;
}
.node--type-project .field--name-field-date .field--label,
.node--type-project .field--name-field-client-name .field--label {
  font-weight: 700;
  line-height: 1.5;
  font-size: 0.9rem;
  color: #343f52;
  margin-bottom: 0.25rem;
}

.node--type-project .field--name-field-link a{
  font-weight: 700;
  letter-spacing: -0.01rem;
  display: inline-block;
}
.node--type-project .field--name-field-link a:after,
.projects-list .project-details .post-content a:after {
  line-height: 1;
  font-family: "Unicons";
  content: "\e94c";
  padding-left: 0.05rem;
  font-size: 0.9rem;
  font-weight: normal;
  vertical-align: -3px;
  margin-right: -0.25rem;
  display: inline-block;
}
.post-title a {
  color: #343f52;
}

/* Portfolio List */
.view-portfolio-lists .masonry__item img {
  border-radius: 6px;
}
.portfolio-fullwidth .masonry__item {
  margin: 0 !important;
  padding: 0 !important;
}
.portfolio-fullwidth hr {
  display: none;
}
.project-images {
  padding-top: 40px;
}
.masonry__item img {
  width: 100%;
  height: auto;
}
/*--------------------------------------------------------------------------------*/

/* 05. Edit form
 --------------------------------------------------------------------------------*/

/* Nav Tab */
.user-logged-in nav.tabs {
  position: fixed;
  left: 0;
  top: 80px;
  transition: all 0.5s ease 0.25s;
  z-index: 1000;
} 
.user-logged-in nav.tabs ul.nav.primary {
  background: #fff none repeat scroll 0 0;
  border: medium none;
  list-style: outside none none;
  opacity: 0.9;
  flex-direction: column;
}
.user-logged-in nav.tabs ul.nav.primary li {
  float: none;
  opacity: 0.8;
  padding: 0;
}
.user-logged-in nav.tabs ul.nav.primary li a {
  margin-right: 0;
  font-size: 0.7rem !important;
  padding: 10px 20px;
}
.user-logged-in nav.tabs ul.nav.primary li.active a, 
.user-logged-in nav.tabs ul.nav.primary li:hover a {
  background: #ffb500 none repeat scroll 0 0;
  border: none;
  border-radius: 0;
  color: #fff;
}
.user-logged-in nav.tabs ul.nav.primary li.active, 
.user-logged-in nav.tabs ul.nav.primary li:hover {
  opacity: 1;
}
.path-node .node-form {
  padding-top: 5em;
}
.path-node .node-form input.btn.form-submit {
  width: auto;
  height: auto;
  margin: 0 10px 20px 0;
  font-size: 1.2em;
  padding: 15px 30px;
  background-color: black;
}
.layout-paragraphs-component-form input.form-check-input,
.path-node .node-form input.form-check-input {
  width: auto;
  padding: 0.46428571em;
  font-size: 1.2em;
  margin-left: -1.1em;
  margin-right: 0.5em;
}
.path-node .node-form .vertical-tabs details.vertical-tabs__pane {
  padding: 15px;
}
.path-node .node-form .layout-region-node-footer {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px #ddd solid;
}

/* Layout Paragraphs Builder */
.node-form .wow,
.layout-paragraphs-component-form .wow {
  animation-name: none !important; /* Disable WOW effect on node form */
  visibility: visible !important;
}
.lp-builder section.imagebg {
  overflow: hidden;
}
.lp-builder section.lpb-layout {
  visibility: visible !important;
}
.lp-builder section.parallax .lpb-controls,
.lp-builder section.imagebg .lpb-controls,
.lp-builder section[class*='unpad'] .lpb-controls {
  top: 0;
}
.lp-builder section.hidden {
  display: block;
}
.lp-builder .lpb-controls {
  z-index: 20 !important;
}
.lp-builder .lpb-controls:not(.is-layout) span.lpb-controls-label {
  color: #666666 !important;
}
.lp-builder .page-navigator {
  position: unset;
  transform: none;
}
.lp-builder .js-lpb-component .lpb-btn--add,
.lp-builder .js-lpb-component .lpb-controls {
  position: absolute;
}
.lp-builder .js-lpb-component .lpb-controls {
  top: 0;
}
/* Modal form */
.layout-paragraphs-component-form .field--name-field-paragraph-id,
.layout-paragraphs-component-form .field--name-field-paragraph-extra-class,
.layout-paragraphs-component-form .field--name-field-paragraph-spacing,
.layout-paragraphs-component-form .field--name-field-paragraph-content-align,
.layout-paragraphs-component-form .field--name-field-paragraph-tab-direction,
.layout-paragraphs-component-form .field--name-field-paragraph-tab-title,
.layout-paragraphs-component-form .field--name-field-paragraph-tabcontent-align,
.layout-paragraphs-component-form .field--name-field-paragraph-display-arrows,
.layout-paragraphs-component-form .field--name-field-paragraph-display-pager,
.layout-paragraphs-component-form .field--name-field-paragraph-shadow,
.layout-paragraphs-component-form .field--name-field-paragraph-shadow-bg-class,
.layout-paragraphs-component-form .field--type-viewsreference .js-form-item-field-paragraph-views-reference-0-target-id,
.layout-paragraphs-component-form .field--type-viewsreference .js-form-item-field-paragraph-views-reference-0-display-id,
.layout-paragraphs-component-form .field--name-field-paragraph-accordion-style {
  width: 22%;
  display: inline-block;
  padding-right: 3%;
}
.layout-paragraphs-component-form .field--name-field-paragraph-data-items-xs,
.layout-paragraphs-component-form .field--name-field-paragraph-data-items-sm,
.layout-paragraphs-component-form .field--name-field-paragraph-data-items-md,
.layout-paragraphs-component-form .field--name-field-paragraph-data-items-lg,
.layout-paragraphs-component-form .field--name-field-paragraph-data-items-xl,
.layout-paragraphs-component-form .field--name-field-paragraph-data-items-xxl,
.layout-paragraphs-component-form .field--name-field-paragraph-data-items,
.layout-paragraphs-component-form .field--name-field-paragraph-data-speed,
.layout-paragraphs-component-form .field--name-field-paragraph-data-margin,
.layout-paragraphs-component-form .field--name-field-paragraph-overflow-visible,
.layout-paragraphs-component-form .field--name-field-paragraph-data-nav,
.layout-paragraphs-component-form .field--name-field-paragraph-data-dots,
.layout-paragraphs-component-form .field--name-field-paragraph-data-items-auto,
.layout-paragraphs-component-form .field--name-field-paragraph-data-auto-height {
  width: 33%;
  display: inline-block;
  padding-right: 3%;
}
.layout-paragraphs-component-form .field--name-field-paragraph-padding,
.layout-paragraphs-component-form .field--name-field-paragraph-margin,
.layout-paragraphs-component-form .field--name-field-paragraph-gutter-class,
.layout-paragraphs-component-form .field--name-field-paragraph-angled {
  width: 22%;
  display: inline-block;
  padding-right: 3%;
}
.layout-paragraphs-component-form .field--name-field-paragraph-data-overlay,
.layout-paragraphs-component-form .field--name-field-paragraph-image-position,
.layout-paragraphs-component-form .field--name-field-paragraph-slider-classes,
.layout-paragraphs-component-form .field--name-field-paragraph-item-classes,
.layout-paragraphs-component-form .field--name-field-paragraph-tab-title {
  max-width: 200px;
}
.layout-paragraphs-component-form .paragraph-type-top,
.layout-paragraphs-component-form .paragraphs-nested,
.layout-paragraphs-component-form .paragraphs-subform {
  padding-right: 20px;
}
.layout-paragraphs-component-form input.form-submit {
  padding: 5px 10px;
}
.layout-paragraphs-component-form .field-multiple-table {
  overflow: hidden;
}
.layout-paragraphs-component-form .js-filter-guidelines {
  display: none;
}
.layout-paragraphs-component-form .layout-select__item-icon {
  margin-right: 0;
}
.layout-paragraphs-component-form #layout-paragraphs-layout-options {
  margin-bottom: 20px;
}
.layout-paragraphs-component-form .paragraph-type-top {
  justify-content: space-around;
}
.layout-paragraphs-component-form .paragraph-type-title {
  flex-basis: 10%;
}
.layout-paragraphs-component-form .paragraphs-description {
  max-width: 70%;
}
.layout-paragraphs-component-form #layout-paragraphs-element .form-check-input:checked[type=radio] {
  display: block;
  clip: auto !important;
  width: 10px !important;
  height: 10px !important;
}
a.lpb-btn { color: #4a90e2 !important; }

/*--------------------------------------------------------------------------------*/

/* 06. Others
 --------------------------------------------------------------------------------*/
 
/* Career Detail */
article.job article.post .field .field--label {
  line-height: 1.35;
  font-weight: 700;
  font-size: 1.3rem;
  color: #343f52;
  padding-bottom: 1rem;
  padding-top: 1rem;
}
article.job article.post .field:first-child .field--label {
  padding-top: 0;
}

/* Swiper */
.swiper-container {
  overflow: hidden;
}

/* Toolbar menu */
.toolbar-menu .toolbar-box span {
  background: none;
}

/* Check box/ radio */
.form-type-checkbox,
.form-type-radio,
.input-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
}
.form-type-checkbox input,
.form-type-radio input{
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  position: absolute !important;
  margin-top: 7px;
  
}
.form-type-checkbox input {
  -webkit-appearance: checkbox;
}
.form-type-radio input {
  -webkit-appearance: radio;
}
.form-type-checkbox {
  padding: 0;
}
.form-type-radio {
  padding: 0;
}
.form-type-checkbox {
  margin-top: 0.46428571em;
}

.dropdown.open > .dropdown__container {
  opacity: 1;
}
.image--xxs img {
  max-height: 1.85714286em;
}
/*section.paragraph.parallax:nth-child(2),
section.paragraph.parallax:nth-child(3) {
  visibility: visible !important;
}*/

/* Others */
.width-100 {
  width: 100%;
}
.feature > div + h5 {
  margin-top: 1.85714286em;
}
.row-align-items-center .row {
  align-items: center !important;
}
.row-justify-content-around .row {
  justify-content: space-around !important;
}
.row-justify-content-center .row {
  justify-content: center !important;
}
.text-block {
  margin-bottom: 1.85714286em;
}
.cover-features .region--top:not(:empty) {
  margin-bottom: 11.14285714em;
}
.cover .row .row:only-child {
  margin: 0;
}
section.row--gapless .row {
  padding-left: 0;
  padding-right: 0;
}
section.row--gapless > .row > div[class*="col-"] {
  padding: 0;
}
.slider--image-xxs li > img {
  max-height: 1.85714286em;
}
@media all and (min-width: 1200px) {
  .cta-1 .row > div[class*='col-'] {
    padding: 1.23809524em 15px;
  }
  .cta-1 .row > div[class*='col-']:last-child {
    border-left: 1px solid #ECECEC;
  }
}
input.form-radio, input.form-checkbox {
  width: auto;
  padding: 0.46428571em;
}
.imagebg p strong,
.bg--dark input.btn,
input#edit-submit {
  color: white;
}
.hover-element a { color: white; }
.pagination { justify-content: center; }

/** Timeline style */

.timeline-custom {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
}

.timeline-custom-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 6);
    text-align: center;
}

.timeline-custom-item .icon {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 2px solid #3498db;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.timeline-custom-item .line {
    width: 2px;
    height: 50px;
    background: none;
    border-left: 2px dashed #3498db;
}

.timeline-custom-item .dot {
    width: 12px;
    height: 12px;
    background-color: #3498db;
    border-radius: 50%;
    z-index: 2;
}

.timeline-custom-item .content {
    margin-top: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateY(20px);
}

.timeline-custom-item.active .content {
    opacity: 1;
    transform: translateY(0);
}

h5 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #333;
}

p {
    font-size: 14px;
    color: #666;
}

.timeline-custom::before {
    content: "";
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    height: 2px;
    background: #3498db;
    z-index: 0;
    opacity: 0;
    animation: line 1s forwards ease-in-out;
}

@keyframes line {
    to {
        opacity: 1;
        width: 100%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .timeline-custom {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        max-width: 100%;
    }

    /* Remove horizontal line on smaller screens */
    .timeline-custom::before {
        display: none;
    }

    .timeline-custom-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 50px;
    }

    .timeline-custom-item .icon {
        margin-right: 20px;
        position: relative;
        left: 0;
    }

    /* Add a small vertical line between the icon and content */
    .timeline-custom-item .line {
        display: block;
        width: 2px;
        height: 30px;
        background: #3498db;
        margin-left: 10px;
        margin-right: 10px;
        border-left: none;
    }

    .timeline-custom-item .dot {
        display: none; /* Hide the dot on smaller screens */
    }

    .timeline-custom-item .content {
        text-align: left;
        margin-top: 0;
        margin-left: 0;
        width: 100%;
    }

    h5 {
        font-size: 16px;
    }

    p {
        font-size: 12px;
    }
}

/** End of timeline styles */

/** Case studies section styles */
.case-studies__card_header img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}
/**
* Modificari tabs custom pentru pagina de contact
*/
.nav-custom-contact { gap: 50px; }
.nav-custom-contact li.nav-link:not(.active) {
	background-color: #FFFFFF;
}
.paragraph--type--paragraph-tabs ul.tabs-content {
	float: unset!important;
}

/* Modificari pagina de contact (partea de email) */
.font-custom-contact {
	font-size: 18px;
}

@media (max-width: 800px) {
  .font-custom-contact {
	  font-size: 15px;
  }
}


/* BA cards responsiveness on mobile devices */

@media (max-width: 768px){
	.ba-cards-section .views-view-responsive-grid--horizontal {
		display: flex;
		flex-direction: column;
	}
}
.field--item .row .col-lg-6 .paragraph.paragraph--type--paragraph-content p { font-size: 16px; }
@media (min-width: 768px) {
	.ba-card .post-content { min-height: 120px; }
	.ba-card .post-header {
		min-height: 60px;
	}
}

header.wrapper nav.navbar .container .offcanvas .field.field--name-body.field--type-text-with-summary { display: none; }

.cover-section {
    position: relative;
}
.hover-play-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.hover-play-btn > span.fa-solid {
    font-size: 50px;
}

.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, 0.9);
    flex-direction: column;
}

.video-modal-body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-modal-header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px;
    background: rgba(218, 230, 255, 1);
    color: #000;
}

.video-modal-header > button {
    cursor: pointer;
    background: none;
    border: none;
    color: #000;
}

/** Matrix Styling **/

:root {
  --v365-bg-section: #f7f9fc;
  --v365-surface: #ffffff;
  --v365-border: #e5e7eb;
  --v365-border-soft: #edf0f5;
  --v365-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.06);
  --v365-text-main: #111827;
  --v365-text-muted: #6b7280;
  --v365-text-kicker: #9ca3af;

  --dot-sales: #2563eb;
  --dot-crm: #22c55e;
  --dot-sourcing: #ec4899;
  --dot-erp: #6366f1;
  --dot-ops: #0ea5e9;
  --dot-hr: #f59e0b;
  --dot-fin: #10b981;
  --dot-collab: #a855f7;
  --dot-bi: #f97316;
  --dot-strategy: #64748b;
}

.expert-section {
  color: var(--v365-text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}

.expert-matrix {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px 28px 24px;
  box-shadow: 0 0 0 0.05rem rgba(8, 60, 130, 0.06), 0rem 0rem 1rem rgba(30, 34, 40, 0.04);
}

.expert-matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--v365-border-soft);
  margin-bottom: 18px;
}

.expert-matrix-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--v365-text-kicker);
  margin-bottom: 6px;
}

.expert-matrix-title {
  margin: 0;
  font-size: 1rem;
}

.expert-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expert-row {
  display: grid;
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
  gap: 24px;
  padding: 18px 20px;
  border-radius: 12px;
  background-color: var(--v365-surface);
  border: 1px solid var(--v365-border-soft);
}

.expert-role {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.expert-role p {
  margin: 0;
}

.expert-role-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 0.95rem;
  padding-left: 26px;
  line-height: 1.3;
}

.expert-role-main::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: var(--dot-sales);
}

.expert-role-label {
    font-size: 0.8rem;
    letter-spacing: 0.075em;
    color: var(--v365-text-kicker);
    font-weight: 400;
}

.expert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px 7px 24px;
  border-radius: 999px;
  font-size: 0.82rem;
  border: 1px solid var(--v365-border-soft);
  background-color: #f9fafb;
  color: var(--v365-text-muted);
  line-height: 1.4;
}

.tag::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db;
}

.tag.sales::before {
  background: var(--dot-sales);
}

.tag.customer-relationship-management::before {
  background: var(--dot-crm);
}

.tag.sourcing::before {
  background: var(--dot-sourcing);
}

.tag.erp::before {
  background: var(--dot-erp);
}

.tag.operations-and-business-processes::before {
  background: var(--dot-ops);
}

.tag.hr::before {
  background: var(--dot-hr);
}

.tag.financial::before {
  background: var(--dot-fin);
}

.tag.collaboration-productivity-specialists::before {
  background: var(--dot-collab);
}

.tag.business-intelligence-kpi-specialists::before {
  background: var(--dot-bi);
}

.tag.business-strategy::before {
  background: var(--dot-strategy);
}

.expert-row:has(.tag.sales) .expert-role-main::before {
  background: var(--dot-sales);
}

.expert-row:has(.tag.customer-relationship-management) .expert-role-main::before {
  background: var(--dot-crm);
}

.expert-row:has(.tag.sourcing) .expert-role-main::before {
  background: var(--dot-sourcing);
}

.expert-row:has(.tag.erp) .expert-role-main::before {
  background: var(--dot-erp);
}

.expert-row:has(.tag.operations-and-business-processes) .expert-role-main::before {
  background: var(--dot-ops);
}

.expert-row:has(.tag.hr) .expert-role-main::before {
  background: var(--dot-hr);
}

.expert-row:has(.tag.financial) .expert-role-main::before {
  background: var(--dot-fin);
}

.expert-row:has(.tag.collaboration-productivity-specialists) .expert-role-main::before {
  background: var(--dot-collab);
}

.expert-row:has(.tag.business-intelligence-kpi-specialists) .expert-role-main::before {
  background: var(--dot-bi);
}

.expert-row:has(.tag.business-strategy) .expert-role-main::before {
  background: var(--dot-strategy);
}

@media (max-width: 1024px) {
  .expert-section {
    margin: 64px auto;
    padding: 0 20px 72px;
  }

  .expert-matrix {
    padding: 22px 20px 20px;
  }

  .expert-row {
    grid-template-columns: minmax(200px, 230px) minmax(0, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .expert-section {
    padding: 0 18px 64px;
  }

  .expert-matrix-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .expert-row {
    grid-template-columns: 1fr;
    padding: 16px 14px;
  }

  .tag {
    font-size: 0.86rem;
    padding: 7px 14px 7px 24px;
  }
}

@media (max-width: 480px) {
  .expert-matrix {
    padding: 18px 14px 16px;
  }

  .expert-row {
    padding: 14px 12px;
  }

  .tag {
    font-size: 0.9rem;
  }
}


/** Pricing page modal styling **/

  /* Modal Styles */
  .plan-modal{ display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;align-items:center;justify-content:center;padding:20px; }
  .plan-modal.active{ display:flex; }
  .plan-modal-overlay{ position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5); }
  .plan-modal-content{
    position:relative;background:#fff;border-radius:12px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
  }
  .plan-modal-close{
    position:absolute;top:20px;right:20px;background:transparent;border:none;font-size:32px;line-height:1;color:#999;cursor:pointer;padding:0;width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;z-index:1;
  }
  .plan-modal-close:hover{ color:#333; }
  .plan-modal-header{ padding:30px 30px 20px;border-bottom:1px solid #e5e7eb; }
  .plan-modal-header h3{ font-size:1.25rem;margin:0 0 15px;color:#333; }
  .plan-badge{ display:inline-block;background:#86efac;color:#166534;padding:4px 16px;border-radius:999px;font-size:.9rem;font-weight:600; }
  .modal-billing-toggle{ display:flex;gap:10px;align-items:center; }
  .modal-billing-btn{
    padding:6px 16px;border-radius:999px;border:1px solid #d1d5db;background:#fff;color:#6b7280;cursor:pointer;font-size:.875rem;transition:all .2s;
  }
  .modal-billing-btn.active{ background:#86efac;border-color:#86efac;color:#166534; }
  .plan-modal-body{ padding:30px; }
  .modal-section{ margin-bottom:30px; }
  .modal-section-label{ display:block;font-weight:600;color:#333;margin-bottom:15px;font-size:.95rem; }
  .modal-module-tags{ display:flex;flex-wrap:wrap;gap:8px; }
  .modal-module-tag{ display:inline-flex;align-items:center;gap:6px;background:#3b82f6;color:#fff;padding:6px 12px;border-radius:999px;font-size:.875rem; }
  .modal-module-tag-close{ background:none;border:none;color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;padding:0;margin-left:4px; }
  .support-plan-options{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px; }
  .support-plan-card{ border:2px solid #e5e7eb;border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;position:relative; }
  .support-plan-card:hover{ border-color:#3b82f6; }
  .support-plan-card.active{ background:#3b82f6;border-color:#3b82f6;color:#fff; }
  .support-plan-check{
    position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:#fff;color:#3b82f6;display:flex;align-items:center;justify-content:center;
    font-weight:bold;opacity:0;transition:opacity .2s;
  }
  .support-plan-card.active .support-plan-check{ opacity:1; }
  .support-plan-name{ font-weight:600;font-size:1.1rem;margin-bottom:8px; }
  .support-plan-price{ font-size:.9rem;opacity:.8; }
  .modal-section-note{ margin-top:15px;font-size:.875rem;color:#6b7280; }
  .additional-tools-list{ display:flex;flex-direction:column;gap:12px; }
  .add-tool-btn{
    margin-top:15px;padding:10px 20px;background:#f3f4f6;border:1px dashed #d1d5db;border-radius:6px;color:#6b7280;cursor:pointer;width:100%;
    font-size:.9rem;transition:all .2s;
  }
  .add-tool-btn:hover{ background:#e5e7eb;border-color:#9ca3af; }
  .tool-selector{
    margin-top:15px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);
  }
  .tool-selector-header{
    display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #e5e7eb;font-weight:600;
  }
  .tool-selector-close{
    background:transparent;border:none;font-size:24px;color:#999;cursor:pointer;padding:0;width:24px;height:24px;
    display:flex;align-items:center;justify-content:center;line-height:1;
  }
  .tool-selector-close:hover{ color:#333; }
  .tool-selector-list{ padding:10px; }
  .tool-selector-item{
    display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-radius:6px;cursor:pointer;
    transition:background .2s;
  }
  .tool-selector-item:hover{ background:#f3f4f6; }
  .tool-selector-item.disabled{ opacity:.5;cursor:not-allowed; }
  .tool-selector-item.disabled:hover{ background:transparent; }
  .tool-selector-item-name{ font-weight:500;color:#333; }
  .tool-selector-item-price{ font-size:.875rem;color:#6b7280; }
  .selected-tool-item{
    display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f9fafb;border-radius:6px;
    margin-bottom:10px;
  }
  .selected-tool-content{ display:flex;align-items:center;gap:10px;flex:1; }
  .selected-tool-name{ font-weight:500;color:#333; }
  .selected-tool-price{ font-weight:600;color:#333;font-size:.9rem;margin-right:10px; }
  .selected-tool-remove{
    background:#ef4444;color:#fff;border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:.875rem;
    transition:background .2s;
  }
  .selected-tool-remove:hover{ background:#dc2626; }
  .selected-tool-included{ background:#f3f4f6;color:#6b7280;border:none;border-radius:4px;padding:4px 12px;font-size:.875rem;cursor:not-allowed; }
  .plan-modal-footer{
    padding:20px 30px;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  }
  .total-cost-section{ display:flex;flex-direction:column;gap:4px; }
  .total-cost-label{ font-size:.875rem;color:#6b7280; }
  .total-cost-value{ font-size:1.5rem;font-weight:700;color:#333; }
  .contact-team-btn{ padding:12px 24px;white-space:nowrap; }
  @media (max-width:768px){
    .plan-modal-content{ max-height:95vh; }
    .plan-modal-header,.plan-modal-body,.plan-modal-footer{ padding:20px; }
    .support-plan-options{ grid-template-columns:1fr; }
    .plan-modal-footer{ flex-direction:column;align-items:stretch; }
    .contact-team-btn{ width:100%; }
  }