/* plugin version 1.0 */
.clear {
  clear: both;
}

table.cnss-social-icon tr td,
table.cnss-social-icon,
table.cnss-social-icon tr {
  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

  vertical-align: middle !important;

  background: none !important;
}

table.cnss-social-icon tr td img {
  max-width: 100% !important;
}

table.cnss-social-icon tr td a img,
table.cnss-social-icon tr td a:hover img,
table.cnss-social-icon tr td a img:hover {
  border: none !important;
}

table.cnss-social-icon tr td a img:hover,
table.cnss-social-icon tr td a:hover img {
  max-width: 100% !important;
}

ul.cnss-social-icon {
  margin: 0;

  padding: 0;

  list-style-type: none;
}

/* ul.cnss-social-icon li a img {

    display: inherit !important;

} */

ul.cnss-social-icon li a {
  border: none !important;

  text-decoration: none !important;
}

ul.cnss-social-icon li:after,
ul.cnss-social-icon li:before {
  display: none !important;

  content: inherit !important;
}

ul.cnss-social-icon li {
  vertical-align: middle;

  float: none !important;

  width: auto !important;

  margin: 0 !important;

  list-style-type: none !important;

  border: none !important;

  padding: 0 !important;

  background: none !important;
  line-height: normal;
}

/* font-awesome-icons-settings */

ul.cnss-social-icon li.cn-fa-icon a {
  display: block !important;

  text-align: center !important;

  -webkit-transition: width 0.5s !important;

  transition: all 0.5s !important;

  box-sizing: border-box !important;

  background-color: #999999 !important;
}
ul.cnss-social-icon li img {
  vertical-align: middle;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-dropbox {
  background-color: #007ee5 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-foursquare {
  background-color: #f94877 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-google-plus {
  background-color: #dc4a38 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-google-plus-circle {
  background-color: #dc4a38 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-google-plus-official {
  background-color: #dc4a38 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-google-plus-square {
  background-color: #dc4a38 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-google-wallet {
  background-color: #dc4a38 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-google {
  background-color: #4285f4 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-internet-explorer {
  background-color: #0078d7 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-pinterest {
  background-color: #cb1f27 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-pinterest-p {
  background-color: #cb1f27 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-pinterest-square {
  background-color: #cb1f27 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-slideshare {
  background-color: #0077b5 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-trello {
  background-color: #0079bf !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-windows {
  background-color: #0078d7 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-yelp {
  background-color: #af0606 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-youtube {
  background-color: #cd201f !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-youtube-play {
  background-color: #cd201f !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-youtube-square {
  background-color: #cd201f !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-apple {
  background-color: #333333 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-bluetooth {
  background-color: #0082fc !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-drupal {
  background-color: #0073ba !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-facebook {
  background-color: #3b5998 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-facebook-f {
  background-color: #3b5998 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-facebook-official {
  background-color: #3b5998 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-facebook-square {
  background-color: #3b5998 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-html5 {
  background-color: #e34c26 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-medium {
  background-color: #00ab6c !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-opera {
  background-color: #f71a2b !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-quora {
  background-color: #a82400 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-reddit {
  background-color: #ff4500 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-spotify {
  background-color: #2ebd59 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-twitter {
  background-color: #1da1f2 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-twitter-square {
  background-color: #1da1f2 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-x-twitter {
  background-color: #000000 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-x-twitter-square {
  background-color: #000000 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-vine {
  background-color: #00b488 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-wordpress {
  background-color: #21759b !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-xing {
  background-color: #005d5e !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-xing-square {
  background-color: #005d5e !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-yahoo {
  background-color: #4102b0 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-css3 {
  background-color: #0c73b8 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-digg {
  background-color: #1b5891 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-edge {
  background-color: #2c74be !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-etsy {
  background-color: #f56400 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-joomla {
  background-color: #ed1c40 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-skype {
  background-color: #00aff0 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-tumblr {
  background-color: #36465d !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-tumblr-square {
  background-color: #36465d !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-whatsapp {
  background-color: #2ab200 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-android {
  background-color: #77c159 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-behance {
  background-color: #005cff !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-behance-square {
  background-color: #005cff !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-dribbble {
  background-color: #e04c86 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-expeditedssl {
  background-color: #000000 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-forumbee {
  background-color: #86ac2f !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-get-pocket {
  background-color: #e84352 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-hacker-news {
  background-color: #ff6600 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-linkedin {
  background-color: #0177b5 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-linkedin-square {
  background-color: #0177b5 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-maxcdn {
  background-color: #ff5b02 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-vimeo {
  background-color: #00b3ec !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-vimeo-square {
  background-color: #aad450 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-github {
  background-color: #000000 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-github-square {
  background-color: #000000 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-git {
  background-color: #f14e32 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-git-square {
  background-color: #f14e32 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-rss {
  background-color: #ff6600 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-instagram {
  background-color: #405de6 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-tripadvisor {
  background-color: #589442 !important;
}

/* added 14th march 2017 */

ul.cnss-social-icon li.cn-fa-icon a.cnss-500px {
  background-color: #0099e5 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-angellist {
  background-color: #7fbb00 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-amazon {
  background-color: #ff9900 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-bandcamp {
  background-color: #629aa9 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-bitbucket {
  background-color: #205081 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-cc-visa {
  background-color: #1a1f71 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-cc-amex {
  background-color: #002663 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-cc-mastercard {
  background-color: #cc0000 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-cc-paypal {
  background-color: #003087 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-cc-stripe {
  background-color: #00afe1 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-codepen {
  background-color: #0ebeff !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-delicious {
  background-color: #3399ff !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-deviantart {
  background-color: #05cc47 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-firefox {
  background-color: #e66000 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-flickr {
  background-color: #0063dc !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-free-code-camp {
  background-color: #006400 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-gitlab {
  background-color: #fca326 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-gratipay {
  background-color: #663300 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-houzz {
  background-color: #7ac142 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-imdb {
  background-color: #f5de50 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-lastfm {
  background-color: #d51007 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-linux {
  background-color: #1793d1 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-meetup {
  background-color: #e0393e !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-odnoklassniki {
  background-color: #ed812b !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-paypal {
  background-color: #003087 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-product-hunt {
  background-color: #da552f !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-scribd {
  background-color: #1a7bba !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-slack {
  background-color: #6ecadc !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-snapchat {
  background-color: #fffc00 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-soundcloud {
  background-color: #ff8800 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-stack-exchange {
  background-color: #1e5397 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-stack-overflow {
  background-color: #f48024 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-steam {
  background-color: #00adee !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-stumbleupon {
  background-color: #eb4924 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-telegram {
  background-color: #0088cc !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-twitch {
  background-color: #6441a5 !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-viadeo {
  background-color: #0099cc !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-wechat {
  background-color: #7bb32e !important;
}

ul.cnss-social-icon li.cn-fa-icon a.cnss-wikipedia-w {
  background-color: #000000 !important;
}

ul.cnss-social-icon li.cn-fa-icon.fade-hover a:hover,
ul.cnss-social-icon li.cn-custom-icon.fade-hover a:hover {
  opacity: 0.5 !important;
}

ul.cnss-social-icon li.cn-fa-icon.bounce-hover a:hover,
ul.cnss-social-icon li.cn-custom-icon.bounce-hover a img:hover {
  animation: bounce 2s infinite !important;
  transition: 500ms ease-in-out;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}

ul.cnss-social-icon li.cn-fa-icon.zoom-hover a:hover,
ul.cnss-social-icon li.cn-custom-icon.zoom-hover a img:hover {
  -moz-transform: scale(1.2) !important;
  -webkit-transform: scale(1.2) !important;
  -o-transform: scale(1.2) !important;
  -ms-transform: scale(1.2) !important;
  transform: scale(1.2) !important;
}

ul.cnss-social-icon li.cn-fa-icon.shadow-hover:hover,
ul.cnss-social-icon li.cn-custom-icon.shadow-hover:hover {
  /* text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000; */
  /* box-shadow: 5px 5px 8px 5px #888888; */
  filter: drop-shadow(5px 5px 15px black);
  transition: 0.5s ease all;
}

ul.cnss-social-icon li.cn-fa-icon.gradient-hover a:hover,
ul.cnss-social-icon li.cn-custom-icon.gradient-hover a img:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    to(#000)
  );
}

ul.cnss-social-icon li.cn-fa-icon.threedeffect-hover a:hover,
ul.cnss-social-icon li.cn-fa-icon.threedeffect-hover a img:hover {
  -webkit-animation: rotateAnimation 10s linear infinite !important;
  animation: rotateAnimation 10s linear infinite !important;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-webkit-keyframes rotateAnimation {
  from {
    -webkit-transform: rotateY(0deg) rotateX(720deg) rotateZ(0deg);
    transform: rotateY(0deg) rotateX(720deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg);
    transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg);
  }
}

@keyframes rotateAnimation {
  from {
    -webkit-transform: rotateY(0deg) rotateX(720deg) rotateZ(0deg);
    transform: rotateY(0deg) rotateX(720deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg);
    transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg);
  }
}
/* 
@media only screen and (max-width: 1023px) {
  ul.cnss-social-icon li.cn-fa-icon a,
  li.cn-custom-icon a img {
    width: 30px !important;
    height: 30px !important;
    padding: 4px 0px !important;
    line-height: 24px !important;
  }

  ul.cnss-social-icon li.cn-fa-icon a i {
    font-size: 16px !important;
  }

  ul.cnss-social-icon li {
    line-height: normal !important;
  }
}

@media only screen and (max-width: 767px) {
  ul.cnss-social-icon li.cn-fa-icon a {
    padding: 4px 0px !important;
    line-height: 20px !important;
  }

  ul.cnss-social-icon li {
    line-height: normal !important;
  }

  ul.cnss-social-icon li.cn-fa-icon a i {
    font-size: 16px !important;
  }
} */
.cnss-social-icon[class*="position-"] {
  position: fixed;
  z-index: 1000;
  margin: 0 !important;
  list-style: none;
  transition: all 0.3s ease-in-out;
}

.cnss-social-icon.position-bottom-left {
  bottom: 0px;
  left: 0px;
}

.cnss-social-icon.position-bottom-right {
  bottom: 0px;
  right: 0px;
}

.cnss-social-icon.position-left-middle {
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
}

.cnss-social-icon.position-right-middle {
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  width: auto !important;
}

.cnss-social-icon.position-bottom-middle {
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile Optimization */

@media (max-width: 768px) {
  .cnss-social-icon[class*="position-"] {
    bottom: 10px !important;

    top: auto !important;

    transform: none !important;
  }

  .cnss-social-icon.position-left-middle,
  .cnss-social-icon.position-right-middle {
    left: 10px;

    right: 10px;
  }
}

@media (max-width: 767px) {
  .cnss-social-icon.position-left-middle {
    top: 50% !important;
    left: 20px;
    right: auto;
    transform: translateY(-50%) !important;
  }

  .cnss-social-icon.position-right-middle {
    top: 50% !important;
    left: auto;
    right: 20px;
    transform: translateY(-50%) !important;
  }

  ul.cnss-social-icon li.cn-fa-icon a.floating-name-link {
    background-color: transparent !important;
  }
}

/* Hover Effects */

.cnss-social-icon[class*="position-"] li {
  transition: transform 0.2s ease;
}

.cnss-social-icon[class*="position-"] li:hover {
  transform: scale(1.1);
}

/* Floating/Sticky */

ul.cnss-social-icon.position-bottom-left li .floating-name-show,
ul.cnss-social-icon.position-left-middle li .floating-name-show {
  display: inline-block;

  position: absolute;

  left: calc(100% + 2px);

  /* 10px gap from the icon */

  top: 50%;

  /* Center vertically */

  transform: translate(-20px, -50%);

  /* Start left and vertically centered */

  opacity: 0;

  transition: transform 0.3s ease, opacity 0.3s ease;

  white-space: nowrap;
}

ul.cnss-social-icon.position-bottom-right li .floating-name-show,
ul.cnss-social-icon.position-right-middle li .floating-name-show {
  display: inline-block;

  position: absolute;

  right: calc(100% + 2px);

  /* 10px gap from the icon */

  top: 50%;

  /* Center vertically */

  transform: translate(20px, -50%);

  /* Start right and vertically centered */

  opacity: 0;

  transition: transform 0.3s ease, opacity 0.3s ease;

  white-space: nowrap;
}

/* Hover state */

ul.cnss-social-icon.position-bottom-left li:hover .floating-name-show,
ul.cnss-social-icon.position-left-middle li:hover .floating-name-show {
  transform: translate(0, -50%);

  opacity: 1;

  pointer-events: auto;
}

ul.cnss-social-icon.position-bottom-right li:hover .floating-name-show,
ul.cnss-social-icon.position-right-middle li:hover .floating-name-show {
  transform: translate(0, -50%);

  opacity: 1;

  pointer-events: auto;
}

span.icon-name {
  text-align: left;
  width: 120px;
}

.cnss-social-icon br,
.cnss-social-icon p {
  display: none;
}

ul.cnss-social-icon li.cn-fa-icon a.floating-name-link {
  background-color: #002663;
}

.cnss_new_prmium p {
  margin: 0px !important;
}

/* new css */
/************************************************************
 * 1. FLOATING WRAPPER
 ************************************************************/
.cnss-floating-wrapper {
  position: relative;
  overflow: visible !important; /* so modal & form are not clipped */
  z-index: 99999;
}

/* keep vertical items full clickable area */
.cnss-social-icon.vertical-layout li > a {
  display: block;
  width: 100%;
  height: 100%;
}

/************************************************************
 * 2. COLLAPSIBLE ARROW
 ************************************************************/
.cnss-social-icon.cnss-collapsible .cnss-toggle-btn {
  background: #000 !important;
  border-radius: 8px 8px 0 0;
  text-align: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cnss-social-icon.cnss-collapsible .cnss-toggle-btn i {
  color: #fff;
  font-size: 14px;
  transition: transform 0.2s ease;
}

/* collapsed state */
.cnss-social-icon.cnss-collapsible.cnss-collapsed li:not(.cnss-toggle-btn) {
  display: none !important;
}
.cnss-social-icon.cnss-collapsible.cnss-collapsed .cnss-toggle-btn i {
  transform: rotate(180deg);
}

/************************************************************
 * 3. “+” BUTTON IN THE BAR
 ************************************************************/
.cnss-more-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
  background: #000 !important;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.cnss-more-btn .cnss-plus-sign {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

/************************************************************
 * 4. FULLSCREEN MODAL FOR EXTRA ICONS
 ************************************************************/
/* base modal overlay */
.cnss-more-modal {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1000000 !important;

  /* plugin may use .show() or toggle classes,
     so cover both cases below */
  display: none;
  align-items: center;
  justify-content: center;
}

/* if JS adds .is-open OR uses jQuery.show() (display:block) */
.cnss-more-modal.is-open,
.cnss-more-modal[style*="display: block"] {
  display: flex !important;
}

/* dark backdrop */
.cnss-more-modal-backdrop {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.55) !important;
}

/* centered white card */
.cnss-more-modal-content {
  position: relative !important;
  z-index: 1000001 !important;

  max-width: 720px !important;
  width: calc(100% - 40px) !important;
  max-height: 80vh !important;
  overflow: auto !important;

  margin: 0 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

/* close button inside modal */
.cnss-more-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #666;
}

/* grid of icons inside modal */
.cnss-more-icons {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  place-items: center;
}

.cnss-more-icons li {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #f6f7f8;
  border-radius: 4px;
}

.cnss-more-icons li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* responsive columns */
@media (max-width: 900px) {
  .cnss-more-icons {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 480px) {
  .cnss-more-icons {
    grid-template-columns: repeat(3, 1fr);
  }
}

/************************************************************
 * 5. TOOLTIP
 ************************************************************/
.cnss-tooltip {
  position: relative;
}

.cnss-tooltip:hover .cnss-tooltip-box,
.cnss-tooltip .cnss-tooltip-box:hover {
  opacity: 1;
  visibility: visible;
}

.cnss-tooltip-box {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0, 0, 0, 0.85);
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 1000001;
  opacity: 0;
  visibility: hidden;
  transition: 0.12s ease-in-out;
}

.cnss-tooltip-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}

.cnss-tooltip-link {
  background: none !important;
  padding: 0 !important;
  display: block !important;
  color: #fff !important;
  text-decoration: underline !important;
  font-weight: 600;
}
.cnss-more-icons .cnss-tooltip:hover .cnss-tooltip-box a,
.cnss-tooltip .cnss-tooltip-box:hover a {
  background: none !important;
}

/************************************************************
 * 6. CONTACT FORM PANEL (SIDE POPUP)
 ************************************************************/
.cnss-form-panel {
  position: absolute; /* relative to .cnss-floating-wrapper */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
  width: 280px;
  z-index: 100000;
  display: none; /* JS shows/hides */
}

.cnss-form-panel-close {
  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  line-height: 1;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cnss-form-panel-close:hover {
  color: #000;
}

.cnss-field {
  margin-bottom: 15px;
}

.cnss-field label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.cnss-field input,
.cnss-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
  transition: border-color 0.3s;
}

.cnss-field input:focus,
.cnss-field textarea:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.cnss-field textarea {
  min-height: 80px;
  resize: vertical;
}

.cnss-form-actions {
  text-align: center;
  margin-top: 20px;
}

.cnss-form-submit {
  background: #0073aa;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  transition: background 0.3s;
  width: 100%;
}

.cnss-form-submit:hover {
  background: #005a87;
}

.cnss-form-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.cnss-form-success {
  color: #28a745;
  text-align: center;
  padding: 20px;
  font-weight: bold;
  font-size: 14px;
}

@media (max-width: 768px) {
  .cnss-form-panel {
    width: 250px;
    padding: 15px;
  }
}
@media (max-width: 480px) {
  .cnss-form-panel {
    width: 220px;
    padding: 12px;
  }
}

/************************************************************
 * 7. FIXED POSITIONS FOR BAR + FORM
 ************************************************************/
/* right-middle */
.cnss-floating-wrapper.position-right-middle {
  position: fixed;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.cnss-floating-wrapper.position-right-middle .cnss-form-panel {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 50px;
}

/* left-middle */
.cnss-floating-wrapper.position-left-middle {
  position: fixed;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.cnss-floating-wrapper.position-left-middle .cnss-form-panel {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 50px;
}

/* bottom-left */
.cnss-floating-wrapper.position-bottom-left {
  position: fixed;
  left: 2px;
  bottom: 2px;
}
.cnss-floating-wrapper.position-bottom-left .cnss-form-panel {
  left: 0;
  bottom: 100%;
  margin-bottom: 10px;
}

/* bottom-right */
.cnss-floating-wrapper.position-bottom-right {
  position: fixed;
  right: 2px;
  bottom: 2px;
}
.cnss-floating-wrapper.position-bottom-right .cnss-form-panel {
  right: 0;
  bottom: 100%;
  margin-bottom: 10px;
}

/* bottom-middle */
.cnss-floating-wrapper.position-bottom-middle {
  position: fixed;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
}
.cnss-floating-wrapper.position-bottom-middle .cnss-form-panel {
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 10px;
}

/* Stop using transform on the wrapper itself */
.cnss-floating-wrapper.position-right-middle,
.cnss-floating-wrapper.position-left-middle,
.cnss-floating-wrapper.position-bottom-middle {
  transform: none !important;
}

/* Vertically center the icon list instead */
.cnss-floating-wrapper.position-right-middle > ul.cnss-social-icon,
.cnss-floating-wrapper.position-left-middle > ul.cnss-social-icon {
  transform: translateY(-50%);
}

/* Bottom middle: horizontal centering only on the list */
.cnss-floating-wrapper.position-bottom-middle > ul.cnss-social-icon {
  transform: translateX(-50%);
}

form.cnss-contact-form input:valid,
form.cnss-contact-form input:not(:placeholder-shown),
form.cnss-contact-form .cnss-field textarea {
  background-color: #f0f8ff !important;
}

/* new css */
/* Vertical "Contact Us" bar like My Sticky Elements */
.cnss-social-icon.cnss-collapsible .cnss-contact-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The purple bar itself */
.cnss-contact-vertical-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px; /* controls how tall the purple bar is */
  background: #6a50ff;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* Rounded corners depending on side */
.cnss-floating-wrapper.position-right-middle .cnss-contact-vertical-inner,
.cnss-floating-wrapper.position-bottom-right .cnss-contact-vertical-inner {
  border-radius: 12px 0 0 12px; /* round left side */
}

.cnss-floating-wrapper.position-left-middle .cnss-contact-vertical-inner,
.cnss-floating-wrapper.position-bottom-left .cnss-contact-vertical-inner {
  border-radius: 0 12px 12px 0; /* round right side */
}

/* Vertical text "Contact Us" */
.cnss-contact-vertical-inner .cnss-contact-label {
  writing-mode: vertical-rl; /* text goes vertically */
  text-orientation: mixed;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* Envelope icon */
.cnss-contact-vertical-inner i {
  font-size: 18px;
}

/* Hover state */
.cnss-contact-vertical:hover .cnss-contact-vertical-inner {
  background: #5840e0;
}