/**
* Made by Lucentinian Works Co Ltd, 2024, you can reuse and distribute this
* code under the terms of the GNU GPLv3 license.
* https://www.gnu.org/licenses/gpl-3.0.en.html
*/
body {
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    padding: 1vw;
    background-image: url('https://lucentinian.com/wp-content/themes/iocarton/images/wood-bg.png');
    display: flex;
    flex-direction: column;
    height: 100%;
}

h1 em {
    font-size: xxx-large;
}

.capitalizeName {
    text-transform: capitalize;
}
.page {
    flex: 0 1 auto;
}
.title {
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
    border-radius: 1vw;
    padding: 1vw;
    background-color: rgba(255,255,255,0.75);
    display: block;
    position: relative;
}
.templates {
    display: none;
}
.box {
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
    border-radius: 1vw;
    padding: 1vw;
    background-color: rgba(255,255,255,0.75);
    display: block;
}
.leftAlignedBox {
    text-align: left;
}
.vcenteredBox {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
}
.clinicIntroductionBox {
    vertical-align: top;
}
.bookmark {
    padding: 0.5vw;
    background-color: rgba(255,255,255,0.75);
    display: inline-block;
    font-size: smaller;
}
.currentTime {
    padding: 1vw;
    background-color: rgba(255,255,255,0.8); 
    border-radius:0;
    display: inline-grid;
    grid-template-columns: auto auto;
    text-align: left;
}
.currentTime > :nth-child(1n+1)
{
    padding: 0.2vw;
    border-bottom: black 1px solid;
}
.currentTime > :nth-child(2n+2)
{
    text-align: right;
}
.listTimeZones {
    border-radius: 1vw;
    padding: 1vw;
    background-color: rgba(255,255,255,0.75);
    display: inline-grid;
    grid-template-columns: auto auto;
    text-align: left;
}
.listTimeZones > :nth-child(1n+1)
{
    padding: 0.1vw;
}
.listTimeZones > :nth-child(2n+2)
{
    text-align: right;
}
.listTimeZones > :nth-child(4n+3),
.listTimeZones > :nth-child(4n+4)
{
    background-color: rgba(255,255,255,0.8);
}
.footerHolder {
    flex: 0 1 fit-content;
    /*
    bottom: 0;
    position: fixed;
    transform: translateX(-50%);
    left: 50%;
    */
}
.footer {
    border-radius: 1vw;
    padding: 1vw;
    background-color: rgba(255,255,255,0.75);
}
.adHolder {
    display: inline-grid;
    border-radius: 1vw;
    padding: 1vw;
    background-color: rgba(255,255,255,0.5);
    position: relative;
}
.adHolder .adSign {
    font-size: 1vw;
    left: 2vw;
    top: 1vw;
    color: brown;
    position: absolute;
    display: block;
    background-color: yellow;
}
.adHolder .adBox {
    display: block;
    background-color: rgba(255,255,0,0.6);
    border-color: brown;
    border-width: 1px;
    border-style: solid;
    margin: 0.5vw;
    padding: 0.5vw;
}
#postAd {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1vw;
    background-color: rgba(255,255,0,0.6);
    border-color: rgba(128,0,0,0.6);
    border-radius: 0.5vw;
    border-width: 1px;
    border-style: solid;
    padding: 0.5vw;
    display: block;
    cursor: pointer;
}
#postAd:hover {
    background-color: rgba(192,192,0);
}
.modalWindowHolder {
    position: fixed;
    left: 0;
    top: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100%;
}
.modalWindowHolder .background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0,0.5);
}
.modalWindowHolder .foreground {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: auto;
    background-color: white;
    max-width: 80%;
    max-height: 80%;
    padding: 2vw;
    border-radius: 1vw;
    overflow-y: auto;
}
.postAd {
    text-align: left;
}
.postAd h1 {
    text-align: center;
}
.postAd .contentCounter {
    text-align: right;
}
.postAd textarea[name='content'] {
    width: 100%;
}
.postAd .submitButtonHolder {
    padding: 1vw;
    text-align: center;
}
.categoriesListHolder {
    display: grid;
    grid-template-columns: 100%;
}
.selectedCategories .selectedCategory {
    border-radius: 0.1vw;
    border-width: 1px;
    border-color: black;
    border-style: dotted;
    margin-right: 0.5vw;
    position: relative;
}
.selectedCategories .selectedCategory:hover {
    background-color: lightgray;
}
.selectedCategories .justMovedSelectedCategory {
    font-weight: bold;
}
.selectedCategories .moveUpButton {
    display: inline-block;
    cursor: pointer;
}
.selectedCategories .moveDownButton {
    display: inline-block;
    cursor: pointer;
}
.selectedCategories .removeButton {
    display: inline-block;
    cursor: pointer;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
}
.selectedCategories .actions {
    display: block;
    top: 0;
    right: 0;
    position: absolute;
}
.hCaptchaReferralUrl {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(255,255,255,0.5);
}
.important {
    font-weight: bold;
}
.communityCodeOfConductBox {
    text-align: left;
}
.loading {
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    z-index:1000;
    top:0;
    left:0;
}
.loading .loadingContentHolder {
    //max-width: 80%;
    //max-height: 80%;
    width: fit-content;
    height: fit-content;
    background-color:rgba(255,255,255,0.5);
    border-radius: 5px;
    position: relative;
    //margin: auto;
    //top: 50%;
    //transform: translateY(-50%);
}
.loading .loadingIcon {
    background-size: 30vw;
    display: block;
    width: 30vw;
    height: 30vw;
}
.ads {
    text-align: left;
    display: inline-block;

}



.button {
    border-style:solid;
    border-radius:1vw;
    border-width:2px;
    border-top-color:rgb(255,255,255,0.5);
    border-left-color:rgb(255,255,255,0.5);
    border-bottom-color:rgb(0,0,0,0.5);
    border-right-color:rgb(0,0,0,0.5);
    padding: 0.5vw;
    cursor: pointer;
}
.button:active {
    background-color: rgb(0,0,0,0.5);
}



.homeTabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: rgba(0,0,0,1);
    font-size: x-large;
}
.homeTabs .selectedTab {
    font-weight: bold;
}
.homeTabs .disabledTab {
    color: rgba(0,0,0,0.5);
}
.homeTabs .appointedTab {
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}


.knowledgeOfChineseMedicineTabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: rgba(0,0,0,1);
    font-size: x-large;
}
.knowledgeOfChineseMedicineTabs .selectedTab {
    font-weight: bold;
}
.knowledgeOfChineseMedicineTabs .disabledTab {
    color: rgba(0,0,0,0.5);
}
.knowledgeOfChineseMedicineTabs .appointedTab {
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}


.listsAndChat {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: auto;
}

.listsAndChat .lists {
    display: grid;
    grid-template-rows: fit-content fit-content auto fit-content;
}

.listsAndChat .lists .tabs {
    display: grid;
    grid-template-columns: auto auto;
}

.listsAndChat .lists .tabs .selectedTab {
    font-weight: bold;
}

.listsAndChat .lists .tabs .appointedTab {
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}

.targetTabDeactivated {
    display: none;
}

.targetTabActivated {
    display: block;
}



.listsAndChat .lists .list {
    overflow-y: scroll;
}

.listsAndChat .chat .dialogs {
    overflow-y: scroll;
}

.listsAndChat .chat .yourNextSentence {
    display: grid;
    grid-template-columns: auto fit-content;
}

.profileIntroductionTitle {
    font-size:larger;
}
.profileFields {
    display: inline-grid;
    grid-template-columns: fit-content(100%);
    margin: 1vw;
    text-align: left;
}
.profileFields .controlsBox {
    display: inline-grid;
    grid-template-columns: auto auto;
    margin-top: 1vw;
    margin-bottom: 1vw;
    
}

.medicalHistory .title {
    font-size:larger;
}
.medicalHistory .summary .ai {
    text-align: left;
    display: inline-block;
    border: solid 1px black;
    border-radius: 1vw;
    padding: 1vw;
    cursor: pointer;
}
.medicalHistory .list {
    text-align: left;
    display: inline-block;
}
.medicalHistory .list .value {
    font-size: larger;
}

.medicalHistory .list .item {
    border-bottom: solid 1px black;
}

.medicalHistory .list .item:nth-child(odd)
{
    background-color: rgba(255,255,255,0.8);
}

.modifyMedicalHistorySummary .summary {
    max-width: 80vw;
    width: 60vw;
    max-height: 80vh;
    height: 50vh;
}

.firstTimePage .box ul {
    display:inline-block;
    text-align:left;    
}

.firstPageNextTime {
    display: block;
}

.firstPageNextTime .content {
    display: inline-block;
    text-align: left;
}

.firstPageNextTime .content .title {
    font-size: xxx-large;
}

.firstTimePages .firstTimePage ul {
    display: inline-block;
    text-align: left;
}

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

#map {
    display: block;
    width: 80vw;
    height: 500px; 
    margin: auto;
}