body {
    --app-padding         : 20px;
    --app-width           : 1720px;
    --editor-page-space   : 400px;
    --editor-width        : 400px;
    --tab-height          : 36px;
    --img-box-input-color : #ffffff66;
    overflow    : auto;
    text-align  : left;
    text-shadow : 0px -1px 0px rgba(0,0,0,.2);
    line-height : 120%;
    }


    @media (max-width: 2200px) {
        body {--app-width: 1378px; }
    }

    @media (max-width: 1830px) {
        body {--app-width: 1040px; }
    }

    @media (max-width: 800px) {
        body {--app-padding : 10px; }
    }


    :-webkit-autofill { -webkit-transition-delay: 99999s !important; }
    ::-webkit-input-placeholder {color: rgba(255,255,255,.2); }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        }

        ::-webkit-scrollbar-track {
                background: rgba(0,0,0,.2);
                box-shadow: 0px 0px 3px rgba(0,0,0,.4) inset;
                border-radius:4px;
                }
        ::-webkit-scrollbar-thumb {
                border-radius:4px;
                background: rgba(255,255,255,.4);
                }

iframe {
    background:#ffffff55;
    color:#000;width: 100%;
    }

ul {
    margin: 0 0 16px 0;
    padding: 0 0 0 16px;
    }


textarea,
select,
input {
    box-sizing: border-box;
    vertical-align: middle;
    max-width: 100%;
    border: 0px solid transparent;
    padding: 4px 6px;
    cursor: default;
    color: #ffffff99;
    border-bottom: 1px solid #ffffff44;
    background: transparent;
    resize: none;
    -webkit-appearance:none;
    }
    input[type="checkbox"],
    input[type="radio"] {
        cursor: pointer;
        border: 1px solid #ffffff33;
        height: 14px;
        width: 14px;
        border-radius: 50%;
        }

        input[type="checkbox"]:checked,
        input[type="radio"]:checked{
            background: rgb(var(--accent-rgb));
            border-color: rgb(var(--accent-rgb));
            }


    textarea:disabled,
    select:disabled,
    input:disabled {
        opacity: .5;
        }


    textarea:not(:focus):invalid,
    select:not(:focus):invalid,
    input:not(:focus):invalid {
        outline: 0;
        border: 0;
        border-color: rgb(var(--error-rgb)) !important;
        }

    select {
        background: url(../_img/select.png) no-repeat 1px 50% transparent;
        background-size: auto 5px;
        padding-left: 12px !important;
        }
        option {
            background: #333;
            color: #fff;
            }

            option:disabled{
                display: none;
                color: #666;
                }



    textarea {
        resize: vertical;
        }



button {
    background: rgb(var(--accent2-rgb));
    color: #fff;
    min-width: 40px;
    padding: 4px 16px;
    vertical-align: middle;
    }



small {font-size: 80%;}






#controler_out {
    position : fixed;
    top: 0;
    left: 0;
    padding-right: var(--editor-page-space);
    width: 100%;
    box-sizing: border-box;
    background: rgba(var(--controler-rgb), .92);
    z-index: 20;
    }

    #controler {
        position: relative;
        margin: 0px auto;
        max-width: var(--app-width);
        height: var(--controler-height);
        box-sizing: border-box;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        }

        #controler > * {
            align-self: center;
            background: transparent;
            border-radius: 0;
            border: none;
            box-shadow: none;
            display: block;
            color: #fff;
            cursor: pointer;
            font-size: 15px;
            line-height: var(--controler-height);
            white-space: nowrap;
            margin: 0;
            height: 100%;
            max-height: 100%;
            min-width: 20px;
            padding: 0 20px;
            position: relative;
            text-align: center;
            text-shadow: 0px -1px 0px rgba(0,0,0,.3);
            transition: all 0ms, background 140ms linear 0ms, color 140ms linear 0ms;
            }


            body[data-touch="off"] #controler > *:hover {
                background-color: #ffffff22;
                }


            #controler > #filler:hover,
            #controler > #filler {
                flex: 1;
                background: transparent !important;
                padding: 0 !important;
                margin: 0 !important;
                min-width: 0 !important;
                }




            #controler > .controler-text {
                padding: 0 40px;
                }

            #controler > #home {
                padding: 0 4px;
                min-width: var(--controler-height);
                width: var(--controler-height);
                background: rgb(var(--dark-rgb));
                }

            #controler > button {
                background: rgb(var(--accent2-rgb));
                min-width: 40px;
                text-overflow: ellipsis;
                overflow: hidden;
                }

            #controler img {
                margin-top: 4%;
                height: 90%;
                width: auto;
                }



            #controler > select {
                background: url(../_img/select.png) no-repeat 8px 50% transparent;
                background-size: auto 5px;
                padding-left: 20px !important;
                padding-right: 14px !important;
                min-width: 40px;
                text-overflow: ellipsis;
                overflow: hidden;
                }

            #controler > select.selection {
                background-color: rgb(var(--accent3-rgb));
                text-align: left;
                }
                #controler > select.selection[name="selection[handle]"] { width: 140px; border-right: 1px solid #ffffff55;}
                #controler > select.selection[name="selection[action]"] { width: 220px; }


                @media (max-width: 800px) {
                    #controler > select.selection[name="selection[handle]"] { width: 110px}
                    #controler > select.selection[name="selection[action]"] { width: 160px;}
                }
                @media (max-width: 360px) {
                    .selection-on #home { display: none; }
                    #controler > select.selection[name="selection[handle]"],
                    #controler > select.selection[name="selection[action]"] { width: auto}
                }



            #controler > .selection { display: none;  }
            .selection-on #controler > .selection { display: block; }
            .selection-on #controler > .no-selection { display: none; }

                    #controler > * > span[data-ic]{
                        display: block;
                        margin: 0 -20px;
                        width:  calc(100% + 40px);
                        height: 100%;
                        line-height: var(--controler-height);
                        }



                        @media (max-width: 800px) {
                            #controler > .controler-text {
                                padding: 0 20px;
                            }
                        }


                        @media (max-width: 480px) {
                            #controler > * {
                                padding: 0 15px;
                                font-size: 12px;
                                }

                                #controler > * > span[data-ic]{
                                    margin: 0 -15px;
                                    width:  calc(100% + 30px);
                                    }

                            #controler > .controler-text {
                                padding: 0 10px;
                            }
                        }



                    .settings-on #settings,
                    .edtr-on #edtr-toggle {
                            background: rgb(var(--dark-rgb)) !important;
                            }

                        #settings-container {
                            position: absolute;
                            top: var(--controler-height);
                            left: 0;
                            background: rgb(var(--dark-rgb));
                            box-shadow: 0px 5px 5px #00000033;
                            padding: 20px;
                            width: 440px;
                            min-height: 100px;
                            max-height: calc(100vh - var(--controler-height) - 20px);
                            text-align: left;
                            line-height: 120%;
                            pointer-events: none;
                            box-sizing: border-box;
                            font-size: 12px;
                            opacity: 0;
                            overflow: auto;
                            transition: all 200ms, width 0ms, height 0ms, left 0ms;
                            transform: translateY(-20px);
                            color: #ffffffaa;
                            }
                            .settings-on #settings {
                                display: block !important;
                                }

                            .settings-on #settings-container {
                                pointer-events: auto;
                                opacity: 1;
                                transform: translateX(0px);
                                }


                                @media (max-width: 800px) {
                                    #settings {
                                        position: static;
                                    }
                                    #settings-container {
                                        left: 40px;
                                        width: calc(100% - 80px);
                                        }

                                    #to-faq {display: none;}
                                }

                                @media (max-width: 480px) {
                                    #settings-container {
                                        left: 10px;
                                        width: calc(100% - 20px);
                                        }
                                }



                                #settings-container-export {
                                    margin: 0 0 20px 0;
                                    }


                                .settings-1ex #settings-container-import {
                                    opacity: .3;
                                    pointer-events: none;
                                    }



                                    #settings h2 {
                                        padding: 0 0 8px;
                                        margin: 0 0 4px;
                                        border-bottom: 1px solid rgb(var(--accent2-rgb));
                                        color: rgb(var(--accent2-rgb));
                                        }

                                    #settings label {
                                        display: block;
                                        padding: 4px 0px;
                                        }

                                        label#settings-export-save-label {
                                            display: none !important;
                                            }
                                            .settings-1ex label#settings-export-save-label {
                                                display: block !important;
                                                }



                                        #settings b {
                                            display: inline-block;
                                            min-width: 160px;
                                            font-weight: normal;
                                            font-size: 12px;
                                            padding: 0px 10px 0 0;
                                            }

                                            @media (max-width: 420px) {
                                                #settings b {
                                                    display: block;
                                                    padding: 4px 0 0;
                                                    font-weight: bold;
                                                    }
                                                #settings label {
                                                    display: block;
                                                    padding: 0px;
                                                    margin: 0 0 20px 0;
                                                    }
                                            }

                                        #settings select {
                                            min-width: 80px;
                                            max-width: 160px;
                                            color: #ffffffaa;
                                            }


    .settings-on #page {
            pointer-events: none;
            }


    #donate img {
        position: fixed;
        bottom: 20px;
        right: calc(24px + var(--editor-page-space));
        height: 38px;
        z-index: 5;
        }
        @media (max-width: 600px) {
            #donate img {
                right: calc(16px + var(--editor-page-space));
                bottom: 16px;
                height:28px;
                }
        }


        #donate:hover img {
            transform: scale(1.2);
            }


    #page {
        max-width: var(--app-width);
        min-width: 220px;
        margin: 0px auto;
        padding: 60px var(--app-padding) 60vh var(--app-padding);
        position: relative;
        border-right: var(--editor-page-space) solid transparent;
        }


        #job {
            min-width: 100%;
            width: 100%;
            box-sizing: border-box;
            max-width: 100%;
            background: #00000022;
            border: 1px solid #11343f;
            box-shadow: 0 0 10px rgba(0,0,0,.2) inset;
            position: relative;
            margin: 40px 0;
            border-radius: 5px;
            transition: border 300ms linear 200ms, background 300ms linear 200ms;
            }


            #job:target {
                border: 1px solid #ffffff88;
                background: #00000077;
                }


            @media (max-height: 860px) {
                #job {
                    margin: 30px 2px 20px;
                    }
            }

            #job-action {
                padding: 8px;
                text-align: center;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                }



                #job .ubtn {
                    display: block;
                    position: relative;
                    border-radius: 4px;
                    background: #11343f;
                    width: calc(25% - 4px);
                    max-width: 168px;
                    min-width: 50px;
                    box-sizing: border-box;
                    padding: 10px 6px 0px;
                    height: 120px;
                    overflow: hidden;
                    text-align: center;
                    font-size: 10px;
                    line-height: 130%;
                    margin: 2px;
                    cursor: pointer;
                    color: #fff;
                    transition: all 200ms;
                    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
                    }

                    body[data-touch="off"] #job .ubtn:hover {
                        color: #ffffff;
                        background: #18424f;
                        }

                    #job .ubtn input {
                        position: absolute;
                        left:0;
                        top: 0;
                        z-index: 2;
                        margin: 0;
                        padding: 0;
                        border: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        cursor: pointer;
                        }

                        #job .ubtn::before {
                            font-size: 40px;
                            display: block;
                            margin: 12px 0;
                            transition: color 1s linear 200ms;
                            }


                            #job[data-job="loading"] .ubtn {
                                pointer-events: none;
                            }
                            .enter-on .ubtn::before,
                            #job[data-job="loading"] .ubtn::before {
                                color: #18424f !important;
                                transition: color 2s linear;
                                }

                            @media (max-width: 340px) {
                                #job .ubtn::before {
                                    font-size: 30px;
                                    }
                            }
                            #job .ubtn.do-clean-cards::before {
                                color: rgb(var(--error-rgb));
                                }

                    #job .ubtn .corner {
                        position: absolute;
                        right:0;
                        top: 0;
                        margin: 0;
                        display:block;
                        z-index: 4;
                        width: 40px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        background: rgb(var(--accent-rgb));
                        cursor: pointer;
                        }


                        #job .ubtn .corner input {

                            }



                #progress {
                    position: fixed;
                    top: var(--controler-height);
                    left: 0;
                    z-index: 10;
                    height: 4px;
                    margin: 0;
                    overflow: hidden;
                    width: calc(100% - var(--editor-page-space));
                    pointer-events: none;
                    }
                    #progress > div {
                        height: 100%;
                        background: rgb(var(--accent2-rgb));
                        width: 0%;
                        }

                        #job[data-job] #progress > div {
                            transition: all 200ms;
                            }

                        @keyframes pulse{
                            0%   {  opacity: 1 }
                            50%  {  opacity: 0 }
                            100% {  opacity: 1 }
                        }

                        #progress[data-status="done"] > div {
                            animation: pulse 1s infinite linear;
                            }

                        #job[data-job="error"] #progress > div {
                            animation: pulse 2s infinite linear;
                            width: 400px !important;
                            max-width: 50% !important;
                            margin: 0px auto;
                            background: rgb(var(--error-rgb));
                            }

                #logs {
                    border-radius: 5px;
                    overflow: hidden;
                    }

                    #logs > b {
                        position: absolute;
                        right: 0px;
                        padding: 0 2px 4px 20px;
                        top: -30px;
                        min-width: 80px;
                        height: 30px;
                        line-height: 24px;
                        font-size: 14px;
                        text-align: right;
                        color: #18424f;
                        transition: color 300ms linear 200ms;
                        }

                        #logs:target > b {
                            color: #fff;
                            }

                    #logs > div {
                        background: rgb(var(--dark-rgb));
                        color: #ffffff77;
                        display: none;
                        font-family: monospace;
                        font-size: 12px;
                        line-height: 130%;
                        position: relative;
                        }

                        #logs:target > div,
                        #logs:hover > div {
                            display: block;
                            }

                        #logs > div::after {
                            display: block;
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            pointer-events: none;
                            width: 100%;
                            height: 40px;
                            background: linear-gradient(to bottom, rgba(var(--dark-rgb),0.0) 0%, rgb(var(--dark-rgb)) 100%);
                            }

                            #logs ul {
                                margin: 0;
                                padding: 0;
                                overflow: auto;
                                padding: 20px 20px;
                                height: 300px;
                                }
                            #logs li {
                                padding: 4px 10px;
                                margin: 0 0 1px 0;
                                border-bottom: 1px solid #ffffff0a;
                                border-left: 2px solid #ffffff33;
                                overflow-wrap: break-word;
                                transition: all 200ms;
                                }

                                #logs li:last-child {
                                    margin-bottom: 30px;
                                    }

                            #logs li[data-log-type="info"] {border-left-color: rgb(var(--info-rgb));}
                            #logs li[data-log-type="success"] {border-left-color: rgb(var(--success-rgb));}
                            #logs li[data-log-type="error"] {border-left-color: rgb(var(--error-rgb));}

                            #logs li:hover {
                                background: #ffffff0a;
                                color: #ffffffaa;
                                }



        #card-list {
            text-align      : center;
            display         : flex;
            flex-wrap       : wrap;
            justify-content: center;
            padding: 0;
            margin: 0;
            }
            .card {
                align-items        : stretch;
                background         : none 50% 40% no-repeat #123e4b;
                border-radius      : 5px;
                box-shadow         : 1px 1px 3px rgba(0,0,0,.2);
                box-sizing         : border-box;
                content-visibility : auto;
                contain-intrinsic-size: 320px;
                display            : block;
                flex               : 1 1 auto;
                margin             : 2px;
                max-width          : 340px;
                min-height         : 300px;
                min-width          : 340px;
                order              : 1;
                overflow           : hidden;
                padding            : 10px 10px 22px;
                position           : relative;
                text-align         : left;
                transform-origin   : center center;
                transition         : all 180ms linear 20ms, max-width 500ms, width 500ms, min-width 500ms, outline 300ms linear 200ms;
                }

                @media (max-width: 360px) {
                    .card {
                        min-width : 100%;
                        }
                }



                .card.new {opacity: 0.005; }
                .card:target {outline: 1px solid #ffffff88; }

                    ul.tab {
                        width: calc(100% + 20px);
                        text-align: center;
                        display: flex;
                        align-items: end;
                        justify-content : flex-end;
                        margin: -10px -10px 14px;
                        padding: 0;
                        background: rgb(var(--dark-rgb));
                        box-shadow: 0px -15px 10px -10px #00000030 inset;
                        }

                            .anchor,
                            ul.tab li {
                                position: relative;
                                width      : 44px;
                                min-width  : 20px;
                                max-width  : calc(100% / 7);
                                margin     : 0;
                                padding    : 0;
                                display    : block;
                                text-align : center;
                                font-size  : 16px;
                                padding    : 4px;
                                color: #123e4b;
                                cursor: pointer;
                                box-sizing: border-box;
                                }

                                .anchor:hover,
                                ul.tab li:hover {background : #000000;}

                                .anchor {
                                    position: absolute;
                                    left: 0px;
                                    top: 0px;
                                    z-index: 1;
                                    text-align: center;
                                    color: rgb(var(--accent2-rgb));
                                    font-size: 12px !important;
                                    font-weight: 500 !important;
                                    line-height: var(--tab-height) !important;
                                    font-family: monospace;
                                    }

                                    .card.selected .anchor {
                                        color: #d34fbd;
                                        }

                                li[data-tab="card"] .anchor,
                                li[data-tab="rest"] ul.tab > li[data-tab="rest"],
                                li[data-tab="phone"] ul.tab > li[data-tab="phone"],
                                li[data-tab="internet"] ul.tab > li[data-tab="internet"],
                                li[data-tab="organization"] ul.tab > li[data-tab="organization"],
                                li[data-tab="user"] ul.tab > li[data-tab="user"],
                                li[data-tab="location"] ul.tab > li[data-tab="location"] {
                                    background    : #123e4b;
                                    color         : #fff;
                                    font-size     : 20px;
                                    border-radius : 5px 5px 0 0;
                                    }


                                    ul.tab li::before {
                                        display: block;
                                        line-height: var(--tab-height);
                                        }


                                    ul.tab li[data-count]::after {
                                        position: absolute;
                                        right: 8px;
                                        top: 6px;
                                        content: attr(data-count);
                                        display: block;
                                        line-height: 9px;
                                        font-size: 8px;
                                        color: #fff;
                                        }
                                        li[data-tab="rest"] ul.tab > li[data-tab="rest"]::after,
                                        li[data-tab="phone"] ul.tab > li[data-tab="phone"]::after,
                                        li[data-tab="internet"] ul.tab > li[data-tab="internet"]::after,
                                        li[data-tab="organization"] ul.tab > li[data-tab="organization"]::after,
                                        li[data-tab="user"] ul.tab > li[data-tab="user"]::after,
                                        li[data-tab="location"] ul.tab > li[data-tab="location"]::after,
                                        ul.tab li[data-count="0"]::after {
                                            display: none;
                                            }



                                .main {
                                    padding-bottom: 24px;
                                    min-height: 82px;
                                    }


                                .thumb {
                                    display: block;
                                    width: 60px;
                                    height: 60px;
                                    border-radius: 50%;
                                    box-shadow: 0px 2px 4px #00000044;
                                    transform-origin: 50% 30%;
                                    transition: all 400ms, transform 400ms cubic-bezier(.17,.67,.33,1.39);
                                    }

                                    .img-box.new .thumb {
                                        transition: all 0ms;
                                        opacity: 0;
                                        transform: scale(2) rotateX(90deg);
                                        }



                                        #card-list textarea,
                                        #card-list select,
                                        #card-list input {
                                            transition: all 200ms, font-size 0ms;
                                            border: 0px solid transparent;
                                            padding: 3px 3px 4px;
                                            margin: 1px;
                                            color: #ffffff99;
                                            border-bottom: 1px solid #ffffff15;
                                            background-color: transparent;
                                            }

                                            #card-list textarea {
                                                width: 100%;
                                                min-height: 100px;
                                                font-size: 80%;
                                                line-height: 130%;
                                                }

                                            #card-list input[type="checkbox"],
                                            #card-list input[type="radio"] {
                                                cursor: pointer;
                                                border: 1px solid #ffffff33;
                                                width: 16px;
                                                }


                                                    #card-list input[type="checkbox"] {
                                                        height: 4px;
                                                        border-radius: 2px;
                                                        }

                                                        #card-list input[type="checkbox"]:checked {
                                                            background: #ffffff;
                                                            }

                                                    #card-list input[type="radio"] {
                                                        height: 16px;
                                                        border-radius: 50%;
                                                        }

                                                        #card-list input[type="radio"]:checked{
                                                            background: rgb(var(--accent-rgb));
                                                            border-color: rgb(var(--accent-rgb));
                                                            }



                                                #card-list input:placeholder-shown {
                                                    border-bottom: 1px solid #ffffff15;
                                                    color: #ffffff55;
                                                    }

                                                #card-list textarea:focus,
                                                #card-list select:focus,
                                                #card-list input:focus {
                                                    border-bottom: 1px solid #ffffff33;
                                                    color: rgb(var(--accent-rgb));
                                                    cursor: text;
                                                    }


                                                    #card-list select:focus option {
                                                        background: #fff !important;
                                                        color: #000 !important;
                                                        }



                                    .img-box {
                                        position: absolute;
                                        right: 10px;
                                        top: 54px;
                                        z-index: 4;
                                        perspective: 100px;
                                        }

                                        .img-box-url,
                                        .img-box-delete,
                                        .img-box-upload {
                                            position: absolute;
                                            right: 0px;
                                            top: 0px;
                                            width: 26px;
                                            height: 26px;
                                            font-size: 14px;
                                            color: #ffffff44;
                                            background: #00000011;
                                            border-radius: 50%;
                                            cursor: pointer;
                                            transition: all 100ms linear 0ms, opacity 200ms linear 50ms;
                                            }


                                            .img-box-url    {right: 65px; top: 15px;}
                                            .img-box-upload   {right: 57px; top: 45px;}
                                            .img-box-delete {right: 31px; top: 62px; }

                                            .img-box-url:hover,
                                            .img-box-delete:hover,
                                            .img-box-upload:hover {
                                                color: #fff;
                                                background: #00000055;
                                                }


                                            .img-box-url::before,
                                            .img-box-delete::before,
                                            .img-box-upload::before {
                                                display: block;
                                                line-height: 26px;
                                                text-align: center;
                                                transition: all 100ms linear 0ms;
                                                }

                                            .img-box.is-empty .img-box-upload {
                                                right: 0px;
                                                top: 0px;
                                                width: 60px;
                                                height: 60px;
                                                }
                                                .img-box.loading .img-box-url,
                                                .img-box.loading .img-box-delete,
                                                .img-box.loading .img-box-upload {
                                                    pointer-events: none;
                                                    }

                                                .img-box.is-empty .img-box-delete {
                                                    pointer-events: none;
                                                    opacity: 0;
                                                    }


                                                @keyframes rotate{
                                                    from{  transform: rotate(0deg)   }
                                                    to  {  transform: rotate(360deg) }
                                                }

                                                .img-box.show-uploadbox .img-box-upload {
                                                    background: #00000099;
                                                    }

                                                .img-box.show-uploadbox .img-box-upload::before {
                                                    content: "\f00d";
                                                    color: rgb(var(--error-rgb));
                                                    }

                                                .img-box .img-box-upload.loading::before {
                                                    content: "\f110";
                                                    color: #fff;
                                                    animation: rotate 800ms infinite linear;
                                                    }

                                                .img-box.is-empty .img-box-upload::before {
                                                    line-height: 60px;
                                                    font-size: 20px;
                                                    }


                                                    .img-box-file-container {
                                                        position: absolute;
                                                        right: 0px;
                                                        top: 74px;
                                                        width: 160px;
                                                        background: rgb(var(--dark-rgb));
                                                        padding: 10px;
                                                        border-radius: 5px;
                                                        text-align: center;
                                                        opacity: 0;
                                                        pointer-events: none;
                                                        z-index: 4;
                                                        transform: translateY(-10px);
                                                        transition: all 120ms;
                                                        }

                                                        .show-uploadbox .img-box-file-container {
                                                            transform: translateX(0);
                                                            opacity: 1;
                                                            pointer-events: auto;
                                                            }


                                                            .img-box-file-container input {
                                                                width: 100%;
                                                                text-align: center;
                                                                }
                                                                .img-box-file-container input:placeholder-shown  {
                                                                    color: var(--img-box-input-color) !important;
                                                                    }
                                                            .img-box-file-container b {
                                                                display: block;
                                                                margin: 4px 0;
                                                                color: #fff;
                                                                }

                                                            .img-box-file {
                                                                position: relative;
                                                                display: inline-block;
                                                                width: 100%;
                                                                font-size: 14px;
                                                                line-height: 20px;
                                                                color: var(--img-box-input-color);
                                                                background: #00000011;
                                                                overflow: hidden;
                                                                z-index: 8;
                                                                cursor: pointer;
                                                                }
                                                                .img-box-file input {
                                                                    position: absolute;
                                                                    left: 0;
                                                                    top: 0;
                                                                    margin: 0;
                                                                    border-radius: 0;
                                                                    width: 100%;
                                                                    height: 100%;
                                                                    z-index: 10;
                                                                    opacity: 0;
                                                                    }
                                                                    .img-box-file-container input:invalid {
                                                                        border-color: rgb(var(--error-rgb)) !important;
                                                                        }



                                    #card-list footer {
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        padding: 3px 6px 0;
                                        background: #11343f;
                                        width: 100%;
                                        height: 22px;
                                        box-sizing: border-box;
                                        line-height: 14px;
                                        font-size: 10px;
                                        color: #ffffff77;
                                        transition: all 100ms;
                                        }

                                        #card-list .card.selected footer {
                                            background: #240d1f;
                                            }

                                        #card-list footer label {
                                            display: inline-block;
                                            width: 100%;
                                            }
                                            #card-list footer label:hover {
                                                color: #fff;
                                                }

                                        #card-list footer input[type="checkbox"] {
                                            width: 14px;
                                            height: 14px;
                                            border-radius: 50%;
                                            border: 2px solid #ffffff77;
                                            background: transparent;
                                            margin: 0 2px 0 0;
                                            transition: all 100ms;
                                            }

                                            #card-list footer input[type="checkbox"]:checked {
                                                box-shadow: 0px 0px 5px 1px #a53f94;
                                                border-color: #a84197;
                                                background: #b44ca3;
                                                }



h1, .h1 {
    font-size: 42px;
    line-height:120%;
    font-weight: 200;
    background: transparent;
    display: block;
    border-bottom: 1px solid #00000011;
    margin: 0 0 20px 0;
    color: rgb(var(--accent-rgb));
    }


    @media (max-width: 760px) {
        h1, .h1 {
            font-size: 36px;
            }
    }
    @media (max-width: 460px) {
        h1, .h1 {
            font-size: 32px;
            }
    }

h2, .h2 {
    font-size: 20px;
    line-height:120%;
    font-weight: 400;
    background: transparent;
    padding: 0px;
    margin: 0 0 20px 0;
    display: block;
    border-bottom: 1px solid #00000011;
    }


h4, .h4 {
    background: #11343f;
    padding: 3px 10px;
    font-size: 10px;
    text-transform: uppercase;
    color: #ffffff66;
    box-shadow: 0px 5px 4px -4px inset #00000022;
    }


    .h1:placeholder-shown,
    .h2:placeholder-shown,
    .h3:placeholder-shown,
    .h4:placeholder-shown {
        border-bottom: 1px solid #00000011;
        color: #ffffff44;
        }


    .main [name$="[first]"],
    .main [name$="[last]"] {
        width: 180px;
        }
    .main [name$="[last]"] {
        margin-bottom: 20px;
        }



.round {
    width: 28px;
    height: 28px;
    line-height: 29px;
    font-size: 18px;
    font-weight: 200;
    background: transparent;
    border-radius: 50%;
    display: block;
    text-align: center;
    color: #ffffff44;
    font-family: Arial, Helvetica, sans-serif;
    transition: all 180ms;
    cursor: pointer;
    }

    .round:hover {
        color: #fff;
        background: rgb(var(--accent2-rgb));
        }


        h4 .round {
            position: absolute;
            right: 4px;
            top: -2px;
            font-size: 14px;
            transition: all 180ms linear 20ms;
            z-index:2;
            }
        h4 .round.do-add {
            right: 34px;
            }


                .is-singleton h4 .round.do-add {
                    pointer-events: none;
                    opacity: 0;
                    }

                .is-empty h4 .round.do-more,
                .is-more h4 .round.do-add {
                    pointer-events: none;
                    transform: translateX(-36px);
                    opacity: 0;
                    }

                .is-more h4 .round.do-more::before {
                    content: "\f0d9";
                    color: #fff;
                    }

                .is-empty h4 .round.do-add {
                    transform: translateX(30px) translateY(6px) scale(1.2);
                    }


        .ii-item .round {
            position: absolute;
            left: -38px;
            top: 2px;
            background: #0000001f;
            color: #ffffffaa;
            transform: translateX(-80px);
            transition: all 180ms linear 200ms;
            }


                .is-more .ii-item .round {
                    transform: translateX(0px);
                    }

                .ii-item .delete {
                    color: rgb(var(--error-rgb));
                    left: -78px;
                    }
                .ii-item .round:hover {
                    background: #00000077;
                    color: #fff;
                    }


    .section,
    section {
        display: none;
        margin: 0px -10px 10px;
        padding: 0px 10px 10px;
        position: relative;
        }

        li[data-tab="card"] .section[data-tab="card"],
        li[data-tab="card"] section[data-tab="card"],
        li[data-tab="rest"] .section[data-tab="rest"],
        li[data-tab="rest"] section[data-tab="rest"],
        li[data-tab="phone"] .section[data-tab="phone"],
        li[data-tab="phone"] section[data-tab="phone"],
        li[data-tab="internet"] .section[data-tab="internet"],
        li[data-tab="internet"] section[data-tab="internet"],
        li[data-tab="organization"] .section[data-tab="organization"],
        li[data-tab="organization"] section[data-tab="organization"],
        li[data-tab="user"] .section[data-tab="user"],
        li[data-tab="user"] section[data-tab="user"],
        li[data-tab="location"] .section[data-tab="location"],
        li[data-tab="location"] section[data-tab="location"] { display: block;}


        section::after {
            display: block;
            content: '';
            background-image: linear-gradient( to right, transparent 0%, #123e4b 100%);
            background-size: 100%;
            position: absolute;
            right: 0;
            top: 24px;
            height: calc(100% - 16px);
            width: 120px;
            pointer-events: none;
            z-index:0;
            transition: all 180ms linear 400ms;
            opacity: 0;
            }

            section.is-more::after {
                opacity: 1;
                }
            section.is-empty::after {
                transition: all 0ms linear 0ms;
                opacity: 0;
                }


        section h4,
        section .h4 {
            display: block;
            margin: 0px -10px 6px;
            position: relative;
            transition: all 180ms linear 20ms;
            }

            section.is-empty h4 {
                margin-bottom: -19px;
                padding-top: 10px;
                padding-bottom: 10px;
                }



        .section[data-tab="user"] [name^="gender["],
        .section[data-tab="user"] [name$="[prefix]"],
        .section[data-tab="user"] [name$="[middle]"],
        .section[data-tab="user"] [name$="[suffix]"] {
            width: calc(50% - 5px);
            }


        .ii-item {
            display: block;
            padding: 0px 0px 0px;
            margin-bottom: 2px;
            position: relative;
            transition: all 200ms linear 210ms;
            }

            .ii-item.new {
                opacity: 0;
                transform: translatex(-10px);
            }


            .is-more .ii-item {
                transform: translateX(80px);
                }


            .ii-item.ii-adr {
                margin-bottom: 20px;
                }

                .ii-item:last-child {
                    padding-bottom: 0 !important;
                    margin-bottom: 0 !important;
                    border: 0 !important;
                    box-shadow: none !important;
                    }


                            .ii-item input {
                                font-size: 14px;
                                line-height: 18px;
                                }

                            .ii-item input[name$="[label]"],
                            .ii-item select {
                                font-size: 11px;
                                line-height: 18px;
                                }


                            .ii-item input:placeholder-shown {
                                font-size: 11px;
                                }

                            .ii-item [type="date"] {
                                width: 140px;
                                }
                            .ii-item [type="checkbox"] {
                                margin: 11px 0 0 !important;
                                float: right;
                                }

                            .ii-item [type="radio"] {
                                margin: 5px 0 0 !important;
                                float: right;
                                }



                                .ii-title input,
                                .ii-org input { width: calc(50% - 5px);}



                                .ii-impp select { width: 100px;  }
                                .ii-impp [type="text"] { width: calc(100% - 110px); }

                                .ii-url select { width: 70px;  }
                                .ii-url [type="url"]  { width: calc(100% - 100px); }

                                .ii-email select { width: 70px;  }
                                .ii-email [type="email"] { width: calc(100% - 100px); }

                                .ii-related select { width: 90px; }
                                .ii-related [type="text"] { width: calc(100% - 120px); }

                                .ii-tel select { width: 70px; }
                                .ii-tel [type="tel"] { width: calc(100% - 176px); }


                                .ii-adr [name*="street"] { width: calc(100% - 82px) !important; display: block;   }
                                .ii-adr textarea[name*="street"] { min-height:20px !important; height:50px;}
                                .ii-adr [name*="city"] { width: calc(100% - 158px); margin-right: 70px !important;}
                                .ii-adr [name*="region"],
                                .ii-adr [name*="country"] { width: calc(((100% - 86px) / 2 )); }

                                .ii-adr select,
                                .ii-adr [name*="postCode"] { width: 70px;}

                                .ii-bday input { width: 140px; }


                                .ii-item input[name$="[label]"] {
                                    display: block;
                                    width: calc(100% - 140px);
                                    margin: 1px 1px 10px 40px !important;
                                    }
                                    .ii-item input[name$="[label]"]:disabled {
                                        display: none;
                                        }



.message {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 40px;
    display: block;
    background: #fff;
    border-radius: 40px;
    box-sizing: border-box;
    text-shadow: none;
    color: #444;
    margin: auto;
    max-width: 600px;
    padding: 20px 20px;
    width: 80vw;
    z-index: 9999;
    pointer-events: none;
    text-align: center;
    line-height: 130%;
    font-size: 16px;
    transform: perspective(250px) rotateX(0deg);
    transition: all 400ms linear 0ms, background 700ms linear 0ms, width 0ms;
    }


    @media (max-height: 900px) {
        .message {
            padding: 15px 20px;
            font-size: 14px;
        }
    }


    @media (max-height: 600px) {
        .message {
            font-size: 13px;
            padding: 10px 20px;
        }
    }

        .message.with-action {
            pointer-events: auto;
            }

        .message.error {
            background: rgba(var(--error-rgb), .95);
            }

        .message.init {
            background: #888;
            opacity: .1;
            transform: perspective(250px) rotateX(90deg);
            transition: all 400ms linear 0ms, background 700ms linear 0ms;
            }
        .message.hide {
            opacity: .3;
            background: #999;
            transform: perspective(250px) rotateX(-90deg);
            transition: all 400ms linear 0ms, background 200ms linear 120ms;
            }