@charset "UTF-8";
/* CSS TOGGLE SWITCH */

.switch-toggle a,
.switch-light span span {
  display: none; }

@media only screen {

  /* Radio Switch
 */
  .switch-toggle {
    position: relative;
    display: block;
    padding: 0 !important;
  }
    .switch-toggle::after {
      clear: both;
      content: '';
      display: table; }
    .switch-toggle *,
    .switch-toggle *:before,
    .switch-toggle *:after {
      box-sizing: border-box; }
    .switch-toggle a {
      display: block;
      transition: all 0.2s ease-out; }
    .switch-toggle label,
    .switch-toggle > span {
      /* breathing room for bootstrap/foundation classes.
     */
      line-height: 2em; }
    /* .switch-toggle input:focus ~ span a, */
}


@media only screen {
    .switch-toggle input {
      position: absolute;
      left: 0;
      opacity: 0; }
    .switch-toggle input + label {
      position: relative;
      z-index: 2;
      display: block;
      float: left;
      padding: 0 0.5em;
      margin: 0;
      text-align: center; }
    .switch-toggle a {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      z-index: 1;
      width: 10px;
      height: 100%; }
    .switch-toggle label:nth-child(2):nth-last-child(4),
    .switch-toggle label:nth-child(2):nth-last-child(4) ~ label,
    .switch-toggle label:nth-child(2):nth-last-child(4) ~ a {
      width: 50%; }
    .switch-toggle label:nth-child(2):nth-last-child(4) ~ input:checked:nth-child(3) + label ~ a {
      left: 50%; }
    .switch-toggle label:nth-child(2):nth-last-child(6),
    .switch-toggle label:nth-child(2):nth-last-child(6) ~ label,
    .switch-toggle label:nth-child(2):nth-last-child(6) ~ a {
      width: 33.33%; }
    .switch-toggle label:nth-child(2):nth-last-child(6) ~ input:checked:nth-child(3) + label ~ a {
      left: 33.33%; }
    .switch-toggle label:nth-child(2):nth-last-child(6) ~ input:checked:nth-child(5) + label ~ a {
      left: 66.66%; }
    .switch-toggle label:nth-child(2):nth-last-child(8),
    .switch-toggle label:nth-child(2):nth-last-child(8) ~ label,
    .switch-toggle label:nth-child(2):nth-last-child(8) ~ a {
      width: 25%; }
    .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(3) + label ~ a {
      left: 25%; }
    .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(5) + label ~ a {
      left: 50%; }
    .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(7) + label ~ a {
      left: 75%; }
    .switch-toggle label:nth-child(2):nth-last-child(10),
    .switch-toggle label:nth-child(2):nth-last-child(10) ~ label,
    .switch-toggle label:nth-child(2):nth-last-child(10) ~ a {
      width: 20%; }
    .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(3) + label ~ a {
      left: 20%; }
    .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(5) + label ~ a {
      left: 40%; }
    .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(7) + label ~ a {
      left: 60%; }
    .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(9) + label ~ a {
      left: 80%; }
    .switch-toggle label:nth-child(2):nth-last-child(12),
    .switch-toggle label:nth-child(2):nth-last-child(12) ~ label,
    .switch-toggle label:nth-child(2):nth-last-child(12) ~ a {
      width: 16.6%; }
    .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(3) + label ~ a {
      left: 16.6%; }
    .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(5) + label ~ a {
      left: 33.2%; }
    .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(7) + label ~ a {
      left: 49.8%; }
    .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(9) + label ~ a {
      left: 66.4%; }
    .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(11) + label ~ a {
      left: 83%; }

  /* iOS Theme
*/
  .switch-ios.switch-light span span {
    color: #888b92; }
  .switch-ios.switch-light a {
    left: 0;
    top: 0;
    width: 2em;
    height: 2em;
    background-color: #fff;
    border-radius: 100%;
    border: 0.25em solid #D8D9DB;
    transition: all .2s ease-out; }
  .switch-ios.switch-light > span {
    display: block;
    width: 100%;
    height: 2em;
    background-color: #D8D9DB;
    border-radius: 1.75em;
    transition: all .4s ease-out; }
  .switch-ios.switch-light > span span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    line-height: 1.875em;
    vertical-align: middle;
    transition: all .2s ease-out; }
    .switch-ios.switch-light > span span:first-of-type {
      opacity: 1;
      padding-left: 1.875em; }
    .switch-ios.switch-light > span span:last-of-type {
      padding-right: 1.875em; }
  .switch-ios.switch-light input:checked ~ span a {
    left: 100%;
    border-color: #4BD865;
    margin-left: -2em; }
  .switch-ios.switch-light input:checked ~ span {
    border-color: #4BD865;
    box-shadow: inset 0 0 0 30px #4BD865; }
  .switch-ios.switch-light input:checked ~ span span:first-of-type {
    opacity: 0; }
  .switch-ios.switch-light input:checked ~ span span:last-of-type {
    opacity: 1;
    color: #fff; }
  .switch-ios.switch-toggle {
    background-color: #FFF;
    border-radius: 2px;
    border: 1px solid #FF6400; }
    .switch-ios.switch-toggle a {
      background-color: #FF6400;
	  margin-top:0;
      border: 2px solid #FFF;
      border-radius: 0;
      transition: all 0.12s ease-out; }
    .switch-ios.switch-toggle label {
      height: 2.2em;
      color: #FF6400;
      line-height: 2.2em;
      vertical-align: middle;
font-weight: lighter;	  }
  .switch-ios input:checked + label {
    color: #FFF; }
	
.switch-toggle label {outline: none !important;}
.saveup-right { position:absolute; right:4%; }
.saveup-3m { position:absolute; left:37%; }

@media (max-width: 360px) {
  .switch-ios.switch-toggle label {font-size:12px; }
  .saveup-right { right:3%; }
}

/* plan css 20220823 */
.plan-box { height:100%; border:1px #fbfbfb solid; border-radius:6px; overflow:hidden; background:#f6f6f6; }
.plan-box.red-label, .plan-box.orange-label, .plan-box.gold-label {  border:1px #efefef solid; background:#FFF; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); }

.planbadge { color:#969595; border:#969595 1px solid; border-radius:2px; padding:2px 5px; font-weight:normal; cursor:pointer; }
.plan-box .plan-btn { font-size:14px; padding:5px 20px; width:100%; background:#FFF; }
.plan-box .btn { width:100%; background:#FFF; }
.plan-box.red-label .plan-btn { color:#FFF; border:#E31E32 1px solid; background:#E31E32; }
.plan-box.orange-label .plan-btn { color:#FFF; border:#FF6400 1px solid; background:#FF6400; }
.plan-box.gold-label .plan-btn { color:#FFF; border:#c69c6c 1px solid; background:#c69c6c; }
.plan-box .d-flex { margin:4px 0; line-height:20px; }
.tooltip-inner { text-align: left; }
#dcselect, #routeselect {
  border: #FF6400 1px solid;
  border-radius: 2px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url("https://www.layerstack.com/assets/img/caret.svg") no-repeat right 5px center transparent;
  background-size: auto;
  background-size: 8px;
  padding-right: 18px;
}
.cat-switch { background:rgba(249, 249, 249, 0.4); padding:10px 5px; border-radius:10px 10px 0 0; color:#FFF; }
.cat-switch:hover { background:rgba(249, 249, 249, 0.6); }
.cat-switch.active { background:rgba(249, 249, 249, 1); padding:20px 5px; border-radius:10px 10px 0 0; }
.cat-switch .plan-cat{ fill:none;stroke:#FFFFFF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10; }
.cat-switch .plan-cat2{ fill:#FFFFFF; }
.cat-switch.active { color:#E31E32; }
.cat-switch.active .plan-cat { stroke:#E31E32; }
.cat-switch.active .plan-cat2 { fill:#E31E32; }
.cloud-type-switch { opacity:0.5; }
.cloud-type-switch:hover, .cloud-type-switch.active { opacity:1; border-bottom:#FF6400 3px solid; position:relative; }
.cloud-type-switch:hover .font-grey-v2, .cloud-type-switch.active .font-grey-v2 { color:#FF6400; }
.cloud-type-switch.active:after { 
    content: "";
    display: block;
    border: 12px solid rgba(249, 249, 249, 0.4);
    border-bottom-color: #FF6400;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -12px;
}

.shadowtag { color:#969595; border-left:#969595 8px solid !important; }
.shadowtag:hover, .shadowtag.active { color:#E31E32; }
.shadowtag.active {box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2); border-left:#E31E32 8px solid !important;}
.shadowtag .badge { background:#ccc; font-weight:normal;}
.shadowtag:hover .badge, .shadowtag.active .badge { background:#E31E32; }

.display-sw-box, .display-sw-table { color:#CCC; cursor:pointer; }
.display-sw-box:hover, .display-sw-table:hover, .display-sw-box.active, .display-sw-table.active { color:#232C3B; }
.plan-table thead tr th { background:#BCBCBC; color:#FFF;  padding:15px 20px; }
.plan-table td { border-bottom:#CCC 1px solid; padding:5px 20px; height:67px;}
.plan-table td strong { font-size:16px; }
.plan-table tr:last-child td { border-bottom:0px none; }

			.ribbon-container {
				position: absolute;
				left: -35px;
				overflow: visible; /* so we can see the pseudo-elements we're going to add to the anchor */
				font-size: 12px; /* font-size and line-height must be equal so we can account for the height of the banner */
				line-height: 12px;
				font-weight:lighter;
				z-index:2;
			}
			.ribbon-container:before {
				content:"";
				height: 0;
				width: 0;
				display: block;
				position: absolute;
				bottom: -2px;
				right: -10px;
				border-top: 10px solid rgba(0,0,0,.3); /* These 4 border properties create the first part of our drop-shadow */
				border-bottom: 10px solid rgba(0,0,0,.3); 
				border-left: 10px solid rgba(0,0,0,.3);
				border-right: 10px solid transparent;
			}
			.ribbon-container:after { /* This adds the second part of our dropshadow */
				content:"";
				height: 2px;
				background: rgba(0,0,0,.3);
				display: block;
				position: absolute;
				bottom: -2px;
				right: 10px;
				left:8px;
			}
			.ribbon-container a {
				display:block;
				padding:3px;
				padding-left:25px;
				padding-right:5px;
				position:relative; /* allows us to position our pseudo-elements properly */
				background:#E31E32;
				overflow:visible;
				/* height:18px; */
				margin-left:5px;
				color:#fff;
				text-decoration:none;
			}
			.ribbon-container a:after { /* this creates the "folded" part of our ribbon */
				content:""; 
				height: 0;
				width: 0;
				display:block;
				position:absolute;
				bottom:-9px;
				left:0;
				border-top: 10px solid #9c001b; 
				border-left: 10px solid transparent;
			}
			.ribbon-container a:before { /* this creates the "forked" part of our ribbon */
				content:"";
				height: 0;
				width: 0;
				display:block;
				position:absolute;
				top:0;
				right:-9px;
				border-top: 9px solid #E31E32; 
				border-bottom: 9px solid #E31E32; 
				border-right: 9px solid transparent;
				border-left: 9px solid transparent;
			}
			.ribbon-container a:hover {
				background:#FF6400;
			}
			.ribbon-container a:hover:before { /* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
				border-top: 9px solid #FF6400; 
				border-bottom: 9px solid #FF6400;
			}
			
			.ribbon2-container {
				position: absolute;
				right: 10px;
				width:81px;
				overflow: visible; /* so we can see the pseudo-elements we're going to add to the anchor */
				font-size: 12px; /* font-size and line-height must be equal so we can account for the height of the banner */
				line-height: 15px;
				text-align:center;
				font-weight:lighter;
				z-index:2;
			}
			.ribbon2-container a {
				display:block;
				padding:5px;
				position:relative; /* allows us to position our pseudo-elements properly */
				background:#E31E32;
				overflow:visible;
				/* height:18px; */
				margin-left:5px;
				color:#fff;
				text-decoration:none;
			}
			.ribbon2-container a:before { /* this creates the "forked" part of our ribbon */
				content:"";
				height: 0;
				width: 0;
				display:block;
				position:absolute;
				bottom:-10px;
				left:0px;
				z-index:-1;
				border-top: 10px solid transparent; 
				border-bottom: 10px solid transparent; 
				border-right: 38px solid #E31E32;
				border-left: 38px solid #E31E32;
			}
			
			.gold-label .ribbon2-container a {
				background:#c69c6c;
			}
			.gold-label .ribbon2-container a:before {
				border-right: 38px solid #c69c6c;
				border-left: 38px solid #c69c6c;
			}
			.orange-label .ribbon2-container a {
				background:#FF6400;
			}
			.orange-label .ribbon2-container a:before {
				border-right: 38px solid #FF6400;
				border-left: 38px solid #FF6400;
			}
			
			.ribbon2-container a:hover:before { /* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
				border-right: 38px solid #FF6400;
				border-left: 38px solid #FF6400;
			}
			.ribbon2-container a:hover {
				background:#FF6400;
			}
			
			.promo-label { 
			    color:#e9c881 !important; 
				background:#555; 
				background-image: 
				linear-gradient(120deg, 
				#222 0%, 
				#666 40%, 
				#666 60%,
				#222 100%);
			}
			.promo-label .ribbon-container a {
				background-image: 
				linear-gradient(120deg, 
				#996d0c 0%, 
				#e9c881 40%, 
				#e9c881 60%,
				#b08934 90%,
				#b08934 100%);
				text-shadow: 1px 1px 2px #996d0c;

			}
			.promo-label .ribbon-container a:before { /* this creates the "forked" part of our ribbon */
				border-top: 9px solid #b08934; 
				border-bottom: 9px solid #b08934; 
				border-right: 9px solid transparent;
				border-left: 9px solid transparent;
			}
			.promo-label .planbadge { color:#DDD; border:#DDD 1px solid; border-radius:2px; padding:2px 5px; font-weight:normal; cursor:pointer; }
			.promo-label .compare-container {
				background: #e9c881 ;
				background-image: -webkit-repeating-linear-gradient(left, rgba(228, 201, 144, 0) 0%, rgba(239, 246, 167, 0) 3%, rgba(228, 201, 144, .1) 3.75%),
    -webkit-repeating-linear-gradient(left, rgba(228, 201, 144, 0) 0%, rgba(255, 238, 170, 0) .6%, rgba(228, 201, 144, .15) 1.2%),
    
    linear-gradient(180deg, #a7853a 0%, 
    #e9c881 47%, 
    #996d0c 53%,
    #e9c881 100%);
				color:#FFF;
				text-shadow: 1px 1px 2px #996d0c;
			}
			
.viewpricing { color:#FFF; font-size:12px; padding:2px 5px; border:#FFF 1px solid; border-radius:2px; text-align:center; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); }
.viewpricing:hover { color:#FFF;}
			
.tab,
.tab:link,
.tab:hover {
  display: inline-block;
  color: #CCC;
  text-shadow: 1px 1px 2px #996d0c;
  text-decoration: none;
  padding: 2px 0;
  padding-left: 15px;
  min-width: 285px;
  position: relative;
}

.tab {
  transform: translateY(20px);
  transition: all 0.2s ease-out;
}

/*
.tab:hover {
  transform: translateY(15px);
  z-index: 100;
}
*/

.tab::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transform: scale(1.35, 1.1) perspective(0.4em) rotateX(1.5deg);
  transform-origin: bottom left;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.tab-1::before {
  background: #FFF;
background-image: 
    
    linear-gradient(180deg, #a7853a 0%, 
    #e9c881 40%, 
    #996d0c 48%,
    #e9c881 100%);  
  box-shadow: 1px -2px 3px 1px rgba(0,0,0,.08);
}
			
			
			
	.sticker { position:absolute; right:30px; bottom:70px; }
	.sticker img {height:30px;}
	table .sticker { position:absolute; right:30px; bottom:80px; }
	
	.red-label .font-tick { color:#E31E32; }
	.gold-label .font-tick { color:#c69c6c; }
	.orange-label .font-tick { color:#FF6400; }
	
	.catswitch { background: url("https://www.layerstack.com/assets/img/caret.svg") no-repeat right 5px center #FFF; background-size: 8px; padding-right: 18px; }