/* -- box model --------------------------------------- */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* -- Base style -------------------------------------- */
html {
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.4;
    color: #212121;
    background-color: #27272b;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* -- Google typography ------------------------------- */
.title {
    font-size: 24px;
    font-weight: 300;
    line-height: 0;
    color: #212121;
    text-transform: inherit;
    letter-spacing: inherit;
}

.caption {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.1;
    color: #bdbdbd;
    text-transform: inherit;
    letter-spacing: inherit;
}

/* -- Ripple-effect ----------------------------------- */
.ripple-effect {
    position: relative;
    overflow: hidden;
    -webkit-transform: translatez(0);
}

.ink {
    display: block;
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    transform: scale(0);
}

.ink {
    background: #fff;
    opacity: 1;
}

    .ink.animate {
        -webkit-animation: ripple-effect 0.5s linear;
        -o-animation: ripple-effect 0.5s linear;
        animation: ripple-effect 0.5s linear;
    }

@keyframes ripple-effect {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
        transform: scale(2.5);
    }
}

@-webkit-keyframes ripple-effect {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
        transform: scale(2.5);
    }
}

@-moz-keyframes ripple-effect {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
        transform: scale(2.5);
    }
}

@-ms-keyframes ripple-effect {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
        transform: scale(2.5);
    }
}

@-o-keyframes ripple-effect {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
        transform: scale(2.5);
    }
}

/* -- Dashboard --------------------------------------- */
.dashboard {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    padding: 5px;
    margin: 0;
}

    .dashboard > * {
        display: block;
        float: left;
        margin: 5px;
    }

/* -- Tiles ------------------------------------------- */
.tile {
    color: #212121;
    overflow: hidden;
    cursor: pointer;
    outline: 0;
    border: 0;
    border-radius: 0;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

    .tile:hover,
    .tile:active,
    .tile.active,
    .tile:focus,
    .tile:active:focus,
    .tile.active:focus {
        -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    }
    /* -- Tiles content ----------------------------------- */
    .tile .content-wrapper {
        position: absolute;
        display: block;
        top: 0;
        width: 100%;
        -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
        -o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    }

        .tile .content-wrapper .tile-content {
            position: relative;
            display: block;
            overflow: hidden;
        }

            .tile .content-wrapper .tile-content .tile-img {
                position: relative;
                display: block;
                width: 100%;
                margin: 0 auto;
                background-repeat: no-repeat;
                background-position: center center;
                -webkit-background-size: contain;
                -moz-background-size: contain;
                -o-background-size: contain;
                background-size: contain;
            }

                .tile .content-wrapper .tile-content .tile-img.tile-img-sm {
                    position: absolute;
                    margin: 0;
                    padding: 0;
                    display: block;
                    opacity: 0.3;
                }

                .tile .content-wrapper .tile-content .tile-img.tile-img-bg {
                    position: absolute;
                    background-position: left top;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                }

            .tile .content-wrapper .tile-content .tile-holder {
                position: relative;
                display: block;
                padding: 0;
            }

                .tile .content-wrapper .tile-content .tile-holder.tile-holder-sm {
                    position: absolute;
                    margin: 0;
                    padding: 0;
                }
/* -- Tiles color ------------------------------------- */
.tile-red {
    background-color: #424242;
}

    .tile-red .tile-content,
    .tile-red .title {
        color: #eceff1;
    }

    .tile-red:hover,
    .tile-red:active,
    .tile-red.active {
        background-color: #313131;
    }

    .tile-red:focus {
        background-color: #00467b;
    }

    .tile-red:disabled,
    .tile-red.disabled,
    .tile-red[disabled] {
        background-color: #b3b3b3;
    }

    .tile-red .ink {
        background-color: #00467b;
    }

.tile-red-reverse {
    background-color: #e84e40;
}

    .tile-red-reverse:hover {
        background-color: #eceff1;
    }

        .tile-red-reverse:hover .tile-content,
        .tile-red-reverse:hover .title {
            color: #e84e40;
        }

.tile-red-inverse {
    background-color: #eceff1;
}

    .tile-red-inverse .tile-content,
    .tile-red-inverse .title {
        color: #e84e40;
    }

.tile-red-inverse-reverse .tile-content,
.tile-red-inverse-reverse .title {
    color: #e84e40;
}

.tile-red-inverse-reverse:hover {
    background-color: #e84e40;
}

    .tile-red-inverse-reverse:hover .tile-content,
    .tile-red-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-red-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-pink {
    background-color: #3B9ADC;
}

    .tile-pink .tile-content,
    .tile-pink .title {
        color: #eceff1;
    }

    .tile-pink:hover,
    .tile-pink:active,
    .tile-pink.active {
        background-color: #00467b;
    }

    .tile-pink:focus {
        background-color: #00467b;
    }

    .tile-pink:disabled,
    .tile-pink.disabled,
    .tile-pink[disabled] {
        background-color: #b3b3b3;
    }

    .tile-pink .ink {
        background-color: #00467b;
    }

.tile-pink-reverse {
    background-color: #ec407a;
}

    .tile-pink-reverse:hover {
        background-color: #eceff1;
    }

        .tile-pink-reverse:hover .tile-content,
        .tile-pink-reverse:hover .title {
            color: #ec407a;
        }

.tile-pink-inverse {
    background-color: #eceff1;
}

    .tile-pink-inverse .tile-content,
    .tile-pink-inverse .title {
        color: #ec407a;
    }

.tile-pink-inverse-reverse .tile-content,
.tile-pink-inverse-reverse .title {
    color: #ec407a;
}

.tile-pink-inverse-reverse:hover {
    background-color: #ec407a;
}

    .tile-pink-inverse-reverse:hover .tile-content,
    .tile-pink-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-pink-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-purple {
    background-color: #3B9ADC;
}

    .tile-purple .tile-content,
    .tile-purple .title {
        color: #eceff1;
    }

    .tile-purple:hover,
    .tile-purple:active,
    .tile-purple.active {
        background-color: #00467b;
    }

    .tile-purple:focus {
        background-color: #00467b;
    }

    .tile-purple:disabled,
    .tile-purple.disabled,
    .tile-purple[disabled] {
        background-color: #b3b3b3;
    }

    .tile-purple .ink {
        background-color: #00467b;
    }

.tile-purple-reverse {
    background-color: #ab47bc;
}

    .tile-purple-reverse:hover {
        background-color: #eceff1;
    }

        .tile-purple-reverse:hover .tile-content,
        .tile-purple-reverse:hover .title {
            color: #ab47bc;
        }

.tile-purple-inverse {
    background-color: #eceff1;
}

    .tile-purple-inverse .tile-content,
    .tile-purple-inverse .title {
        color: #ab47bc;
    }

.tile-purple-inverse-reverse .tile-content,
.tile-purple-inverse-reverse .title {
    color: #ab47bc;
}

.tile-purple-inverse-reverse:hover {
    background-color: #ab47bc;
}

    .tile-purple-inverse-reverse:hover .tile-content,
    .tile-purple-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-purple-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-deep-purple {
    background-color: #7e57c2;
}

    .tile-deep-purple .tile-content,
    .tile-deep-purple .title {
        color: #eceff1;
    }

    .tile-deep-purple:hover,
    .tile-deep-purple:active,
    .tile-deep-purple.active {
        background-color: #5e35b1;
    }

    .tile-deep-purple:focus {
        background-color: #512da8;
    }

    .tile-deep-purple:disabled,
    .tile-deep-purple.disabled,
    .tile-deep-purple[disabled] {
        background-color: #b3b3b3;
    }

    .tile-deep-purple .ink {
        background-color: #00467b;
    }

.tile-deep-purple-reverse {
    background-color: #7e57c2;
}

    .tile-deep-purple-reverse:hover {
        background-color: #eceff1;
    }

        .tile-deep-purple-reverse:hover .tile-content,
        .tile-deep-purple-reverse:hover .title {
            color: #7e57c2;
        }

.tile-deep-purple-inverse {
    background-color: #eceff1;
}

    .tile-deep-purple-inverse .tile-content,
    .tile-deep-purple-inverse .title {
        color: #7e57c2;
    }

.tile-deep-purple-inverse-reverse .tile-content,
.tile-deep-purple-inverse-reverse .title {
    color: #7e57c2;
}

.tile-deep-purple-inverse-reverse:hover {
    background-color: #7e57c2;
}

    .tile-deep-purple-inverse-reverse:hover .tile-content,
    .tile-deep-purple-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-deep-purple-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-indigo {
    background-color: #3B9ADC;
}

    .tile-indigo .tile-content,
    .tile-indigo .title {
        color: #eceff1;
    }

    .tile-indigo:hover,
    .tile-indigo:active,
    .tile-indigo.active {
        background-color: #00467b;
    }

    .tile-indigo:focus {
        background-color: #00467b;
    }

    .tile-indigo:disabled,
    .tile-indigo.disabled,
    .tile-indigo[disabled] {
        background-color: #b3b3b3;
    }

    .tile-indigo .ink {
        background-color: #00467b;
    }

.tile-indigo-reverse {
    background-color: #5c6bc0;
}

    .tile-indigo-reverse:hover {
        background-color: #eceff1;
    }

        .tile-indigo-reverse:hover .tile-content,
        .tile-indigo-reverse:hover .title {
            color: #5c6bc0;
        }

.tile-indigo-inverse {
    background-color: #eceff1;
}

    .tile-indigo-inverse .tile-content,
    .tile-indigo-inverse .title {
        color: #5c6bc0;
    }

.tile-indigo-inverse-reverse .tile-content,
.tile-indigo-inverse-reverse .title {
    color: #5c6bc0;
}

.tile-indigo-inverse-reverse:hover {
    background-color: #5c6bc0;
}

    .tile-indigo-inverse-reverse:hover .tile-content,
    .tile-indigo-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-indigo-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-blue {
    background-color: #738ffe;
}

    .tile-blue .tile-content,
    .tile-blue .title {
        color: #eceff1;
    }

    .tile-blue:hover,
    .tile-blue:active,
    .tile-blue.active {
        background-color: #4e6cef;
    }

    .tile-blue:focus {
        background-color: #455ede;
    }

    .tile-blue:disabled,
    .tile-blue.disabled,
    .tile-blue[disabled] {
        background-color: #b3b3b3;
    }

    .tile-blue .ink {
        background-color: #00467b;
    }

.tile-blue-reverse {
    background-color: #738ffe;
}

    .tile-blue-reverse:hover {
        background-color: #eceff1;
    }

        .tile-blue-reverse:hover .tile-content,
        .tile-blue-reverse:hover .title {
            color: #738ffe;
        }

.tile-blue-inverse {
    background-color: #eceff1;
}

    .tile-blue-inverse .tile-content,
    .tile-blue-inverse .title {
        color: #738ffe;
    }

.tile-blue-inverse-reverse .tile-content,
.tile-blue-inverse-reverse .title {
    color: #738ffe;
}

.tile-blue-inverse-reverse:hover {
    background-color: #738ffe;
}

    .tile-blue-inverse-reverse:hover .tile-content,
    .tile-blue-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-blue-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-light-blue {
    background-color: #424242;
}

    .tile-light-blue .tile-content,
    .tile-light-blue .title {
        color: #eceff1;
    }

    .tile-light-blue:hover,
    .tile-light-blue:active,
    .tile-light-blue.active {
        background-color: #313131;
    }

    .tile-light-blue:focus {
        background-color: #00467b;
    }

    .tile-light-blue:disabled,
    .tile-light-blue.disabled,
    .tile-light-blue[disabled] {
        background-color: #b3b3b3;
    }

    .tile-light-blue .ink {
        background-color: #00467b;
    }

.tile-light-blue-reverse {
    background-color: #29b6f6;
}

    .tile-light-blue-reverse:hover {
        background-color: #eceff1;
    }

        .tile-light-blue-reverse:hover .tile-content,
        .tile-light-blue-reverse:hover .title {
            color: #29b6f6;
        }

.tile-light-blue-inverse {
    background-color: #eceff1;
}

    .tile-light-blue-inverse .tile-content,
    .tile-light-blue-inverse .title {
        color: #29b6f6;
    }

.tile-light-blue-inverse-reverse .tile-content,
.tile-light-blue-inverse-reverse .title {
    color: #29b6f6;
}

.tile-light-blue-inverse-reverse:hover {
    background-color: #29b6f6;
}

    .tile-light-blue-inverse-reverse:hover .tile-content,
    .tile-light-blue-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-light-blue-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-cyan {
    background-color: #3B9ADC;
}

    .tile-cyan .tile-content,
    .tile-cyan .title {
        color: #eceff1;
    }

    .tile-cyan:hover,
    .tile-cyan:active,
    .tile-cyan.active {
        background-color: #00467b;
    }

    .tile-cyan:focus {
        background-color: #00467b;
    }

    .tile-cyan:disabled,
    .tile-cyan.disabled,
    .tile-cyan[disabled] {
        background-color: #b3b3b3;
    }

    .tile-cyan .ink {
        background-color: #3B9ADC;
    }

.tile-cyan-reverse {
    background-color: #26c6da;
}

    .tile-cyan-reverse:hover {
        background-color: #eceff1;
    }

        .tile-cyan-reverse:hover .tile-content,
        .tile-cyan-reverse:hover .title {
            color: #26c6da;
        }

.tile-cyan-inverse {
    background-color: #eceff1;
}

    .tile-cyan-inverse .tile-content,
    .tile-cyan-inverse .title {
        color: #26c6da;
    }

.tile-cyan-inverse-reverse .tile-content,
.tile-cyan-inverse-reverse .title {
    color: #26c6da;
}

.tile-cyan-inverse-reverse:hover {
    background-color: #26c6da;
}

    .tile-cyan-inverse-reverse:hover .tile-content,
    .tile-cyan-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-cyan-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-teal {
    background-color: #26a69a;
}

    .tile-teal .tile-content,
    .tile-teal .title {
        color: #eceff1;
    }

    .tile-teal:hover,
    .tile-teal:active,
    .tile-teal.active {
        background-color: #00897b;
    }

    .tile-teal:focus {
        background-color: #00796b;
    }

    .tile-teal:disabled,
    .tile-teal.disabled,
    .tile-teal[disabled] {
        background-color: #b3b3b3;
    }

    .tile-teal .ink {
        background-color: #00467b;
    }

.tile-teal-reverse {
    background-color: #26a69a;
}

    .tile-teal-reverse:hover {
        background-color: #eceff1;
    }

        .tile-teal-reverse:hover .tile-content,
        .tile-teal-reverse:hover .title {
            color: #26a69a;
        }

.tile-teal-inverse {
    background-color: #eceff1;
}

    .tile-teal-inverse .tile-content,
    .tile-teal-inverse .title {
        color: #26a69a;
    }

.tile-teal-inverse-reverse .tile-content,
.tile-teal-inverse-reverse .title {
    color: #26a69a;
}

.tile-teal-inverse-reverse:hover {
    background-color: #26a69a;
}

    .tile-teal-inverse-reverse:hover .tile-content,
    .tile-teal-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-teal-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-green {
    background-color: #2baf2b;
}

    .tile-green .tile-content,
    .tile-green .title {
        color: #eceff1;
    }

    .tile-green:hover,
    .tile-green:active,
    .tile-green.active {
        background-color: #0a8f08;
    }

    .tile-green:focus {
        background-color: #0a7e07;
    }

    .tile-green:disabled,
    .tile-green.disabled,
    .tile-green[disabled] {
        background-color: #b3b3b3;
    }

    .tile-green .ink {
        background-color: #00467b;
    }

.tile-green-reverse {
    background-color: #2baf2b;
}

    .tile-green-reverse:hover {
        background-color: #eceff1;
    }

        .tile-green-reverse:hover .tile-content,
        .tile-green-reverse:hover .title {
            color: #2baf2b;
        }

.tile-green-inverse {
    background-color: #eceff1;
}

    .tile-green-inverse .tile-content,
    .tile-green-inverse .title {
        color: #2baf2b;
    }

.tile-green-inverse-reverse .tile-content,
.tile-green-inverse-reverse .title {
    color: #2baf2b;
}

.tile-green-inverse-reverse:hover {
    background-color: #2baf2b;
}

    .tile-green-inverse-reverse:hover .tile-content,
    .tile-green-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-green-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-light-green {
    background-color: #3B9ADC;
}

    .tile-light-green .tile-content,
    .tile-light-green .title {
        color: #eceff1;
    }

    .tile-light-green:hover,
    .tile-light-green:active,
    .tile-light-green.active {
        background-color: #00467b;
    }

    .tile-light-green:focus {
        background-color: #00467b;
    }

    .tile-light-green:disabled,
    .tile-light-green.disabled,
    .tile-light-green[disabled] {
        background-color: #b3b3b3;
    }

    .tile-light-green .ink {
        background-color: #00467b;
    }

.tile-light-green-reverse {
    background-color: #9ccc65;
}

    .tile-light-green-reverse:hover {
        background-color: #eceff1;
    }

        .tile-light-green-reverse:hover .tile-content,
        .tile-light-green-reverse:hover .title {
            color: #9ccc65;
        }

.tile-light-green-inverse {
    background-color: #eceff1;
}

    .tile-light-green-inverse .tile-content,
    .tile-light-green-inverse .title {
        color: #9ccc65;
    }

.tile-light-green-inverse-reverse .tile-content,
.tile-light-green-inverse-reverse .title {
    color: #9ccc65;
}

.tile-light-green-inverse-reverse:hover {
    background-color: #9ccc65;
}

    .tile-light-green-inverse-reverse:hover .tile-content,
    .tile-light-green-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-light-green-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-lime {
    background-color: #d4e157;
}

    .tile-lime .tile-content,
    .tile-lime .title {
        color: #eceff1;
    }

    .tile-lime:hover,
    .tile-lime:active,
    .tile-lime.active {
        background-color: #c0ca33;
    }

    .tile-lime:focus {
        background-color: #afb42b;
    }

    .tile-lime:disabled,
    .tile-lime.disabled,
    .tile-lime[disabled] {
        background-color: #b3b3b3;
    }

    .tile-lime .ink {
        background-color: #00467b;
    }

.tile-lime-reverse {
    background-color: #d4e157;
}

    .tile-lime-reverse:hover {
        background-color: #eceff1;
    }

        .tile-lime-reverse:hover .tile-content,
        .tile-lime-reverse:hover .title {
            color: #d4e157;
        }

.tile-lime-inverse {
    background-color: #eceff1;
}

    .tile-lime-inverse .tile-content,
    .tile-lime-inverse .title {
        color: #d4e157;
    }

.tile-lime-inverse-reverse .tile-content,
.tile-lime-inverse-reverse .title {
    color: #d4e157;
}

.tile-lime-inverse-reverse:hover {
    background-color: #d4e157;
}

    .tile-lime-inverse-reverse:hover .tile-content,
    .tile-lime-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-lime-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-yellow {
    background-color: #ffee58;
}

    .tile-yellow .tile-content,
    .tile-yellow .title {
        color: #eceff1;
    }

    .tile-yellow:hover,
    .tile-yellow:active,
    .tile-yellow.active {
        background-color: #fdd835;
    }

    .tile-yellow:focus {
        background-color: #fbc02d;
    }

    .tile-yellow:disabled,
    .tile-yellow.disabled,
    .tile-yellow[disabled] {
        background-color: #b3b3b3;
    }

    .tile-yellow .ink {
        background-color: #00467b;
    }

.tile-yellow-reverse {
    background-color: #ffee58;
}

    .tile-yellow-reverse:hover {
        background-color: #eceff1;
    }

        .tile-yellow-reverse:hover .tile-content,
        .tile-yellow-reverse:hover .title {
            color: #ffee58;
        }

.tile-yellow-inverse {
    background-color: #eceff1;
}

    .tile-yellow-inverse .tile-content,
    .tile-yellow-inverse .title {
        color: #ffee58;
    }

.tile-yellow-inverse-reverse .tile-content,
.tile-yellow-inverse-reverse .title {
    color: #ffee58;
}

.tile-yellow-inverse-reverse:hover {
    background-color: #ffee58;
}

    .tile-yellow-inverse-reverse:hover .tile-content,
    .tile-yellow-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-yellow-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-amber {
    background-color: #424242;
}

    .tile-amber .tile-content,
    .tile-amber .title {
        color: #eceff1;
    }

    .tile-amber:hover,
    .tile-amber:active,
    .tile-amber.active {
        background-color: #313131;
    }

    .tile-amber:focus {
        background-color: #00467b;
    }

    .tile-amber:disabled,
    .tile-amber.disabled,
    .tile-amber[disabled] {
        background-color: #b3b3b3;
    }

    .tile-amber .ink {
        background-color: #00467b;
    }

.tile-amber-reverse {
    background-color: #ffca28;
}

    .tile-amber-reverse:hover {
        background-color: #eceff1;
    }

        .tile-amber-reverse:hover .tile-content,
        .tile-amber-reverse:hover .title {
            color: #ffca28;
        }

.tile-amber-inverse {
    background-color: #eceff1;
}

    .tile-amber-inverse .tile-content,
    .tile-amber-inverse .title {
        color: #ffca28;
    }

.tile-amber-inverse-reverse .tile-content,
.tile-amber-inverse-reverse .title {
    color: #ffca28;
}

.tile-amber-inverse-reverse:hover {
    background-color: #ffca28;
}

    .tile-amber-inverse-reverse:hover .tile-content,
    .tile-amber-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-amber-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-orange {
    background-color: #ffa726;
}

    .tile-orange .tile-content,
    .tile-orange .title {
        color: #eceff1;
    }

    .tile-orange:hover,
    .tile-orange:active,
    .tile-orange.active {
        background-color: #fb8c00;
    }

    .tile-orange:focus {
        background-color: #f57c00;
    }

    .tile-orange:disabled,
    .tile-orange.disabled,
    .tile-orange[disabled] {
        background-color: #b3b3b3;
    }

    .tile-orange .ink {
        background-color: #00467b;
    }

.tile-orange-reverse {
    background-color: #ffa726;
}

    .tile-orange-reverse:hover {
        background-color: #eceff1;
    }

        .tile-orange-reverse:hover .tile-content,
        .tile-orange-reverse:hover .title {
            color: #ffa726;
        }

.tile-orange-inverse {
    background-color: #eceff1;
}

    .tile-orange-inverse .tile-content,
    .tile-orange-inverse .title {
        color: #ffa726;
    }

.tile-orange-inverse-reverse .tile-content,
.tile-orange-inverse-reverse .title {
    color: #ffa726;
}

.tile-orange-inverse-reverse:hover {
    background-color: #ffa726;
}

    .tile-orange-inverse-reverse:hover .tile-content,
    .tile-orange-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-orange-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-deep-orange {
    background-color: #3B9ADC;
}

    .tile-deep-orange .tile-content,
    .tile-deep-orange .title {
        color: #eceff1;
    }

    .tile-deep-orange:hover,
    .tile-deep-orange:active,
    .tile-deep-orange.active {
        background-color: #00467b;
    }

    .tile-deep-orange:focus {
        background-color: #00467b;
    }

    .tile-deep-orange:disabled,
    .tile-deep-orange.disabled,
    .tile-deep-orange[disabled] {
        background-color: #b3b3b3;
    }

    .tile-deep-orange .ink {
        background-color: #00467b;
    }

.tile-deep-orange-reverse {
    background-color: #ff7043;
}

    .tile-deep-orange-reverse:hover {
        background-color: #eceff1;
    }

        .tile-deep-orange-reverse:hover .tile-content,
        .tile-deep-orange-reverse:hover .title {
            color: #ff7043;
        }

.tile-deep-orange-inverse {
    background-color: #eceff1;
}

    .tile-deep-orange-inverse .tile-content,
    .tile-deep-orange-inverse .title {
        color: #ff7043;
    }

.tile-deep-orange-inverse-reverse .tile-content,
.tile-deep-orange-inverse-reverse .title {
    color: #ff7043;
}

.tile-deep-orange-inverse-reverse:hover {
    background-color: #ff7043;
}

    .tile-deep-orange-inverse-reverse:hover .tile-content,
    .tile-deep-orange-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-deep-orange-inverse-reverse .ink {
    background-color: #00467b;
}

.tile-brown {
    background-color: #8d6e63;
}

    .tile-brown .tile-content,
    .tile-brown .title {
        color: #eceff1;
    }

    .tile-brown:hover,
    .tile-brown:active,
    .tile-brown.active {
        background-color: #6d4c41;
    }

    .tile-brown:focus {
        background-color: #5d4037;
    }

    .tile-brown:disabled,
    .tile-brown.disabled,
    .tile-brown[disabled] {
        background-color: #b3b3b3;
    }

    .tile-brown .ink {
        background-color: #00467b;
    }

.tile-brown-reverse {
    background-color: #8d6e63;
}

    .tile-brown-reverse:hover {
        background-color: #eceff1;
    }

        .tile-brown-reverse:hover .tile-content,
        .tile-brown-reverse:hover .title {
            color: #8d6e63;
        }

.tile-brown-inverse {
    background-color: #eceff1;
}

    .tile-brown-inverse .tile-content,
    .tile-brown-inverse .title {
        color: #8d6e63;
    }

.tile-brown-inverse-reverse .tile-content,
.tile-brown-inverse-reverse .title {
    color: #8d6e63;
}

.tile-brown-inverse-reverse:hover {
    background-color: #8d6e63;
}

    .tile-brown-inverse-reverse:hover .tile-content,
    .tile-brown-inverse-reverse:hover .title {
        color: #eceff1;
    }

.tile-brown-inverse-reverse .ink {
    background-color: #00467b;
}
/*-- Tiles size --------------------------------------- */
.tile {
    width: 270px;
    height: 130px;
}

    .tile .content-wrapper .tile-content {
        height: 130px;
        padding: 10px;
    }

        .tile .content-wrapper .tile-content .tile-img {
            height: 86.66666667px;
        }

        .tile .content-wrapper .tile-content .tile-img-bg {
            width: 270px;
            height: 130px;
            margin-left: -10px;
            margin-top: -10px;
        }

        .tile .content-wrapper .tile-content .tile-img-sm {
            width: 65px;
            height: 43.33333333px;
        }

        .tile .content-wrapper .tile-content .tile-img-sm,
        .tile .content-wrapper .tile-content .tile-holder-sm {
            bottom: 10px;
            left: 10px;
        }

    .tile.tile-sqr {
        width: 130px;
    }

        .tile.tile-sqr .content-wrapper .tile-content .tile-img-bg {
            width: 130px;
        }

.tile-lg {
    width: 550px;
    height: 296px;
}

    .tile-lg .content-wrapper .tile-content {
        height: 270px;
        padding: 20px;
    }

        .tile-lg .content-wrapper .tile-content .tile-img {
            height: 180px;
        }

        .tile-lg .content-wrapper .tile-content .tile-img-bg {
            width: 550px;
            height: 270px;
            margin-left: -20px;
            margin-top: -20px;
        }

        .tile-lg .content-wrapper .tile-content .tile-img-sm {
            width: 135px;
            height: 90px;
        }

        .tile-lg .content-wrapper .tile-content .tile-img-sm,
        .tile-lg .content-wrapper .tile-content .tile-holder-sm {
            bottom: 20px;
            left: 20px;
        }

    .tile-lg.tile-sqr {
        width: 270px;
    }

        .tile-lg.tile-sqr .content-wrapper .tile-content .tile-img-bg {
            width: 270px;
        }

.tile-sm {
    width: 130px;
    height: 60px;
}

    .tile-sm .content-wrapper .tile-content {
        height: 60px;
        padding: 5px;
    }

        .tile-sm .content-wrapper .tile-content .tile-img {
            height: 40px;
        }

        .tile-sm .content-wrapper .tile-content .tile-img-bg {
            width: 130px;
            height: 60px;
            margin-left: -5px;
            margin-top: -5px;
        }

        .tile-sm .content-wrapper .tile-content .tile-img-sm {
            width: 30px;
            height: 20px;
        }

        .tile-sm .content-wrapper .tile-content .tile-img-sm,
        .tile-sm .content-wrapper .tile-content .tile-holder-sm {
            bottom: 5px;
            left: 5px;
        }

    .tile-sm.tile-sqr {
        width: 60px;
    }

        .tile-sm.tile-sqr .content-wrapper .tile-content .tile-img-bg {
            width: 60px;
        }
/*-- Display animation -------------------------------- */
.display-animation > * {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.display-animation > .animated {
    -webkit-animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
    -o-animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
    animation: display 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}

.no-js .display-animation > * {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

@keyframes display {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}

@-o-keyframes display {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}

@-ms-keyframes display {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes display {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes display {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}

.flexbox-item {
    padding: 8px;
}

.flexbox-item-grow {
    flex: 1; /* same as flex: 1 1 auto; */
}

.flexbox-item.content {
    /*background: rgba(0, 0, 255, .1);*/
}

.fill-area {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}

.fill-area-content {
    background: rgba(0, 0, 0, .3);
    border: 1px solid #000000;
    /* Needed for when the area gets squished too far and there is content that can't be displayed */
    overflow: auto;
}

.fontIconStyleAdmin {
    font-size: 348px;
    margin-left: 127px;
    opacity: 0.3;
}

a:hover {
    color: black;
}

a::selection {
    color: black;
}

a:focus {
    color: black;
}

.tile-holder span {
    font-family: vazir;
}

align {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* helpers/grid.css */

.grid {
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
    max-width: 20rem;
    width: 90%;
}

/* helpers/hidden.css */

.hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* helpers/icon.css */

.icons {
    display: none;
}

.icon {
    display: inline-block;
    fill: #606468;
    font-size: 16px;
    font-size: 1rem;
    height: 1em;
    vertical-align: middle;
    width: 1em;
}

/* layout/base.css */

* {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%;
    height: 100%;
}

a {
    color: #eee;
    outline: 0;
    text-decoration: none;
}

    a:focus,
    a:hover {
        text-decoration: underline;
    }

/* modules/form.css */

input {
    background-image: none;
    border: 0;
    color: inherit;
    font: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

    input[type='submit'] {
        cursor: pointer;
    }

.form {
    margin: -14px;
    margin: -0.875rem;
}

    .form input[type='password'],
    .form input[type='text'],
    .form input[type='submit'] {
        width: 100%;
    }

.form__field {
    display: flex;
}

.form__input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* modules/login.css */

.login {
    color: #eee;
}

    .login label,
    .login input[type='text'],
    .login input[type='password'],
    .login input[type='submit'] {
        border-radius: 0.25rem;
        /*padding: 16px;*/
        padding: 4%; 
    }

    .login label {
        background-color: #363b41;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        /*padding-left: 20px;
        padding-left: 1.25rem;
        padding-right: 20px;
        padding-right: 1.25rem;*/
    }

    .login input[type='password'],
    .login input[type='text'] {
        background-color: #3b4148;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

        .login input[type='password']:focus,
        .login input[type='password']:hover,
        .login input[type='text']:focus,
        .login input[type='text']:hover {
            background-color: #434a52;
        }

    .login input[type='submit'] {
        background-color: #3B9ADC;
        color: #eee;
        font-weight: 700;
        text-transform: uppercase;
    }

        .login input[type='submit']:focus,
        .login input[type='submit']:hover {
            background-color: #3B9ADC;
        }

/* modules/text.css */

p {
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    margin-top: 24px;
    margin-top: 1.5rem;
}

.text--center {
    text-align: center;
}

.modal-content {
    /*background-color: #20202091 !important;*/
}

#aboutM .modal-dialog .modal-content {
    background-color: #202020 !important;
}

.modal {
}

.vertical-alignment-helper {
    display: table;
    height: 100%;
    width: 100%;
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width: inherit;
    height: inherit;
    /* To center horizontally */
    margin: 0 auto;
    background-color: #141416;
}

.app-title-color {
    color: #6d6d6d !important;
}

.webDicom, .ints-name {
    color: #3B9ADC !important;
}


@media (min-width: 768px)  {
    .modal-dialog {
        width: 450px;
        margin-top: 70px;
    }
    .signin-panel-item {
        width: 80%;
    }
}
@media (max-width: 599px) {
    .modal-dialog {
        /*margin-top: 4%;*/
        padding-top: 0;
        padding-bottom: 0;
    }
    .signin-panel-item {
        width:100%;
    }
    .modal-header{
        padding-top:0;
        padding-bottom:0;
    }
    .modal-body {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.body-signin-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.signin-panel-item {
    margin-bottom:10px;
    height:200px;
}
.signin-panel-label {
    font-weight: normal;
    font-family: 'vazir';
}
.signin-version {
    color: #3B9ADC;
    padding:4px;
}
.version {
    float: left;
}
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../fonts/glyphicons-halflings-regular.eot');
    src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
/*Glyphicons*/
@font-face {
    font-family: 'vazir';
    src: url('../../fonts/vazir/Vazir.eot') format('eot'), url('../../fonts/vazir/Vazir.ttf') format('truetype'), url('../../fonts/vazir/Vazir.woff') format('woff');
}

.refresh {
    display: inline-block;
    font: normal normal normal 30px/1 FontAwesome;
    text-rendering: auto;
    vertical-align: middle;
    color: white;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}