/* UI Elements */

.header-constraint {
  max-width: 500px !important;
}

.shadow-xxlarge {
  box-shadow: 0 32px 64px -12px rgba(16, 24, 40, 0.14);
  border-radius: 10px;
}

.shadow-xlarge {
  box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  border-radius: 10px;
}

.shadow-large {
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.29), 0 0 20px 2px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.shadow-medium, .testimonial {
  box-shadow: 0 3px 20px -1px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  border-radius: 10px;
}

.shadow-small {
  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  border-radius: 10px;
}

.shadow-xsmall {
  box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
  border-radius: 10px;
}

.shadow-xxsmall {
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  border-radius: 10px;
}

.no-margin-top {
  margin-top: 0 !important;
}

.no-margin-bottom {
  padding-bottom: 0.25rem !important;
  margin-top: 0 !important;
}

.no-gap {
  row-gap: 0rem !important;
  column-gap: 0rem !important;
}

.small-gap {
  row-gap: 0.5rem !important;
  column-gap: 0.5rem !important;
}

.medium-gap {
  column-gap: 1rem !important;
}

.wp-site-blocks .button {
  z-index: 4;
  padding-top: var(--wp--custom--navigation-button--padding--top);
  padding-bottom: var(--wp--custom--navigation-button--padding--bottom);
  padding-left: var(--wp--custom--navigation-button--padding--left);
  padding-right: var(--wp--custom--navigation-button--padding--right);
  border-style: solid;
  border-width: 2px;
  border-color: var(--wp--preset--color--primary) !important;
  border-radius: var(--wp--custom--navigation-button--border--radius);
  background-color: var(--wp--preset--color--primary) !important;
  transition: opacity 200ms ease, box-shadow 200ms ease-in-out;
  cursor: pointer;
  color: var(--wp--preset--color--base);
}
.wp-site-blocks .button:active, .wp-site-blocks .button:focus {
  text-decoration: "underline dotted";
}
.wp-site-blocks .button:active {
  text-decoration: "underline dotted";
}
.wp-site-blocks .button:hover, .wp-site-blocks .button:visited {
  border-color: var(--wp--preset--color--primary) !important;
  background-color: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--primary);
}

.button.is-navigation {
  padding: 0.5rem !important;
}

.button-height-medium {
    min-height: 270px;
    box-sizing: content-box !important;;
}
@media screen and (max-width: 420px) {
    .button-height-medium {
        min-height: 200px;
    }
}

.button-width-medium {
    min-width: 250px;
    box-sizing: content-box !important;;
}
@media screen and (max-width: 420px) {
    .button-width-medium {
        min-width: 200px;
    }
}

.box-stretch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch !important;
}

.atop-icon {
  max-width: 280px;
}

.channel-icon {
	padding: 1rem !important;
  align-self: stretch !important;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.app-icon {
	max-width: 100px !important;
}

ul.list-unstyled, ul.w-list-unstyled {
  list-style: none;
}

/* Positioning */

.position-relative {
	position: relative;
}

.position-absolute {
	position: absolute;
}


/* Tables */

.sideways {
  transform: rotate(-90deg);
  transform-origin: center;
  width: 120px;
  text-align: center;
  text-transform: uppercase;
  font-size: 8pt;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: var(--wp--preset--color--base);
  padding-top: 0.25rem;
  float: left;
  left: -73px;
  position: absolute;
}
.sideways p {
  color: var(--wp--preset--color--base) !important;
}

.table-row {
	border-left: 1px solid var(--wp--preset--color--tertiary);
  border-right: 1px solid var(--wp--preset--color--tertiary);
  border-bottom: 1px solid var(--wp--preset--color--tertiary);
}

.table-row-top {
	border: 1px solid var(--wp--preset--color--tertiary);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 0;
}
/* Remove the top radius for small screens
   in case we have buttons that need to line up */
@media screen and (max-width: 420px) {
	.table-row-top {
		border-radius: 0;
	}
}

.table-row-bottom {
	border-left: 1px solid var(--wp--preset--color--tertiary);
  border-right: 1px solid var(--wp--preset--color--tertiary);
  border-bottom: 1px solid var(--wp--preset--color--tertiary);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.table-row-highlight {
	border-color: #F1FBFF; /*#FFF6F6;*/
	border-radius: 10px;
	margin: -0.5rem !important;
	background-color: #F1FBFF; /*#FFF6F6;*/
	padding-left: 2.5rem !important;
	padding-right: 2.5rem !important;
  z-index: 10;
  border-left: 1.5rem solid var(--wp--preset--color--primary);
  position: relative;
}

/* Set the width of the first column */
.column-width-200 {
	width: 230px !important;
}
.table-row-highlight .column-width-200 {
	margin-left: -20px
}

.table-header-button {
  border: 1px solid var(--wp--preset--color--tertiary);
  padding: 1.5rem 2rem !important;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  z-index: 10;
  margin-bottom: -1px !important;
  cursor: pointer;
}
.table-header-button a, .table-header-button a:visited {
  text-decoration: none;
}
.table-header-button.highlighted {
  font-weight: 600;
  border-bottom-color: #fff;
}

.section.hidden,
.table.hidden {
	display: none;
}

.buttons-group {
	width: fit-content;
	background-color: white;
	border-radius: 30px;
	border: 1px solid blue;
}

.buttons-group .group-section-button a,
.buttons-group .group-section-button:hover a {
	border: none;
}
.buttons-group .group-section-button a {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}
.buttons-group .group-section-button:hover a {
	cursor: pointer;
} 
.buttons-group .group-section-button.highlighted a {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	z-index: 1;
}

/* Custom CSS */

.ribbon {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 10px; /* the top offset */
  
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
	margin-block-start: 0rem !important;
}


.pulse > a {
	animation: pulse-animation 2s infinite;
	border: none !important;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(94, 108, 178, 0);
  }
/*   25% {
    box-shadow: 0 0 0 5px rgba(94, 108, 178, 0.4);
  } */
  50% {
    box-shadow: 0 0 0 10px rgba(94, 108, 178, 0.2);
  }
/*   75% {
    box-shadow: 0 0 0 5px rgba(94, 108, 178, 0.4);
  } */
  100% {
    box-shadow: 0 0 0 0px rgba(94, 108, 178, 0);
  }  
}

.tag-white {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 6px;
	font-size: 0.8rem !important;
	font-weight: 500;
	border: 1px solid #fff;
}

.tag-black {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 6px;
	font-size: 0.8rem !important;
	font-weight: 500;
	border: 1px solid #000;
}


/* WordPress page elements */

.wp-block-cover {
  margin-block-start: 0 !important;
}

.wp-site-blocks {
  padding-bottom: 0 !important; /* Allows footer to sit close to main content */
}

footer.wp-block-template-part {
  margin-block-start: 0rem; /* Allows footer to sit close to main content */
}

footer .wp-block-heading {
	font-size: 1rem !important;
	color: var(--wp--preset--color--base) !important;
	font-weight:300 !important;
}
footer a, footer a:visited, footer a:hover {
    text-decoration: none;
    color: var(--wp--preset--color--base) !important;
    font-size: 0.8rem !important;
}

footer a.wp-block-social-link-anchor,
footer a:hover.wp-block-social-link-anchor {
	font-size: 1.25rem !important;
}

.wp-site-blocks a.has-primary-background-color:hover {
    background-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
}

/* This is for the post pages that don't have a close h1 above the h2 elements */
.single-post h2 {
  margin-top: 2rem !important; 
}

h3 a {
	text-decoration: none;
}
h3 a:hover {
	text-decoration: underline;
}

/* Navigation */

header-nws .wp-block-navigation__container,
header .wp-block-navigation__container {
	gap: 0 !important;
}

header-nws .wp-block-navigation-item,
header .wp-block-navigation-item {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

header-nws .wp-block-navigation-submenu .wp-block-navigation-link,
header .wp-block-navigation-submenu .wp-block-navigation-link {
	padding: 0 !important;
	margin: 0 !important;
}

header-nws .wp-block-navigation-link a,
header .wp-block-navigation-link a {
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.333em;
	padding-bottom: 0.33em;
	border-radius: 30px;
        border-color: var(--wp--preset--color--base);
        border-width: 2px;
        border-style: solid;	
}
header-nws .wp-block-navigation-link a:hover,
header .wp-block-navigation-link a:hover {
		background: var(--wp--preset--color--base) !important; 
        border-color: var(--wp--preset--color--base) !important;
        border-width: 2px !important;
        border-style: solid !important;
        color: var(--wp--preset--color--primary) !important;
}

@media (min-width:600px) {
	header-nws .wp-block-navigation-link a:hover,
	header .wp-block-navigation-link a:hover {
        border-color: var(--wp--preset--color--primary) !important;		
	}
}

.pulse > a,
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
	        border-color: var(--wp--preset--color--primary) !important;
        border-width: 2px !important;
        border-style: solid !important;
}

.has-vivid-cyan-blue-to-vivid-purple-gradient-background:hover {
		background: var(--wp--preset--color--base) !important; 
        border-color: var(--wp--preset--color--primary) !important;
        border-width: 2px !important;
        border-style: solid !important;
        color: var(--wp--preset--color--primary) !important;
	
}

/* List style */

.tick-list li {
  list-style: none;
  padding-left: 1.75rem;
  background-image: url(/wp-content/themes/nucleusservices/assets/images/tick.png);
  background-position: left 0px top 7px;
  background-repeat: no-repeat;
  background-size: 1em;
  margin-bottom: 0.5em;
}

/* Button overrides */
.wpform-button {
	background-color: var(--wp--preset--color--primary) !important;
	border-radius: 30px !important;
	border-color: var(--wp--preset--color--primary) !important;
	border-width: 2px !important;
	border-style: solid !important;
	color: var(--wp--preset--color--base) !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	padding-top: .333em !important;
	padding-right: 1.5em !important;
	padding-bottom: .333em !important;
	padding-left: 1.5em !important;
	text-decoration: none !important;
	height: inherit !important;
	min-width: 10em;
}
.wpform-button.full-width {
		min-width: 100%;
}
.wpform-button:hover {
	background: none !important;
	background-color: white !important;
	border-color: var(--wp--preset--color--primary) !important;
	border-width: 2px !important;
	border-style: solid !important;
	color: var(--wp--preset--color--primary) !important;
}
.full-width {
	padding: 5px 0px !important;	
}
.full-width input {
	max-width: inherit !important;
	border-radius: 30px !important;
}