:root body:not([data-sidebar-action]) {
    --loose-width: 0px;
    }


body:not([data-sidebar-action]) #nav-toggle,
body:not([data-sidebar-action]) #sidebar {
    pointer-events: none !important;
    opacity: 0 !important;
    }


    #edittree  {
        display: block;
        max-width: 600px;
        margin: 0 auto 100px;
        }


    #edittree  h1{
        position: sticky;
        top: 0;
        z-index: 2;
        background: #eee;
        padding: 10px 0;
        box-shadow: 0px 0px 10px 5px #eee;
        }



    #edittree  img{
        max-width: 50px;
        }


    #edittree .section {
        display: block;
        margin: 0 0 10px;
        background-color: rgba(255,255,255,1);
        padding: 40px 12px 10px;
        text-align: left;
        min-height: 38px;
        border-radius: 6px;
        position: relative;
        box-shadow: 0px 0px 4px rgba(0,0,0,.1);
        }

    #edittree h2 {
        font-size: 14px;
        background: rgb(158, 145, 170);
        text-shadow: 1px 1px 1px rgba(0,0,0,.2);
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        padding: 6px 10px;
        margin: -40px -12px 16px;
        }

    #edittree h2 small {
        float: right;
        font-size: 80%;
        }

        #edittree .section.options label {
            display: block;
            padding: 2px 0px 0px 0px;
            margin: 0 0 10px;
            }

        #edittree .section.options label.deactivated {
            opacity: .2;
            pointer-events: none;
            }

            #edittree .section.options label input {
                float: right;
                margin: 0 0 4px 10px;
                }








    .btn[data-search] {
        padding: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        box-shadow: none;
        position: absolute;
        right: 6px;
        top: 4px;
        text-align: center;
        background: #473c53;
        border-radius: 50%;
        }

        
        .parent-item .test {
            background: #f1f1f1;
            color: #aaa;
            }

        .btn[data-search]:hover {
            background: #444;
            color: #fff;
            }


     .parent-item .test {
         display: inline-block;
         padding: 2px 6px;
         border-radius: 4px;
         font-size: 12px;
         }


    #edittree [name="firstName"],
    #edittree [name="lastNameId"] {
        width: calc(60% - 8px);
        float: left;
        }

    #edittree [name="gender"],
    #edittree [name="setLastName"] {
        width: calc(40% - 8px);
        float: right;
        max-width: 100px;
        }

        
        
    #edittree [name="firstName"],
    #edittree [name="lastNameId"], 
    #edittree [name="setLastName"] {
        max-width: 180px;
        }

    #edittree [name="birthDate"],
    #edittree [name="deathDate"] {
        width: calc(45% - 4px);
        margin-right: 4px;
        max-width: 140px;
        }

    #edittree [name="birthYear"],
    #edittree [name="deathYear"] {
        width: calc(30% - 4px);
        margin-right: 4px;
        width: 90px;
        }


    #edittree [name="birthMonth"],
    #edittree [name="deathMonth"],
    #edittree [name="birthDay"],
    #edittree [name="deathDay"] {
        margin-right: 4px;
        width: 60px;
        }
        

    #edittree [name="birthAge"],
    #edittree [name="deathAge"] {
        margin-right: 4px;
        width: 60px;
        }


    #edittree [type="submit"] {
        position: fixed;
        left:0;right: 0;
        margin: auto;
        width: 200px;
        transform: translateX(calc(var(--loose-width) * -1 + 100px));
        bottom: calc(var(--footer-height) + 10px);
        }
        
        
        @media (max-height: 400px)  {
            #edittree [type="submit"] {
                display: block;
                position: sticky;
                bottom: 0;
                transform: none;
                }
        }