html {
    margin-top: 0!important;
}

body {
    background: rgba(0,0,0,0.5);
    color: white;
    height: auto!important;
    margin: 0!important;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

h1 {
    color: white;
    border-bottom: 3px solid white;
    margin-top: 0ex;
}

#grave-template {
    display: none;
}

p.success,
p.error {
    margin: 1.5em;
}

section .row.jq-other-country {
    display: none;
}

section .deactivated {
    margin:0;
    display: none!important;
}

section .question {
    margin-bottom: 3em;
}

#grave-0 {
    display: none;
}

body.customize-support {
    padding-top: 32px;
}

#tree-form input[type=submit]{
    background-color: #348534;
    color: white;
    border: none;
    width: 100%;
    font-family: "Roboto Slab", serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.63636em;
    padding-top: 4px;
    padding-bottom: 6px;
    cursor: pointer;
}

#tree-form input[type=text],
#tree-form input[type=email],
#tree-form select,
#tree-form textarea {
    background-color: white;
    padding: 0.25em 0.5ex;
    border: 1px solid gray;
}

#tree-form select {
    padding: 0.25em 0ex;
}

#tree-form .labels {
    padding: 0.25em 0ex;
}

#tree-form section a {
    color: white;
    text-decoration: underline;
}






#tree-form
#tree-form > h1 {
    margin-top: 0px;
    border-bottom: 3px solid white;
    color: white;
    text-align: left;
    padding: 4px 2.5ex 3px 2.5ex;
    font-weight: bold;
}


section {
    padding: 1em 3ex;
    border-bottom: 3px solid white;
}

section h1,
section h2 {
    margin-top: 0px;
    color: white;
    text-align: left;
    padding: 4px 0px 3px 0px;
    font-weight: bold;
    font-size: 15px;
    border: none;
}

section.grave {
    border: 3px solid white;
    width: 100%;
    position: relative;
    padding: 0;
    margin: 3ex 0;
} 

section.grave > h1 {
    margin: 0px;
    background-color: #444;
    padding: 0 2ex;
    border-bottom: 1px solid white;

}

section.person {
    border: none;
}

section .row {
    margin: 2ex 0;
    /*background-color: gold;*/
    display: flex;
    flex-wrap: wrap;
}
section .row p {
     flex: 0 0 100%; 
}

section .row .labels,
section .row .fields {
    display: inline-block;
    vertical-align: top;
}

section .row .labels {
    min-width: 15em;
    /*background-color: green;*/
}

section.person .row .labels {
    min-width: 13em;
}



section .row .fields {
    margin: 0px;
    /*background-color: red;*/
    flex: 10 10 auto;
    display: flex;
}

section .row .fields p {
    margin-top: 0.5ex;
    margin-bottom: 0px;
    font-style: italic
}

@media(min-width: 600px){
    section.person .radio-question{
        margin-left: 12.7em;
        /*margin-bottom: 3em;*/
    }
    
    section .radio-question{
        margin-left: 14.7em;
        margin-top: 0.75em;
    }
    

    section p.must {
        margin-left: 15em;
    }

    section p.remark {
        margin-left: 13em;
        font-style: italic;
        margin-bottom: 2.25em;
    }

    section.grave p.must {
        margin-left: 13em;
    }
}


.fields input,
.fields textarea {
    flex: 10 10 auto;
} 

.fields.mult input:first-child {
    margin-right: 1ex;
} 

.fields.mult input:last-child {
    margin-left: 1ex;
} 



.fields input.zip {
    max-width: 8ex; 
}

.fields input.country-other,
.fields input.email,
.fields input.tel {
    flex: 0 1 50%;
    min-width: 25ex;
}

.fields input.tel {
    margin-bottom: 3em;
}



.row.email,
.row.birth {
    margin-top: 3em
}

.fields input.firstname,
.fields input.lastname {
    flex: 10 10 auto;
    max-width: 50%;
    max-width: calc(50% - 1ex);
}

.fields input.datepicker {
    max-width: 12ex; 
    min-width: 12ex; 
}

.fields input.grave-birth-location,
.fields input.grave-death-location{
    max-width: calc(100% - 14ex);
}

.fields > div,
.fields > div input {
    width: 100%;
}

p>a {
    color: white;
    text-decoration: underline;
}



#tree-form section a.add-button {
    color: white;
    background-color: #444;
    padding: 1ex 2ex;
    margin: 5ex 0 3ex;
    display: block;
    font-weight: bold;
    font-size: 15px;
    width: fit-content;
    text-decoration: none;
    border: 3px solid white;
    cursor: pointer;
}

#tree-form section a.add-button:hover {
    background-color: green;
}

#tree-form section a.add-button.disabled {
    background-color: #444;
    opacity: 0.2;
}


#ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{ 
    position: relative;
    left: -10000000px;
}

a.close-button.disabled {
    opacity: 0;
}

@media(max-width: 600px) {
    section .row {
        flex-direction: column;
    }    
}

@media(max-width: 500px) {
    section .fields.mult.names  {
        display: flex;
        flex-direction: column;
    }
    
    section .fields.mult.names input {
        margin: 0.5em 0 0 0;
        flex: 1 0 100%;
        max-width: 100%;
    }    
}

section.privacy .row.check {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

section.privacy .row.check input {
    flex: 0 0 1em;
    margin-right: 1em
    
}
section.privacy .row.check label {
    flex: 1 1 100%;  
}

section .row#customer-birthdate {
    margin-bottom: 4.5em;
}