src/utils/ui/less/style.less
.io3d {

    @text-color: white;
    @text-color-gray: rgba(255,255,255,0.35);
    @text-color-gray-link: rgba(255,255,255,0.35);
    @font-size-text: 18px;

    &-message-list {
        z-index: 100001;
        position: fixed;
        top: 0;
        left: 50%;
        margin-left: -200px;
        width: 400px;

        font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
        font-weight: normal;
        letter-spacing: 1px;
        line-height: 1.3;
        text-align: center;

        .message {
            display: block;
            opacity: 0;
            .spacer {
                display: block;
                height: 10px;
            }
            .text {
                display: inline-block;
                padding: 10px 12px 10px 12px;
                border-radius: 3px;
                color: white;
                font-size: @font-size-text;
                a {
                    color: white;
                    text-decoration: none;
                    padding-bottom: 0px;
                    border-bottom: 2px solid white;
                }
            }
            .neutral {
                background: hsla(0,0,0, 0.9);
            }
            .success {
                background: linear-gradient(50deg, hsla(110, 90%, 34%, 0.93), hsla(90, 90%, 40%, 0.93));
            }
            .warning {
                background: linear-gradient(50deg, hsla(40, 90%, 34%, 0.93), hsla(52, 90%, 40%, 0.93));
            }
            .error {
                background: linear-gradient(50deg, hsla(355, 90%, 34%, 0.93), hsla(15, 90%, 40%, 0.93));
            }
        }
    }

    &-overlay {

        // prevent padding changing dimensions
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        z-index:100000;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;

        font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
        font-weight: 200;
        font-size: @font-size-text;
        letter-spacing: 1px;
        color: white;
        text-align: center;
        line-height: 1.3;

        background: linear-gradient(70deg, hsla(250, 35%, 10%, 0.96), hsla(200, 20%, 25%, 0.96));

        @-webkit-keyframes overlay-fade-in {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        @keyframes overlay-fade-in {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        
        @-webkit-keyframes overlay-fade-out {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }
        @keyframes overlay-fade-out {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        .centered-content {
            display: inline-block;
            position: relative;
            top: 50%;
            text-align: left;
            .button {
                margin-right: 4px;
                margin-top: 1.5em;
            }
        }

        .bottom-container {
            width: 100%;
            display: block;
            position: absolute;
            bottom: 1em;
            .bottom-content {
                display: inline-block;
                position: relative;
                margin-left: auto;
                margin-right: auto;
                text-align: left;
                color: @text-color-gray;
                .clickable {
                    cursor: pointer;
                    -webkit-transition: color 500ms;
                    transition: color 500ms;
                    &:hover {
                        color: @text-color;
                    }
                }
                a {
                    color: @text-color-gray;
                    text-decoration: none;
                    -webkit-transition: color 500ms;
                    transition: color 500ms;
                    &:hover {
                        color: @text-color;
                    }
                }
            }
        }

        @-webkit-keyframes content-slide-in {
            0% { -webkit-transform: translateY(-40%); }
            100% { -webkit-transform: translateY(-50%); }
        }
        @keyframes content-slide-in {
            0% { transform: translateY(-40%); }
            100% { transform: translateY(-50%); }
        }
        
        @-webkit-keyframes content-slide-out {
            0% { -webkit-transform: translateY(-50%); }
            100% { -webkit-transform: translateY(-40%); }
        }
        @keyframes content-slide-out {
            0% { transform: translateY(-50%); }
            100% { transform: translateY(-40%); }
        }

        h1 {
            margin: 0 0 0.5em 0;
            font-size: 42px;
            font-weight: 200;
            color: white;
        }
        p {
            margin: 1em 0 0 0;
            font-size: @font-size-text;
            font-weight: 200;
        }
        .hint {
            position: relative;
            margin: 1em 0 0 0;
            color: @text-color-gray;
            font-size: @font-size-text;
            font-weight: 200;
            a {
                color: @text-color-gray-link;
                text-decoration: none;
                &:hover {
                    color: @text-color;
                }
                -webkit-transition: color 600ms;
                transition: color 600ms;
            }
        }

        .button {
            cursor: pointer;
            display: inline-block;
            color: @text-color-gray;
            width: 40px;
            height: 40px;
            line-height: 32px;
            border: 2px solid @text-color-gray;
            border-radius: 50%;
            text-align: center;
            font-size: @font-size-text;
            font-weight: 200;
            &:hover {
                background-color: rgba(255,255,255,0.1);
                color: @text-color;
                border: 2px solid @text-color;
            }
            -webkit-transition: opacity 300ms, color 300ms;
            transition: opacity 300ms, color 300ms;
            &-highlighted {
                color: @text-color;
                border: 2px solid @text-color;
            }
        }

        .close-button {
            display: block;
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: @font-size-text;
            font-weight: 200;
        }

        input, select, option, textarea {
            font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
            font-size: 24px;
            color: white;
            font-weight: normal;
            letter-spacing: 1px;
            outline: none;
            margin: 0 0 0 0;
            color: white;
        }
        select, option, input:not([type='checkbox']):not([type='range']) {
            padding: 0.2em 0 0.4em 0;
            width: 100%;
            line-height: 20px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0px;
            border: 0px;
            background: transparent;
            border-bottom: 2px solid rgba(255,255,255,0.3);
            &:focus {
                border-color: white;
            }
            -webkit-transition: border-color 1s;
            transition: border-color 1s;
        }
        textarea {
            display: box;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding: 0.2em 0 0.4em 0;
            min-width: 100%;
            max-width: 100%;
            line-height: 26px;
            border: 0px;
            background: rgba(255,255,255,0.08);
            border-bottom: 2px solid rgba(255,255,255,0.3);
        }

        input[type='checkbox'] {
            position: relative;
            height: 20px;
            vertical-align: bottom;
            margin: 0;
        }

        .reveal-api-key-button {
            cursor: pointer;
            position: absolute;
            background: hsla(0,0,100%,0.1);
            border-radius: 2px;
            bottom: 0.7em;
            padding: 0.1em 0.2em 0.2em 0.2em;
            line-height: 20px;
            &:hover {
                color: white;
            }
            -webkit-transition: color 600ms;
            transition: color 600ms;
        }

        a {
            color: @text-color;
            text-decoration: none;
        }

        .key-menu {
            position: relative;
            margin: 3em 0 0 0;
            .key-image {
                width: 172px;
                height: 127px;
                height: 127px;
            }
            .key-button {
                position: absolute;
                left: 156px;
                height: 36px;
                line-height: 36px;
                background: rgba(255,255,255,0.1);
                cursor: pointer;
                padding: 0 14px 0 14px;
                border-radius: 2px;
                -webkit-transition: background 300ms linear;
                transition: background 300ms linear;
                &:hover {
                    background: rgba(255,255,255,0.3);
                }
            }
            .go-to-publishable-api-key-ui {
                top: 11px;
            }
            .go-to-secret-api-key-ui {
                bottom: 11px;
            }
        }

        .regegenerate-secret-key-button {
            cursor: pointer;
        }

        .publishable-api-keys {
            .list {
                max-height: 50vh;
                overflow: auto;
                padding: 0 15px 0 0;
                .key-item {
                    position: relative;
                    background: rgba(255,255,255,0.1);
                    border-radius: 3px;
                    margin-bottom: 12px;
                    padding: 4px 5px 3px 8px;
                }
                .key {
                    font-weight: 200 !important;
                    border-bottom: 0 !important;
                    margin-bottom: 0 !important;
                    padding: 0 !important;
                }
                .domains {
                    margin: 0 0 0 0 !important;
                }
                .edit-domains {

                }
                .button {
                    position: absolute !important;
                    margin: 0 !important;
                    background-repeat: no-repeat;
                    background-position: center;
                    color: white;
                    opacity:0.5;
                    &:hover {
                        opacity:1;
                    }
                }
                .delete-key-button {
                    right: 8px;
                    top: 9px;
                }
                .edit-domains-button {
                    positions: absolute;
                    right: 56px;
                    top: 9px;
                    background-size: 75%;
                    padding: 5px;
                }
            }
            .generate-new-key-button {
                margin: 1.5em 0 0 0;
                display: inline-block;
                cursor: pointer;
            }
        }

    }

}