[v-cloak] {
    display: none
}

.text-brand {
    color: #aa1994 !important
}

.text-primary {
    color: #0f416f !important
}

.text-primary-light {
    color: #e7ecf0 !important
}

.text-secondary {
    color: #71b3e3 !important
}

.text-secondary-light {
    color: #f1f7fc !important
}
/* 10% of secondary */

.text-danger {
    color: #ef7673 !important
}

.text-warning {
    color: #f4a100 !important
}

.text-success {
    color: #5cb85c !important
}

.text-success-light {
    color: #def1de !important
}
/* 20% of success */

.text-gray900 {
    color: #3f4448 !important
}

.text-gray600 {
    color: #aaa !important
}

.text-gray500 {
    color: #b9bec3 !important
}

.text-gray100 {
    color: #f2f2f2 !important
}

.text-light {
    color: #f6f9fb !important
}




.bg-brand {
    background-color: #aa1994 !important
}

.bg-primary {
    background-color: #0f416f !important
}

.bg-primary-light {
    background-color: #e7ecf0 !important
}
/* 10% of primary */

.bg-secondary {
    background-color: #71b3e3 !important
}

.bg-secondary-light {
    background-color: #f1f7fc !important
}
/* 10% of secondary */

.bg-danger {
    background-color: #ef7673 !important
}

.bg-warning {
    background-color: #f4a100 !important
}

.bg-success {
    background-color: #5cb85c !important
}

.bg-success-light {
    background-color: #def1de !important
}
/* 20% of success */

.bg-gray900 {
    background-color: #3f4448 !important
}

.bg-gray600 {
    background-color: #8b9095 !important
}

.bg-gray500 {
    background-color: #b9bec3 !important
}

.bg-gray100 {
    background-color: #f2f2f2 !important
}

.bg-light {
    background-color: #f6f9fb !important
}


.status {
    font-weight: bold;
}

    .status.status-delivered {
        color: #5cb85c;
    }

    .status.status-saved {
        color: #71b3e3;
    }

    .status.status-in-review {
        color: #f4a100;
    }



body {
    margin: 0;
    padding-bottom: 50px;
    background: #8c939c;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    height: 100%;
    font-weight: 500;
    color: #444;
    background-image: url(/img/bg.jpg);
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}


* {
    box-sizing: border-box;
}


.wrapper {
    min-width: 1000px;
    max-width: 1200px;
    border: solid 1px #f2f2f2;
    margin: 40px auto;
    border-radius: 5px;
}

.page-footer {
    text-align: center;
    color: #ddd;
    margin-top:40px;
    font-weight:400;
}




input, select, textarea {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
}


h1 {
    color: #0f416f;
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.2px;
    line-height: 44px;
}

h2 {
    color: #0f416f;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

    h1 span,
    h2 span {
        color: #999;
        font-weight: 400;
        margin-left: 5px;
    }

/* Small all caps headlines */
h6 {
    margin: 0;
    padding: 0;
    color: #999;
    font-size: 14px;
    font-weight: 500;
}

/* Content padding */
main {
    padding: 30px;
    background-color: #f6f9fb;
    min-height: 400px;
}


/* Top ***************************************/
nav {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    background: #fff;
    border-bottom: solid 1px #f2f2f2;
}

    /* Brand */
    nav .logo {
        margin: 0 30px;
        display: flex;
        align-items: center;
    }

        nav .logo img {
            height: 34px;
        }

    /* Page Navigation */
    nav .navigation {
        flex-grow: 2;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0 0 0 30px;
        border-left: solid 1px #f2f2f2;
        border-right: solid 1px #f2f2f2;
    }

        nav .navigation li {
            display: inline-block;
        }

            nav .navigation li a {
                display: inline-block;
                padding: 0 20px;
                height: 40px;
                line-height: 40px;
                border-radius: 20px;
                color: #0f416f;
                font-weight: 600;
                font-size: 18px;
                margin-right: 10px;
            }

                nav .navigation li a:hover {
                    background: #f6f9fb;
                }

            nav .navigation li.active a {
                background: #0f416f;
                color: #fff;
            }

    /* Signout button */
    nav .sign-out {
        border: none;
        padding: 30px;
        color: #b9bec3;
        line-height:25px;
    }



/* Page header *******************************/
header {
    padding: 35px 30px 20px 30px;
    background: #fff;
    border-bottom: solid 1px #f2f2f2;
    display: flex;
    justify-content: flex-start;
    align-content: center;
}


    /* Choose date */
    header .date-picker {
        overflow: hidden;
        margin-left: 30px;
    }

        header .date-picker select, select.form-control {
            outline: none;
            padding: 0 10px;
            min-width: 120px;
            height: 42px;
            line-height: 42px;
            border: solid 1px #b7c6d4;
            border-radius: 3px;
            font-size: 16px;
            font-weight: 600;
            color: #6f8da9;
        }

            header .date-picker select:focus {
                border-color: #0f416f;
                color: #0f416f;
                background: #f6f9fb;
            }


    /* Extra details */
    header .details {
        display: flex;
    }

        header .details .stat {
            margin-left: 30px;
            padding: 0px 15px;
            height: 34px;
            line-height: 34px;
            color: #0f416f;
            font-size: 16px;
            background-color: #f6f9fb;
            border-radius: 100px;
        }

            header .details .stat.text-danger {
                margin-left: 10px;
                background-color: #fdeeee;
            }

            header .details .stat.text-success {
                margin-left: 10px;
                background-color: #dbf9db;
            }



    /* Page actions */
    header .actions {
        text-align: right;
        flex-grow: 2;
    }



/* Sections **********************************/
section {
    background: #fff;
    border: solid 2px #dbe3ea;
    border-radius: 4px;
    margin-bottom: 10px;
}

    section .header {
        padding: 0px 20px;
        line-height: 60px;
    }

        section .header button {
            height: auto
        }


    section.prize-group {
        margin-bottom: 35px;
    }


/* Tables ***********************************/
table {
    text-align: left;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    color: #b9bec3;
}

section table {
    border-top: solid 2px #dbe3ea;
}

table th,
table td {
    padding: 5px 2px;
    font-size: 16px;
    height: 46px;
}

table tr th:first-child,
table tr td:first-child {
    padding-left: 20px;
}

table tr th:last-child,
table tr td:last-child {
    padding-right: 20px;
}

table tr td {
    color: #555;
}

/* Table head */
table thead th {
    padding-top: 30px;
}

/* Table body */
table tbody tr {
    border-top: solid 1px #f2f2f2;
}


    table tbody tr:hover td {
        background: #f1f7fc;
    }

table tbody i {
    margin-right: 5px;
}

/*Table foot */
table tfoot tr {
    border-top: solid 1px #f2f2f2
}

table tfoot td {
    padding: 15px 20px;
}


/* Preview & Build column links  */
.preview {
}

    .preview a:nth-child(1) {
        margin-right: 10px;
    }

    /*.build a:link,
    .build a:visited,*/
    .preview a:link,
    .preview a:visited {
        color: #777;
    }

        .preview a:link:hover {
            color: #3f84b6;
        }

/*table tr:hover .build a,*/
table tr:hover .preview a {
    color: #71b3e3;
}



/* Links ***********************************/
a:link,
a:visited {
    color: #71b3e3;
    text-decoration: none;
}

a:hover,
a:active {
    color: #3f84b6;
}

a.text-danger:link,
a.text-danger:visited {
    color: #ef7673;
    text-decoration: none;
}

a.text-danger:hover,
a.text-danger:active {
    color: #dd4844 !important;
}



/* Buttons ********************************/
.button {
    outline: none;
    display: inline-block;
    padding: 0 20px;
    line-height: 38px;
    border: solid 2px #71b3e3;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #71b3e3;
    background: transparent;
    cursor: pointer;
}

    .button:hover {
        border-color: #3f84b6;
        color: #3f84b6;
    }


.button-success {
    border: solid 2px #5cb85c;
    color: #5cb85c;
}

    .button-success:hover {
        border-color: #3c983c;
        color: #3c983c;
        /*background-color: rgba(92,194,92,0.2);*/
    }
.button-danger {
    border: solid 2px #ef7673;
    color: #ef7673;
}

    .button-danger:hover {
        border-color: #dd4844;
        color: #dd4844;
    }

.style-borderless {
    border: 0;
    padding: 0 10px;
    line-height: 19px;
}



/* Utilites ********************************/

.p-0 {
    padding: 0;
}

.right {
    float: right;
}

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

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