:root {


  --nav: #F0F0FF;
  --navlink: #5C5AD2;
  --navactive: #5C5AD2;
  --navhover: #F0F0FF;
  --navhovertext: #262727;
  --modal: #F0F0FF;
  --button: #5C5AD2;

  --ghost: #FFE027;
  --sidebar: #F5F6F4;
  --tint: #EAF1FB;
  --hover: #FFE026;
  --delete: #F25F25;


  --bs-primary: #272727!important;
  --bs-primary-rgb:252, 238, 202!important;
  --bs-link-color:#272727!important;
  --bs-link-hover-color:#6f5718!important;
  --bs-link-color-rgb:25, 240, 50 !important;
  --bs-link-hover-color-rgb:12, 145, 28;
  --bs-nav-pills-link-active-bg: #19f032 !important;
}

.hover-tr tr:hover h6 a, h6 > a:hover {
    color: var(--navactive)!important;
}

#counter {
    font-size: 12px;
    color: #687483;
    position: relative;
    text-align: right;
    max-width: 50px;
    float: right;
    top: -28px;
    right: 8px;
    width: 50px;
}

body.data-editor {background-color:var(--nav)!important;}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a, .h1 > a, .h2 > a, .h3 > a, .h4 > a, .h5 > a, .h6 > a {
    color: var(--navactive);
}

a {
    color: var(--navactive);
    text-decoration: none;
}

a:hover {color: var(--navhover);}
#captureDesktop a:hover, .cb-container a:hover{color:unset} 

.bg-nav {background-color: var(--navactive)}
.navbar-expand-md {height:60px; background-color:var(--nav)}
.navbar-expand-md .navbar-nav .nav-link {line-height: 28px; color:var(--navlink);font-weight: 500; transition: none;}
.navbar-expand-md .navbar-nav .nav-link i: {display:none}
.navbar-expand-md .navbar-nav .nav-bc i: {display:inline-block}
.navbar-expand-md .navbar-nav .nav-bc {color:var(--navactive); 
outline: solid 1px var(--navactive); border-radius: 17px; 
outline-offset: -1px;
}
.navbar-expand-md .navbar-nav .nav-bc:hover {outline:0px; outline-offset: 0px}

.navbar-nav .nav-item a:hover {background-color: var(--navhover); color:var(--navhovertext); border-radius: 17px;}
.navbar-expand-md .nav-item {margin-right:8px;}
.navbar-nav .nav-item .active, .navbar-nav .nav-item .active:hover {background-color: var(--navactive); color:var(--nav); border-radius: 17px;}
.navbar-nav .nav-item .active i {display:inline-block}

.navbar-toggler .navbar-toggler-animation span {background-color:var(--navactive);}
.navbar-toggler {padding: 8px 10px 0px 0px;}

@media (max-width: 767.98px) {
    #navbarCollapse .nav-item {background-color: unset}
    #navbarCollapse .nav-item .active {background-color: unset; color: var(--navlink);}
    #navbarCollapse .nav-item .active:hover {color: #000;}
    #navbarCollapse .nav-item a:hover{background:unset; color:#000}
}

nav {
  transition-duration: 0s;
}

.navbar-expand-md .dropdown-toggle:after {
    content: "\F282";
    font-family: "bootstrap-icons";
    margin-left: 0.35rem;
    font-weight: 900;
    vertical-align: middle;
    border: none;
}


#back-to-dash {margin-right: 15px; width: 36px;}
#back-to-dash i {display:inline-block!important; color:var(--navactive);     margin-left: -6px;}

.nav-icon {
        font-size: 18px;
        color: var(--navlink);
        border-radius:30px;
        height: 37px;
}
.nav-icon:hover {color: var(--navactive);}  


.c-logo img {height:28px; max-width:unset; }

.c-logo {
    padding-left: 5px!important;
    padding-right: 8px!important;
}

.me-auto {padding-top:2px}

.star {font-size:18px; color:var(--navactive);}
.star:hover {color:var(--navhover);}

#charCount {padding-right:44px}
.modal-header {background-color:var(--nav)}
.modal-header h5 {color:var(--navlink)}
.modal-title {font-size:1.1rem!important;}
.modal-footer {background-color:var(--modal); justify-content: flex-start;}
.modal-content .btn-secondary-soft {background:unset; border-radius: 25px;}

.main-content {background-color: #fff; padding:0; padding-top:60px}
.main-content-preview {background-color: var(--sidebar); padding-bottom:60px}
.main-content-dashboard {max-width: 800px; padding-bottom:60px}

.lower-decks {background-color: var(--sidebar); min-height: calc(100vh - 60px)!important;}

.pagination-primary-soft .page-item.active .page-link {
    background-color:var(--navactive);
}
.pagination-primary-soft .page-link:hover {background-color:var(--navhover);}

#current-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.hide-notification {
    -webkit-animation: cssAnimation 5s forwards; 
    animation: cssAnimation 5s forwards;
}

.alert-dismissible {
    z-index: 1;
    position: absolute;
    bottom: 10px;
    right: 24px;
    width: 350px;
}

body.email .alert-dismissible {bottom:unset;
 top:130px;}
 
@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;} 
}

.w-100 {margin:0 auto;}

.back-top {
    background: var(--nav);
    color: black;
    border-radius: 100%;
}

.back-top:hover {
    background: var(--navactive);
    color: var(--nav);
}
.hover-tr td {padding:10px 14px 10px 10px}
/* .hover-tr tr:hover {background-color:var(--nav);} */

.email-item {float:left; width:173px; border:1px solid #EFF1F2;
  margin-right:10px;
  overflow:hidden;
  border-radius: 8px;
  }

.email-item .preview {
  width: 180px; height: 180px;
  overflow: hidden;
  background-color:#fff; 
}

.updown {cursor: ns-resize}

.email-item .preview iframe {
  border: 0px;
  pointer-events: none;
  width: 600px; height: 700px;
  transform: scale(.285); transform-origin: 0 0;
}

.pointer {cursor:pointer;}
.pointer-help {cursor:help;}
.preloader {background-color: #ffffffd6}
.preloader-item .text-primary {color:var(--nav)!important;}
.btn-dark:hover, .btn-dark-soft:hover, .btn-outline-dark:hover{border-color:var(--navactive)!Important; color:var(--nav)!important}
.btn-dark {border-radius:20px}
.btn-group .dropdown-toggle-split {padding-right:16px}

.btn-group .btn-outline-dark {
    padding-left:20px;
    padding-right:14px;
    border-top-left-radius: 20px!important;
    border-bottom-left-radius: 20px!important;
}

.btn-group .btn-dark-soft {
    border-top-right-radius: 20px!important;
    border-bottom-right-radius: 20px!important;
}


.btn-group a.btn-dark-soft {
    padding-left:20px;
    border-top-left-radius: 20px!important;
    border-bottom-left-radius: 20px!important;
    border-top-right-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}

.form-control:focus {
    border-color: #EFF1F2;
}


.accordion.accordion-bg-dark .accordion-button {
    background: var(--nav)!important;
}

.accordion.accordion-bg-dark .collapsed {
    background: #FCEECA!important;
     color:var(--navactive)!important;
}

.accordion-inactive::before, .accordion-inactive::after {display:none!important}

.template-title, .accordion-button {
    color:var(--navactive)!important;
    font-size:16px;
}
.template-badge {
    float:right;
    margin-top:-3px!important;
}

.sticky-top {
    z-index: 1;
}

body.dashboard, body.login, body.home {background-color: var(--nav);}



.ctaArrow:hover:before {
    height: 100%;
    background-position-x: calc(100% - var(--shift-distance)*3.5);
    left: calc(var(--shift-distance)*-4);
    -webkit-transition: left .3s cubic-bezier(.4,1.7,.7,.8),right .3s ease,background-position .3s ease;
    -o-transition: left .3s cubic-bezier(.4,1.7,.7,.8),right .3s ease,background-position .3s ease;
    transition: left .3s cubic-bezier(.4,1.7,.7,.8),right .3s ease,background-position .3s ease;
}

.ctaArrow:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    left: calc(100% - 2rem);
    border-radius: 1rem;
    height: 2rem;
    z-index: -1;
    // background-image: url(/site/templates/styles/icons/arrow-right.svg);
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9 10.2H1V8.2H14.9L9.3 2.4L10.8 1L18.4 9.2L10.8 17.4L9.3 16L14.9 10.2Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 0.4375rem);
    background-position-y: calc(100% - 0.4375rem);
    background-size: 1.125rem;
    background-color: #ffe027;
    -webkit-transition: left .3s cubic-bezier(.34,1.2,.64,1),right .3s ease,background-position .3s ease;
    -o-transition: left .3s cubic-bezier(.34,1.2,.64,1),right .3s ease,background-position .3s ease;
    transition: left .3s cubic-bezier(.34,1.2,.64,1),right .3s ease,background-position .3s ease;
}

.ctaArrow {
    margin-left:10px;
    min-width:120px;
    color: var(--navactive);
    --shift-distance: 0.25rem;
    display: inline-block;
    font-weight: 400;
    line-height: 2rem;
    text-decoration: none;
    position: relative;
    padding-right: 2.5rem;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    z-index: 1;
    -webkit-transition: color .15s ease-in-out,-webkit-transform .3s ease;
    transition: color .15s ease-in-out,-webkit-transform .3s ease;
    -o-transition: color .15s ease-in-out,transform .3s ease;
    transition: color .15s ease-in-out,transform .3s ease;
    transition: color .15s ease-in-out,transform .3s ease,-webkit-transform .3s ease;
    border-radius: 2em;
}

body.login .ctaArrow {min-width:250px;}

.ctaArrow:hover {
    color: var(--navactive);
}


.ctaArrowLink:hover:before {
    height: 100%;
    background-position-x: calc(100% - var(--shift-distance)*3.5);
    right: calc(var(--shift-distance)*-10);
    -webkit-transition: right .3s cubic-bezier(.4,1.7,.7,.8),left .3s ease,background-position .3s ease;
    -o-transition: right .3s cubic-bezier(.4,1.7,.7,.8),left .3s ease,background-position .3s ease;
    transition: right .3s cubic-bezier(.4,1.7,.7,.8),left .3s ease,background-position .3s ease;
}

.ctaArrowLink:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: calc(100% - 2rem);
    border-radius: 1rem;
    height: 2rem;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9 10.2H1V8.2H14.9L9.3 2.4L10.8 1L18.4 9.2L10.8 17.4L9.3 16L14.9 10.2Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 0.4375rem);
    background-position-y: calc(100% - 0.4375rem);
    background-size: 1.125rem;
    background-color: #ffe027;
    -webkit-transition: right .3s cubic-bezier(.34,1.2,.64,1),left .3s ease,background-position .3s ease;
    -o-transition: right .3s cubic-bezier(.34,1.2,.64,1),left .3s ease,background-position .3s ease;
    transition: right .3s cubic-bezier(.34,1.2,.64,1),left .3s ease,background-position .3s ease;
}

.ctaArrowLink {
    color: var(--navactive);
    white-space: nowrap;
    font-size: 16px;
    --shift-distance: 0.25rem;
    display: inline-block;
    font-weight: 600;
    line-height: 2rem;
    text-decoration: none;
    position: relative;
    padding-left: 2.5rem;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    z-index: 1;
    -webkit-transition: color .15s ease-in-out,-webkit-transform .3s ease;
    transition: color .15s ease-in-out,-webkit-transform .3s ease;
    -o-transition: color .15s ease-in-out,transform .3s ease;
    transition: color .15s ease-in-out,transform .3s ease;
    transition: color .15s ease-in-out,transform .3s ease,-webkit-transform .3s ease;
    border-radius: 2em;
}

.ctaArrowLink:hover {
    padding-left:1em;
    color: var(--navactive);    
}

.tooltip-arrow {display: none !important;}
.is-tooltip, .tooltip-inner {font-size:13px!important; border-radius: 6px!important; padding: 4px 10px!important;}

.bg {
    background-repeat:no-repeat; 
    background-position: center;
}

.cover {
    background-size:cover;
}

@media only screen and (max-width:970px) {

  .http404 {
    background-size: 350px;
  }
}


/* login */

.funnybackground {height: calc(100vh - 60px)!important;}
.LoginRegisterError {display:none;}
.LoginRegisterLinksForgot, .LoginRegisterLinksLogin, .LoginRegisterLinksLogout, .LoginRegisterLinksProfile, .LoginRegisterLinksRegister {display:none}
#lrp .InputfieldContent  {margin-bottom: 1.6rem !important;}
.pass-require, .form-label {font-weight: 600;}
.detail, .notes, .pw-detail, .pw-notes {
    font-size: .875rem;
}
.pass-confirm, .pass-scores {line-height:48px}
body.login .input-group-text {height:50px}


/* home */

.followContent {padding-top:80px; z-index:0}

#cookie_bootbox .modal-dialog {
        position: absolute;
        right: 20px;
        bottom: 0px;
}
#cookie_bootbox .modal-dialog .privacywire-text p {margin:0px;}
#cookie_bootbox .modal-header {display:none!important;}
#cookie_bootbox .modal-footer {background-color: var(--nav);}

/* snippets */

.canvasWidth {
    max-width: 600px;
    margin: 0 auto;
}


/* import */
.csvimport {

overflow-y: scroll;
    white-space: pre;
    min-width: 100%;
    max-width: 100%;
    line-height: calc(3.2rem * var(--font-ratio));
    border: 1px solid #dbd9d2;
    padding-left: 8px;
    transition: box-shadow .2s ease-in-out 0s;

min-height: 200px;
    max-height: 200px;
    resize: none
}


.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: unset!important;
}

/* stats */
.accordion-flush .accordion-button {
  padding: 1rem 1rem;
  background-color: var(--nav);
  color:#24292D;
}

.accordion-flush .accordion-button:not(.collapsed) {
    color: #fff!important;
    background-color: var(--navactive);
}

.input-group-text {width:48px}


/* popup */

/* Popup background */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1021;
}

/* Popup content */
.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: left;
    width: 80%;
    max-width: 800px;
    position: relative; /* To position close icon inside */
}

.popup video {
    width: 100%;
    height: auto;
}

/* Close icon inside the popup content */
.popup-content .close {
    position: absolute;
    top: 10px;
 /*   color:#5c5ad3; */
    right: 10px;
/*    font-size: 24px;*/
    cursor: pointer;
}

.popup-content.scrollable {
    max-height: 85vh; /* 80% of the viewport height */
    overflow-y: auto;
}

.table_component {
    overflow: auto;
    width: 100%;
}

.table_component table {
    border: 1px solid #dededf;
    height: 100%;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: left;
}


.table_component th {
    border: 1px solid #dededf;
    background-color: #eceff1;
    color: #000000;
    padding: 5px;
    font-size:12px;
}

.table_component td {
    border: 1px solid #dededf;
    background-color: #ffffff;
    color: #000000;
    padding: 5px;
    font-size:12px;
}