body {
    font-family: 'Inter', sans-serif;
    background-color: var(--primary-background);
    color: var(--primary-text-color);  
    background-color: #333;    
}
.capitalize:first-letter {
  text-transform: uppercase;
}
.terms li {
    margin-bottom: 10px;
}
.alert-alert {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}
.alert-notice {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}
.splash-bubbles {
    background-image: url(/images/Signin_high.svg), url(/images/Signin_low.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;
    background-size: 70%;
}
.settings-bubbles {
    background-image: url(/images/Feed_high.svg), url(/images/Settings.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top right, bottom right;
    background-size: 30%;
}
.registration-bubbles {
    background-image: url(/images/Registration_high.svg), url(/images/Registration_low.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;
    background-size: 30%;
}
.signin-bubbles {
    background-image: url(/images/Signin_high.svg), url(/images/Signin_low.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;
    background-size: 30%;
}
.feed-bubbles {
    background-image: url(/images/Feed_high.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 30%;
}
#hidelayer {
    background-color: #333;
    position:fixed;
    bottom:0px;

    width:700px;
    z-index:2000;
    display: none;
    margin-left:-50px;
    
}
.hidelayer-fakenav {
   box-shadow: 10px 10px 52px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 10px 10px 52px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 52px 0px rgba(0,0,0,0.75);   
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  width:600px;
  height:77px;
  margin:auto;
}
.phone-screen {
  overflow: hidden;
  width: 600px;
  height:80%;
  margin: auto;
  top:0;
  bottom:0;
  left: 0;
  right: 0;
  position: absolute;
  box-shadow: 10px 10px 52px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 10px 10px 52px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 52px 0px rgba(0,0,0,0.75);

}
.signin-links {
    display: flex; 
    justify-content: center;
    align-items: center;

}
.signin-links a:not(:first-child) {
    margin-left: 5px;
}
.signup-form {
    padding-top: 2vh;
}
.signin-form, .password-form, .confirmation-form {
    padding-top: 10vh;
}
.podcast-create-form {
    height: 100%;
}
.signin-content, .signup-content, .password-content, .confirmation-content, .podcast-create-content {
    padding: 2vh 4vw;
}

.settings-item {
    padding-bottom:10px;
    border-bottom: 1px solid var(--secondary-background);    
}

.settings-item a {
    text-decoration: none;
}
.cookie-modal {
    background-color: var(--accent-secondary);
    padding:20px;
    width:100%;
    position: fixed;
    bottom:78px;
    left:0px;
    z-index: 3001;
}

.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6, .heading-7 {
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
}

.heading-1 {
    font-size: 4rem;
    line-height: 4.2rem;
}

.heading-2 {
    font-size: 3rem;
    line-height: 3.2rem;
}

.heading-3{
    font-size: 2.25rem;
    line-height: 2.2rem;
}

.heading-4{
    font-size: 2rem;
    line-height: 2.7rem;
}

.heading-5{
    font-size: 1.5rem;
    line-height: 2.7rem;
}

.heading-6{
    font-size: 1.25rem;
    line-height: 1.5rem;
}

.heading-7{
    font-size: 0.875rem;
    line-height: 1rem;
}


.UI-Main-Content, .UI-Main-Content.bold, .UI-Sub-Content, .UI-Sub-Content.bold, .UI-Small-Content, .UI-Small-Content.bold, .UI-Tiny-Content, .UI-Tiny-Content.bold {
    color: var(--primary-text-color);
    font-family: Inter, sans-serif;
    font-style: normal;
    line-height: 1.25rem; /* 125% */
}

.UI-Main-Content {
    font-size: 1rem;
    font-weight: 400;
}

.UI-Main-Content.bold{
    font-size: 1rem;
    font-weight: 600;
}

.UI-Sub-Content{
    font-size: 0.875rem;
    font-weight: 400;
}

.UI-Sub-Content.bold{
    font-size: 0.875rem;
    font-weight: 600;
}

.UI-Small-Content{
    font-size: 0.75rem;
    font-weight: 400;
}

.UI-Small-Content.bold{
    font-size: 0.75rem;
    font-weight: 600;
}

.UI-Tiny-Content{
    font-size: 0.6875rem;
    font-weight: 400;
}

.UI-Tiny-Content.bold{
    font-size: 0.6875rem;
    font-weight: 600;
}

html, body {
    height: 100%;
}

.bottom-placeholder {
    min-height: 100px;
}

p, p.bold{
    color: var(--primary-text-color);
    font-family: Inter, sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; /* 142.857% */
}

.main-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--primary-background);
}

.main-content {
    flex-grow: 1;
    overflow-y: auto;
}

turbo-content, #turboframe {
    max-height: 100%;
    height: 100%;
}

a {
    color: var(--primary-text-color)
}

/* cards */
.card {
    background-color: var(--card-background);
    color: var(--primary-text-color);
    border: 2px solid var(--card-border-color)
}

.character {
    border: 2px solid var(--disabled);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.character.selected {
    border: 2px solid var(--third-accent);
    border-radius: 8px;
}

.guest-character {
    border: 2px solid var(--disabled);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.guest-character.selected {
    border: 2px solid var(--third-accent);
    border-radius: 8px;
}

/* navbar icons */
.nav-icon {
    width: 42px;
    height: 32px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-position-x: center;
    display: flex;
    justify-content: center;
}

.nav-icon-xlarge {
    width: 67px;
    height: 67px;
}

/** switch **/
.form-switch.form-check-input:checked {
    background-color: #112421;
}

/** icons **/
.menu-icon > .menu-icon-selected {
    display: none;
}

.menu-icon > .menu-icon-normal.dark-mode,
.menu-icon.selected > .menu-icon-selected.dark-mode {
    display: none;
}

.menu-icon.selected > .menu-icon-selected {
    display: inline;
}

.menu-icon.selected > .menu-icon-normal {
    display: none;
}


@keyframes touchScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
}

.animate-normal {
  animation: touchScale 0.3s ease;
}
@keyframes touchScaleSm {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
}

.impodible-icon.mode-selected img.impodible-icon-normal {
    display: none;
}

.impodible-icon.mode-selected img.impodible-icon-selected {
    display: block!important;
}

.animate-sm {
  animation: touchScaleSm 0.7s ease;
}
body:not(.dark-mode) .impodible-icon-normal.dark-mode, 
body:not(.dark-mode) .impodible-icon-selected.dark-mode,
body:not(.dark-mode) .impodible-icon-disabled.dark-mode {
  display: none!important;
}

body:not(.dark-mode) .step-col.dark-mode {
    display: none;
}

/**
micke 
**/

.default-width {
    width: 280px!important; 
}

.register-header-landingpage-style {
    display: none;
}

body.landingpage-style .signup-content {
    padding: 20px;
}

body.landingpage-style .circle-primary, 
body.landingpage-style .circle-secondary,
body.landingpage-style .register-header,
body.landingpage-style .signup-banner,
body.landingpage-style .bottom-placeholder{
    display: none;
}

body.landingpage-style .register-header-landingpage-style {
    display: block;
    margin-bottom: 120px;
}

@media screen and (max-height: 800px) {    
    body.landingpage-style .register-header-landingpage-style {
        margin-bottom: 30px;
    }
}

body.landingpage-style div.phone-screen {
    width: 390px;
    max-height: 846px;
}

body.landingpage-style div.main-container {
    background-image: url(/images/app-bg-2.png);
}

body.landingpage-style div.main-container {
    border-radius: 0!important;
}

body.landingpage-style div.main-container,
body.landingpage-style div.main-container a, 
body.landingpage-style div.main-container p, 
body.landingpage-style div.main-container .form-checkbox,
body.landingpage-style div.main-container .form-checkbox small {
    color: #fff!important;
    font-size: 14px;
}

body.landingpage-style .form-element-with-label,
body.landingpage-style input,
body.landingpage-style input:focus,
body.landingpage-style label[for] {
    background: #181818;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

body.landingpage-style label[for] {
    color: #D9D9D9;
}

body.landingpage-style #goback-button {
    color: #fff;
}

body.landingpage-style #password-visible {
    color: #878787!important;
    text-decoration: none;
}

body.landingpage-style .btn, body.landingpage-style #sign-up-finish-btn {
    background-color: rgba(0, 0, 0, 0.5)!important;
    color: #fff!important;
    border-color: #fff!important;
}

body.landingpage-style .btn-clear {
    border: 0;
    background-color: transparent!important;
}

body.landingpage-style .create-account-button {
    margin-top: 270px!important;    
}

body.landingpage-style .error-bubble {
    position: absolute;
    top: -60px;
    left: 96px;
}

form.new_creator {
    height: 100%;
}
form.new_creator > div {
    height: 100%;
}

#signup-step-1, #signup-step-2, #signup-step-3 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#signup-step-1.hidden, #signup-step-2.hidden, #signup-step-3.hidden {
    display: none!important;
}

.form-element-with-label {
    border: 2px solid var(--primary-text);
    position: relative;
    padding: 10px 22px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    border-radius: 8px;
}

.form-element-with-label.password {
    flex-direction: row;
    align-items: center;
}

.form-element-with-label input {
    border:0!important;
    width: 100%;
    padding: 2px 0px;
}

.form-element-with-label input::placeholder {
    color: var(--label-color)!important;
}

.form-element-with-label input:focus {
    outline: none;
}

.form-element-with-label  label[for] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25rem;
    margin-bottom: 0.2rem;
    color: var(--label-color);
}

.form-checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    cursor: pointer;
    line-height: 18px;
}

.form-checkbox > .checked {
    display: none;
}

.form-checkbox.checked > .checked {
    display: block;
}

.form-checkbox.checked > .not-checked {
    display: none;
}

.register-header > p {
    color: var(--third-accent);
}

.voice-sample-button > .play-icon {
    display: block;
}

.voice-sample-button > .stop-icon {
    display: none;
}

.voice-sample-button.playing > .stop-icon {
    display: block;
}

.voice-sample-button.playing > .play-icon {
    display: none;
}

.format-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.7rem;
}

.format-button, .visibility-button {
    border-width: 2px;
    border-color: var(--primary-text-color);
    border-style: solid;
    border-radius: 8px;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    color: var(--primary-text-color);
    padding: 20px;
    cursor: pointer;
}

.visibility-button {
    flex-direction: row;
    color: var(--primary-text-color);
}

.format-button.selected, .visibility-button.selected {
    color: var(--primary-text-color);
    border-color: var(--third-accent);
}

.format-button .normal-icon, .visibility-button .normal-icon {
    display: none;
}

.format-button .disabled-icon, .visibility-button .disabled-icon {
    display: block;
}

.format-button.selected .disabled-icon, .visibility-button.selected .disabled-icon {
    display: none;
}

.format-button.selected .normal-icon, .visibility-button.selected .normal-icon {
    display: block;
}

.text-error {
    color: var(--error);
}

.error-bubble {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: translateY(14px);
}

.error-bubble > .bubble {
    background: var(--error-background-color);
    padding: 10px 16px;
    color: var(--white);
    border-radius: 8px;
    z-index: 10;
}

.error-bubble .arrow {
    width: 25px;
    height: 25px;
    transform:  translateY(-17px) rotate(45deg);
    background: var(--error-background-color);
    z-index: 9;
}

.pod-image-overlay {
    background: rgba(0, 0, 0, 0.7);
    height: 35%;
    width: 100%;
    color: white;
}

.pod-image-overlay > p { 
    color: white;   
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 2.3rem;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-left: 10px;
    margin-right: 10px;
}


.play-now-button {
    min-width: 150px;
    padding: 8px;
}

.podcast-editor-modal {
    position: absolute;
    left: 0;
    bottom: -100vh;
    width: 100%;
    height: calc(100% - 77px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.0);
    z-index: 10;
}

.podcast-editor-modal-content {
    background-color: var(--primary-background);
    border: 1px solid var(--primary-border-color);
    height: 95%;
    width: 90%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.podcast-editor-modal-head {
    padding: 0.8rem 1.2rem;
}

.podcast-editor-modal-body {
    padding: 1.2rem 2.5rem;
    overflow-y: auto;
    flex-grow: 1;
    height: 0;
}

.modal-header-btn {
 font-size: 0.9rem;   
 cursor: pointer;
}

.podcast-editor-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

 .category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.7rem;
}

.category-grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.category-grid-item > img {
    width: 100%;
}

.bg-primary {
    background-color: var(--primary-background)!important;
}

.bg-secondary {
    background-color: var(--secondary-background)!important;
}

div.top-separator {
    border-top: 3px solid var(--accent-primary);
}

div.bottom-separator {
    border-bottom: 3px solid var(--accent-primary);
}

div.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

button.tab {
    padding: 10px;
    border: 0;
    color: var(--primary-text-color);
    background-color: var(--primary-background);
}

button.tab.empty {
    background-color: var(--primary-background);
    border-top-color: var(--primary-background);
}

div.tabs-container {
    border-bottom: 2px solid var(--primary-text);
    border-left: 2px solid var(--primary-text);
    border-right: 2px solid var(--primary-text);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 25px;
}

button.tab {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--disabled);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top: 2px solid var(--btn-primary-disabled-background);
    border-bottom: 2px solid var(--primary-text);
    border-left: 0 solid var(--btn-primary-disabled-background);
    border-right: 0 solid var(--btn-primary-disabled-background);
    color: var(--primary-text-color);
}

button.tab > div {
    margin: 0 15px;
}

button.tab.tab-on {
    background-color: var(--primary-background);
    border-top: 2px solid var(--primary-text);
    border-left: 2px solid var(--primary-text);
    border-right: 2px solid var(--primary-text);
    border-bottom: 0;
    color: var(--primary-text-color);
}

button.tab > div > div.tab-stroke {
    background: var(--accent-secondary);
    border-radius: 3px;
    text-align: center;
    width: 100%;
    height: 3px;
    display: none;
}

button.tab.tab-on > div > div.tab-stroke {
    background: var(--accent-primary);
    display: block;
}

.form-group {
    margin: 0.6rem 0;
}

.form-switch {
    margin-top: -4px;
}

.form-switch .form-check-input {
    height: 22px;
    width: 54px;
    background-color: var(--switch-unchecked-background);
    border: 2px solid var(--accent-primary);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='rgba(105, 220, 199, 1)'/></svg>");
}

.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='rgba(105, 220, 199, 1)'/></svg>");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='rgba(252, 255, 254, 1)'/></svg>");
    background-color: var(--switch-checked-background);
    border: 2px solid var(--accent-primary);
}


select.form-control,input[type='email'],input[type='password'],input[type='text'],input,textarea.form-control {
    background-color: var(--input-background);
    border: 2px solid var(--input-border-color);
    color: var(--input-text-color);
    border-radius: 8px;
}

input[type='email']::placeholder,input[type='password']::placeholder,input[type='text']::placeholder,textarea.form-control::placeholder,input::placeholder {
    color: var(--input-placeholder-color);
}

select.form-control:focus,input[type='email']:focus, input[type='password']:focus,input[type='text']:focus, textarea.form-control:focus, textarea.form-control:focus-visible, input:focus, input:focus-visible {
    background-color: var(--input-background);
    border: 2px solid var(--input-focus-border-color);
    color: var(--input-text-color);
    box-shadow: none;
}

label[for] {
    color: var(--form-label-color);
}

input[type='radio'] {
    margin-right: 0.8rem;
}

input[type='radio']:after {
    width: 25px;
    height: 25px;
    border-radius: 15px;
    top: -6px;
    left: -7px;
    position: relative;
    background-color: var(--radio-normal-background);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid var(--radio-border-color);
}

input[type='radio']:checked:after {
    width: 25px;
    height: 25px;
    border-radius: 15px;
    top: -6px;
    left: -7px;
    position: relative;
    background-color: var(--radio-selected-background);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 7px solid var(--radio-border-color);
}

.steps-row {
    
}
.step-col img { 
    height:100%;
    margin:0;
    padding:0;
}
.step-col {
    position: relative;
    height:50px;
    background-image: url(/images/step-bg.svg);
    background-repeat: repeat-x;
    background-position-y: center;
    background-position-x: right;
    background-size: 1px 1px;
    margin:0;
    padding:0;
}
/*
.step-col::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--accent-secondary);
    z-index: 0;
}

.step-col:first-child::before {
    left: 40px;
}

.step-col:last-child::before {
    right: 60px;
}
*/
.flip-card {
  background-color: transparent;
  width: 100%;
  max-width: 330px;
  aspect-ratio: 1/1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

@media screen and (max-width: 768px) {
    .flip-card {
        max-width: 250px;
    }    
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-inner-flipped {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}

.gray-bg {
    background-color: var(--secondary-background);
}

.text-gray {
    color: var(--gray)!important;
}

.dialogue-cover {
    display: block;
    overflow: auto; 
    width:100%;
    max-width:400px;
    margin-left: auto;
    margin-right: auto;
    height:100%;
}

.podcast-cover-img {
    display: block;
    width: 100%;
    max-width:100%;
    margin-left: auto;
    margin-right: auto;
}

.player-collapsed {
    margin-left:-30px;
    margin-right:-30px;
}

.collapsed-player-progress {
    height: 4px;
    background-color: #555;
    --bs-progress-bar-bg: var(--accent-primary);
    margin-left:-2px;
    margin-right:-3px;
}

.collapsed-player-progress .progress-bar {
    line-height: 4px; /* This is optional, but it can help with vertical alignment if you have text inside the progress bar. */
}

.collapsed-player-cover {
    width:60px;
    margin-left:3px;
    border-radius: 5px 5px 5px 5px;
}

.generating-podcast-modal {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--walkthrough-modal-background);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.generating-podcast-modal > div.content {
    width: 85%;
    /*min-height: 90vh;*/
    border-radius: 10px;
    padding: 40px 30px;
    background-color: var(--walkthrough-modal-content-background);
    color: var(--walkthrough-modal-content-text-color);
    overflow-y: auto;
}

.walkthrough-modal {
    top: 0; 
    left: 0;
    flex-grow: 1;
    background-color: var(--walkthrough-modal-background);
    display: flex;
    justify-content: center;
    align-items: center;
}

.walkthrough-modal > div.content {
    width: 85%;
    height: 90%;
    /*min-height: 90vh;*/
    border-radius: 10px;
    padding: 40px 30px;
    background-color: var(--walkthrough-modal-content-background);
    color: var(--walkthrough-modal-content-text-color);
    overflow-y: auto;
} 

.walkthrough-modal > div.content > div.buttons {
    text-align: center;
}

.walkthrough-modal > div.content > div.buttons > button {
    color: var(--walkthrough-modal-content-text-color)
}

.custom-modal {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    width:100%;
    max-width:700px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;    
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
    display: none;  /* Initially hidden */
    z-index: 1000;  /* Ensure it's above other elements */    
    pointer-events: none; /* Makes the modal non-interactive, allowing you to interact with elements behind it */
}

.custom-modal-content {
    width: 100%;  /* Take up 70% of screen width, customize as required */
    background: var(--primary-background);
    padding: 0;
    /*border-radius: 50px 50px 0 0;*/

    pointer-events: all; /* Ensures the content of the modal is still interactive */
    /*overflow: auto;*/
 
}

.modal-handle {
    border-top:4px solid #555; 
    border-radius: 40px;
}

.modal-handle:hover {
    border-top:4px solid #666; 
    border-radius: 40px;
}

.custom-modal-body {
    padding-left:20px;
    padding-right:20px;
    
}

.impodible-modal {
    z-index: 2;
     top:100px;
     border-top-left-radius: 20px !important;
     border-top-right-radius: 20px !important;        
     margin-bottom:100px !important;  
     padding-bottom:100px !important;  
}

.modal-backdrop {
  display: none;
}

.logo-div {
    /*background-color: var(--primary-background);*/
    z-index:10;
    height: 70px;
    min-height: 70px;
}

.logo {
    width:180px;
}

.active {    
    -webkit-box-shadow: inset 1px 1px 10px #333;
    -moz-box-shadow:    inset 1px 1px 10px #333;
    box-shadow:         inset 1px 1px 10px #333;
}

.badge-done {
    background-color: green;
}

.badge-processing {
    background-color: blue;
}

.badge-can_listen {
    background-color: green;
}

.badge-que {
    background-color: orange;
}

.badge-error {
    background-color: red;
}

.card-fixed-card {
    width: 200px;
    margin: 0 auto; /* This centers the card in the column */
    max-width: 300px !important;
}

.percent-container {
    width: 100%;
    height: 3px;
    background-color: #555;
}

.percent-div {
    width: 100%; /* Change this to the desired percentage */
    height: 100%;
    background-color: var(--accent-primary);
}

.playbackSlider {
    padding:0;
}

.playbackSlider::-webkit-slider-thumb {
    opacity: 0;
}

.playbackSlider::-moz-range-thumb {
    opacity: 0;
}

.playbackSlider::-ms-thumb {
    opacity: 0;
}

.header-btn {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    font-size: 20px;
    margin:0;
    padding:10px;
    cursor: pointer;
}

.header-btn:hover {
    cursor: pointer;
}

#navbar {
    font-family: inter, sans-serif;
    font-size: 11px;
    background-color: var(--navbar-background-color);
    border-top: 2px solid var(--navbar-border-color);
    z-index: 50;
}
.desktop-navbar {
    z-index:3000;
}
.nav-btn {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    margin:0;
    cursor: pointer;
}

.nav-btn:hover {
    cursor: pointer;
}

.player-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.player-btn {
    font-size: 1.5rem;
    margin:0;
    padding: 0.5rem;
    cursor: pointer;
}

.player-btn-collapse {
    font-size: 20px;
    margin:0;
    padding:15px;
    cursor: pointer;
}

.player-btn-collapse:hover {

    cursor: pointer;
}

.menu-item {

    cursor: pointer;
}

.menu-item:hover {
    background-color: var(--accent-secondary);
}

.badge-success {
    background-color: var(--accent-secondary);
    color: #0d6832;
}

.badge-primary {
    background-color: var(--accent-primary);
    color: #2c58a0;
}

.badge-warning {
    background-color: #fbf0da;
    color: #73510d;
}

.slider-container {
  width: 200px;
  margin: auto;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0 !important;
  height: 5px !important;
  opacity: 1 !important;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none !important;
  width: 13px !important;
  height: 13px !important;
  border: none;
  background: #333; /* Change this for your desired color */
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 13px !important;
  height: 13px !important;
  border: none;
  background: #333; /* Change this for your desired color */
  border-radius: 50%;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.label {
  position: relative;
  display: inline-block;
  text-align: center;
}

.border-green {
    border: 5px solid var(--accent-primary);
}

.border-white {
    border: 5px solid var(--secondary-background);
}

.tap-effect {
  /* Set initial state */
  transition: background-color 0.3s;
}

.tap-effect.clicked {
  /* Define the effect when clicked */
  background-color: rgba(0, 0, 0, 0.2) !important; /* Or any other desired effect */
}
.impodible-click-effect-sm {
    cursor: pointer;
}
.podcast-item {
    cursor: pointer;
    border-width: 2px 2px 2px 2px !important;
    border-style: solid;
    background: var(--podcast-background);
    border-radius: 10px !important;
}

#create-form-step-1 {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}
.podcast-item.que, .podcast-item.error, .podcast-item.processing, .podcast-item.not_started {
    border: 2px solid var(--podcast-disabled-border-color);
}

.podcast-item.can_listen, .podcast-item.done {
    border: 2px solid var(--podcast-border-color);
}

.form-control:focus {
  border-color: var(--accent-primary);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(105, 200, 199, 0.6);
}   

.form-control.podcast-knowledge {
    min-height: 5rem;
}

input[type=text].subdued {
    background: var(--input-subdued-background);
    border-color: var(--input-subdued-border-color);
}

.title {
    font-size: 32px;
    font-weight: 100;
}

.hidden {
    display:none;
}

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

.secondary-bg {
    background-color: var(--accent-secondary);
}

.white-bg {
    background-color: var(--secondary-background);
}

.btn {
    border-radius: 15px;
}

.btn.fully-rounded {
    border-radius: 40px;
}

.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    border-width: 2px;
}

.btn-outline {
    border-width: 2px;
    color: var(--primary-text-color);
    border-color: var(--accent-primary);
}

.btn-outline:hover {
    border-color: var(--accent-secondary);
}

.btn-signup {
    color: var(--primary-text-color);
    padding: 0.8rem;
}

.btn-block {
    width: 100%;
}

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

.btn-primary:active {
    background-color: #c7eee8 !important;
    border-color: var(--accent-primary) !important;
}

.btn-primary[disabled="true"] {
    background-color: var(--btn-primary-disabled-background);
    border-color: var(--btn-primary-disabled-border);
    color: var(--btn-primary-disabled-text);
}

.btn-primary:focus-visible {
    background-color: #c7eee8;
    border-color: var(--accent-primary);
    color: var(--primary-text-color);
    box-shadow: none;
}

.btn:disabled {
    color: var(--btn-primary-disabled-text);
    pointer-events: none;
    background-color: var(--btn-primary-disabled-background) !important;
    border-color: var(--btn-primary-disabled-border) !important;
}

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

.btn-secondary:hover {
    background-color: var(--primary-background);
    color: var(--primary-text-color);
}

.btn-primary[disabled="disabled"] {
    background-color: var(--btn-primary-disabled-background);
    border-color: var(--btn-primary-disabled-background);
    color: var(--btn-primary-disabled-text);
}

.btn-secondary {
    color: var(--primary-text-color);
    background-color: var(--btn-secondary-background);
    border-color: var(--accent-primary);
    border-width: 2px;
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover-background);
    border-color: var(--accent-primary);
    border-width: 2px;
}

div.spacer {
    margin: 1rem 0;
    border-top: 1px solid var(--secondary-background);
}

a {
    color: var(--primary-text-color);
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; /* 142.857% */
    text-decoration-line: underline;
}

.rounded-btn {
    border-radius: 0 0 20px 20px !important;
}

.rounded {
    border-radius: 20px !important;
}

.rounded-left {
    border-radius: 20px 0 0 20px !important;
}

.rounded-right {
    border-radius: 0 20px 20px 0 !important;
}

.rounded-sm {
    border-radius: 10px;
}

.default-height {
    height:50px;
    width:100%;
}

.dark-transparent-overlay {
    background-color: #96e7d8;
} 

.light-transparent-overlay {
    background-color: #d7f3ef;
}

.text-color-white {
    color: var(--primary-background);
}

.text-color-black {
    color: var(--primary-text-color);
}

.left {
    float:left;
    display: block;
}

.right {
    float:right;
    display: block;
}

.topic-suggestion {
    cursor:hand;
    border-bottom: 1px solid var(--secondary-background);
}

.slide-container {
  width: 100%; /* Width of the outside container */
}

.back-button {
    background-color: var(--accent-secondary);
    width:60px;
    height:50px;
    border-radius: 0 12px 12px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.home-button {
    background-color: var(--accent-secondary);
    width:60px;
    height:50px;
    border-radius: 0 12px 12px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }  /* Increased scale */
  100% { transform: scale(1); }
}

.circle-primary {
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: var(--accent-primary); /* Choose your desired background color */
  position: absolute;
  box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  z-index:-1;

}
.circle-secondary {
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: var(--accent-secondary); /* Choose your desired background color */
  position: absolute;
  box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  z-index:-1;

}
.circle1 {
  width: 250px; /* Adjust the width and height to your desired size */
  height: 250px;
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: var(--accent-primary); /* Choose your desired background color */
  position: absolute;
  top:-170px;
  left:-40px;
  box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  z-index:-1;
}

.circle2 {
  width: 180px; /* Adjust the width and height to your desired size */
  height: 180px;
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: var(--accent-secondary); /* Choose your desired background color */
  position: absolute;
  top:-20px;
  left:-100px;
  box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  z-index:-1;
}

.circle3 {
  width: 100px; /* Adjust the width and height to your desired size */
  height: 100px;
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: var(--accent-primary); /* Choose your desired background color */
  position: absolute;
  right:-70px;
  top:-30px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
  z-index:101;
  overflow:hidden;
}

.circle4 {
  width: 80px; /* Adjust the width and height to your desired size */
  height: 80px;
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: #c7eee8; /* Choose your desired background color */
  position: absolute;
  right:0;
  top:-60px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
  z-index:101;
  overflow:hidden;
}

.circle6 {
  width: 250px; /* Adjust the width and height to your desired size */
  height: 250px;
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: var(--accent-primary); /* Choose your desired background color */
  position: absolute;
  right:0;
  bottom:-100px;
  box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  z-index:-1;
}

.circle7, .circle8{
  width: 200px; /* Adjust the width and height to your desired size */
  height: 200px;
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: var(--accent-secondary); /* Choose your desired background color */
  position: absolute;
  right:-100px;
  bottom:0;
  box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  z-index:-1;
}

.circle8 {
  width: 200px; /* Adjust the width and height to your desired size */
  height: 200px;
  border-radius: 50%; /* This creates a circular shape by using half of the width/height */
  background-color: var(--accent-secondary); /* Choose your desired background color */
  position: absolute;
  right:-100px;
  bottom:0;
  box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
  z-index:-1;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 15px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 10px; /* Rounded corners */
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: var(--accent-primary); /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: var(--accent-primary); /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
}
/* Firefox */
.slider::-moz-range-progress {
  background: var(--accent-primary);
}

/* IE */
.slider::-ms-fill-lower {
  background: var(--accent-primary);
}


#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-background);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-in;
  z-index: 9999;
}

#splash-content {
  text-align: center;
}

#splash-content h1 {
  font-size: 24px;
}

.hide {
  opacity: 0;
  pointer-events: none;
}

.registration-heading{
    color: #0B1816;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.5rem; /* 250% */
}

.text-right {
    text-align: right;
}