@import "../css/dom.css";

* {
    box-sizing: border-box;
    font-family: 'Lato', sans-serif, Verdana, Arial;
    font-size: inherit;
}

html {
    width: 100%;
    height: 100%;
}

body {
    cursor: default;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 100%;
    color: white;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hidden-sm {
    display: none;
}

@media (min-width: 400px) {
    .hidden-sm {
        display: inline-block;
    }
}

a {
    cursor: pointer;
    color: #1779B8;
}
.copy {
    background: none;
    color: black !important;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.clearfix:before {
    content: " "; /* Older browser do not support empty content */
    display: table;
    box-sizing: border-box;
}

.clearfix:after {
    content: " "; /* Older browser do not support empty content */
    display: table;
    clear: both;
    box-sizing: border-box;
}

.focusable-root.focus-keyboard {
    outline: 2px solid rgb(55,140,197);
}

.log {
    position: relative;
    z-index: 10000000;
}

.background-gradient {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.6+1,0.4+67,0+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 1%, rgba(0,0,0,0.4) 67%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.4) 67%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.4) 67%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}


.background {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+0,0.9+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
    width: 100%;
    height: 100%;
}


.background-controls {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0.5+6,0.2+19,0+50,0.2+77,0.6+90,0.9+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 6%, rgba(0,0,0,0.2) 19%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 77%, rgba(0,0,0,0.6) 90%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 6%,rgba(0,0,0,0.2) 19%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.2) 77%,rgba(0,0,0,0.6) 90%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 6%,rgba(0,0,0,0.2) 19%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.2) 77%,rgba(0,0,0,0.6) 90%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
    width: 100%;
    height: 100%;
}

.clickable {
    cursor: pointer;
}

/*
    font size
*/
.font-xs {
    font-size: 0.6em;
}

.font-sm {
    font-size: 0.8em;
}

.font-md {
    font-size: 1em;
}

.font-lg {
    font-size: 1.3em;
}

.font-xl {
    font-size: 1.6em;
}

.font-xxl {
    font-size: 2em;
}


.font-bold {
    font-weight: bold;
}

/*
    focus
*/
.focus-keyboard {
    outline-color: rgb(55,140,197);
    outline-style: auto;
    outline-width: 5px;
    outline-offset: -2px;
}

/*
    font awesome
*/
.fa-fw-left {
    text-align: left;
}

/*
    animation
*/
.animate-opacity {
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
}

.animate {
    transition: padding 0.1s ease-in-out, width 0.1s ease-in-out, height 0.1s ease-in-out, max-height 0.1s ease-in-out;
    -webkit-transition: padding 0.1s ease-in-out, width 0.1s ease-in-out, height 0.1s ease-in-out, max-height 0.1s ease-in-out;
}

.animate-all {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.btn {
    cursor: pointer;
    text-decoration: none !important;
    border: 1px solid rgba(0,0,0,0);
}

    .btn:disabled {
        cursor: default;
    }

    .btn:focus {
        outline: none;
    }

    .btn.focus-keyboard {
        border: 1px solid white;
    }


.btn-preview {
    width: 100%;
}

.btn-icon {
    background: none;
    color: inherit;
    padding: 0.6em 0.8em;
    margin: .2em .2em;
}

    .btn-icon:disabled {
        color: gray;
    }

        .btn-icon:disabled:active {
            color: gray;
        }

    .btn-icon:active {
        color: rgb(55,140,197);
    }

    .btn-icon.focus-keyboard {
        border: 1px solid rgb(55,140,197);
    }


    .btn-icon.checked {
        color: rgb(55,140,197);
    }

.btn-home {
    vertical-align: top;
    padding: 0;
    margin: 0;
}

.btn-cast {
    width: 1em;
    height: 1em;
}

.btn-share {
    padding: 0;
    margin: 0;
    margin-right: 1em;
    display: inline-block;
}

    .btn-share .icon {
        margin: 0;
    }

.btn-default {
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 0.6em 0.8em;
    margin: .2em .2em;
}

    .btn-default:active {
        background-color: #075A90;
    }

    .btn-default:disabled {
        background-color: #075A90;
        color: darkgray;
    }


    .btn-default.checked {
        background-color: #075A90;
    }

.btn-comment {
    background-color: rgb(55,140,197);
    padding: 0.6em 0.8em;
    color: white;
    margin: .2em .2em;
}

    .btn-comment:active {
        background-color: #075A90;
    }

    .btn-comment:disabled {
        background-color: #075A90;
        color: darkgray;
    }

.btn-footer {
    background-color: rgb(55,140,197);
    padding: 0.6em 0.8em;
    color: white;
    margin: .2em .2em;
}

    .btn-footer:active {
        background-color: #075A90;
    }

    .btn-footer:disabled {
        background-color: #075A90;
        color: darkgray;
    }

.btn-bright {
    background-color: rgb(241,129,0);
    padding: 0.6em 0.8em;
    color: white;
}

    .btn-bright:disabled {
        background-color: rgb(174, 93, 0);
        color: darkgray;
    }


.poster .btn-bright:disabled {
    background: none;
    color: white;
}

.btn-cancel {
    position: absolute;
    right: 1em;
    top: 1em;
}

.btn .label {
    padding: 0 .3em;
    letter-spacing: 0.2em;
}

.btn.btn-footer .label {
    letter-spacing: normal;
}

.btn .live.icon {
    color: red;
}

/*filterselect*/
.filterselect {
}

    .filterselect input {
        width: 100%;
    }

    .filterselect .options {
    }

    .filterselect .option {
    }

.filterselect .option .active {

}