:root {
        --brandcolor-primary: #188016;  
        --brandcolor-secondary: #05D259;  
        --brandcolor-background: #F8F8F8;  
	--brandcolor-font: #464646;  
	--brand-font: Heebo;
	--brand-font-size: 16px;
	--border-radius-standard: 4px;
}

html {background-color: #ffffff;}

.sc-body { color: var(--brandcolor-font); background-color: #ffffff;} 
.sc-content {width: 100%; }
.sc-staticpage {margin-top: 20px; margin-bottom: 20px; margin-left: 10%; margin-right: 10%;}

.sc-navbar { color: var(--brandcolor-primary); background-color: #fcfcfc;}
.sc-nav-top {background-color: inherit; box-shadow: 0px 5px 5px silver; }
.sc-nav-top .logo {max-height: 45px; max-width: 300px;}


.sc-nav-side {background-color: inherit; border-style: solid; border-width: 1px; border-color: var(--brandcolor-primary);}
.sc-nav-side .nav-link[data-toggle].collapsed:before {content: "+ ";}
.sc-nav-side .nav-link[data-toggle]:not(.collapsed):before {content: "-- ";}

.sc-nav-foot {background-color: inherit; font-size: .75em;}

.sc-homepage {margin-top: 1px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;}

.sc-section {padding: 10px;}
.sc-section:nth-child(even) {background: var(--brandcolor-background)}
.sc-section:nth-child(odd) {}

.sc-requestpage {margin-left: 0%; margin-right: 0%;}

.sc-slogan {font-family: var(--brand-font); font-size: 4em; color: var(--brandcolor-primary); font-weight: bolder;}

.sc-bo {color: var(--brandcolor-secondary); background-color: inherit;}
.sc-bo-searchbar {}
.sc-bo-menu {color: var(--brandcolor-primary); background-color: inherit; }
.sc-bo-instance-labelvalue {color: var(--brandcolor-font);}
.sc-bo-instance-meta {}
.sc-workflow {color: var(--brandcolor-primary); background-color: inherit;}

.sc-component-control-error {color: red; font-size: .75em;}

.sc-thumbnail {
  border: 1px solid #ddd; /* Gray border */
  border-radius: var(--border-radius-standard);  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 50px; /* Set a small width */
}

.sc-icon {
  /* border: 1px solid #ddd;  Gray border */
  border-radius: var(--border-radius-standard);  /* Rounded border */
  padding: 0px; /* Some padding */
  height: 150px; /* Set a small width */
  /*  box-shadow: 0px 5px 5px silver;  */
}

.sc-workflow-instance-graph {width: 100%; height: 500px;}
.sc-workflow-instance-meta {}

.col-empty, .col:empty, [class^=col-]:empty { display: none; }


.btn-sc {
	color: var(--brandcolor-primary); background-color: var(--brandcolor-background);
	border: 1px solid var(--brandcolor-primary);
}
.btn-sc:hover {
	color: var(--brandcolor-secondary); background-color: var(--brandcolor-background);
	border: 1px solid var(--brandcolor-secondary);
	box-shadow: 0px 5px 5px silver;
}
a:link, a:visited, a:active {
	color: var(--brandcolor-primary); background-color: inherit; /* var(--brandcolor-primary)  inherit; */
}

a:focus, a:hover, .dropdown-menu > a:hover  {     
	color: var(--brandcolor-secondary); background-color: inherit;
	background-image: none;
}




.dropdown-menu, .dropdown-item, {
	color: inherit; background-color: var(--brandcolor-background);
}



.card-header {
	background-color: var(--brandcolor-background); 
	/* color: var(--brandcolor-primary); border-style: solid; border-width: 1px; border-color: var(--brandcolor-primary); */ 
}
.card-body {}
.card-footer {}

.faq-category {margin: 2em; display: flex; flex-flow: nowrap; justify-content: space-between; align-items: center;}
.faq-category span {padding: 1em;}
.faq-category::before, .faq-category::after {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  content: " ";
  height: 0px;
  border-bottom: 5px solid var(--brandcolor-primary);
}
.faq-list {margin: 25px;}
.faq-item {border-bottom: 1px solid var(--brandcolor-primary); background-color: inherit; }
.faq-item-header {border: none; background-color: inherit; margin: 10px;}
.faq-item-header .fa {transition: .3s transform ease-in-out;}
.faq-item-header .collapsed .fa {transform: rotate(-90deg);}
.faq-content {margin-bottom: 10px; margin-left: 20px;}

.icon {height: 30px; width: 30px;}

.blog-item {box-shadow: 0px 5px 5px silver; margin-top: 10px; margin-bottom: 10px;}
.blog-item-header {border:none; background-color: inherit; margin: 10px; }
.card-item-picture {border-radius: var(--border-radius-standard) var(--border-radius-standard) 0px 0px; height:200px; width:100%; background-position: center center;  background-repeat: no-repeat; background-size: cover; overflow:hidden;}
.blog-date {}
.blog-title {}
.blog-text {}


.sc-card {box-shadow: 0px 5px 5px silver; margin-top: 10px; margin-bottom: 10px;}
.sc-card-body {Padding: 0.5rem;}




.x-modal-backdrop {
  z-index:1020; 
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  padding-top: 100px; /* Location of the box */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.255); /* Black background with opacity */
}
.x-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 90vh;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

.border-dashed {border-style: dashed;}
.cursor-pointer {cursor: pointer;}


/* Frame 31279 */
.speech-bubble {
    border-radius: 20px;
    background: var(--Speech-Bubble, linear-gradient(180deg, #FFF 0%, #E9E9E9 100%));
    
    /* Speech Bubble */
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}


.signature-pad {
  min-height: 50px;
  min-width: 100px;
  position:relative;
}

.signature-pad-canvas {
  border-color: var(--brandcolor-secondary);
  border-style: dashed;
  border-radius: var(--border-radius-standard);
}

.signature-pad-btn {
  background-color: #fff;
  color: var(--brandcolor-secondary);
}


label.required:after {content: ' *'; color: #F54538;}
.custom-checkbox.required:after {content: ' *'; color: #F54538;}
hr.hr-short {width:10%; border: 1px solid var(--brandcolor-primary);}

.card-funnel {
  border-radius: 30px;
}
.card-body-funnel {
  background-color: var(--brandcolor-background);
}
.card-footer-funnel:last-child {border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; background-color: #F54538;}
.btn-funnel {border-radius: 30px;}
.btn-funnel:hover {
 	box-shadow: 0px 5px 5px silver;
}

.btn-funnel-next {color: #FFFFFF; background-color: #464646; padding: 10px 20px;}
.btn-funnel-next:hover {color: #FFFFFF; background-color: #464646;}

.btn-funnel-checkout {color: #FFFFFF; background-color: #464646; padding: 10px 20px; margin: 30px;}
.btn-funnel-checkout:hover {color: #FFFFFF; background-color: #464646;}

.progress-border {border: 2px solid var(--brandcolor-secondary); border-radius: 30px; padding: 10px;}
.progress-funnel {border-radius: 30px; height: 30px; background-color: #FFFFFF;}
.progress-bar-funnel {background-color: var(--brandcolor-secondary);  border-radius: 30px;}


.brand-primary {
  color: var(--brandcolor-primary);
}
.bg-brand-primary {
  background-color: var(--brandcolor-primary);
}

.border-brand {
  border: 2px solid; 
  border-radius: var(--border-radius-standard);  /* Rounded border  */
}

.border-rounded-30px {
  border-radius: 30px;  /* Rounded border 30px */
}

.border-brand-primary {
  border-color: var(--brandcolor-primary);
}


.brand-secondary {
  color: var(--brandcolor-secondary);
}
.bg-brand-secondary {
  background-color: var(--brandcolor-secondary);
}
.border-brand-secondary {
  border-color: var(--brandcolor-secondary);
}
.brand-shadow {
  box-shadow: 0px 5px 5px silver;
}
.brand-shadow-primary {
  box-shadow: 0px 5px 5px var(--brandcolor-primary);
}
.brand-shadow-secondary {
  box-shadow: 0px 5px 5px var(--brandcolor-secondary);
}

.avatar-md {
  max-height: 80px;
}
.avatar-sm {
  max-height: 40px;
}


.card-header-funnel-swing:first-child {
  border-top-left-radius: 30px; 
  border-top-right-radius: 30px; 
  padding: 50px;
  /* background-color: #F54538; */
  background-image: url('../img/funnel-header-background.svg');
  background-repeat: no-repeat;
  /* background-attachment: fixed;  */
  /* background-size: 100% 100%;  */
  background-size: cover;
}

.captain-avatar {
  /* background-color: #F54538; */
  image: url('../img/captain-avatar.svg');
  background-repeat: no-repeat;
  /* background-attachment: fixed;  */
  /* background-size: 100% 100%;  */
  background-size: cover;
}

.font-size-2em {
  font-size: 2em;
}