/*
	Patient Enroll
	Copyright (c) 2024 High Enroll, LLC
	All Rights Reserved.
	Permission to use, copy, modify, and distribute this software or any content contained within is strictly prohibited without the explicit written consent of High Enroll, LLC.
 */

:root {
    --main-color-red-header: #AA1F23;
    --main-color-red-header-text: #FFFFFF;
    --main-color-red-dk: #D63A34;
    --main-color-red-lt: #C9274C;

    --main-color-orange-header: #F15E2A;
    --main-color-orange-header-text: #FFFFFF;

    --main-color-orange: #F15E2A;
    --main-color-orange-lt: #D55A42;

    --main-color-hr: #F15E2A;

    --main-color-modal-background: #FFFFFFE0;

    --main-color-grey-header: #D0D0D0;
}

.screenWidth{
    width:100%;
}

.containerWidth{
    width:100%;
}

html{
    font-size: 75%;
    -webkit-text-size-adjust: auto;
    text-size-adjust: auto;
}

html,
body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100%;
    width:100%;
    padding: 0px;
    margin: 0px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    overflow: hidden;
    color: #404040;
}

p{
    padding: 0.5rem 0px;
    margin: 0px;
}

#app_container{
    width:100%;
    position: absolute;
    top:0px;
    bottom:0px;
    overflow-x: clip;
}

hr{
    color: var(--main-color-hr);
    border-top: 1px solid var(--main-color-hr);
}

hr.white{
    color: #FFFFFF;
    border-top: 1px solid #FFFFFF;
}

a.white {
    color: #FFFFFF;
}

.titleError{
    text-align: center;
    margin-bottom: 1rem;
}

.fieldError{
    margin: 0.2em 1em;
}

.hide{
    display: none;
}

.spaceBottom05{
    margin-bottom: 0.5rem;
}

.spaceBottom1{
    margin-bottom: 1rem;
}

.spaceBottom2{
    margin-bottom: 2rem;
}

.spaceBottom3{
    margin-bottom: 3rem;
}

.spaceBottom10{
    margin-bottom: 10rem;
}

.spaceTop05{
    margin-top: 0.5rem;
}

.spaceTop1{
    margin-top: 1rem;
}

.spaceTop2{
    margin-top: 2rem;
}

.spaceTop3{
    margin-top: 3rem;
}

.spaceTop4{
    margin-top: 3rem;
}

.spaceTop6{
    margin-top: 3rem;
}

.spaceLeft1{
    margin-left: 1rem;
}

.spaceSide1{
    margin-left: 1rem;
    margin-right: 1rem;
}

.clickable{
    cursor: pointer;
}

.appContainer{
    display: flex;
    flex-direction:column;
    width:100%;
    height:100%;
    justify-content:flex-start;
}

.pageContainer {
    display: flex;
    flex-direction:column;
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: scroll;
    width:100%;
    height:100%;
}

.listContainer {
    background-color: #FFFFFF;
    width:100%;
    height:100%;
}

.fullScreenFlyUp{
    display: flex;
    flex-direction:column;
    position: absolute;
    top:0px;
    bottom:0px;
    justify-content:flex-start;
    background-color: var(--main-color-orange-lt);
    z-index: 2000;
}

.fullScreenFlyUp iframe{
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
}

.fullScreenHeader{
    background-color: var(--main-color-orange-header);
    color: #FFFFFF;
    padding: 1rem;
}

.fullScreenHeaderBack{
    position: absolute;
    z-index: 1000;
    cursor: pointer;
}

.fullScreenHeaderBack.public{
    position: unset!important;
    float: left;
    margin-right: -10rem;
    cursor: pointer;
}

.fullScreenHeaderTitle{
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
}

.loading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.loading img{
    width:50%;
}

.mainHeaderContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width:100%;
}

.mainHeaderLogo{
    justify-self: flex-start;
}

.mainHeaderHelp{
    justify-self: flex-end;
    cursor: pointer;
}

.navContent {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #F0F0F0;
    justify-content: start;
    overflow: hidden;
}

.navButtons{
    border-top: darkgray solid 1px;
    display: flex;
    flex-direction:row;
    align-content:flex-end;
    background-color: #FFFFFF;
    flex:0;
}

.navButton{
    align-content: center;
    flex-grow: 1;
    text-align: center;
    border-left: darkgray solid 1px;
    font-size: 1rem;
    color: var(--main-color-red-dk);
    padding: 0.5rem 0.5rem 2rem 0.5rem;
    flex: 1;
}

.navButton.home {
    border-left: #FFFFFF none 0px;
}

.navButton.search{
}

.navButton img {
    display: block;
    min-height: 6vw;
    height:3.5vh;
    margin: 0px auto;
}

.navButton:hover{
    background-color: #F8F8F8;
}

.navButton.playlist{
    position: relative;
    text-align: center;
}

.txtC{
    text-align: center;
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middle{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.middle-center{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.between{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.grow2 {
    flex-grow: 2;
}

.callout{
    font-size: 1.15rem;
    padding: 0.5rem;
    margin: 0.1rem 0px;
    font-weight: bold;
}

.warning {
    color: var(--main-color-red-dk);
    font-weight: 800;
}
.colorCalloutLight{
    background-color: steelblue;
}

.colorCalloutDark {
    background-image: url('../image/background_header.svg');
    background-repeat: repeat-y;
    background-clip: border-box;
    background-origin: border-box;
    background-size:cover;
    color: #FFFFFF;
}

.indented{
    padding: 0px 1rem;
}

.termsLogo{
    width: 30vw;
}

.checkbox{
    margin-top: 0.15rem;
    float:left;
    cursor: pointer;
    border-radius: 0.1rem;
    border: 1px solid black;
    margin-right: 0.5rem;
}
.checkbox .checkmark{
    border: 1px solid white;
    border-radius: 0.2rem;
    height:0.8rem;
    width:0.8rem;
}

.checked .checkbox .checkmark{
    background-color:#1F3F5F;
}

.rowContainer{
    background-color: #FFFFFF;
    margin-bottom: 2rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0px 0.2rem 0.4rem #40404080;
}

.rowContainer hr{
    width:95%;
    border-color: #D0D0D0!important;
}

.rowHeaderContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--main-color-red-header);
}

.orangeBG {
    background-color: var(--main-color-orange-lt) !important;
}

.showMore{
    text-align: center;
}

.rowBannerContainer{
    position: relative;
}

.rowBannerImage{
    position: relative;
    width: 100%!important;
}

.rowLogoContainer{
    bottom:1rem;
    left:1rem;
    position: absolute;
}

.rowLogoImage{
    width: 10rem;
}

.rowOverviewText{
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 1.1rem;
}

.rowHeaderText{
    flex-grow: 1;
    font-weight: bold;
    color: var(--main-color-red-header-text);
    margin:1rem 1rem;
    font-weight: bold;
    font-size: 1.2rem;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rowImageContainer{
    width: 100%;
    position:relative;
}

.rowImageContainer img{
    width: 100%;
    display: block;
    position:relative;
}

.rowContentContainer{
    display: flex;
    flex-direction: row;
}

.rowContentTextContainer{
    flex-basis: fit-content;
    flex: 1;
}

.rowImageLogoContainer{
    flex-basis: fit-content;
    flex-grow: 0;
}

.rowImageLogoContainer img{
    width: 8rem;
    margin:0.5rem 0px 0.5rem 0.5rem;
}

.rowSummaryContainer{
    background-color: #FFFFFF;
    display: flex;
}

.rowSummaryText{
    font-size: 1.1rem;
    margin:0.5rem 1rem;
    display: inline-block;
}

.rowFooterContainer{
    display: inline-block;
    width: 100%;
    background-color: #D0D0D0;
    border: 1px solid #1f3f5f;
}

.likeContainer{
    display: flex;
    flex-direction: row;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
}

.likeImage{
    height: 2rem;
    aspect-ratio: 1;
}

.likeText {
    color: var(--main-color-red-dk);
    font-weight: bold;
}

.rowNotesContainer{
    float: left;
    padding: 0.25rem 1rem;
    border-right: 1px solid #1f3f5f;
    cursor: pointer;
}

.rowShareContainer{
    float: right;
    padding: 0.25rem 1rem;
    border-left: 1px solid #1f3f5f;
    cursor: pointer;
}

.rowButtonContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    z-index: 500;
    min-height:1.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.rowButtonDivider {
    flex-grow: 0;
}

.rowButtonDivider img{
    height: 2rem;
}

.rowButtonLeft{
    margin: 0.5rem;
    font-weight: bold;
    color: #1f3f5f;
}

.rowButtonRight{
    margin: 0.5rem;
    font-weight: bold;
    color: #1f3f5f;
}

.welcomeRowHeaderContainer{
    background-color: var(--main-color-red-header);
}

.welcomeRowHeaderText{
    font-weight: bold;
    color: var(--main-color-red-header-text);
    margin:0.75rem 0px;
    width: 100%;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    display: inline-block;
}

.welcomeRowContainer{
    background-color: var(--main-color-orange);
    margin-bottom: 2rem;
    box-shadow: 0px 0.2rem 0.4rem #40404080;
}

.welcomeRowImageContainer img{
    width: 100%;
    aspect-ratio:1.2685;
    display: block;
    position:relative;
}

.welcomeRowSummaryContainer{
    position: relative;
}
.welcomeRowPlayIcon{
    position: absolute;
    top:-4rem;
    width: 100%;
    display: flex;
}

.welcomeRowPlayIcon img{
    height: 8rem;
    aspect-ratio: 1;
    margin: 0px auto;
    cursor: pointer;
}

.welcomeRowSummaryText{
    display: flex;
    color: #FFFFFF;
    height: 16rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.horizontalScrollContainer{
    margin: 0px;
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.horizontalScrollContent {
    scroll-snap-align: center;
}

.horizontalScrollPage{
    text-align: center;
}

.studyRowContainer{
    margin-bottom: 2rem;
}

.studyContent{
    margin: 0.5rem 1rem;
    font-size: 1.1rem;
}

.studyContent strong{
    font-size: 1.15rem;
}

.studySiteName{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

.contentContainerTop{
    background-color: #FFFFFF;
    position: relative;
    top:1px;
}

.contentContainerTopWrapper{
    background-color: var(--main-color-orange);
}

.contentContainerTopLeftDown{
    border-top-left-radius: 3rem;
    background-color: var(--main-color-orange);
    height:3rem;
}

.contentContainerTopRightDown{
    border-top-right-radius: 3rem;
    background-color: var(--main-color-orange);
    height:3rem;
}

.contentContainerTopRightUp{
    background-color: #FFFFFF;
    border-bottom-right-radius: 3rem;
    height:3rem;
}

.contentContainerTopLeftUp{
    background-color: #FFFFFF;
    border-bottom-left-radius: 3rem;
    height:3rem;
}


.contentContainerCenter{
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
    padding: 0px 1.75rem;
    border: 1px var(--main-color-orange) solid;
    background-color: var(--main-color-orange);
}

.contentContainerBottomWrapper{
    background-color: #FFFFFF;
}

.contentContainerBottomLeftUp{
    height:3rem;
    background-color: var(--main-color-orange);
    border-bottom-left-radius: 3rem;
    border-width: 0px;
    border-style: none;
}

.contentContainerBottomRightUp{
    height:3rem;
    background-color: var(--main-color-orange);
    border-bottom-right-radius: 3rem;
    border-width: 0px;
    border-style: none;
}

.contentContainerBottom{
    background-color: var(--main-color-orange);
    border-bottom: 1px #FFFFFF solid;
    position: relative;
    top:-1px;
}

.contentContainerBottomLeftDown{
    background-color: #FFFFFF;
    border-top-left-radius: 3rem;
    height:3rem;
}

.contentContainerBottomRightDown{
    background-color: #FFFFFF;
    border-top-right-radius: 3rem;
    height:3rem;
}

/**/

.contentFooter{
    position: fixed;
    bottom: 0px;
    width: 100%;
}

.contentFooterTop{
    background-color: var(--main-color-orange);
}

.contentFooterTopWrapper{
    background-color: transparent;
}

.contentFooterTopLeftDown{
    border-top-left-radius: 3rem;
    background-color: #FFFFFF;
    height:3rem;
}

.contentFooterTopRightDown{
    border-top-right-radius: 3rem;
    background-color: #FFFFFF;
    height:3rem;
}

.contentFooterTopRightUp{
    border-bottom-right-radius: 3rem;
    height:3rem;
}

.contentFooterTopLeftUp{
    border-bottom-left-radius: 3rem;
    height:3rem;
}

.contentFooterCenter{
    display: flex;
    flex-direction: column;
    color: var(--main-color-orange);
    padding: 0px 1.75rem;
    border: 1px #FFFFFF solid;
    background-color: #FFFFFF;
}

.contentFooterBottomWrapper{
    background-color: var(--main-color-orange);
}

.contentFooterBottomLeftUp{
    height:3rem;
    background-color: #FFFFFF;
    border-bottom-left-radius: 3rem;
    border-width: 0px;
    border-style: none;
}

.contentFooterBottomRightUp{
    height:3rem;
    background-color: #FFFFFF;
    border-bottom-right-radius: 3rem;
    border-width: 0px;
    border-style: none;
}

.contentFooterBottom{
    background-color: #FFFFFF;
    border-bottom: 1px var(--main-color-orange) solid;
}

.contentFooterBottomLeftDown{
    background-color: var(--main-color-orange);
    border-top-left-radius: 3rem;
    height:3rem;
}

.contentFooterBottomRightDown{
    background-color: var(--main-color-orange);
    border-top-right-radius: 3rem;
    height:3rem;
}

/**/

.termsTop{
    flex-grow: 0;
    text-align: center;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.termsLogo{
    width:15%;
    margin-top:2rem;
}

.termsLogoH{
    margin-top:1rem;
    margin-bottom:1rem;
    width:70%;
}

.termsCenter{
    flex-grow: 0;
    flex-basis: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    background-color: #FFFFFF;
}

.termsCenter img{
    width: 100%;
    display: inline-block;
}

.termsCenter img.top {
    position: relative;
    top:1px;
}

.termsCenter img.bottom {
    position: relative;
    top:-1px;
}

.termsContentBox{
    height: 100%;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #FFFFFF;
}

.termsBottom{
    background-color: var(--main-color-orange);
    flex-grow: 1;
    flex-basis: max-content;
    display: flex;
    flex-direction: column;
}

.termsBottomContent{
    background-color: #FFFFFF;
    flex-basis: max-content;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flexboxRow{
    display: flex;
    flex-direction: row;
}

.boxGradient{
    height:100%;
    width:100%;
    background-image: url("../image/box/Gradient.svg");
    background-repeat: repeat-x;
    background-position: center;
    background-size: cover;
    background-clip: border-box;
    background-origin: border-box;
}

.acceptTermsContent{
    font-size: 3rem;
    font-weight: bold;
    margin: 1em;
    color: #FFFFFF;
    text-align: center;
}

button{
    padding:0.5rem 2rem;
    width: 80%;
    color: #FFFFFF;
    border: none;
    font-weight: bold;
    background-color: var(--main-color-red-dk);
    text-transform: uppercase;
    font-size: 1.25rem;
    border-radius: 2rem;
    background-image: url("../image/radial_gradient.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

button:disabled {
    background-color: #E0E0E0;
    background-image:none;
    color: #A0A0A0;
}

button.white{
    color: #404040!important;
    background-color: #FFFFFF!important;
    background-image:none!important;
}

button.redKeyline{
    background-color: #FFFFFF;
    color: var(--main-color-orange)!important;
    border: 1px var(--main-color-orange) solid;
    background-image:none;
}

button.fullWidth{
    width: 100%!important;
}

.tbd{
    /*background-color: #FFD000!important;*/
    background-color: #E0E0E0!important;
    background-image: unset!important;
}

.headerSpace{
    flex-grow: 0;
    flex-shrink: 0;
    height: 8rem;
    width: 100%;
}

.headerContainer{
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height:6rem;
    width: 100%;
    background-color: #FFFFFF;
    z-index:1000;
    border-bottom: 1px var(--main-color-red-header) solid;
}

.headerLogoContainer {
    display: flex;
    flex-direction: row;
    margin-left: 1rem;
}

.headerLogoH{
    margin-left: 2rem;
    width:20rem;
    align-self: center;
}

.contentFlexContainer{
    display: flex;
    flex-direction: column;
    height: calc(100% - (28px + 1.5rem));
    width:100%;
    margin: 0px auto;
    background-color: #F0F0F0;
    border-left: darkgray solid 1px;
    border-right: darkgray solid 1px;
}

.scrollableContentContainer{
    flex-grow: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    background-color: #F0F0F0;
}

.headerProfile{
    flex-grow: 0;
    width:3rem;
    align-self: center;
    margin-right: 1rem;
    justify-self: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.headerProfile img{
    width:100%;
    display: block;
}

.emailInput{
    display: flex;
    background-color: #F0F0F0;
    border-radius: 1.75rem;
    border-width: 0px;
    border-style: none;
}

.emailInput input{
    flex-grow: 1;
    font-size: 1.25rem;
    padding:0.5rem;
    margin-left: 0.5rem;
    border-radius: 1.75rem;
    align-self: center;
    background-color: #F0F0F0;
    border: 0;
    outline:0;
    -webkit-appearance: none;
}

.emailInput input:focus {
    outline:none!important;
}

.emailInput img {
    height:1.5rem;
    margin-right:0.75rem;
    align-self: center;
}

.passwordInput{
    display: flex;
    background-color: #F0F0F0;
    border-radius: 1.75rem;
    border-width: 0px;
    border-style: none;
}

.passwordInput input{
    flex-grow: 1;
    font-size: 1.25rem;
    padding:0.5rem;
    margin-left: 0.5rem;
    border-radius: 1.75rem;
    align-self: center;
    background-color: #F0F0F0;
    border: 0;
    outline:0;
    -webkit-appearance: none;
}

.passwordInput input:focus {
    outline:none!important;
}

.passwordInput img {
    height:1.5rem;
    margin-right:0.75rem;
    align-self: center;
}

.selectInput{
    display: flex;
    background-color: #F0F0F0;
    border-radius: 1.75rem;
    border-width: 0px;
    border-style: none;
}

.selectInput select{
    flex-grow: 1;
    font-size: 1.25rem;
    padding:0.5rem;
    margin-left: 0.5rem;
    border-radius: 1.75rem;
    align-self: center;
    background-color: #F0F0F0;
    border: 0;
    outline:0;
    -webkit-appearance: none;
}

.selectInput select:focus {
    outline:none!important;
}

.searchInput{
    display: flex;
    background-color: #F0F0F0;
    border-radius: 1.75rem;
    border-width: 0px;
    border-style: none;
}

.searchInput input{
    flex-grow: 1;
    font-size: 1.25rem;
    padding:0.5rem;
    margin-left: 0.5rem;
    border-radius: 1.75rem;
    align-self: center;
    background-color: #F0F0F0;
    border: 0;
    outline:0;
    -webkit-appearance: none;
}

.searchInput input:focus {
    outline:none!important;
}

.searchInput img {
    height:1.5rem!important;
    margin-left:0.75rem;
    align-self: center;
}

button.login {
    width: unset!important;
    align-self: center;
}

button.unsized {
    width: unset!important;
    align-self: center;
}

#googleButtonDiv{
    align-self: center;
}

.loginButton{
    align-self: center;
}

.singlePageContent{
    height: 100vh;
    background-color: #F0F0F0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.singlePageContent.top {
    justify-content: flex-start;
}

.contentShadowTop{
    box-shadow: 0px -0.1em 0.8em #404040;
}

.popoverFooterSpace{
    flex-grow: 0;
    flex-shrink: 0;
    height: 20rem;
    width: 100%;
    background-color: #FFFFFF;
}

.whiteBackground{
    background-color: #FFFFFF;
    height: 100%;
    width:100%;
}

.horizontalSpaceBetween{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:1rem;
}

.horizontalSpaceBetween button{
    flex: 1;
    width:unset!important;
}

.startContent{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content:space-around;
}

.startControls{
    display: flex;
    flex-direction: column;
}

.startSearchTerm{
    margin-left: 4rem;
    margin-right: 4rem;
}

.startSearchButton{
    width:unset!important;
    margin-left: 8rem;
    margin-right: 8rem;
}

.startText{
    color: #FFFFFF;
    text-align: center;
    font-size: 1.25rem;
}

.helpBarContainer {
    top:11rem!important;
}

.searchBarContainer{
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    height:4rem;
    background-color: #8f223f;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    z-index: 1000;
}

.searchBarContainer .searchInput{
    flex-grow: 1;
    margin-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    align-self: center;
}

.searchBarContainer img{
    height:2.5rem;
    flex-grow: 0;
    margin-right: 1rem;
    align-self: center;
}

.favoritesBarContainer{
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    width: 100%;
    min-height:4rem;
    background-color: var(--main-color-orange-header);
    align-items:center;
    z-index: 1000;
}

.chicklet{
    background-color: #FFFFFF;
    color: var(--main-color-red-header);
    padding: 0.25rem 0.5rem;
    width:5rem;
    text-align: center;
    border-radius: 1.5rem;
    margin: 1rem 0.5rem;
}

.chicklet.selected {
    background-color: var(--main-color-red-header);
    color: #FFFFFF;
}

.searchResultGroup{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.searchResultGroupHeader{
    position: sticky;
    top:0px;
    z-index: 999;
    background-image: url('../image/background_header.svg');
    background-color: var(--main-color-orange-header);
    background-repeat: repeat-y;
    background-size: cover;
    background-clip: border-box;
    background-origin: border-box;
    color: #FFFFFF;
}

.searchResultGroupHeader h2{
    font-size: 1.5rem;
    padding:0px;
    margin: 0.5rem 1rem;
}

.modalBackground{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F0F0F090;
    z-index: 5000;
}

.modal{
    background-color: #FFFFFF;
    margin: 2rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 0.1rem var(--main-color-orange-header) solid;
    overflow: hidden;
}

.modalLogoContainer{
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: center;
    width: 100%;
}

.modalLogoImage{
    position: relative;
    width:20%;
    margin-bottom: 1rem;
}

.modalLogoClose{
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 10%;
}

.toastMessage {
    position: fixed;
    border: 2px solid;
    display: inline;
    border-radius: 1em;
    padding: 0.5em 2em;
    background-color: white;
    color: var(--main-color-red-lt);
    font-weight: 800;
    top: 50%;
    left: 50%;
    opacity: 90%;
    transform: translate(-50%, -50%);
}

.loading-square {
    height: 10px;
    width: 10px;
    margin-right: 5px;
    background-color: #A6B2BF;
}

.loading-square.active{
    background-color: var(--main-color-red-dk);
}

.flexscreenContainer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
}

.playlistContainer{
    flex-grow: 1;
    overflow: scroll;
}

.playlistContentRowContainer{
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border-bottom: 1px #A0A0A0 solid;
}

.playlistContentRowContainer hr{
    width:95%;
}

.playlistContentRow{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}


.playlistContentRow .playTime{
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0.5rem 0.5rem 1rem;
    justify-content: center;
    align-content: center;
}

.playlistContentRow img{
    width:4rem;
    flex-grow: 0;
}

.playlistContentRow .titleSummary{
    font-size: 1.25rem;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.5rem 0.25rem;
    color: var(--main-color-orange-header);
}

.playlistContentRow .titleSummary .title{
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.playlistContentRow .titleSummary .summary{
    font-weight: normal;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #404040;
}

.playlistContentRow .time{
    align-self: center;
    color: var(--main-color-orange);
}

.playlistContentRow .deleteIcon{
    width:2rem;
    margin:0.5rem 1rem;
}

.audioPlayerContainer {
    background-color: #E0E0E0;
    flex-grow: 0;
}

.audioPlayer{
    padding:2rem 1rem;
    color: #404040;
    display: flex;
    flex-direction: column;
}

.audioPlayerTimes{
    display: flex;
    flex-direction: row;
    flex-basis: max-content;
    justify-content: space-between;
    align-content: center;
}

.audioPlayerControls{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.audioPlayerControls .button{
    align-self:center;
    text-align: center;
    cursor: pointer;
    flex-basis: 100%;
}

.audioPlayerControls .button.play{
    align-self:center;
    flex-basis: 150%;
}

.audioPlayerControls .button img{
    text-align: center;
    width:70%;
}

input[type=range]{
    appearance: auto!important;
    width:100%;
}

.audioPlayerTitle{
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
}

.rowMediaPlayButton{
    position: absolute;
    left:1rem;
    bottom:-1.5rem;
    width:6rem;
    height:6rem;
}

.rowMediaPlayButton img{
    height:100%!important;
    width:100%!important;
    cursor: pointer;
}

.rowMediaPlaylistContainer{
    display: flex;
    margin:0px;
    text-align: right;
    justify-content: flex-end;
    align-content: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    cursor: pointer;
    background-color: var(--main-color-orange);
}

.rowMediaPlaylistContainer img{
    height: 2rem;
}

.rowMediaPlaylistText {
    display: flex;
    flex-direction: row;
    margin:0.25rem 0.25rem;
    justify-content: flex-end;
    align-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    color: #FFFFFF;
    gap: 0.75rem;
}

.loadMoreButton{
    align-self: center;
    font-size: 1rem!important;
    margin-bottom: 2rem;
    background-color: var(--main-color-orange);
    background-image: unset!important;
    width: unset!important;
    padding: 0.75rem 2rem;
    border: 2px solid #FFFFFF;
}

.publicContentContainer{
    overflow: hidden;
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}

.rowHeaderText p{
    padding: 0px!important;
    margin: 0px!important;
}

.publicContentText{
    margin: 0px 1rem 1rem 1rem;
}

.footerOverlayMargin{
    margin-bottom: 16rem;
}

.browserShareTitle {
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
}

.browserShareText{
    text-align: center;
    margin-top: 0.5rem;
    font-size: 1.25rem;
}

.browserShareUrl{
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.searchInstructionContainer{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.searchInstructionText {
    text-align: center;
    color: var(--main-color-orange);
    font-size: 1.5rem;
    font-weight: bolder;
    margin: 4rem 3rem;
    max-width: 60%;
}

.searchInstructionImage{
    width: 30%;
}

.installHeader{
    position: fixed;
    top:0px;
    z-index: 100000;
    align-items: center;
    background-color: #F0F0F0;
    border-bottom: 1px var(--main-color-orange-header) solid;
}

.installHeader img{
    width: 10rem;
    margin: 0.5rem;
}

.installHeader .closeContainer{
    position: absolute;
    right: 1rem;
    top: 1rem;
    flex-grow: 1;
    justify-content:flex-end;
}

.installHeader img.close{
    margin-top: 0px!important;
    width: 1.5rem;
    align-self: flex-start;
    justify-self: flex-end;
}

.installHeader .headerText{
    font-weight: bold;
    font-size: 1.3rem;
    margin: 0.8rem;
    color: var(--main-color-orange);
    text-align: center;
}

.contactMethodContainer{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    cursor: pointer;
}

.contactMethodContainer img{
    width: 2rem;
    flex:0;
}

.contactMethodContainer div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0.5rem 1rem;
    flex:1;
}

.contactMethodContainer button{
    width: 8rem;
}

.bannerOverlayContainer{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 2.5rem;
    margin-top: -2.5rem;
    background-color: #FFFFFFD0;
}

.bannerOverlayContent{
    margin: 0px 0.5rem;
    font-size: 0.9rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.categoryPath{
    font-weight: normal;
    font-size: 1rem;
}

.loginContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    background-color: #FFFFFF;
}

.appRegistrationContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    background-color: #FFFFFF;
    text-align: center;
}

.appRegistrationContainer button.white{
    color: #FFFFFF !important;
    background-color: var(--main-color-orange) !important;
}

.publicWhiteContainer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #FFFFFF;
}

.navSpacer{
    display: none;
}

.developerLogValue{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}