:root {
    --primary-foreground-color-light:          #343333; /* dark black */
    --primary-background-color-light:          #F5F4F0; /* light white */
    --secondary-foreground-color-light:        #FFFFFF; /* light white */
    --secondary-background-color-light:        #87A478; /* dark green */
    --tertiary-foreground-color-light:         #B6927C; /* dark brown */
    --tertiary-background-color-light:         #EAE2DB; /* light brown */
    --primary-accent-foreground-color-light:   var(--primary-foreground-color-light);   /* dark black */
    --primary-accent-background-color-light:   var(--tertiary-background-color-light);  /* light brown */
    --secondary-accent-foreground-color-light: var(--primary-foreground-color-light);   /* dark black */
    --secondary-accent-background-color-light: var(--secondary-foreground-color-light); /* light white */

    --primary-foreground-color-dark:           #87A478; /* light green */
    --primary-background-color-dark:           #0C2320; /* dark black */
    --secondary-foreground-color-dark:         #D9DFDB; /* light gray */
    --secondary-background-color-dark:         #456743; /* dark green */
    --tertiary-foreground-color-dark:          #C0CCAE; /* light green */
    --tertiary-background-color-dark:          #551309; /* dark red */
    --primary-accent-foreground-color-dark:    #D6DFDE; /* light gray */
    --primary-accent-background-color-dark:    #1F2C1E; /* dark green */
    --secondary-accent-foreground-color-dark:  #E8D8CB; /* light brown */
    --secondary-accent-background-color-dark:  #1F2C1E; /* dark green */
}

body.light {
    --toggle-on-bg: #4caf50;
    --toggle-off-bg: #ccc;
    --toggle-thumb-bg: #ffffff;
    --toggle-icon-color: #666;
    --toggle-icon-active-color: #000;
}

body.dark {
    --toggle-on-bg: #7CFFB2;
    --toggle-off-bg: #555;
    --toggle-thumb-bg: #222;
    --toggle-icon-color: #aaa;
    --toggle-icon-active-color: #fff;
}

/* Fonts */
@font-face {
    font-family: 'Montserrat';
    src: url('/_content/TheScript.Shared/fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Merriweather';
    src: url('/_content/TheScript.Shared/fonts/Merriweather-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'BiroScriptPlus';
    src: url('/_content/TheScript.Shared/fonts/BiroScriptPlus.ttf') format('truetype');
}

html, body { font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* General styles */
textarea::-webkit-scrollbar          { width: 0.75em;          /* Width of the scrollbar */ }
textarea::-webkit-scrollbar-thumb    { border-radius: 0.375em; /* Rounded corners for the scrollbar thumb */ }
body.light textarea::-webkit-resizer { border-radius: 0.375em; /* Rounded corners for the scrollbar resizer in the light theme only as the background color of the resizer is always white */ }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Marked as !important to prevent the rule from being overridden by the following
       _content/scss/form/_input-group.scss
       _content/scss/mixins/_border-radius.scss */
input, select, option { border-radius: 2ch !important; }

.content { padding: 2ch 0 0 2ch; border-radius: 4ch; }
h1:focus { outline: none; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
}

.blazor-error-boundary::after { content: "An error has occurred." }

/* Theme colors */
body.light {
    --success-animation-color: var(--primary-foreground-color-light);

    color: var(--primary-foreground-color-light);
    background-color: var(--primary-background-color-light);
    border-color: var(--secondary-foreground-color-light);
}

body.dark {
    --success-animation-color: var(--primary-foreground-color-dark);

    color: var(--primary-foreground-color-dark);
    background-color: var(--primary-background-color-dark);
    border-color: var(--secondary-foreground-color-dark);
}

body.light input { background-color: var(--secondary-accent-background-color-light); }
body.dark input { background-color: var(--secondary-accent-background-color-dark); }

body.light .title a { color: var(--secondary-accent-foreground-color-light); }
body.dark .title a { color: var(--secondary-accent-foreground-color-dark); }

body.light .title a:hover { color: var(--tertiary-foreground-color-light); }
body.dark .title a:hover { color: var(--tertiary-foreground-color-dark); }

/*body.light .top-row { background-color: var(--primary-background-color-light); }
body.dark .top-row { background-color: var(--primary-background-color-dark); }*/

/*body.light #app { background-color: var(--primary-background-color-light); }
body.dark #app { background-color: var(--primary-background-color-dark); }*/

/*body.light #app .content { background-color: var(--primary-accent-background-color-light); }
body.dark #app .content { background-color: var(--primary-accent-background-color-dark); }*/

body.light nav { background-color: var(--primary-background-color-light); }
body.dark nav { background-color: var(--primary-background-color-dark); }

/*body.light .navbar .navbar-brand { color: var(--primary-foreground-color-light); }
body.dark .navbar .navbar-brand { color: var(--primary-foreground-color-dark); }

body.light nav {
    background-color: var(--secondary-accent-background-color-light);
    color: var(--secondary-accent-foreground-color-light);
}

body.dark nav {
    background-color: var(--secondary-accent-background-color-dark);
    color: var(--secondary-accent-foreground-color-light);
}*/

body.light nav {
    /*background-color: var(--secondary-background-color-light);*/
    color: var(--primary-foreground-color-light);
}

body.dark nav {
    /*background-color: var(--secondary-background-color-dark);*/
    color: var(--primary-foreground-color-dark);
}

body.light .nav-item a.active {
    /*border: solid 0.25ch var(--secondary-background-color-light);*/
    color: var(--tertiary-foreground-color-light);
}
body.dark .nav-item a.active {
    /*border: solid 0.25ch var(--secondary-background-color-dark);*/
    color: var(--tertiary-foreground-color-light);
}

body.light .nav-item .nav-link {
    border-color: transparent;
    color: var(--primary-foreground-color-light);
}

body.dark .nav-item .nav-link {
    border-color: transparent;
    color: var(--primary-foreground-color-dark);
}

body.light .menu .nav-link { color: var(--tertiary-foreground-color-light); }
body.dark .menu .nav-link { color: var(--tertiary-foreground-color-dark); }
body.light .menu .nav-link:hover { background-color: var(--tertiary-background-color-light); }
body.dark .menu .nav-link:hover { background-color: var(--tertiary-background-color-dark); }

body.light .nav-item .nav-subitem {
    color: var(--tertiary-foreground-color-light);
}

body.dark .nav-item .nav-subitem {
    color: var(--tertiary-foreground-color-dark);
}

/*body.light .nav-link:focus, .nav-link:hover {
    background-color: var(--primary-accent-background-color-light);
    color: var(--primary-accent-foreground-color-light);
}

body.dark .nav-link:focus, .nav-link:hover {
    background-color: var(--secondary-background-color-dark);
    color: var(--secondary-foreground-color-dark);
}*/

body.light .nav-item .nav-link:hover {
    border-color: transparent;
    background-color: var(--primary-accent-background-color-light);
    color: var(--primary-accent-foreground-color-light);
}

body.dark .nav-item .nav-link:hover {
    border-color: transparent;
    background-color: var(--secondary-accent-background-color-dark);
    color: var(--secondary-accent-foreground-color-dark);
}

body.light .nav-item .nav-link.selected {
    background-color: var(--primary-accent-background-color-light);
    color: var(--primary-accent-foreground-color-light);
}

body.dark .nav-item .nav-link.selected {
    background-color: var(--secondary-accent-background-color-dark);
    color: var(--secondary-accent-foreground-color-dark);
}

body.light .nav-item .nav-link:hover .nav-link-icon { fill: var(--primary-accent-foreground-color-light); }
body.dark .nav-item .nav-link:hover .nav-link-icon { fill: var(--secondary-accent-foreground-color-dark); }

body.light .menu-item:hover .nav-link { background-color: var(--secondary-background-color-light); color: var(--secondary-foreground-color-light); }
body.dark .menu-item:hover .nav-link { background-color: var(--secondary-background-color-dark); color: var(--secondary-foreground-color-dark); }

body.light .navbar-toggler { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--tertiary-background-color-light); }
body.dark .navbar-toggler { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--tertiary-background-color-dark); }

body.light .navbar-toggler:checked { background-color: var(--secondary-background-color-light); }
body.dark .navbar-toggler:checked { background-color: var(--secondary-background-color-dark); }

body.light .menu { background-color: var(--primary-accent-background-color-light); }
body.dark .menu { background-color: var(--primary-accent-background-color-dark); }

body.light h1, body.light h2 { color: var(--tertiary-foreground-color-light); }
body.dark h1, body.dark h2 { color: var(--tertiary-foreground-color-dark); }

body.light h3, body.light h4 { color: var(--secondary-background-color-light); }
body.dark  h3, body.dark  h4 { color: var(--secondary-foreground-color-dark); }

body.light h5, body.light h6 { color: var(--primary-accent-foreground-color-light); }
body.dark  h5, body.dark  h6 { color: var(--primary-accent-foreground-color-dark); }

body.light .book, body.light .carousel-book, body.light .cart-item { background-color: var(--primary-accent-background-color-light); }
body.dark .book, body.dark .carousel-book, body.dark .cart-item { background-color: var(--primary-accent-background-color-dark); }

body.light .cover-picture-placeholder { background-color: var(--tertiary-foreground-color-light); color: var(--primary-background-color-light); }
body.dark .cover-picture-placeholder { background-color: var(--tertiary-foreground-color-dark); color: var(--primary-background-color-dark); }
.img-container { display: flex; justify-content: center; }
.img-container.no-picture { height: 100%; }
.cover-picture-placeholder { display: flex; flex-direction: column; justify-content: center; text-align: center; height: 80%; margin-top: auto; margin-bottom: auto; border-radius: 2ch; padding: 0.5ch; }
.cover-picture-placeholder * { margin-bottom: 0; }

body.light .how-it-works-section { background-color: var(--tertiary-background-color-light); }
body.dark .how-it-works-section { background-color: var(--tertiary-background-color-dark); }

body.light .carousel-steps .ts-carousel-item { background-color: var(--secondary-accent-background-color-light); }
body.dark .carousel-steps .ts-carousel-item { background-color: var(--secondary-accent-background-color-dark); }

body.light .carousel-how-it-works .title { color: var(--primary-accent-foreground-color-light); }
body.dark .carousel-how-it-works .title { color: var(--primary-accent-foreground-color-dark); }

body.light .sand-background { color: var(--secondary-foreground-color-light); }
body.dark .sand-background { color: var(--secondary-foreground-color-dark); }

body.light .sand-background .question { color: var(--secondary-foreground-color-light); }
body.dark .sand-background .question { color: var(--secondary-foreground-color-dark); }

body.light .carousel-how-it-works .description .learn-more-button { background-color: var(--tertiary-foreground-color-light); color: var(--secondary-foreground-color-light); }
body.dark .carousel-how-it-works .description .learn-more-button { background-color: var(--tertiary-foreground-color-dark); color: var(--tertiary-background-color-dark); }

body.light .carousel-how-it-works .description .learn-more-button:hover { background-color: var(--secondary-accent-background-color-light); color: var(--secondary-accent-foreground-color-light); }
body.dark .carousel-how-it-works .description .learn-more-button:hover { background-color: var(--secondary-accent-background-color-dark); color: var(--secondary-accent-foreground-color-dark); }

/*body.light #order-history .stripe-purchase { background-color: var(--secondary-accent-background-color-light); }
body.dark #order-history .stripe-purchase { background-color: var(--secondary-accent-background-color-dark); }*/
body.light #order-history .stripe-purchase .stripe-purchase-header { background-color: var(--primary-accent-foreground-color-dark); border-bottom: solid 0.125ch var(--tertiary-foreground-color-light); }
body.dark #order-history .stripe-purchase .stripe-purchase-header { background-color: var(--primary-accent-foreground-color-light); border-bottom: solid 0.125ch var(--tertiary-foreground-color-dark); }
body.light #order-history .stripe-purchase .stripe-purchase-items { border-color: var(--primary-accent-foreground-color-dark); background-color: var(--primary-accent-foreground-color-dark); }
body.dark #order-history .stripe-purchase .stripe-purchase-items { border-color: var(--primary-accent-foreground-color-light); background-color: var(--primary-accent-foreground-color-light); }

body.light .book a { color: var(--secondary-background-color-light); }
body.dark .book a { color: var(--secondary-foreground-color-dark); }

.btn-primary, .btn-secondary { border-radius: 2ch; border-width: 0.25ch; border-style: outset; padding: 0.25ch 1ch; }

body.light .btn-primary {
    color: var(--secondary-foreground-color-light);
    background-color: var(--secondary-background-color-light);
    border-color: var(--primary-foreground-color-light);
}

body.dark .btn-primary {
    color: var(--secondary-foreground-color-dark);
    background-color: var(--secondary-background-color-dark);
    border-color: var(--primary-foreground-color-light);
}

body.light .btn-primary:hover {
    color: var(--secondary-accent-foreground-color-light);
    background-color: var(--secondary-accent-background-color-light);
    border-color: var(--primary-accent-foreground-color-light);
}

body.dark .btn-primary:hover {
    color: var(--secondary-accent-foreground-color-dark);
    background-color: var(--secondary-accent-background-color-dark);
    border-color: var(--primary-accent-foreground-color-dark);
}

body.light .btn-secondary {
    color: var(--secondary-accent-foreground-color-light);
    background-color: var(--secondary-accent-background-color-light);
    border-color: var(--primary-accent-foreground-color-light);
}

body.dark .btn-secondary {
    color: var(--secondary-accent-foreground-color-dark);
    background-color: var(--secondary-accent-background-color-dark);
    border-color: var(--primary-accent-foreground-color-dark);
}

body.light .btn-secondary:hover {
    color: var(--secondary-foreground-color-light);
    background-color: var(--secondary-background-color-light);
    border-color: var(--primary-foreground-color-light);
}

body.dark .btn-secondary:hover {
    color: var(--secondary-foreground-color-dark);
    background-color: var(--secondary-background-color-dark);
    border-color: var(--primary-foreground-color-light);
}

.btn-primary[disabled], .btn-secondary[disabled] {
    cursor: not-allowed;
    color: var(--secondary-accent-foreground-color-light);
    background-color: var(--primary-accent-foreground-color-dark);
}

body.light textarea:disabled {
    color: var(--secondary-accent-foreground-color-light);
    background: var(--secondary-accent-background-color-light);
}

body.dark textarea:disabled {
    color: var(--secondary-accent-foreground-color-dark);
    background-color: var(--secondary-accent-background-color-dark);
}

body.light textarea::-webkit-scrollbar-track { background-color: var(--primary-background-color-light); }
body.dark textarea::-webkit-scrollbar-track { background-color: var(--primary-background-color-dark); }

body.light textarea::-webkit-scrollbar-thumb { background-color: var(--tertiary-background-color-light); }
body.dark textarea::-webkit-scrollbar-thumb { background-color: var(--tertiary-background-color-dark); }

body.light textarea::-webkit-scrollbar-thumb:hover { background-color: var(--secondary-background-color-light); }
body.dark textarea::-webkit-scrollbar-thumb:hover { background-color: var(--secondary-foreground-color-dark); }

body.light textarea::-webkit-resizer { background-color: var(--primary-foreground-color-light); }
body.dark textarea::-webkit-resizer { background-color: var(--primary-foreground-color-dark); }

body.light .table-grid .table-grid-header { color: var(--primary-accent-foreground-color-light); }
body.light .table-grid .table-grid-body { color: var(--tertiary-foreground-color-light); }
body.dark .table-grid .table-grid-header { color: var(--primary-accent-foreground-color-dark); }
body.dark .table-grid .table-grid-body { color: var(--tertiary-foreground-color-dark); }

body.light .colored-background { background-image: linear-gradient(to right, transparent 12%, var(--secondary-background-color-light) 15%); }
body.dark .colored-background { background-image: linear-gradient(to right, transparent 12%, var(--secondary-background-color-dark) 15%); }

body.light .script-purpose-title { color: var(--primary-foreground-color-light); }
body.dark .script-purpose-title { color: var(--primary-foreground-color-dark); }

body.light .script-purpose-list { color: var(--secondary-foreground-color-light); }
body.dark .script-purpose-list { color: var(--secondary-foreground-color-dark); }

body.light .form-label { color: var(--primary-foreground-color-light); }
body.dark .form-label { color: var(--primary-foreground-color-dark); }

body.light .form-label { color: var(--primary-foreground-color-light); }
body.dark .form-label { color: var(--primary-foreground-color-dark); }

body.light .form-control { color: var(--tertiary-foreground-color-light); }
body.dark .form-control { color: var(--tertiary-foreground-color-dark); }

body.light .grow-with-us-modal { color: var(--primary-foreground-color-light); }
body.light .sand-background .grow-with-us-modal { color: var(--primary-foreground-color-light); }
body.dark .grow-with-us-modal { color: var(--primary-foreground-color-dark); }
body.dark .sand-background  .grow-with-us-modal { color: var(--primary-foreground-color-dark); }

.subscription-ended { color: red; font-weight: bold; }
body.light .subscription-active { color: darkgreen; font-weight: bold; }
body.dark .subscription-active { color: limegreen; font-weight: bold; }
.subscription-scheduled-for-cancellation { color: darkgoldenrod; font-weight: bold; }

.error, .error-message { color: var(--tertiary-background-color-dark) !important; font-weight: bold; }
.warning, .warning-message { color: var(--tertiary-foreground-color-light) !important; font-weight: bold; }
body.light .success, .success-message { color: var(--secondary-foreground-color-light) !important; }
body.dark .success, .success-message { color: var(--tertiary-foreground-color-dark) !important; }
body.light .success-circle, body.light .success-check { stroke: var(--primary-foreground-color-light); }
body.dark .success-circle, body.dark .success-check { stroke: var(--primary-foreground-color-dark); }
.stripe-success { background-color: #30B130; }
.stripe-error { background-color: #DF1B41; }
.stripe-info { background-color: lightblue; }

/* TODO REVIEW THIS BELOW. IT SHOULD USE VARIABLES OR BE DELETED*/
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
    border-style: outset;
}

.row { max-width: 100%; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
.blazor-error-boundary { color: white; }
.darker-border-checkbox.form-check-input { border-color: #929292; }