body {
    padding: 0;
    margin: 0;
    background: rgb(241,242,243);
    background: linear-gradient(180deg, rgba(241,242,243,1) 0%, rgba(245,237,230,1) 100%);
}

body,
button {
    font-family: "Krub", sans-serif;

}

#ases-body {
    min-height: 100vh;
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
    position: relative;
} 

#step-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    position: relative;
}

#step-container::before {
    position: absolute;
    content: " ";
    width: 100%;
    border-bottom: 2px solid #f0e8d4;
    top: 50%;
}

#step-container > * {
    background-color: #f0e8d4;
    height: 0.6rem;
    width: 0.6rem;
    display: inline-block; 
    transition: background-color 4s;
    border-radius: 50%;
    z-index: 1;
    position: relative;
}

#step-container > *.active{ 
    background-color: #b69667;
}

#id-title {
    text-align: center;
    font-size: 1.6rem;
    height: 3rem;
    border-radius: 2rem;
    color: #876b4a;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0e8d4;
    font-weight: normal;
}

#id-container {
    padding-top: 2rem;
}
#id-container,
#id-container input,
#id-container button {
    font-family: "Krub", sans-serif;
}

#id-submit-button {
    width: 100%;
    border: 0.2rem solid #FFF;
    background-color: #0fcdb8;
    height: 4rem;
    border-radius: 2rem;
    margin-top: 4rem;
    font-size: 2rem;
    color: #FFF;
}

#id-input::-webkit-outer-spin-button,
#id-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#id-input::-webkit-input-placeholder { 
    color: #CCC;
    font-weight: normal;
}

#id-input {
    font-size: 2rem; 
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    border-radius: 0.5rem;
    border: 1px solid #876b4a;
    color:#876b4a;
}

#ases-back-id-button {
    position: absolute;
    bottom: 0.5rem;
    left: 1rem;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color:#876b4a;
}

#ases-back-id-button svg {
    height: 1rem;
    width: 1rem;
    margin-right: 0.5rem;
}

#ases-header-sound-tooltip-title {
    font-size: 2rem;
    padding-top: 1rem;
    text-align: center;
    color:#876b4a;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ases-header-sound-tooltip-title svg {
    height: 6rem;
    width: 6rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

[data-layout="0"] .back-button-container {
    min-height: 5rem;
}
 
[data-layout="1"] .question-image-container img {
    width: 343px;
    height: 279px;
}

[data-layout="1"] .ases-answer-button-container {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

[data-layout="1"] .ases-answer-button { 
    left: 0;
}

[data-layout="1"] .ases-answer-button .ases-speaker-container {
    left: calc(50% - 27px);
    top: 4.6rem;
}

[data-layout="1"] .ases-answer-button > * {
    display: block;
    font-size: 2.5rem;
}

[data-layout="1"] .ases-answer-button > * > *:first-child {
    border-right-width: 0;
    height: auto;
}

[data-layout="2"] .question-image-container img {
    width: 343px;
    height: 253px;
}

[data-layout="3"] .ases-header > *:first-child {
    width: 80%;
}
[data-layout="3"] .ases-header > *:last-child {
    width: 20%;
}

[data-layout="3"] .ases-header .ases-sound-button>*>*>*>* {
    width: 2.5rem;
    height: 2.5rem;
}

[data-layout="3"] .ases-header h1 {
    font-size: 1.3rem;
}

[data-layout="3"] .ases-header h4 {
    position: relative;
    font-size: 0.9rem;
}

[data-layout="3"] .back-button-container {
    position: absolute;
    top: 12rem;
}

[data-layout="3"] .ases-answer-container {
    display: grid;
    grid-template-columns: calc(40% - 1rem) 60%;
    gap: 1rem;
}

[data-layout="3"] .ases-answer-button>* {
    grid-template-columns: 70% 30%;
}
 
[data-layout="3"] .ases-answer-button {
    height: 3rem;
    border-radius: 1.2rem;
    padding: 5px;
}

[data-layout="3"] .ases-answer-button>* {
    font-size: 1rem;
}

[data-layout="3"] .ases-answer-button svg {
    height: 1.8rem;
    width: 1.8rem;
}

[data-layout="3"] .ases-answer-button>* {
    border-radius: 0.8rem;
}

[data-layout="3"] .ases-speaker-container {
    position: absolute;
    left: calc(50% - 22px);
    width: 40px;
    height: 40px;
    background: rgb(242, 236, 219);
    background: linear-gradient(142deg, rgba(242, 236, 219, 1) 0%, rgba(223, 204, 162, 1) 100%);
    color: #b69667;
    border-radius: 50%;
    border: 4px solid #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 2rem;
}

.ases-layout-3-answer-button > * {
    padding: 0.2rem;
    width: 100%;
    box-sizing: border-box;
    color: #FFF;
    border-radius: 1rem;
} 

.ases-layout-3-answer-button {
    z-index: 1;
    position: relative;
    text-align: center;
}

.ases-layout-3-answer-button-0 {
    margin-bottom: 13rem;
    margin-top: 0.4rem;
}

.ases-layout-3-answer-button-1 {
    margin-bottom: 13rem;
}

[data-layout="4"] .question-image {
    height: 134%;
    top: -15%;
    position: relative;
}

[data-layout="4"] .question-image-container {
    text-align: center;
    height: 13.2rem;
    position: relative;
}

 
.ases-answer-text-small {
    font-size: 1.1rem;
}

.ases-emo-icon {
    height: 2.6rem;
    min-width: 53px;
}

.ases-back-button {
    border-radius: 50%;
    border-width: 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(19deg, rgba(255, 255, 255, 1) 0%, rgba(222, 223, 224, 1) 100%);
    padding: 0.5rem;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}

.ases-back-button>* {
    border-radius: 50%;
    display: flex;
    background: rgb(255, 255, 255);
    background: linear-gradient(142deg, rgba(255, 255, 255, 1) 0%, rgba(223, 224, 225, 1) 100%);
    width: 3rem;
    height: 3rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.back-button-container {
    min-height: 13.2rem;
    position: relative;
}

.ases-back-button>*>* {
    text-align: center;
    font-weight: bold;
    color: #876b4a;
    line-height: 12px;
    font-size: 0.7rem;
}

.ases-sound-button {
    background: none;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 1;
    border-width: 0;
}

.ases-sound-button>* {
    border-radius: 50%;
    background: rgb(255, 255, 255);
    background: linear-gradient(142deg, rgba(255, 255, 255, 1) 0%, rgba(183, 185, 187, 1) 100%);
    padding: 4px;
    box-shadow: 2px 2px 1rem -3px #000;
}

.ases-sound-button>*>* {
    border-radius: 50%;
    background: rgb(255, 255, 255);
    background: linear-gradient(142deg, rgba(255, 255, 255, 1) 0%, rgba(221, 222, 223, 1) 100%);
    padding: 4px;
}

.ases-sound-button>*>*>* {
    border-radius: 50%;
    background: rgb(223, 204, 162);
    background: linear-gradient(142deg, rgba(223, 204, 162, 1) 0%, rgba(223, 204, 162, 1) 100%);
    padding: 4px;
}

.ases-sound-button>*>*>*>* {
    background: rgb(242, 236, 219);
    background: linear-gradient(142deg, rgba(242, 236, 219, 1) 0%, rgba(223, 204, 162, 1) 100%);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80%;
    overflow: hidden;
    position: relative;
}

.ases-sound-button svg {
    height: 70%;
    width: 70%;
    fill: #b69667;
}

.ases-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(223, 204, 162, 0.3);
    bottom: -25%;
    right: -25%;
    border-radius: 50%;
    mix-blend-mode: multiply;
}

.ases-sound-label {
    background-color: #f0e8d4;
    color: #876b4a;
    font-size: 13px;
    padding: 4px 1rem;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 0.5rem;
    text-align: center;
    font-weight: bold;
}

.ases-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    color: #876b4a;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

.ases-header h1 {
    font-size: 1.8rem;
    margin-block-start: 0;
    margin-block-end: 0;
}

.ases-header h4 {
    margin-block-start: 0;
    margin-block-end: 0;
    position: absolute;
}

.ases-header>*:first-child {
    width: 62%;
}

.ases-header>*:last-child {
    width: 38%;
    text-align: right;
}

#ases-header-container {
    position: relative;
    padding: 1rem;
    padding-top: 1.5rem;
}

#ases-header-logo-container {
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 1;
    background: rgb(255, 255, 255);
    background: linear-gradient(207deg, rgba(255, 255, 255, 1) 0%, rgba(236, 236, 236, 1) 61%, rgba(246, 246, 246, 1) 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: -5px 5px 1rem 0 rgba(0, 0, 0, 0.5);
    padding: 4px;
}


#ases-header-title {
    position: absolute;
    width: 80%;
    text-align: right;
    padding-bottom: 0.4rem;
    color: #876b4a;
    border-bottom: 2px solid #876b4a;
    top: 1.8rem;
    font-size: 1.5rem;
    right: 0;
    font-weight: bold;
}

#ases-header-logo-container>* {
    border-radius: 50%;
    padding: 1rem;
    background: rgb(255, 255, 255);
    background: linear-gradient(54deg, rgba(255, 255, 255, 1) 0%, rgba(192, 192, 192, 1) 100%);
}

#ases-header-logo-container>*>* {
    border-radius: 50%;
    background: rgb(255, 255, 255);
    background: linear-gradient(210deg, rgba(255, 255, 255, 1) 0%, rgba(192, 192, 192, 1) 100%);
    padding: 4px;
    box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

#ases-header-logo-container>*>*>* {
    background-image: url('/assets/logo.png');
    background-size: cover;
    height: 80px;
    width: 80px;
    border: 2px solid #FFF;
    border-radius: 50%;
}

#ases-doctor-image {
    width: 44%;
    z-index: 1;
    position: relative;
    left: 10%;
    height: 250px;
}

#ases-doctor-container {
    position: relative;
    top: -0.4rem;
}


#ases-doctor-title {
    width: 60%;
    aspect-ratio: 1;
    background-color: #e8ddb8;
    position: absolute;
    left: 40%;
    top: 55%;
    transform: translateY(-50%);
    border-radius: 50%;
    color: #876b4a;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

#ases-doctor-title h2 {
    width: 64%;
    font-size: 28px;
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 30px;
}

#ases-doctor-title h3 {
    width: 64%;
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 48px;
}

#ases-home-caption {
    text-align: center;
    font-size: 1.8rem;
    padding-bottom: 1.8rem;
    color: #876b4a;
    position: relative;
    width: 100%;
    overflow: hidden;
    font-weight: 600;
    line-height: 3.2rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

#ases-home-caption::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: ".......................................................................";
    letter-spacing: 8px;
    color: #876b4a;
}

.ases-hr {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}

.ases-hr::before {
    width: 100%;
    content: ".......................................................................";
    letter-spacing: 8px;
    color: #876b4a;
    font-size: 28px;

}

#ases-home-sound-warning {
    background-color: #f0e8d4;
    color: #876b4a;
    height: 60px;
    border-radius: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 26px;
}

#ases-home-sound-warning svg {
    margin-left: 20px;
    width: 50px;
    height: 50px;
}

#ases-home-question-button {
    border: 0;
    padding: 6px;
    background: rgb(255, 255, 255);
    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(192, 192, 192, 1) 100%);
    width: 100%;
    margin-top: 20px;
    height: 80px;
    border-radius: 40px;
    cursor: pointer;
}

#ases-home-question-button>* {
    background-color: #0fcdb8;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 32px;
    position: relative;
    font-weight: bold;
}

#ases-home-question-type-1-button  {
    width: 100%;
    border-radius: 5px;
    border: 1px solid rgb(203, 115, 43);
    padding: 0;
    color: rgb(203, 115, 43);
    height: 80px;
    font-size: 2rem;
    background-color: #f6e3d1;
    font-weight: bold;
}

#ases-home-overlay {
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    background-image: url('/assets/home-button-overlay.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 30px;
    overflow: hidden;
}

.ases-answer-button {
    border: 0;
    padding: 6px;
    background: rgb(255, 255, 255);
    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(192, 192, 192, 1) 100%);
    width: calc(100% - 70px);
    left: 70px;
    height: 4rem;
    border-radius: 1.6rem;
    cursor: pointer;
    margin-bottom: 0.8rem;
    transition: opacity 0.2s ease-in-out;
    position: relative; 
}

.ases-answer-choice-active {
    background: rgb(174, 255, 132) !important;
    background: linear-gradient(270deg, rgba(174, 255, 132, 1) 0%, rgba(62, 200, 0, 1) 100%) !important;

}

.ases-answer-button:focus {
    outline:none;
}

.ases-answer-button:hover,
.ases-answer-button:active {
    opacity: 0.8;
}

.ases-answer-button>* {
    height: 100%;
    width: 100%;
    border-radius: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #FFF;
}
 

.ases-answer-button .ases-speaker-container {
    position: absolute;
    left: -70px;
    width: 50px;
    height: 50px;
    background: rgb(242, 236, 219);
    background: linear-gradient(142deg, rgba(242, 236, 219, 1) 0%, rgba(223, 204, 162, 1) 100%);
    color: #b69667;
    border-radius: 50%;
    border: 4px solid #FFF;
}

.ases-answer-button .ases-speaker-container::before {
    content: " ";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
    position: absolute;
    left: 50%;
    top: 50%;
}

.ases-answer-button svg {
    width: 42px;
    height: 42px;
    z-index: 1;
}

.ases-answer-button>*>* {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}


.ases-answer-button-blue {
    background-color: #2dbad2;
}

.ases-answer-button-green {
    background-color: #0fcdb8;
}

.ases-answer-button-orange {
    background-color: #f39523;
}

.ases-answer-button-red {
    background-color: #ea2227;
}

.ases-answer-button-yellow {
    background-color: #f6ed38;
    fill: #876b4a;
    color: #876b4a;
}

.ases-emo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.3rem;
}

.ases-emo-button {
    border: 0;
    padding: 5px;
    background: rgb(255, 255, 255);
    background: linear-gradient(270deg, rgba(192, 192, 192, 1) 0%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    border-radius: 0.8rem;
    cursor: pointer;
    height: 2rem;
}

.ases-emo-button > * {
    height: 100%;
    width: 100%;
    text-align: center;
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-weight: 600;
}

.ases-emo-button-0 {
    background-color: #2dbad2;
}

.ases-emo-button-1 {
    background-color: #2cb8a9;
}

.ases-emo-button-2 {
    background-color: #2bb886;
}

.ases-emo-button-3 {
    background-color: #73b84a;
}

.ases-emo-button-4 {
    background-color: #fbcd34;
}

.ases-emo-button-5 {
    background-color: #fbac37;
}

.ases-emo-button-6 {
    background-color: #f58f20;
}

.ases-emo-button-7 {
    background-color: #f46f23;
}

.ases-emo-button-8 {
    background-color: #f7542f;
}

.ases-emo-button-9 {
    background-color: #eb4721;
}

.ases-emo-button-10 {
    background-color: #ea2227;
}

h1.ases-header-big-title {
    font-size: 2rem;
}

h1.ases-header-small-title {
    font-size: 1.5rem;
}

h1.ases-header-xsmall-title {
    font-size: 1rem;
}


#ases-summary-title {
    position: absolute;
    top: 3.5rem;
    right: 1rem;
}

#ases-summary-title h1 {
    font-size: 1.8rem;
    color: #876b4a; 
    margin-block-end: 0;
    text-align: right;
}

#ases-summary-date {
    position: relative;
    margin-top: 0.3rem;
    text-align: right;
}

#ases-summary-date > div {
    background-color: #e8ddb8;
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.2rem;
    color: #876b4a; 
    font-size: 0.9rem; 
    font-weight: bold; 

}

#ases-summary-body {
    position: relative; 
    color: #876b4a; 
    font-weight: 600;
    margin-top: 0.2rem;
}

.ases-summary-label {
    background-color: #2bb886;
    color: #FFF;
    padding: 0.2rem 1rem;
    border-radius: 0.8rem;
    font-size: 0.8rem;
}

.ases-summary-row {
    margin-bottom: 0.6rem;
}

.ases-summary-row > * {
    vertical-align: middle;
}

.ases-label-title {
    border: 1px solid #876b4a;
    border-radius: 0.6rem;
    padding: 0.2rem 0.8rem;
}

.ases-summary-label.ases-summary-label-text-large {
    font-size: 1.2rem;
    margin-top: 0.6rem;
}

.ases-summary-point {
    color: #2bb886;
    margin-left: 1rem;
}

.ases-summary-row-title {
    display: flex; 
    align-items: center;
    gap: 0.5rem;
}

.ases-summary-row-title svg {
    height: 1rem;
    width: 1rem;
}

#ases-summary-back-button-container {
    height: 5rem;
    position: relative;
}

#ases-summary-table td {
    padding-bottom: 0.4rem;
}

#ases-layout-3-answer-button-container {
    position: relative;
}

#ases-layout-3-answer-button-container .ases-answer-button {
    position: relative;
    z-index: 2;
}

.trapezoid {
    width: 30%;
    height: 49%;
    background: rgb(241,242,243);
    background: linear-gradient(180deg, rgba(241,242,243,1) 0%, #CCC 100%);
    transform: perspective(10px) rotateX(3deg); 
    position: absolute;
    left: 35%;
}

#ases-summary-question-type-1-page .ases-summary-row-title {
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
}

#ases-summary-question-type-1-page .ases-summary-point {
    margin-bottom: 0.5rem;
}

[data-theme="no-media"] .ases-header h1 {
    font-size: 16px;
}

[data-theme="no-media"] #ases-home-question-button {
    border-radius: 5px;
    padding: 1px;
    background: rgb(203, 115, 43);
}

[data-theme="no-media"] #ases-home-question-button > * {
    background-color: #f6e3d1;
    border-radius: 4px;
    color: rgb(203, 115, 43);
}

[data-theme="no-media"] #ases-home-question-button #ases-home-overlay {
    display: none;
}

[data-theme="no-media"],
[data-theme="no-media"] button {
    font-family: sans-serif;
}

[data-theme="no-media"] #ases-home-caption::after {
    content: " ";
}

[data-theme="no-media"] #ases-doctor-image {
    display: none;
}

[data-theme="no-media"] #ases-doctor-title {
    width: 100%;
    left: 0;
    top: 0;
    position: relative;
    display: block;
    background: none;
    transform: translateY(0);
    aspect-ratio: auto;
}

[data-theme="no-media"] #ases-doctor-title > * {
    width: 100%;
    text-align: center;
}

[data-theme="no-media"] #ases-home-sound-warning {
    display: none;
}

[data-theme="no-media"] .ases-header {
    padding-top: 1rem;
}

[data-theme="no-media"] .ases-header > *:first-child {
    width: 100%;
}

[data-theme="no-media"] .ases-header > *:last-child {
    display: none;
}

[data-theme="no-media"] .ases-answer-button > * > .ases-speaker-container {
    display: none;
}

[data-theme="no-media"] .ases-answer-button-container {
    padding-top: 1rem;
}

[data-theme="no-media"] .ases-answer-button > *  {
    display: block;
}

[data-theme="no-media"] .ases-answer-button > * > * {
    height: 100%;
}

[data-theme="no-media"] .question-image-container {
    display: none;
}

[data-theme="no-media"] #ases-layout-3-answer-button-container {
    display: none;
}

[data-theme="no-media"] .ases-emo-icon {
    display: none;
}

[data-theme="no-media"] .ases-emo-container .ases-emo-button {
    border-radius: 5px;
    border: 1px solid rgb(203, 115, 43);
    padding: 0;
    background: rgb(203, 115, 43);
    height: 1.8rem;
}

[data-theme="no-media"] .ases-emo-container .ases-emo-button > * {
    border-radius: 4px;
    color: rgb(203, 115, 43);
    background-color: #f6e3d1;

}

[data-theme="no-media"] .ases-emo-container .ases-emo-button.ases-answer-choice-active {
    background: rgb(203, 115, 43) !important;

}

[data-theme="no-media"] .ases-emo-container .ases-emo-button.ases-answer-choice-active > * {
    background: rgb(203, 115, 43);
    color: #FFF;
}

[data-theme="no-media"] .ases-answer-container {
    display: block;
}

[data-theme="no-media"] .ases-emo-button {
    margin-bottom: 0.4rem;
}

[data-theme="no-media"] .ases-hr::before {
    content: ' ';
}

[data-theme="no-media"] .ases-answer-button {
    border-radius: 5px;
    border: 1px solid rgb(203, 115, 43);
    padding: 0;
    background: rgb(203, 115, 43);
    height: 40px;
    width: 100%;
    left: 0;
}

[data-theme="no-media"] .ases-answer-button > * {
    border-radius: 4px;
    color: rgb(203, 115, 43);
    background-color: #f6e3d1;
    font-size: 16px;
    font-weight: normal;
}


[data-theme="no-media"] .ases-answer-button.ases-answer-choice-active {
    background: rgb(203, 115, 43) !important;

}

[data-theme="no-media"] .ases-answer-button.ases-answer-choice-active > * {
    background: rgb(203, 115, 43);
    color: #FFF;
}

[data-theme="no-media"] .back-button-container {
    min-height: 5rem;
}

[data-theme="no-media"] [data-layout="1"] .ases-answer-button-container {
    display: block;
}

[data-theme="no-media"] [data-layout="1"] .ases-answer-button > * > *:first-child {
    height: 100%;
    padding-top: 0;
}

[data-theme="no-media"] [data-layout="3"] .back-button-container {
    position: relative;
    top: 0;
}

[data-theme="no-media"] #step-container {
    border-radius: 1rem;
    overflow: hidden;
}

[data-theme="no-media"]  #step-container::before {
    display: none;
}


[data-theme="no-media"] #step-container > * {
    background-color: #f6e3d1;
    height: 100%;
    flex: 1;
    transition: background-color 4s;
    border-radius: 0;
}

[data-theme="no-media"] #step-container > *.active{ 
    background-color: rgb(203, 115, 43);
}

#ases-type-1-doctor {
    text-align: center;
}

#ases-type-1-doctor img {
    width: 120px;
    height: 173px;
}

#ases-type-1-thankyou {
    text-align: center;
}

#ases-type-1-thankyou > div {
    width: 260px;
    border-radius: 50%;
    background-color: #e8ddb8;
    color: #876b4a;
    padding: 1rem;
    display: inline-block;
    font-weight: bold;
    position: relative;
    top: -1rem;
    font-size: 2rem;
}

#ases-type-1-title {
    text-align: center;
    font-weight: 600;
    color: #876b4a;
    font-size: 1.2rem;
}
#ases-type-1-caption {
    text-align: center;
    color: #876b4a;
    font-size: 1.1rem;
}


[data-theme="no-media"][data-question-type="1"] .ases-answer-button{
    height: 80px;
}

[data-theme="no-media"][data-question-type="1"] .ases-answer-text-small {
    font-size: 1.2rem;
}

[data-theme="no-media"][data-question-type="1"] .ases-header h1 {
    font-size: 1.5rem;
}